/**
* @fileoverview ProductDetail.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.configObjArea = {
	objDropdown: null,
	objDefaultImage: null,
	objProduct: null,
	objMediumArea: null,
	objLinkArea: null,
	objSwatchArea: null,
	objAlternateViewArea: null,
	objPrevNextArea: null
};

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

Venda.ProductDetail.configImageware = {
	enableImageware: "",
	zoomableText: "",
	zoomableImagelink: "",
	zoomableTextlink: ""
};

Venda.ProductDetail.configSwatch = {
	swatchTitle: "",
	swatchNotAvailAlt: ""
};

Venda.ProductDetail.configAlternateView = {
	alternateViewPagedStyle: "",
	alternateViewBehavior: "",
	alternateViewAltText: "",
	alternateViewTitleText: "",
	alternateViewHeaderText: "",
	alternateViewPrev: "",
	alternateViewNext: ""
};

Venda.ProductDetail.configPopupPanel = {
	popupHeader: "",
	loadingHeader: "",
	loadingPanel: "",	
	closePanel: "",
	closePanelTitle: "",
	closeTextLink: ""
};

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

Venda.ProductDetail.loadImage = function(attValue,imgSources) {
	var index = 0;
	var objImage = imgSources;
	var objLength = objImage.setmview.length;
	while (index < objLength) {
		if (objImage.setmview[index]=="") {
			objImage.setxsalt.splice(index,1);
			objImage.setmalt.splice(index,1);
			objImage.setlalt.splice(index,1);
			objImage.setxsview.splice(index,1);
			objImage.setmview.splice(index,1);
			objImage.setlview.splice(index,1);
			objImage.clicked.splice(index,1);
			objLength = objImage.setmview.length;
		} else {
			index++;
		}
	}
	this.allImages[attValue] = objImage;
};

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;
};

/**
* Puts loading image during the time that main image is loaded to show
* @param {object} imgObj - 
* @returns {function} imgTag - HTMLCollection of an image tag
*/

/**
* Gets the image HTML tag
* @param {object} mappingData - properties collection of each image
* @returns {string} imgTag - HTMLCollection of an image tag
*/
Venda.ProductDetail.getImageTag = function(mappingData) {
	var imgTag = "";
	var imgTagSuffix = "";

	// get image tag for 'Alternative images'
	if (mappingData.isAltImage && mappingData.imgPopup) {
		if (this.configAlternateView["alternateViewBehavior"] == "onmouseover") { imgTagSuffix = " onclick=\"return false;\">"; } else { imgTagSuffix = ">";}

		if (mappingData.currentImage == 0) {
			imgTag = "<div class=\"altFirst\"><a href=\""+mappingData.imgPopup+"\" "+this.configAlternateView["alternateViewBehavior"]+"=\"Venda.ProductDetail.doPopup('"+mappingData.attValue+"',this.href,true); Venda.ProductDetail.doHighLight('productdetail-altview',this); return false;\" title=\""+mappingData.imgTitle+"\""+imgTagSuffix+"<img src=\""+mappingData.imgSource+"\" alt=\""+mappingData.imgAlt+"\"></a></div>";
		}
		
		if (mappingData.isLastImage) {
			imgTag = "<div class=\"altLast\"><a href=\""+mappingData.imgPopup+"\" "+this.configAlternateView["alternateViewBehavior"]+"=\"Venda.ProductDetail.doPopup('"+mappingData.attValue+"',this.href,true); Venda.ProductDetail.doHighLight('productdetail-altview',this);  return false;\" title=\""+mappingData.imgTitle+"\""+imgTagSuffix+"<img src=\""+mappingData.imgSource+"\" alt=\""+mappingData.imgAlt+"\"></a></div>";
		
		} else {
			imgTag = "<div class=\"altView"+(mappingData.currentImage+1)+"\"><a href=\""+mappingData.imgPopup+"\" "+this.configAlternateView["alternateViewBehavior"]+"=\"Venda.ProductDetail.doPopup('"+mappingData.attValue+"',this.href,true); Venda.ProductDetail.doHighLight('productdetail-altview',this); return false;\" title=\""+mappingData.imgTitle+"\""+imgTagSuffix+"<img src=\""+mappingData.imgSource+"\" alt=\""+mappingData.imgAlt+"\"></a></div>";			
		}
	} else {		
		if (mappingData.currentImage == 0) {
			imgTag = "<div class=\"altFirst\"><img src=\""+mappingData.imgSource+"\" alt=\""+mappingData.imgAlt+"\"></div>";
		}
		
		if (mappingData.isLastImage) {
			imgTag = "<div class=\"altLast\"><img src=\""+mappingData.imgSource+"\" alt=\""+mappingData.imgAlt+"\"></div>";
		
		} else {
			imgTag = "<div class=\"altView"+(mappingData.currentImage+1)+"\"><img src=\""+mappingData.imgSource+"\" alt=\""+mappingData.imgAlt+"\"></div>";			
		}
	}
	
	// get image tag for 'Main images'
	if (mappingData.isMainImage) {
		// if 'no image' is shown at the 1st page load when user click any places and back to the main image it should be the same result as 1st time
		if ((mappingData.imgSource == "") && (mappingData.noImage != "")) {
			mappingData.imgSource = mappingData.noImage;
		}
		
		if (this.configImageware["enableImageware"] != "") {
			//use imageware		
				imgTag = this.configImageware["zoomableImagelink"]+"<img src=\""+mappingData.imgSource+"\"></a>";
		} else {
			//not use imageware
			if (mappingData.imgPopup != "") {
					imgTag = "<a href=\""+mappingData.imgPopup+"\" onclick=\"Venda.ProductDetail.doPopup('"+mappingData.attValue+"',this.href, "+mappingData.currentImage+",false); return false;\" title=\""+mappingData.imgTitle+"\"><img src=\""+mappingData.imgSource+"\"></a>";					
			} else {
					imgTag = "<img src=\""+mappingData.imgSource+"\">";
			}
		}
	}

	return imgTag;
};

/**
* To display swatch colour area
*/
Venda.ProductDetail.displaySwatch = function() {
	var allSwatch = "";
	var counter = 0;
	var eachData = "";
	
	for (eachData in this.allImages) {
		if (eachData != "" && eachData != "filter") {

			if (this.allImages[eachData].setswatch != "") {
				allSwatch = allSwatch + "<li><a id=\"swatch"+eachData+"\" href=\"#\" onclick=\"Venda.ProductDetail.doHighLight('productdetail-swatch','swatch"+eachData+"'); Venda.ProductDetail.changeSet('"+eachData+"'); return false;\" title=\""+this.configSwatch["swatchTitle"]+" - "+eachData+"\"><img src=\""+this.allImages[eachData].setswatch+"\" alt=\""+eachData+"\"></a></li>";
			} 
			counter++;

			if ((counter%2) == 0) {
				allSwatch = allSwatch+"</ul><ul class=\"eachCol\">";
			}
		}
	}
	this.configObjArea["objSwatchArea"].innerHTML = "<ul class=\"eachCol\">"+allSwatch+"</ul>";
	
};

Venda.ProductDetail.doHighLight = function (parentId,whereId) {
	$("#"+parentId).find("a").removeClass("selected");
	
	if (parentId == "productdetail-swatch") {	
		document.getElementById(whereId).className = "selected";
	} else {
		$(whereId).addClass("selected");
	}
};

/**
* Sets the image HTML tag
* @param {object} mappingData - properties collection of each image
* 
*/
Venda.ProductDetail.changeMainImage = function(mappingData) {
	var attValue = mappingData.attValue;
	var currentImage = mappingData.no | 0;	
	if (this.allImages[attValue].setmview.length == 0)
	{
		var imgSource = "";
		var imgPopup = "";
	}
	else {
		var imgSource = this.allImages[attValue].setmview[currentImage];
		var imgPopup = this.allImages[attValue].setlview[currentImage];
	}			
		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,
											isMainImage: true
										});
							
	this.configObjArea["objMediumArea"].innerHTML = mainImage;
	this.allImages[attValue].clicked[mappingData.no] = true;
	if (this.configImageware["enableImageware"] != "") {YAHOO.util.Event.addListener(["zoom_img2"],"click", Venda.Widget.Lightbox.showImageware);}
};

/**
* Generate entire images inside alternative view area
* @param {string} attValue - attribute 1 (color) value
* 
*/
Venda.ProductDetail.changeAlternateViewSet = function(mappingData) {
	var attValue = mappingData.attValue;
	var currentImage = mappingData.no | 0;
	var iSeq = 0;
	var completeAltview = "";
	
	var newDataM = this.allImages[attValue].setmalt;
	var newDataXS = this.allImages[attValue].setxsalt;
	
	//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"];
	
	for (var i = 0; i < newDataXS.length; i++) {
		if (newDataXS[i] != "") {
		var isLastImage = (newDataXS[i+1]) ? false : true;
		completeAltview = completeAltview + this.getImageTag({
														currentImage: i,
														imgSource: newDataXS[i],
														imgPopup: newDataM[i],
														attValue: attValue,
														imgAlt: imgAlt + (iSeq+1),
														imgTitle: imgAlt + (iSeq+1),
														countData: iSeq, // To find a real number of data that available to view (must have both 'xsalt' and 'malt')
														isLastImage: isLastImage,
														isAltImage: true
												});
			iSeq++;
		}
	}
	
	this.configObjArea["objAlternateViewArea"].innerHTML = completeAltview;
};

/**
* Create Previous and Next link to view an image as other choices
* @param {string} attValue - attribute 1 (color) value
* @param {interger} number - A number of alternative images
*/
Venda.ProductDetail.createPrevNext = function(attValue,number) {
	var nextLink = "";
	var prevLink = "";
	var nextNumber = number;
	var prevNumber = number;
	var found = false;
	
	if(this.allImages[attValue].setmview.length > 1){
	
		for (i=0; i < this.allImages[attValue].setmview.length; i++) {
			if (this.allImages[attValue].setmview[i] != "") {
				found = true;
			}
		}
		
		if (found) {
			if (nextNumber == 0) {
				if (typeof this.allImages[attValue].setmview[nextNumber+1] != "undefined") {
					nextNumber++;
					nextLink ="<a href=\"#\" onclick=\"Venda.ProductDetail.changeMainImage({attValue: '"+attValue+"', no:"+nextNumber+"}); Venda.ProductDetail.createPrevNext('"+attValue+"',"+nextNumber+"); return false;\">"+this.configAlternateView["alternateViewNext"]+"</a>";
				}
			} else {
				if (typeof this.allImages[attValue].setmview[nextNumber+1] != "undefined") {
					nextNumber++;
					nextLink = "<a href=\"#\" onclick=\"Venda.ProductDetail.changeMainImage({attValue: '"+attValue+"', no:"+nextNumber+"}); Venda.ProductDetail.createPrevNext('"+attValue+"',"+nextNumber+"); return false;\">"+this.configAlternateView["alternateViewNext"]+"</a>";
				} else {
					nextNumber = 0;
					nextLink = "<a href=\"#\" onclick=\"Venda.ProductDetail.changeMainImage({attValue: '"+attValue+"', no:"+nextNumber+"}); Venda.ProductDetail.createPrevNext('"+attValue+"',"+nextNumber+"); return false;\">"+this.configAlternateView["alternateViewNext"]+"</a>";
				}
			}
			
			if (prevNumber == 0) {
				prevNumber = prevNumber+this.allImages[attValue].setmview.length-1; // reset
				prevLink = "<a href=\"#\" onclick=\"Venda.ProductDetail.changeMainImage({attValue: '"+attValue+"', no:"+prevNumber+"}); Venda.ProductDetail.createPrevNext('"+attValue+"',"+prevNumber+"); return false;\">"+this.configAlternateView["alternateViewPrev"]+"</a>";
				prevNumber--;
			} else {
				if (typeof this.allImages[attValue].setmview[prevNumber-1] != "undefined") {
					prevNumber--;
					prevLink = "<a href=\"#\" onclick=\"Venda.ProductDetail.changeMainImage({attValue: '"+attValue+"', no:"+prevNumber+"}); Venda.ProductDetail.createPrevNext('"+attValue+"',"+prevNumber+"); return false;\">"+this.configAlternateView["alternateViewPrev"]+"</a>";
				} else {
					prevNumber = 0; // reset
					prevLink = "<a href=\"#\" onclick=\"Venda.ProductDetail.changeMainImage({attValue: '"+attValue+"', no:"+prevNumber+"}); Venda.ProductDetail.createPrevNext('"+attValue+"',"+prevNumber+"); return false;\">"+this.configAlternateView["alternateViewPrev"]+"</a>";
				}
			}
		}
	}
	this.configObjArea["objPrevNextArea"].innerHTML = "<span id=\"prevImage\">"+prevLink+"</span><span id=\"nextImage\">"+nextLink+"</span>";
};

/**
* Change attribute dropdown
* @param {string} attValue - attribute 1 (color) value
*/
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 {string} attValue - attribute 1 (color) value
*/
Venda.ProductDetail.changeSet = function(attValue) {
if (this.allImages[attValue]) {
		this.changeMainImage({attValue:attValue,no:0});
		// if not tick imageware then use script to change link
		//if(this.configImageware["enableImageware"] == ""){this.changeViewLargeLink({attValue:attValue,no:0});}
		this.changeAlternateViewSet({attValue:attValue,no:0});
		this.createPrevNext(attValue,0);
		this.changeDropdown(attValue);
	}
};

/**
* Show enlarge popup window
* @param {string} attValue - attribute 1 (color) value
* @param {string} sLink - URLs to the current Large key size image of selected alt-img
* @param {interger} number - A number of current image by ordering
*/
Venda.ProductDetail.doPopup = function(attValue,sLink,isAlt) {
	var mainImage = "<div id=\"mainImage\"><a onclick=\"Venda.ProductDetail.enlargePanel.hide(); return false;\" href=\"#\" title=\""+this.configPopupPanel["closePanelTitle"]+"\"><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>";
	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.loadingPanel+"\"/>");
	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 + strCloseText+"</div>");
	Venda.ProductDetail.enlargePanel.render(document.body);
};

/**
* Change
* @param {string} objLink - URLs to the current Large key size image of selected alt-img
*/
Venda.ProductDetail.changePopup = function(objLink) {
	$("#enlargedpopup").attr({src:objLink.href});
};

/**
* Set panel dimension
* @param {object} 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";
};

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

var enlargePosition = ((document.documentElement.clientWidth - 405) / 2) - 15.5;
Venda.ProductDetail.enlargePanel = new YAHOO.widget.Panel("enlarge_panel",  
														{ 
															fade: 0.24,			
															fixedcenter:false,
															draggable: false,
															zindex:4,
															modal:true,
															visible:false,
															x:enlargePosition,
															y:131
														}
													);