function prepareZoomableImage(imageid, specifier, sel)
{
	var baseElement = document.getElementById(imageid);
	if(!baseElement)
	{
		alert("There was an error preparing the image for zooming. Zoom functions are unavailable.\nRefreshing the page may fix this problem");
		return false;
	}	
	
	var newNode = document.createElement("div");
	var replacementImage = baseElement.cloneNode(false);
	baseElement.onload = null;
	replacementImage.onload = null;
	replacementImage.style.position = "absolute";
	replacementImage.style.top = "0px";
	replacementImage.style.left = "0px";
	replacementImage.style.zIndex = "2";
	replacementImage.ZIZoomLevel = 1;
	replacementImage.ZIBaseWidth = baseElement.clientWidth;
	replacementImage.ZIBaseHeight = baseElement.clientHeight;
	replacementImage.ZITargetWidth = baseElement.clientWidth;
	replacementImage.ZITargetHeight = baseElement.clientHeight;
	replacementImage.ZISpecifier = specifier;
	replacementImage.ZISel = sel;
	
	var controlElement = document.createElement("div");
	controlElement.style.width = baseElement.clientWidth + "px";
	controlElement.style.height = baseElement.clientHeight + "px";
	controlElement.style.position = "absolute";
	controlElement.style.top = "0px";
	controlElement.style.left = "0px";
	controlElement.style.zIndex = "4";
    //	controlElement.style.visibility = "hidden";
	controlElement.style.visibility = "visible";
	controlElement.id = "zicontrolelement";

	var zoomInLink = document.createElement("a");
	zoomInLink.href = "javascript:zoomInImage(\"zoomableimage\"); void(0);";
	zoomInLink.style.opacity = "1.0";
	zoomInLink.style.filter = "alpha(opacity=100)";
	zoomInLink.style.fontSize = "12px";	
	zoomInLink.style.display = "block";
	zoomInLink.style.color = "white";
	zoomInLink.style.zIndex = "5";
	zoomInLink.style.position = "absolute";
	zoomInLink.style.left = (baseElement.clientWidth - 181) + "px";
	if(baseElement.height > 450) // NeilN 10-17-08 changed this to a conditional to work differently for wide vs tall images
	{
	    zoomInLink.style.top = "440px";
    }
    else
    {
	    zoomInLink.style.bottom = "5px"
	}
	zoomInLink.id = "zizoominbutton";
	var zoomInImg = document.createElement("img");
	zoomInImg.src = "images/button_zoomin.png";
	zoomInImg.style.width = "86px";
	zoomInImg.style.height = "26px";
	zoomInImg.style.border = "none 0px";
	zoomInLink.appendChild(zoomInImg);
	
	
	var zoomOutLink = document.createElement("a");
	zoomOutLink.href = "javascript: void(0);";
	zoomOutLink.style.opacity = "0.3";
	zoomOutLink.style.filter = "alpha(opacity=30)";
	zoomOutLink.style.fontSize = "12px";	
	zoomOutLink.style.display = "block";
	zoomOutLink.style.color = "white";
	zoomOutLink.style.zIndex = "5";
	zoomOutLink.style.position = "absolute";
	zoomOutLink.style.left = (baseElement.clientWidth - 91) + "px";
	if(baseElement.height > 450) // NeilN 10-17-08 changed this to a conditional to work differently for wide vs tall images
	{
	    zoomOutLink.style.top = "440px";	
    }
    else
    {
	    zoomOutLink.style.bottom = "5px"
	}
	zoomOutLink.id = "zizoomoutbutton";
	var zoomOutImg = document.createElement("img");
	zoomOutImg.src = "images/button_zoomout.png";
	zoomOutImg.style.width = "86px";
	zoomOutImg.style.height = "26px";
	zoomOutImg.style.border = "none 0px";
	zoomOutLink.appendChild(zoomOutImg);

	controlElement.appendChild(zoomInLink);
	controlElement.appendChild(zoomOutLink);
	
	var specElement = document.getElementById("ziproductspec");
	specElement.parentNode.removeChild(specElement);
	specElement.style.position = "absolute";
	specElement.style.zIndex = "3";
	specElement.style.top = "5px";
	specElement.style.right = "5px";
	specElement.style.visibility = "visible";
	specElement.style.fontFamily = "sans-serif";
	specElement.style.fontWeight = "bold";
	specElement.style.color = "black";
	specElement.style.fontSize = "14px";
	
	newNode.appendChild(replacementImage);
	newNode.appendChild(specElement);
	newNode.appendChild(controlElement);
	newNode.style.display = "block";
	newNode.style.width = baseElement.clientWidth + "px";
	newNode.style.height = baseElement.clientHeight + "px";
	newNode.style.overflow = "hidden";
	newNode.style.position = "relative";
	newNode.style.fontSize = "0pt";
	newNode.id = "zibaseelement";

	try
	{	
		newNode.addEventListener("mouseover", ZIShowControls, false);
		//newNode.addEventListener("mouseout", ZIHideControls, false);
		newNode.addEventListener("mousedown", ZIStartPanning, false);
	}
	catch(err)
	{
		try
		{
			newNode.attachEvent("onmouseover", ZIShowControls);
			//newNode.attachEvent("onmouseout", ZIHideControls);
			newNode.attachEvent("onmousedown", ZIStartPanning);
			controlElement.attachEvent("onmousedown", new function() { return false; });
			newNode.ondrag = function () { return false; };
		}
		catch(err2)
		{
			ZIShowControls();
		}
	}

	baseElement.parentNode.replaceChild(newNode, baseElement);	

	ZIFadingMessage("Mouse over the image for zoom controls", 1000);
}

function ZIShowControls() 
{
	document.getElementById("zicontrolelement").style.visibility = "visible";
}

function ZIHideControls() 
{
	document.getElementById("zicontrolelement").style.visibility = "hidden";
}

function zoomInImage(imageid)
{
	var baseElement = document.getElementById(imageid);
	if(!baseElement)
	{
		alert("There was an error preparing the image for zooming. Zoom functions are unavailable.\nRefreshing the page may fix this problem");
		return false;
	}		
	
	baseElement.ZIZoomLevel += 1;
	baseElement.ZITargetWidth = baseElement.ZIBaseWidth * baseElement.ZIZoomLevel;
	baseElement.ZITargetHeight = baseElement.ZIBaseHeight * baseElement.ZIZoomLevel;
	baseElement.replacementImage = document.createElement("img");
	baseElement.replacementImage.src = "http://" + RenderServer + ".chameleonpower.com/cham/cfxgen.dll/image?specifier=" + baseElement.ZISpecifier + "(size=(" + (baseElement.ZIBaseWidth * baseElement.ZIZoomLevel) + "," + (baseElement.ZIBaseHeight * baseElement.ZIZoomLevel) + "),qfactor=(10,4))&sel=" + baseElement.ZISel;
	baseElement.replacementImage.style.position = "absolute";
	baseElement.replacementImage.style.left = "0px";
	baseElement.replacementImage.style.top = "0px";
	baseElement.replacementImage.style.width = "1px";
	baseElement.replacementImage.style.height = "1px";
	document.getElementById("zibaseelement").appendChild(baseElement.replacementImage);	
	eval("baseElement.replacementImage.onload = function() { var tempElement = document.getElementById(\"" + imageid + "\"); tempElement.src = tempElement.replacementImage.src; tempElement.replacementImage.parentNode.removeChild(tempElement.replacementImage); tempElement.replacementImage = null; ZIDestroyLoadingMessage(); ZIFadingMessage('Click and drag on the image to pan', 1000); }");
	var zoomInLink = document.getElementById("zizoominbutton");
	var zoomOutLink = document.getElementById("zizoomoutbutton");
	if(baseElement.ZIZoomLevel > 1)
	{
		zoomOutLink.href = "javascript:zoomOutImage(\"zoomableimage\"); void(0);";
		zoomOutLink.style.opacity = "1.0";
		zoomOutLink.style.filter = "alpha(opacity=100)";
	}	
	if((baseElement.ZITargetWidth + baseElement.ZIBaseWidth) > 800 && baseElement.ZIZoomLevel > 1)
	{	
		zoomInLink.href = "javascript: void(0);";
		zoomInLink.style.opacity = "0.3";
		zoomInLink.style.filter = "alpha(opacity=30)";
	}
	progressZoom(imageid);
}

function zoomOutImage(imageid)
{
	var baseElement = document.getElementById(imageid);
	if(!baseElement)
	{
		alert("There was an error preparing the image for zooming. Zoom functions are unavailable.\nRefreshing the page may gix this problem");
		return false;
	}
	
	baseElement.ZIZoomLevel -= 1;
	baseElement.ZITargetWidth = baseElement.ZIBaseWidth * baseElement.ZIZoomLevel;
	baseElement.ZITargetHeight = baseElement.ZIBaseHeight * baseElement.ZIZoomLevel;
	baseElement.replacementImage = document.createElement("img");
	baseElement.replacementImage.src = "http://" + RenderServer + ".chameleonpower.com/cham/cfxgen.dll/image?specifier=" + baseElement.ZISpecifier + "(size=(" + (baseElement.ZIBaseWidth * baseElement.ZIZoomLevel) + "," + (baseElement.ZIBaseHeight * baseElement.ZIZoomLevel) + "),qfactor=(10,4))&sel=" + baseElement.ZISel;
	baseElement.replacementImage.style.position = "absolute";
	baseElement.replacementImage.style.left = "0px";
	baseElement.replacementImage.style.top = "0px";
	baseElement.replacementImage.style.width = "1px";
	baseElement.replacementImage.style.height = "1px";
	document.getElementById("zibaseelement").appendChild(baseElement.replacementImage);	
	eval("baseElement.replacementImage.onload = new function() { var tempElement = document.getElementById(\"" + imageid + "\"); tempElement.src = tempElement.replacementImage.src; tempElement.replacementImage.parentNode.removeChild(tempElement.replacementImage); tempElement.replacementImage = null; }");
	var zoomInLink = document.getElementById("zizoominbutton");
	var zoomOutLink = document.getElementById("zizoomoutbutton");
	if(baseElement.ZIZoomLevel <= 1)
	{
		zoomOutLink.href = "javascript: void(0);";
		zoomOutLink.style.opacity = "0.3";
		zoomOutLink.style.filter = "alpha(opacity=30)";
	}
	zoomInLink.href = "javascript:zoomInImage(\"zoomableimage\"); void(0);";
	zoomInLink.style.opacity = "1.0";
	zoomInLink.style.filter = "alpha(opacity=100)";
	progressZoom(imageid);
}

function progressZoom(imageid)
{
	var baseElement = document.getElementById(imageid);
	var newwidth = baseElement.clientWidth;
	var newheight = baseElement.clientHeight;
	var newleft = parseInt(baseElement.style.left.replace("px", "").replace("pt", ""));
	var newtop = parseInt(baseElement.style.top.replace("px", "").replace("pt", ""));
	if(baseElement.clientWidth < baseElement.ZITargetWidth || baseElement.clientHeight < baseElement.ZITargetHeight)
	{
		newwidth = (baseElement.clientWidth + (baseElement.ZIBaseWidth / 10));
		newheight = (baseElement.clientHeight + (baseElement.ZIBaseHeight / 10));		
	}
	else if(baseElement.clientWidth > baseElement.ZITargetWidth || baseElement.clientHeight > baseElement.ZITargetHeight)
	{
		newwidth = (baseElement.clientWidth - (baseElement.ZIBaseWidth / 10));
		newheight = (baseElement.clientHeight - (baseElement.ZIBaseHeight / 10));		
	}
	else if(baseElement.clientWidth == baseElement.ZITargetWidth && baseElement.clientHeight == baseElement.ZITargetHeight && baseElement.replacementImage)
	{
		if(!document.getElementById("ziloadingmessage"))
		{
			ZICreateLoadingMessage("Enhancing Image...");
		}
		setTimeout("progressZoom(\"" + imageid + "\");", 50);	
		return false;
	}
	else
	{
		ZIDestroyLoadingMessage();
		return false;
	}
	if((newwidth > baseElement.ZITargetWidth && baseElement.clientWidth <= (baseElement.ZIBaseWidth * baseElement.ZIZoomLevel)) || (newheight > baseElement.ZITargetHeight && baseElement.clientHeight <= (baseElement.ZIBaseHeight * baseElement.ZIZoomLevel)))
	{
		newwidth = baseElement.ZITargetWidth;
		newheight = baseElement.ZITargetHeight;
	}
	else if((newwidth < baseElement.ZITargetWidth && baseElement.clientWidth >= (baseElement.ZIBaseWidth * baseElement.ZIZoomLevel)) || (newheight < baseElement.ZITargetHeight && baseElement.clientHeight >= (baseElement.ZIBaseHeight * baseElement.ZIZoomLevel)))
	{
		newwidth = baseElement.ZITargetWidth;
		newheight = baseElement.ZITargetHeight;
	}
	newtop -= ((newheight - baseElement.clientHeight) / 2);
	newleft -= ((newwidth - baseElement.clientWidth) / 2);
	if(newleft < (baseElement.ZIBaseWidth - newwidth))
	{
		newleft = (baseElement.ZIBaseWidth - newwidth);
	}
	if(newleft > 0)
	{
		newleft = 0;
	}
	if(newtop < (baseElement.ZIBaseHeight - newheight))
	{
		newtop = (baseElement.ZIBaseHeight - newheight);
	}
	if(newtop > 0)
	{
		newtop = 0;
	}
	var tempElement = document.createElement("img");
	tempElement.src = baseElement.src
	tempElement.style.position = "absolute";
	tempElement.style.left = newleft + "px";
	tempElement.style.top = newtop + "px";
	tempElement.style.zIndex = "3";
	tempElement.style.width = newwidth + "px";
	tempElement.style.height = newheight + "px";

	baseElement.parentNode.appendChild(tempElement);
	baseElement.style.left = tempElement.style.left;
	baseElement.style.top = tempElement.style.top;
	baseElement.style.width = tempElement.style.width;
	baseElement.style.height = tempElement.style.height;
	baseElement.parentNode.removeChild(tempElement);
	setTimeout("progressZoom(\"" + imageid + "\");", 50);	
}

function ZIStartPanning(e)
{
	if(!e)
	{ 
		e = window.event;
	}
	var baseElement = document.getElementById("zibaseelement");
	var imageElement = document.getElementById("zoomableimage");
	baseElement.ZIDragHandleX = e.screenX;
	baseElement.ZIDragHandleY = e.screenY;
	baseElement.ZIDragHandleTop = parseInt(imageElement.style.top.replace("px", "").replace("pt", ""));
	baseElement.ZIDragHandleLeft = parseInt(imageElement.style.left.replace("px", "").replace("pt", ""));

	try 
	{
		baseElement.removeEventListener("mousedown", ZIStartPanning, false);
		document.addEventListener("mousemove", ZIContinuePanning, false);
		document.addEventListener("mouseup", ZIStopPanning, false);
	}
	 catch (err)
	{
		try 
		{
			baseElement.detachEvent("onmousedown", ZIStartPanning);
			document.attachEvent("onmousemove", ZIContinuePanning);
			document.attachEvent("onmouseup", ZIStopPanning);
		}
		 catch (err2)
		{
		}
	}
	return false;
}

function ZIContinuePanning(e)
{
	if(!e)
	{ 
		e = window.event;
	}
	var baseElement = document.getElementById("zibaseelement");
	var imageElement = document.getElementById("zoomableimage");
	var newleft = (baseElement.ZIDragHandleLeft + (e.screenX - baseElement.ZIDragHandleX));
	var newtop = (baseElement.ZIDragHandleTop + (e.screenY - baseElement.ZIDragHandleY))
	if(newleft < (baseElement.clientWidth - imageElement.clientWidth))
	{
		newleft = (baseElement.clientWidth - imageElement.clientWidth);
	}
	if(newleft > 0)
	{
		newleft = 0;
	}
	if(newtop < (baseElement.clientHeight - imageElement.clientHeight))
	{
		newtop = (baseElement.clientHeight - imageElement.clientHeight);
	}
	if(newtop > 0)
	{
		newtop = 0;
	}
	imageElement.style.left = newleft + "px";
	imageElement.style.top = newtop + "px";
}

function ZIStopPanning(e)
{
	if(!e)
	{ 
		e = window.event;
	}
	var baseElement = document.getElementById("zibaseelement");
	try
	{
		document.removeEventListener("mousemove", ZIContinuePanning, false);
		document.removeEventListener("mouseup", ZIStopPanning, false);
		baseElement.addEventListener("mousedown", ZIStartPanning, false);
	}
	catch(err)
	{
		try
		{
			document.detachEvent("onmousemove", ZIContinuePanning);
			document.detachEvent("onmouseup", ZIStopPanning);
			baseElement.attachEvent("onmousedown", ZIStartPanning);
		}
		catch(err2)
		{
		}
	}
}

function ZICreateLoadingMessage(loadingText)
{
	ZIDestroyLoadingMessage();

	var tempElement = document.createElement("div");
	var tempTextNode = document.createElement("span");
	var baseElement = document.getElementById("zibaseelement");
	var tempImage = document.createElement("img");
	
	tempTextNode.appendChild(document.createTextNode(loadingText));
	tempTextNode.style.margin = "10px";
	tempTextNode.style.font = "bold 11px sans-serif";
	tempTextNode.style.color = "black";	
	tempTextNode.style.display = "block";
	
	tempImage.src = "images/timer_loading.gif";
	tempImage.style.width = "30px";
	tempImage.style.height = "30px";
	tempImage.style.margin = "5px 85px 5px 85px";
	
	tempElement.style.width = "200px";
	tempElement.style.height = "100px";
	tempElement.style.opacity = "0.5";
	tempElement.style.filter = "alpha(opacity=50)";
	tempElement.style.backgroundColor = "white";
	tempElement.style.textAlign = "center";
	tempElement.id = "ziloadingmessage";
	tempElement.style.position = "absolute";
	tempElement.style.left = ((baseElement.clientWidth / 2) - (200 / 2)) + "px";
	tempElement.style.top = ((baseElement.clientHeight / 2) - (100 / 2)) + "px";
	tempElement.style.zIndex = "8";

	tempElement.appendChild(tempTextNode);
	tempElement.appendChild(tempImage);
	baseElement.appendChild(tempElement);
}

function ZIDestroyLoadingMessage()
{
	var tempElement = document.getElementById("ziloadingmessage");
	if(tempElement)
	{
		tempElement.parentNode.removeChild(tempElement);
	}
}

var fadingMessageCount = 0;

function ZIFadingMessage(messageText, duration)
{
	fadingMessageCount++;
	
	var tempElement = document.createElement("div");
	var tempTextNode = document.createElement("span");
	var subTextNode = document.createElement("span");
	var baseElement = document.getElementById("zibaseelement");
	
	tempTextNode.appendChild(document.createTextNode(messageText));
	tempTextNode.style.font = "bold 14px sans-serif";
	tempTextNode.style.color = "white";	
	tempTextNode.style.display = "block";
	tempTextNode.style.margin = "0";
	tempTextNode.style.height = "200px";
/*
	tempTextNode.style.position = "absolute";
	tempTextNode.style.top = "5px";
	tempTextNode.style.left = "5px";
*/	
	tempTextNode.style.zIndex = "2";
	
	subTextNode.appendChild(document.createTextNode(messageText));
	subTextNode.style.font = "bold 14px sans-serif";
	subTextNode.style.color = "black";	
	subTextNode.style.display = "block";
	subTextNode.style.margin = "1px 0 -201px 1px";
	subTextNode.style.height = "200px";
/*	
	subTextNode.style.position = "absolute";
	subTextNode.style.top = "6px";
	subTextNode.style.left = "6px";
*/	
	subTextNode.style.zIndex = "1";

	tempElement.appendChild(subTextNode);
	tempElement.appendChild(tempTextNode);

	tempElement.style.opacity = "0";
	tempElement.style.filter = "alpha(opacity=0)";
	tempElement.style.textAlign = "left";
	tempElement.id = "zifadingmessage" + fadingMessageCount;
	tempElement.style.position = "absolute";
	tempElement.style.fontSize = "14px";
	tempElement.style.left = "5px";
	tempElement.style.top = "5px";
	tempElement.style.zIndex = "3";
	tempElement.style.width = (document.getElementById("zibaseelement").clientWidth - 70) + "px";
	
	tempElement.ZICurrentFade = 0;
	tempElement.ZILifeTime = duration + 2100;
	
	setTimeout("ZIFadingMessageHandler(" + fadingMessageCount + ");", 10);

	baseElement.appendChild(tempElement);	
}

function ZIFadingMessageHandler(messagenum)
{
	var messageElement = document.getElementById("zifadingmessage" + messagenum);
	if(!messageElement)
	{
		return false;
	}
	if(messageElement.ZILifeTime <= 0)
	{
		messageElement.parentNode.removeChild(messageElement);
		return false;
	}
	else if(messageElement.ZILifeTime < 2000)
	{
		messageElement.style.opacity = (messageElement.ZILifeTime / 2000);
		messageElement.style.filter = "alpha(opacity=" + (messageElement.ZILifeTime / 20) + ")";
	}
	else if(messageElement.ZICurrentFade <= 100)
	{
		messageElement.style.opacity = (messageElement.ZICurrentFade / 100);
		messageElement.style.filter = "alpha(opacity=" + messageElement.ZICurrentFade + ")";
		messageElement.ZICurrentFade += 10;
	}
	messageElement.ZILifeTime -= 10;
	setTimeout("ZIFadingMessageHandler(" + messagenum + ");", 10);
}