/**
* @fileoverview AlternativeViewImages.js: A module used for client specific functionality
*
* This module defines a single symbol named "Venda.ebiz"
* all ebiz utility functions are stored as properties of this namespace
* functions that are spacific this site shoudl be added to this file only.
*/

//Declare namespace for ebiz
Venda.namespace("ProductDetail");

/**
 * Stub function is used to support JSDoc.
 * @class Venda.
 * @constructor
 */
 
/**
*  Alternative View Images
*/
Venda.ProductDetail.allImages = new Array();
Venda.ProductDetail.configSwitch = {
	alternateViewStyle: "",
	alternateViewBehavior: ""
};

Venda.ProductDetail.configObjArea = {
	objDropdown: null,
	objDefaultImage: null,
	objMediumArea: null,
	objLinkArea: null,	
	objSwatchArea: null,
	objAlternateViewArea: null,
	objAlternateViewHeader: null,
	objProduct: null
};

Venda.ProductDetail.configPopupPanel = {
	popupHeader: "",
	loadingHeader: "",
	loadingImage: "",	
	closeImage: "",
	closeImageTitle: "",
	closeTextLink: ""
};

Venda.ProductDetail.configDefault = {
	productName: "",
	mediumAltText: "",
	mediumTitle: "",
	viewLargeTitle: "",
	viewLargeText: "",
	noImage: ""
};

Venda.ProductDetail.configSwatch = {
	//swatchTitle: ""
};

Venda.ProductDetail.configAlternateView = {
	alternateViewAltText: "",
	alternateViewTitleText: "",
	alternateViewHeaderText: "",
	enableImageware: ""
	//imagewareLink: "",
};

/**
* Sets the config values to each config type
* @param {string} configType this is an config type
* @param {array} settings this is the value of each config type
*/
Venda.ProductDetail.init = function(configType,settings) {
	for (var eachProp in settings) {
		this[configType][eachProp] = settings[eachProp];
	}
};

Venda.ProductDetail.loadImage = function(attValue, imgSources) {
	this.allImages[attValue] = imgSources;
};

Venda.ProductDetail.isClickable = function(dataChecking) {
	var able = false;
	if (dataChecking instanceof Array) {
		for (var i = 0; i < dataChecking.length; i++) {
			if (dataChecking[i] != "") {
				able = true;
			}
		}
	}
	return able;
};

/**
* To display swatch colour area
*/
Venda.ProductDetail.displaySwatch = function() {
	var allSwatch = "";
	for (var eachData in this.allImages) {		
		if (this.isClickable(this.allImages[eachData].setxsalt) && eachData != "" && this.allImages[eachData].setswatch != "") {
			allSwatch = allSwatch + "<a href=\"#\" onclick=\"Venda.ProductDetail.changeSet('"+eachData+"'); return false;\" title=\""+this.configSwatch["swatchTitle"]+" - "+eachData+"\"><img src=\""+this.allImages[eachData].setswatch+"\" alt=\""+eachData+"\"></a>";
		} else if(eachData !="" && this.allImages[eachData].setswatch) {
			allSwatch = allSwatch + "<img src=\""+this.allImages[eachData].setswatch+"\">";		
		}
	}
	
	this.configObjArea["objSwatchArea"].innerHTML = allSwatch;
};

/**
* Gets the image HTML tag
* @param {object} mappingData
* @returns "imgTag"
*/
Venda.ProductDetail.getImageTag = function(mappingData) {
	var imgTag = "";
	var imgTagSuffix = "";
	
	if ((mappingData.imgSource == "") && (mappingData.noImage != "")) {
		mappingData.imgSource = mappingData.noImage;
	}
	if (mappingData.imgSource) {
		imgTag = "<img src=\""+mappingData.imgSource+"\" alt=\""+mappingData.imgAlt+"\">";
	}
	if (mappingData.imgChange) {		
		//alternative view images
		if (this.configSwitch["alternateViewBehavior"] == "onmouseover") { imgTagSuffix = " onclick=\"return false;\">"; } else { imgTagSuffix = ">";}
		imgTag = "<div id='xsalt'><a href=\""+mappingData.imgChange+"\" "+this.configSwitch["alternateViewBehavior"]+"=\"Venda.ProductDetail.changeMainImage({attValue: '"+mappingData.attValue+"', no: "+mappingData.currentImage+"}); Venda.ProductDetail.changeViewLargeLink({attValue: '"+mappingData.attValue+"', no: "+mappingData.currentImage+"}); Venda.ProductDetail.highlightAltView(this,this.parentNode.id); return false;\" title=\""+mappingData.imgTitle+"\""+imgTagSuffix+imgTag+"</a></div>";
	}
	if (mappingData.imgPopup) {
		//main image
		if (this.configAlternateView["enableImageware"] == "") {
			// not use image ware
			imgTag = "<a href=\""+mappingData.imgPopup+"\" onclick=\"Venda.ProductDetail.doPopup('"+mappingData.attValue+"',this.href, "+mappingData.currentImage+"); return false;\" title=\""+mappingData.imgTitle+"\">"+imgTag+"</a>";
		} else {
			// use image ware
			imgTag = this.configAlternateView["imagewareLink"] + imgTag + "</a>";
		}
	}
	return imgTag;
};

/**
* Sets the image HTML tag
* @param {object} mappingData
* 
*/
Venda.ProductDetail.changeMainImage = function(mappingData) {
	var attValue = mappingData.attValue;
	var currentImage = mappingData.no || 0;
	var imgSource = (mappingData.no)? this.allImages[attValue].setmalt[mappingData.no-1] : this.allImages[attValue].setmedium;
	var imgPopup = (mappingData.no)? this.allImages[attValue].setlalt[mappingData.no-1] : this.allImages[attValue].setlarge;

	var mainImage = this.getImageTag({
										noImage: this.configDefault["noImage"]["medium"],
										imgSource: imgSource,
										imgPopup: imgPopup,
										attValue: attValue,
										imgAlt: this.configDefault["mediumAltText"],
										imgTitle: this.configDefault["mediumTitleText"],
										currentImage: currentImage
									});

	this.configObjArea["objMediumArea"].innerHTML = mainImage;
	//YAHOO.util.Event.addListener(["zoom_img2"],"click", Venda.Widget.Lightbox.showImageware);
};


/**
* Sets the image HTML tag
* @param {object} mappingData
* 
*/
Venda.ProductDetail.changeViewLargeLink = function(mappingData) {
	var attValue = mappingData.attValue;
	var currentImage = mappingData.no || 0;
	var imgPopup = (mappingData.no)? this.allImages[attValue].setlalt[mappingData.no-1] : this.allImages[attValue].setlarge;	
	var viewLarge = "";

	if (imgPopup != "") {
		viewLarge = "<div class=\"enlarge\"><a href=\""+imgPopup+"\" onclick=\"Venda.ProductDetail.doPopup('"+attValue+"',this.href, "+currentImage+"); return false;\" title=\""+this.configDefault["viewLargeTitle"]+"\">"+ this.configDefault["viewLargeText"] + "</a></div>";
	}
	
	this.configObjArea["objLinkArea"].innerHTML = viewLarge;
};

/**
* Generate entire images inside alternative view area
* @param {object} attValue
* 
*/
Venda.ProductDetail.changeAlternateViewSet = function(attValue) {
	var newDataMedium = new Array();
	var newDataXSmall = new Array();
	var allSideview = "";
	var n = 0;
	var count = 0;
	var imgSequence = 0;
	
	//product name - attribute value (if it does) - Additional view [no.]  is used to define a short description of the image in 'alt' and 'title' attribute
	var imgAlt = (attValue) ? this.configDefault["productName"] + " - " + attValue + " - " + this.configAlternateView["alternateViewAltText"] : this.configDefault["productName"] + " - " + this.configAlternateView["alternateViewAltText"];
	
	/* Start merge entire datas between 'default image' and 'alternative view image' together */
	if (this.allImages[attValue].setxsmall != "" && this.allImages[attValue].setmedium != "") {
		newDataMedium[count] = this.allImages[attValue].setmedium;
		newDataXSmall[count] = this.allImages[attValue].setxsmall;
	}

	for (var i = 0; i < this.allImages[attValue].setxsalt.length; i++) {
		count++;
		if (this.allImages[attValue].setmalt[i] != "" && this.allImages[attValue].setxsalt[i] != "") {
			newDataMedium[count] = this.allImages[attValue].setmalt[i];
			newDataXSmall[count] = this.allImages[attValue].setxsalt[i];
		}
	}
	/* End merge */
	
	for (var i = 0; i < newDataXSmall.length; i++) {
		if (typeof newDataXSmall[i] != "undefined") {imgSequence++;}
		allSideview = allSideview + this.getImageTag({
														currentImage: n,
														imgSource: newDataXSmall[i],
														imgChange: newDataMedium[i],											
														attValue: attValue,
														imgAlt: imgAlt + imgSequence,
														imgTitle: imgAlt + imgSequence
													});
		n++;
	}
	this.configObjArea["objAlternateViewArea"].innerHTML = allSideview;
	this.showAltViewHeader(this.configObjArea["objAlternateViewHeader"]);
};

/**
* Change attribute dropdown
* @param {object} attValue
*/
Venda.ProductDetail.changeDropdown = function(attValue) {
	for (var i = 0; i < this.configObjArea["objDropdown"].options.length; i++) {
		if (this.configObjArea["objDropdown"].options[i].value == attValue) {
			this.configObjArea["objDropdown"].selectedIndex = i;
		}
	}
	
	this.configObjArea["objProduct"].changeAttributes(this.configObjArea["objDropdown"]);
};

/**
* Change
* @param {object} attValue
*/
Venda.ProductDetail.changeSet = function(attValue) {
	this.changeMainImage({attValue:attValue});
	if(this.configAlternateView["enableImageware"] == ""){this.changeViewLargeLink({attValue:attValue});}
	this.changeAlternateViewSet(attValue);
	this.changeDropdown(attValue);
};

/**
* Change
* @param {interger} number
* @param {} objLink
*/
Venda.ProductDetail.changePopup = function(objLink) {
	$("#enlargedpopup").attr({src:objLink.href});
};

/**
* Generate alternative view header text
*/
Venda.ProductDetail.showAltViewHeader = function(obj) {
	if (this.configObjArea["objAlternateViewArea"].innerHTML != "") {
		obj.innerHTML = this.configAlternateView["alternateViewHeaderText"];
		obj.className = "";
	} else {
		obj.innerHTML = "";
		obj.className = "hide";
	}
};

Venda.ProductDetail.highlightAltView = function (objLink,parentId) {
	parentId = "#"+parentId+" a";
	$(parentId).removeClass("selected");
	$(objLink).addClass("selected");
};

/**
* Change
* @param {object} attValue
* @param {interger} number
*/
Venda.ProductDetail.createPopupPage = function(attValue,number) {
	var newDataLarge = new Array();
	var	newDataXSmall = new Array();
	var max = 0;
	var minusNumber = 0;
	var pageSequence = 1;
	var alternateView = "";	// define entire images as pagination style
	
	// product name - attribute value (if it does) - Additional view [no.]  is used to define a short description of the image in 'alt' attribute
	var imgAlt = (attValue) ? this.configDefault["productName"] + " - " + attValue + " - " + this.configAlternateView["alternateViewAltText"] : this.configDefault["productName"] + " - " + this.configAlternateView["alternateViewAltText"];
	
	// Start merge entire datas between 'default image' and 'alternative view image' together
	// This is a default image part
	if (this.allImages[attValue].setxsmall != "" && this.allImages[attValue].setlarge != "") {
		newDataXSmall[max] = this.allImages[attValue].setxsmall;
		newDataLarge[max] = this.allImages[attValue].setlarge;
	} else {
		minusNumber = 1;
	}

	// This is the alternative image part
	for (var i = 0; i < this.allImages[attValue].setxsalt.length; i++) {
		max++;
		if (this.allImages[attValue].setxsalt[i] != "" && this.allImages[attValue].setlalt[i] != "") {
			newDataXSmall[max] = this.allImages[attValue].setxsalt[i];
			newDataLarge[max] = this.allImages[attValue].setlalt[i];
		}
	} 
	// End merge
	
	if (max > 1 && newDataXSmall.length > 0 && this.configSwitch["alternateViewStyle"] != "") {
		alternateView = alternateView + "<div id=\"alternateViewList\">";
		for (var i = 0; i < newDataXSmall.length; i++) {
			if (typeof newDataLarge[i] != "undefined" || typeof newDataXSmall[i] != "undefined") {
				if (this.configSwitch["alternateViewStyle"] == "image") {
					// Start image list
					if (i == (number - minusNumber)) {
						alternateView = alternateView + "<a href=\""+newDataLarge[i]+"\" "+this.configSwitch["alternateViewBehavior"]+"=\"Venda.ProductDetail.changePopup(this); Venda.ProductDetail.highlightAltView(this,this.parentNode.id); return false;\" class=\"selected\" title=\""+imgAlt + pageSequence+"\""; 								
					} else {
						alternateView = alternateView + "<a href=\""+newDataLarge[i]+"\" "+this.configSwitch["alternateViewBehavior"]+"=\"Venda.ProductDetail.changePopup(this); Venda.ProductDetail.highlightAltView(this,this.parentNode.id); return false;\" title=\""+imgAlt + pageSequence+"\"";	
					}
					if (this.configSwitch["alternateViewBehavior"] == "onmouseover") {alternateView = alternateView + " onclick=\"return false;\"><img src=\""+newDataXSmall[i]+"\" alt=\""+imgAlt + pageSequence+"\"></a>";} else {alternateView = alternateView + "><img src=\""+newDataXSmall[i]+"\" alt=\""+imgAlt + pageSequence+"\"></a>";}
					// End image list
				} else {
					// Start number list
					if (i == (number - minusNumber)) {
						alternateView = alternateView + "<a href=\""+newDataLarge[i]+"\" "+this.configSwitch["alternateViewBehavior"]+"=\"Venda.ProductDetail.changePopup(this); Venda.ProductDetail.highlightAltView(this,this.parentNode.id); return false;\" class=\"selected\" title=\""+imgAlt + pageSequence+"\"";
					} else {
						alternateView = alternateView + "<a href=\""+newDataLarge[i]+"\" "+this.configSwitch["alternateViewBehavior"]+"=\"Venda.ProductDetail.changePopup(this); Venda.ProductDetail.highlightAltView(this,this.parentNode.id); return false;\" title=\""+imgAlt + pageSequence+"\"";
					}
					if (this.configSwitch["alternateViewBehavior"] == "onmouseover") { alternateView = alternateView + " onclick=\"return false;\"><span>"+(pageSequence)+"</span></a>"; } else { alternateView = alternateView + "><span>"+(pageSequence)+"</span></a>";}
					// End number list
				}
				pageSequence++;
			}
		}
		alternateView = alternateView + "</div>";
	} else {
		// Don't show any paginations (main image ONLY)
		alternateView = "";
	}
	return alternateView;
};

var xPosition = (document.documentElement.clientWidth - 550) / 2;
//var yPosition = document.documentElement.scrollTop;

Venda.ProductDetail.loadingPanel = new YAHOO.widget.Panel("loading_panel",  
														{ 
															width:"240px", 
															fixedcenter:false, 
															close:true, 
															draggable:false,
															zindex:3,
															modal:true,
															visible:false,
															x:xPosition,
															y:10
														}
													);

Venda.ProductDetail.enlargePanel = new YAHOO.widget.Panel("enlarge_panel",  
														{ 
															fade: 0.24,			
															fixedcenter:false,
															draggable: true,
															zindex:4,
															modal:true,
															visible:false,
															x:xPosition,
															y:10
														}
													);

/**
* Set panel dimension
* @param {} panel
* @param {object} objImage
*/
Venda.ProductDetail.setWidthPanel = function (panel,objImage) {
	document.getElementById("tag-invtname").style.display = "inline";
	var widthValue = (objImage.width > (document.getElementById("tag-invtname").offsetWidth + 100)) ? objImage.width + 20: document.getElementById("tag-invtname").offsetWidth + 130;
	panel.cfg.setProperty("width", widthValue + "px");
	document.getElementById("tag-invtname").style.display = "none";
};

Venda.ProductDetail.doPopup = function(attValue,sLink,number) {
	var alternateView = this.createPopupPage(attValue,number);

	// Insert 'Alternative View Image' header if 
	if (alternateView != "") {
		alternateView = "<div id=\"alternateViewHeader\">"+this.configAlternateView["alternateViewHeaderText"]+"</div>" + alternateView;
	} else {
		alternateView = alternateView;
	}
	
	// HTML which will be in the 'popupContents' area
	var mainImage = "<div id=\"mainImage\"><a onclick=\"Venda.ProductDetail.enlargePanel.hide(); return false;\" href=\"#\" title=\""+this.configPopupPanel["closeImageTitle"]+"\"><img src=\""+sLink+"\" id=\"enlargedpopup\" name=\"enlargedpopup\" onload=\"Venda.ProductDetail.setWidthPanel(Venda.ProductDetail.enlargePanel, this); Venda.ProductDetail.loadingPanel.hide(); Venda.ProductDetail.enlargePanel.show();\"></a></div>";
	alternateView = "<div id=\"alternateView\">"+alternateView+"</div>"
	var strCloseText = "<div id=\"closeWindow\"><a href=\"#\" onclick=\"Venda.ProductDetail.enlargePanel.hide(); return false;\">"+this.configPopupPanel["closeTextLink"]+"</a></div>";

	Venda.ProductDetail.loadingPanel.setHeader("<div class=\"tl\"></div><span>"+Venda.ProductDetail.configPopupPanel.loadingHeader+"</span><div class=\"tr\"></div>");
	Venda.ProductDetail.loadingPanel.setBody("<img src=\""+Venda.ProductDetail.configPopupPanel.loadingImage+"\" />");
	Venda.ProductDetail.loadingPanel.render(document.body);
	Venda.ProductDetail.loadingPanel.show();

	Venda.ProductDetail.enlargePanel.setHeader("<div class=\"tl\"></div><span>"+Venda.ProductDetail.configPopupPanel.popupHeader+"</span><div class=\"tr\"></div>");
	Venda.ProductDetail.enlargePanel.setBody( "<div class=\"popupContents\">"+mainImage + alternateView + strCloseText+"</div>");
	Venda.ProductDetail.enlargePanel.render(document.body);
};

/**
* prepare entire images
* @param {array} imgSource
*/
Venda.ProductDetail.preloadImage = function(imgSource) {
	if (imgSource != "") {
		new Image().src = imgSource;
	}
};

/**
* prepare entire images
* @param {array} imgSource
*/
Venda.ProductDetail.preloadAllImage = function() {
	for (var eachAttrValue in this.allImages) {
		var allImageData = this.allImages[eachAttrValue];
  
		this.preloadImage(allImageData.setmedium);
		this.preloadImage(allImageData.setlarge);
		for (var eachImage in allImageData.setxsalt) {
			this.preloadImage(allImageData.setxsalt[eachImage]);
		}
		for (var eachImage in allImageData.setmalt) {
			this.preloadImage(allImageData.setmalt[eachImage]);
		}
		for (var eachImage in allImageData.setlalt) {
			this.preloadImage(allImageData.setlalt[eachImage]);		
		}		
	}
};