var prodimg,largeimg,MoveBoxHeight,MoveBoxWidth,XScale,YScale,zoomState;
var imageX,imageYbottomX,bottomY,largeImgSrc,normalImgSrc,normalHover,largeimgValid,smallimgValid,initialized;
var menuOn,loadimg,loadingmsg;
var browser_version= parseInt(navigator.appVersion);
var browser_type=navigator.appName;

//This function is called from each deal
function ZoomLoadernew(id, largeimgurl)
{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 (issues when extracting from 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;

	// 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=250;
	 zoomBox.style.width=300;

	// 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;}

//This function hides the text behins image Image is proccessing.
function runClock(id)
{document.getElementById(id).style.visibility="hidden";}

//Begin ** Functions for TabContent
function setDivWidth(mainDivId, contentDivId)
{document.getElementById(contentDivId).style.width=screen.width/2.1;	
}

function commonToggle(mainTabDivId, mainContentDivId, currTabDivId, currContentDivId,opt)
{ 	browser_type=navigator.appName;
	if(opt==1) var_scr_width = screen.width/2.1;
	if(opt==2) var_scr_width = screen.width*96/100;
	if(opt==3) var_scr_width = screen.width;
	document.getElementById(mainContentDivId).style.width=var_scr_width;     
	var ulobj=document.getElementById(mainTabDivId)
	var ulist=ulobj.getElementsByTagName("li")
	for(var x=0;x<ulist.length;x++)
	{var ulistlink	= ulist[x].getAttribute("id")
	 if(ulistlink==currTabDivId) document.getElementById(ulistlink).className="selected";
	 else document.getElementById(ulistlink).className="";
	}

	var divobj=document.getElementById(mainContentDivId)
	var divlist=divobj.getElementsByTagName("div")
	for(var x=0;x<divlist.length;x++)
	{ if(browser_type=="Netscape" || browser_type=="Opera")
	  { if(divlist[x].getAttribute("id") != null)
	    {var divlistid=divlist[x].getAttribute("id")
	     if(divlistid==currContentDivId) document.getElementById(divlistid).className="selected";
	     else document.getElementById(divlistid).className="tabcontent";
	     }
	   }
	   else if(browser_type=="Microsoft Internet Explorer")
	   {if(divlist[x].getAttribute('id').charAt(0) != '')
	    {var divlistid=divlist[x].getAttribute("id")
	     if(divlistid==currContentDivId) document.getElementById(divlistid).className="selected";
	     else document.getElementById(divlistid).className="tabcontent";
	     }
	    }
	}
}

function tabToggle(mainTabDivId, mainContentDivId, currTabDivId, currContentDivId)
{commonToggle(mainTabDivId, mainContentDivId, currTabDivId, currContentDivId,1)
}

function tabNoticeToggle(mainTabDivId, mainContentDivId, currTabDivId, currContentDivId)
{commonToggle(mainTabDivId, mainContentDivId, currTabDivId, currContentDivId,2)
}

function tabToggle_fullwidth(find, mainTabDivId, mainContentDivId, currTabDivId, currContentDivId)
{commonToggle(mainTabDivId, mainContentDivId, currTabDivId, currContentDivId,3)
}
//END ** Functions for TabContent