// effects.js
//
// Zooming and Fading, two effects used on various Panic pages.
// (C) 2006 Panic Inc / Cabel Sasser
//
// THIS CODE IS STILL UNDER ACTIVE DEVELOPMENT. IT IS NOT FINAL.
// And, it may absolutely not be used without express written permission from Panic.
// In short, a cleaned up / public release is planned for the future. Please keep an eye on www.cabel.name.

////////////////////////////
//
// ZOOM IMAGE functions
// (C) 2006 Cabel Sasser
//
// v1.9.9 - Adding rollover capability
//          Added caption capability.
//          Added "loading" animation if user clicks before image is loaded, and loading takes
//          more than one second.
// v1.3.2 - Added 'px' to a few style settings for "strict" mode
//          Also added style.display = 'block'; to zoom/shadow images for "strict" mode
// v1.3.1 - Replaced   for Firefox fix with... invisible .gif's. The other option
//          was to use really small &nbsp's, which seemed even hackier.
// v1.3   - Fixed interesting Firefox bug in shadow layer
//          Specifically set finishing size when done to account for potential rounding issues
// v1.2   - HTML parts now inserted dynamically using Javascript insertZoomHTML();
// v1.1   - Image won't zoom bigger than the browser window
//          onClick event is injected during onLoad() so no inline javascript
//          Image pre-loading is now done in an Image() object for no "surprises"

// Settings

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

var debugShadow    = 0;

// Init. Do not add anything below this line, unless it's something awesome.

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";

// Setup The Page! Called onLoad();

function setupZoom() {
  prepZooms();
  insertZoomHTML();
  zoomdiv = document.getElementById(zoomID);  
  zoomimg = document.getElementById(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);
  }
} 

// After one second, display and ANIMATE the jibber jabber widget

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) {

  // Get the settings from the "rel" tag in the zoom href
  //
  // rel format: rel="zoom:width,height,source,[rollover img]"
  //
  // Example: <a href="test.jpg" rel="zoom:500,450,image1-id">
  
  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!"); }
  
  // Setup all zoom arguments, including rollover, image, etc.
  
  if (tempArgs[3] == undefined || tempArgs[3] == 0 || tempArgs[3] == 1) { // 0 and 1 check to not break code from when arg3 was "fade" argument. Remove eventually
    rollOverImg = "";
  }
  else { rollOverImg = tempArgs[3]; }
  
  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 = from.getAttribute('title');
       } 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) * ((0.9 - 1) / (Math.pow(0.9, zoomSteps) - 1));
     // zoomAmountH = (endH - startH) * ((0.9 - 1) / (Math.pow(0.9, zoomSteps) - 1));
  
     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;
     
     // alert(zoomAmountX + " and " + zoomAmountY);
     
     // 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) * ((0.9 - 1) / (Math.pow(0.9, zoomSteps) - 1));
     // zoomAmountH = (endH - startH) * ((0.9 - 1) / (Math.pow(0.9, zoomSteps) - 1));
     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;

  if (debugShadow == 1) {
    // alert("Here");              // DEBUG SHADOW
    setOpacity(0, "ZoomImage");    // DEBUG SHADOW
  }

  // 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';
  
  // 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++;
  
  // window.status = "Zooming Step #"+zoomCurrent+ " (zoom by " + zoomAmountH + "/" + zoomAmountW + ") (zoom to " + zoomAmountX + "/" + zoomAmountY + ") Fade: "+fadeAmount;
  
  // Do the Fade!
  
  if (fade != 0) {
    if (fadeAmount < 0) {
      setOpacity(Math.abs(zoomCurrent * fadeAmount), zoomdiv);
    } else {
      setOpacity(100 - (zoomCurrent * fadeAmount), zoomdiv);
    }
  }
  
  // Do the Zoom
  
  // Used for ease in / out. Check with Dave about inaccurate finishing amounts
  // zoomAmountH = zoomAmountH * 0.9;
  // zoomAmountW = zoomAmountW * 0.9;

  // alert(zoomimg.width+" and "+zoomimg.height+ " ("+zoomimg.width+" + "+zoomAmountW+") ("+zoomimg.height+" + "+zoomAmountH+")");

  // 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]);

    // It's possible our finishing position isn't perfect. Set it exactly here.
    // In version 2, don't pre-calculate movements.
    zoomimg.width = zoomEndW;
    zoomimg.height = zoomEndH;
    
    // alert(zoomEndW + " and " + zoomimg.width);
    // alert(zoomEndH + " and " + zoomimg.height);

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

////////////////////////////
//
// FADE DIV functions (2.0)
// (C) 2005 Cabel Sasser
//
// Pass fadeElementSetup the following arguments:
// theID = DIV ID that you want to fade
// fdStart = Starting opacity (0 - 100)
// fdEnd = Ending opacity (0 - 100)
// fdSteps = Number of steps to fade
// fdClose = 1 or 0. Should the DIV be set to 'hidden' after fading?

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

// 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; } // This is majorly retarded
  }

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

//
// ----- DISPLAY CODE -----
//

function insertZoomHTML() {

  // All of this junk creates the three <div>'s used to hold the closebox, image, and zoom shadow.
  // It's a lot of Javascript for a little HTML. But, hey, this must be the "right way", though, yeah?
  // I'd also like to ask forgiveness for the large amounts of tables in use. Sometimes, CSS just doesn't cut it... I think.

  var inBody = document.getElementsByTagName("body").item(0);

  // WAIT SPINNER
  
  var inSpinbox = document.createElement("div");
  inSpinbox.setAttribute('id', 'ZoomSpin');
  inSpinbox.style.position = 'absolute';
  inSpinbox.style.left = '10px';
  inSpinbox.style.top = '10px';
  inSpinbox.style.visibility = 'hidden';
  inSpinbox.style.zIndex = '500';
  inBody.insertBefore(inSpinbox, inBody.firstChild);
  
  var inSpinImage = document.createElement("img");
  inSpinImage.setAttribute('id', 'SpinImage');
  inSpinImage.setAttribute('src', zoomImageURI+'zoom-spin-1.png');
  inSpinbox.appendChild(inSpinImage);

  // ZOOM IMAGE
  //
  // <div id="ZoomBox">
  //   <a href="javascript:zoomOut();"><img src="/images/spacer.gif" id="ZoomImage" border="0"></a> <!-- THE IMAGE -->
  //   <div id="ZoomClose">
  //     <a href="javascript:zoomOut();"><img src="/images/closebox.png" width="30" height="30" border="0"></a>
  //   </div>
  // </div>

  var inZoombox = document.createElement("div");
  inZoombox.setAttribute('id', 'ZoomBox');
  inZoombox.style.position = 'absolute'; 
  inZoombox.style.left = '10px';
  inZoombox.style.top = '10px';
  inZoombox.style.visibility = 'hidden';
  inZoombox.style.zIndex = '499';
  // inZoombox.style.background = 'white';           // DEBUG
  inBody.insertBefore(inZoombox, inSpinbox.nextSibling);

  var inLink1 = document.createElement("a");
  inLink1.setAttribute('href','javascript:zoomOut();');
  inZoombox.appendChild(inLink1);
  
  var inImage1 = document.createElement("img");
  inImage1.setAttribute('src',zoomImageURI+'spacer.gif');
  inImage1.setAttribute('id','ZoomImage');
  inImage1.setAttribute('border', '0');
  inImage1.setAttribute('onMouseOver', 'zoomMouseOver();')
  inImage1.setAttribute('onMouseOut', 'zoomMouseOut();')
  inImage1.style.display = 'block';
  inImage1.style.width = '10px';
  inImage1.style.height = '10px';
  inLink1.appendChild(inImage1);

  var inClosebox = document.createElement("div");
  inClosebox.setAttribute('id', 'ZoomClose');
  inClosebox.style.position = 'absolute';
  inClosebox.style.left = '-15px';
  inClosebox.style.top = '-15px';
  inClosebox.style.filter = 'alpha(opacity=0)';
  inClosebox.style.MozOpacity = '0';
  inClosebox.style.opacity = '0';
  inClosebox.style.visibility = 'hidden';
  inZoombox.appendChild(inClosebox);
  
  var inLink2 = document.createElement("a");
  inLink2.setAttribute('href','javascript:zoomOut(1);');
  inClosebox.appendChild(inLink2);
  var inImage2 = document.createElement("img");
  inImage2.setAttribute('src',zoomImageURI+'closebox.gif');
  inImage2.setAttribute('width','30');
  inImage2.setAttribute('height','30');
  inImage2.setAttribute('border','0');
  inLink2.appendChild(inImage2);
  
  // SHADOW
  // Now, the.. shudder.. shadow table.
  
  // <div id="ShadowBox"><table border="0" width="100%" height="100%" cellpadding="0" cellspacing="0"> X
  //   <tr height="25">
  //   <td width="27"><img src="/images/zoom-shadow1.png" width="27" height="25"></td>
  //   <td background="/images/zoom-shadow2.png">&nbsp;</td>
  //   <td width="27"><img src="/images/zoom-shadow3.png" width="27" height="25"></td>
  //   </tr>

  var inShadowbox = document.createElement("div");
  inShadowbox.setAttribute('id', 'ShadowBox');
  inShadowbox.style.position = 'absolute'; 
  inShadowbox.style.left = '50px';
  inShadowbox.style.top = '50px';
  inShadowbox.style.width = '100px';
  inShadowbox.style.height = '100px';
  inShadowbox.style.visibility = 'hidden';
  inShadowbox.style.zIndex = '45';
  inBody.insertBefore(inShadowbox, inZoombox.nextSibling);
 
  var inTable = document.createElement("table");
  if (debugShadow == 1) {
    inTable.setAttribute('border', '2');
  } else {
    inTable.setAttribute('border', '0');
  }
  inTable.setAttribute('width', '100%');
  inTable.setAttribute('height', '100%');
  inTable.setAttribute('cellpadding', '0');
  inTable.setAttribute('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 = document.createElement("img");
//  inShadowImg1.setAttribute('src', zoomImageURI+'zoom-shadow1.png');
//  inShadowImg1.setAttribute('width', '27');
//  inShadowImg1.setAttribute('height', '25');
//  inShadowImg1.style.display = 'block';
//  inCol1.appendChild(inShadowImg1);
//
//  var inCol2 = document.createElement("td");
//  inCol2.setAttribute('background', zoomImageURI+'zoom-shadow2.png');
//  inRow1.appendChild(inCol2);
//  // inCol2.innerHTML = '<img src=';
//  var inSpacer1 = document.createElement("img");
//  inSpacer1.setAttribute('src',zoomImageURI+'spacer.gif');
//  inSpacer1.setAttribute('height', '1');
//  inSpacer1.setAttribute('width', '1');
//  inSpacer1.style.display = 'block';
//  inCol2.appendChild(inSpacer1);
//
//  var inCol3 = document.createElement("td");
//  inCol3.style.width = '27px';
//  inRow1.appendChild(inCol3);  
//  var inShadowImg3 = document.createElement("img");
//  inShadowImg3.setAttribute('src', zoomImageURI+'zoom-shadow3.png');
//  inShadowImg3.setAttribute('width', '27');
//  inShadowImg3.setAttribute('height', '25');
//  inShadowImg3.style.display = 'block';
//  inCol3.appendChild(inShadowImg3);

  //   <tr>
  //   <td background="/images/zoom-shadow4.png">&nbsp;</td>
  //   <td bgcolor="#ffffff">&nbsp;</td>
  //   <td background="/images/zoom-shadow5.png">&nbsp;</td>
  //   </tr>

  inRow2 = document.createElement("tr");
  inTable.appendChild(inRow2);
  
//  var inCol4 = document.createElement("td");
//  inCol4.setAttribute('background', zoomImageURI+'zoom-shadow4.png');
//  inRow2.appendChild(inCol4);
//  // inCol4.innerHTML = '&nbsp;';
//  var inSpacer2 = document.createElement("img");
//  inSpacer2.setAttribute('src',zoomImageURI+'spacer.gif');
//  inSpacer2.setAttribute('height', '1');
//  inSpacer2.setAttribute('width', '1');
//  inSpacer2.style.display = 'block';
//  inCol4.appendChild(inSpacer2);
  
 // var inCol5 = document.createElement("td");
//  inCol5.setAttribute('bgcolor', '#ffffff');
//  inRow2.appendChild(inCol5);
//  // inCol5.innerHTML = '&nbsp;';
//  var inSpacer3 = document.createElement("img");
//  inSpacer3.setAttribute('src',zoomImageURI+'spacer.gif');
//  inSpacer3.setAttribute('height', '1');
//  inSpacer3.setAttribute('width', '1');
//  inSpacer3.style.display = 'block';
//  inCol5.appendChild(inSpacer3);
//  
//  var inCol6 = document.createElement("td");
//  inCol6.setAttribute('background', zoomImageURI+'zoom-shadow5.png');
//  inRow2.appendChild(inCol6);
//  // inCol6.innerHTML = '&nbsp;';
//  var inSpacer4 = document.createElement("img");
//  inSpacer4.setAttribute('src',zoomImageURI+'spacer.gif');
//  inSpacer4.setAttribute('height', '1');
//  inSpacer4.setAttribute('width', '1');
//  inSpacer4.style.display = 'block';
//  inCol6.appendChild(inSpacer4);

  //   <tr height="26">
  //   <td width="27"><img src="/images/zoom-shadow6.png" width="27" height="26"</td>
  //   <td background="/images/zoom-shadow7.png">&nbsp;</td>
  //   <td width="27"><img src="/images/zoom-shadow8.png" width="27" height="26"></td>
  //   </tr>  
  // </table>

  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 = document.createElement("img");
//  inShadowImg7.setAttribute('src', zoomImageURI+'zoom-shadow6.png');
//  inShadowImg7.setAttribute('width', '27');
//  inShadowImg7.setAttribute('height', '26');
//  inShadowImg7.style.display = 'block';
//  inCol7.appendChild(inShadowImg7);

 // var inCol8 = document.createElement("td");
//  inCol8.setAttribute('background', zoomImageURI+'zoom-shadow7.png');
//  inRow3.appendChild(inCol8);  
//  // inCol8.innerHTML = '&nbsp;';
//  var inSpacer5 = document.createElement("img");
//  inSpacer5.setAttribute('src',zoomImageURI+'spacer.gif');
//  inSpacer5.setAttribute('height', '1');
//  inSpacer5.setAttribute('width', '1');
//  inSpacer5.style.display = 'block';
//  inCol8.appendChild(inSpacer5);
//
//  var inCol9 = document.createElement("td");
//  inCol9.style.width = '27px';
//  inRow3.appendChild(inCol9);  
//  var inShadowImg9 = document.createElement("img");
//  inShadowImg9.setAttribute('src', zoomImageURI+'zoom-shadow8.png');
//  inShadowImg9.setAttribute('width', '27');
//  inShadowImg9.setAttribute('height', '26');
//  inShadowImg9.style.display = 'block';
//  inCol9.appendChild(inShadowImg9);

  if (includeCaption == 1) {

    // CAPTION
    //
    // <table border="1" cellpadding="0" cellspacing="0">
    // <tr height="26">
    // <td><img src="zoom-caption-l.png" width="13" height="26"></td>
    // <td rowspan="3" background="zoom-caption-fill.png"><div id="ZoomCaption"></div></td>
    // <td><img src="zoom-caption-r.png" width="13" height="26"></td>
    // </tr>
    // </table>
    
    var inCapDiv = document.createElement("div");
    inCapDiv.setAttribute('id', 'ZoomCapDiv');
    inCapDiv.style.display = 'none';
    inCapDiv.style.marginLeft = '13px';
    inCapDiv.style.marginRight = '13px';
    inShadowbox.appendChild(inCapDiv);
    
    var inCapTable = document.createElement("table");
    inCapTable.setAttribute('border', '0');
    inCapTable.setAttribute('cellpadding', '0');
    inCapTable.setAttribute('cellspacing', '0');
    inCapTable.setAttribute('align', 'center');
    inCapDiv.appendChild(inCapTable);
    
    var inCapRow1 = document.createElement("tr");
    inCapTable.appendChild(inCapRow1);
  
    var inCapCol1 = document.createElement("td");
    inCapRow1.appendChild(inCapCol1);
    var inCapImg1 = document.createElement("img");
    inCapImg1.setAttribute('src', zoomImageURI+'zoom-caption-l.png');
    inCapImg1.setAttribute('width', '13');
    inCapImg1.setAttribute('height', '26');
    inCapImg1.style.display = 'block';
    inCapCol1.appendChild(inCapImg1);
  
    var inCapCol2 = document.createElement("td");
    inCapCol2.setAttribute('background', zoomImageURI+'zoom-caption-fill.png');
    inCapCol2.setAttribute('id', 'ZoomCaption');
    inCapCol2.setAttribute('valign', 'middle');
    
    inCapCol2.style.fontSize = '14px';
    inCapCol2.style.fontFamily = 'Helvetica';
    inCapCol2.style.fontWeight = 'bold';
    inCapCol2.style.color = '#ffffff';
    inCapCol2.style.textShadow = '0px 2px 4px #000000';
    inCapCol2.style.whiteSpace = 'nowrap';
    
    inCapRow1.appendChild(inCapCol2);
  
    var inCapCol3 = document.createElement("td");
    inCapRow1.appendChild(inCapCol3);
    var inCapImg2 = document.createElement("img");
    inCapImg2.setAttribute('src', zoomImageURI+'zoom-caption-r.png');
    inCapImg2.setAttribute('width', '13');
    inCapImg2.setAttribute('height', '26');
    inCapImg2.style.display = 'block';
    inCapCol3.appendChild(inCapImg2);

  }
}