/*##################
## ALIVE V1 BETA  ##
####################
	
	VERSION		: 1.2 (beta)
	RELEASED	: 17th February 2007
	AUTHOR		: Route Three Five Limited (Stephen Whiteley)
	WEBSITE		: http://www.routethreefive.com
	
##
##########*/

function initLightbox() {

	var group = [], imageSet;
   
	var thumbnails = document.getElementsByTagName( 'a' );

	for ( var i in thumbnails ) {
		if ( thumbnails[i].className == 'lightbox' ) {

			imageSet = thumbnails[i].rel;

			if ( imageSet ) {

				if ( !group[imageSet] ) {
					group[imageSet]				= [];
					group[imageSet]['source']	= [];
					group[imageSet]['caption']	= [];
				}

				group[imageSet]['source'][group[imageSet]['source'].length]		= thumbnails[i].href;
				group[imageSet]['caption'][group[imageSet]['caption'].length]	= thumbnails[i].title || null;
			}

			thumbnails[i].onclick = function() {
				new createLightbox( this, group[this.rel] );
				return false;
			}

		}
	}

}

function createLightbox( element, group ) {

	if ( document.getElementById( 'lightbox' ) ) { return false; }
	
	var imageX, imageY, imageOrigX, imageOrigY, pause, imageNum;

	var lightbox	= this;
	var body		= document.getElementsByTagName( 'body' )[0];
	var overlay		= document.createElement( 'div' );
	var background	= document.createElement( 'div' );
	var content		= document.createElement( 'div' );
	var image		= document.createElement( 'img' );
	var loading		= document.createElement( 'img' );
	var close		= document.createElement( 'div' );
	var caption		= document.createElement( 'div' );
	var number		= document.createElement( 'div' );
	var next		= document.createElement( 'a' );
	var nextImg		= document.createElement( 'div' );
	var prev		= document.createElement( 'a' );
	var prevImg		= document.createElement( 'div' );
	
	var addEvent = function( element, eventType, eventFunction ) {
		if ( element.attachEvent ) {
			element.attachEvent( 'on' + eventType, eventFunction );
		} else if ( element.addEventListener ) {
			element.addEventListener( eventType, eventFunction, false );
		}
	}

	var removeEvent = function( element, eventType, eventFunction ) {
		if ( element.detachEvent ) {
			element.detachEvent( 'on' + eventType, eventFunction );
		} else if ( element.removeEventListener ) {
			element.removeEventListener( eventType, eventFunction, false );
		}
	}

	var setup = function() {

		var dim = new windowDimensions();

		overlay.setAttribute( 'id', 'lightbox' );
		overlay.style.position		= 'absolute';
		overlay.style.top			= '0';
		overlay.style.left			= '0';
		overlay.style.width			= '100%';
		overlay.style.overflow		= 'hidden';
		overlay.style.height		= dim.pageY + 'px';

		background.setAttribute( 'id', 'lightbox-bg' );
		background.style.position	= 'absolute';
		background.style.top		= '0';
		background.style.left		= '0';
		background.style.width		= '100%';
		background.style.height		= dim.pageY + 'px';

		content.setAttribute( 'id', 'lightbox-content' );
		content.style.position		= 'absolute';
		content.style.padding		= '10px';
		content.style.visibility	= 'hidden';

		loading.setAttribute( 'id', 'lightbox-loading' );
		loading.style.position		= 'absolute';

		close.setAttribute( 'id', 'lightbox-close' );
		close.style.position		= 'absolute';
		close.style.top				= '0px';
		close.style.right			= '20px';

		caption.setAttribute( 'id', 'lightbox-caption' );
		caption.style.position		= 'absolute';
		caption.style.bottom		= parseInt( content.style.padding ) + 3 + 'px';
		caption.style.left			= parseInt( content.style.padding ) + 3 + 'px';
		caption.innerHTML			= element.title;

		number.setAttribute( 'id', 'lightbox-number' );
		number.style.position		= 'absolute';
		number.style.bottom			= parseInt( content.style.padding ) + 3 + 'px';
		number.style.right			= parseInt( content.style.padding ) + 3 + 'px';
		number.style.visibility		= 'hidden';

		prevImg.setAttribute( 'id', 'lightbox-prev-img' ); 
		prevImg.style.position		= 'absolute';
		prevImg.style.top			= '200px';
		prevImg.style.left			= '0px';
		prevImg.style.width			= '60px';
		prevImg.style.height		= '65px';
		prevImg.style.visibility	= 'hidden';

		prev.appendChild( prevImg );
		
		nextImg.setAttribute( 'id', 'lightbox-next-img' ); 
		nextImg.style.position		= 'absolute';
		nextImg.style.top			= '200px';
		nextImg.style.right			= '0px';
		nextImg.style.width			= '60px';
		nextImg.style.height		= '65px';
		nextImg.style.visibility	= 'hidden';

		next.appendChild( nextImg );
		
		var top  = dim.scrollTop + ( ( dim.windowY - loading.height - 15 ) / 2);
		var left = ( ( dim.pageX - loading.width - 15 ) / 2);

		loading.style.top	= ( top < 0 )  ? '0px' : top + 'px';
		loading.style.left	= ( left < 0 ) ? '0px' : left + 'px';

		overlay.appendChild( background );
		overlay.appendChild( loading );
		overlay.appendChild( content );
		
		content.appendChild( image );
		content.appendChild( prev );
		content.appendChild( next );
		content.appendChild( caption );
		content.appendChild( number );
		content.appendChild( close );

		body.appendChild( overlay );

		addEvent( image, 'load', lightbox.display );
		addEvent( overlay, 'click', lightbox.close );
		addEvent( window, 'scroll', lightbox.center );
		addEvent( window, 'resize', lightbox.resize );

		image.src = element.href;

	}

	this.display = function() {

		imageX = image.width;
		imageY = image.height;

		lightbox.grouping();
		lightbox.resize();
		content.style.visibility = 'visible';

		if ( group && group['caption'][imageNum] ) {
			caption.innerHTML = group['caption'][imageNum];
			caption.style.visibility = 'visible';
		} else if ( !group && element.title ) {
			caption.innerHTML = element.title;
			caption.style.visibility = 'visible';
		} else {
			caption.innerHTML = '';
			caption.style.visibility = 'hidden';
		}

		overlay.removeChild( loading );

	}

	this.grouping = function() {

		content.style.visibility = 'hidden';

		if ( !document.getElementById( 'lightbox-loading' ) ) {
			overlay.appendChild( loading );
		}

		if ( group ) {

			for ( var i in group['source'] ) {
				if ( group['source'][i] == image.src ) {
					imageNum = i;
				}
			}

			number.innerHTML = ( parseInt(imageNum) + 1 ) + ' of ' + group['source'].length;
			number.style.visibility = 'visible';

			if ( parseInt(imageNum) > 0 ) {
					
				prev.setAttribute( 'id', 'lightbox-prev' );
				prev.onmouseover = function() {
					prevImg.style.visibility = 'visible';
				}
				prev.onmouseout = function() {
					prevImg.style.visibility = 'hidden';
				}
				prev.onclick = function() {
					element.href = group['source'][parseInt(imageNum) - 1];
					lightbox.close();
					new createLightbox( element, group );
					
				};

				prev.style.visibility = 'visible';

			} else {
				prev.style.visibility = 'hidden';
			}

			if ( imageNum < group['source'].length - 1 ) {
				 
				next.setAttribute( 'id', 'lightbox-next' );
				next.onmouseover = function() {
					nextImg.style.visibility = 'visible';
				}
				next.onmouseout = function() {
					nextImg.style.visibility = 'hidden';
				}
				next.onclick = function() {
					element.href = group['source'][parseInt(imageNum) + 1];
					lightbox.close();
					new createLightbox( element, group );
					
				};

				next.style.visibility = 'visible';

			} else {
				next.style.visibility = 'hidden';
			}
		
		}

	}

	this.resize = function() {

		if ( image.height == 0 && image.width == 0 ) {
			pause = window.setTimeout( lightbox.resize, 15 );
		} else {
			window.clearTimeout( pause );
			if ( !imageOrigX && !imageOrigY ) {
				imageOrigX = image.width;
				imageOrigY = image.height;
			}
		}

		image.width		= imageOrigX;
		image.height	= imageOrigY;
      
		var dim     = new windowDimensions();
		var padding = parseInt( content.style.padding ) * 4;
		var percent;

		if ( imageX >= dim.windowX - padding ) {
			percent        = ( dim.windowX / imageX ) * 0.8;
			image.width    =  imageX * percent;
			image.height   =  imageY * percent;
		} 

		if ( image.height >= dim.windowY - padding ) {
			percent        = ( dim.windowY / imageY ) * 0.8;
			image.width    =  imageX * percent;
			image.height   =  imageY * percent;
		}

		next.style.width	= ( parseInt( content.style.padding ) + image.width ) / 2 + 'px';
		next.style.height	= ( ( 2 * parseInt( content.style.padding ) ) + image.height ) + 'px';
		nextImg.style.top	= ( parseInt( next.style.height ) / 2) - 30  + 'px';

		prev.style.width	= ( parseInt( content.style.padding ) + image.width ) / 2 + 'px';
		prev.style.height	= ( ( 2 * parseInt( content.style.padding ) ) + image.height ) + 'px';
		prevImg.style.top	= ( parseInt( prev.style.height ) / 2) - 30  + 'px';

		lightbox.center();

	}

	this.center = function() {

		var dim = new windowDimensions();

		overlay.style.height    = dim.pageY + 'px';
		background.style.height = dim.pageY + 'px';

		var top  = dim.scrollTop + ( ( dim.windowY - image.height - parseInt( content.style.padding ) - 15 ) / 2);
		var left = ( ( dim.pageX - image.width - parseInt( content.style.padding ) - 15 ) / 2);

		content.style.top   = ( top < 0 )  ? '0px' : top + 'px';
		content.style.left  = ( left < 0 ) ? '0px' : left + 'px';

		lightbox.show();

	}

	this.show = function() {
		content.style.visibility = 'visible';
	}

	this.close = function() {
		body.removeChild( overlay );
		removeEvent( image, 'load', lightbox.display );
		removeEvent( overlay, 'click', lightbox.close );
		removeEvent( window, 'scroll', lightbox.center );
		removeEvent( window, 'resize', lightbox.resize );
		window.clearTimeout( pause );
	}

	var windowDimensions = function() {
      
		if ( self.innerHeight ) {
			this.windowX = self.innerWidth;
			this.windowY = self.innerHeight;
		} else if ( document.documentElement && document.documentElement.clientHeight ) {
			this.windowX = document.documentElement.clientWidth;
			this.windowY = document.documentElement.clientHeight;
		} else if ( document.body ) {
			this.windowX = document.body.clientWidth;
			this.windowY = document.body.clientHeight;
		}

		if ( window.innerHeight && window.scrollMaxY ) {	
			this.scrollX = document.body.scrollWidth;
			this.scrollY = window.innerHeight + window.scrollMaxY;
		} else if ( document.body.scrollHeight > document.body.offsetHeight ){
			this.scrollX = document.body.scrollWidth;
			this.scrollY = document.body.scrollHeight;
		} else {
			this.scrollX = document.body.offsetWidth;
			this.scrollY = document.body.offsetHeight;
		}

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

		if ( this.scrollX < this.windowX ) {
			this.pageX = this.windowX;
		} else {
			this.pageX = this.scrollX;
		}

		if ( this.scrollY < this.windowY ) {
			this.pageY = this.windowY;
		} else {
			this.pageY = this.scrollY;
		}

	}

	loading.onload = setup;
	loading.src = 'images/lightbox/lightbox-loading.gif';

}

window.onload = initLightbox;