var thisPageNumber = 0;
	
	$(document).ready(function () {
		$('#PortfolioSlider').infiniteCarousel();
		
		$(".CarouselLinks span.Select:first").css("background-image","url('"+PageExtention+"img/select_on.gif')");
		
        $("#OurWork").css("display","block"); 
        
        $(".CarouselLinks span.Select").css("background-image","url('"+PageExtention+"img/select_off.gif')");
        $(".CarouselLinks span[id='" + thisPageNumber + "']").css("background-image","url('"+PageExtention+"img/select_on.gif')");                                  

            
        $("span.Link").hover(function(){                                                           
            $(this).css("background-image","url('"+PageExtention+"img/select_"+$(this).attr("class").substring(5)+"_on.gif')");
        },function(){
            $(this).css("background-image","url('"+PageExtention+"img/select_"+$(this).attr("class").substring(5)+"_off.gif')");
        });        
            
            
        $(".CarouselLinks span.Select").hover(function(){                                           
            $(this).css("background-image","url('"+PageExtention+"img/select_on.gif')");
        },function(){
            if ($(this).attr("id")!=thisPageNumber)
            {
                $(this).css("background-image","url('"+PageExtention+"img/select_off.gif')");
            }
        });            
        
        
        
	});

    $.fn.infiniteCarousel = function () {

        function repeat(str, num) {        
            return new Array( num + 1 ).join( str );
    }
  
    return this.each(function () {
        //var $wrapper = $('> div', this);
        var $wrapper = $('> div', this).css('overflow', 'hidden');
        var $slider = $wrapper.find('> ul'),
            $items = $slider.find('> li'),
            $single = $items.filter(':first'),
            
            singleWidth = parseInt($single.css("width").replace("px",""));
            visible = Math.ceil(parseInt($wrapper.parent().css("width").replace("px","")) / singleWidth), // note: doesn't include padding or border
            currentPage = 0,
            pages = Math.ceil($items.length / visible);   
            
            $slider.css("width",((pages+3) * singleWidth) +"px");

        // 1. Pad so that 'visible' number will always be seen, otherwise create empty items
        if (($items.length % visible) != 0) {
            $slider.append(repeat('<li class="empty" />', visible - ($items.length % visible)));
            $items = $slider.find('> li');
        }
        // to stop the annoying thing, lets try sticking the first to the last
        var elmt = $items.filter(':first');
        //$slider.remove(elmt);                
        $slider.append(elmt);        
        $items = $slider.find('> li');

        // 2. Top and tail the list with 'visible' number of items, top has the last section, and tail has the first
        $items.filter(':first').before($items.slice(-visible).clone().addClass('cloned'));
        $items.filter(':last').after($items.slice(0, visible).clone().addClass('cloned'));
        $items = $slider.find('> li'); // reselect

        if (PageNumber>0)
        {
            gotoPage(PageNumber);
        }

        // 4. paging function
        function gotoPage(page) {
            
            var dir = page < currentPage ? -1 : 1,
                n = Math.abs(currentPage - page),
                left = singleWidth * dir * visible * n;
            
            $wrapper.filter(':not(:animated)').animate({
                scrollLeft : '+=' + left
            }, 500, function () {
                
                if (page == 0) {
                    $wrapper.scrollLeft(singleWidth * visible * pages);
                    page = pages;
                } else if (page > (pages)) {
                    $wrapper.scrollLeft(singleWidth * visible);
                    // reset back to start position
                    page = 1;
                } 

                currentPage = page;
                
                thisPageNumber = currentPage;
                
                if (thisPageNumber>pages-1)
                {
                    thisPageNumber=0;
                }
                
                $(".CarouselLinks span.Select").css("background-image","url('"+PageExtention+"img/select_off.gif')");
                $(".CarouselLinks span.Select[id='"+(thisPageNumber)+"']").css("background-image","url('"+PageExtention+"img/select_on.gif')");
            });                
            
            return false;
        }
        
        // 5. Bind to the forward and back buttons
        //$('span.prev').click(function () {        
        //    return gotoPage(currentPage - 1);                         
        //});
        
        $('span.next').click(function () {            
            return gotoPage(currentPage + 1);
        });
        
        $(".CarouselLinks span.Select").click(function(){
            var newPageNumber = parseInt($(this).attr("id"));
            return gotoPage(newPageNumber);
        });        
        
    });  
};




//    $(document).ready(function() {
//    
//    
//        if ($("#PortfolioSlider")!=null)
//        {
//            $(".CarouselLinks span.Select:first").css("background-image","url('"+PageExtention+"img/select_on.gif')");
//        
//            var arr = $(".PortfolioSlide");
//            var NumberOfItems = arr.length-1;
//            var CurrentSlide=0;
//            var i = 0;
//            var Width = 935;
//            
//            $("#PortfolioSlider ul").css("width", ((NumberOfItems+1) * Width) +"px");
//            
//            // spread the margins of the slides   
//            if (NumberOfItems>1)
//            {
//                // get the last li and move it to the beginning
//                var elmt = $("#PortfolioSlider ul .PortfolioSlide:last");
//                $("#PortfolioSlider ul .PortfolioSlide:last").remove();                
//                $("#PortfolioSlider ul ").prepend(elmt);
//            }         
//            if (NumberOfItems>2)
//            {
//                // get the last li and move it to the beginning
//                var elmt = $("#PortfolioSlider ul .PortfolioSlide:last");
//                $("#PortfolioSlider ul .PortfolioSlide:last").remove();                
//                $("#PortfolioSlider ul ").prepend(elmt);
//            }         
//            // if a page number is passed, then we must slide the page
//            var newMargin = -Width * (NumberOfItems - $("#PortfolioSlider ul .PortfolioSlide[cnt='"+ PageNumber +"']").nextAll("li").length);
//            
//            $("#PortfolioSlider ul").css("left",newMargin);
//                
//            $(".CarouselLinks span.Select").css("background-image","url('"+PageExtention+"img/select_off.gif')");
//            $(".CarouselLinks span[id='" + PageNumber + "']").css("background-image","url('"+PageExtention+"img/select_on.gif')");                                  

//            
//            $(".CarouselLinks span.Link").hover(function(){                                                           
//                $(this).css("background-image","url('"+PageExtention+"img/select_"+$(this).attr("class").substring(5)+"_on.gif')");
//            },function(){
//                $(this).css("background-image","url('"+PageExtention+"img/select_"+$(this).attr("class").substring(5)+"_off.gif')");
//            });        
//            
//            
//            $(".CarouselLinks span.Select").hover(function(){                                           
//                $(this).css("background-image","url('"+PageExtention+"img/select_on.gif')");
//            },function(){
//                if ($(this).attr("id")!=PageNumber)
//                {
//                    $(this).css("background-image","url('"+PageExtention+"img/select_off.gif')");
//                }
//            });            
//            
//            $(".CarouselLinks span.Link").click(function(){         
//                var direction = $(this).attr("Dir");
//                var ml =  parseInt($("#PortfolioSlider ul").css("left").replace("px",""));
//                
//                if (direction=="next")
//                {
//                    ml += Width;  
//                    PageNumber--;                             
//                }
//                else
//                {
//                    ml -= Width;
//                    PageNumber++;                   
//                }
//                
//                if (PageNumber>NumberOfItems)
//                {
//                    PageNumber=0;
//                }
//                else if (PageNumber<0)
//                {
//                    PageNumber = NumberOfItems;
//                }
//                
//                $(".CarouselLinks span.Select").css("background-image","url('"+PageExtention+"img/select_off.gif')");
//                $(".CarouselLinks span[id='" + PageNumber + "']").css("background-image","url('"+PageExtention+"img/select_on.gif')");                

//                $("#PortfolioSlider ul").animate({left: ml + "px"},500,function(){
//                
//                if (direction=="next")
//                {                    
//               
//                }
//                else
//                {
//                    var elmt = $("#PortfolioSlider ul .PortfolioSlide:first");
//                                
//                    $("#PortfolioSlider ul ").append(elmt);                    
//                }                
//                
//                });
//                
//             
//                
//                
//            });
//            
//            
//            
//            $(".CarouselLinks .Select").click(
//                function(){
//                    // hmm
//                    var oldPage=PageNumber;
//                    PageNumber = $(this).attr("id");
//                    var oldMargin = parseInt($("#PortfolioSlider .PortfolioSlide[cnt='"+ PageNumber +"']").css("margin-left").replace("px",""));
//                    
//                    var ml=-oldMargin;
//                                        
//                    for (i=0;i<arr.length;i++)
//                    {
//                        var currentMargin = parseInt($(arr[i]).css("margin-left").replace("px",""));
//                        var NewValue = currentMargin + ml;   
//                        //alert(currentMargin);
//                        //alert(NewValue);
//                        
//                        if (NumberOfItems==1) 
//                        {
//                            if (currentMargin==0)
//                            {
//                                $(arr[i]).animate({marginLeft: (NewValue) + "px"},500);              
//                            }
//                            else
//                            {
//                                $(arr[i]).animate({marginLeft: "0px"},500);              
//                            }    
//                        }
//                        else if (NumberOfItems==2)
//                        {                    
//                            if (NewValue < -Width)
//                            {                    
//                                $(arr[i]).css("margin-left",Width + "px")
//                            }
//                            else if (NewValue>Width)
//                            {
//                                $(arr[i]).css("margin-left","-" + (Width) + "px")
//                            }
//                            else
//                            {
//                                $(arr[i]).animate({marginLeft: (NewValue) + "px"},500);         
//                            }                    

//                        }
//                        else
//                        {
//                            if (NewValue <= (-Width*3))
//                            {                    
//                                NewValue = NewValue + (Width * (NumberOfItems+1));   
//                                $(arr[i]).css("margin-left",NewValue + "px")
//                            }
//                            else if (NewValue>=(Width*(NumberOfItems-1)))
//                            {       
//                                NewValue = NewValue - (Width * (NumberOfItems+1));    
//                                $(arr[i]).css("margin-left", NewValue + "px")
//                            }
//                            else
//                            {
//                                $(arr[i]).animate({marginLeft: (NewValue) + "px"},500);         
//                            }
//                       
//                        }
//                        
//                    }     
//                    
//                    $(".CarouselLinks span.Select").css("background-image","url('"+PageExtention+"img/select_off.gif')");
//                    $(".CarouselLinks span[id='" + PageNumber + "']").css("background-image","url('"+PageExtention+"img/select_on.gif')");                      
//                   
//            });            
//            
//            
//                
//        }    
//        
//        // turn on the slides
//        $("#OurWork").css("display","block");            
    
//        if ($("#PortfolioSlider")!=null)
//        {
//            $(".CarouselLinks span.Select:first").css("background-image","url('"+PageExtention+"img/select_on.gif')");
//        
//            var arr = $(".PortfolioSlide");
//            var NumberOfItems = arr.length-1;
//            var CurrentSlide=0;
//            var i = 0;
//            var Width = 935;
//            // spread the margins of the slides            
//            for (i=0;i<arr.length;i++)
//            {
//                var Offest = i*Width;
//                if ((i==arr.length-1) & (NumberOfItems>1))
//                {
//                    $(arr[i]).css("margin-left","-" + Width + "px");            
//                }
//                else if ((i==arr.length-2) & (NumberOfItems>2))
//                {
//                    $(arr[i]).css("margin-left","-" + Width*2 + "px");            
//                }
//                else
//                {
//                    $(arr[i]).css("margin-left",Offest + "px");            
//                }
//            }

//            // if a page number is passed, then we must slide the page
//            if (PageNumber>0)
//            {
//	            var oldPage=0;

//                var oldMargin = parseInt($("#PortfolioSlider .PortfolioSlide[cnt='"+ PageNumber +"']").css("margin-left").replace("px",""));
//                
//                var ml=-oldMargin;
//                                    
//                for (i=0;i<arr.length;i++)
//                {
//                    var currentMargin = parseInt($(arr[i]).css("margin-left").replace("px",""));
//                    var NewValue = currentMargin + ml;   
//                    //alert(currentMargin);
//                    //alert(NewValue);
//                    
//                    if (NumberOfItems==1) 
//                    {
//                        if (currentMargin==0)
//                        {
//                            $(arr[i]).animate({marginLeft: (NewValue) + "px"},500);              
//                        }
//                        else
//                        {
//                            $(arr[i]).animate({marginLeft: "0px"},500);              
//                        }    
//                    }
//                    else if (NumberOfItems==2)
//                    {                    
//                        if (NewValue < -Width)
//                        {                    
//                            $(arr[i]).css("margin-left",Width + "px")
//                        }
//                        else if (NewValue>Width)
//                        {
//                            $(arr[i]).css("margin-left","-" + (Width) + "px")
//                        }
//                        else
//                        {
//                            $(arr[i]).animate({marginLeft: (NewValue) + "px"},500);         
//                        }                    

//                    }
//                    else
//                    {
//                        if (NewValue <= (-Width*3))
//                        {                    
//                            NewValue = NewValue + (Width * (NumberOfItems+1));   
//                            $(arr[i]).css("margin-left",NewValue + "px")
//                        }
//                        else if (NewValue>=(Width*(NumberOfItems-1)))
//                        {       
//                            NewValue = NewValue - (Width * (NumberOfItems+1));    
//                            $(arr[i]).css("margin-left", NewValue + "px")
//                        }
//                        else
//                        {
//                            $(arr[i]).animate({marginLeft: (NewValue) + "px"},500);         
//                        }
//                   
//                    }
//                    
//                }     
//                
//                $(".CarouselLinks span.Select").css("background-image","url('"+PageExtention+"img/select_off.gif')");
//                $(".CarouselLinks span[id='" + PageNumber + "']").css("background-image","url('"+PageExtention+"img/select_on.gif')");                                  
//            }
//            
//            $(".CarouselLinks span.Link").hover(function(){                                                           
//                $(this).css("background-image","url('"+PageExtention+"img/select_"+$(this).attr("class").substring(5)+"_on.gif')");
//            },function(){
//                $(this).css("background-image","url('"+PageExtention+"img/select_"+$(this).attr("class").substring(5)+"_off.gif')");
//            });        
//            
//            
//            $(".CarouselLinks span.Select").hover(function(){                                           
//                $(this).css("background-image","url('"+PageExtention+"img/select_on.gif')");
//            },function(){
//                if ($(this).attr("id")!=PageNumber)
//                {
//                    $(this).css("background-image","url('"+PageExtention+"img/select_off.gif')");
//                }
//            });            
//            
//            $(".CarouselLinks span.Link").click(function(){         
//                var direction = $(this).attr("Dir");
//                var ml = 0;
//                if (direction=="next")
//                {
//                    ml = Width;  
//                    PageNumber--;              
//                }
//                else
//                {
//                    ml = -Width;
//                    PageNumber++;
//                }
//                
//                if (PageNumber>NumberOfItems)
//                {
//                    PageNumber=0;
//                }
//                else if (PageNumber<0)
//                {
//                    PageNumber = NumberOfItems;
//                }
//                
//                $(".CarouselLinks span.Select").css("background-image","url('"+PageExtention+"img/select_off.gif')");
//                $(".CarouselLinks span[id='" + PageNumber + "']").css("background-image","url('"+PageExtention+"img/select_on.gif')");                
//                
//                for (i=0;i<arr.length;i++)
//                {
//                    var currentMargin = parseInt($(arr[i]).css("margin-left").replace("px",""));
//                    var NewValue = currentMargin + ml;   
//                    
//                    if (NumberOfItems==2)
//                    {                    
//                        if (NewValue < -Width)
//                        {                    
//                            $(arr[i]).css("margin-left",Width + "px")
//                        }
//                        else if (NewValue>Width)
//                        {
//                            $(arr[i]).css("margin-left","-" + (Width) + "px")
//                        }
//                        else
//                        {
//                            $(arr[i]).animate({marginLeft: (NewValue) + "px"},500);         
//                        }                    

//                    }
//                    else if (NumberOfItems==1)
//                    {
//                        if (currentMargin==0)
//                        {
//                            $(arr[i]).animate({marginLeft: (NewValue) + "px"},500);              
//                        }
//                        else
//                        {
//                            $(arr[i]).animate({marginLeft: "0px"},500);              
//                        }    
//                    }
//                    else
//                    {
//                        if (NewValue <= (-Width*3))
//                        {                    
//                            NewValue = Width * (NumberOfItems-2);
//                            
//                            $(arr[i]).css("margin-left",NewValue + "px")
//                        }
//                        else if (NewValue>=(Width*(NumberOfItems-1)))
//                        {
//                            $(arr[i]).css("margin-left","-" + (Width*2) + "px")
//                        }
//                        else
//                        {
//                            $(arr[i]).animate({marginLeft: (NewValue) + "px"},500);         
//                        }                    
//                    }
//                }            
//                
//            });
//            
//            
//            
//            $(".CarouselLinks .Select").click(
//                function(){
//                    // hmm
//                    var oldPage=PageNumber;
//                    PageNumber = $(this).attr("id");
//                    var oldMargin = parseInt($("#PortfolioSlider .PortfolioSlide[cnt='"+ PageNumber +"']").css("margin-left").replace("px",""));
//                    
//                    var ml=-oldMargin;
//                                        
//                    for (i=0;i<arr.length;i++)
//                    {
//                        var currentMargin = parseInt($(arr[i]).css("margin-left").replace("px",""));
//                        var NewValue = currentMargin + ml;   
//                        //alert(currentMargin);
//                        //alert(NewValue);
//                        
//                        if (NumberOfItems==1) 
//                        {
//                            if (currentMargin==0)
//                            {
//                                $(arr[i]).animate({marginLeft: (NewValue) + "px"},500);              
//                            }
//                            else
//                            {
//                                $(arr[i]).animate({marginLeft: "0px"},500);              
//                            }    
//                        }
//                        else if (NumberOfItems==2)
//                        {                    
//                            if (NewValue < -Width)
//                            {                    
//                                $(arr[i]).css("margin-left",Width + "px")
//                            }
//                            else if (NewValue>Width)
//                            {
//                                $(arr[i]).css("margin-left","-" + (Width) + "px")
//                            }
//                            else
//                            {
//                                $(arr[i]).animate({marginLeft: (NewValue) + "px"},500);         
//                            }                    

//                        }
//                        else
//                        {
//                            if (NewValue <= (-Width*3))
//                            {                    
//                                NewValue = NewValue + (Width * (NumberOfItems+1));   
//                                $(arr[i]).css("margin-left",NewValue + "px")
//                            }
//                            else if (NewValue>=(Width*(NumberOfItems-1)))
//                            {       
//                                NewValue = NewValue - (Width * (NumberOfItems+1));    
//                                $(arr[i]).css("margin-left", NewValue + "px")
//                            }
//                            else
//                            {
//                                $(arr[i]).animate({marginLeft: (NewValue) + "px"},500);         
//                            }
//                       
//                        }
//                        
//                    }     
//                    
//                    $(".CarouselLinks span.Select").css("background-image","url('"+PageExtention+"img/select_off.gif')");
//                    $(".CarouselLinks span[id='" + PageNumber + "']").css("background-image","url('"+PageExtention+"img/select_on.gif')");                      
//                   
//            });            
//            
//            
//                
//        }    
//        
//        // turn on the slides
//        $("#OurWork").css("display","block");        
    
    //});