$(document).ready(function(){
    var thePosition = 0;

    $("#selected_News").css("width",function(){
        return ($(this).find("td").length * 105) + "px";
    });

    $("#SelectedToStart").click(function(){
        if(thePosition < 0)
        {
          $("#selected_News").animate({"right": "+=525px"}, 1000);
          thePosition += 525;
          $("#selected_News_Num span[class*='On']").removeClass("On").parent().prev().find("span").addClass("On");
        }
    });
    
    $("#SelectedToEnd").click(function(){
        if(thePosition > ((($("#selected_News td").length)- 5) * -105))
        {
          $("#selected_News").animate({"right": "-=525px"}, 1000);
          thePosition -= 525;
          $("#selected_News_Num span[class*='On']").removeClass("On").parent().next().find("span").addClass("On");
        }
    });
    
    
    for (i=0;i<($("#selected_News td").length / 5);i++)
    {
        $("#selected_News_Num tr").append("<td><span>" + (i+1) + "</span></td>");
    }
    
    $("#selected_News_Num td").each(function(index){
        var newPoNum = (index * -525);
        var newPo = newPoNum + "px";
        /* Activate the first number when the page load */
        if (index == 0){$(this).find("span").addClass("On");}
        $(this).click(function(){
        /* the next 2 line is to reActivate the Number for the sliding news*/
            $(this).parent().find("span").removeClass("On");
            $(this).find("span").addClass("On");
            $("#selected_News").animate({"right": newPo}, 1000);
            thePosition = newPoNum;
        
        });
    });

});