// jason_effects.js
//
// This is a modification of effects.js, used with permission from Cabel Sasser.
// His copyright applies and is reproduced below.
//
// 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.10- JSH - fixed aspect ratio resizing when image is larger than viewport.
// 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 zoomTime       = 5;
var zoomSteps      = 7;
var zoomImageURI   = '/images/zoom/';
var galleryImageURI   = '/images/gallery/';

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

var myWidth = 0, myHeight = 0, myScroll = 0, zoomOpen = false

var zoomActive = new Array();
var zoomTimer  = new Array();
var overlays   = new Object();

var theOverlay= "Overlay";
var theClose  = "OverlayClose";

// Setup The Page! Called onLoad();

function setupZoom(overlayDict) {
  if (! document.getElementsByTagName) {
    return;
  }
  insertZoomHTML();
  overlays = overlayDict;  
  preloadOverlayImages();
//  document.onmousedown = zoomOut;
}

// Preload the images used in our overlays now

function preloadOverlayImages() {
  
  i = 0;
  preloadImg = new Array();
  for (key in overlays) {
    imgSrc = overlays[key]['image'];
    preloadImg[i] = new Image();
    preloadImg[i].src = imgSrc;
    ++i;
  }
}

// Show the div with the given id

function zoomClick(theID) {


  // Get browser dimensions
  
  getSize();

  // Don't act if we're already doing something.
  
  if (zoomActive[theOverlay] != true) {
  
     // Get the correct div, and its dimensions
     
     zoomdiv = document.getElementById(theOverlay);
     endW = zoomdiv.offsetWidth;
     endH = zoomdiv.offsetHeight;

     // Clear everything out just in case something is already open
     
     document.getElementById(theOverlay).style.visibility = "hidden";     
     document.getElementById(theClose).style.visibility = "hidden";     
     
     // Position the overlay
     
     zoomdiv.style.left = (myWidth - endW) / 2 + 'px';
     zoomdiv.style.top = (myHeight/5 - endH/2 + myScroll) + 'px';

     // Fill in the info
     
     entry = overlays[theID];
     
     link = document.getElementById('OverlayLink1');
     link.setAttribute('href', entry['link']);
     link.setAttribute('title', entry['tooltip']);
     link.innerHTML = entry['title'];
     
     link = document.getElementById('OverlayLink2');
     link.setAttribute('href', entry['link']);
     link.setAttribute('title', entry['tooltip']);
     
     link = document.getElementById('OverlayLink3');
     link.setAttribute('href', entry['link']);
     link.setAttribute('title', entry['tooltip']);
     link.innerHTML = entry['continue'];
     
     link = document.getElementById('OverlayPicture');
     link.setAttribute('src', entry['image']);
     
     link = document.getElementById('OverlayDescription');
     link.innerHTML = entry['description'];
     
     // Show the zoom box, make it invisible
     
     setOpacity(0, theOverlay);
     zoomdiv.style.visibility = "visible";
  
     // Setup Fade
     
     zoomCurrent = 0;
     fadeCurrent = 0;
     fadeAmount = (0 - 100) / zoomSteps;
     
     // Do It!
     zoomTimer[theOverlay] = setInterval("zoomElement("+zoomCurrent+", "+endH+", "+endW+", "+zoomSteps+", "+fadeAmount+", 'zoomDoneIn()')", zoomTime);
     zoomActive[theOverlay] = true; 
  }
}

// Zoom it back out.

function zoomOut() {

  // Check to see if something is happening/open
  
  if (zoomActive[theOverlay] != undefined && zoomActive[theOverlay] != true && zoomOpen) {

     // First, get rid of the close box if necessary
     
     document.getElementById(theClose).style.visibility = "hidden";
     
     // Setup Zoom
     
     // Setup Fade
     
     zoomCurrent = 0;
     fadeCurrent = 0;
     fadeAmount = (100 - 0) / zoomSteps;
     
     // Do It!
     
     zoomTimer[theOverlay] = setInterval("zoomElement("+zoomCurrent+", "+endH+", "+endW+", "+zoomSteps+", "+fadeAmount+", 'zoomDone()')", zoomTime);
     zoomActive[theOverlay] = true;
   }
}

// Finished Zooming In

function zoomDoneIn() {

  // Note that it's open
  
  zoomOpen = true;

  // Make sure they are gone

  setOpacity(0, theClose);

  // Display Shadow and Zoom
  
  document.getElementById(theClose).style.visibility = "visible";
  fadeElementSetup(theClose, 0, 100, 5);
  
}

// Finished Zooming Out

function zoomDone() {


  // No longer open
  
  zoomOpen = false;

  // Clear stuff out, clean up

  document.getElementById(theOverlay).style.visibility = "hidden";
  zoomActive[theOverlay] = false;
}

function zoomElement(zoomCurrent, zoomEndH, zoomEndW, zoomSteps, fadeAmount, execWhenDone) {
  zoomCurrent++;
    
  // Do the Fade!
  
  if (fadeAmount < 0) {
    setOpacity(Math.abs(zoomCurrent * fadeAmount), theOverlay);
  } else {
    setOpacity(100 - (zoomCurrent * fadeAmount), theOverlay);
  }
  
  // Test if we're done, or if we continue
  
  if (zoomCurrent == zoomSteps) {
    zoomActive[theOverlay] = false;
    clearInterval(zoomTimer[theOverlay]);

    if (execWhenDone != "") {
      eval(execWhenDone);
    }
  } else {
    clearInterval(zoomTimer[theOverlay]);
    zoomTimer[theOverlay] = setInterval("zoomElement("+zoomCurrent+", "+zoomEndH+", "+zoomEndW+", "+zoomSteps+", "+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 <div>'s used to hold the overlays

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

  // OVERLAY
  // Now, the.. shudder.. overlay table.
  
  // <div id="overlay"><table border="0" width="100%" height="100%" cellpadding="0" cellspacing="0"> X
  //   <tr height="33">
  //   <td width="31"><img src="/images/overlay1.png" width="31" height="33"></td>
  //   <td background="/images/overlay2.png">&nbsp;</td>
  //   <td width="31"><img src="/images/overlay3.png" width="31" height="33"></td>
  //   </tr>

  var inOverlay = document.createElement("div");
  inOverlay.setAttribute('id', 'Overlay');
  inOverlay.style.position = 'absolute'; 
  inOverlay.style.left = '50px';
  inOverlay.style.top = '50px';
  inOverlay.style.width = '600px';
  inOverlay.style.height = '100px';
  inOverlay.style.visibility = 'hidden';
  inOverlay.style.zIndex = '45';
  inBody.insertBefore(inOverlay, inBody.firstChild);
 
  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');
  inTable.setAttribute('class', 'galleryOverlay');
  inOverlay.appendChild(inTable);
  
  var inRow1 = document.createElement("tr");
  inRow1.style.height = '33px';
  inTable.appendChild(inRow1);
  
  var inCol1 = document.createElement("td");
  inCol1.style.width = '31px';
  inRow1.appendChild(inCol1);  
  var inOverlayImg1 = document.createElement("img");
  inOverlayImg1.setAttribute('src', galleryImageURI+'overlay1.png');
  inOverlayImg1.setAttribute('width', '31');
  inOverlayImg1.setAttribute('height', '33');
  inOverlayImg1.style.display = 'block';
  inCol1.appendChild(inOverlayImg1);

  var inCol2 = document.createElement("td");
  inCol2.setAttribute('background', galleryImageURI+'overlay2.png');
  inRow1.appendChild(inCol2);
  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 = '31px';
  inRow1.appendChild(inCol3);  
  var inOverlayImg3 = document.createElement("img");
  inOverlayImg3.setAttribute('src', galleryImageURI+'overlay3.png');
  inOverlayImg3.setAttribute('width', '31');
  inOverlayImg3.setAttribute('height', '33');
  inOverlayImg3.style.display = 'block';
  inCol3.appendChild(inOverlayImg3);

  //   <tr>
  //   <td background="/images/overlay4.png">&nbsp;</td>
  //   <td bgcolor="#ffffff">&nbsp;</td>
  //   <td background="/images/overlay5.png">&nbsp;</td>
  //   </tr>

  inRow2 = document.createElement("tr");
  inTable.appendChild(inRow2);
  
  var inCol4 = document.createElement("td");
  inCol4.setAttribute('background', galleryImageURI+'overlay4.png');
  inRow2.appendChild(inCol4);
  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('background', galleryImageURI+'overlay5.png');
  inRow2.appendChild(inCol5);
  
  var inCol6 = document.createElement("td");
  inCol6.setAttribute('background', galleryImageURI+'overlay6.png');
  inRow2.appendChild(inCol6);
  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="33">
  //   <td width="31"><img src="/images/overlay7.png" width="31" height="33"</td>
  //   <td background="/images/overlay8.png">&nbsp;</td>
  //   <td width="31"><img src="/images/overlay9.png" width="31" height="33"></td>
  //   </tr>  
  // </table>

  var inRow3 = document.createElement("tr");
  inRow3.style.height = '33px';
  inTable.appendChild(inRow3);
  
  var inCol7 = document.createElement("td");
  inCol7.style.width = '31px';
  inRow3.appendChild(inCol7);
  var inOverlayImg7 = document.createElement("img");
  inOverlayImg7.setAttribute('src', galleryImageURI+'overlay7.png');
  inOverlayImg7.setAttribute('width', '31');
  inOverlayImg7.setAttribute('height', '33');
  inOverlayImg7.style.display = 'block';
  inCol7.appendChild(inOverlayImg7);

  var inCol8 = document.createElement("td");
  inCol8.setAttribute('background', galleryImageURI+'overlay8.png');
  inRow3.appendChild(inCol8);  
  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 = '31px';
  inRow3.appendChild(inCol9);  
  var inOverlayImg9 = document.createElement("img");
  inOverlayImg9.setAttribute('src', galleryImageURI+'overlay9.png');
  inOverlayImg9.setAttribute('width', '31');
  inOverlayImg9.setAttribute('height', '33');
  inOverlayImg9.style.display = 'block';
  inCol9.appendChild(inOverlayImg9);
  
  // overlayContent
  //
  
  // <h1><a href="[galleryURI]" title="[tooltip]">[title]</a></h1>
  // <div class="framedPicture">
  //   <img src="[imageURI]" class="picture" />
  //   <a href="[galleryURI]" title="[tooltip]">
  //     <img src="/images/gallery/pictureFrame.png" class="frame" width="299" height="207" />
  //   </a>
  // </div>
  // <p>[description]</p>
  // <div class="continue"><a href="[galleryURI]" title="[tooltip]">[continue]</a></div>

  var inH1 = document.createElement("h1");
  inCol5.appendChild(inH1);
  var inLink1 = document.createElement("a");
  inLink1.setAttribute('id', 'OverlayLink1');
  inLink1.setAttribute('href', 'http://localhost:3000/gallery2/');
  inLink1.setAttribute('title', 'Proceed to the Photo Album');
  inLink1.innerHTML = 'An Exciting Photo Album';
  inH1.appendChild(inLink1);
  
  var inFramedPic = document.createElement("div");
  inFramedPic.setAttribute('class', 'framedPicture');
  inCol5.appendChild(inFramedPic);
  
  var inPic = document.createElement("img");
  inPic.setAttribute('id', 'OverlayPicture');
  inPic.setAttribute('class', 'picture');
  inPic.setAttribute('width', '280');
  inPic.setAttribute('height', '186');
  inFramedPic.appendChild(inPic);

  var inLink2 = document.createElement("a");
  inLink2.setAttribute('id', 'OverlayLink2');
  inLink2.setAttribute('href', 'http://localhost:3000/gallery2/');
  inLink2.setAttribute('title', 'Proceed to the Photo Album');
  inFramedPic.appendChild(inLink2);

  var inFrame = document.createElement("img");
  inFrame.setAttribute('src', '/images/gallery/pictureFrame.png');
  inFrame.setAttribute('class', 'frame');
  inFrame.setAttribute('width', '299');
  inFrame.setAttribute('height', '207');
  inFrame.setAttribute('border', '0');
  inLink2.appendChild(inFrame);

  var inPar = document.createElement("p");
  inPar.setAttribute('id', 'OverlayDescription');
  inPar.innerHTML = 'An exciting description';
  inCol5.appendChild(inPar);

  var inContinue = document.createElement("div");
  inContinue.setAttribute('class', 'continue');
  inCol5.appendChild(inContinue);

  var inClickInstruction = document.createElement("div");
  inClickInstruction.setAttribute('class', 'clickInstruction');
  inClickInstruction.innerHTML = "or click the appropriate spot on the map";
  inCol5.appendChild(inClickInstruction);

  var inLink3 = document.createElement("a");
  inLink3.setAttribute('id', 'OverlayLink3');
  inLink3.setAttribute('href', 'http://localhost:3000/gallery2/');
  inLink3.setAttribute('title', 'Proceed to the Photo Album');
  inLink3.innerHTML = 'Continue on to the Photo Album';
  inContinue.appendChild(inLink3);

  // CLOSE IMAGE
  //
  // <div id="ZoomClose">
  //   <a href="javascript:zoomOut();"><img src="/images/closebox.png" width="30" height="30" border="0"></a>
  // </div>

  var inClosebox = document.createElement("div");
  inClosebox.setAttribute('id', 'OverlayClose');
  inClosebox.style.position = 'absolute';
  inClosebox.style.left = '-10px';
  inClosebox.style.top = '-10px';
  inClosebox.style.filter = 'alpha(opacity=0)';
  inClosebox.style.MozOpacity = '0';
  inClosebox.style.opacity = '0';
  inClosebox.style.visibility = 'hidden';
  inOverlay.appendChild(inClosebox);
  
  var inLink4 = document.createElement("a");
  inLink4.setAttribute('href','javascript:zoomOut(1);');
  inClosebox.appendChild(inLink4);
  var inImage2 = document.createElement("img");
  inImage2.setAttribute('src',zoomImageURI+'closebox.png');
  inImage2.setAttribute('width','30');
  inImage2.setAttribute('height','30');
  inImage2.setAttribute('border','0');
  inLink4.appendChild(inImage2);
}