// 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 inImage2 = document.createElement("img");
    inImage2.onclick = function(event) { zoomOut(this, event); return false; };
    inImage2.setAttribute('src', zoomImagesURI + 'closebox.png');
    inImage2.setAttribute('width', '30');
    inImage2.setAttribute('height', '30');
    inImage2.setAttribute('border', '0');
    inImage2.style.cursor = 'pointer';
    inClosebox.appendChild(inImage2);

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