/*
  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
  -----------------
  Configuration

  Functions
  - getPageScroll()
  - getPageSize()
  - pause()
  - getKey()
  - listenKey()
  - showLightbox()
  - hideLightbox()
  - initLightbox()
  - showZoomHint()
  - hideZoomHint()

*/



//
// Configuration
//

// If you would like to use a custom loading image or close button reference them in the next two lines.
var lightboxload  = 'images/imageloading.gif';
var lightboxclose = 'images/imageclose.gif'; //'images/blank.gif'
var lightboxminw  = 500;

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

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

  arrayPageScroll = new Array('',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 xScroll, yScroll;

  if (window.innerHeight && window.scrollMaxY)
  {
    xScroll = document.body.scrollWidth;
    yScroll = window.innerHeight+window.scrollMaxY;
  } else
  if (document.body.scrollHeight>document.body.offsetHeight) // all but Explorer Mac
  {
    xScroll = document.body.scrollWidth;
    yScroll = document.body.scrollHeight;
  }
  else // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari
  {
    xScroll = document.body.offsetWidth;
    yScroll = document.body.offsetHeight;
  }

  var windowWidth, windowHeight;
  if (self.innerHeight) // all except Explorer
  {
    windowWidth  = self.innerWidth;
    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 height less then height of the viewport
  if (yScroll<windowHeight) pageHeight = windowHeight; else pageHeight = yScroll;

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

  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(ms)
{
  var now = new Date();
  var exitTime = now.getTime()+ms;
  while (true)
  {
    now = new Date();
    if (now.getTime()>exitTime) return;
  }
}

//
// getKey(key)
// Gets keycode. If 'x' is pressed then it hides the lightbox.
//

function getKey(e)
{
  if (e==null) keycode = event.keyCode; // ie
    else keycode = e.which; // mozilla
  key = String.fromCharCode(keycode).toLowerCase();
  if (key=='x') hideLightbox();
}


//
// listenKey()
//
function listenKey () { document.onkeypress = getKey; }


//
// 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('lightboxload');
  var objLightboxDetails = document.getElementById('lightboxdetails');
  var objLightboxKbdMsg  = document.getElementById('lightboxkbdmsg');

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

  // center LoadingImage if it exists
  if (objLoadingImage)
  {
    objLoadingImage.style.top     = (arrayPageScroll[1]+((arrayPageSize[3]-35-objLoadingImage.height)/2)+'px');
    objLoadingImage.style.left    = (((arrayPageSize[0]-20-objLoadingImage.width)/2)+'px');
    objLoadingImage.style.display = 'block';
  }

  // set height of Overlay to take up whole page and show
  objOverlay.style.height  = (arrayPageSize[1]+'px');
  objOverlay.style.display = 'block';

  // preload image
  imgPreload = new Image();

  imgPreload.onload = function()
  {
    objImage.src = objLink.getAttribute('largeimage');

    var width = lightboxminw;
    if (imgPreload.width>width)
    {
      width = imgPreload.width;
      objLightbox.style.width = '';
    }
    else
    {
      objLightbox.style.width = lightboxminw;
    }

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

    objLightboxDetails.style.width = width+'px';

    objLightboxKbdMsg.style.right  = '8px';

    if (objLink.getAttribute('title'))
    {
      objCaption.style.display = 'inline';
      objCaption.innerHTML     = objLink.getAttribute('title');
    }
    else
    {
      objCaption.style.display = 'none';
    }

    // A small pause between the image loading and displaying is required with IE,
    // this prevents the previous image displaying for a short burst causing flicker.
    if (navigator.appVersion.indexOf("MSIE")!=-1) pause(250);

    if (objLoadingImage) objLoadingImage.style.display = 'none';

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

    objLightbox.style.display = 'block';

    // After image is loaded, update the overlay height as the new image might have
    // increased the overall page height.
    arrayPageSize           = getPageSize();
    objOverlay.style.height = (arrayPageSize[1]+'px');

    // Check for 'x' keypress
    listenKey();
    return false;
  }
  imgPreload.src = objLink.getAttribute('largeimage');
}


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

  // hide lightbox and overlay
  objOverlay.style.display  = 'none';
  objLightbox.style.display = 'none';

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

  // disable keypress listener
  document.onkeypress = '';
}


//
// 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()
{
  if (!document.getElementsByTagName) return;

/*
  // loop through all anchor tags
  var anchors = document.getElementsByTagName("a");
  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 this code inserts html at the top of the page that looks like this:
  //
  // <div id="zoomhint">
  //   Click to zoom...
  // </div>
  // <div id="overlay">
  //    <a href="#" onclick="hideLightbox(); return false;"><img id="lightboxload"/></a>
  // </div>
  // <div id="lightbox" onclick="hideLightbox(); return false;">
  //   <div>
  //     <img id="lightboxclose"/>
  //     <img id="lightboximage"/>
  //   </div>
  //   <div id="lightboxdetails">
  //     <div id="lightboxcaption"></div>
  //     <div id="lightboxkbdmsg"></div>
  //   </div>
  // </div>

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

  // create "Click to show..." hint box
  var objHint               = document.createElement("div");
  objHint.setAttribute('id','zoomhint');
  objHint.style.visibility  = 'hidden';
  objHint.style.position    = 'absolute';
  objHint.style.top         = '0';
  objHint.style.left        = '0';
  objHint.style.zIndex      = '50';
  objHint.innerHTML         = 'Click to zoom...';
  objBody.insertBefore(objHint, objBody.firstChild);

  // create overlay div and hardcode some functional styles (aesthetic styles are in CSS file)
  var objOverlay            = document.createElement("div");
  objOverlay.setAttribute('id','overlay');
  objOverlay.onclick        = function () {hideLightbox(); return false;}
  objOverlay.style.display  = 'none';
  objOverlay.style.position = 'absolute';
  objOverlay.style.top      = '0';
  objOverlay.style.left     = '0';
  objOverlay.style.zIndex   = '90';
  objOverlay.style.width    = '100%';
  objBody.insertBefore(objOverlay, objBody.firstChild);

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

  // preload and create loader image
  var imgPreloader = new Image();

  // if loader image found, create loadingimage
  imgPreloader.onload = function()
  {
    var objLoadingImage            = document.createElement("img");
    objLoadingImage.src            = lightboxload;
    objLoadingImage.setAttribute('id','lightboxload');
    objLoadingImage.style.position = 'absolute';
    objLoadingImage.style.zIndex   = '150';
    objOverlay.appendChild(objLoadingImage);

    imgPreloader.onload = function(){};  //  clear onLoad, as IE will flip out w/animated gifs
    return false;
  }

  imgPreloader.src = lightboxload;

  // create lightbox div, same note about styles as above
  var objLightbox           = document.createElement("div");
  objLightbox.setAttribute('id','lightbox');
  objLightbox.style.display  = 'none';
  objLightbox.style.position = 'absolute';
  objLightbox.style.zIndex   = '100';
  objLightbox.style.width    = lightboxminw;
  objLightbox.onclick        = function () {hideLightbox(); return false;}
  objBody.insertBefore(objLightbox, objOverlay.nextSibling);

  // create image container div
  var objContainer = document.createElement("div");
  objContainer.style.textAlign = 'center';
  objLightbox.appendChild(objContainer);

  // preload and create close button image
  var imgPreloadLightboxClose = new Image();

  // if close button image found,
  imgPreloadLightboxClose.onload = function()
  {
    var objLightboxClose            = document.createElement("img");
    objLightboxClose.src            = lightboxclose;
    objLightboxClose.setAttribute('id','lightboxclose');
    objLightboxClose.style.position = 'absolute';
    objLightboxClose.style.zIndex   = '200';
    objLightboxClose.style.cursor   = 'pointer';
    objContainer.appendChild(objLightboxClose);

    return false;
  }

  imgPreloadLightboxClose.src = lightboxclose;

  // create image
  var objImage = document.createElement("img");
  objImage.setAttribute('id','lightboximage');
  objContainer.appendChild(objImage);

  // create details div, a container for the caption and keyboard message
  var objLightboxDetails = document.createElement("div");
  objLightboxDetails.setAttribute('id','lightboxdetails');
  objLightbox.appendChild(objLightboxDetails);

  // create caption
  var objCaption = document.createElement("div");
  objCaption.setAttribute('id','lightboxcaption');
  objCaption.style.display = 'none';
  objLightboxDetails.appendChild(objCaption);

  // create keyboard message
  var objLightboxKbdMsg = document.createElement("div");
  objLightboxKbdMsg.setAttribute('id','lightboxkbdmsg');
  objLightboxKbdMsg.style.display  = 'inline';
  objLightboxKbdMsg.style.position = 'absolute';
  objLightboxKbdMsg.innerHTML      = 'Click or press <lightboxkbd onclick="hideLightbox(); return false;">X</lightboxkbd> to close';
  objLightboxDetails.appendChild(objLightboxKbdMsg);
}

function showZoomHint(item)
{
  info = document.getElementById('zoomhint');
  var offsets           = getoffsets(item);
  info.style.top        = (offsets.top+item.offsetHeight)+'px';
  info.style.left       = (offsets.left+(item.offsetWidth-info.offsetWidth)/2)+'px';
  info.style.visibility = 'visible';
  item.style.cursor     = 'pointer';
}

function hideZoomHint(item)
{
  info = document.getElementById('zoomhint');
  info.style.visibility = 'hidden';
}

addonload(initLightbox);