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