$(document).ready(function() {

    //rotation speed and timer
    var speed = 10000;
  
    
    //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}, 700,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}, 700, 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();
}