$(document).ready(function() {


  //rotation speed and timer
  var speed = 3000;
  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:not(:animated)').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:not(:animated)').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);  
    }
  ); 
        
});


//a simple function to click next link
//a timer will call this function, and the rotation will begin :)  
function rotate() {
  $('#next').click();
}