var izoom = (function(){
	
	this.init = init;
	this.initNew = initNew;
	
	var defaultWidth = 256;
	var defaultHeight = 256;
	var miniWidth = 294;
	var miniHeight = 200;
	var cursorType = "crosshair";
	
	var newTags = new Array();
	
	this.newTags = newTags;

	var isIE = !!document.all && !!window.attachEvent && !window.opera;
	if (!isIE) document.captureEvents(Event.MOUSEMOVE)
	if (!isIE) document.captureEvents(Event.KEYDOWN)
	
	addEvent(window, "load", init);
	
	function init(){
		var images = gettag("img");
		
		for (var i=0;i<newTags.length;i++) {
			if(newTags[i].id == 'wrapper') {
				newTags[i].parentNode.appendChild(getid('prodview_mainimage'));
				newTags[i].parentNode.removeChild(newTags[i]);
			} else {
				newTags[i].parentNode.removeChild(newTags[i]);
			}
		}
		newTags.length = 0;
		
		for (var i=0;i<images.length;i++) {
			var img = images[i];
			var zoomSrc = img.getAttribute("izoomsrc");
			if (zoomSrc) {
				createZoom(img, zoomSrc);
			}
		}
	}
	
	function initNew(){
		newTags.length = 0;
	}
	
	function createZoom(img,zoomSrc){
		//create img and positioning
		createImg(img,zoomSrc);
	}
	
	function createImg(img,zoomSrc){
		
		var alwaysshow = img.getAttribute("izoomalwaysshow");
		if (alwaysshow){
			alwaysshow = alwaysshow;
		} else {
			alwaysshow = ""
		}

		var imgTag = img;

		var imgPos = getElementPos(img);
		var imgPosX = imgPos.x;
		var imgPosY = imgPos.y;

		var oldParent = img.parentNode;
		
		//a tag is added so it can be focused by tabbing
//		if (oldParent.nodeName != "A") {
//			var linkParent = maketag("a");
//			linkParent.id = "tabZoomImg";
//			linkParent.setAttribute("href", "#");
//			oldParent.replaceChild(linkParent, img);
//			linkParent.appendChild(img);
//		} else {
//			var linkParent = oldParent;
//		}
		
		
		//linkParent used to be img
		oldParent = img.parentNode;
		var wrapper;
		if (oldParent.nodeName != "DIV") {
			wrapper = maketag("div");
			wrapper.id = "wrapper";
			wrapper.style.position = "relative";
			wrapper.style.width = img.offsetWidth + "px";
			wrapper.style.cursor = cursorType;
			//wrapper.style.border = "#CCCCCC solid 1px";
			wrapper.style.overflow = "hidden"; //required, height for hiddenFocusPoint not valid in IE6
			oldParent.replaceChild(wrapper, img);
			newTags[newTags.length] = wrapper; 
			wrapper.appendChild(img);
		} else {
			oldParent.style.cursor = cursorType;
			wrapper = oldParent;
			with(wrapper){
			  id = "wrapper";
				style.position = "absolute"
				style.top = 0 + "px";
				style.left = ((miniWidth - img.width)/2)  + "px";
				style.width = (img.width + 2) + "px";
				//style.height = (img.height + 2) + "px";
				//style.border = "#CCCCCC solid 1px";
				style.overflow = "hidden"; //required, height for hiddenFocusPoint not valid in IE6
			}
		}
		
		//create a hidden input to get and lock the focus
		var hiddenFocusPoint;
		hiddenFocusPoint = maketag("input");
		hiddenFocusPoint.id="hiddenFocusPoint";
		hiddenFocusPoint.type="text";
		hiddenFocusPoint.style.width = "0px";
		hiddenFocusPoint.style.height = "0px";
		hiddenFocusPoint.style.border = "0px";
		hiddenFocusPoint.style.margin = "0px";
		hiddenFocusPoint.style.padding = "0px";
		hiddenFocusPoint.style.overflow = "hidden";
		wrapper.appendChild(hiddenFocusPoint);


		if( getid("izoom") )
		{
			var izoom = getid("izoom");
			
			with(izoom)
			{
			  style.position = "relative";
				//style.top = img.height + 2 + "px";
				style.left = ((miniWidth - img.width)/2) - 2  + "px";
				//style.width="120px";
			}
		}
		
		if( getid("tdImgFrame") )
		{
		    var tdImgFrame = getid("tdImgFrame");
		    with(tdImgFrame)
			{
			    style.height = img.height + 5 + "px";
			}
		}
		

		var imgPos = getElementPos(img);
		var imgPosX = imgPos.x;
		var imgPosY = imgPos.y;

		//create zoomFrame
		var zoomFrame;
		
		zoomFrame = getid("zoomframe")
		if (!getid(img.id + "_zoom")){  //if no custom holder created 
			zoomFrame = maketag("div");
			with(zoomFrame){
				id = "zoomframe";
				style.position = "absolute"
				style.top = imgPosY + "px";
				style.left = (imgPosX + img.width + 10) + "px";
				style.width = defaultWidth + "px";
				style.height = defaultHeight + "px";
				style.overflow = "hidden";
				style.display = "block";
			}
			newTags[newTags.length] = zoomFrame; 
			add(document.body, zoomFrame);
		} else {
			zoomFrame = getid(img.id + "_zoom"); //use the custom holder
			zoomFrame.style.overflow = "hidden";
			zoomFrame.style.display = "block";
			zoomFrame.style.position = "absolute";
		}
		
		var IE6 = false /*@cc_on || @_jscript_version < 5.7 @*/;

		if( IE6 )
		{
		  iframe = maketag("iframe");
		  iframe.className = "ie6selectblock";
			zoomFrame.zIndex = 20;
			newTags[newTags.length] = iframe; 
			add(zoomFrame, iframe);
		}

		//create zoomed image
		var zoomImg = maketag("img");
		with (zoomImg){
			style.position = "absolute";
			style.top = "0px";
			style.left = "0px";
			style.visibility = "hidden";
		}
		
		//the image sits within the zoomFrame div
		newTags[newTags.length] = zoomImg; 
		add(zoomFrame, zoomImg);
		
		addEvent(zoomImg, "load", function(){
										   
			var ratioW = zoomImg.offsetWidth / img.offsetWidth;
			var ratioH = zoomImg.offsetHeight / img.offsetHeight;

			var frameWidth = Math.round(zoomFrame.offsetWidth / ratioW);
			var frameHeight = Math.round(zoomFrame.offsetHeight / ratioH);
			
			var marker = maketag("div");
			with(marker){
				style.position = "absolute";
				style.width = frameWidth + "px";
				style.height = frameHeight + "px";
				style.visibility = "hidden";
				className = "marker";
			}
			
			var markerFill = maketag("div");
			markerFill.className = "markerFill";
			newTags[newTags.length] = markerFill; 
			add(marker, markerFill);
			
			newTags[newTags.length] = marker; 
			add(wrapper, marker);
			
			
			//web accessibility improvement: keyboard control
			addEvent(hiddenFocusPoint, "focus", function(){
				//onfocus, marker and zoomedImg will appear
				if (zoomImg.style.visibility != "visible"){
					marker.style.left = "0px";
					marker.style.top = "0px";
					marker.style.visibility = "visible";
					zoomFrame.style.display = "block";
					zoomImg.style.visibility = "visible";
				}
				
				hiddenFocusPoint.onkeydown = function(e){
					
					var styleleft = makeNumeric(marker.style.left);
					var styletop = makeNumeric(marker.style.top);
					
					var e = e?e:window.event?window.event:null; if(!e){ return;}
					
					if (e.keyCode==37 || e.keyCode==100 || e.keyCode==39 || e.keyCode==102 || e.keyCode==40 || e.keyCode==98 || e.keyCode==38 || e.keyCode==104){
						if(e.keyCode==37 || e.keyCode==100) { //left
							if (styleleft != "0"){
								marker.style.left = (parseFloat(styleleft) - 1) + "px";
							}
						}
						
						else if(e.keyCode==39 || e.keyCode==102) { //right
							
							var maxLeft = img.offsetWidth - marker.offsetWidth;
							if (styleleft < maxLeft-1){
								marker.style.left = (parseFloat(styleleft) + 1) + "px";
							}
						}
						
						else if(e.keyCode==40 || e.keyCode==98) { //down
							var maxTop = img.offsetHeight - marker.offsetHeight;
							if (styletop < maxTop){
								marker.style.top = (parseInt(styletop) + 1) + "px";
							}
						}
						
						else if(e.keyCode==38 || e.keyCode==104) { //up
							if (styletop != "0"){
								marker.style.top = (parseFloat(styletop) - 1) + "px";
							}
						}
						
						marker.style.visibility = "visible";
						zoomFrame.style.display = "block";
						zoomImg.style.visibility = "visible";
												
						//adjust position of zoomedImg
						var w = img.offsetWidth;
						var h = img.offsetHeight;
	
						var zoomWidth = zoomImg.offsetWidth;
						var zoomHeight = zoomImg.offsetHeight;
						
						var frameWidth = zoomFrame.offsetWidth;
						var frameHeight = zoomFrame.offsetHeight;
						
						var ratioW = zoomWidth / w;
						var ratioH = zoomHeight / h;
						
						var centreX = frameWidth/2;
						var centreY = frameHeight/2;

						var tempX = marker.offsetLeft + marker.offsetWidth/2;
						var tempY = marker.offsetTop + marker.offsetHeight/2;
									
						var leftV = (tempX * ratioW) - (centreX);
						var topV = (tempY * ratioH) - (centreY);
						
						try{
							
							if (leftV < 0){ //avoid seeing blank on left
								zoomImg.style.left= "0px";
							} else {
								var zoomImgRight = zoomImg.width - leftV;
								if (zoomImgRight > frameWidth){ //avoid seeing blank on right
									zoomImg.style.left = -leftV +"px";
								} else {
									zoomImg.style.left = (frameWidth - zoomWidth) +"px";
									//to avoid bug when mouse is entering from the right
								}
							}
	
							if (topV < 0){ //avoid seeing blank on top
								zoomImg.style.top= "0px";
							} else {
								var zoomImgBottom = zoomImg.height - topV;
								if (zoomImgBottom > frameHeight){ //avoid seeing blank on bottom
									zoomImg.style.top = -topV +"px";
								} else {//to avoid bug when mouse is entering from the bottom
									zoomImg.style.top = (frameHeight - zoomHeight) +"px";
								}
							}
							
						} catch(err) {
						}
						
						
						return;
					}
				}
				
			});
			
			addEvent(hiddenFocusPoint, "blur", function(e){
				marker.style.visibility = "hidden";
				zoomImg.style.visibility = "hidden";						
			});
			
			addEvent(marker, "click", function(e){
				marker.style.visibility = "visible";
				zoomFrame.style.display = "block";
				zoomImg.style.visibility = "visible";
				hiddenFocusPoint.focus();					
			});
			
			addEvent(wrapper, "click", function(e){
				marker.style.visibility = "visible";
				zoomFrame.style.display = "block";
				zoomImg.style.visibility = "visible";
				hiddenFocusPoint.focus();					
			});
			
			addEvent(wrapper, "mouseover", function(){
				zoomFrame.style.display = "block";
				zoomImg.style.visibility = "visible";

				var imgPos = getElementPos(img);
				var imgPosX = imgPos.x;
				var imgPosY = imgPos.y;

				with(zoomFrame){
					style.position = "absolute"
					style.top = imgPosY + "px";
					style.left = (imgPosX + img.width + 10) + "px";
					style.width = defaultWidth + "px";
					style.height = defaultHeight + "px";
					style.overflow = "hidden";
					style.display = "block";
				}
				marker.style.visibility = "visible";
			});

			addEvent(wrapper, "mouseout", function(){
				zoomFrame.style.display = "none";
				if (alwaysshow != "true"){
					zoomImg.style.visibility = "hidden";
				}
				marker.style.visibility = "hidden";
			});

			zoomFrame.style.display = "none";


			addEvent(wrapper, "mousemove", function(e) {
							var w = img.offsetWidth;
							var h = img.offsetHeight;

							var zoomWidth = zoomImg.offsetWidth;
							var zoomHeight = zoomImg.offsetHeight;
							
							var frameWidth = zoomFrame.offsetWidth;
							var frameHeight = zoomFrame.offsetHeight;
							
							var ratioW = zoomWidth / w;
							var ratioH = zoomHeight / h;
							
							var centreX = frameWidth/2;
							var centreY = frameHeight/2;
							
							var mousePos = getEventMousePos(wrapper, e);
							var tempX = mousePos.x;
							var tempY = mousePos.y;

							if (e.srcElement && isIE) {
								//if (e.srcElement == marker) return;
								if (e.srcElement != wrapper) {
 									var zoomImgPos = getElementPos(e.srcElement);
                  					var imgTagPos = getElementPos(imgTag);

									tempX -= (imgTagPos.x - zoomImgPos.x);
									tempY -= (imgTagPos.y - zoomImgPos.y);
								}
								//added the following to get accurate centralized crosshair cursor in marker
								tempX += 2;
								tempY += 2;
							}
							
							//added to avoiding serious flickering in IE 8
							if ((mousePos.x > w)||(mousePos.y > h)) {
								//marker.style.display = "block";
								marker.style.visibility = "visible";
								zoomFrame.style.display = "block";
								zoomImg.style.visibility = "visible";
								
								return;
							}

							var markerLeft = tempX - (marker.offsetWidth/2);
							var markerTop = tempY - (marker.offsetHeight/2);
							
							if (markerLeft < 0) { markerLeft = 0; }//avoid going beyong left
							if (markerTop < 0) { markerTop = 0; }//avoid going beyong top
							
							if ((markerLeft + marker.offsetWidth) < (0 + w)){ //avoid going beyong right
								//marker.style.left = markerLeft + "px";
							} else {
								markerLeft = (0 + w) - marker.offsetWidth; //avoid bug if entering from right
							}
							
							if ((markerTop + marker.offsetHeight) < (0 + h)){ //avoid going beyong bottom
								//markerTop = markerTop;
							} else {
								markerTop = (0 + h) - marker.offsetHeight; //avoid bug if entering from bellow
							}
							
							var leftV = (tempX * ratioW) - (centreX);
							var topV = (tempY * ratioH) - (centreY);
							
							var zoomImgLeft;
							var zoomImgTop;
							
							try{
								
								if (leftV <= 0){ //avoid seeing blank on left
									if (markerleft <= 0){
										//zoomImg.style.left= "0px";
										zoomImgLeft = "0px";
									}
								} else {
									var zoomImgRight = zoomImg.width - leftV;
									if (zoomImgRight > frameWidth){ //avoid seeing blank on right
										//zoomImg.style.left = -leftV +"px";
										zoomImgLeft = -leftV +"px";
									} else {
										//zoomImg.style.left = (frameWidth - zoomWidth) +"px";
										zoomImgLeft = (frameWidth - zoomWidth) +"px";
										//to avoid bug when mouse is entering from the right
									}
								}

								if (topV <= 0){ //avoid seeing blank on top
									if (markerTop <= 0){
										//zoomImg.style.top= "0px";
										zoomImgTop = "0px";
									}
									
								} else {
									var zoomImgBottom = zoomImg.height - topV;
									if (zoomImgBottom > frameHeight){ //avoid seeing blank on bottom
										//zoomImg.style.top = -topV +"px";
										zoomImgTop = -topV +"px";
									} else {//to avoid bug when mouse is entering from the bottom
										//zoomImg.style.top = (frameHeight - zoomHeight) +"px";
										zoomImgTop = (frameHeight - zoomHeight) +"px";
									}
								}
								
							} catch(err) {
							}
							
							try{
								//the settings of positions have to be here, to avoid flickering
								marker.style.left = markerLeft + "px";
								marker.style.top = markerTop + "px";
								//marker.style.visibility = "visible";
								
								zoomImg.style.left = zoomImgLeft;
								zoomImg.style.top = zoomImgTop;
							
							} catch(err) {
									//marker.style.visibility = "visible";
									//zoomImg.style.visibility = "visible";
							}
												
							});
			 });
		
		zoomImg.src = zoomSrc;
		
		if (alwaysshow == "true"){
			zoomImg.style.visibility = "visible";
		}
		
	}

})


/////////////////////////////////////////////////////////////////////
///////////////// event handler functions ///////////////////////////

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);
		return {
			x : e.clientX - pos.x + scrollX,
			y : e.clientY - pos.y + scrollY
		}
	}
	return {
		x : e.offsetX,
		y : e.offsetY
	}
}

/////////////////////////////////////////////////////////////////////
///////////////// common functions //////////////////////////////////

var getid = function(x) {return document.getElementById(x);};
var gettag = function(x) {return document.getElementsByTagName(x);};
var maketag = function(x) {return document.createElement(x);};
var add = function(e, x) { return e.appendChild(x); }
var del = function(e, x) { return document.removeChild(x); }

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 makeNumeric(theString) {
	theString = theString.replace(/\D/g, '');
	return theString;
}

/////////////////////////////////////////////////////////////////////

var zoom = new izoom();