/*
 *	Name: iBox 1.0, 2007-10-29 (image box or component independent box)
 *	Author: slowik.krzysiek@gmail.com
 *	www: http://udesktoplinux.cba.pl/
 *	Description: better lightbox clone;
 *		- ajax ready (after run updateLinks())
 *		- smallest lightbox clone (smaller than: lightbox, slimbox, lytebox, litebox)
 *		- faster (maybe fastest) beaucouse use css class
 *		- preloading images on mouseover
 *		- component independent
 *		- prewent images from browser's cache
 *		- different skins. (check out commented css)
 *	In future (I wish):
 *		- flash ready
 *		- using swfobject, scriptaculous, jQuery as optional (better replacement)
 *	Tested width FF 2, IE6, IE7, Opera. Only in strict mode
 */


if (document.all)
	try {document.execCommand("BackgroundImageCache", false, true); } catch(e) {};
function id(el) {return document.getElementById(el) || alert('Missing: ' + el)}

var imageArray = [], imageNum = 0, scrollTo = 0;

init = function() {
	var content =
		'<div id="iBoxOverlay" onclick="document.getElementsByTagName(\'html\')[0].className=\'\'"></div>' +
		'<div id="iBoxWindowOuter" onclick=" if ((document.all ? event.srcElement : event.target) == this) document.getElementsByTagName(\'html\')[0].className=\'\'">' +
		'<div id="iBoxWindow" style="width: 100px;">' +
			'<div id="iBoxImage" style="height: 100px">' +
				'<a href="" id="iBoxLeft" onclick="document.getElementById(\'iBoxWindow\').className=\'loading\'; return false"></a>' +
				'<a href="" id="iBoxRight" onclick="document.getElementById(\'iBoxWindow\').className=\'loading\'; return false"></a>' +
			'</div>' +
			'<div id="iBoxDescription">' +
				'<a href="" id="iBoxClose" onclick="document.getElementsByTagName(\'html\')[0].className=\'\' ;return false">&times;</a>' +
				'<span id="iBoxTitle"></span>' +
				'<div style="clear: both"></div>' +
			'</div>' +
		'</div>' +
		'</div>'
	var tmpDiv = document.createElement("div");
	tmpDiv.innerHTML = content;
	document.body.appendChild(tmpDiv);
	updateLinks();
}
updateLinks = function(obj) {
	var l = document.links;
	imageArray = [];
	imageNum = 0;

	for(var i = 0; i < document.links.length; i++) {
		if(l[i].rel && l[i].rel.match(/^lightbox/i)) {

			if(!l[i].href.match(/nocache=/i))
				l[i].href += '?nocache=' + Math.random(100);

			l[i].onclick = function() {
				showAll(this);
				return false;
			}
			l[i].onmouseover = function() {
				var preloadImageOnMouseOver = new Image().src = this.href;
			}
		}
	}
	if(obj){
		for(var j = 0; j < document.links.length; j++) {
			if (l[j].rel && l[j].rel.match(/^lightbox/i) && l[j].rel == obj.rel)
				imageArray.push( l[j] )
			if (l[j] == obj ) imageNum = imageArray.length -1;
		}
	}
}
showAll = function(obj) {
	scrollTo = document.documentElement.scrollTop;
	id('iBoxClose').onclick = function() {
		document.getElementsByTagName('html')[0].className='';
		document.documentElement.scrollTop = scrollTo;
		return false;
	}
	updateLinks(obj);
	show(obj);
	document.getElementsByTagName('html')[0].className='iBox';
	document.documentElement.scrollTop = 0;
}
show = function(obj) {
	id('iBoxWindow').className = 'loading';
	var imgPre = new Image();
	imgPre.onload = function() {imgLoaded(imgPre.src, imgPre.width, imgPre.height, obj.title)};
	imgPre.src = obj.href;

	id('iBoxLeft').style.display = 'none';
	id('iBoxRight').style.display = 'none';
	if (obj == imageArray[imageNum]) {
		if (imageNum > 0) id('iBoxLeft').style.display = 'block';
		if (imageNum < imageArray.length -1) id('iBoxRight').style.display = 'block';
	};

	if (imageNum > 0) {
		id('iBoxLeft').onclick = function() { imageNum--; show(imageArray[imageNum]); return false }
		var prevImage = new Image().src = imageArray[imageNum - 1];
	}
	if (imageNum < imageArray.length - 1) {
		id('iBoxRight').onclick = function() { imageNum++; show(imageArray[imageNum]);  return false }
		var nextImage = new Image().src = imageArray[imageNum + 1];
	}
}
imgLoaded = function(src, width, height, title) {
	id('iBoxImage').style.backgroundImage = 'url(' + src + ')';
	if (imageArray.length > 1) title += ' (#' + (imageNum + 1) + '/' + imageArray.length + ')';
	id('iBoxTitle').innerHTML = title;
	resizeiBoxWindow({width: width, height: height});
}
resizeiBoxWindow = function(el) {
	id('iBoxImage').style.height = el.height + 'px';
	id('iBoxWindow').style.width = el.width + 'px';
	id('iBoxImage').style.width = el.width + 'px';

	id('iBoxWindow').className = '';
}
if (window.addEventListener) {
	window.addEventListener("load",init,false);
} else if (window.attachEvent) {
	window.attachEvent("onload",init);
} else {
	window.onload = init;
}