var totalSlides;
	var currentSlide;
	var slideWidth;

	$(document).ready(function(){

		totalSlides 		= $("#products ul li").length;
		currentSlide 		= 1;
		slideWidth 			= parseInt($("#products").css("width"));
		slideHeight 		= parseInt($("#products").css("height"));
		
		$(".switcher strong").html(currentSlide + " of " + totalSlides);
		
	});
	
	function horizontalSlide(direction) {
		var theLeft = -(currentSlide-1) * slideWidth;
		var moved = false;
		
		switch(direction) {
			case 'left':
				if (currentSlide < totalSlides) {
					var newLeft = theLeft - slideWidth;
					currentSlide = currentSlide + 1;
					var moved = true;
				}
				else {
					var newLeft = 0;
					currentSlide = 1;
					moved = true;
				}
				break;
				
			case 'right':
				// are we at the first slide? if not, move them
				if (currentSlide > 1) {	
					var newLeft = theLeft + slideWidth;
					currentSlide = currentSlide - 1;
					var moved = true;
				}
				// else, don't move them
				else {	
					var newLeft = 0;
					currentSlide = 1;							
				}
				break;
		}

		if (moved) {
			$("#products ul").css("left", newLeft + "px");
			
			/* -- 	Use this function below if you want the 'slide' effect. 
					The above is for 'instant' switching
			*/
			/*
			$("#products ul").animate({
				left: newLeft + "px"
			}, 0);
			*/
		}
		
		$(".switcher strong").html(currentSlide + " of " + totalSlides);
	}