//Add oImg to the hideFrame function in this file, and add "this" to the hideFrame() of the onMouseOut of the image.
//1. This few line of code are adding the iFrame to the document. The Width and Height are 1 so it is invisible:
var nApp, oMainImage = new Image(), nTimeOut = 0, oHourGlass = new Image(), oZoomDiv, oZoomImage, 
	oZoomTitle, cZoomTitle, oZoomFrame, nDivWidth, nDivHeight, nFrameBorderWidth
	
//Change the wating animated gif file here:
oHourGlass.src = "Images/Loading.gif"
cZoomTitle = "American Bed Linens"
nDivWidth = 360
nDivHeight = 280
nFrameBorderWidth = 4

switch (navigator.appName)
	{
	case "Netscape":
		nApp = 1;
		break;
	default: //Explorer
		nApp = 0;
		break;
	}

//Create the DIV string
cFrame = '<div class="zoomFrame" id="zoomFrame" style="visibility:hidden"></div>' + 
	'<div class="zoomTop" id="zoomTop" style="visibility:hidden"><p class="zoomTitle" id="zoomTitle"></div>' + 
	'<div class="zoomDiv" id="zoomDiv" style="visibility:hidden"><img class="zoomImage" id="zoomImage" style="visibility:hidden"></div>'

document.writeln(cFrame)

document.writeln('<link rel="stylesheet" type="text/css" href="zoomStyles.css">')

//Store DIVs in variables for later use
oZoomDiv = document.getElementById("zoomDiv")
oZoomTop = document.getElementById("zoomTop")
oZoomImage = document.getElementById("zoomImage")
oZoomTitle = document.getElementById("zoomTitle")
oZoomFrame = document.getElementById("zoomFrame")

//Setup Style properties
oZoomTop.style.overflow = "hidden"
oZoomTop.style.position = "absolute"
oZoomDiv.style.overflow = "hidden"
oZoomDiv.style.position = "absolute"
oZoomImage.style.position = "absolute"
oZoomFrame.style.position = "absolute"

oZoomFrame.style.borderWidth = nFrameBorderWidth + "px"

//2. This function will set the Width and Height, Lef and Right of the iFrame and load the LARGE image in it:
//Optional: cSrc: Pass FULL URL for image to be used as the LARGE version of the smaller image
//Optional: cTitle: Pass a title for the top of table
function setFrame(oImg, cSrc, cTitle)
	{	
	//Set the title for the window
	oZoomTitle.innerHTML = (cTitle ? cTitle : cZoomTitle)
	var oFrame, oPic,
		oObject=oImg.offsetParent,
		nTop=oImg.offsetTop,
		nLeft=oImg.offsetLeft

	if (typeof(cSrc)=="undefined")
		{
		cSrc = oImg.src
		cSrc = cSrc.replace("/Lawrence-Home/images/","/Lawrence-Home/W1024/")
//		cSrc = "../ZoomImages/ZoomImages/" + cSrc.substr(cSrc.lastIndexOf("/") + 1)
		}

	while (oObject != null)
		{
		nTop = nTop + oObject.offsetTop
		nLeft = nLeft + oObject.offsetLeft
		oObject = oObject.offsetParent
		}

	if (nLeft + oImg.width + nDivWidth < document.body.clientWidth)
		{
		nLeft = nLeft + oImg.width + 10
		}
		else
		{
		nLeft = nLeft - nDivWidth - 10
		}

	//Showing the hourglass till main image loaded
	oZoomImage.src=oHourGlass.src

	oZoomTop.style.top = nTop // - oZoomTop.offsetHeight
	oZoomTop.style.left = nLeft
	oZoomTop.style.width = nDivWidth

	oZoomDiv.style.top = oZoomTop.offsetTop + oZoomTop.offsetHeight
	oZoomDiv.style.left = oZoomTop.offsetLeft
	oZoomDiv.style.width = nDivWidth
	oZoomDiv.style.height = nDivHeight

	oZoomFrame.style.top = oZoomTop.offsetTop - nFrameBorderWidth * (document.all ? 1 : 2)
	oZoomFrame.style.left = oZoomTop.offsetLeft - nFrameBorderWidth * (document.all ? 1 : 2)
	oZoomFrame.style.width = oZoomTop.offsetWidth + nFrameBorderWidth * 2
	oZoomFrame.style.height = nDivHeight + oZoomTop.offsetHeight + nFrameBorderWidth * 2

	oZoomImage.style.visibility="visible"
	oZoomDiv.style.visibility="visible"
	oZoomTop.style.visibility="visible"
	oZoomFrame.style.visibility="visible"
	oImg.style.cursor='url(/ZoomImages/arrow.cur), pointer;'

	oMainImage.src = cSrc
	nTimeOut = setInterval("loadImage()",500)
	}

//3. This function hide the frame when mouse goes off the image
function hideFrame(oImg)
	{
	oZoomImage.src=""
	oZoomImage.style.visibility="hidden"
	oZoomDiv.style.visibility="hidden";
	oZoomTop.style.visibility="hidden"
	oZoomFrame.style.visibility="hidden";
	}

//4. This function is scrolling the image in the fram according to mouse movement.
function moveImage(oImg,evt)
	{
	var wRat, hRat, oObject, nTop, nLeft
	switch (nApp)
		{
		case 1: //Netscape / Firefox
			wRat = (oZoomImage.width - oZoomDiv.offsetWidth) / oImg.width 
			hRat = (oZoomImage.height - oZoomDiv.offsetHeight) / oImg.height
			oObject=oImg.offsetParent,
			nTop=oImg.offsetTop,
			nLeft=oImg.offsetLeft

			while (oObject != null)
				{
				nTop = nTop + oObject.offsetTop
				nLeft = nLeft + oObject.offsetLeft
				oObject = oObject.offsetParent
				}
			nLeft = (nLeft - evt.pageX) * wRat
			nTop = (nTop - evt.pageY) * hRat
			break;
		default: //Explorer
			{
			wRat = (oZoomImage.width - oZoomDiv.offsetWidth) / oImg.width
			hRat = (oZoomImage.height - oZoomDiv.offsetHeight) / oImg.height
			nLeft = (-event.offsetX * wRat) // + document.all.zoomFrame.offsetWidth / 2
			nTop = (-event.offsetY * hRat) // + document.all.zoomFrame.offsetHeight / 2
			break
			}
		}
		oZoomImage.style.left = nLeft
		oZoomImage.style.top = nTop
	}
	
//When main image loaded, will show it.
function loadImage()
    {
    if (oMainImage.height)
        {
        clearInterval(nTimeOut)
		oZoomImage.src = oMainImage.src
		}
    }

function setFrame1(oImg, cSrc)
	{
	//Keep this functon till next time compile Veratex. Then change the veratex to setFrame( from setFrame1(
	setFrame(oImg, cSrc)
	}