﻿
/*
 * highRes overlay functions
 */
function initializeHighResOverlay() {

	// determine if there are any high res images for the product
	var highResExist = false;
	j$(".variationsTab tbody tr td.colorSwatch").each(function(idx, item) {
		// find the img info and make sure there is a high res image to display.
		// if not, then don't enable link
		var sku = j$(this).siblings("td:first-child").text();
		var imgInfo = varImagesArray[sku];

		if (imgInfo.highResImage.length > 0) {
			highResExist = true;
			return false;
		}
	});

	if (highResExist) {
		if (j$("ul#galleryViewItems li").length == 1) {
			j$("#highResImageOverlay").addClass("singleThumbnail");
		}
	
		// initialize the galleryview component
		var panelSize = 600;
		if (siteIdentifier == 'pflex') {
			panelSize = 500;
		}

		j$('#galleryViewItems').galleryView({
			nav_theme: siteIdentifier,
			panel_width: panelSize,
			panel_height: panelSize,
			frame_width: 65,
			frame_height: 65,
			frame_start: 1,
			filmstrip_size: 7,
			overlay_opacity: 0.5,
			pause_on_hover: true,
			transition_interval: 5000
		});

		// initialize click events on image and link
		j$('#prodImage img').click(handleImageClick)
			.hover(
				function() {
					j$(this).css('cursor', 'pointer');
				}, function() {
					j$(this).css('cursor', 'default');
				});
		j$('#highResImageLink').click(handleImageClick).show();

		// initialize click events on variations tab
		j$(".variationsTab tbody tr td.colorSwatch").each(function(idx, item) {
			// find the img info and make sure there is a high res image to display.
			// if not, then don't enable link
			var sku = j$(this).siblings("td:first-child").text();
			var imgInfo = varImagesArray[sku];

			if (imgInfo.highResImage.length > 0) {
				if (siteIdentifier.toLowerCase() == 'pflex' || (siteIdentifier.toLowerCase() == 'esseltenextgen' && locale == 'enCA')) {
					j$(item).click(handlePflexVariationClick);
				} else {
					j$(item).click(handleVariationClick);
				}

				j$(item).hover(function() {
					j$(this).css('cursor', 'pointer');
				}, function() {
					j$(this).css('cursor', 'default');
				});

				j$('div', item).hover(function() {
					j$(this).css('text-decoration', 'underline');
				}, function() {
					j$(this).css('text-decoration', 'none');
				});
			}
		});
	}
}

function handleImageClick(eventObject) {
	showHighResOverlay(1);
}

function handlePflexVariationClick(eventObject) {

	// find the product image for the select variation and open overlay to that image
	var sku = j$(this).siblings("td:first-child").text();
	var index = 0;
	j$.each(varImagesArray, function(k, v) {
		index++;
		if (k == sku) {
			showHighResOverlay(index);
			return false;
		}
	});
}

function handleVariationClick(eventObject) {

	var sku = j$(this).siblings("td:first-child").text();
	var variationData = varImagesArray[sku];

	j$("#details .sku span").text(sku);
	j$("#prodImage img").attr('src', variationData.prodImage);
	j$("#highResImageOverlay ul.filmstrip li:first-child img").attr("src", variationData.highResImage);
	j$("#highResImageOverlay div.panel:first-child img").attr("src", variationData.highResImage);

	// Updating the Commerce connector button link with clicked variation 'eanCode'
	if (j$("#details .commerceConnectorDiv a").length > 0) {
		var ccHREF = j$("#details .commerceConnectorDiv a").attr("href").split('?eanCode=')[0] + "?eanCode=" + variationData.eanCode;
		j$("#details .commerceConnectorDiv a").attr("href", ccHREF);
	}
}

function showHighResOverlay(item) {

	j$('#galleryViewItems .loader').remove();

	if (j$("#highResImageOverlay.singleThumbnail").length == 1) {
		if (siteIdentifier == 'pflex') {
			j$('#galleryViewItems').height(500);
		} else {
			j$('#galleryViewItems').height(600);
		}
	}
	
	new Popup('highResImageOverlay', null, { modal: true }, { position: 'center' });
	$('highResImageOverlay').popup.show();

	// initialize the galleryview component
	selectGalleryItem(item);

	$('popup_overlay').onclick = function() {
		$('highResImageOverlay').popup.hide();
	};
}

function selectGalleryItem(item) {
	j$("div.panel").hide();
	j$("li.frame").removeClass("current");
	j$("li.frame:nth-child(" + item + ")").click(); 
}

