$(document).ready(function() {
//rotation speed and timer
var speed = 10000;
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}, 600,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}, 600, 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();
}