var $overlay;
var $origTitle;
var $document;
var hash = document.location.hash.substr(1);

$(window).resize(function () {
	resize();
});

$(window).load(function () {
	resize();
});

$(document).ready(function () {
	//set variables
	$document = $(document);
	$overlay = $(".overlay-background");
	$origTitle = document.title;

	if (hash.substr(0, 6) == "page::") {
		var pageToLoad = hash.substr(6);
		loadPage(pageToLoad);
	}

	//function calls
	setSpacerWidths();

	//click handler function calls
	addClickHandlers();
	addCaptionClickHandlers();
	addOverlayClickHandlers();
	addHovers();

	addImageSpecificStuff();
});

function setSpacerWidths() {
	$(".product-list .product > div.spacer > .product-code").each(function () {
		$(this).css("left", ($(this).closest(".spacer").outerWidth() / 2) - ($(this).outerWidth() / 2) + "px");
	});
	$(".product-range-list .product > div.spacer > .product-code").each(function () {
		$spacer = $(this).closest(".spacer");
		$(this).width($spacer.outerWidth() - 46);
		$(this).css("marginLeft", -4);
	});
}

function addClickHandlers() {
	$(".product-list .uline, .product-list .product-image").click(function () {
		$product = $(this).closest(".product");
		if ($product.find(".image-enlargement:visible").length == 0) {
			overlay("on", 800);
			$enlargement = $(this).closest(".product").find(".image-enlargement");
			var $enlargementDiv = $enlargement.parent().find("div.enlargement");
			$enlargement.fadeTo(0, 0, function () {
				$enlargement.fadeIn(0, function () {
					var $closeImg = $enlargement.find(".close-container");
					var $img = $enlargement.find(".enlargement");
					var $captionHeight = 0;
					$(this).find(".caption").each(function () {
						$captionHeight += $(this).outerHeight() + 10;
					});
					$enlargement.width($img.outerWidth());
					$enlargement.height($img.outerHeight() + $closeImg.outerHeight() + $captionHeight);
					$enlargementDiv.find(".product-code").each(function () {
						$(this).css("left", ($enlargementDiv.outerWidth() / 2) - ($(this).outerWidth() / 2) + "px");
					});
					$enlargement.fadeTo(800, 1);
				});
			});
			//$(this).css({ "left": ($(window).width() / 2) - ($(this).width() / 2) + "px" });
			//$(this).css({ "top": ($(window).height() / 2) - ($(this).height() / 2) + "px" });
			$enlargement.css("left", ($document.width() / 2) - ($enlargement.width() / 2) + "px");
			$enlargement.css("top", ($document.height() / 2) - ($enlargement.height() / 2) + "px");
			//$(this).html(img.width);
			$enlargement.find(".caption").first().css("font-weight", "bold");
		}
	});

	$(".close img").click(function () {
		overlay("", 500);
		$(this).closest(".image-enlargement").fadeOut(500);
	});

	$(".page .close").live("click", function () { $(".page:visible").fadeOut(200); overlay("", 200); document.location.hash = ""; document.title = $origTitle; });

	$("a").live("click", function () {
		var part = $(this).attr("data-part");
		if (part != "") {
			if (part.substr(0, 6) == "page::") {
				var pageToLoad = part.substr(6);
				loadPage(pageToLoad);
				return false;
			} else if (part.substr(0, 8) == "action::") {
				var actionToExecute = part.substr(8);
				if (actionToExecute == "close") {
					
				}
			}
		}
	});
}

function addOverlayClickHandlers() {
	$overlay.live("click", function () { $(".image-enlargement:visible").fadeOut(500); overlay("", 500); });
	$overlay.live("click", function () { $(".page:visible").fadeOut(200); overlay("", 200); document.title = ""; });
}

function addCaptionClickHandlers() {
	$(".caption").click(function () {
		var $this = $(this);
		var enlargementDiv = $this.closest(".image-enlargement");
		enlargementDiv = enlargementDiv.find("div.enlargement");
		if ($this.find("div").find("img").attr("src") != enlargementDiv.find("img").attr("src")) {
			enlargementDiv.find(".text-container").fadeOut(1000);
			enlargementDiv.find(".image-container").fadeOut(1000,
                        function () {
                        	enlargementDiv.html($this.find("div").html()); enlargementDiv.find(".image-container, .text-container").fadeOut(0).fadeIn(1000);
                        	enlargementDiv.find(".product-code").each(function () {
                        		$(this).css("left", (enlargementDiv.outerWidth() / 2) - ($(this).outerWidth() / 2) + "px");
                        	});
                        });
			$this.closest(".image-enlargement").find(".caption").css("font-weight", "normal");
			$this.css("font-weight", "bold");
		}
	});
}

function addHovers() {
	$(".close img").hover(
		function () { $(this).fadeTo(100, .8); },
		function () { $(this).fadeTo(100, 1); }
	);

	$("ul li.submenu ul").toggle(0);
	$("ul li.submenu ul").toggle(0);
	$("ul li.submenu").hover(
        function () { $(this).find("ul").stop(true, true).slideDown(100); },
        function () { $(this).find("ul").stop(true, true).slideUp(500); }
    );

	$(".page .close").live("mouseover", function () { $(this).fadeTo(100, .8); });
	$(".page .close").live("mouseout", function () { $(this).fadeTo(100, 1); });
}

function addImageSpecificStuff() {
	$(".product-image").mousemove(function (event) {
		if ($(this).attr("image-title") != "" && $(this).attr("image-title") != null) {
			var $titleContainer = $(".title-container");
			if ($titleContainer.length == 0) {
				$("body").append("<span class='title-container hidden'></span>");
				$titleContainer = $(".title-container");
			}
			var $title = $(this).attr("image-title").replace(/\|/g, "<br />");
			var $code = $(this).attr("image-code");
			if ($code != "" && $code != null) {
				$title = "<b>" + $code + "</b>: " + $title;
			}
			$titleContainer.html($title);
			var mouseX = event.pageX + 5;
			var mouseY = event.pageY + 5;
			$titleContainer.css("left", mouseX + "px");
			$titleContainer.css("top", mouseY + "px");
			//$titleContainer.stop(true, false);
			$titleContainer.fadeIn(200);
		}
	});
	$(".product-image").mouseleave(function () {
		var $titleContainer = $(".title-container");
		//$titleContainer.stop(true, false);
		$titleContainer.fadeOut(200);
	});
}

function resize() {
	$(".product > .spacer").each(function () {
		var $captionHeight = $(this).find(".uline").outerHeight();
		$(this).height($(this).find("img.product-image").height() + $captionHeight + 20 + "px");
		$(this).find(".product-info").height($(this).height() + "px");
		$(this).find(".opaque").height("100%");
		$(this).closest(".product").height($(this).outerHeight() + 20 + "px");
	});
	$(".product > div.spacer > .product-code").each(function () {
		$(this).css("left", ($(this).closest(".spacer").outerWidth() / 2) - ($(this).outerWidth() / 2) + "px");
		$(this).css("bottom", -($(this).outerHeight() / 2) + "px");
	});
	var $products = $(".product-list .product");
	matchHeight($products);
	var $productSpacers = $(".product-list .product .spacer");
	matchHeight($productSpacers);
	var $productOpaques = $(".product-list .product .opaque");
	matchHeight($productOpaques);
	var $productInfos = $(".product-list .product .product-info");
	matchHeight($productInfos);
}

function matchHeight(elems) {
	var maxHeight = 0;
	elems.each(function () {
		if ($(this).height() > maxHeight) {
			maxHeight = $(this).height();
		}
	});
	elems.each(function () {
		$(this).height(maxHeight + "px");
	});
}

function loadPage(url) {
	if ($(".page .content div").length == 0) {
		$("body").append("<div class='page'><div></div><div class='foreground'></div><div class='content'><div class='sub'></div><a href='#' data-part='action::close' class='close'><img src='/Images/close.jpg' /></a></div></div>");
	}
	$(".page .content div.sub").load(url, function () {
		document.location.hash = "page::" + url;
		overlay("on", 400);
		$(".page:not(:visible)").fadeIn(200);
		//var bgColor = $(".page").css("background-color");
		//$(".page").animate({ backgroundColor: "#EEB862" }, 1).delay(1000).animate({ backgroundColor: bgColor }, 1500);
		$titleElem = $(this).find("h1");
		$titleElem.text($titleElem.attr("data-page-title"));
		if ($titleElem.length > 0) {
			if ($titleElem.attr("data-page-title") != null) {
				document.title = $titleElem.attr("data-page-title");
			}
		}
	});
}

function overlay(action, speed) {
	if (action == "on") {
		$overlay.fadeIn(speed);
	}
	else {
		$overlay.fadeOut(speed);
	}
}