// Declare our variables.
// Edit Line No. 
//	177 = var cursorBoxUpX=0
// 	237 =  zoomBox.style.height = largeimg.height;
//	238 =  zoomBox.style.width = largeimg.width;
//  250 = if (this.zoombox_position=='right')
var prodimg;
var largeimg;
var MoveBoxHeight;
var MoveBoxWidth;
var XScale;
var YScale;
var zoomState;
var imageX;
var imageY;
var bottomX;
var bottomY;
var largeImgSrc;
var normalImgSrc;
var normalHover;
var largeimgValid;
var smallimgValid;
var initialized;
var menuOn;
var loadimg;
var loadingmsg;

var browser_version= parseInt(navigator.appVersion);
var browser_type = navigator.appName;

var zoombox_position;

function ZoomLoader(id)
{ // Get all of our references that we're going to be using.
prodimg = document.getElementById("NormalImage_" + id); largeimg = document.getElementById("LargeImage_" + id);
if(largeimg.src==""){largeimg.src = document.getElementById("LargeImageHiddenBox_"+id).value;}

moveBox = document.getElementById("MoveBox_" + id);
zoomBox = document.getElementById("ZoomBox_" + id);
sizeWindow = document.getElementById("SizeWindow_" + id);
hoverText = document.getElementById("textBox_" + id);

// Statically assign the height and width to variables (possible issues when extracting from the CSS).
moveBoxHeight = 60;
moveBoxWidth = 60;

// Initialize the image paths.
largeImgSrc = largeimg.src;
normalImgSrc = prodimg.src;
// Calculate the scaling factor.
XScale = largeimg.width / prodimg.width;
YScale = largeimg.height / prodimg.height;


// Store the X, Y coordinates of the small image.
imageX = findPosX(prodimg);
imageY = findPosY(prodimg);

// Calculate the lower right X, Y coordinates of the small image.
bottomX = imageX + prodimg.width;
bottomY = imageY + prodimg.height;

// Initialize our flags.
zoomState = false;
normalHover = false;
initialized = true;
menuOn = false;	
}


// Initialize all of our values.
function ZoomLoadernew(id, largeimgurl,zoombox_position)
{
	this.zoombox_position=zoombox_position;
// Get all of our references that we're going to be using.
prodimg = document.getElementById("NormalImage_" + id);
largeimg = document.getElementById("LargeImage_" + id);
loadingmsg = document.getElementById("loadimg_" + id);
largeimg.src=largeimgurl;

moveBox = document.getElementById("MoveBox_" + id);
zoomBox = document.getElementById("ZoomBox_" + id);
sizeWindow = document.getElementById("SizeWindow_" + id);
hoverText = document.getElementById("textBox_" + id);

// Statically assign the height and width to variables (I seem to be
// having issues when extracting from the CSS).
moveBoxHeight = 40;
moveBoxWidth = 60;		

// Initialize the image paths.
largeImgSrc = largeimg.src;
normalImgSrc = prodimg.src;
// Calculate the scaling factor.
XScale = largeimg.width /prodimg.width;
YScale = largeimg.height /prodimg.height;


// Store the X, Y coordinates of the small image.
imageX = findPosX(prodimg);
imageY = findPosY(prodimg);

// Calculate the lower right X, Y coordinates of the small image.
bottomX = imageX + prodimg.width;
bottomY = imageY + prodimg.height;

// Initialize our flags.
zoomState = false;
normalHover = false;
initialized = true;
menuOn = false;	
}

/* ZoomInBox: Gets called when the mouse is moved*/
function ZoomInBox(e)
{ 
// e gives access to the event in all browsers.
if (!e) var e = window.event;

// Grab the position of the mouse.

var mouseX = getMouseX(e);
var mouseY = getMouseY(e);


// Recalculate the scaling factor.
if (initialized) {
	XScale = largeimg.width / prodimg.width;
	//XScale = XScale + 1;
	YScale = largeimg.height / prodimg.height;
	//YScale = YScale + 1;
}

// Set the location of the "Out of Stock" dialog box.
if (initialized) {		
	hoverText.style.left = imageX + ((bottomX - imageX) / 2) - 50;
	hoverText.style.top = imageY + ((bottomY - imageY) / 2) - 20;
}

// Check if the mouse is inside the image.
CheckMouse(mouseX, mouseY);

// If the large image has changed, make sure that the path is updated.
if (initialized) {
	if (largeImgSrc != largeimg.src)		
		largeimg.src = largeImgSrc;
}	

// If the small image has changed, make sure that the path is updated.
if (initialized) {
	if (normalImgSrc != prodimg.src && !normalHover)
		prodimg.src = normalImgSrc;	
}

// To reduce overhead, check if we even need to do any processing.
if (zoomState == true) 
{	loadingmsg.innerHTML="<CENTER><H4><FONT COLOR=#D8D8D8>P r o c e s s i n g &nbsp;&nbsp; I M A G E. . .</FONT> </H4></CENTER>";
         
	// Make sure that our scaling factor is a valid number.
	if (isNaN(XScale))
	{ 
		XScale = largeimg.width / prodimg.width;
	}
	if (isNaN(YScale))
	{
		YScale = largeimg.height / prodimg.height;
	}

	// Determine if the cursor box is near the edge of the image.
	// Calculate the X, Y coordinates of the cursor box (upper, and
	// lower).
	
	var cursorBoxUpX = mouseX - moveBoxWidth / 2;
	var cursorBoxUpY = mouseY - moveBoxHeight / 2;
	var cursorBoxBottomX = mouseX + moveBoxWidth / 2;
	var cursorBoxBottomY = mouseY + moveBoxHeight / 2;		
	var relativeY;
	var relativeX;
	
	var cursorBoxUpX=0; //Comment this line to move large Image
	var cursorBoxUpY=0; //Comment this line to move large Image
	
	//document.title=cursorBoxUpX;
	
	// Check the calculated coordinates to those of the image.
	// We need to check the X and Y separately, so they can change
	// independent of each other.
	// Check X.
	if (cursorBoxUpX >= imageX && cursorBoxUpX <= bottomX &&
		cursorBoxBottomX >= imageX && cursorBoxBottomX <=
		bottomX)
	{	 
		moveBox.style.left = mouseX - moveBoxWidth / 2;

		// Assign the relative coordinates, for translation
		// to the large image.
		relativeX = cursorBoxUpX - imageX;
	}
	else if (cursorBoxUpX < imageX) {
		moveBox.style.left = imageX;
		relativeX = 1;
	}
	else if (cursorBoxBottomX > bottomX) {
		moveBox.style.left = bottomX - moveBoxWidth;
		relativeX = bottomX - imageX - moveBoxWidth;
	}

	// Check Y.
	if (cursorBoxUpY >= imageY && cursorBoxUpY <= bottomY &&
		cursorBoxBottomY >= imageY && cursorBoxBottomY <=
		bottomY)
	{	
		moveBox.style.top = mouseY - moveBoxHeight / 2;

		// Assign the relative coordinates, for translation
		// to the large image.
		relativeY = cursorBoxUpY - imageY; 
	}
	else if (cursorBoxUpY < imageY) {
		moveBox.style.top = imageY;
		relativeY = 1;
	}
	else if (cursorBoxBottomY > bottomY) {
		moveBox.style.top = bottomY - moveBoxHeight;
		relativeY = bottomY - imageY - moveBoxHeight;

	}

	// Adjust the size of the zoom box, based on our scaling factor,
	// and the size of the cursor box.
	
	 //zoomBox.style.height = moveBoxHeight * YScale;
	 //zoomBox.style.width = moveBoxWidth * XScale;
	 
	 //zoomBox.style.height = 350;
	 //zoomBox.style.width = 400;
	 
 	 zoomBox.style.height = largeimg.height;
	 zoomBox.style.width = largeimg.width-5;
	 
	 //alert(largeimg.width);
	// Adjust the location of the zoom box, based on the small
	// image.
	var zoomBoxTop = imageY + prodimg.height -
			 (prodimg.height * 0.9);
	var zoomBoxLeft = imageX + prodimg.width + 43;
	
	zoomBox.style.top = zoomBoxTop;

	if (this.zoombox_position=='right')
	{	
		//alert(zoomBoxLeft);
		//document.title=zoomBoxLeft;
		//alert(zoomBoxLeft-largeimg.width);
		//document.title=zoomBoxLeft-largeimg.width-200;
		//zoomBox.style.left = 0;
		//zoomBox.style.left = zoomBoxLeft-550; 	
		//zoomBox.style.left = largeimg.width;
		zoomBox.style.left = zoomBoxLeft-largeimg.width-150;

	}
	else
	{	zoomBox.style.left = zoomBoxLeft;}

	// The coordinates for the large image are calculated based on
	// the offset of the cursor box within the small image.
	var largeimgTop = relativeY * YScale *-1; 
	var largeimgLeft = relativeX * XScale *-1;

	// These tests are here so that IE and Gecko browsers behave the
	// same when NaN is encountered.
	if (largeimgTop)
		largeimg.style.top = largeimgTop;

	if (largeimgLeft)
		largeimg.style.left = largeimgLeft;

	// Make the zoom box layers visible, and render the zoom box
	// itself.
	largeimg.style.visibility="visible";
	moveBox.style.visibility = "visible";
	zoomBox.style.visibility = "visible";
	
}

// Hide the zoom box layers.
if (zoomState == false)
{	
	if (initialized) {
		largeimg.style.visibility = "hidden";
		moveBox.style.visibility = "hidden";
		zoomBox.style.visibility = "hidden";
	}
}
}

//This function checks the coordinates of the mouse, and sets the zoomState
//flag if it is within the small image, and clears the flag if it is outside it.
function CheckMouse(currX, currY)
{	
//We're within the image boundaries.
if (currX >= imageX && currX <= bottomX &&
	currY >= imageY && currY <= bottomY && !menuOn
	&& XScale > 1 && YScale > 1)
	zoomState = true;
else
	zoomState = false;	
}

//These two functions find the X, Y coordinates of the supplied object, in our
//case it is the coordinates of the small image. Written by James Robinson.
function findPosX(obj)
{
var curleft = 0;
if (obj.offsetParent)
{
	while (obj.offsetParent)
	{
		curleft += obj.offsetLeft
		obj = obj.offsetParent;
	}
}
else if (obj.x)
	curleft += obj.x;
return curleft;
}

function findPosY(obj)
{
var curtop = 0;
if (obj.offsetParent)
{
	while (obj.offsetParent)
	{
		curtop += obj.offsetTop
		obj = obj.offsetParent;
	}
}
else if (obj.y)
	curtop += obj.y;
return curtop;
}

//These two functions ensure compatibility with various browsers.
function getMouseX(evt)
{
if (evt.pageX)
	return evt.pageX;
else if (evt.clientX)
	return evt.clientX + (document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft);
else
	return null;
}

function getMouseY(evt)
{if (evt.pageY)
	return evt.pageY;
 else if (evt.clientY)
	return evt.clientY + (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop);
 else return null;
}

//This function updates the large image, when a thumbnail is clicked.
function updateLargeImgSrc(new_src)
{largeImgSrc = new_src;}

//This function updates the small image, when a thumbnail is clicked.
function updateNormalImgSrc(new_src)
{normalImgSrc = new_src;}

//Our homemade image-swapping function.
function swapNormalImg(dest)
{normalHover = true; prodimg.src = dest;}

//This function resets the small image when the mouse is no longer hovering over a thumbnail.
function resetMainImg()
{prodimg.src = normalImgSrc;}

//These functions ensure that the menu always stays on top, and doesn't get overwritten by the image zoom.
function overMenu()
{menuOn = true;document.body.onmousemove = null;}

//Resets the menu flag when the mouse is moved off of the menu.
function offMenu()
{menuOn = false;document.body.onmousemove = ZoomInBox;}

//This function displays the text box over a product image when it is not in stock.
function textOver(string)
{document.getElementById("textBox").style.visibility = "visible"; document.getElementById("textBox").innerHTML = string;}

//This function displays the pop-up text box when a product is out of stock.
function textOverSize(name, string)
{
document.getElementById("textBox").style.visibility = "visible";

if (document.getElementById("colorname").innerHTML) {
	document.getElementById("textBox").innerHTML = "<em>" + 
		document.getElementById("colorname").innerHTML + "</em>"
		+ " " + string;
}
else {
	document.getElementById("textBox").innerHTML = name + "<em>" + 
		document.getElementById("colorname").innerHTML + "</em>"
		+ " " + string;	
}
}

//This hides the pop-up text box that appears when a product is out of stock.
function textOff()
{document.getElementById("textBox").style.visibility = "hidden";}

//This function displays the Alex Evenings sizing chart.
function showSizeChart()
{document.getElementById('sizechartdiv').style.visibility = "visible";}

//This function hides the Alex Evenings sizing chart.
function hideSizeChart()
{document.getElementById('sizechartdiv').style.visibility = "hidden";}

//Loading img function edited on 2007-11-07

function runClock(id)
{
	document.getElementById(id).style.visibility = "hidden";
}