ProStores.Detail = {
	ACTIVE_BORDER_COLOR : "#8FB6DB",
	INACTIVE_BORDER_COLOR : "#CCCCCC",

	ID_DIV_MEDIUM_CONTAINER : "divMediumContainer",	
	ID_DIV_SMALL_IMAGE : "divSmallImage_",
	ID_IMG_MEDIUM : "imgMedium",
	ID_IMG_SMALL : "imgSmall_",
	
	ID_DIV_TAB : "divTab_",
	ID_DIV_DESC : "divDesc_",
	
	aProductImages : new Array(),
	nActiveImage : 1,
	nMaxHeight : 200,
	nMaxWidth : 200,
	nTabCount : 0,
	
	init:
		function() {
			// Allow the merchant to modify height/width of medium image container to meed their needs.
			if (typeof(nMinHeight) != "undefined")
				ProStores.Detail.nMaxHeight = nMinHeight;

			if (typeof(nMinWidth) != "undefined")
				ProStores.Detail.nMaxWidth = nMinWidth;
			
			var nFirstHeight = 0;
			var nFirstWidth = 0;
			
			for (var i=1; i <= ProStores.Detail.aProductImages.length; i++) {
				var elSmallImage = _(ProStores.Detail.ID_IMG_SMALL + i);
				if (elSmallImage) {
					elSmallImage.onmouseover = ProStores.Detail.swapImage;
					elSmallImage.onmouseout = ProStores.Detail.updateStyle;
				}
				var nHeight = parseInt(ProStores.Detail.aProductImages[i - 1].getMediumHeight);
				var nWidth = parseInt(ProStores.Detail.aProductImages[i - 1].getMediumWidth);

				if (i == 1) {
					nFirstHeight = nHeight;
					nFirstWidth = nWidth;
				}
									
				if (nHeight > ProStores.Detail.nMaxHeight)
					ProStores.Detail.nMaxHeight = nHeight;

				if (nWidth > ProStores.Detail.nMaxWidth)
					ProStores.Detail.nMaxWidth = nWidth;
			}
			
			var elDivMediumContainer = _(ProStores.Detail.ID_DIV_MEDIUM_CONTAINER);
			if (elDivMediumContainer && ProStores.Detail.nMaxHeight > 0 && ProStores.Detail.nMaxWidth > 0) {
				elDivMediumContainer.style.height = ProStores.Detail.nMaxHeight + 5;
				elDivMediumContainer.style.width = ProStores.Detail.nMaxWidth + 5;
			}
			
			var elImgMedium = _(ProStores.Detail.ID_IMG_MEDIUM);
			if (elImgMedium) {
			 	if (ProStores.Detail.aProductImages.length > 0)
					elImgMedium.onclick = ProStores.Detail.zoomImage;
				else
					elImgMedium.style.cursor = 'default';
			}				

			// Add listeners for tabs.
			// Allow the merchant to add more tabs on the fly.
			if (typeof(nTabCount) != "undefined")
				ProStores.Detail.nTabCount = nTabCount;
				
			for (var i = 1; i <= ProStores.Detail.nTabCount; i++) {
				var elTab = _(ProStores.Detail.ID_DIV_TAB + i);
				if (elTab)
					elTab.onclick = ProStores.Detail.toggleTabs;
			}
		},

	oProductImage:
		function (urlMediumImage, heightMedium, widthMedium, urlLargeImage, strTitle){
			this.getMediumImage = urlMediumImage;
			this.getMediumHeight = heightMedium;
			this.getMediumWidth = widthMedium;
			this.getLargeImage = urlLargeImage;
			this.getTitle = strTitle;
		},

	swapImage:
		function(e) {
			var elEvent = e || window.event;
			var elTarget = null;
			if (elEvent) {
				elTarget = elEvent.target;
				if (elTarget == null)
					elTarget = elEvent.srcElement;

				// Make sure we caught an event for an element we care about.
				if (elTarget) {
					var id = elTarget.id;
					if (id.indexOf(ProStores.Detail.ID_IMG_SMALL) != -1) {
						ProStores.Detail.nActiveImage = id.substring(ProStores.Detail.ID_IMG_SMALL.length);
						
						var elDivSmallImage = _(ProStores.Detail.ID_DIV_SMALL_IMAGE + ProStores.Detail.nActiveImage);
						if (elDivSmallImage)
							elDivSmallImage.style.borderColor = ProStores.Detail.ACTIVE_BORDER_COLOR;
						
						var elImgMedium = _(ProStores.Detail.ID_IMG_MEDIUM);
						if (elImgMedium) {
							var url = ProStores.Detail.aProductImages[ProStores.Detail.nActiveImage - 1].getMediumImage;
							if (url) {
								elImgMedium.src = url;
								
								var strTitle = ProStores.Detail.aProductImages[ProStores.Detail.nActiveImage - 1].getTitle;
								if (strTitle)
									elImgMedium.title = strTitle;
							}
						}
					}
				}
			}
		},
	
	toggleTabs:
		function(e) {
			var elEvent = e || window.event;
			var elTarget = null;
			if (elEvent) {
				elTarget = elEvent.target;
				if (elTarget == null)
					elTarget = elEvent.srcElement;

				// Ignore event if shopper clicks on active tab.
				if (elTarget && elTarget.className != "tab_on") {
					var id = elTarget.id;
					if (id.indexOf(ProStores.Detail.ID_DIV_TAB) != -1) {
						var nIdx = id.substring(ProStores.Detail.ID_DIV_TAB.length);
						
						for (var i = 1; i <= ProStores.Detail.nTabCount; i++) {
							var strClassName = "tab_off";
							var elDesc = _(ProStores.Detail.ID_DIV_DESC + i);
							if (elDesc) {
								if (i == nIdx)
									elDesc.style.display = "inline";
								else
									elDesc.style.display = "none";
							}
							var elTab = _(ProStores.Detail.ID_DIV_TAB + i);
							if (elTab) {
								if (i == nIdx)
									elTab.className = "tab_on";
								else
									elTab.className = "tab_off";
							}
						}
					}
				}
			}
		},
		
	updateStyle:
		function(e) {
			var elEvent = e || window.event;
			var elTarget = null;
			if (elEvent) {
				elTarget = elEvent.target;
				if (elTarget == null)
					elTarget = elEvent.srcElement;

				// Make sure we caught an event for an element we care about.
				if (elTarget) {
					var id = elTarget.id;
					if (id.indexOf(ProStores.Detail.ID_IMG_SMALL) != -1) {
						var elDivSmallImage = _(ProStores.Detail.ID_DIV_SMALL_IMAGE + id.substring(ProStores.Detail.ID_IMG_SMALL.length));
						if (elDivSmallImage)
							elDivSmallImage.style.borderColor = ProStores.Detail.INACTIVE_BORDER_COLOR;
					}
				}
			}
		},
		
	zoomImage:
		function() {
		 	if (ProStores.Detail.aProductImages.length > 0) {
				var urlZoom = ProStores.Detail.aProductImages[ProStores.Detail.nActiveImage - 1].getLargeImage;
	
				if (!urlZoom)
					var urlZoom = ProStores.Detail.aProductImages[ProStores.Detail.nActiveImage - 1].getMediumImage;
					
				if (urlZoom) {
					zoomWindow = window.open(urlZoom, 'zoomLargeImage','width=600,height=650,resizable=yes,menubar=yes,location=no,status=no,scrollbars=yes');
					zoomWindow.focus();
				}
			}
		}
};

ProStores.Detail.Images = function(urlMediumImage, heightMedium, widthMedium, urlLargeImage) {
	this.m_urlMediumImage = urlMediumImage;
	this.m_heightMedium = heightMedium;
	this.m_widthMedium = widthMedium;
	this.m_urlLargeImage = urlLargeImage;
};

ProStores.Detail.Images.prototype = {
	m_urlMediumImage : null,
	m_heightMedium : 0,
	m_widthMedium : 0,
	m_urlLargeImage : null,

	getMediumHeight:
		function() {
			return this.m_heightMedium;
		},

	getMediumImageUrl:
		function() {
			return this.m_urlMediumImage;
		},

	getMediumWidth:
		function() {
			return this.m_widthMedium;
		},

	getLargeImageUrl:
		function() {
			return this.m_urlLargeImage;
		}
};

onload = ProStores.Detail.init;