$(document).ready(function() {
 
    //rotation speed and timer
    var speed = 12000;
    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);  
        }
    );
         
});
 
//a simple function to click next link
//a timer will call this function, and the rotation will begin :) 
function rotate() {
    $('#next').click();
}