var includeCaption = 1;
var zoomTime       = 5;
var zoomSteps      = 10;
var fade           = 1;
var zoomImageURI   = './images/zoom/';

var debugShadow    = 0;



var myWidth = 0, myHeight = 0, myScroll = 0, zoomOpen = false, preloadFrame = 1, preloadActive = false, preloadTime = 0, imgPreload = new Image();

var zoomActive = new Array();
var zoomTimer  = new Array();
var zoomOrigW  = new Array();
var zoomOrigH  = new Array();
var zoomOrigX  = new Array();
var zoomOrigY  = new Array();

var zoomID    = "ZoomBox";
var theID     = "ZoomImage";
var theCap    = "ZoomCaption";
var theCapDiv = "ZoomCapDiv";
var imgExt		= "png";




function hideZoomStuff()
	{
	document.getElementById("ZoomBox").style.visibility = "hidden";
	setOpacity(0, "ZoomBox");
	}

// Setup The Page! Called onLoad();
function setupZoom()
	{
if (isIE())
	{
	includeCaption = 0;
	}
else
	{
	includeCaption = 1;
	}
	
	prepZooms();
	InjectZoomBoxCode();
	zoomdiv = byId(zoomID);  
	zoomimg = byId(theID);
	}


// Inject Javascript functions into zoomable href's, one by one.  This is done at page load time via an onLoad() handler.
function prepZooms()
	{
	if (!document.getElementsByTagName)
		{
		return;
		}

	var links = document.getElementsByTagName("a");
	for (i=0; i<links.length; i++)
		{
		if (links[i].getAttribute("href") && (links[i].getAttribute("rel")))
			{
			if (links[i].getAttribute("rel").indexOf("zoom:") == 0)
				{
				links[i].onclick = function () {zoomClick(this); return false;};
				links[i].onmouseover = function () {zoomPreload(this);};
				}
			}
		}
	}


// Preload a zoom image when hovering over the thumbnail, then set the image once the preload is complete.
// Preloaded image is stored in imgPreload() and swapped out in the zoom function.
function zoomPreload(from)
	{
	var theimage = from.getAttribute("href");
	
	
	// Only preload if we have to, i.e. the image isn't this image already
	if (imgPreload.src.indexOf(from.getAttribute("href").substr(from.getAttribute("href").lastIndexOf("/"))) == -1)
		{
		preloadActive = true;
		imgPreload = new Image();

		// Set a function to fire when the preload is complete, setting flags along the way.
		imgPreload.onload = function() {preloadActive = false;}

		// Load it!
		imgPreload.src = theimage;
		}
	}


// Start the preloading animation cycle.
function preloadAnimStart()
	{
	preloadTime = new Date();
	document.getElementById("ZoomSpin").style.left = (myWidth / 2) + 'px';
	document.getElementById("ZoomSpin").style.top = ((myHeight / 2) + myScroll) + 'px';
	preloadFrame = 1;
	document.getElementById("SpinImage").src = zoomImageURI+'zoom-spin-'+preloadFrame+'.png';  
	preloadAnimTimer = setInterval("preloadAnimPending()", 100);
	}


// Until we've been preloading for one second, just chill out in here.
function preloadAnimPending(from)
	{
	if (preloadActive != false)
		{
		if ((new Date() - preloadTime) > 1000)
			{
			document.getElementById("ZoomSpin").style.visibility = "visible";
			clearInterval(preloadAnimTimer);
			preloadAnimTimer = setInterval("preloadAnim()", 100);
			}
		else
			{
			// Stay in this loop and don't do anything while we wait one second
			}
		}
	else
		{
		clearInterval(preloadAnimTimer);
		zoomIn(preloadFrom);
		}
	}


function preloadAnim(from)
	{
	if (preloadActive != false)
		{
		document.getElementById("SpinImage").src = zoomImageURI+'zoom-spin-'+preloadFrame+'.png';
		preloadFrame++;
		if (preloadFrame > 12)
			{
			preloadFrame = 1;
			}
		}
	else
		{
		document.getElementById("ZoomSpin").style.visibility = "hidden";    
		clearInterval(preloadAnimTimer);
		zoomIn(preloadFrom);
		}
	}


// We got a click!  Should we do the zoom? Or wait for the preload to complete?
function zoomClick(from)
	{
	// Get browser dimensions
	getSize();

	if (preloadActive == true)
		{
		// Preloading is otherwise still going on. So wait.
		preloadFrom = from;
		preloadAnimStart();
		}
	else
		{
		// Otherwise, we're loaded: do the zoom!
		zoomIn(from);
		}
	}


// Zoom an element in to endH endW, using zoomHost as a starting point.  "from" is an object reference to the href that spawned the zoom.
function zoomIn(from)
	{
	theRel = from.getAttribute("rel");
	var tempArgs = theRel.substring(5,theRel.length).split(',');

	// Check for missing arguments
	if (tempArgs[0] == undefined || tempArgs[1] == undefined || tempArgs[2] == undefined)
		{
		alert("Missing zoom arguments!");
		}

	if (tempArgs[3] == undefined)
		{
		rollOverImg = "";
		}
	else
		{
		rollOverImg = tempArgs[3];
		}
	
	var cat;
	if (tempArgs[4] == undefined)
		{
		cat = "";
		}
	else
		{
		cat = "?cat=" + tempArgs[4];
		}

	image         = from.getAttribute("href");
	var zoomHost  = tempArgs[2];
	var endW      = tempArgs[0];
	var endH      = tempArgs[1];

	// Don't act if we're already doing something.
	if (zoomActive[theID] != true)
		{
		// Clear everything out just in case something is already open
		document.getElementById("ShadowBox").style.visibility = "hidden";
		document.getElementById("ZoomClose").style.visibility = "hidden";     

		// Set the CAPTION if turned on
		if (includeCaption == 1)
			{
			zoomcap  = document.getElementById(theCap);
			zoomcapd = document.getElementById(theCapDiv);

			if (from.getAttribute('title') && includeCaption == 1)
				{
				zoomcapd.style.display = 'block';
				zoomcap.innerHTML = '<a href="items.php' + cat + '">' + from.getAttribute('title') + '</a>';
				}
			else
				{
				zoomcapd.style.display = 'none';
				}
			}

		// Set the image to the right image.
		zoomimg.src = image;

		// Find the initial size and position of our zoomer to the size of the source thumbnail, dynamically
		hostimg = document.getElementById(zoomHost);
		startW = hostimg.width;
		startH = hostimg.height;

		if (startW == undefined && startH == undefined)
			{
			startW = 50;
			startH = 12;
			}

		var hostX = 0;
		var hostY = 0;
		var hostFind = hostimg;

		do
			{
			hostX += hostFind.offsetLeft;
			hostY += hostFind.offsetTop;
			} while (hostFind = hostFind.offsetParent)

		// Store original position in an array for future zoomeOut
		zoomOrigW[theID] = startW;
		zoomOrigH[theID] = startH;
		zoomOrigX[theID] = hostX;
		zoomOrigY[theID] = hostY;

		// Now set it
		zoomimg.style.width = startW + 'px';
		zoomimg.style.height = startH + 'px';
		zoomdiv.style.left = hostX + 'px';
		zoomdiv.style.top = hostY + 'px';

		// Show the zoom box, make it invisible
		if (fade == 1)
			{
			setOpacity(0, zoomID);
			}
			
		zoomdiv.style.visibility = "visible";

		// If it's too big to fit, shrink the width and height to fit (with ratio).
		// TODO: I don't think this is being calculated right.
		if (endW > myWidth)
			{
			if (endH < endW)
				{
				sizeRatio = (endH / endW)
				}
			else
				{
				sizeRatio = (endW / endH)
				}
				
			endW = endW * (myWidth / endW) - 60;
			endH = endW * sizeRatio;
			}
			
		if (endH > myHeight)
			{
			if (endH < endW)
				{
				sizeRatio = (endW / endH)
				}
			else
				{
				sizeRatio = (endH / endW)
				}
				
			endH = endH * (myHeight / endH) - 60;
			endW = endH * sizeRatio;
			}

		// Setup Zoom
		zoomCurrent = 0;
		zoomAmountW = (endW - startW) / zoomSteps;
		zoomAmountH = (endH - startH) / zoomSteps;

		// Setup Movement
		zoomAmountX = ((myWidth / 2) - (endW / 2) - hostX) / zoomSteps;
		zoomAmountY = (((myHeight / 2) - (endH / 2) - hostY) + myScroll) / zoomSteps;

		// Setup Fade with Zoom, If Requested
		if (fade == 1)
			{
			fadeCurrent = 0;
			fadeAmount = (0 - 100) / zoomSteps;
			}
		else
			{
			fadeAmount = 0;
			}

		// Set the image, just in case it didn't get set via the preload system
		zoomimg.src = image;

		// Do It!
		zoomTimer[theID] = setInterval("zoomElement('"+zoomID+"', '"+theID+"', "+zoomCurrent+", "+endH+", "+endW+", "+zoomAmountH+", "+zoomAmountW+", "+zoomAmountX+", "+zoomAmountY+", "+zoomSteps+", "+fade+", "+fadeAmount+", 'zoomDoneIn(zoomID)')", zoomTime);
		zoomActive[theID] = true; 
		}
	}


// Zoom it back out.
function zoomOut()
	{
	// Check to see if something is happening/open
	if (zoomActive[theID] != true)
		{
		// First, get rid of the shadow if necessary
		document.getElementById("ShadowBox").style.visibility = "hidden";
		document.getElementById("ZoomClose").style.visibility = "hidden";

		// Now, figure out where we came from, to get back there
		endH = zoomOrigH[theID];
		endW = zoomOrigW[theID];
		endX = zoomOrigX[theID];
		endY = zoomOrigY[theID];
		startH = zoomimg.height;
		startW = zoomimg.width;
		startX = parseInt(zoomdiv.style.left);
		startY = parseInt(zoomdiv.style.top);

		// Setup Zoom
		zoomCurrent = 0;
		zoomAmountW = (endW - startW) / zoomSteps;
		zoomAmountH = (endH - startH) / zoomSteps;

		// Setup Movement 
		getSize();
		zoomAmountX = (endX - startX) / zoomSteps;
		zoomAmountY = (endY - startY) / zoomSteps;

		// Setup Fade with Zoom, If Requested
		if (fade == 1)
			{
			fadeCurrent = 0;
			fadeAmount = (100 - 0) / zoomSteps;
			}
		else
			{
			fadeAmount = 0;
			}

		// Do It!
		zoomTimer[theID] = setInterval("zoomElement('"+zoomID+"', '"+theID+"', "+zoomCurrent+", "+endH+", "+endW+", "+zoomAmountH+", "+zoomAmountW+", "+zoomAmountX+", "+zoomAmountY+", "+zoomSteps+", "+fade+", "+fadeAmount+", 'zoomDone(zoomID, theID)')", zoomTime);
		zoomActive[theID] = true;
		}
	}


// Finished Zooming In
function zoomDoneIn(zoomdiv, theID)
	{
	// Note that it's open
	zoomOpen = true;

	// Make sure they are gone
	setOpacity(0, "ShadowBox");
	setOpacity(0, "ZoomClose");

	// Position the shadow behind the zoomed in image.
	zoomdiv = document.getElementById(zoomdiv);
	shadowdiv = document.getElementById("ShadowBox");

	shadowLeft = parseInt(zoomdiv.style.left) - 13;
	shadowTop = parseInt(zoomdiv.style.top) - 8;
	shadowWidth = zoomdiv.offsetWidth + 26;
	shadowHeight = zoomdiv.offsetHeight + 26; 

	shadowdiv.style.width = shadowWidth + 'px';
	shadowdiv.style.height = shadowHeight + 'px';
	shadowdiv.style.left = shadowLeft + 'px';
	shadowdiv.style.top = shadowTop + 'px';

if (!isIE())
	{
	// Display Shadow and Zoom
	document.getElementById("ShadowBox").style.visibility = "visible";
	fadeElementSetup("ShadowBox", 0, 100, 5);
	document.getElementById("ZoomClose").style.visibility = "visible";
	fadeElementSetup("ZoomClose", 0, 100, 5);
	}
	}


// Finished Zooming Out
function zoomDone(zoomdiv, theID)
	{
	// No longer open
	zoomOpen = false;

	// Clear stuff out, clean up
	zoomOrigH[theID] = "";
	zoomOrigW[theID] = "";
	document.getElementById(zoomdiv).style.visibility = "hidden";
	zoomActive[theID] == false;
	}


function zoomElement(zoomdiv, theID, zoomCurrent, zoomEndH, zoomEndW, zoomAmountH, zooomAmountW, zoomAmountX, zoomAmountY, zoomSteps, fade, fadeAmount, execWhenDone)
	{
	zoomCurrent++;

	// Do the Fade!
	if (fade != 0)
		{
		if (fadeAmount < 0)
			{
			setOpacity(Math.abs(zoomCurrent * fadeAmount), zoomdiv);
			}
		else
			{
			setOpacity(100 - (zoomCurrent * fadeAmount), zoomdiv);
			}
		}

	// Do the Movement And Scaling
	document.getElementById(zoomdiv).style.left = parseInt(document.getElementById(zoomdiv).style.left) + zoomAmountX + 'px';
	document.getElementById(zoomdiv).style.top = parseInt(document.getElementById(zoomdiv).style.top) + zoomAmountY + 'px';
	zoomimg.style.width = parseInt(zoomimg.style.width) + zoomAmountW + 'px';
	zoomimg.style.height = parseInt(zoomimg.style.height) + zoomAmountH + 'px';

	// Test if we're done, or if we continue
	if (zoomCurrent == zoomSteps)
		{
		zoomActive[theID] = false;
		clearInterval(zoomTimer[theID]);

		zoomimg.width = zoomEndW;
		zoomimg.height = zoomEndH;

		if (execWhenDone != "")
			{
			eval(execWhenDone);
			}
		}
	else
		{
		clearInterval(zoomTimer[theID]);
		zoomTimer[theID] = setInterval("zoomElement('"+zoomdiv+"', 'ZoomImage', "+zoomCurrent+", "+zoomEndH+", "+zoomEndW+", "+zoomAmountH+", "+zoomAmountW+", "+zoomAmountX+", "+zoomAmountY+", "+zoomSteps+", "+fade+", "+fadeAmount+", '"+execWhenDone+"')", zoomTime);  }
		}


// Zoom Rollover Functions
function zoomMouseOver()
	{
	if (rollOverImg != "")
		{
		if (document.getElementById("ZoomImage").src != rollOverImg)
			{
			document.getElementById("ZoomImage").src = rollOverImg;
			}
		}
	}


function zoomMouseOut()
	{
	if (rollOverImg != "")
		{
		if (document.getElementById("ZoomImage").src != image)
			{
			document.getElementById("ZoomImage").src = image;
			}
		}
	}


// Get the size of the window, and set myWidth and myHeight
function getSize()
	{
	if (document.all)
		{
		// IE4+ or IE6+ in standards compliant 
		myWidth  = (document.documentElement.clientWidth) ? document.documentElement.clientWidth : document.body.clientWidth;
		myHeight = (document.documentElement.clientHeight) ? document.documentElement.clientHeight : document.body.clientHeight;
		myScroll = (document.documentElement.scrollTop) ? document.documentElement.scrollTop : document.body.scrollTop;
		}
	else
		{
		// Non-IE
		myWidth = window.innerWidth;
		myHeight = window.innerHeight;
		myScroll = window.pageYOffset;
	}
	}



































//=========================================================================
//
//	Utilities
//
//=========================================================================

function byId(id)
	{
	return document.getElementById(id);
	}


function byName(name)
	{
	return document.getElementsByTagName(name);
	}


function createDiv()
	{
	return document.createElement("div");
	}


function createA()
	{
	return document.createElement("a");
	}


function createImg()
	{
	return document.createElement("img");
	}


function CreateWAttr()
	{
	var args = CreateWAttr.arguments;
	var elem;
	var i;
	
	
	elem = document.createElement(args[0]);
	for(i=1; i<args.length; i+=2)
		{
		elem.setAttribute(args[i], args[i+1]);
		}
	
	return elem;
	}
	
	
// Set the opacity, compatible with a number of browsers
function setOpacity(opacity, theID)
	{
	var object = document.getElementById(theID).style;

	// If it's 100, set it to 99 for Firefox.
	if (navigator.userAgent.indexOf("Firefox") != -1)
		{
		if (opacity == 100)
			{
			opacity = 99.999;
			}
		}

	// Multi-browser opacity setting
	object.filter = "alpha(opacity=" + opacity + ")"; // IE/Win
	object.KhtmlOpacity = (opacity / 100);            // Safari 1.1 or lower, Konqueror
	object.MozOpacity = (opacity / 100);              // Older Mozilla+Firefox
	object.opacity = (opacity / 100);                 // Safari 1.2, Firefox+Mozilla
	}


function SetStyle()
	{
	var args = SetStyle.arguments;
	var elem;
	var i;
	
	
	for(i=0; i<args.length; i+=3)
		{
		elem = byId(args[i]);
		if (elem)
			{
			eval("elem.style."+args[i+1]+"=\""+args[i+2]+"\"");
			}
		}
	}


function SetAttr()
	{
	var args = SetAttr.arguments;
	var elem;
	var i;
	
	
	for(i=0; i<args.length; i+=3)
		{
		elem = byId(args[i]);
		if (elem)
			{
			eval("elem.setAttribute."+args[i+1]+"=\""+args[i+2]+"\"");
			}
		}
	}


function SetElemAttr()
	{
	var args = SetElemAttr.arguments;
	var i;
	
	
	for(i=1; i<args.length; i+=2)
		{
		args[0].setAttribute(args[i], args[i+1]);
		}
	}
















//=========================================================================
//
//	Zoom In/Out
//
//=========================================================================

function InjectZoomBoxCode()
	{
	var inBody = byName("body").item(0);
	
	// zoom spin ============================================================
	var inSpinbox = CreateWAttr('div', 'id', 'ZoomSpin');
	inBody.insertBefore(inSpinbox, inBody.firstChild);
	
	var inSpinImage = CreateWAttr('img', 'id', 'SpinImage', 'src', zoomImageURI+'zoom-spin-1.png');
	inSpinbox.appendChild(inSpinImage);
	
	// zoom box =============================================================
	var inZoombox = CreateWAttr('div', 'id', 'ZoomBox');
	inBody.insertBefore(inZoombox, inSpinbox.nextSibling);
	
	var inLink1 = CreateWAttr('a', 'href','javascript:zoomOut();');
	inZoombox.appendChild(inLink1);
	
	var inImage1 = CreateWAttr('img', 'id', 'ZoomImage', 'src',zoomImageURI+'spacer.gif', 'id','ZoomImage', 'onMouseOver', 'zoomMouseOver();', 'onMouseOut', 'zoomMouseOut();');
	inLink1.appendChild(inImage1);
	
	var inClosebox = CreateWAttr('div', 'id', 'ZoomClose');
	inZoombox.appendChild(inClosebox);
	
	var inLink2 = CreateWAttr('a', 'href','javascript:zoomOut(1);');
	inClosebox.appendChild(inLink2);
	
	var inImage2 = CreateWAttr('img', 'id','ZoomImage1', 'src',zoomImageURI+'closebox.png');
	inLink2.appendChild(inImage2);
	
	// shadow box ===========================================================
	if (isIE())
		{
		imgExt = "gif";
		}
		
	var inShadowbox = CreateWAttr('div', 'id', 'ShadowBox');
	inBody.insertBefore(inShadowbox, inZoombox.nextSibling);

	var inTable = CreateWAttr('table', 'id', 'ShadowTable', 'cellpadding', '0', 'cellspacing', '0');
	inShadowbox.appendChild(inTable);
	
	var inRow1 = document.createElement("tr");
	inRow1.style.height = '25px';
	inTable.appendChild(inRow1);
	var inCol1 = document.createElement("td");
	inCol1.style.width = '27px';
	inRow1.appendChild(inCol1);
	var inShadowImg1 = CreateWAttr('img', 'id', 'ShadowUCorner', 'src', zoomImageURI+'zoom-shadow1.' + imgExt);
	inCol1.appendChild(inShadowImg1);
	var inCol2 = CreateWAttr('td', 'background', zoomImageURI+'zoom-shadow2.' + imgExt);
	inRow1.appendChild(inCol2);
	var inSpacer1 = CreateWAttr('img', 'id', 'ShadowSide', 'src',zoomImageURI+'spacer.gif');
	inCol2.appendChild(inSpacer1);
	var inCol3 = document.createElement("td");
	inCol3.style.width = '27px';
	inRow1.appendChild(inCol3);
	var inShadowImg3 = CreateWAttr('img', 'id', 'ShadowUCorner', 'src', zoomImageURI+'zoom-shadow3.' + imgExt);
	inCol3.appendChild(inShadowImg3);

	inRow2 = document.createElement("tr");
	inTable.appendChild(inRow2);
	var inCol4 = CreateWAttr('td', 'background', zoomImageURI+'zoom-shadow4.' + imgExt);
	inRow2.appendChild(inCol4);
	var inSpacer2 = CreateWAttr('img', 'id', 'ShadowSide', 'src',zoomImageURI+'spacer.gif');
	inCol4.appendChild(inSpacer2);
	var inCol5 = CreateWAttr('td', 'bgcolor', '#ffffff');
	inRow2.appendChild(inCol5);
	var inSpacer3 = CreateWAttr('img', 'id', 'ShadowSide', 'src',zoomImageURI+'spacer.gif');
	inCol5.appendChild(inSpacer3);
	var inCol6 = CreateWAttr('td', 'background', zoomImageURI+'zoom-shadow5.' + imgExt);
	inRow2.appendChild(inCol6);
	var inSpacer4 = CreateWAttr('img', 'id', 'ShadowSide', 'src',zoomImageURI+'spacer.gif');
	inCol6.appendChild(inSpacer4);

	var inRow3 = document.createElement("tr");
	inRow3.style.height = '26px';
	inTable.appendChild(inRow3);
	var inCol7 = document.createElement("td");
	inCol7.style.width = '27px';
	inRow3.appendChild(inCol7);
	var inShadowImg7 = CreateWAttr('img', 'id', 'ShadowLCorner', 'src', zoomImageURI+'zoom-shadow6.' + imgExt);
	inCol7.appendChild(inShadowImg7);
	var inCol8 = CreateWAttr('td', 'background', zoomImageURI+'zoom-shadow7.' + imgExt);
	inRow3.appendChild(inCol8);
	var inSpacer5 = CreateWAttr('img', 'id', 'ShadowSide', 'src',zoomImageURI+'spacer.gif');
	inCol8.appendChild(inSpacer5);
	var inCol9 = document.createElement("td");
	inCol9.style.width = '27px';
	inRow3.appendChild(inCol9);
	var inShadowImg9 = CreateWAttr('img', 'id', 'ShadowLCorner', 'src', zoomImageURI+'zoom-shadow8.' + imgExt);
	inCol9.appendChild(inShadowImg9);
	
	// caption ==============================================================
	if (includeCaption == 1)
		{
    var inCapDiv = createDiv();
    inCapDiv.setAttribute('id', 'ZoomCapDiv');
    inShadowbox.appendChild(inCapDiv);
    
    var inCapTable = CreateWAttr('table', 'border', '0', 'cellpadding', '0', 'cellspacing', '0', 'align', 'center');
    inCapDiv.appendChild(inCapTable);
    
    var inCapRow1 = document.createElement("tr");
    inCapTable.appendChild(inCapRow1);
  
    var inCapCol1 = document.createElement("td");
    inCapRow1.appendChild(inCapCol1);
    var inCapImg1 = createImg();
    inCapImg1.setAttribute('id', 'ZoomCapEnd');
    inCapImg1.setAttribute('src', zoomImageURI+'zoom-caption-l.png');
    inCapCol1.appendChild(inCapImg1);
  
    var inCapCol2 = document.createElement("td");
    inCapCol2.setAttribute('id', 'ZoomCaption');
    inCapCol2.setAttribute('background', zoomImageURI+'zoom-caption-fill.png');
    inCapRow1.appendChild(inCapCol2);
  
    var inCapCol3 = document.createElement("td");
    inCapRow1.appendChild(inCapCol3);
    var inCapImg2 = createImg();
    inCapImg2.setAttribute('id', 'ZoomCapEnd');
    inCapImg2.setAttribute('src', zoomImageURI+'zoom-caption-r.png');
    inCapCol3.appendChild(inCapImg2);
		}
	}












//=========================================================================
//
//	Fade In/Out
//
//=========================================================================
var fadeActive = new Array();
var fadeQueue  = new Array();
var fadeTimer  = new Array();
var fadeClose  = new Array();


// Initialize the fade function
function fadeElementSetup(theID, fdStart, fdEnd, fdSteps, fdClose)
	{
	if (fadeActive[theID] == true)
		{
		// Already animating, queue up this command
		fadeQueue[theID] = new Array(theID, fdStart, fdEnd, fdSteps);
		}
	else
		{
		fadeSteps = fdSteps;
		fadeCurrent = 0;
		fadeAmount = (fdStart - fdEnd) / fadeSteps;
		fadeTimer[theID] = setInterval("fadeElement('"+theID+"', '"+fadeCurrent+"', '"+fadeAmount+"', '"+fadeSteps+"')", 40);
		fadeActive[theID] = true;
		if (fdClose == 1)
			{
			fadeClose[theID] = true;
			}
		else
			{
			fadeClose[theID] = false;
			}
		}
	}


// Do the fade. This function will call itself, modifying the parameters, so many instances can run concurrently.
function fadeElement(theID, fadeCurrent, fadeAmount, fadeSteps)
	{
	fadeCurrent++;
	
	// Set the opacity depending on if we're adding or subtracting (pos or neg)
	if (fadeAmount < 0)
		{
		setOpacity(Math.abs(fadeCurrent * fadeAmount), theID);
		}
	else
		{
		setOpacity(100 - (fadeCurrent * fadeAmount), theID);
		}
		
	if (fadeCurrent == fadeSteps)
		{
		// We're done, so clear.
		clearInterval(fadeTimer[theID]);
		fadeActive[theID] = false;

		// Should we close it?
		if (fadeClose[theID] == true)
			{
			document.getElementById(theID).style.visibility = "hidden";
			}

		// Hang on.. did a command queue while we were working? If so, make it happen now
		if (fadeQueue[theID] && fadeQueue[theID] != false)
			{
			fadeElementSetup(fadeQueue[theID][0], fadeQueue[theID][1], fadeQueue[theID][2], fadeQueue[theID][3]);
			fadeQueue[theID] = false;
			}
		}
	else
		{
		// Keep going, and send myself the updated variables
		clearInterval(fadeTimer[theID]);
		fadeTimer[theID] = setInterval("fadeElement('"+theID+"', '"+fadeCurrent+"', '"+fadeAmount+"', '"+fadeSteps+"')", 40);
		}
	}
















































/////////////////////////////////////////////////////////////////////////////////////////////////////////////////


var	currentTidbit = null;


function showTidbit(infohost, box, msg)
	{
	if (currentTidbit != infohost)
		{
		if (isIE())
			{
			msg = msg.replace(/ /g, "&nbsp");
			}
		
		currentTidbit = infohost;
		infobox = document.getElementById(box);
		cap = document.getElementById('TBCaption');
		
		infobox.style.display = 'block';
		cap.innerHTML = '<a href="javascript:hideBox(\'' + box + '\')">' + msg + '</a>';
		centerObject(infohost, box);
		
		setOpacity(0, box);
		infobox.style.visibility = "visible";
		fadeElementSetup(box, 0, 100, 5);
		}
	}


function showBox(openHere, box)
	{
	infohost = document.getElementById(openHere);
	infobox = document.getElementById(box);
	
	// Center the Element
	centerElement(openHere, box);
	
	setOpacity(0, box);
	infobox.style.visibility = "visible";
	fadeElementSetup(box, 0, 100, 5);
	}


function hideBox(box)
	{
	currentTidbit = null;
	infobox = document.getElementById(box);
	if (infobox.style.visibility != "hidden" || infobox.style.visibility != "")
		{
		fadeElementSetup(box, 100, 0, 5, 1);
		}
	}


function centerElement(referenceID, theID)
	{
	infohost = document.getElementById(referenceID);
	centerObject(infohost, theID);
	
	return;
	}


function centerObject(infohost, theID)
	{
	
	var infohostY = 0;
	var infohostX = 0;
	var count = 0;
	var infohostFind = infohost;
	
	
	infobox = document.getElementById(theID);
	while (infohostFind.offsetParent)
		{
		infohostY += infohostFind.offsetTop;
		infohostX += infohostFind.offsetLeft;
		
		infohostFind = infohostFind.offsetParent;
		}
	
	infobox.style.left = infohostX - ((infobox.offsetWidth - infohost.offsetWidth) / 2) + 'px';
	infobox.style.top = infohostY + (infohost.offsetHeight / 2) - 4 + 'px';
	
	return;
	}


function centerObjectOld(infohost, theID)
	{
	infobox = document.getElementById(theID);
	
	// Find the location of where we should position the pop-up box
	// "referenceID" is the document element near where the pop-up box should appear.
	// This is passed in as a variable (openHere) from the caller.
	var infohostY = 0;
	var infohostX = 0;
	var count = 0;
	var infohostFind = infohost;
	
	// Iterate through the target item's many potential parents to calculate position X and Y values
	do
		{
		infohostY += infohostFind.offsetTop;
		infohostX += infohostFind.offsetLeft;
//alert("y"+infohostY + " : x" + infohostX + "  /  t" + infohostFind.offsetTop + " l" + infohostFind.offsetLeft + " h" + infohostFind.offsetHeight);
		}
	while (infohostFind = infohostFind.offsetParent)
	
	// Now position the pop-up box, based on the parent element's location and height.
//alert(infohostX + " - " + infobox.offsetWidth + " - " + infohost.offsetWidth);
	infobox.style.left = infohostX - ((infobox.offsetWidth - infohost.offsetWidth) / 2) + 'px';
	infobox.style.top = infohostY + (infohost.offsetHeight / 2) - 4 + 'px';
//alert(infobox.style.left + " - " + infobox.style.top);
	
	return;
	}













function zoomLoad()
	{
	setupZoom();
	
	zoomdiv.style.left = '100px';
	zoomdiv.style.top = '100px';
	
	document.getElementById("ZoomSpin").style.visibility = "visible";
	document.getElementById("ZoomBox").style.visibility = "visible";
	document.getElementById("ZoomClose").style.visibility = "visible";
	document.getElementById("ShadowBox").style.visibility = "visible";
	document.getElementById("ZoomCapDiv").style.visibility = "visible";
	document.getElementById("ZoomCapEnd").style.visibility = "visible";
	document.getElementById("ZoomCaption").style.visibility = "visible";
	
	setOpacity(100, "ZoomSpin");
	setOpacity(100, "ZoomBox");
	setOpacity(100, "ZoomClose");
	setOpacity(100, "ShadowBox");
	setOpacity(100, "ZoomCapDiv");
	setOpacity(100, "ZoomCapEnd");
	setOpacity(100, "ZoomCaption");
	
	shadowdiv = document.getElementById("ShadowBox");
	shadowdiv.style.width = '100px';
	shadowdiv.style.height = '200px';
	shadowdiv.style.left = '75px';
	shadowdiv.style.top = '150px';
	}


function showZoomStuff()
	{
	document.getElementById("ZoomBox").style.visibility = "visible";
	document.getElementById("ShadowBox").style.visibility = "visible";
	
	setOpacity(100, "ZoomBox");
	setOpacity(100, "ShadowBox");
	}