var boxWidth  = 150;
var boxHeight = 150;
var boxSizeIncrement = 10;
var zoomIncrement = 0.1;
var zoomAmmount;
var zoomWidth = 1080;
var zoomHeight = 800;
var parentWidth;
var parentHeight;
var zoomImage;
var mousePosition;
var imagePosition;
var offset;
var hasFocus;

function toggleMagnify(e, xwidth, xheight, xzoomImage)
{
	if (!moreInfoEnabled)
	{	
		if (magnifyEnabled == true)
		{
			var productImage = $('productImage');
			var zoomBox = $('zoomBox');
			var zoomInstructions = $('zoomInstructions')
			
			if (productImage)
			{
				if (zoomBox)
				{
					productImage.removeChild(zoomBox);
				}
				if (zoomInstructions)
				{
					productImage.removeChild(zoomInstructions);
				}
			}		
			magnifyEnabled = false;
			document.onkeydown = '';
		}
		else
		{	
			var productImage = $('productImage');
			
			document.onkeydown = keyPress;
			parentWidth  = xwidth;
			parentHeight = xheight;
			zoomImage    = xzoomImage;
			
			if (productImage)
			{
				productImage.className = 'magnifyOn';	
			}
			
			zoomAmmount  = 1;
			magnifyEnabled  = true;	
			doMagnify(e);
		}
	}
}
function setFocus(xfocus)
{
	hasFocus = xfocus;
}
function doMagnify(e)
{
	if (hasFocus)
	{
		mousePosition = getMousePosition(e);

		var productImage = $('productImage');
		if (productImage)
		{
			imagePosition = getElementPosition(productImage);
			offset        = {x:mousePosition.x - imagePosition.x, y:mousePosition.y - imagePosition.y};				
		  zoomPosition  = {x:(offset.x/parentWidth)*100, y:(offset.y/parentHeight)*100};
	    drawMagnifyingGlass(offset.x, offset.y);				
  	}	
	}
}
function drawMagnifyingGlass(x, y)
{ 
	var theBox = $('zoomBox');
	
	if (theBox)
	{
	
		theBox.style.left   = x - (boxWidth / 2) + 'px';
		theBox.style.top    = y - (boxHeight / 2) + 'px';	
		theBox.style.width  = boxWidth + 'px';
		theBox.style.height = boxHeight + 'px';		
		
		var tempX = ((zoomWidth* zoomAmmount))  - ((zoomWidth* zoomAmmount)  * (zoomPosition.x / 100)) + (boxWidth  / 2);
		var tempY = ((zoomHeight* zoomAmmount)) - ((zoomHeight* zoomAmmount) * (zoomPosition.y / 100)) + (boxHeight / 2);
		
		var image = $('zoomImage');
		var instructions = $('zoomInstructions');
		
		if (image)
		{		
			image.style.marginLeft = -((zoomWidth* zoomAmmount)  - tempX) + 'px';
			image.style.marginTop  = -((zoomHeight* zoomAmmount) - tempY) + 'px';
		}
		if (instructions)
		{
			instructions.style.left  = x - (boxWidth / 2) + 'px';
    	instructions.style.top   = y - (boxHeight / 2) - 31 + 'px';
    	instructions.style.width = boxWidth + 'px'; 
  	}
	}
	else
	{					
    var div = document.createElement('div');
    div.id = 'zoomBox';
    div.style.left = x - (boxWidth / 2) + 'px';
    div.style.top = y - (boxHeight / 2) + 'px';    
    div.style.width = boxWidth + 'px';
    div.style.height = boxHeight + 'px';	 
    
    var loading = document.createElement('div');
    loading.id = 'loadingText';
    loading.style.left = '0px';
    loading.style.top  = '0px';   
    loading.innerHTML = '<span>Loading...</span>'; 
    
    var zoomImageWrapper = document.createElement('div');
    zoomImageWrapper.id = 'zoomImageWrapper';
    
    var image = document.createElement('img');
    image.id = 'zoomImage';
    image.src = zoomImage;    
    
    image.style.width = zoomWidth + 'px';
    image.style.height = zoomHeight + 'px';    
    
    var tempX = ((zoomWidth* zoomAmmount))  - ((zoomWidth* zoomAmmount)  * (zoomPosition.x / 100)) + (boxWidth  / 2);
		var tempY = ((zoomHeight* zoomAmmount)) - ((zoomHeight* zoomAmmount) * (zoomPosition.y / 100)) + (boxHeight / 2);
    
    image.style.marginLeft = -((zoomWidth* zoomAmmount)  - tempX) + 'px';
		image.style.marginTop = -((zoomHeight* zoomAmmount) - tempY) + 'px';
		
		var instructions = document.createElement('div');
    instructions.id = 'zoomInstructions';
    instructions.style.left = x - (boxWidth / 2) + 'px';
    instructions.style.top = y - (boxHeight / 2) - 31 + 'px';   
    instructions.style.width = boxWidth + 'px'; 
    instructions.innerHTML = '<img src="/next/ui/instructions.gif" width="150" height="30" alt="" />';
    
    zoomImageWrapper.appendChild(image);    
    div.appendChild(zoomImageWrapper);
    div.appendChild(loading);
    
    var productImage = $('productImage');
    
    if (productImage)
    {
	    productImage.appendChild(div);
    	productImage.appendChild(instructions);
    }   
  }
}
function keyLeft()
{
	if (boxWidth >= 30)
	{
	  boxWidth  -= boxSizeIncrement;
	  boxHeight -= boxSizeIncrement;	
	  updateBox();		
	}
}
function keyRight()
{
	if (boxWidth < 300)
	{	
	  boxWidth  += boxSizeIncrement;
	  boxHeight += boxSizeIncrement;
  }
	updateBox();	
}
function keyUp()
{
	zoomAmmount += zoomIncrement;
	if (zoomAmmount > 2)
	{
		zoomAmmount = 2;	
	}
	updateBox();
}
function keyDown()
{
	if (parseInt(zoomWidth * zoomAmmount) > parentWidth)
	{
		zoomAmmount -= zoomIncrement;
	}	
	updateBox();	
}
function updateBox()
{
	var theBox = $('zoomBox');
	
	if (theBox)
	{	
		theBox.style.left   = offset.x - (boxWidth / 2) + 'px';
		theBox.style.top    = offset.y - (boxHeight / 2) + 'px';	
	  theBox.style.width  = boxWidth + 'px';
	  theBox.style.height = boxHeight + 'px';
	  
	  zoomPosition = {x:(offset.x/parentWidth)*100, y:(offset.y/parentHeight)*100};
	  
		var tempX = (zoomWidth  * zoomAmmount) - ((zoomWidth  * zoomAmmount) * (zoomPosition.x / 100)) + (boxWidth  / 2);
		var tempY = (zoomHeight * zoomAmmount) - ((zoomHeight * zoomAmmount) * (zoomPosition.y / 100)) + (boxHeight / 2);
			
		var image = $('zoomImage');
		var instructions = $('zoomInstructions');
		var loading = $('loadingText');
		
		if (image)
		{		
		  image.style.width  = zoomWidth  * zoomAmmount + 'px';
		  image.style.height = zoomHeight * zoomAmmount + 'px';		
		  image.style.marginLeft = -((zoomWidth* zoomAmmount)  - tempX) + 'px';
		  image.style.marginTop  = -((zoomHeight* zoomAmmount) - tempY) + 'px';
	  }		
		if (instructions)
		{		
			instructions.style.left   = offset.x - (boxWidth / 2) + 'px';
    	instructions.style.top    = offset.y - (boxHeight / 2) - 31 + 'px';
    	instructions.style.width = boxWidth + 'px';
  	}
  	if (loading)
  	{
	  	theBox.removeChild(loading);	
  	}
  }	
}
function keyPress(e)
{
	if (magnifyEnabled)
	{
		var key = (window.event) ? event.keyCode : e.keyCode;	
		switch(key)
		{
			case 37:
			  keyLeft();
			  break;
			case 39:
			  keyRight();
			  break; 
			case 38:
			  keyUp();
			  break;
			case 40:
			  keyDown();		  
			  break;			  
		}
		return false;	
	} 
}