// FancyZoomHTML.js - v1.0
// Used to draw necessary HTML elements for FancyZoom
//
// Copyright (c) 2008 Cabel Sasser / Panic Inc
// All rights reserved.

function insertZoomHTML() {
  // All of this junk creates the three <div>'s used to hold the closebox, image, and zoom shadow.

  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 = "525";
  inBody.insertBefore(inSpinbox, inBody.firstChild);

  var inSpinImage = document.createElement("img");
  inSpinImage.setAttribute("id", "SpinImage");
  inSpinImage.setAttribute("src", zoomImagesURI + "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";

  inBody.insertBefore(inZoombox, inSpinbox.nextSibling);

  var inImage1 = document.createElement("img");
  inImage1.onclick = function (event) {
    zoomOut(this, event);
    return false;
  };
  inImage1.setAttribute("src", zoomImagesURI + "spacer.gif");
  inImage1.setAttribute("id", "ZoomImage");
  inImage1.setAttribute("border", "0");
  // inImage1.setAttribute('onMouseOver', 'zoomMouseOver();')
  // inImage1.setAttribute('onMouseOut', 'zoomMouseOut();')

  // This must be set first, so we can later test it using webkitBoxShadow.
  inImage1.setAttribute(
    "style",
    "-webkit-box-shadow: " + shadowSettings + "0.0)",
  );
  inImage1.style.display = "block";
  inImage1.style.width = "10px";
  inImage1.style.height = "10px";
  inImage1.style.cursor = "pointer"; // -webkit-zoom-out?
  inZoombox.appendChild(inImage1);

  var inClosebox = document.createElement("div");
  inClosebox.setAttribute("id", "ZoomClose");
  inClosebox.style.position = "absolute";

  // In MSIE, we need to put the close box inside the image.
  // It's 2008 and I'm having to do a browser detect? Sigh.
  if (browserIsIE) {
    inClosebox.style.left = "-1px";
    inClosebox.style.top = "0px";
  } else {
    inClosebox.style.left = "-15px";
    inClosebox.style.top = "-15px";
  }

  inClosebox.style.visibility = "hidden";
  inZoombox.appendChild(inClosebox);

  var inCloseBtn = document.createElement("span");
  inCloseBtn.onclick = function (event) {
    zoomOut(this, event);
    return false;
  };
  inCloseBtn.innerHTML = "&times;";
  inCloseBtn.style.display = "block";
  inCloseBtn.style.width = "30px";
  inCloseBtn.style.height = "30px";
  inCloseBtn.style.lineHeight = "30px";
  inCloseBtn.style.textAlign = "center";
  inCloseBtn.style.fontSize = "20px";
  inCloseBtn.style.fontWeight = "bold";
  inCloseBtn.style.color = "#ffffff";
  inCloseBtn.style.backgroundColor = "#000000";
  inCloseBtn.style.borderRadius = "50%";
  inCloseBtn.style.cursor = "pointer";
  inCloseBtn.style.userSelect = "none";
  inClosebox.appendChild(inCloseBtn);

  // SHADOW
  // Only draw the table-based shadow if the programatic webkitBoxShadow fails!
  // Also, don't draw it if we're IE -- it wouldn't look quite right anyway.

  if (
    !document.getElementById("ZoomImage").style.webkitBoxShadow &&
    !browserIsIE
  ) {
    // SHADOW BASE

    var inFixedBox = document.createElement("div");
    inFixedBox.setAttribute("id", "ShadowBox");
    inFixedBox.style.position = "absolute";
    inFixedBox.style.left = "50px";
    inFixedBox.style.top = "50px";
    inFixedBox.style.width = "100px";
    inFixedBox.style.height = "100px";
    inFixedBox.style.visibility = "hidden";
    inFixedBox.style.zIndex = "498";
    inBody.insertBefore(inFixedBox, inZoombox.nextSibling);

    // SHADOW
    // Now, the shadow table. Skip if not compatible, or irrevelant with -box-shadow.

    // <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 inShadowTable = document.createElement("table");
    inShadowTable.setAttribute("border", "0");
    inShadowTable.setAttribute("width", "100%");
    inShadowTable.setAttribute("height", "100%");
    inShadowTable.setAttribute("cellpadding", "0");
    inShadowTable.setAttribute("cellspacing", "0");
    inFixedBox.appendChild(inShadowTable);

    var inShadowTbody = document.createElement("tbody"); // Needed for IE (for HTML4).
    inShadowTable.appendChild(inShadowTbody);

    var inRow1 = document.createElement("tr");
    inRow1.style.height = "25px";
    inShadowTbody.appendChild(inRow1);

    var inCol1 = document.createElement("td");
    inCol1.style.width = "27px";
    inRow1.appendChild(inCol1);
    var inShadowImg1 = document.createElement("img");
    inShadowImg1.setAttribute("src", zoomImagesURI + "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", zoomImagesURI + "zoom-shadow2.png");
    inRow1.appendChild(inCol2);
    // inCol2.innerHTML = '<img src=';
    var inSpacer1 = document.createElement("img");
    inSpacer1.setAttribute("src", zoomImagesURI + "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", zoomImagesURI + "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");
    inShadowTbody.appendChild(inRow2);

    var inCol4 = document.createElement("td");
    inCol4.setAttribute("background", zoomImagesURI + "zoom-shadow4.png");
    inRow2.appendChild(inCol4);
    // inCol4.innerHTML = '&nbsp;';
    var inSpacer2 = document.createElement("img");
    inSpacer2.setAttribute("src", zoomImagesURI + "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", zoomImagesURI + "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", zoomImagesURI + "zoom-shadow5.png");
    inRow2.appendChild(inCol6);
    // inCol6.innerHTML = '&nbsp;';
    var inSpacer4 = document.createElement("img");
    inSpacer4.setAttribute("src", zoomImagesURI + "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";
    inShadowTbody.appendChild(inRow3);

    var inCol7 = document.createElement("td");
    inCol7.style.width = "27px";
    inRow3.appendChild(inCol7);
    var inShadowImg7 = document.createElement("img");
    inShadowImg7.setAttribute("src", zoomImagesURI + "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", zoomImagesURI + "zoom-shadow7.png");
    inRow3.appendChild(inCol8);
    // inCol8.innerHTML = '&nbsp;';
    var inSpacer5 = document.createElement("img");
    inSpacer5.setAttribute("src", zoomImagesURI + "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", zoomImagesURI + "zoom-shadow8.png");
    inShadowImg9.setAttribute("width", "27");
    inShadowImg9.setAttribute("height", "26");
    inShadowImg9.style.display = "block";
    inCol9.appendChild(inShadowImg9);
  }

  if (includeCaption) {
    // CAPTION
    //
    // <div id="ZoomCapDiv" style="margin-left: 13px; margin-right: 13px;">
    // <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>
    // </div>

    var inCapDiv = document.createElement("div");
    inCapDiv.setAttribute("id", "ZoomCapDiv");
    inCapDiv.style.position = "absolute";
    inCapDiv.style.visibility = "hidden";
    inCapDiv.style.marginLeft = "auto";
    inCapDiv.style.marginRight = "auto";
    inCapDiv.style.zIndex = "501";

    inBody.insertBefore(inCapDiv, inZoombox.nextSibling);

    var inCapTable = document.createElement("table");
    inCapTable.setAttribute("border", "0");
    inCapTable.setAttribute("cellPadding", "0"); // Wow. These honestly need to
    inCapTable.setAttribute("cellSpacing", "0"); // be intercapped to work in IE. WTF?
    inCapDiv.appendChild(inCapTable);

    var inTbody = document.createElement("tbody"); // Needed for IE (for HTML4).
    inCapTable.appendChild(inTbody);

    var inCapRow1 = document.createElement("tr");
    inTbody.appendChild(inCapRow1);

    var inCapCol1 = document.createElement("td");
    inCapCol1.setAttribute("align", "right");
    inCapRow1.appendChild(inCapCol1);
    var inCapImg1 = document.createElement("img");
    inCapImg1.setAttribute("src", zoomImagesURI + "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",
      zoomImagesURI + "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", zoomImagesURI + "zoom-caption-r.png");
    inCapImg2.setAttribute("width", "13");
    inCapImg2.setAttribute("height", "26");
    inCapImg2.style.display = "block";
    inCapCol3.appendChild(inCapImg2);
  }
}