EvansZoomer = new Object();

EvansZoomer.popupOpen = false;
EvansZoomer.popupZoomed = false;
EvansZoomer.selectedItem = null;
EvansZoomer.data = { };

EvansZoomer.mainScrollList = new Array();
EvansZoomer.popupScrollList = new Array();

EvansZoomer.useHashBookmark = false;

EvansZoomer.mainScrollPosition = 0;
EvansZoomer.popupScrollPosition = 0;
EvansZoomer.mainThumbnailWidth = 122;
EvansZoomer.popupThumbnailWidth = 117;
EvansZoomer.mainScrollVisible = 3;
EvansZoomer.popupScrollVisible = 6;

EvansZoomer.zoomedImage = null;
EvansZoomer.zoomedImageLoaded = false;
EvansZoomer.zoomedUrl = "";
EvansZoomer.zoomScale = 1;

EvansZoomer.popupScrolling = false;
EvansZoomer.mainScrolling = false;
EvansZoomer.mouseIsOverPopupPrev = false;
EvansZoomer.mouseIsOverPopupNext = false;
EvansZoomer.mouseIsOverMainPrev = false;
EvansZoomer.mouseIsOverMainNext = false;

EvansZoomer.mouseX = 0;
EvansZoomer.mouseY = 0;

EvansZoomer.registerImage = function(id, name, thumbnailUrl, productUrl, popupUrl, zoomUrl) {
	var data = EvansZoomer.data;
	var mainScrollList = EvansZoomer.mainScrollList;
	var popupScrollList = EvansZoomer.popupScrollList;
	
	if (!popupUrl) {
		popupUrl = "";
	}
	
	if (!zoomUrl) {
		zoomUrl = "";
	}

	var newData = { mainScrollIndex: mainScrollList.length, name: name, thumbnailUrl: thumbnailUrl, productUrl: productUrl, popupUrl: popupUrl, zoomUrl: zoomUrl };
	if (popupUrl != "") {
		newData["popupScrollIndex"] = popupScrollList.length;
	} else {
		newData["popupScrollIndex"] = -1;
	}
	
	data[id] = newData;
	mainScrollList.push(id);
	if (popupUrl != "") {
		popupScrollList.push(id);
	}
	
	EvansZoomer.data = data;
	EvansZoomer.mainScrollList = mainScrollList;
	EvansZoomer.popupScrollList = popupScrollList;
}

EvansZoomer.initControls = function() {
	var data = EvansZoomer.data;
	var mainScrollList = EvansZoomer.mainScrollList;
	
	if (mainScrollList.length < 2) {
		Element.hide("product_showcase_thumbnails");
		Element.hide("PopBoxThumbnails");
	} else {
		Element.show("product_showcase_thumbnails");
		Element.show("PopBoxThumbnails");
		
		var popup = "<ul>";
		var main = "<ul>";
		for (id in data) {
			var d = data[id];
			
			var name = d["name"];
			var thumbnailUrl = d["thumbnailUrl"];
			var popupUrl = d["popupUrl"];
			
			if (popupUrl != "") {
				popup += "<li id=\"product_image_thumb_" + id + "_popup\"><a href=\"javascript:EvansZoomer.showImage(" + id + ", 'popup');\"><img src=\"" + thumbnailUrl + "\" width=\"106\" height=\"70\" class=\"PopBoxImageSmall\" /></a></li>";
			}
			main += "<li id=\"product_image_thumb_" + id + "_main\"><a href=\"javascript:EvansZoomer.showImage(" + id + ", 'main');\"><img src=\"" + thumbnailUrl + "\" width=\"106\" height=\"70\" class=\"PopBoxImageSmall\" /></a></li>";
		}
		popup += "</ul>";
		main += "</ul>";
		
		Element.update("popupScroller", popup);
		Element.update("mainScroller", main);
	
		EvansZoomer.updateScrollArrows();
	}
	
	var hash = window.location.hash.substr(1);
	var hashSelected = hash.toQueryParams().show;
	if (EvansZoomer.useHashBookmark && hashSelected && data[hashSelected]) {
		EvansZoomer.showImage(hashSelected, 'main');
	} else {
		if (mainScrollList.length > 0) {
			EvansZoomer.showImage(mainScrollList[0], 'main');
		}
	}
	
	Event.observe(window, "load", function() {
		Event.observe(document, "keypress", function(e) {
			if (!e) {
				e = window.event;
			}

			var code;
			if (e.keyCode) {
				code = e.keyCode;
			} else if (e.which) {
				code = e.which;
			}
			
			EvansZoomer.keyPressed(code);
		});
		
		Event.observe(document, "mousemove", EvansZoomer.updateMousePosition);
	});
}

EvansZoomer.scrollLeft = function(via) {
	switch (via) {
	case "popup" :
		EvansZoomer.popupScrollPosition--;
		if (EvansZoomer.popupScrollPosition < 0) {
			EvansZoomer.popupScrollPosition = 0;
		}
		new Effect.Move("popupScroller", { x: -EvansZoomer.popupScrollPosition * EvansZoomer.popupThumbnailWidth, y: 0, mode: "absolute", afterFinish: EvansZoomer.onPopupScrollFinished });
		EvansZoomer.popupScrolling = true;
		break;
	case "main" :
		EvansZoomer.mainScrollPosition--;
		if (EvansZoomer.mainScrollPosition < 0) {
			EvansZoomer.mainScrollPosition = 0;
		}
		new Effect.Move("mainScroller", { x: -EvansZoomer.mainScrollPosition * EvansZoomer.mainThumbnailWidth, y: 0, mode: "absolute", afterFinish: EvansZoomer.onMainScrollFinished });
		EvansZoomer.mainScrolling = true;
		break;
	}
	
	EvansZoomer.updateScrollArrows();
}

EvansZoomer.scrollRight = function(via) {
	var mainScrollList = EvansZoomer.mainScrollList;
	var popupScrollList = EvansZoomer.popupScrollList;
	
	switch (via) {
	case "popup" :
		EvansZoomer.popupScrollPosition++;
		if (EvansZoomer.popupScrollPosition + EvansZoomer.popupScrollVisible >= popupScrollList.length) {
			EvansZoomer.popupScrollPosition = popupScrollList.length - EvansZoomer.popupScrollVisible;
		}
		new Effect.Move("popupScroller", { x: -EvansZoomer.popupScrollPosition * EvansZoomer.popupThumbnailWidth, y: 0, mode: "absolute", afterFinish: EvansZoomer.onPopupScrollFinished });
		EvansZoomer.popupScrolling = true;
		break;
	case "main" :
		EvansZoomer.mainScrollPosition++;
		if (EvansZoomer.mainScrollPosition + EvansZoomer.mainScrollVisible >= mainScrollList.length) {
			EvansZoomer.mainScrollPosition = mainScrollList.length - EvansZoomer.mainScrollVisible;
		}
		new Effect.Move("mainScroller", { x: -EvansZoomer.mainScrollPosition * EvansZoomer.mainThumbnailWidth, y: 0, mode: "absolute", afterFinish: EvansZoomer.onMainScrollFinished });
		EvansZoomer.mainScrolling = true;
		break;
	}
	
	EvansZoomer.updateScrollArrows();
}

EvansZoomer.onPopupScrollFinished = function() {
	EvansZoomer.popupScrolling = false;
	
	if (EvansZoomer.mouseIsOverPopupPrev) {
		EvansZoomer.scrollLeft("popup");
	}
	if (EvansZoomer.mouseIsOverPopupNext) {
		EvansZoomer.scrollRight("popup");
	}
}

EvansZoomer.onMainScrollFinished = function() {
	EvansZoomer.mainScrolling = false;
	
	if (EvansZoomer.mouseIsOverMainPrev) {
		EvansZoomer.scrollLeft("main");
	}
	if (EvansZoomer.mouseIsOverMainNext) {
		EvansZoomer.scrollRight("main");
	}
}

EvansZoomer.updateScrollArrows = function() {
	var mainScrollList = EvansZoomer.mainScrollList;
	var popupScrollList = EvansZoomer.popupScrollList;
	
	if (popupScrollList.length > EvansZoomer.popupScrollVisible) {
		Element.show("arrow_prev_popup_holder");
		Element.show("arrow_next_popup_holder");

		if (EvansZoomer.popupScrollPosition > 0) {
			Element.show("arrow_prev_popup");
			$("arrow_prev_popup_holder").observe('mouseover', EvansZoomer.onPopupPrevMouseOver);
			$("arrow_prev_popup_holder").observe('mouseout', EvansZoomer.onPopupPrevMouseOut);
		} else {
			Element.hide("arrow_prev_popup");
			$("arrow_prev_popup_holder").stopObserving('mouseover', EvansZoomer.onPopupPrevMouseOver);
			$("arrow_prev_popup_holder").stopObserving('mouseout', EvansZoomer.onPopupPrevMouseOut);
			EvansZoomer.mouseIsOverPopupPrev = false;
		}
		
		if (EvansZoomer.popupScrollPosition + EvansZoomer.popupScrollVisible < popupScrollList.length) {
			Element.show("arrow_next_popup");
			$("arrow_next_popup_holder").observe('mouseover', EvansZoomer.onPopupNextMouseOver);
			$("arrow_next_popup_holder").observe('mouseout', EvansZoomer.onPopupNextMouseOut);
		} else {
			Element.hide("arrow_next_popup");
			$("arrow_next_popup_holder").stopObserving('mouseover', EvansZoomer.onPopupNextMouseOver);
			$("arrow_next_popup_holder").stopObserving('mouseout', EvansZoomer.onPopupNextMouseOut);
			EvansZoomer.mouseIsOverPopupNext = false;
		}
	} else {
		Element.hide("arrow_prev_popup_holder");
		Element.hide("arrow_next_popup_holder");
	}

	if (mainScrollList.length > EvansZoomer.mainScrollVisible) {
		Element.show("arrow_prev_main_holder");
		Element.show("arrow_next_main_holder");

		if (EvansZoomer.mainScrollPosition > 0) {
			Element.show("arrow_prev_main");
			$("arrow_prev_main_holder").observe('mouseover', EvansZoomer.onMainPrevMouseOver);
			$("arrow_prev_main_holder").observe('mouseout', EvansZoomer.onMainPrevMouseOut);
		} else {
			Element.hide("arrow_prev_main");
			$("arrow_prev_main_holder").stopObserving('mouseover', EvansZoomer.onMainPrevMouseOver);
			$("arrow_prev_main_holder").stopObserving('mouseout', EvansZoomer.onMainPrevMouseOut);
			EvansZoomer.mouseIsOverMainPrev = false;
		}
		
		if (EvansZoomer.mainScrollPosition + EvansZoomer.mainScrollVisible < mainScrollList.length) {
			Element.show("arrow_next_main");
			$("arrow_next_main_holder").observe('mouseover', EvansZoomer.onMainNextMouseOver);
			$("arrow_next_main_holder").observe('mouseout', EvansZoomer.onMainNextMouseOut);
		} else {
			Element.hide("arrow_next_main");
			$("arrow_next_main_holder").stopObserving('mouseover', EvansZoomer.onMainNextMouseOver);
			$("arrow_next_main_holder").stopObserving('mouseout', EvansZoomer.onMainNextMouseOut);
			EvansZoomer.mouseIsOverMainNext = false;
		}
	} else {
		Element.hide("arrow_prev_main_holder");
		Element.hide("arrow_next_main_holder");
	}
}

EvansZoomer.onPopupPrevMouseOver = function() {
	EvansZoomer.mouseIsOverPopupPrev = true;
	
	if (!EvansZoomer.popupScrolling) {
		EvansZoomer.scrollLeft("popup");
	}
}

EvansZoomer.onPopupPrevMouseOut = function() {
	EvansZoomer.mouseIsOverPopupPrev = false;
}

EvansZoomer.onPopupNextMouseOver = function() {
	EvansZoomer.mouseIsOverPopupNext = true;
	
	if (!EvansZoomer.popupScrolling) {
		EvansZoomer.scrollRight("popup");
	}
}

EvansZoomer.onPopupNextMouseOut = function() {
	EvansZoomer.mouseIsOverPopupNext = false;
}

EvansZoomer.onMainPrevMouseOver = function() {
	EvansZoomer.mouseIsOverMainPrev = true;
	
	if (!EvansZoomer.mainScrolling) {
		EvansZoomer.scrollLeft("main");
	}
}

EvansZoomer.onMainPrevMouseOut = function() {
	EvansZoomer.mouseIsOverMainPrev = false;
}

EvansZoomer.onMainNextMouseOver = function() {
	EvansZoomer.mouseIsOverMainNext = true;
	
	if (!EvansZoomer.mainScrolling) {
		EvansZoomer.scrollRight("main");
	}
}

EvansZoomer.onMainNextMouseOut = function() {
	EvansZoomer.mouseIsOverMainNext = false;
}

EvansZoomer.ensureSelectedItemThumbnailIsVisibleInMainScroller = function(index) {
	if (index < 0) {
		return;
	}

	if (EvansZoomer.mainScrollPosition > index) {
		EvansZoomer.mainScrollPosition = index;
		new Effect.Move("mainScroller", { x: -EvansZoomer.mainScrollPosition * EvansZoomer.mainThumbnailWidth, y: 0, mode: "absolute", afterFinish: EvansZoomer.onMainScrollFinished });
		EvansZoomer.mainScrolling = true;
	} else if (EvansZoomer.mainScrollPosition + EvansZoomer.mainScrollVisible <= index) {
		EvansZoomer.mainScrollPosition = (index + 1) - EvansZoomer.mainScrollVisible;
		new Effect.Move("mainScroller", { x: -EvansZoomer.mainScrollPosition * EvansZoomer.mainThumbnailWidth, y: 0, mode: "absolute", afterFinish: EvansZoomer.onMainScrollFinished });
		EvansZoomer.mainScrolling = true;
	}
}

EvansZoomer.ensureSelectedItemThumbnailIsVisibleInPopupScroller = function(index) {
	if (index < 0) {
		return;
	}
	
	if (EvansZoomer.popupScrollPosition > index) {
		EvansZoomer.popupScrollPosition = index;
		new Effect.Move("popupScroller", { x: -EvansZoomer.popupScrollPosition * EvansZoomer.popupThumbnailWidth, y: 0, mode: "absolute", afterFinish: EvansZoomer.onPopupScrollFinished });
		EvansZoomer.popupScrolling = true;
	} else if (EvansZoomer.popupScrollPosition + EvansZoomer.popupScrollVisible <= index) {
		EvansZoomer.popupScrollPosition = (index + 1) - EvansZoomer.popupScrollVisible;
		new Effect.Move("popupScroller", { x: -EvansZoomer.popupScrollPosition * EvansZoomer.popupThumbnailWidth, y: 0, mode: "absolute", afterFinish: EvansZoomer.onPopupScrollFinished });
		EvansZoomer.popupScrolling = true;
	} 
}

EvansZoomer.showImage = function(id, via) {
	if (id == EvansZoomer.selectedItem) {
		return;
	}
	
	EvansZoomer.unloadZoomImage();
	
	var data = EvansZoomer.data;
	var d = data[id];
	
	if (!d) {
		return;
	}
	
	EvansZoomer.ensureSelectedItemThumbnailIsVisibleInMainScroller(d["mainScrollIndex"]);
	EvansZoomer.ensureSelectedItemThumbnailIsVisibleInPopupScroller(d["popupScrollIndex"]);
	EvansZoomer.updateScrollArrows();
	
	if (EvansZoomer.useHashBookmark) {
		var params = { show: id };
		window.location.hash = $H(params).toQueryString();
	}
	
	var productUrl = d["productUrl"];
	var popupUrl = d["popupUrl"];
	var zoomUrl = d["zoomUrl"];
	var name = d["name"];
	
	if (EvansZoomer.selectedItem != null) {
		if ($("product_image_thumb_" + EvansZoomer.selectedItem + "_popup") != null) {
			$("product_image_thumb_" + EvansZoomer.selectedItem + "_popup").removeClassName("activeThumbnail");
		}
		if ($("product_image_thumb_" + EvansZoomer.selectedItem + "_main") != null) {
			$("product_image_thumb_" + EvansZoomer.selectedItem + "_main").removeClassName("activeThumbnail");
		}
	}
	
	$("main_product_image").src = productUrl;
	
	if (popupUrl != "") {
		Element.show("magnify_plus");
		
		$("popcopymain_product_image").src = popupUrl;

		$("main_product_image").onclick = EvansZoomer.showPopup;
		$("main_product_image").addClassName("cursor_pointer");
	} else {
		Element.hide("magnify_plus");
		
		$("main_product_image").onclick = null;
		$("main_product_image").removeClassName("cursor_pointer");
	}
	
	if (zoomUrl != "") {
		Element.show("PopBoxMag");
		
		EvansZoomer.zoomedUrl = zoomUrl;
		$("popcopymain_zoomed_image").name = name;
		
		$("popcopymain_product_image").onclick = EvansZoomer.toggleZoomPopup;
		$("popcopymain_product_image").addClassName("cursor_pointer");
	} else {
		Element.hide("PopBoxMag");
		
		$("popcopymain_product_image").onclick = null;
		$("popcopymain_product_image").removeClassName("cursor_pointer");
	}
	
	if ($("product_image_thumb_" + id + "_popup") != null) {
		$("product_image_thumb_" + id + "_popup").addClassName("activeThumbnail");
	}
	if ($("product_image_thumb_" + id + "_main") != null) {
		$("product_image_thumb_" + id + "_main").addClassName("activeThumbnail");
	}
	
	EvansZoomer.unzoomPopup();
	
	EvansZoomer.selectedItem = id;
}

EvansZoomer.keyPressed = function(code) {
	if (code == Event.KEY_ESC) {
		EvansZoomer.hidePopup();
	}
}

EvansZoomer.showPopup = function() {
	if (EvansZoomer.popupOpen) {
		return;
	}
	
	EvansZoomer.popupOpen = true;
	EvansZoomer.unzoomPopup();
	
	EvansZoomer.resizeBackground();
	Element.show("PopBoxBackground");
	
	window.onresize = EvansZoomer.resizeBackground;
	
	// Element.show("PopBoxContainer");
	new Effect.Appear("PopBoxContainer");
	window.scroll(0, 0);
}

EvansZoomer.resizeBackground = function() {
	var dimensions = EvansZoomer.getPageSize();
	var w = dimensions[0];
	var h = dimensions[1];
	
	if (w < 1000) {
		w = 1000;
	}
	
	$('PopBoxBackground').style.width = w + 'px';
	$('PopBoxBackground').style.height = h + 'px';
}

EvansZoomer.getPageSize = function() {
    var xScroll, yScroll;
	
	if (window.innerHeight && window.scrollMaxY) {	
		xScroll = window.innerWidth + window.scrollMaxX;
		yScroll = window.innerHeight + window.scrollMaxY;
	} else if (document.body.scrollHeight > document.body.offsetHeight){ // all but Explorer Mac
		xScroll = document.body.scrollWidth;
		yScroll = document.body.scrollHeight;
	} else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari
		xScroll = document.body.offsetWidth;
		yScroll = document.body.offsetHeight;
	}
	
	var windowWidth, windowHeight;
	
	if (self.innerHeight) {	// all except Explorer
		if(document.documentElement.clientWidth){
			windowWidth = document.documentElement.clientWidth; 
		} else {
			windowWidth = self.innerWidth;
		}
		windowHeight = self.innerHeight;
	} else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode
		windowWidth = document.documentElement.clientWidth;
		windowHeight = document.documentElement.clientHeight;
	} else if (document.body) { // other Explorers
		windowWidth = document.body.clientWidth;
		windowHeight = document.body.clientHeight;
	}

	// for small pages with total height less then height of the viewport
	if(yScroll < windowHeight){
		pageHeight = windowHeight;
	} else { 
		pageHeight = yScroll;
	}

	// for small pages with total width less then width of the viewport
	if(xScroll < windowWidth){	
		pageWidth = xScroll;		
	} else {
		pageWidth = windowWidth;
	}

	return [pageWidth,pageHeight];
}

EvansZoomer.hidePopup = function() {
	if (!EvansZoomer.popupOpen) {
		return;EvansZoomer
	}
	
	EvansZoomer.popupOpen = false;
	EvansZoomer.unzoomPopup();
	
	Element.hide("PopBoxBackground");
	Element.hide("PopBoxContainer");
	
	window.onresize = null;
}

EvansZoomer.toggleZoomPopup = function() {
	if (EvansZoomer.popupZoomed) {
		EvansZoomer.unzoomPopup();
	} else {
		EvansZoomer.zoomPopup();
	}
}

EvansZoomer.zoomPopup = function() {
	if (EvansZoomer.popupZoomed) {
		return;
	}
	
	EvansZoomer.popupZoomed = true;
	
	Element.hide("PopBoxMagPlus");
	Element.show("PopBoxMagMinus");
	
	EvansZoomer.loadZoomImage();
}

EvansZoomer.unzoomPopup = function() {
	if (!EvansZoomer.popupZoomed) {
		return;
	}
	
	EvansZoomer.popupZoomed = false;
	
	EvansZoomer.stopZoomFunctionality();
	
	Element.hide("PopBoxLoading");
	Element.hide("PopBoxZoom");
	Element.show("popcopymain_product_image");
	Element.show("PopBoxMagPlus");
	Element.hide("PopBoxMagMinus");
}

EvansZoomer.loadZoomImage = function() {
	if (EvansZoomer.zoomedImageLoaded) {
		$("popcopymain_zoomed_image").src = EvansZoomer.zoomedUrl;
		
		Element.hide("popcopymain_product_image");
		Element.show("PopBoxZoom");
		Element.hide("PopBoxLoading");
		
		EvansZoomer.startZoomFunctionality();
	} else {
		Element.show("PopBoxLoading");
		
		EvansZoomer.zoomedImage = new Image();
		EvansZoomer.zoomedImage.src = EvansZoomer.zoomedUrl;
		
		setTimeout(EvansZoomer.checkZoomImageLoaded, 500);
	}
}

EvansZoomer.unloadZoomImage = function() {
	EvansZoomer.zoomedImage = null;
	EvansZoomer.zoomedImageLoaded = false;
	EvansZoomer.zoomedUrl = "";
}

EvansZoomer.checkZoomImageLoaded = function() {
	if (EvansZoomer.zoomedImage == null) {
		return;
	}
	
	if (EvansZoomer.zoomedImage.complete) {
		EvansZoomer.zoomedImageLoaded = true;
		
		EvansZoomer.loadZoomImage();
	} else {
		setTimeout(EvansZoomer.checkZoomImageLoaded, 500);
	}
}

EvansZoomer.startZoomFunctionality = function() {
	var imgZoom = $("popcopymain_zoomed_image");
    imgZoom.style.cursor = "crosshair";
    
    EvansZoomer.zoomScale = (EvansZoomer.zoomedImage.width - $("PopBoxZoom").getWidth()) / $("PopBoxZoom").getWidth();
	$("PopBoxZoom").observe('mousemove', EvansZoomer.moveZoomedImage);
	EvansZoomer.moveZoomedImageTo(EvansZoomer.mouseX, EvansZoomer.mouseY);
}

EvansZoomer.updateMousePosition = function(e) {
	EvansZoomer.mouseX = e.pointerX();
	EvansZoomer.mouseY = e.pointerY();
}

EvansZoomer.stopZoomFunctionality = function() {
	$("PopBoxZoom").stopObserving('mousemove', EvansZoomer.moveZoomedImage);
}

EvansZoomer.moveZoomedImage = function(e) {
	EvansZoomer.moveZoomedImageTo(e.pointerX(), e.pointerY());
}

EvansZoomer.moveZoomedImageTo = function(x, y) {
	var imgZoom = $("popcopymain_zoomed_image");
	var offSet = $("PopBoxZoom").cumulativeOffset();
	
	imgZoom.style.left = 0 - ((x - offSet.left) * EvansZoomer.zoomScale) + 'px';
	imgZoom.style.top = 0 - ((y - offSet.top) * EvansZoomer.zoomScale) + 'px';
}