// imagebox.js for Mootools 1.2
// based on Lightbox by Lokesh Dhakar
// needs imagebox.css and images: imb_loading.gif, imb_close.png, imb_prev.png, imb_next.png

var imageDir = '../images/site/';
var imbLoadingImageSrc = imageDir + 'imb_loading.gif';		
var imbPrevButtonImageSrc = imageDir + 'imb_prev.png';
var imbCloseButtonImageSrc = imageDir + 'imb_close.png';
var imbNextButtonImageSrc = imageDir + 'imb_next.png';

var isIE = /msie/i.test(navigator.userAgent) && !/opera/i.test(navigator.userAgent);
var isIE6 = /msie|MSIE 6/.test(navigator.userAgent);
var imbMaxWidth = 800;
var imbMaxHeight = 600;
var imbDefaultWidth = 480;
var imbDefaultHeight = 360;
var imbLoadingImageWidth = 150;
var imbLoadingImageHeight = 60;
var imbTopMargin = 20;
var imbBottomMargin = 32;
var imbLeftMargin = 20;
var imbRightMargin = 20;

if ( self.pageYOffset )
{
	getPageScroll = function () { return new Array('', self.pageYOffset); }
}
else if ( document.documentElement && document.documentElement.scrollTop ) // Explorer 6 Strict
{
	getPageScroll = function () { return new Array('', document.documentElement.scrollTop ); }
}
else if ( document.body ) // all other Explorers
{
	getPageScroll = function () { return new Array('', document.body.scrollTop ); }
}
 
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
    pageHeight = (yScroll < windowHeight) ? windowHeight : yScroll;
    // for small pages with total width less then width of the viewport
    pageWidth = (xScroll < windowWidth) ? windowWidth : xScroll;

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


function imbShow(id)
{
	$(id).style.visibility = 'visible';
}

function imbHide(id)
{
	$(id).style.visibility = 'hidden';
}

function imbPop(el)
{	
	imbShowOverlay();
	imbDisplay(el);
}

function imbDisplay(el)
{
	var loadingImage = $('imb_loading_image');
	loadingImage = null;
	var box = $('imb_box');
	box.fade('hide');
	var image = $('imb_image');
	image.src = '';
	var caption = $('imb_caption');
	
	var arrayPageSize = getPageSize();
    var arrayPageScroll = getPageScroll();

    // center loadingImage if it exists
    if (loadingImage) {
        loadingImage.style.top = (arrayPageScroll[1] + ((arrayPageSize[3] - 35 - loadingImage.height) / 2) + 'px');
        loadingImage.style.left = (((arrayPageSize[0] - 20 - loadingImage.width) / 2) + 'px');
        loadingImage.style.display = 'block';
    }
	
	imbShow('imb_loading_image');
	var preloadImage = new Image();
	
	preloadImage.onload = function ()
	{
		var imboxTop = arrayPageScroll[1] + ((arrayPageSize[3] - 35 - preloadImage.height) / 2);
    	var imboxLeft = ((arrayPageSize[0] - 20 - preloadImage.width) / 2);
    	box.style.top = (imboxTop < 0) ? "0px" : imboxTop + "px";
    	box.style.left = (imboxLeft < 0) ? "0px" : imboxLeft + "px";
		box.style.width = (preloadImage.width + imbLeftMargin + imbRightMargin) + 'px';
		box.style.height = (preloadImage.height + imbTopMargin + imbBottomMargin) + 'px';
		image.src = preloadImage.src;
		caption.innerHTML = el.getAttribute('title');
		imbHide('imb_loading_image');
		image.fade('hide');
		box.fade('show');
		image.fade('in');
	}
	preloadImage.src = el.getAttribute('href');
	
	$("imb_prev_button").onclick = function (event) { imbPrev (el); }; 
	$("imb_next_button").onclick =  function (event) { imbNext (el); };
	window.onkeydown = function (event) { keyHandler (el, event); }; //onkeypress does not work in Safari
}

function keyHandler(el, event)
{
	e = event;
	code = e.charCode || e.keyCode;
	if (code == 37 || code == 38)
	{
		imbPrev(el);
	}
	else if (code == 39 || code == 40)
	{
		imbNext(el);
	}
}

function imbPrev(el)
{
	el.previousSibling ? imbDisplay( el.previousSibling ) : imbDisplay ( el.parentNode.lastChild );
}

function imbNext(el)
{
	el.nextSibling ? imbDisplay( el.nextSibling ) : imbDisplay ( el.parentNode.firstChild );
}

function imbShowOverlay()
{
	$('imb_image').set('src', '');
	$('imb_box').fade('hide');
	// $('imb_overlay').set('tween', {duration: 'long'});
	$('imb_overlay').fade('in');
}

function imbHideOverlay()
{
	window.onkeydown = null;
	// imbHide('imb_loading_image');
	$('imb_image').fade('out');
	$('imb_box').fade('hide');
	$('imb_overlay').fade('out');
}

function imbCaptureAnchorClicks()
{
	var anchors = $$("a").each(
		function (el)
		{
			if (el.getProperty("rel") == "imagebox" && el.getProperty("href") != "")
			{
				el.onclick = function ()
				{
					imbPop(this);
					return false; // suppress new page
				}
			}
		}
	);
}

function imbInit()
{
	var body = $(document.body);
	
	// create overlay
	var overlay = document.createElement("div");
	overlay.setAttribute('id', 'imb_overlay');
	overlay.fade('hide');
	body.appendChild(overlay);
	
	if (isIE6)
	{
		overlay.style.setExpression('height', "document.body.scrollHeight > document.body.offsetHeight ? document.body.scrollHeight : document.body.offsetHeight + 'px'");
	}
	
	var box = document.createElement("div");
	box.setAttribute('id', 'imb_box');
	box.fade('hide');
	body.appendChild(box);
	
	var prevButton = document.createElement("img"); 
	prevButton.setAttribute('id', 'imb_prev_button');
	prevButton.src = imbPrevButtonImageSrc;
	box.appendChild(prevButton);
	
	var caption = document.createElement("div"); 
	caption.setAttribute('id', 'imb_caption');
	box.appendChild(caption);
	
	var nextButton = document.createElement("img"); 
	nextButton.setAttribute('id', 'imb_next_button');
	nextButton.src = imbNextButtonImageSrc;
	box.appendChild(nextButton);
	
	var closeButton = document.createElement("img"); 
	closeButton.setAttribute('id', 'imb_close_button');
	closeButton.src = imbCloseButtonImageSrc;
	box.appendChild(closeButton);
	
	var image = document.createElement("img"); 
	image.setAttribute('id', 'imb_image');
	box.appendChild(image);
	
	var loadingImage = document.createElement("img"); 
	loadingImage.setAttribute('id', 'imb_loading_image');
	loadingImage.src = imbLoadingImageSrc;
	loadingImage.style.top = (-1 * imbLoadingImageHeight/2) + 'px';
	loadingImage.style.width = imbLoadingImageWidth + 'px';
	overlay.appendChild(loadingImage);
	
	imbCaptureAnchorClicks();
	$("imb_image").onclick = imbHideOverlay;
	$("imb_close_button").onclick = imbHideOverlay;
}

function imbDisplayImage(im)
{
	window.addEvent('domready', function () { imbPop($(im)); } );
}

window.addEvent('domready', imbInit);