var isMouseDown = false;

function ProductBrowser()
{
	this.animateOnLoad = true;
	this.animationSpeed = 1000;
	this.animationStartPosition = 0;
	this.selectedProductId = "";
	this.selectedCategory = "";
	var sliderTrack;
	var sliderHandle;
	var productsUl;
	var productListWidth = 8;

	$(document).ready
	(
		function()
		{
			sliderTrack = $("#slider #track");
			sliderHandle = $("#slider #track span");
			productsUl = $("#product-browser-view").children(0);
			
			//set the width of each category
			$("#product-browser-view ul li.category").each
			(
				function()
				{
					var categoryWidth = $(this).children().eq(1).children().length * $(this).children().eq(1).children().eq(0).outerWidth();
					$(this).width(categoryWidth);
					$(this).children("ul").eq(0).width(categoryWidth);
					productListWidth = productListWidth + categoryWidth;
				}
			)
			
			productsUl.width(productListWidth);
		}
	);

	this.init = function()
	{
		var entranceAnimationSpeed = 0;
		var silderHandlePosition;
		
		if (this.animateOnLoad)
		{
			entranceAnimationSpeed = 1500;
		}
		
		if (this.selectedProductId == "null")
		{
			this.selectedProductId = "";
		}

		if (this.selectedProductId != "")
		{
			$("#product-browser-view ul li ul li#" + this.selectedProductId).addClass("active");
			$("#product-browser-view ul li ul li#" + this.selectedProductId).children("span.absorbency").css("display", "block");
			$("#product-browser-view ul li ul li#" + this.selectedProductId + " img").attr("src", baseUrl + "/images/products/" + this.selectedProductId.substring(1, this.selectedProductId.length) + "_thumb.png");
		}

		silderHandlePosition = 0;

		$("#product-browser-curtain").fadeOut(entranceAnimationSpeed);
		productsUl.animate({ "left": this.animationStartPosition }, entranceAnimationSpeed);
		sliderHandle.animate({ "left": silderHandlePosition }, entranceAnimationSpeed);

		if (this.selectedProductId != "")
		{
			if (this.selectedCategory == $("#product-browser-view ul li ul li#" + this.selectedProductId).parents("li").attr("id"))
			{
				showCategory($("#product-browser-view ul li ul li#" + this.selectedProductId).parents("li").attr("id"), false);
			}
			else
			{
				showCategory($("#product-browser-view ul li ul li#" + this.selectedProductId).parents("li").attr("id"), true);
			}
		}
	};
	
	//Mouse down event on slider handle.
	sliderHandle.mousedown
	(
		function(event)
		{
			event.preventDefault();
			isMouseDown = true;
		}
	);

	//Mouse up
	$(document).mouseup
	(
		function(event)
		{
			event.preventDefault();
			setTimeout('isMouseDown = false;', 50);
		}
	);

	//Slider handle move
	$(document).mousemove
	(
		function(event)
		{
			if (isMouseDown)
			{
				event.preventDefault();

				var mousePosition = getMousePosition(event);

				if (0 <= mousePosition && mousePosition <= sliderTrack.width() - sliderHandle.width())
				{
					sliderHandle.css("left", mousePosition);
					slide(event, 0, -1);
				}
				else if (mousePosition < 0)
				{
					sliderHandle.css("left", 0);
					slide(event, 0, -1);
				}
				else if (mousePosition > sliderTrack.width() - sliderHandle.width())
				{
					sliderHandle.css("left", sliderTrack.width() - sliderHandle.width());
					slide(event, 0, -1);
				}
			}
		}
	);

	//silde to the position of a click on the track
	sliderTrack.click
	(
		function(event)
		{
			trackClick(event);
		}
	);

	//product mouse over event
	$("#product-browser-view ul li ul li a").mouseenter
	(
		function()
		{
			if (!$(this).parents("li").hasClass("active"))
			{
				var productCode = $(this).parents("li").attr("id").substring(1, $(this).parents("li").attr("id").length);

				if (jQuery.browser.msie && parseInt(jQuery.browser.version.substr(0, 1)) < 7)
				{
					$(this).children("img").css("filter", "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + baseUrl + "/images/products/" + productCode + "_thumb.png', sizingMethod='scale')").attr("src", baseUrl + "/images/blank.gif");
				}
				else
				{
					$(this).children("img").attr("src", baseUrl + "/images/products/" + productCode + "_thumb.png");
				}

				$(this).children("span.absorbency").css("display", "block");
			}
		}
	);

	//product mouse out event
	$("#product-browser-view ul li ul li a").mouseleave
	(
		function()
		{
			if (!$(this).parents("li").hasClass("active"))
			{
				var productCode = $(this).parents("li").attr("id").substring(1, $(this).parents("li").attr("id").length);
				
				if (jQuery.browser.msie && parseInt(jQuery.browser.version.substr(0, 1)) < 7)
				{
					$(this).children("img").css("filter", "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + baseUrl + "/images/products/" + productCode + "_pkg_thumb.png', sizingMethod='scale')").attr("src", baseUrl + "/images/blank.gif");
				}
				else
				{
					$(this).children("img").attr("src", baseUrl + "/images/products/" + productCode + "_pkg_thumb.png");
				}

				$(this).children("span.absorbency").css("display", "none");
			}
		}
	);

	$("#product-browser-filter ul li a").click
	(
		function()
		{
			showCategory($(this).parents("li").attr("id").replace("filter-", ""), true);
		}
	)

	//comment
	function trackClick(event)
	{
		event.preventDefault();

		if (!isMouseDown)
		{
			var mousePosition = getMousePosition(event);
			
			switch (true)
			{
				case (mousePosition <= 0):
					sliderHandle.animate({ "left": 0 }, this.animationSpeed);
					slide(event, this.animationSpeed, 0);
					break;

				case (0 < mousePosition && mousePosition <= sliderTrack.width() - sliderHandle.width()):
					sliderHandle.animate({ "left": mousePosition }, this.animationSpeed);
					slide(event, this.animationSpeed, -1);
					break;

				case (mousePosition > sliderTrack.width() - sliderHandle.width()):
					sliderHandle.animate({ "left": sliderTrack.width() - sliderHandle.width() }, this.animationSpeed);
					slide(event, this.animationSpeed, -1);
					break;
			}
		}
	}

	function slide(event, duration, position)
	{
		var mousePercent = getMousePercent(event);
		
		if (position == -1)
		{
			if (duration == 0)
			{
				var slidePosition = -Math.round((mousePercent * (productsUl.width() - $("#product-browser-view").width())) / 1000);
				
				switch (true)
				{
					case (slidePosition <= 0 && slidePosition >= -(productsUl.width() - $("#product-browser-view").width())):
						productsUl.animate({ "left": slidePosition }, duration);
						break;
					case (slidePosition > 0):
						productsUl.animate({ "left": 0 }, duration);
						break;
					case (slidePosition < -(productsUl.width() - $("#product-browser-view").width())):
						productsUl.animate({ "left": -(productsUl.width() - $("#product-browser-view").width()) }, duration);
						break;
				}
			}
			else
			{
				if (mousePercent < 0)
				{
					productsUl.animate({ "left": 0 }, duration);
				}
				else if (mousePercent > 1000)
				{
					productsUl.animate({ "left": -Math.round((1000 * ($("#product-browser-view ul").width() - 826)) / 1000) }, duration);
				}
				else
				{
					productsUl.animate({ "left": -Math.round((mousePercent * ($("#product-browser-view ul").width() - 826)) / 1000) }, duration);
				}
			}
		}
		else
		{
			productsUl.animate({ "left": position }, duration);
		}
	}

	//comment
	function getMousePosition(event)
	{
		return Math.round(((((event.pageX - (sliderTrack.offset()).left) / sliderTrack.width() * 1000) * sliderTrack.width()) / 1000) - (sliderHandle.width() / 2));
	}

	//comment
	function getMousePercent(event)
	{
		return Math.floor(((event.pageX - (sliderTrack.offset()).left - sliderHandle.width()) / (sliderTrack.width() - sliderHandle.width())) * 1000) + 80;
	}
	
	function showCategory(id, animate)
	{
		var j = 0;
		
		productsUl.css("left", "0");
		sliderHandle.css("left", "0");
		productsUl.children("li.category").removeClass("active2");
		$("#product-browser-filter ul li").removeClass("active");
		$("#product-browser-filter ul li#filter-" + id).addClass("active");
		productsUl.children("li").children("ul").children("li").css("left", "");
		
		if (id == "all")
		{
			$(".cat-name").removeClass("display-none");
			productsUl.children("li.category").removeClass("display-none");
			productsUl.children("li.category").removeClass("border-none");
			productsUl.children("li").eq(0).addClass("active2");
			productsUl.width(productListWidth);
			
			for (var i = productsUl.children("li").eq(0).children("ul").children().length - 1; i >= 0 ; i--)
			{
				productsUl.children("li").eq(0).children("ul").children().eq(i).delay(100 * j).animate({ left: (0 + i) * productsUl.children("li").eq(0).children("ul").children().eq(i).outerWidth() }, 200);
				j++;
			}
		}
		else
		{
			$(".cat-name").addClass("display-none");
			productsUl.children("li.category").addClass("display-none");
			productsUl.children("li#" + id).removeClass("display-none");
			productsUl.children("li.category").addClass("border-none");
			productsUl.width(productsUl.children("li#" + id).width());
			
			if (animate)
			{
				productsUl.children("li#" + id).addClass("active2");
				
				for (var i = productsUl.children("li#" + id).children("ul").children().length - 1; i >= 0 ; i--)
				{
					productsUl.children("li#" + id).children("ul").children().eq(i).delay(100 * j).animate({ left: (0 + i) * productsUl.children("li#" + id).children("ul").children().eq(i).outerWidth() }, 200);
					j++;
				}
			}
		}
		
		if (!hasScrollBar())
		{
			sliderHandle.addClass("display-none");
			$("#inactive-slider").removeClass("display-none");
		}
		else
		{
			sliderHandle.removeClass("display-none");
			$("#inactive-slider").addClass("display-none");
		}
		
		jQuery.ajax
		(
			{
				type: "POST",
				url: baseUrl + "/ajax/misc.aspx",
				cache: false,
				data: "key=product-category&value=" + id
			}
		);
	}
	
	function hasScrollBar()
	{
		if (productsUl.width() > $("#product-browser-view").width())
		{
			return true;
		}
		else
		{
			return false;
		}
	}
};