/**
* @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
};

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

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

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

/**
* 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) {
	this.allImages[attValue] = imgSources;
};

/**
* Change
* @param {string} attValue - attribute 1 (color) value
*/
Venda.ProductDetail.changeSet = function(attValue) {
if (this.allImages[attValue]) {
		this.changeMainImage({attValue:attValue});
		// 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.changeDropdown(attValue);
	}
};

/**
* Puts loading image during the time that main image is loaded to show
* @param {object} imgObj - 
* @returns {function} imgTag - HTMLCollection of an image tag
*/
Venda.ProductDetail.showMainImage = {
	imgObj: null,
	doIt: function() {
		setTimeout("Venda.ProductDetail.showMainImage.hideLoading()", 1000);
	},
	hideLoading: function() {
		if (document.getElementById("loadingMain")) {
			document.getElementById("loadingMain").style.display = "none";
		}	
		Venda.ProductDetail.showMainImage.imgObj.style.display = "block";
	},
	setImg: function(imgObj) {
		this.imgObj = imgObj;
	}
};

/**
* 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.imgChange) {
		if (this.configAlternateView["alternateViewBehavior"] == "onmouseover") { imgTagSuffix = " onclick=\"return false;\">"; } else { imgTagSuffix = ">";}
		if (mappingData.currentImage == 0) {
			imgTag = "<div class=\"first\"><a href=\""+mappingData.imgChange+"\" "+this.configAlternateView["alternateViewBehavior"]+"=\"Venda.ProductDetail.changeMainImage({attValue: '"+mappingData.attValue+"', no: "+mappingData.currentImage+"}); Venda.ProductDetail.changeViewLargeLink({attValue: '"+mappingData.attValue+"', no: "+mappingData.currentImage+"}); Venda.ProductDetail.highlightAltView('#productdetail-altview',this); return false;\" title=\""+mappingData.imgTitle+"\""+imgTagSuffix+"<img src=\""+mappingData.imgSource+"\" alt=\""+mappingData.imgAlt+"\"></a></div>";
		} else if (mappingData.isLastImage) {
			imgTag = "<div class=\"last\"><a href=\""+mappingData.imgChange+"\" "+this.configAlternateView["alternateViewBehavior"]+"=\"Venda.ProductDetail.changeMainImage({attValue: '"+mappingData.attValue+"', no: "+mappingData.currentImage+"}); Venda.ProductDetail.changeViewLargeLink({attValue: '"+mappingData.attValue+"', no: "+mappingData.currentImage+"}); Venda.ProductDetail.highlightAltView('#productdetail-altview',this); return false;\" title=\""+mappingData.imgTitle+"\""+imgTagSuffix+"<img src=\""+mappingData.imgSource+"\" alt=\""+mappingData.imgAlt+"\"></a></div>";
		} else {
			imgTag = "<div><a href=\""+mappingData.imgChange+"\" "+this.configAlternateView["alternateViewBehavior"]+"=\"Venda.ProductDetail.changeMainImage({attValue: '"+mappingData.attValue+"', no: "+mappingData.currentImage+"}); Venda.ProductDetail.changeViewLargeLink({attValue: '"+mappingData.attValue+"', no: "+mappingData.currentImage+"}); Venda.ProductDetail.highlightAltView('#productdetail-altview',this); return false;\" title=\""+mappingData.imgTitle+"\""+imgTagSuffix+"<img src=\""+mappingData.imgSource+"\" alt=\""+mappingData.imgAlt+"\"></a></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
			if (this.allImages[mappingData.attValue].clicked[mappingData.currentImage] == true) {
				imgTag = this.configImageware["zoomableImagelink"]+"<img src=\""+mappingData.imgSource+"\" alt=\""+mappingData.imgAlt+"\"></a>";
			} else {
				imgTag =  this.configImageware["zoomableImagelink"]+this.configDefault["loadingImage"]+"<img src=\""+mappingData.imgSource+"\" alt=\""+mappingData.imgAlt+"\" style=\"display:none\" onload=\"Venda.ProductDetail.showMainImage.setImg(this); Venda.ProductDetail.showMainImage.doIt();\"></a>";				
			}
		} else {
			//not use imageware
			if (this.allImages[mappingData.attValue].clicked[mappingData.currentImage] == true) {
				imgTag = "<img src=\""+mappingData.imgSource+"\" alt=\""+this.configDefault["largeNotAvailAltText"]+"\">";
			} else {
				imgTag = this.configDefault["loadingImage"]+"<img src=\""+mappingData.imgSource+"\" alt=\""+mappingData.imgAlt+"\" style=\"display:none\" onload=\"Venda.ProductDetail.showMainImage.setImg(this); Venda.ProductDetail.showMainImage.doIt();\">";				
			}
		}
	}

	return imgTag;
};

/**
* 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;
	var imgSource = this.allImages[attValue].setmalt[currentImage];
	var imgPopup = this.allImages[attValue].setlalt[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);}
};

/**
* Sets the image HTML tag
* @param {object} mappingData - properties collection of each image
*/
Venda.ProductDetail.changeViewLargeLink = function(mappingData) {
	var viewLarge = "";
	var attValue = mappingData.attValue;
	var currentImage = mappingData.no || 0;
	var imgPopup = this.allImages[attValue].setlalt[mappingData.no];
	
	if (this.configImageware["enableImageware"] != "") {
	 	// Use imageware to see large image
	 	viewLarge = this.configImageware["zoomableTextlink"]+this.configImageware["zoomableText"]+"</a>";
	} else {
	 	// Not use imageware to see large image
		if (imgPopup != "") {
		 	viewLarge = "<a href=\""+imgPopup+"\" onclick=\"Venda.ProductDetail.doPopup('"+attValue+"',this.href, "+currentImage+"); return false;\" title=\""+this.configDefault["viewLargeTitle"]+"\">"+this.configDefault["viewLargeText"]+"</a>";
	 	} else {
			viewLarge = "<span class=\"largeNotAvail\">"+this.configDefault["viewLargeText"]+"</span>";
		}
	}
	
	this.configObjArea["objLinkArea"].innerHTML = viewLarge;
	if (this.configImageware["enableImageware"] != "") {YAHOO.util.Event.addListener(["zoom_link2"],"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 = "";
	
	//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 < this.allImages[attValue].setmalt.length; i++) {
		if (this.allImages[attValue].setxsalt[i] != "" && this.allImages[attValue].setmalt[i] != "") {
		var isLastImage = (this.allImages[attValue].setmalt[i+1]) ? false : true;
		completeAltview = completeAltview + this.getImageTag({
														currentImage: i,
														imgSource: this.allImages[attValue].setxsalt[i],
														imgChange: this.allImages[attValue].setmalt[i],
														attValue: attValue,
														imgAlt: imgAlt + (iSeq+1),
														imgTitle: imgAlt + (iSeq+1),
														isLastImage: isLastImage,
														isAltImage: true
												});
			iSeq++;
		}
	}
	
	// will be hide by using CSS (class="oneItem") to hide if there has one image in alternative view area
	if (iSeq <= 1) {
		this.configObjArea["objAlternateViewHeader"].className = "oneItem";
		this.configObjArea["objAlternateViewArea"].className = "oneItem";
	} else {
		this.configObjArea["objAlternateViewHeader"].className = "";
		this.configObjArea["objAlternateViewArea"].className = "";
	}
	
	this.configObjArea["objAlternateViewHeader"].innerHTML = this.configAlternateView["alternateViewHeaderText"];
	this.configObjArea["objAlternateViewArea"].innerHTML = completeAltview;
};

/**
* Hightlight current image to make user know which one is viewing
* @param {object} objLink - An element id (or object) representing the list of items in the alternative images
* @param {string} parentId - An element id to specific alternative images area
*/
Venda.ProductDetail.highlightAltView = function (parentId,objLink) {
	$(parentId).find("a").removeClass("selected");
	$(objLink).addClass("selected");
};

/**
* 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"]);
};