$(document).ready(function() {  
  
    //rotation speed and timer  
    var speed = 2000;  
    var run = setInterval('rotate()', speed);     
      
    //grab the width and calculate left value  
    var item_width = $('#slides li').outerWidth();   
    var left_value = item_width * (-1);   
          
    //move the last item before first item, just in case user click prev button  
    $('#slides li:first').before($('#slides li:last'));  
      
    //set the default item to the correct position   
    $('#slides ul').css({'left' : left_value});  
  
    //if user clicked on prev button  
    $('#prev').click(function() {  
  
        //get the right position              
        var left_indent = parseInt($('#slides ul').css('left')) + item_width;  
  
        //slide the item              
        $('#slides ul').animate({'left' : left_indent}, 200,function(){      
  
            //move the last item and put it as first item                 
            $('#slides li:first').before($('#slides li:last'));             
  
            //set the default item to correct position  
            $('#slides ul').css({'left' : left_value});  
          
        });  
  
        //cancel the link behavior              
        return false;  
              
    });  
  
   
    //if user clicked on next button  
    $('#next').click(function() {  
          
        //get the right position  
        var left_indent = parseInt($('#slides ul').css('left')) - item_width;  
          
        //slide the item  
        $('#slides ul').animate({'left' : left_indent}, 200, function () {  
              
            //move the first item and put it as last item  
            $('#slides li:last').after($('#slides li:first'));                    
              
            //set the default item to correct position  
            $('#slides ul').css({'left' : left_value});  
          
        });  
                   
        //cancel the link behavior  
        return false;  
          
    });          
      
    //if mouse hover, pause the auto rotation, otherwise rotate it  
    $('#slides').hover(  
          
        function() {  
            clearInterval(run);  
        },   
        function() {  
            run = setInterval('rotate()', speed);     
        }  
    );   
	
	$('#buttons').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() {  
    $('#next').click();  
}