var zooming = false;
var pos_x;
var pos_y;
var offset;
var positionPaused;
var helping;
var instruct;
var boxWidth = 250;
var boxHeight = 250;
var zooming;
function zoomClick(lgImgSrc)
{
	if(zooming == false)
	{
		instruct = true;
		positionPaused = false;
		if(helping == true)
		{
			giveHelp();
		}
		zooming = true;
		// activate lower-left box
		var element = document.getElementById('ProductImageZoom');
		element.src = lgImgSrc;
		
		fadeElementIn('ProductImageZoomBox','ProductImageZoomBoxDisplay');;
				
		// grab location of cursor in relation to image
		offset = (findPos(document.getElementById('ProductImage')));
	}
	else
	{
		zooming = false;
		if(helping == true)
		{
			giveHelp();
		}
		fadeElement('ProductImageZoomBox','ProductImageZoomBox');
		document.getElementById('ProductImage').style.cursor = 'default';
	}
}
function findPos(obj) {
	var curleft = curtop = 0;
	if (obj.offsetParent) {
		curleft = obj.offsetLeft
		curtop = obj.offsetTop
		while (obj = obj.offsetParent) {
			curleft += obj.offsetLeft
			curtop += obj.offsetTop
		}
	}
	return [curleft,curtop];
}
function getCoordinates(event,elementId)
{
	if(zooming == true && positionPaused == false)
	{
		if(instruct == true)
		{
			removeInstruction();
		}
		pos_x = event.offsetX ? (event.offsetX) : event.pageX - offset[0];
		pos_y = event.offsetY ? (event.offsetY) : event.pageY - offset[1];
		
		var product_image = document.getElementById('ProductImage');
		product_image.style.cursor = 'crosshair';
		var element = document.getElementById('ProductImageZoom');
		var ratio_x = element.width  / product_image.width;
		var ratio_y = element.height / product_image.height;
		element.style.position='relative';
		var pos_right = (((pos_x) * ratio_x) - (boxWidth / 2));	// for variable width boxes, etc
		var pos_bottom = (((pos_y) * ratio_y) - (boxHeight / 2)); // for variable... height boxes. wow!
		
		pos_right = (pos_right > 0 ? pos_right : 0);
		pos_bottom = (pos_bottom > 0 ? pos_bottom : 0);
		
		pos_right = ((pos_right > (product_image.width * ratio_x - boxWidth)) ? (product_image.width * 2 - boxWidth) : (pos_right));
		pos_bottom = ((pos_bottom > (product_image.height * ratio_y - boxHeight)) ? (product_image.height * 2 - boxHeight) : (pos_bottom))
		
//		pos_right = (
//			((pos_x - (boxWidth / 2)) > product_image.width)
//			?
//			((product_image.width * ratio_x) - (boxWidth * 2))
//			:
//			pos_right);
//		document.title = pos_x + ',' + pos_y + ';' + pos_right + ',' + pos_bottom;
		// take into effect size of image and move relatively image around to create zoom effect
		element.style.right  =  pos_right + 'px';
		element.style.bottom =  pos_bottom + 'px';
		
	}
}
function pausePosition()
{
	if(positionPaused == false)
	{
		positionPaused = true;
	}
	else
	{
		positionPaused = false;
	
	}
}
function giveHelp()
{
	if(helping != true)
	{
		helping = true;
		var element = document.getElementById('ProductImageZoomHelpBox');
		fadeElementIn('ProductImageZoomHelpBox','HelpBoxDisplay');
	}
	else
	{
		helping = false;
		fadeElement('ProductImageZoomHelpBox','HelpBox');
	}
}
function removeInstruction()
{
	fadeElement('ProductImageZoomInstructionBox','dead');
	instruct = false;
}


var mousex = 0;
var mousey = 0;
var grabx = 0;
var graby = 0;
var orix = 0;
var oriy = 0;
var elex = 0;
var eley = 0;
var algor = 0;

var dragobj = null;

function falsefunc() { return false; } // used to block cascading events

function init()
{
  document.onmousemove = update; // update(event) implied on NS, update(null) implied on IE
  update();
}

function getMouseXY(e) // works on IE6,FF,Moz,Opera7
{ 
  if (!e) e = window.event; // works on IE, but not NS (we rely on NS passing us the event)
 
  if (e)
  { 
    if (e.pageX || e.pageY)
    { // this doesn't work on IE6!! (works on FF,Moz,Opera7)
      mousex = e.pageX;
      mousey = e.pageY;
      algor = '[e.pageX]';
      if (e.clientX || e.clientY) algor += ' [e.clientX] '
    }
    else if (e.clientX || e.clientY)
    { // works on IE6,FF,Moz,Opera7
      // Note: I am adding together both the "body" and "documentElement" scroll positions
      //       this lets me cover for the quirks that happen based on the "doctype" of the html page.
      //         (example: IE6 in compatibility mode or strict)
      //       Based on the different ways that IE,FF,Moz,Opera use these ScrollValues for body and documentElement
      //       it looks like they will fill EITHER ONE SCROLL VALUE OR THE OTHER, NOT BOTH 
      //         (from info at http://www.quirksmode.org/js/doctypes.html)
      mousex = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
      mousey = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
      algor = '[e.clientX]';
      if (e.pageX || e.pageY) algor += ' [e.pageX] '
    }
  }
  
}

function update(e)
{
  getMouseXY(e); // NS is passing (event), while IE is passing (null)
}

function grab(context)
{
  document.onmousedown = falsefunc; // in NS this prevents cascading of events, thus disabling text selection
  dragobj = context;
  dragobj.style.zIndex = 10; // move it to the top
  document.onmousemove = drag;
  document.onmouseup = drop;
  grabx = mousex;
  graby = mousey;
  elex = orix = dragobj.offsetLeft;
  eley = oriy = dragobj.offsetTop;
  update();
}

function drag(e) // parameter passing is important for NS family 
{
  if (dragobj)
  {
    elex = orix + (mousex-grabx);
    eley = oriy + (mousey-graby);
    dragobj.style.position = "absolute";
    dragobj.style.left = (elex).toString(10) + 'px';
    dragobj.style.top  = (eley).toString(10) + 'px';
  }
  update(e);
  return false; // in IE this prevents cascading of events, thus text selection is disabled
}

function drop()
{
  if (dragobj)
  {
    dragobj.style.zIndex = 0;
    dragobj = null;
  }
  update();
  document.onmousemove = update;
  document.onmouseup = null;
  document.onmousedown = null;   // re-enables text selection on NS
}