//
// ----- 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 = '5000';
  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);
  
  // 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");
  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);  

 

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


  }
}