$(document).ready(function() {
	
	//grab the width and calculate left value
	var item_width = $('#slides li').outerWidth(); 
	var left_value = item_width * (-1); 
	
	$("#slides a").each(function(){
		$(this).click(function(){
			var the_link = $(this).attr("href");
			$(".imageCont img").each(function(){
				$(this).attr( "src", the_link );	  
			});
			return false;
		});
	});
	
	//move the last item before first item, just in case user click prev button
	$('#slides li:first').before($('#slides li:last'));

	//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' : 0});
		
		});

		//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' : 0});
		
		});
				 
		//cancel the link behavior
		return false;
		
	});
		
});