// 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/
// Modified by Mike Piontek for Junecode and Mootools

var lightboxReady = false;
var waitTimer = null;
var storedObject = null;
var imgPreload = null;
var lightboxTop = 0;
var objOverlay = null;
var objLightbox = null;
var objLightboxDetails = null;
var isExplorer = (navigator.appVersion.indexOf('MSIE')!=-1) ? true : false;

var scrollSize;
var winSize;
var scrollPos;

function getKey (event) {
	if (event.key == 'x') hideLightbox();
}

function 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

	var now = new Date();
	var exitTime = now.getTime() + numberMillis;
	while (true) {
		now = new Date();
		if (now.getTime() > exitTime) return;
	}

}
	
function showLightbox (objLink) {

	// Preload images, place the new image in lightbox, then center and display

	if (waitTimer != null) clearTimeout(waitTimer);

	if (lightboxReady == false) {
		storedObject = objLink;
		waitTimer = setTimeout('showLightbox(false)',1000);
	} else {

		if (objLink == false) objLink = storedObject;

		scrollSize = $(window).getScrollSize();
		winSize = $(window).getSize();
		scrollPos = $(window).getScroll();
	
		// Center loading
		$('loading').style.top = (scrollPos.y + ((winSize.y - 50) / 2) + 'px');
		$('loading').style.left = (((scrollSize.x - 100) / 2) + 'px');

		if (!isExplorer) {
			var loadFx = new Fx.Tween('loading',{duration:'long'});
			loadFx.set('opacity','0');
			$('loading').style.display = 'block';
			loadFx.start('opacity','1');
		} else $('loading').style.display = 'block';

		// Set the overlay to take up the whole page and show it
		objOverlay.style.width = '100%';
		objOverlay.style.height = (scrollSize.y + 'px');

		var overFx = new Fx.Tween('overlay',{duration:'long'});
		overFx.set('opacity','0');
		objOverlay.style.display = 'block';
		overFx.start('opacity','0.6');

		// Hide select boxes as they will 'peek' through the image in IE
		if (isExplorer) {
			selects = document.getElementsByTagName('select');
			for (i = 0; i != selects.length; i++) {
				selects[i].style.visibility = 'hidden';
			}
		}
	
		// Preload image
		imgPreload = new Image();
		$(imgPreload).addEvent('load',function(){
				
			$('lightboximage').src = objLink.href;
			centerImage();
		
			if (objLink.getAttribute('title')) {
				$('lightboxcaption').style.display = 'block';
				$('lightboxcaption').innerHTML = objLink.getAttribute('title');
			} else $('lightboxcaption').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 (isExplorer) pause(250);

			$('loading').style.display = 'none';
			objLightbox.style.display = 'block';
			adjustOverlay(true);
			$(document).addEvent('keypress',getKey);

			overFx.cancel();
			overFx.set('opacity','0.6');

			return false;

		});
		
		imgPreload.src = objLink.href;
		

	}
	return false;

}

function hideLightbox () {

	// Hide lightbox and overlay
	$('loading').style.display = 'none';
	objOverlay.style.display = 'none';
	objLightbox.style.display = 'none';
	objOverlay.style.width = '1px';
	objOverlay.style.height = '1px';

	imgPreload = null;
	lightboxTop = 0;

	// Make select boxes visible
	if (isExplorer) {
		selects = document.getElementsByTagName('select');
		for (i = 0; i != selects.length; i++) {
			selects[i].style.visibility = 'visible';
		}
	}

	// Disable keypress listener
	$(document).removeEvent('keypress',getKey);

}

function centerImage () {

	// Center lightbox and make sure that the top and left values are not negative
	// and the image placed outside the viewport
	lightboxTop = scrollPos.y + ((winSize.y - 37 - imgPreload.height) / 2);
	var lightboxLeft = ((scrollSize.x - 22 - imgPreload.width) / 2);
	
	objLightbox.style.top = (lightboxTop < 0) ? '0' : lightboxTop + 'px';
	objLightbox.style.left = (lightboxLeft < 0) ? '0' : lightboxLeft + 'px';

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

}

function adjustOverlay (skipCenter) {

	// After image is loaded, update the overlay size as the new image might have
	// increased the overall page width or height.

	if (imgPreload) {

		scrollSize = $(window).getScrollSize();
		
		centerImage();

		var maxWidth = scrollSize.x;
		if ((imgPreload.width + 45) >= scrollSize.x) {
			objOverlay.style.width = ((imgPreload.width + 45) + 'px');
		} else objOverlay.style.width = '100%';

		var maxHeight = scrollSize.y;
		var topOffset = 0;
		if (lightboxTop > 0) topOffset = lightboxTop;
		if ((topOffset + imgPreload.height + 47) > maxHeight) 
			maxHeight = topOffset + imgPreload.height + 47;
		if (objLightbox.offsetHeight && (topOffset + objLightbox.offsetHeight) > maxHeight) 
			maxHeight = topOffset + objLightbox.offsetHeight;
		objOverlay.style.height = (maxHeight + 'px');

	}

}

window.addEvent('domready',function() {

	// The default Explorer styles can be overridden by manually adding a stylesheet with the id 
	// "lightboxexplorercss" to the page (conditional comments are a good way to do this)

	if (isExplorer && !$('lightboxexplorercss')) 
		new Asset.css('/code/enlarge/explorer.css',{id:'lightboxexplorercss'});

	// This HTML will be inserted at the top of the page:

	// <div id="loading"></div>
	// <div id="overlay"></div>
	// <div id="lightbox">
	//		<a id="closebutton"></a>
	//		<a href="#" onclick="hideLightbox(); return false;">
	//			<img id="lightboximage" />
	//		</a>
	//		<div id="lightboxdetails">
	//			<div id="lightboxcaption"></div>
	//		</div>
	// </div>
	
	// Create overlay div and hardcode some functional styles
	objOverlay = new Element('div',{
		'id': 'overlay',
		'styles': {
			'display': 'none',
			'position': 'absolute',
			'top': '0',
			'left': '0',
			'z-index': '90',
			'width': '100%'
		},
		'events': {
			'click': function(){ hideLightbox();return false; }
		}
	});
	objOverlay.inject($(document.body),'top');

	// Create loading image
	var objLoading = new Element('div',{
		'id': 'loading',
		'styles': {
			'display': 'none',
			'position': 'absolute',
			'z-index': '91'
		}
	});
	objLoading.inject(objOverlay,'after');

	// Create lightbox div
	objLightbox = new Element('div',{
		'id': 'lightbox',
		'styles': {
			'display': 'none',
			'position': 'absolute',
			'z-index': '92'
		},
		'events': {
			'click': function(){ hideLightbox();return false; }
		}
	});
	objLightbox.inject(objOverlay,'before');
	
	// Create close buttons
	var objCloseButton = new Element('a',{
		'id': 'closebutton',
		'href': '#',
		'title': 'Click here or press x to close.',
		'styles': {
			'display': 'block',
			'position': 'absolute',
			'z-index': '93'
		}
	});
	objLightbox.adopt(objCloseButton);
	var objLink = new Element('a',{
		'href': '#',
		'title': 'Click here or press x to close.',
		'events': {
			'click': function(){ hideLightbox();return false; }
		}
	});
	objLightbox.adopt(objLink);

	// Create image
	var objImage = new Element('img',{'id': 'lightboximage'});
	objLink.adopt(objImage);

	// Create details div and caption
	objLightboxDetails = new Element('div',{'id': 'lightboxdetails'});
	objLightbox.adopt(objLightboxDetails);
	var objCaption = new Element('div',{
		'id': 'lightboxcaption',
		'styles': {'display': 'none'}
	});
	objLightboxDetails.adopt(objCaption);

	$(window).addEvent('resize',adjustOverlay);
	lightboxReady = true;
	doCreateImages();

});

// AJAX thumbnail creation by Mike Piontek

var createImagesCount;
var createImagesDone;
var theRequest;

function doCreateImages () {

	if (createImagesCount > createImagesDone) {
		theRequest = new Request({
			url: createImages[createImagesDone + 1],
			method: 'get',
			autoCancel: true,
			onSuccess: loadCreatedImage
			}).send();
	}

}

function loadCreatedImage (responseText) {

	createImagesDone++;
	$('createthumb'+createImagesDone).innerHTML = responseText;
	doCreateImages();

}