var hideInterval;
var easing = 0.18;
var bigX = 0;
var bigY = 0;
var bigWidth; 
var smallWidth; 
var bigHeight; 
var smallHeight;
var bigBoxWidth;
var bigBoxHeight;
var factorY;
var factorX;
var mouseX = 0;
var mosueY = 0;

function initProductPage()
{
	document.body.onmousemove=setMouseCoords;
	
	smallWidth = 300;
	smallHeight = 400;

	bigBoxWidth = document.getElementById('zoom-box').offsetWidth;
	bigBoxHeight = document.getElementById('zoom-box').offsetHeight;

	document.getElementById('medium-image').onmouseover=showBig;
	document.getElementById('medium-box').onmouseover=clearIntrv;
	document.getElementById('medium-box').onmouseout=hideBig;
	bigWidth = document.getElementById('zoom-image').offsetWidth ;
	bigHeight = document.getElementById('zoom-image').offsetHeight ;
}
function setMouseCoords(e)
{
	var ie = document.all?true:false;
	if(!e) {
		   e = window.event;
	}
	if(e.pageX || e.pageY) {
		   mouseX = e.pageX;
		   mouseY = e.pageY;
	}
	else if(e.clientX || e.clientY) {		
	   mouseX = YAHOO.util.Event.getPageX(e); 
	   mouseY = YAHOO.util.Event.getPageY(e); 	
	}
}
function showBig() {
    clearIntrv();	
	document.getElementById('zoom-image').style.visibility = 'visible';
	document.getElementById('zoom-box').style.visibility = 'visible';
	zoomInterval = setInterval("animateBigImage()",20);
}
function hideDelay() {
	if(document.getElementById('zoom-image').style.visibility != 'hidden') {
		clearInterval (zoomInterval);	
		document.getElementById('zoom-image').style.visibility = 'hidden';
		document.getElementById('zoom-box').style.visibility = 'hidden';		
	}
}
function clearIntrv() {
	clearTimeout(hideInterval);		
}
function hideBig() {	
	hideInterval = setTimeout("hideDelay()",250);	
}
function hideBigBox() {	
	document.getElementById('zoom-image').style.visibility = 'hidden';
}
function animateBigImage() {
	var xPos =  mouseX;
	var yPos =  mouseY;
	
	var bigXPos = YAHOO.util.Dom.getX('zoom-image');
	var bigYPos = YAHOO.util.Dom.getY('zoom-image');

	var largeXOffset = YAHOO.util.Dom.getX('medium-image');
	var largeYOffset = YAHOO.util.Dom.getY('medium-image');	

	factorX = (bigWidth- bigBoxWidth)/smallWidth;
	factorY = (bigHeight-bigBoxHeight)/smallHeight ;	

	var targetX = 0 - (factorX * (xPos-largeXOffset));
	var targetY = 0 - (factorY * (yPos-largeYOffset));		

	targetX = Math.round(targetX);
	targetY = Math.round(targetY);

	bigX +=  ((targetX-bigX)*easing); 
	bigY +=  ((targetY-bigY)*easing);	

	bigY = Math.round(bigY);
	bigX = Math.round(bigX);
	
	document.getElementById("zoom-image").style.left  = bigX + 'px';
	document.getElementById("zoom-image").style.top = bigY + 'px';
}