// FILE: zoom.js
// PROGRAMMER: Travis Palmer
// DESCRIPTION: Image Zoom v1 - Copyright 2006 Bock Interactive
//              Also contains code for the real-time inventory

// Declare our variables.
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;


// Initialize all of our values.
function ZoomLoader()
{
	// Get all of our references that we're going to be using.
	prodimg = document.getElementById("NormalImage");
	largeimg = document.getElementById("LargeImage");
	moveBox = document.getElementById("MoveBox");
	zoomBox = document.getElementById("ZoomBox");
	sizeWindow = document.getElementById("SizeWindow");
	hoverText = document.getElementById("textBox");
		
	// Statically assign the height and width to variables (I seem to be
	// having issues when extracting from the CSS).
	moveBoxHeight = 150;
	moveBoxWidth = 140;		
	
	// Calculate the scaling factor.
	XScale = largeimg.width / prodimg.width;
	YScale = largeimg.height / prodimg.height;
	
	// Initialize the image paths.
	largeImgSrc = largeimg.src;
	normalImgSrc = prodimg.src;
	
	// 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;
		YScale = largeimg.height / prodimg.height;
	}
			
	// Set the location of the "Out of Stock" dialog box.
	if (initialized) {		
		hoverText.style.left = imageX + ((bottomX - imageX) / 2) - 70;
		hoverText.style.top = imageY + ((bottomY - imageY) / 2) - 40;
	}
		
	// 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) 
	{			
		// 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;
		
		// 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;
	
		// 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;
		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";
}