/*
 * MojoZoom 0.1.1 - JavaScript Image Zoom
 * Copyright (c) 2008 Jacob Seidelin, cupboy@gmail.com, http://blog.nihilogic.dk/
 * MIT License [http://www.opensource.org/licenses/mit-license.php]
 * 
 * This has been altered to fit according to the Anthropologie website. Added the additional functionality of "click to zoom" and image preloaders.
 */

var MojoZoom = (function() {
	//set the stage height & width
	var defaultWidth = 328;
	var defaultHeight = 328;
	
	var $ = function(id) {return document.getElementById(id);};
	var dc = function(tag) {return document.createElement(tag);};
	
	function addEvent(element, ev, handler) 
	{
		var doHandler = function(e) {
			return handler(e||window.event);
		};
		if (element.addEventListener) { 
			element.addEventListener(ev, doHandler, false); 
		} else if (element.attachEvent) { 
			element.attachEvent("on" + ev, doHandler); 
		}
	}
	
	function getElementPos(element)
	{
		var x = element.offsetLeft;
		var y = element.offsetTop;
		var parent = element.offsetParent;
		while (parent) {
			x += parent.offsetLeft;
			y += parent.offsetTop;
			parent = parent.offsetParent;
		}
		return {
			x : x,
			y : y
		};
	}
	
	function getEventMousePos(element, e) {
		var scrollX = document.body.scrollLeft || document.documentElement.scrollLeft;
		var scrollY = document.body.scrollTop || document.documentElement.scrollTop;
		if (e.currentTarget) {
			var pos = getElementPos(element);//getElementPos(element);
			return {
				x : e.clientX - pos.x + scrollX,
				y : e.clientY - pos.y + scrollY
			};
		}
		return {
			x : e.offsetX,
			y : e.offsetY
		};
	}
	
	var displayLoading = function(element){
		var loadElem = $('load');
		if (element === null) {
			return false;
		}
		if (loadElem === null){
			var div = dc("div");
			div.setAttribute('id', 'load');
			div.className ="loading";
			div.style.align="center";
			element.appendChild(div);
		} else{loadElem.style.display="block";	}	
		
	};
	
	function hideLoading(element) {
		var loadar = $('load');
		if(loadar !== null){
			 loadar.style.left = "-9999px";
			 loadar.style.display = "none";	
			 loadar.style.background="";}
		//parent.removeChild(loadar);
	}
		
	/**
	Alter Zoom Status Information Functions
	Zoom status will typically say something like: "Rollover Image to Zoom", "Loading 10x Zoom", "Loading 4x Zoom", or "Click to Zoom"
	**/
	
	function setZoomText(text){
		var zoomDiv = $('zoomState');
		if (zoomDiv){zoomDiv.innerHTML = text;}		
	}
	
	/**
	Called 1 time at page load and makes the product zoomable based off of the following params.
	
	@params
	img - img dom element found in the zoomViewer div.
	zoomSrc - src of the 4X zoom image.
	zoom2Src - src of the 10x zoom image.
	zoomImgCtr - 
	zoomWidth
	zoomHeight
	alwaysShow
	**/
	function makeZoomable(img, zoomSrc, zoom2Src, zoomImgCtr, zoomWidth, zoomHeight, alwaysShow) {
		var loader;
		if (!img.complete && !img.__mojoZoomQueued) {
			displayLoading(img.parentNode);
			//setZoomText("Loading...");
			var ef1 = new Effect.Opacity(img, { from: 0, to: 0, duration: 0.1 });
			ef1=null;
			var ev1 = new Event.observe(img, "load", function() {
				img.__mojoZoomQueued = true;
				loader=true;
				hideLoading();
				//var ef2 = new Effect.Opacity(img, { from: 0, to: 1, duration: 0.8});
				//img.style.display="block";
				//ef2=null;			
					//new Effect.Opacity(img, { from: 0, to: 0});
				makeZoomable(img, zoomSrc, zoom2Src, zoomImgCtr, zoomWidth, zoomHeight, alwaysShow);
				
			});
			return;
		}
		var ef2 = new Effect.Opacity(img, { from: 0, to: 1, duration: 0.8});
		img.style.display="block";
		ef2=null;			
		
		/*PRELOAD IMAGES*/
		var image1 = new Image();
		image1.src = zoomSrc;
		//var image2 = new Image();
		//image2.src = zoom2Src;
		
		/* DISPLAY ZOOM TEXT*/
		if (!isInImage){
			setZoomText("Rollover image to zoom");
		}
		
		//find the image width & height
		var w = img.offsetWidth;
		var h = img.offsetHeight;
		///TODO///
		///temporary for qs///
		if (!w && !h)
		{
			var w = 232;
			var h = 348;
		}
		//////////////
		
		//find the containing tag for the image
		var oldParent = img.parentNode;
		var linkParent;
		if (oldParent.nodeName != "A") {
			linkParent = dc("a");
			
			oldParent.replaceChild(linkParent, img);
			linkParent.appendChild(img);
		} else {
			linkParent = oldParent;
		}
		
		linkParent.style.position = "relative";
		linkParent.style.display = "block";
		linkParent.style.width = w+"px";
		linkParent.style.height = h+"px";
		linkParent.style.margin = "0";
		linkParent.style.padding = "0";
		
		var imgLeft = img.offsetLeft;
		var imgTop = img.offsetTop;

		//actual position on the image (cursor)
		var zoom = dc("div");
		zoom.className = "mojozoom_marker";
		
		//image to zoom
		var zoomImg = dc("img");
		zoomImg.className = "mojozoom_img";
		zoomImg.style.position = "absolute";
		zoomImg.style.left = "-9999px";

		//let's put these divs in a more specific place on the page so we can access it easier for the styles		
		var wrapper = $("productDetail");
		if (!wrapper)
			wrapper = $("quickshop");
			
		wrapper.appendChild(zoomImg);
		
		var isInImage = false;
		
		var parent = img.parentNode;
		
		//create our hit area to overlay the image
		var ctr = dc("div");
		ctr.style.position = "absolute";
		ctr.style.left = imgLeft+"px";
		ctr.style.top = imgTop+"px";
		ctr.style.width = w+"px";
		ctr.style.height = h+"px";
		ctr.style.overflow = "hidden";
		ctr.style.display = "none";
		
		ctr.appendChild(zoom);
		parent.appendChild(ctr);

		var zoomInput = parent; 
		
		var useDefaultCtr = false;
	
		if (!zoomImgCtr) {
			zoomImgCtr = dc("div");
			zoomImgCtr.className = "mojozoom_imgctr";
			
			var imgPos = getElementPos(img);
			//zoomImgCtr.style.left = w + imgPos.x + "px";
			zoomImgCtr.style.top = imgPos.y + "px";
			zoomImgCtr.style.left = "-9999px";
			zoomImgCtr.style.width =  defaultWidth +"px";
			zoomImgCtr.style.height = defaultHeight + "px";
			wrapper.appendChild(zoomImgCtr);
			
			/*zoomImgCtrBorder = dc("div");
			zoomImgCtrBorder.className = "mojozoom_imgctr_border";
			zoomImgCtr.style.width =  (defaultWidth) +"px";
			zoomImgCtr.style.height = (defaultHeight) + "px";
			document.body.appendChild(zoomImgCtrBorder);
			*/
			useDefaultCtr = true;
			
		}
		
		zoomImgCtr.style.overflow = "hidden";
		zoomImgCtr.style.visibility = "hidden";
		
		var loadDiv = dc("div");
		loadDiv.className = "mojozoom_imgcaption";
		loadDiv.innerHTML = "LOADING...";
		//zoomImgCtr.appendChild(loadDiv);
		
		var tempSrc = zoomSrc;
		var fromClick = false;
		var isIE = !!document.all && !!window.attachEvent && !window.opera;
		
		zoomWidth = zoomImg.offsetWidth;
		zoomHeight = zoomImg.offsetHeight;
		var ctrWidth = zoomImgCtr.offsetWidth;
		var ctrHeight = zoomImgCtr.offsetHeight;
		var ratioW = zoomWidth / w;
		var ratioH = zoomHeight / h;
		
		var markerWidth = Math.round(ctrWidth / ratioW);
		var markerHeight = Math.round(ctrHeight / ratioH);
		var clickPos;
		addEvent(zoomImg, "load", function(e) {
				
			zoomWidth = zoomImg.offsetWidth;
			zoomHeight = zoomImg.offsetHeight;
			ctrWidth = zoomImgCtr.offsetWidth;
			ctrHeight = zoomImgCtr.offsetHeight;
			ratioW = zoomWidth / w;
			ratioH = zoomHeight / h;
			
			markerWidth = Math.round(ctrWidth / ratioW);
			markerHeight = Math.round(ctrHeight / ratioH);
			/* marker is the hit area size */
			
			
			//if the event is being called from the click instance, don't create new divs - modify old ones...
			if(!fromClick){
				//zoomImgCtr.appendChild(zoomImg);
				zoomImgCtr.appendChild(zoomImg);
				
				var zoomFill = dc("div");
				zoomFill.className = "mojozoom_fill";
				zoom.appendChild(zoomFill);
					
					
				var zoomBorder = dc("div");
				zoomBorder.className = "mojozoom_border";
				zoom.appendChild(zoomBorder);
			}
			
			zoom.style.width = markerWidth+"px";
			zoom.style.height = markerHeight+"px";
			
			if(fromClick){
				if(zoomImg.src == zoomSrc){setZoomText("Click to zoom in"); }
				if(zoomImg.src == zoom2Src){setZoomText("Click to zoom out");}
			/*	*/
				isInImage = true;
				var imgPos = getElementPos(img);
				var pos = null;
				if (!isIE){
				if(clickPos !== null){ 
					pos = clickPos;}
				} else{
					pos = getEventMousePos(zoomInput, e);}
				
				if (e.srcElement && isIE) {
				  if (e.srcElement == zoom) {return;}
				  if (e.srcElement != zoomInput) {
					  var zoomImgPos = getElementPos(e.srcElement);
					  pos.x -= (imgPos.x - zoomImgPos.x);
					  pos.y -= (imgPos.y - zoomImgPos.y);
				  }
				}
						var x = markerWidth/2;
						var y = markerHeight/2;
						if (!isIE) {
							pos.x -= imgLeft;
							pos.y -= imgTop;
						}
						
						if (pos.x < x){ pos.x = x;}
						if (pos.x > w-x){ pos.x = w-x;}
						if (pos.y < y){ pos.y = y;}
						if (pos.y > h-y){ pos.y = h-y;}
	
						var left = ((pos.x - x)|0);
						var top = ((pos.y - y)|0);
	
						zoom.style.left = left + "px";
						zoom.style.top = top + "px";
		
						zoomImg.style.left = -((pos.x*ratioW - ctrWidth/2)|0)+"px";
						zoomImg.style.top = -((pos.y*ratioH - ctrHeight/2)|0)+"px";
						
						var ef3 = new Effect.Opacity(zoomImg, { from: 0.5, to: 1, duration: 0.5 });
						ef3=null;
						//setTimeout(function(){
						//	ctr.style.display = "block";
						//	new Effect.Opacity(zoomImgCtr, { from: 0, to: 1, duration: 0.5});}, 1);
						//setZoomText("click to change zoom level")
						//alert('called');
			
			
			}
				
			
			if(!fromClick){
				addEvent(zoomInput, "mouseout", function(e) {
						setTimeout(function (){setZoomText("Rollover image to zoom");}, 1);
						var target = e.target || e.srcElement;
						if (!target) {return;}
						if (target.nodeName != "DIV")  {return;}
						var relTarget = e.relatedTarget || e.toElement;
						if (!relTarget)  {return;}
						while (relTarget != target && relTarget.nodeName != "BODY" && relTarget.parentNode) {
							relTarget = relTarget.parentNode;
						}
						if (relTarget != target && !fromClick) {
							isInImage = false;
							ctr.style.display = "none";
							zoomImgCtr.style.visibility = "hidden";
							
						}
						
					}
				);
				addEvent(wrapper, "mouseover", function(e) {
						if (isInImage && !(e.toElement == zoomBorder || e.target == zoomBorder)) {
							setZoomText("Rollover image to zoom");
							ctr.style.display = "none";
							zoomImgCtr.style.visibility = "hidden";
							isInImage = false;
						}
					}
				);
				if (typeof hideshowSelectTags == 'function'){ //check to see if this fnctn exists; in quickshop.js
					hideshowSelectTags(1); //for ie6 -- from quickshop.js
				}
				/*addEvent(zoomInput, "click", function(e){
				  isInImage = true;
				  fromClick = true;
				
				  clickPos = getEventMousePos(zoomInput, e);
				  if (zoomSrc && zoom2Src ){
					 if (tempSrc==zoomSrc){
						setZoomText("Loading 8X Zoom..."); 
						tempSrc=zoom2Src;	
						
					 }
					 else if(tempSrc==zoom2Src){
					 	setZoomText("Loading 4X Zoom..."); 
						tempSrc=zoomSrc;
						
					 } 
				  }
				  setTimeout(function() { zoomImg.src = tempSrc;},1);	
							
				});
				*/
				addEvent(zoomInput, "mousemove", function moveTarget(e) {
					if(zoomImg.src == zoomSrc){setZoomText("Click to zoom in"); }
					if(zoomImg.src == zoom2Src){setZoomText("Click to zoom out"); }
					//setZoomText("Click to change zoom level");
					isInImage = true;
					var imgPos = getElementPos(img);
					if (useDefaultCtr) {
							//zoomImgCtr.style.left = "0px";
							zoomImgCtr.style.left = w + imgPos.x + "px";
							zoomImgCtr.style.top = imgPos.y + "px";
						}
						
						var pos = getEventMousePos(zoomInput, e);
						if (e.srcElement && isIE) {
							if (e.srcElement == zoom)  {return;}
							if (e.srcElement != zoomInput) {
								var zoomImgPos = getElementPos(e.srcElement);
								pos.x -= (imgPos.x - zoomImgPos.x);
								pos.y -= (imgPos.y - zoomImgPos.y);
							}
						}
						var x = markerWidth/2;
						var y = markerHeight/2;
						if (!isIE) {
							pos.x -= imgLeft;
							pos.y -= imgTop;
						}
						
						if (pos.x < x) {pos.x = x;}
						if (pos.x > w-x) {pos.x = w-x;}
						if (pos.y < y){ pos.y = y;}
						if (pos.y > h-y) {pos.y = h-y;}
	
						var left = ((pos.x - x)|0);
						var top = ((pos.y - y)|0);
						
						
						zoom.style.left = left + "px";
						zoom.style.top = top + "px";
						
						zoomImg.style.left = -((pos.x*ratioW - ctrWidth/2)|0)+"px";
						zoomImg.style.top = -((pos.y*ratioH - ctrHeight/2)|0)+"px";
						
						//if(!fromClick){
						ctr.style.display = "block";
						zoomImgCtr.style.visibility = "visible";
						//}
						isInImage = true;
						//setZoomText("click to change zoom level")
						
					}
				);
				if (typeof hideshowSelectTags == 'function'){ //check to see if this fnctn exists; in quickshop.js
					hideshowSelectTags(0); //for ie6 -- from quickshop.js
				}
			}
		});
		image1 = null;
		image2 = null;
		setTimeout(function() { zoomImg.src = tempSrc;},1);
		
	}

	function init() {
		//TODO
		//find out if this is a product detail page, if so, use #zoomViewer img -- for all else, use #zoomViewerqs		
		var wrapper = $("productDetail");
		if (!wrapper)
			var img = $$('#zoomViewerqs img');
		else
			var img = $$('#zoomViewer img');

		var zoomSrc = img[0].getAttribute("data-zoomsrc");
		var zoom2Src = img[0].getAttribute("data-zoomsrc2");
		img[0].setOpacity(0);
		if (zoomSrc && zoom2Src) {
			makeZoomable(img[0], zoomSrc, zoom2Src, $(img[0].getAttribute("id") + "_zoom"), null, null, false);
		}
	}

	return {
		init : init,
		makeZoomable : makeZoomable
	};

})();

//MojoZoom.addEvent(document, "load", MojoZoom.init);