$(document).ready(function() {
 	
 	//show slider controls
 	$('.sliderControls').show();
 	
    //rotation speed and timer
    var speed = 6000;
    var run = setInterval('rotate()', speed);  
     
    //grab the width and calculate left value
    var item_width = $('#carouselSlideContainer li').outerWidth();
    var left_value = item_width * (-1);
    
    //get how many images there are, then determine the size of the carousel
    var image_sum = $("#carouselSlideContainer li").size();
    var image_reel_width = item_width * image_sum;
    
    //Adjust the carousel to its new size
	$("#carouselSlideContainer ul").css({'width' : image_reel_width});
             
    //move the last item before first item, just in case user click prev button
    $('#carouselSlideContainer li:first').before($('#carouselSlideContainer li:last'));
     
    //set the default item to the correct position
    $('#carouselSlideContainer ul').css({'left' : left_value});
 
    //if user clicked on prev button
    $('#btnCarouselLeft').click(function() {
        
        clearInterval(run);
        
        //get the right position           
        var left_indent = parseInt($('#carouselSlideContainer ul').css('left')) + item_width;
 
        //slide the item           
        $('#carouselSlideContainer ul').animate({'left' : left_indent}, 500,function(){   
 
            //move the last item and put it as first item              
            $('#carouselSlideContainer li:first').before($('#carouselSlideContainer li:last'));          
 
            //set the default item to correct position
            $('#carouselSlideContainer ul').css({'left' : left_value});
         
        });
 
        run = setInterval('rotate()', speed);
 
        //cancel the link behavior           
        return false;
                 
    });
 
  
    //if user clicked on next button
    $('#btnCarouselRight').click(function() {
        
        clearInterval(run);
        
        //get the right position
        var left_indent = parseInt($('#carouselSlideContainer ul').css('left')) - item_width;
         
        //slide the item
        $('#carouselSlideContainer ul').animate({'left' : left_indent}, 500, function () {
             
            //move the first item and put it as last item
            $('#carouselSlideContainer li:last').after($('#carouselSlideContainer li:first'));                 
             
            //set the default item to correct position
            $('#carouselSlideContainer ul').css({'left' : left_value});
         
        });
    	
        run = setInterval('rotate()', speed);
    	
        //cancel the link behavior
        return false;
                 
    });       
     
    //if mouse hover, pause the auto rotation, otherwise rotate it
    $('#carouselSlideContainer').hover(
         
        function() {
            clearInterval(run);
        },
        function() {
            run = setInterval('rotate()', speed);  
        }
    );
         
});
 
//a simple function to click next link
//a timer will call this function, and the rotation will begin :) 
function rotate() {
    $('#btnCarouselRight').click();
}