$(document).ready(function() {
	$("#outfitbuilder_tabheader li a").click(switchTab);
	
	selectFromHashValues();
		
	resetEmptyStyleAction();
});

var selectedStyle = new Object();
selectedStyle.hats = '';
selectedStyle.tops = '';
selectedStyle.bottoms = '';
selectedStyle.footwear = '';

var backorderMsg = new Object();
backorderMsg.hats = new Array();
backorderMsg.tops = new Array();
backorderMsg.bottoms = new Array();
backorderMsg.footwear = new Array();

function displayBackOrderMsg(type, thisObj) {
	var index = thisObj.selectedIndex;
	var msg = backorderMsg[type][index];
	
	$(thisObj).siblings(".backorderMsg").html(msg);
}

/* select styles from hash values */
function selectFromHashValues() {
	var hashString = location.hash.replace("#", "");
	var selectedSKU = "";
	var selectedSize = "";

	if (hashString.trim() != '') {
		var hashItems = hashString.split("&");
		for (hashItemIndex in hashItems) {
			var hashItem = hashItems[hashItemIndex];
			var key = hashItem.split("=")[0];
			var value = hashItem.split("=")[1];
			
			selectedStyle[key] = value;
			addStyle(key, value);
		}
	}
}

function updateHash() {
	var hashString = "#";
	for (type in selectedStyle) {
		if (hashString == "#") 
			hashString += type + '=' + selectedStyle[type];
		else
			hashString += "&" + type + '=' + selectedStyle[type];
	}
	
	var locationHash = location.hash;
	var newLocation = location + '';
	if (locationHash.trim() != '') {
		newLocation = newLocation.replace(locationHash, hashString);
	}
	else {
		newLocation = newLocation + hashString;
	}
	
	location.replace(newLocation);
	
	resetEmptyStyleAction();	
}


function switchTab() {
	var type = $(this).html();
	gotoTab(type);	
}

function gotoTab(type) {
	type = type.toLowerCase();

	$("#outfitbuilder_tabheader li a").removeClass("selected");
	$("#outfitbuilder_tabheader li a").each(function (i) {
		var thisType = $(this).html();
		thisType = thisType.toLowerCase();
		if (thisType == type)
			$(this).addClass("selected");
      });
	
	var page = 1;
	displayStyles(type, page, defaultFiltersJSON[type]);
	
	var offset = $("#outfitbuilder h1").offset();
	$("html,body").animate({scrollTop: offset.top});	
}

function displayStyles(type, page, filtersJSON) {
	type = type.toLowerCase();
	$("#outfitbuilder_styles").html("");
	$("#outfitbuilder_styles").addClass("loading");
	defaultFiltersJSON[type] = filtersJSON;
	$("#outfitbuilder_tabcontent").load(stylesTemplatePath
				, {type: type, micrositename: micrositename, page: page, filtersJSON: filtersJSON}
				, function(responseText, textStatus, XMLHttpRequest) {
		$("#outfitbuilder_styles").removeClass("loading");
		//$("body").html(responseText);
	});
}

function displayStylesWithCoremetrics(type, page, filtersJSON, filterName, filterValue) {
	var cm_pageID = "Outfit Builder: Product Filter: " + type + ": " + filterName + ": " + filterValue;
	var cm_CategoryID = "Outfit Builder: Product Filter";
	cmCreatePageviewTag(cm_pageID, cm_CategoryID, null, null);
	displayStyles(type, page, filtersJSON);
}

function toggleStyle(type, sku) {
	type = type.toLowerCase();
	var wardrobeID = "#outfitbuilder_wardrove_" + type;
	
	if (sku == '') sku = selectedStyle[type];
	
	if (sku == '') {
		$(wardrobeID).html('');
		return;
	}
	
	var imgSrc = getScene7URL(type, sku);
	/*
	var imgSrc = "";
	if (type == "hats" || type == "footwear")
		imgSrc = getSmallImagePathForSKU(sku);
	else if (type == "tops")
		imgSrc = getLargeImagePathForSKU(sku);	
	else
		imgSrc = getWideImagePathForSKU(sku);	
	*/
	var thisZoomTemplateURL = zoomTemplateURL + sku + "&cm=Outfit%20Builder:%20Zoom";
		
	var htmlContent = '<a rev="' + thisZoomTemplateURL + '"><img src="' + imgSrc + '" alt="" /></a>';
	$(wardrobeID).html(htmlContent);
	
	var imgSelector = wardrobeID + " a";
	$(imgSelector).hover(addZoomIcon, removeZoomIcon);
	$(imgSelector).click(openLightBoxEB);
}

function getScene7URL(type, sku) {
	var width = 75;
	var height = 75;
	var imageURL = "";
	
	switch(type) {
		case "hats":
			width = 75;
			height = 75;
			imageURL = scene7URL;
			break;
		case "tops":
			width = 175;
			height = 175;
			imageURL = scene7URL;
			break;
		case "bottoms":
			width = 250;
			height = 250;
			imageURL = scene7URL_bottoms;
			break;
		case "footwear":
			width = 75;
			height = 75;
			imageURL = scene7URL;
			break;
	}
	
	imageURL = imageURL.replace("<SKU>", sku);
	imageURL = imageURL.replace("<WIDTH>", width);
	imageURL = imageURL.replace("<HEIGHT>", height);
	return imageURL;
}

function addZoomIcon() {
	var zoomIcon = '<img class="zoomIcon" src="' + zoomIconSrc + '" alt="" />';
	$(this).prepend(zoomIcon);
	
	var offset = $(this).parent().offset();
	var width = $(this).parent().width();
	var height = $(this).parent().height();
	
	var left = offset.left + width - 21 - 50;
	var top = offset.top + height - 21 - 10;
	
	$(this).children(".zoomIcon").css({left: left, top: top});
}

function removeZoomIcon() {
	$(this).children(".zoomIcon").remove();
}

function addStyle(type, sku) {
	type = type.toLowerCase();
	var styleInfoID = "#outfitbuilder_styleInfo_" + type;
	
	toggleStyle(type, sku);
	
	selectedStyle[type] = sku;
	
	if (sku == '') return;
	
	$(styleInfoID).html("");
	$(styleInfoID).addClass("loading");
	$(styleInfoID).load(styleInfoTemplatePath, {sku: sku, type: type}, function(responseText, textStatus, XMLHttpRequest) {
		$(this).removeClass("loading");
		if (textStatus != 'success') {
			$("body").html(responseText);
		}
		else {
			resetAddToCartButton();
			updateHash();
	
			//$(".wardrobe").addClass("noBG");			
		}
	});
	
	var offset = $("#outfitbuilder h1").offset();
	$("html,body").animate({scrollTop: offset.top});		
}

function removeStyle(type) {
	type = type.toLowerCase();
	
	var wardrobeID = "#outfitbuilder_wardrove_" + type;
	var styleInfoID = "#outfitbuilder_styleInfo_" + type;
	
	$(wardrobeID).html('');
	$(styleInfoID).html('<div class="emptyStyle">Make a Selection</div>');
	
	selectedStyle[type] = '';
	
	resetAddToCartButton();
	updateHash();
	
	//if ($(".wardrobe img").length == 0) {
	//	$(".wardrobe").removeClass("noBG");
	//}
}

function resetEmptyStyleAction() {
	$(".styleInfo").each(function() {
		if ($(this).children(".emptyStyle").length > 0) {
			$(this).click(emptyStyleAction);
		}
		else {
			$(this).unbind("click");
		}
	});
}

function emptyStyleAction() {
	var idArray = $(this).attr("id").split("_");
	var id = idArray.pop();
	
	gotoTab(id);
}

function resetAddToCartButton() {
	var show = false;
	for (type in selectedStyle) {
		if (selectedStyle[type] != '') show = true;
	}
	
	if (show)
		$("#outfitbuilder_addtocart").show();
	else
		$("#outfitbuilder_addtocart").hide();
}

function resetoutfit() {
	removeStyle("hats");
	removeStyle("tops");
	removeStyle("bottoms");
	removeStyle("footwear");
	
	defaultFiltersJSON.hats = '';
	defaultFiltersJSON.tops = '';
	defaultFiltersJSON.bottoms = '';
	defaultFiltersJSON.footwear = '';
		
	gotoTab('hats');
}

function validateAddToCart() {
	var errMsg = "Please select size for your ";
	var errArray = new Array();
	if ($("#size_hats").val() == "choose") errArray.push("hat");
	if ($("#size_tops").val() == "choose") errArray.push("top");
	if ($("#size_bottoms").val() == "choose") errArray.push("bottom");
	if ($("#size_footwear").val() == "choose") errArray.push("footwear");
	
	if (errArray.length > 0) {
		showBubble(errMsg + errArray.join(", ") + ".");
		return false;
	}
	return true;
}

function showBubble(errMsg) {
	if ($.browser.msie && $.browser.version == "6.0")
		$("select").css("visibility", "hidden");
	$("#outfitbuilder_addtocart_bubble").remove();
	
	var offset = $("#outfitbuilder_addtocart input").offset();
	var left = offset.left - 10;
	var top = offset.top - 72;
	
	var htmlContent = '<div id="outfitbuilder_addtocart_bubble"><table><tr><td></td></tr></table></div>';
	
	$("body").prepend(htmlContent);
	$("#outfitbuilder_addtocart_bubble").css("left", left);
	$("#outfitbuilder_addtocart_bubble").css("top", top);
	$("#outfitbuilder_addtocart_bubble").css("opacity", 0.9);
	$("#outfitbuilder_addtocart_bubble td").html(errMsg);
}

function hideBubble() {
	$("#outfitbuilder_addtocart_bubble").fadeOut("fast");
	if ($.browser.msie && $.browser.version == "6.0")
		$("select").css("visibility", "visible");
}

function displayMoreFilters(filter) {
	var containerID = "#productfilter_" + filter;
	$(containerID + " .hidden").removeClass("hidden");
	$(containerID + " .more").remove();
}