/*
       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()
       - addLoadEvent()
       
       Function Calls
       - addLoadEvent(initLightbox)

*/



//
// Configuration
//

// If you would like to use a custom loading image or close button reference them in the next two lines.
var loadingImage = 'layout/lightbox/loading.gif';              
var closeButton = 'layout/lightbox/close.gif';              





//
// 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(numberMillis) {
       var now = new Date();
       var exitTime = now.getTime() + numberMillis;
       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) { // ie
              keycode = event.keyCode;
       } else { // mozilla
              keycode = e.which;
       }
       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('loadingImage');
       var objLightboxDetails = document.getElementById('lightboxDetails');

       
       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.href;

              // 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 - imgPreload.width) / 2);
              
              objLightbox.style.top = (lightboxTop < 0) ? "0px" : lightboxTop + "px";
              objLightbox.style.left = (lightboxLeft < 0) ? "0px" : lightboxLeft + "px";


              objLightboxDetails.style.width = imgPreload.width + 'px';
              
              if(objLink.getAttribute('title')){
                     objCaption.style.display = 'block';
                     //objCaption.style.width = imgPreload.width + 'px';
                     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.href;
       
}





//
// 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; }
       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 this code inserts html at the top of the page that looks like this:
       //
       // <div id="overlay">
       //              <a href="#" onclick="hideLightbox(); return false;"><img id="loadingImage" /></a>
       //       </div>
       // <div id="lightbox">
       //              <a href="#" onclick="hideLightbox(); return false;" title="Click anywhere to close image">
       //                     <img id="closeButton" />              
       //                     <img id="lightboxImage" />
       //              </a>
       //              <div id="lightboxDetails">
       //                     <div id="lightboxCaption"></div>
       //                     <div id="keyboardMsg"></div>
       //              </div>
       // </div>
       
       var objBody = document.getElementsByTagName("body").item(0);
       
       // 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 link to hide lightbox and create loadingimage
       imgPreloader.onload=function(){

              var objLoadingImageLink = document.createElement("a");
              objLoadingImageLink.setAttribute('href','#');
              objLoadingImageLink.onclick = function () {hideLightbox(); return false;}
              objOverlay.appendChild(objLoadingImageLink);
              
              var objLoadingImage = document.createElement("img");
              objLoadingImage.src = loadingImage;
              objLoadingImage.setAttribute('id','loadingImage');
              objLoadingImage.style.position = 'absolute';
              objLoadingImage.style.zIndex = '150';
              objLoadingImageLink.appendChild(objLoadingImage);

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

              return false;
       }

       imgPreloader.src = loadingImage;

       // 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';       
       objBody.insertBefore(objLightbox, objOverlay.nextSibling);
       
       // create link
       var objLink = document.createElement("a");
       objLink.setAttribute('href','#');
       objLink.setAttribute('title','Kliknij aby zamknąć');
       objLink.onclick = function () {hideLightbox(); return false;}
       objLightbox.appendChild(objLink);

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

       // if close button image found, 
       imgPreloadCloseButton.onload=function(){

              var objCloseButton = document.createElement("img");
              objCloseButton.src = closeButton;
              objCloseButton.setAttribute('id','closeButton');
              objCloseButton.style.position = 'absolute';
              objCloseButton.style.zIndex = '200';
              objLink.appendChild(objCloseButton);

              return false;
       }

       imgPreloadCloseButton.src = closeButton;

       // create image
       var objImage = document.createElement("img");
       objImage.setAttribute('id','lightboxImage');
       objLink.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 objKeyboardMsg = document.createElement("div");
       objKeyboardMsg.setAttribute('id','keyboardMsg');
       objKeyboardMsg.innerHTML = '';
       objLightboxDetails.appendChild(objKeyboardMsg);


}




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