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

    }

}