/*
 : Filename : /xj/lightbox.js ( $Revision: 3197 $ )
 :
 : Description:
 : - Javascript functions for image lightbox
 :
 : Table of Contents :
 : ----------------------
 : Configuration
 :
 : Functions
 : - getPageScroll ()
 : - getPageSize ()
 : - pause (numberMillis)
 : - getKey (e)
 : - listenKey ()
 : - showLightbox ()
 : - hideLightbox ()
 : - initLightbox ()
 : - addLoadEvent (func)
 : - dfn_set_active_image (anchor)
 : - dfn_next_image ()
 : - dfn_prev_image ()
 :
 : Function Calls
 : - addLoadEvent (initLightbox)
*/


/* ========== */
/* Configuration    */
/* ========== */
var imageListing		= Array ();
var currentImage		= 0;

var loadingImage		= '/xl/lightbox/loading.gif';
var btnNextImage	= '/xl/lightbox/next.gif';
var btnPrevImage		= '/xl/lightbox/prev.gif';
var closeButton 		= '/xl/lightbox/close.gif';

var dtrLooping			= false;


/* =========== */
/* getPageScroll ()  */
/* ----------------------------------------------- */
/* Returns array with x,y page scroll values.   */
/* ============================*/
function getPageScroll ()
{
	var yScroll;

	if (self.pageYOffset)
	{
		yScroll = self.pageYOffset;
	}
	else if (document.documentElement && document.documentElement.scrollTop)
	{
		yScroll = document.documentElement.scrollTop;
	}
	else if (document.body)
	{
		yScroll = document.body.scrollTop;
	}

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


/* =========== */
/* getPageSize ()    */
/* ----------------------------------------------------------------------- */
/* Returns array with page width, height and window width, height    */
/* ===========================================*/
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)
	{
		xScroll = document.body.scrollWidth;
		yScroll = document.body.scrollHeight;
	}
	else
	{
		xScroll = document.body.offsetWidth;
		yScroll = document.body.offsetHeight;
	}

	var windowWidth, windowHeight;
	if (self.innerHeight)
	{
		windowWidth = self.innerWidth;
		windowHeight = self.innerHeight;
	}
	else if (document.documentElement && document.documentElement.clientHeight)
	{
		windowWidth = document.documentElement.clientWidth;
		windowHeight = document.documentElement.clientHeight;
	}
	else if (document.body)
	{
		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. */
/* =============================================*/
function pause (numberMillis)
{
	var now = new Date ();
	var exitTime = now.getTime () + numberMillis;
	while (true)
	{
		now = new Date ();
		if (now.getTime() > exitTime)
			return;
	}
}


/* =========== */
/* getKey (e)          */
/* ------------------------------------------------------------------ */
/* Gets keycode.                                                                            */
/* If 'Esc' or 'x' or 'q' or 'c' is pressed then it hides the lightbox.  */
/* If 'p' or '<-' is pressed then it show previous image.                */
/* If 'n' or '->' is pressed then it show next image.                      */
/* ======================================= */
function getKey (e)
{
	var keycode, key;

	if (e == null) /* for IE */
	{
		keycode = event.keyCode;
	}
	else /* for MOZiLLA */
	{
		keycode = e.keyCode || e.which;
	}

	key = String.fromCharCode(keycode).toLowerCase();

	if (key.match(/x|q|c/) || (keycode == 27))
	{
		hideLightbox();
	}
	else if (key == 'p' || (keycode == 37))
	{
		if (currentImage == 0)
		{
			return;
		}

		dfn_prev_image();
	}
	else if (key == 'n' || (keycode == 39))
	{
		if (currentImage == (imageListing.length - 1))
		{
			return;
		}

		dfn_next_image();
	}
}


/* ========== */
/* 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 objButton = document.getElementById('buttonControl');
	var objPrevLink = document.getElementById('dtlPrev');
	var objNextLink = document.getElementById('dtlNext');

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

	if (imageListing.length == 1)
	{
		objPrevLink.style.display = 'none';
		objNextLink.style.display = 'none';
	}
	else if (currentImage == 0)
	{
		objPrevLink.style.display = 'none';
		objNextLink.style.display = '';
	}
	else if (currentImage == (imageListing.length - 1))
	{
		objPrevLink.style.display = '';
		objNextLink.style.display = 'none';
	}
	else
	{
		objPrevLink.style.display = '';
		objNextLink.style.display = '';
	}

	/* 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';
		objButton.style.width = imgPreload.width + 20;

		if (objLink.getAttribute('title'))
		{
			objCaption.style.display = 'block';
			objCaption.innerHTML = '<b>' + objLink.getAttribute('title') + '</b><br>Image ' + (currentImage + 1) + ' of ' + imageListing.length;
		}
		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');

		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 initLightbox ()
{
	if (! document.getElementsByTagName){ return; }
	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"))
		{
			imageListing.push (anchor);

			anchor.onclick = function ()
			{
				dfn_set_active_image (this);
				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="#" title="close image"><img id="closeButton" /></a>
			<img id="lightboxImage" />
			<div id="buttonControl">
				<a href="#" title="view prev image"><img alt="prev" /></a>
				<a href="#" title="view next image"><img alt="next" /></a>
			</div>
			<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; }
	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');
		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');
	objBody.insertBefore(objLightbox, objOverlay.nextSibling);

	/* create close link */
	var objLink = document.createElement("a");
	objLink.setAttribute('href','#');
	objLink.setAttribute('title','Close');
	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');
		objLink.appendChild(objCloseButton);

		return false;
	}

	imgPreloadCloseButton.src = closeButton;

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

	/* create div for button control */
	var objButtonDiv = document.createElement("div");
	objButtonDiv.setAttribute('id','buttonControl');
	objLightbox.appendChild(objButtonDiv);

	/* create previous link */
	var objPrevLink = document.createElement("a");
	objPrevLink.setAttribute('href','#dtlPrev');
	objPrevLink.setAttribute('id','dtlPrev');
	objPrevLink.setAttribute('title','Previous image');
	objPrevLink.onclick = function () { dfn_prev_image(); return false; }
	objButtonDiv.appendChild(objPrevLink);

	var objBtnImage = document.createElement("img");
	objBtnImage.src = btnPrevImage;
	objPrevLink.appendChild(objBtnImage);

	/* create next link */
	var objNextLink = document.createElement("a");
	objNextLink.setAttribute('href','#dtlNext');
	objNextLink.setAttribute('id','dtlNext');
	objNextLink.onclick = function () { dfn_next_image(); return false; }
	objNextLink.setAttribute('title','Next image');
	objButtonDiv.appendChild(objNextLink);

	var objBtnImage = document.createElement("img");
	objBtnImage.src = btnNextImage;
	objNextLink.appendChild(objBtnImage);

	// 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');
	objLightboxDetails.appendChild(objCaption);

	// create keyboard message
	var objKeyboardMsg = document.createElement("div");
	objKeyboardMsg.setAttribute('id','keyboardMsg');
	objLightboxDetails.appendChild(objKeyboardMsg);
}


/* ============== */
/* addLoadEvent (func) */
/* ----------------------------------------------------------------------------------------------  */
/* Adds event to window.onload without overwriting currently assigned onload functions.  */
/* ======================================================== */
function addLoadEvent (func)
{
	var oldonload = window.onload;
	if (typeof window.onload != 'function')
	{
    	window.onload = func;
	}
	else
	{
		window.onload = function ()
		{
			oldonload();
			func();
		}
	}
}


/* ===================== */
/* dfn_set_active_image (anchor) */
/* ==================== */
function dfn_set_active_image (anchor)
{
	for (var i=0; i<imageListing.length; i++)
	{
		if (imageListing[i] == anchor)
		{
			currentImage = i;
		}
	}

	return currentImage;
}


/* ============= */
/* dfn_next_image ()  */
/* ============ */
function dfn_next_image ()
{
	currentImage++;

	if (currentImage >= imageListing.length)
	{
		if (dtrLooping)
		{
			currentImage = 0;
		}
		else
		{
			currentImage = imageListing.length - 1;
		}
	}

	hideLightbox ();
	showLightbox (imageListing[currentImage]);
}


/* ============= */
/* dfn_prev_image ()  */
/* ============ */
function dfn_prev_image ()
{
	currentImage--;

	if (currentImage < 0)
	{
		if (dtrLooping)
		{
			currentImage = imageListing.length - 1;
		}
		else
		{
			currentImage = 0;
		}
	}

	hideLightbox ();
	showLightbox (imageListing[currentImage]);
}

addLoadEvent(initLightbox);