function findPos(obj) {
	curleft = curtop = 0;
	if (obj.offsetParent) {
		do {
			curleft += obj.offsetLeft;
			curtop += obj.offsetTop;
		} while (obj = obj.offsetParent);
		return [curleft,curtop];
	}
}

function moveDiv(e) {
	if (!e) var e = window.event;
	posX = (e.pageX) ? e.pageX : e.clientX;
	posY = (e.pageY) ? e.pageY : e.clientY;
	tg = (window.event) ? e.srcElement : e.target;
	boxX = (posX - offsetX);
	boxY = (posY - offsetY);
	var zoomed = document.getElementById("zoomed");
	
	if (tg.parentNode == zoomContainer) {
		if (document.all && !window.opera) {
			zoomOverlay.style.filter = "alpha(opacity=60)";
			zoomOverlay.style.backgroundColor = "#fff";
		}
		else {
			zoomOverlay.style.MozOpacity = "0.6";
			zoomOverlay.style.opacity = "0.6";
		}
		zoomOverlay.style.visibility = "visible";
		zoomOverlay.style.cursor = "crosshair";
		zoomed.style.display = "block";
		productDesc.style.marginTop = "240px";
		
		if (posX <= offsetX) {
			if (posY <= offsetY) {
				zoomOverlay.style.left = 0;
				zoomOverlay.style.top = 0;
				zoomed.style.backgroundPosition = "0 0";
			}
			else if (posY >= (zoomContainer.clientHeight + offsetY - zoomOverlay.clientHeight)) {
				zoomOverlay.style.left = 0;
				zoomOverlay.style.top = zoomContainer.clientHeight - zoomOverlay.clientHeight;
				zoomed.style.backgroundPosition = "0 -" + ((zoomContainer.clientHeight - zoomOverlay.clientHeight) * ratioY) + "px";
			}
			else {
				zoomOverlay.style.left = 0;
				zoomOverlay.style.top = boxY + "px";
				zoomed.style.backgroundPosition = "0 -" + (boxY * ratioY) + "px";
			}
		}
		else if (posX >= (zoomContainer.clientWidth + offsetX - zoomOverlay.clientWidth)) {
			if (posY <= offsetY) {
				zoomOverlay.style.left = zoomContainer.clientWidth - zoomOverlay.clientWidth;
				zoomOverlay.style.top = 0;
				zoomed.style.backgroundPosition = "-" + ((zoomContainer.clientWidth - zoomOverlay.clientWidth) * ratioX) + "px 0";
			}
			else if (posY >= (zoomContainer.clientHeight + offsetY - zoomOverlay.clientHeight)) {
				zoomOverlay.style.left = zoomContainer.clientWidth - zoomOverlay.clientWidth;
				zoomOverlay.style.top = zoomContainer.clientHeight - zoomOverlay.clientHeight;
				zoomed.style.backgroundPosition = "-" + ((zoomContainer.clientWidth - zoomOverlay.clientWidth)* ratioX) + "px -" + ((zoomContainer.clientHeight - zoomOverlay.clientHeight) * ratioY) + "px";
			}
			else {
				zoomOverlay.style.left = zoomContainer.clientWidth - zoomOverlay.clientWidth;
				zoomOverlay.style.top = boxY + "px";
				zoomed.style.backgroundPosition = "-" + ((zoomContainer.clientWidth - zoomOverlay.clientWidth) * ratioX) + "px -" + (boxY * ratioY) + "px";
			}
		}
		else if (posY <= offsetY) {
			zoomOverlay.style.left = boxX + "px";
			zoomOverlay.style.top = 0;
			zoomed.style.backgroundPosition = "-" + (boxX * ratioX) + "px 0";
		}
		else if (posY >= (zoomContainer.clientHeight + offsetY - zoomOverlay.clientHeight)) {
			zoomOverlay.style.left = boxX + "px";
			zoomOverlay.style.top = zoomContainer.clientHeight - zoomOverlay.clientHeight;
			zoomed.style.backgroundPosition = "-" + (boxX * ratioX) + "px -" + ((zoomContainer.clientHeight - zoomOverlay.clientHeight) * ratioY) + "px";
		}
		else {
			zoomOverlay.style.left = boxX + "px";
			zoomOverlay.style.top = boxY + "px";
			zoomed.style.backgroundPosition = "-" + (boxX * ratioX) + "px -" + (boxY * ratioY) + "px";
		}
	}
	else {
		zoomOverlay.style.visibility = "hidden";
		zoomed.style.display = "none";
		productDesc.style.marginTop = "0";
	}
}

function initZoom() {
	zoomContainer = document.getElementById("zoomcontainer");
	zoomImage = document.getElementById("zoomimage");
	zoomOverlay = document.getElementById("zoomoverlay");
	var zoomed = document.getElementById("zoomed");
	zoomedImage = document.getElementById("zoomedimage");
	productDesc = document.getElementById("productdesc");
	ratioX = zoomedImage.style.width.replace("px", "") / zoomImage.style.width.replace("px", "");
	ratioY = zoomedImage.style.height.replace("px", "") / zoomImage.style.height.replace("px", "");
	zoomOverlay.style.width = parseInt(parseInt(zoomImage.style.width) / parseInt(ratioX)) + "px";
	zoomOverlay.style.height = parseInt(parseInt(zoomImage.style.height) / parseInt(ratioY)) + "px";
	zoomContainer.style.width = zoomImage.style.width;
	zoomed.style.width = zoomImage.style.width;
	zoomContainer.style.height = zoomImage.style.height;
	zoomed.style.height = zoomImage.style.height;
	zoomed.style.left = findPos(zoomContainer)[0] - zoomContainer.clientWidth - 22 + "px";
	zoomed.style.top = findPos(zoomContainer)[1] + "px";
	zoomed.style.backgroundImage = "url(" + zoomedImage.src + ")";
	offsetX = findPos(zoomContainer)[0] + (zoomOverlay.clientWidth/2);
	offsetY = findPos(zoomContainer)[1] + (zoomOverlay.clientHeight/2);
	document.onmousemove = moveDiv;
}

window.onload = initZoom;