$(document).ready(function() {
	//move he last list item before the first item. The purpose of this is if the user clicks to slide left he will be able to see the last item.
	//$('#carousel_ul li:first').before($('#carousel_ul li:last')); 
	var totalThumbs = $("#carousel_ul li").length;
	
	//when user clicks the image for sliding right        
	$('#right_scroll').click(function(){
	
		//get the width of the items ( i like making the jquery part dynamic, so if you change the width in the css you won't have o change it here too ) '
		var item_width = $('#carousel_ul li').outerWidth() + 10;
		//calculate the new left indent of the unordered list
		var left_indent = parseInt($('#carousel_ul').css('left')) - item_width;
		
		if(parseInt($('#carousel_ul').css('left')) > (0-((totalThumbs-5)*item_width)) ) {
			//make the sliding effect using jquery's anumate function '
			$('#carousel_ul:not(:animated)').animate({'left' : left_indent},500/*,function(){
				$('#carousel_ul li:last').after($('#carousel_ul li:first'));
				$('#carousel_ul').css({'left' : '-190px'});
			}*/); 
		}
		else{
			$('#carousel_ul:not(:animated)').animate({'left' : 0},500);
		};
	});
	
	//when user clicks the image for sliding left
	$('#left_scroll').click(function(){
		
		var item_width = $('#carousel_ul li').outerWidth() + 10;
		// same as for sliding right except that it's current left indent + the item width (for the sliding right it's - item_width)
		var left_indent = parseInt($('#carousel_ul').css('left')) + item_width;
			
		if(parseInt($('#carousel_ul').css('left')) < 0) {
			$('#carousel_ul:not(:animated)').animate({'left' : left_indent},500/*,function(){   
			$('#carousel_ul li:first').before($('#carousel_ul li:last'));
			$('#carousel_ul').css({'left' : '-190px'});
			}*/);
		}
		else{
			$('#carousel_ul:not(:animated)').animate({'left' : (0-((totalThumbs-5)*item_width))},500);
		};
	});
});