function slide(where) {
	var item_width = 970;
	modvar = currentPage % $('.carouselPageNumber').children().size();

/*	$('#pn'+ modvar).css('background-image','url(/content/s6/images/bg/bg_number.png)');*/
	document.getElementById('pn'+ modvar).className='pageNumbers';
	// using a if statement and the where variable check we will check where the user wants to slide (left or right)
	if (where == 'left') {
		//...calculating the new left indent of the unordered list (ul) for left sliding
		var left_indent = parseInt($('#carouselUL').css('left')) + item_width;
		currentPage-=1;
		if (currentPage < 0)
			currentPage += $('.carouselPageNumber').children().size();
	} else {
		//...calculating the new left indent of the unordered list (ul) for right sliding
		var left_indent = parseInt($('#carouselUL').css('left')) - item_width;
		currentPage+=1;
	}

	//make the sliding effect using jQuerys animate function... 
	$('#carouselUL:not(:animated)').animate({'left' : left_indent},500,function() {
		// when the animation finishes use the if statement again, and make an ilussion of infinity by changing place of last or first item
		if (where == 'left') {
			//...and if it slided to left we put the last item before the first item
			$('#carouselUL li:first').before($('#carouselUL li:last'));
		} else {
			//...and if it slided to right we put the first item after the last item
			$('#carouselUL li:last').after($('#carouselUL li:first'));
		}

		//...and then just get back the default left indent
		$('#carouselUL').css({'left' : '-970px'});
	});
	
	modvar = currentPage % $('.carouselPageNumber').children().size();

	document.getElementById('pn'+ modvar).className='pageNumbersSelected';

}