var Products = {"Items":[]};
var style = "";
var wearingMethod = "";
var removingMethod = "";

$(document).ready
(
	function() {
	    if (requestedProductID == "_") {
	        $("#product-detail").addClass("display-none");
	    }
	    else {
	        $("#hero").addClass("display-none");
	    }

	    jQuery.getJSON
		(
			"/JSON/Products.aspx",
			function(data) {
			    Products = data;
			    var isProductFound = false;

			    $("#product-styles > li").each
				(
					function() {
					    for (var i = 0; i < Products.Items.length; i++) {
					        if ($(this).attr("id") == Products.Items[i].Style) {
					            $(this).addClass("_" + Products.Items[i].ID);
					        }
					    }

					    for (var i = 0; i < Products.Items.length; i++) {
					        if ($("#WornLikeUnderwear_" + Products.Items[i].Gender + "_0").attr("id") == Products.Items[i].Style + "_" + Products.Items[i].Gender + "_0") {
					            $("#WornLikeUnderwear_" + Products.Items[i].Gender + "_0").addClass("_" + Products.Items[i].ID);

					            for (var j = i + 1; i < Products.Items.length; j++) {
					                if ($("#WornLikeUnderwear_" + Products.Items[j].Gender + "_1").attr("id") == Products.Items[j].Style + "_" + Products.Items[j].Gender + "_1") {
					                    $("#WornLikeUnderwear_" + Products.Items[j].Gender + "_1").addClass("_" + Products.Items[j].ID);
					                    break;
					                }
					            }

					            break;
					        }
					    }

					    if (!isProductFound) {
					        if ($(this).hasClass(requestedProductID)) {
					            isProductFound = true;
					            $(this).addClass("selected");
					        }
					    }

					    if (requestedProductID != "_" && !isProductFound && $(this).attr("id") == $("#product-styles").children().eq($("#product-styles").children().length - 1).attr("id")) {
					        for (var i = 0; i < Products.Items.length; i++) {
					            if ("_" + Products.Items[i].ID == requestedProductID) {
					                if (Products.Items[i].Gender == "Male") {
					                    $("#WornLikeUnderwear_Male").addClass("selected");

					                    for (var j = 0; j < Products.Items.length; j++) {
					                        if (Products.Items[j].Style == "WornLikeUnderwear" && Products.Items[j].Gender == "Male") {
					                            if (requestedProductID == "_" + Products.Items[j].ID) {
					                                $("#second-level-styles ul").append("<li class=\"" + Products.Items[j].ID + " selected\"><table><tr><td><img alt=\"\" class=\"png\" src=\"/images/products/" + Products.Items[j].ID + "_tiny_thumb.png\" /></td><td><div><span>" + Products.Items[j].Name + "</span><img alt=\"\" class=\"png\" src=\"/images/arrow5.png\" /></div></td></tr></table></li>");
					                            }
					                            else {
					                                $("#second-level-styles ul").append("<li class=\"" + Products.Items[j].ID + "\"><table><tr><td><img alt=\"\" class=\"png\" src=\"/images/products/" + Products.Items[j].ID + "_tiny_thumb.png\" /></td><td><div><span>" + Products.Items[j].Name + "</span><img alt=\"\" class=\"png\" src=\"/images/arrow5.png\" /></div></td></tr></table></li>");
					                            }
					                        }
					                    }

					                    $("#second-level-styles div.gender span").html("Men's Underwear:");
					                    $("#second-level-styles").slideDown(0);
					                    break;
					                }
					                else {
					                    $("#WornLikeUnderwear_Female").addClass("selected");

					                    for (var j = 0; j < Products.Items.length; j++) {
					                        if (Products.Items[j].Style == "WornLikeUnderwear" && Products.Items[j].Gender == "Female") {
					                            if (requestedProductID == "_" + Products.Items[j].ID) {
					                                $("#second-level-styles ul").append("<li class=\"" + Products.Items[j].ID + " selected\"><table><tr><td><img alt=\"\" class=\"png\" src=\"/images/products/" + Products.Items[j].ID + "_tiny_thumb.png\" /></td><td><div><span>" + Products.Items[j].Name + "</span><img alt=\"\" class=\"png\" src=\"/images/arrow5.png\" /></div></td></tr></table></li>");
					                            }
					                            else {
					                                $("#second-level-styles ul").append("<li class=\"" + Products.Items[j].ID + "\"><table><tr><td><img alt=\"\" class=\"png\" src=\"/images/products/" + Products.Items[j].ID + "_tiny_thumb.png\" /></td><td><div><span>" + Products.Items[j].Name + "</span><img alt=\"\" class=\"png\" src=\"/images/arrow5.png\" /></div></td></tr></table></li>");
					                            }
					                        }
					                    }

					                    $("#second-level-styles div.gender span").html("Women's Underwear:");
					                    $("#second-level-styles").slideDown(0);
					                    break;
					                }
					            }
					        }
					    }
					}
				);
			}
		);

	    function toggle_selector() {
	        if ($("#selector-questions").css("display") == "none") {
	            $("#selector-questions").slideDown(300);
	            $("#selector-cta img").attr("src", "/images/product-selector-close.png").addClass("png");
				// readding png class because it was removed during initial pngFix
				ognc.tracking.linkTrack('ProductSelector', 'Open');
	        }
	        else {
	            $("#selector-questions").slideUp(300);
	            $("#selector-cta img").attr("src", "/images/product-selector-open.png").addClass("png");
	            $("#product-styles li h3 img").attr("src", "/images/arrow5.png").addClass("png");
				// readding png class because it was removed during initial pngFix;
	            $("#product-styles > li").removeClass("disabled");
	            $("#product-styles > li").removeClass("selected");
	            $("#take-off").removeClass("disabled");
	            $("#hero").removeClass("display-none");
	            $("#product-detail").slideUp(500);
	            $("#product-detail").addClass("display-none");
	            $(".checkbox-list li img").addClass("display-none");
	            $("#second-level-styles").slideUp(200);

	            $("#product-styles img").each
				(
					function() {
						$(this).css("filter", $(this).css("filter").replace("-disabled.png", ".png"))
					    $(this).attr("src", $(this).attr("src").replace("-disabled.png", ".png"))
					}
				);
				ognc.tracking.linkTrack('ProductSelector', 'Close');
	        }
			// Reapply pngFix to elements newly added to DOM
			depend.pngFix();
	    }

	    if (ognc.utils.getAnchor() == "#selector") {
	        toggle_selector();
	    }

	    $("#selector-cta h2").click(toggle_selector);

	    $(".checkbox-list > li").click
		(
			function() {
			    var parent = $(this).parent().parent();
			    $("#second-level-styles").slideUp(200);

			    if (!parent.hasClass("disabled")) {
			        $("#" + parent.attr("id") + " .checkbox-list li img").removeClass("display-block");
			        $("#" + parent.attr("id") + " .checkbox-list li img").addClass("display-none");
			        $(this).children("img").removeClass("display-none");
			        $(this).children("img").addClass("display-block");

			        if (parent.attr("id") == "put-on") {
			            wearingMethod = $(this).attr("id");
			            $("#take-off").removeClass("disabled");

			            if (wearingMethod == "Insert") {
			                $("#take-off").addClass("disabled");			
			                $("#take-off .checkbox-list li img").removeClass("display-block");
			                $("#take-off .checkbox-list li img").addClass("display-none");
			                removingMethod = "";
			            }
			        }
			        else {
			            removingMethod = $(this).attr("id");
			        }

			        reCalculate();
			    }
			}
		);

	    $("#product-styles > li").click
		(
			function() {
			    if (!$(this).hasClass("selected") && !$(this).hasClass("disabled")) {
			        $("#product-styles li").each
					(
						function() {
						    if ($(this).hasClass("selected")) {
						        $(this).removeClass("selected");
						    }
						}
					);

			        $(this).addClass("selected");
			        style = $(this).attr("id");

			        if (style == "WornLikeUnderwear_Female") {
			            $("#product-detail").slideUp(500);
			            $("#product-detail").addClass("display-none");
			            $("#second-level-styles ul").empty();

			            for (var i = 0; i < Products.Items.length; i++) {
			                if (Products.Items[i].Style == "WornLikeUnderwear" && Products.Items[i].Gender == "Female") {
			                    $("#second-level-styles ul").append("<li class=\"" + Products.Items[i].ID + "\"><table><tr><td><img alt=\"\" class=\"png\" src=\"/images/products/" + Products.Items[i].ID + "_tiny_thumb.png\" /></td><td><div><span>" + Products.Items[i].Name + "</span><img alt=\"\" class=\"png\" src=\"/images/arrow5.png\" /></div></td></tr></table></li>");
			                }
			            }

			            $("#second-level-styles div.gender span").html("Women's Underwear:");
			            $("#second-level-styles").slideDown(200);

			            // Reapply pngFix to elements newly added to DOM
			            depend.pngFix();
			        }
			        else if (style == "WornLikeUnderwear_Male") {
			            $("#product-detail").slideUp(500);
			            $("#product-detail").addClass("display-none");
			            $("#second-level-styles ul").empty();

			            for (var i = 0; i < Products.Items.length; i++) {
			                if (Products.Items[i].Style == "WornLikeUnderwear" && Products.Items[i].Gender == "Male") {
			                    $("#second-level-styles ul").append("<li class=\"" + Products.Items[i].ID + "\"><table><tr><td><img alt=\"\" class=\"png\" src=\"/images/products/" + Products.Items[i].ID + "_tiny_thumb.png\" /></td><td><div><span>" + Products.Items[i].Name + "</span><img alt=\"\" class=\"png\" src=\"/images/arrow5.png\" /></div></td></tr></table></li>");
			                }
			            }

			            $("#second-level-styles div.gender span").html("Men's Underwear:");
			            $("#second-level-styles").slideDown(200);
			            // Reapply pngFix to elements newly added to DOM
			            depend.pngFix();
			        }
			        else {
			            $("#second-level-styles").slideUp(200);
			            ajaxProductDetail($("#" + style).attr("class"));
			        }
			    }

			}
		);

	    $("#second-level-styles ul li").live
		(
			"click",
			function(event) {
			    $("#second-level-styles ul li").removeClass("selected");
			    $(this).addClass("selected");
			    ajaxProductDetail($(this).attr("class"));
			}
		);

	    $(".swatches img").live
		(
			"mouseenter",
			function(event) {
				var image_arr = $(this).css("filter").match(/progid:DXImageTransform.Microsoft.AlphaImageLoader\(src='(.*)', sizingMethod='image'\)/, "")
				var image_src = (image_arr)?  image_arr[1].replace("_thumb.png", ".jpg") : $(this).attr("src").replace("_thumb.png", ".jpg");
			    $("#callout").attr("src", image_src);
			}
		);
		
		
		// tooltips
		$(function() {
			$('#product-styles li').tooltip({
				track: true,
				top: -10
			});
		});
		
	}
);

function ajaxProductDetail(id)
{
	$.ajax
	(
		{
			url: "/AJAX/ProductDetail.aspx",
			data: "id=" + id.replace(/[^0-9]/g, "") + "&theme=" + $("#theme").html(),
			success: function(data)
			{
				$("#product-detail").empty();
				$("#product-detail").html(data);
				// Reapply pngFix to elements newly added to DOM
				depend.pngFix();
				
				if ($("#product-detail").hasClass("display-none"))
				{
					$("#hero").addClass("display-none");
					$("#product-detail").slideDown(500);
					$("#product-detail").removeClass("display-none");
				}
			}
		}
	);
}

function reCalculate()
{
	$("#product-styles > li").removeClass("disabled");
	$("#product-styles > li").removeClass("selected");
	$("#product-styles > li").addClass("disabled");
	$("#product-styles li h3 img").attr("src", "/images/arrow52.png").addClass("png");
	
	for (var i = 0; i < Products.Items.length; i++)
	{
		for (j = 0; j < Products.Items[i].WearingMethods.length; j++)
		{
			if (Products.Items[i].WearingMethods[j] == wearingMethod)
			{
				if (removingMethod != "")
				{
					for (var k = 0; k < Products.Items[i].RemovingMethods.length; k++)
					{
						if (Products.Items[i].RemovingMethods[k] == removingMethod)
						{
							$("#" + Products.Items[i].Style).removeClass("disabled");
							$("#" + Products.Items[i].Style + "_" + Products.Items[i].Gender).removeClass("disabled");
							$("#" + Products.Items[i].Style + "_" + Products.Items[i].Gender + "_0").removeClass("disabled");
							$("#" + Products.Items[i].Style + "_" + Products.Items[i].Gender + "_1").removeClass("disabled");
							
							$("#" + Products.Items[i].Style + " h3 img").attr("src", "/images/arrow5.png");
							$("#" + Products.Items[i].Style + "_" + Products.Items[i].Gender + " h3 img").attr("src", "/images/arrow5.png").addClass("png");
							$("#" + Products.Items[i].Style + "_" + Products.Items[i].Gender + "_0 h3 img").attr("src", "/images/arrow5.png").addClass("png");
							$("#" + Products.Items[i].Style + "_" + Products.Items[i].Gender + "_1" + " h3 img").attr("src", "/images/arrow5.png").addClass("png");
						}
					}
				}
				else
				{
					$("#" + Products.Items[i].Style).removeClass("disabled");
					$("#" + Products.Items[i].Style + "_" + Products.Items[i].Gender).removeClass("disabled");
					$("#" + Products.Items[i].Style + "_" + Products.Items[i].Gender + "_0").removeClass("disabled");
					$("#" + Products.Items[i].Style + "_" + Products.Items[i].Gender + "_1").removeClass("disabled");
					
					$("#" + Products.Items[i].Style + " h3 img").attr("src", "/images/arrow5.png");
							$("#" + Products.Items[i].Style + "_" + Products.Items[i].Gender + " h3 img").attr("src", "/images/arrow5.png").addClass("png");
							$("#" + Products.Items[i].Style + "_" + Products.Items[i].Gender + "_0 h3 img").attr("src", "/images/arrow5.png").addClass("png");
							$("#" + Products.Items[i].Style + "_" + Products.Items[i].Gender + "_1" + " h3 img").attr("src", "/images/arrow5.png").addClass("png");
				}
			}
		}
	}
	
	var numberOfResults = 0;
	
	$("#product-styles img").each
	(
		function()
		{
			$(this).attr("src", $(this).attr("src").replace("-disabled.png", ".png"));
		}
	);
	
	$("#product-styles > li").each
	(
		function()
		{
			if (!$(this).hasClass("disabled"))
			{
				numberOfResults++;
			}
			else
			{
				$(this).children().eq(2).children().eq(1).attr("src", $(this).children().eq(2).children().eq(1).attr("src").replace(".png", "-disabled.png"));
			}
		}
	);
	
	if (numberOfResults == 1)
	{
		$("#product-styles > li").each
		(
			function()
			{
				if (!$(this).hasClass("disabled"))
				{
					$(this).addClass("selected");
					ajaxProductDetail($(this).attr("class"));
				}
			}
		);
	}
	
	// Reapply pngFix to elements newly added to DOM
	depend.pngFix();
}