/*
  Lightbox JS: Fullsize Image Overlays
  by Lokesh Dhakar - http://www.huddletogether.com

  For more information on this script, visit:
  http://huddletogether.com/projects/lightbox/

  Licensed under the Creative Commons Attribution 2.5 License - http://creativecommons.org/licenses/by/2.5/
  (basically, do anything you want, just leave my name and link)

  Table of Contents
  -----------------
  Functions
  - getPageScroll()
  - getPageSize()
  - pause()
  - showLightbox()
  - hideLightbox()
  - initLightbox()
  - addLoadEvent()

  Function Calls
  - addLoadEvent(initLightbox)
*/

//
// getPageScroll()
// Returns array with x, y page scroll values.
// Core code from - quirksmode.org
//
function getPageScroll()
{
  var xScroll, yScroll;

  if (self.pageYOffset) { // all except Explorer
    xScroll = self.pageXOffset;
    yScroll = self.pageYOffset;
  } else if (document.documentElement && document.documentElement.scrollTop) { // Explorer 6 Strict
    xScroll = document.documentElement.scrollLeft;
    yScroll = document.documentElement.scrollTop;
  } else if (document.body) { // all other Explorers
    xScroll = document.body.scrollLeft;
    yScroll = document.body.scrollTop;
  }

  arrayPageScroll = new Array(xScroll, yScroll)
  return arrayPageScroll;
}

//
// getPageSize()
// Returns array with page width, height and window width, height
// Core code from - quirksmode.org
// Edit for Firefox by pHaez
//
function getPageSize()
{
  var pageWidth, pageHeight;
  if (window.innerHeight && window.scrollMaxX && window.scrollMaxY) {
    pageWidth = document.body.scrollWidth + window.scrollMaxX;
    pageHeight = window.innerHeight + window.scrollMaxY;
  } else if (document.body.scrollHeight >= document.body.offsetHeight) { // all but Explorer Mac
    pageWidth = document.body.scrollWidth;
    pageHeight = document.body.scrollHeight;
  } else { // Explorer Mac... would also work in Explorer 6 Strict, Mozilla and Safari
    pageWidth = document.body.offsetWidth;
    pageHeight = document.body.offsetHeight;
  }

  var windowWidth, windowHeight;
  if (self.innerHeight) { // all except Explorer
    windowWidth = document.body.clientWidth;
    windowHeight = self.innerHeight;
  } else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode
    windowWidth = document.documentElement.clientWidth;
    windowHeight = document.documentElement.clientHeight;
  } else if (document.body) { // other Explorers
    windowWidth = document.body.clientWidth;
    windowHeight = document.body.clientHeight;
  }

  // for small pages with total width less than width of the viewport
  if(pageWidth < windowWidth)
    pageWidth = windowWidth;

  // for small pages with total height less than height of the viewport
  if(pageHeight < windowHeight)
    pageHeight = windowHeight;

  arrayPageSize = new Array(pageWidth, pageHeight, windowWidth, windowHeight)
  return arrayPageSize;
}

//
// pause(numberMillis)
// Pauses code execution for specified time. Uses busy code, not good.
// Code from http://www.faqts.com/knowledge_base/view.phtml/aid/1602
//
function pause(numberMillis)
{
  var now = new Date();
  var exitTime = now.getTime() + numberMillis;
  while (true) {
    now = new Date();
    if (now.getTime() > exitTime)
      return;
  }
}

//
// showLightbox()
// Preloads images. Pleaces new image in lightbox then centers and displays.
//
function showLightbox(objLink)
{
  // prep objects
  var objOverlay = document.getElementById("overlay");
  var objLightbox = document.getElementById("lightbox");
  var objCaption = document.getElementById("lightboxCaption");
  var objImage = document.getElementById("lightboxImage");
  var objLoadingImage = document.getElementById("loadingImage");

  objLightbox.style.display = "none";

  // hide select boxes as they will "peek" through in IE
  selects = document.getElementsByTagName("select");
  for (i = 0; i != selects.length; i++)
    selects[i].style.visibility = "hidden";

  var arrayPageSize = getPageSize();
  var arrayPageScroll = getPageScroll();

  // center loadingImage
  objLoadingImage.style.left = arrayPageScroll[0] + (arrayPageSize[2] - 80) / 2 + "px";
  objLoadingImage.style.top = arrayPageScroll[1] + (arrayPageSize[3] - 80) / 2 + "px";
  objLoadingImage.style.display = "block";

  // set height of Overlay to take up whole page and show
  objOverlay.style.width = "100%";
  objOverlay.style.height = arrayPageSize[1] + "px";
  objOverlay.style.display = "block";

  if (arrayPageSize[0] > objOverlay.offsetWidth)
    objOverlay.style.width = arrayPageSize[0] + "px";

  // preload image
  imgPreload = new Image();

  imgPreload.onload = function() {
    objImage.src = objLink.href;

    // center lightbox and make sure that the top and left values are not negative
    // and the image placed outside the viewport
    var lightboxLeft = arrayPageScroll[0] + (arrayPageSize[2] - 20 - imgPreload.width) / 2;
    var lightboxTop = arrayPageScroll[1] + (arrayPageSize[3] - 52 - imgPreload.height) / 2;

    if (lightboxLeft < arrayPageScroll[0]) {
      objLightbox.style.left = arrayPageScroll[0] + "px";
      lightboxLeft = arrayPageScroll[0];
    } else
      objLightbox.style.left = lightboxLeft + "px";

    if (lightboxTop < arrayPageScroll[1]) {
      objLightbox.style.top = arrayPageScroll[1] + "px";
      lightboxTop = arrayPageScroll[1];
    } else
      objLightbox.style.top = lightboxTop + "px";

    objCaption.style.width = imgPreload.width + "px";
    objCaption.innerHTML = objLink.getAttribute("title") ? objLink.getAttribute("title") : "";

    objLoadingImage.style.display = "none";

    pause(50);

    if (objOverlay.style.display == "block")
      objLightbox.style.display = "block";

    // after image is loaded, update the overlay as the new image might have
    // increased the overall page size
    if (lightboxLeft + imgPreload.width + 20 > objOverlay.offsetWidth)
      objOverlay.style.width = lightboxLeft + imgPreload.width + 20 + "px";

    if (lightboxTop + imgPreload.height + 52 > objOverlay.offsetHeight)
      objOverlay.style.height = lightboxTop + imgPreload.height + 52 + "px";

    return false;
  }

  imgPreload.src = objLink.href;
}

//
// hideLightbox()
//
function hideLightbox()
{
  // get objects
  objOverlay = document.getElementById("overlay");
  objLightbox = document.getElementById("lightbox");
  objLoadingImage = document.getElementById("loadingImage");

  // hide lightbox
  objOverlay.style.display = "none";
  objLightbox.style.display = "none";
  objLoadingImage.style.display = "none";

  // make select boxes visible
  selects = document.getElementsByTagName("select");
  for (i = 0; i != selects.length; i++)
    selects[i].style.visibility = "visible";
}

//
// initLightbox()
// Function runs on window load, going through link tags looking for rel="lightbox".
// These links receive onclick events that enable the lightbox display for their targets.
// The function also inserts html markup at the top of the page which will be used as a
// container for the overlay pattern and the inline image.
//
function initLightbox()
{
  imgPreload = new Image();
  imgPreload.src = "lightbox/loading.gif";

  if (!document.getElementsByTagName) {return;}
  var anchors = document.getElementsByTagName("a");

  // loop through all anchor tags
  for (var i = 0; i < anchors.length; i++) {
    var anchor = anchors[i];

    if (anchor.getAttribute("href") && (anchor.getAttribute("rel") == "lightbox"))
      anchor.onclick = function() {showLightbox(this); return false;}
  }

  // the rest of the code inserts this html at the bottom of the page
  //
  // <div id="lightbox">
  //   <img id="lightboxImage" />
  //   <div id="lightboxCaption"></div>
  // </div>
  // <div id="overlay"></div>
  // <div id="loadingImage" /></div>

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

  // create lightbox div
  var objLightbox = document.createElement("div");
  objLightbox.setAttribute("id", "lightbox");
  objLightbox.style.display = "none";
  objLightbox.style.position = "absolute";
  objLightbox.style.zIndex = "100";
  objLightbox.style.textAlign = "left";
	objLightbox.style.background = "#fff";
	objLightbox.style.padding = "10px";
  objBody.appendChild(objLightbox);

  // create image
  var objImage = document.createElement("img");
  objImage.setAttribute("id", "lightboxImage");
  objImage.style.border = "none";
  objLightbox.appendChild(objImage);

  // create caption
  var objCaption = document.createElement("div");
  objCaption.setAttribute("id", "lightboxCaption");
  objCaption.style.display = "block";
  objCaption.style.height = "25px";
  objCaption.style.font = "bold 0.8em verdana, \"geneva ce\", lucida, sans-serif";
  objCaption.style.color = "#555";
	objCaption.style.margin = "7px 0 0 -1px";
  objLightbox.appendChild(objCaption);

  // create overlay div
  var objOverlay = document.createElement("div");
  objOverlay.setAttribute("id", "overlay");
  objOverlay.style.display = "none";
  objOverlay.style.position = "absolute";
  objOverlay.style.zIndex = "90";
  objOverlay.style.top = "0";
  objOverlay.style.left = "0";
  objOverlay.style.background = "#000";
  objOverlay.style.opacity = "0.8";
  objOverlay.style.filter = "alpha(opacity=80)";
  objBody.appendChild(objOverlay);

  // create loadingimage
  var objLoadingImage = document.createElement("div");
  objLoadingImage.setAttribute("id", "loadingImage");
  objLoadingImage.style.display = "none";
  objLoadingImage.style.position = "absolute";
  objLoadingImage.style.zIndex = "150";
  objLoadingImage.style.width = "56px";
  objLoadingImage.style.height = "56px";
  objLoadingImage.style.background = "#fff url(lightbox/loading.gif) center no-repeat";
  objBody.appendChild(objLoadingImage);

  objOverlay.style.cursor = objLightbox.style.cursor = objLoadingImage.style.cursor = navigator.appVersion.indexOf("MSIE") != -1 ? "hand" : "pointer";
  objOverlay.onclick = objLightbox.onclick = objLoadingImage.onclick = function() {hideLightbox(); return false;}
}

//
// addLoadEvent()
// Adds event to window.onload without overwriting currently assigned onload functions.
// Function found at Simon Willison's weblog - http://simon.incutio.com/
//
function addLoadEvent(func)
{
  var oldonload = window.onload;
  if (typeof window.onload != "function") {
      window.onload = func;
  } else {
    window.onload = function() {
      oldonload();
      func();
    }
  }
}

addLoadEvent(initLightbox); // run initLightbox onLoad