// MixMatch.js

var JQ = jQuery.noConflict();

//values for product img url creation
var THUMBNAIL_WIDTH = 132;
var PRODUCTIMG_WIDTH = 300;
var ZOOMIMG_WIDTH = 900;

var THUMBNAIL_EXT = "_x.png";
var PRODUCTIMG_EXT = "_x.png";
var ZOOMIMG_EXT = "_x.jpg";

//number of images to show at any given time in the right pane
var RIGHTPANE_MAX_IMGS = 6;

//don't allow the right pane to show partial image sets (?)
var RIGHTPANE_ALLOW_PARTIAL_SETS = false;

//xml page paths
var CATEGORY_DISPLAY_XML = "/webapp/wcs/stores/servlet/CategoryDisplayXML";
var PRODUCT_DISPLAY_XML = "/webapp/wcs/stores/servlet/ProductDisplayXML";


JQ(document).ready( function() {
	/* BINDINGS */
	JQ(".rightPane .subCatProdThumbnail").click( function() { MixMatch.setLeftPaneImg(JQ(this).parent().siblings(".leftPane"), JQ(this)); });
	JQ(".mixMatchCategory .prevBtn").click( function() { MixMatch.getPrevImages(JQ(this).siblings(".rightPane")); });
	JQ(".mixMatchCategory .nextBtn").click( function() { MixMatch.getNextImages(JQ(this).siblings(".rightPane")); });
	JQ("#selectSetBtn").click( showProductOverlays );
	JQ(".closePurchaseOverlayBtn").click( function () { closeProductOverlays(JQ(this)); });
	JQ(".addToBagBtn").click(function() { addToBagSubmit(JQ(this)) });
	//JQ(".utilIcon").hover( utilIconIn, utilIconOut ); //re-enable this when eaf/wishlist is added
	JQ(".utilIcon").click( utilClick );
	JQ(".leftPane").click( xlZoom );
		
	/*INITIALIZATION*/
	JQ("body").supersleight();
	JQ(".mixMatchCategory:gt(0)").addClass("notFirst");
	JQ("form input[name='catEntryId']").val("");
	JQ(".leftPane").each( function() {	MixMatch.setLeftPaneImg(JQ(this), JQ(this).siblings(".rightPane").children(":first")); });
	JQ(".rightPane").each( function() { MixMatch.getPrevImages(JQ(this)); });
	JQ("#wrapper").css("visibility", "visible");
});
				
function showProductInfo (overlay) {
	JQ(overlay).find(".waitDisplay").css("display","block");
}
		
function showProductOverlays() {
	JQ(".purchaseOverlay").each( function () {
		JQ(this).siblings(".prevBtn, .nextBtn").hide();
		if(JQ(this).is(":hidden")) {
			if(shouldUpdateForm(JQ(this))) {
				ProductXMLTools.getProductInfo(JQ(this).siblings(".leftPane").children("img").attr("alt").split("_")[2], JQ(this).find("form"));
			}
			JQ(this).show().ready( function() {showProductInfo(this)});
			JQ(this).siblings(".rightPane").hide();	
		}
	});
	JQ("#selectSetBtnDiv").hide();
}

function shouldUpdateForm(overlay) {
	return JQ(overlay).find("form input[name='catEntryId']").val() != JQ(overlay).siblings(".leftPane").children("img").attr("alt");
}

function closeProductOverlays(jqObj) {
	JQ(jqObj).css("display","none");
	JQ(jqObj).siblings(".waitDisplay").css("display","none");
	JQ(jqObj).parent().parent().hide();
	JQ(jqObj).parent().parent().siblings(".rightPane").show();
	JQ("#selectSetBtnDiv").show();
	MixMatch.updateButtons();
}

function addToBagSubmit(addToBagBtn)  {
	var form = JQ(addToBagBtn).closest("form");
	var selectBox = JQ(addToBagBtn).siblings("select");
	var selectedPartNum = JQ(selectBox).children("option:selected").attr("title");
	
	if (selectedPartNum == "") {
		alert(CONSTANTS.PRODUCT_ERROR_PLEASESELECTSIZE);
	} else {
		JQ(form).find("input[name='partnumber']").val(selectedPartNum);
		JQ(form).find("input[name='catEntryId']").val(JQ(form).find("select[name='size'] option:selected").val());
		
		JQ(addToBagBtn).css("cursor", "wait");
		JQ(addToBagBtn).toggleClass("addToBagBtn", false);
		JQ(addToBagBtn).toggleClass("processingBtn", true);
		
		JQ.ajax({
			url: "/webapp/wcs/stores/servlet/OrderItemAdd",
			type: "POST",
			data: JQ(form).serialize(),
			dataType: "xml",
			success: function(data) { 
				var jsonObj = JQ.xml2json(data);
				if (jsonObj.wasItemAdded === "true") {
					HOL.miniCart.getCart('add');
					JQ(addToBagBtn).toggleClass("processingBtn", false);
					JQ(addToBagBtn).toggleClass("itemAddedBtn", true);
					setTimeout(function(){
						JQ(addToBagBtn).toggleClass("itemAddedBtn", false);
						JQ(addToBagBtn).toggleClass("addToBagBtn", true);
					}, 2500);
				} else {
					JQ(addToBagBtn).toggleClass("processingBtn", false);
					JQ(addToBagBtn).toggleClass("addToBagBtn", true);
				}
				JQ(addToBagBtn).css("cursor", "pointer");
			},
			error: function(data) {
			}
		});
	}
}

function xlZoom() {
	var zoomImgName = JQ(this).children("img:first-child").attr("alt");
	zoomImgName = zoomImgName.replace(zoomImgName.split("_")[2], ZOOMIMG_WIDTH+ZOOMIMG_EXT);
	JQ("#xlZoomImg").attr("src", collPath+zoomImgName).load( function() {
		if(!JQ("#xlZoomFDC").is(":visible")) {
			openXLZoom();
		}
	});
	//JQ("#xlZoomCtn").modal({overlayClose:true, minWidth:ZOOMIMG_WIDTH});
}		
		
function utilClick() {
	var iconObj = JQ(this);
	if(JQ(iconObj).hasClass("sizeChartBtn")) {
		//var sizeChart = JQ(iconObj).parent().siblings(".sizeChartType").text();
		var sizeChart = JQ(iconObj).siblings(".sizeChartType").text();
		if(!sizeChart)
			return;
		
		switch(Number(sizeChart))
		{
			case 3:
				chartDiv = "bettysTopsDiv";
				break;
			case 4:
				chartDiv = "bettysBottomsDiv";
				break;
			case 5:
				chartDiv = "bettysAccDiv";
				break;
			case 6:
				chartDiv = "dudesTopsDiv";
				break;
			case 7:
				chartDiv = "dudesBottomsDiv";
				break;
			default:
				chartDiv = "dudesAccDiv";
				break;
		}

		HTB.getFadeUp(JQ("#scFDC").get(0));
		showSizeChartContent(chartDiv);
	} //else if{JQ(iconObj).hasClass("wishListBtn") {} 
}		
		
function utilIconIn() {
	var iconObj = JQ(this);
	JQ(iconObj).attr("src", JQ(this).attr("src").replace(/Off/,"On"));
	
	JQ(this).siblings(".utilMessage").each( function() {
		JQ(this).text( JQ(iconObj).attr("alt") );
		JQ(this).show();
	});
}

function utilIconOut() {
	var iconObj = JQ(this);
	JQ(iconObj).attr("src", JQ(this).attr("src").replace(/On/,"Off"));
	
	JQ(this).siblings(".utilMessage").each( function() {
		JQ(this).text( JQ(iconObj).attr("alt") );
		JQ(this).hide();
	});
}

MixMatch = new function() {
	//public
	var	self = this;
	
	this.setLeftPaneImg = function(leftImgDiv, rightImgDiv) {
		//mfpartnum, collection id, product id
		var ids = JQ(rightImgDiv).attr("id").split("_");
		var newImgName = collPath+ids[0]+"_"+ids[1]+"_"+ PRODUCTIMG_WIDTH + PRODUCTIMG_EXT;
		var img = JQ(leftImgDiv).children("img:first-child");
		
		if(JQ(img).attr("src") == newImgName)
			return;
		
		JQ(img).css("visibility", "hidden");
		JQ(img).attr("src",newImgName).load( function() {
			JQ(img).attr("alt",JQ(rightImgDiv).attr("id"));
			JQ(img).supersleight(); 
			JQ(img).css("visibility", "visible");
		});
	}
	
	this.getNextImages = function(rightPane) {
		getImages(JQ(rightPane), RIGHTPANE_MAX_IMGS);
	}
	
	this.getPrevImages = function(rightPane) {
		getImages(JQ(rightPane), -RIGHTPANE_MAX_IMGS);
	}
	
	this.updateButtons = function() {
		JQ(".rightPane:visible").each( function() {
			if(JQ(this).find(".activeImg:last").prevAll().length == JQ(this).find("div").length - 1) {
				JQ(this).siblings(".nextBtn").fadeOut("fast");
			} else {
				JQ(this).siblings(".nextBtn").fadeIn("fast");
			}
			
			if(JQ(this).find(".activeImg:first").prevAll().length == 0) {
				JQ(this).siblings(".prevBtn").fadeOut("fast");
			} else {
				JQ(this).siblings(".prevBtn").fadeIn("fast");
			}
		});
	}
	
	//private
	var getImages = function(rightPane, elems) {
		var paneChildren = JQ(rightPane).children("div");
		var startPos = JQ(rightPane).find(".activeImg:first").prevAll().length;
		var newFirstPos = clamp(startPos + elems, 0, JQ(paneChildren).length - ((RIGHTPANE_ALLOW_PARTIAL_SETS) ? 1 : RIGHTPANE_MAX_IMGS));
		JQ(paneChildren).removeClass("activeImg");
		JQ(paneChildren).eq(newFirstPos).addClass("activeImg");
		JQ(paneChildren).eq(newFirstPos).nextAll("div:lt("+(RIGHTPANE_MAX_IMGS-1)+")").addClass("activeImg");

		self.updateButtons();
	}
}

//productdisplayxml ajax tools
ProductXMLTools = new function() {
	//public
	this.getProductInfo = function(pId, targetForm) {
		JQ.ajax({
			url: PRODUCT_DISPLAY_XML,
			type: "POST",
			data: { "productId" : pId, "storeId" : globalStoreId, "langId" : langId, "catalogId" : globalCatalogId },
			dataType: "xml",
			success: function(data) { populateForm(data, targetForm); },
			timeout: "2000",
			cache:false,
			async:false
		});
	}
		
	//private
	var populateForm = function(xmlData, targetForm) {
		var prodObj = JQ.xml2json(xmlData);
		if(targetForm && prodObj) {
			//set product info
			JQ(targetForm).find(".prodName").html(prodObj.name);
			JQ(targetForm).find(".prodColorName").html(prodObj.colors.color.name);
			JQ(targetForm).find(".prodListPrice").html(prodObj.colors.color.list);
			JQ(targetForm).find(".prodOfferPrice").html(prodObj.colors.color.price);
			JQ(targetForm).find(".prodCopy").html(prodObj.colors.color.copy);
			JQ(targetForm).find(".sizeChartType").html(prodObj.sizeChart);
					
			var fields = JQ(targetForm).children(":input");
			JQ(fields).filter("[name='catEntryId']").val(prodObj.id);
			JQ(fields).filter("[name='color']").val(prodObj.color);
			JQ(targetForm).find("[name='size']").html("<option>"+CONSTANTS.PRODUCT_SELECTSIZE+"</option>");
			JQ.each(prodObj.colors.color.items, function(k, v) {
				if(v.length) {	
					for(var i=0; i<v.length; i++) {
						JQ(targetForm).find("[name='size']").append('<option value="'+v[i].cat+'" title="'+v[i].sku+'">'+v[i].size+'</option>');
					}
				} else {
					JQ(targetForm).find("[name='size']").append('<option value="'+v.cat+'" title="'+v.sku+'">'+v.size+'</option>');
				}
			});
		}
	}
}

function clamp(x, min, max) {
	return (min > x) ? min : (max < x) ? max : x;
}

/*borrowed legacy XLZoom */
function openXLZoom(e){
		var fdh = YUD.getViewportHeight() - 42;
		YUD.setStyle($("xlZoomFDC"), "height", fdh + "px");
		YUD.setStyle($("xlZoomImgCntnr"), "height", fdh + "px");
		YUD.setStyle($("xlZoomImgFrame"), "height", fdh + "px");
		YUD.setStyle($("xlZoomImgFrame"), "clip", "rect(0px, 900px, " + fdh + "px, 0px)");
		
		HTB.getFadeUp($("xlZoomFDC"));
		
		if(fdh < 830){ //set up scroll
			var d = 900 - (900 - fdh);
			var sh = Math.floor(d/3);
			var dragCenter = (Math.floor(sh/2) - 12);
			
			function setZoomImgY(){
				var xlzi = $("xlZoomImg");
				var trReg = YUD.getRegion("track");
				var drReg = YUD.getRegion("drag");
				YUD.setStyle(xlzi, "top", (trReg.top - drReg.top) * 3 + "px");
				YUD.setStyle($("drag"), "left", "0px");
			}
			
			YUD.setStyle($("drag"), "height", sh + "px");
			
			dd = new HOL.DDRegion("drag", "", { cont: "track" });
			dd.onDrag = setZoomImgY;
			YUD.setStyle($("xlZoomScroll"), "visibility", "visible");
			YUD.setStyle($("scrollHandleCenter"), "top", dragCenter + "px");
			
			function zoomClick(e, sh){
				var t = YUE.getTarget(e);
				var trReg = YUD.getRegion("track");
				var drReg = YUD.getRegion("drag");
				var drag = $("drag");
				var a;
				var toVal;
				if(YUD.hasClass(t, "scrollArr")){
					if(t.id == "up"){
						toVal = YUD.getY(drag) - 10 < trReg.top ? trReg.top : YUD.getY(drag) - 10;
					}else{
						toVal = drReg.bottom + 10 > trReg.bottom ? trReg.bottom - sh : YUD.getY(drag) + 10;
					}
					a = new YAHOO.util.Motion(drag, {points:{ to:[YUD.getX(drag), toVal] }}, .25);
					a.onTween.subscribe(setZoomImgY);
					a.animate();
				} else if(t.id == "track"){
					var ey = YUE.getPageY(e);
					if(ey < drReg.top){
						toVal = ey < trReg.top ? trReg.top : ey;
					}else{
						toVal = ey - sh;
					}
					a = new YAHOO.util.Motion(drag, {points:{ to:[YUD.getX(drag), toVal] }}, .25);
					a.onTween.subscribe(setZoomImgY);
					a.animate();
				}else{
					return true;
				}
			}
			function zoomMD(e, sh){
				var t = YUE.getTarget(e);
				var sch = sh;
				t.scrTO = setTimeout(function(){
					t.scrINT = setInterval(function(){
						var trReg = YUD.getRegion("track");
						var drReg = YUD.getRegion("drag");
						var drag = $("drag");
						if(t.id == "up"){
							if(drReg.top - 5 > trReg.top){
								YUD.setY(drag, drReg.top - 5);
							}else{
								YUD.setY(drag, trReg.top);
								clearInterval(t.scrINT);
							}
						}else{
							if(drReg.bottom + 5 < trReg.bottom){
								YUD.setY(drag, drReg.top + 5);
							}else{
								YUD.setY(drag, trReg.bottom - sh);
								clearInterval(t.scrINT);
							}
						}
						setZoomImgY();
					}, 50);
				}, 250);
			}
			
			//YUE.on($("track"), "click", moveDrag);
			YUE.on($("xlZoomScroll"), "click", zoomClick, sh);
			YUD.getElementsByClassName("scrollArr", "img", "xlZoomScroll", function(el){
				YUE.on($(el), "mousedown", zoomMD, sh);
				YUE.on($(el), "mouseup", function(e){ 
					clearTimeout(el.scrTO); 
					clearInterval(el.scrINT); 
					});
				});
		}
	}