/******************************************
* AWD JS Library
* Set: Gallery Lightbox
* Author: Matthew Camp
* Created: 6th May 2009
* Last Updated: 6th May 2009
* ________________________________________________________________________________
* MAIN FUNCTION LIST, call each function within the HTML using the class attribute of the element
* ________________________________________________________________________________
* JavaScript:GalleryLightbox - [a tags only] - show the child image within a lightbox
*
/******************************************
* INITIATE GLOBAL VARIABLES AND ADD EVENT LISTENERS
*******************************************/
// variables
var preloaderSrc = "images/ani_black_circle.gif";
var imagePadding = 14;//should be double of css value
var startWidth = 100;
var startHeight = 100;
var growSpeed = 30;
var growEasing = 50;
var fadeOpacity = 1.0;
var ieFadeOpacity = 100;
var fadeEasing = 0.10;
var ieFadeEasing = 10;
var differenceSpeed = 6;
// Add events to html
AddOnloadEvent(PrepareGalleryBoxes);
//load preloader image
var preloader = new Image();
preloader.src = preloaderSrc;

/******************************************
* EVENT LISTENERS
*******************************************/

function PrepareGalleryBoxes(){
	var elements = document.getElementsByTagName("a");
	for(var i = 0; i < elements.length; i ++){
		if(elements[i].className && elements[i].className.match("JavaScript:GalleryLightbox")){
			elements[i].onclick = function(){
				GalleryLightbox(this);
				return false;
			}
		}
	}
}

function GalleryLightbox(element){
	setOverlay();
	// create lightbox div
	var lightBox = document.createElement("div");
	lightBox.setAttribute("id","gallery_light_box");
	document.getElementsByTagName("body")[0].appendChild(lightBox);
	// get positions
	var bodyWidth = GetBodyDimensions()[0];
	var bodyHeight = GetBodyDimensions()[1];
	var windowHeight = GetWindowDimensions()[1];
	var scrollLocation = GetScrollPosition();
	//set lightbox positions
	lightBox.style.width = startWidth + "px";
	lightBox.style.height = startHeight + "px";
	lightBox.style.top = ((windowHeight / 2) + scrollLocation) - (startHeight / 2) + "px";
	lightBox.style.left = (bodyWidth / 2) - (startWidth / 2) + "px";
	displayPreloader();
	
	var image = new Image();
	image.onload = function(){
		var imageWidth = this.width;
		var imageHeight = this.height;
		CreateLightBox(element,image,imageWidth,imageHeight);
		// have to return true otherwise IE throws a paddy
    	return true;
	}
	// src has to be after onload because IE throws another paddy
	image.src = element.href;
}
// add the lightbox
function CreateLightBox(element,image,imageWidth,imageHeight){
	// create lightbox div
	var lightBox = document.getElementById("gallery_light_box");
	if(lightBox == null){
		lightBox = document.createElement("div");
		lightBox.setAttribute("id","gallery_light_box");
		document.getElementsByTagName("body")[0].appendChild(lightBox);	
	}
	removePreloader();
	fixRolloverBug();
	// get positions
	var bodyWidth = GetBodyDimensions()[0];
	var bodyHeight = GetBodyDimensions()[1];
	var windowHeight = GetWindowDimensions()[1];
	var scrollLocation = GetScrollPosition();
	//set lightbox positions
	lightBox.style.width = startWidth + "px";
	lightBox.style.height = startHeight + "px";
	var lightHeight = lightBox.offsetHeight;
	var lightWidth = lightBox.offsetWidth;
	// aimate width
	var maxWidth = imageWidth + imagePadding;
	var maxHeight = imageHeight + imagePadding;
	var speed = growSpeed;
	growWidth = setInterval(function widthAnimation(){
		speed -= speed / growEasing;
		var lightWidth = lightBox.offsetWidth + speed;
		lightBox.style.width = lightWidth + "px";
		lightBox.style.left = (bodyWidth / 2) - (lightWidth / 2) + "px";
		if(lightWidth >= maxWidth){
			lightBox.style.width = maxWidth + "px";
			clearInterval(growWidth);
			growHeight();
		}
	},45);
	function growHeight(){
		// animate height
		var speed = growSpeed;
		growHeight = setInterval(function heightAnimation(){
			speed -= speed / growEasing;
			var lightHeight = lightBox.offsetHeight + speed;
			lightBox.style.height = lightHeight + "px";
			lightBox.style.top = ((windowHeight / 2) + scrollLocation) - (lightHeight / 2) + "px";
			//lightBox.style.left = (bodyWidth / 2) - (lightWidth / 2) + "px";
			if(lightHeight >= maxHeight){
				clearInterval(growHeight);
				lightBox.style.height = maxHeight + "px";
				addImage();
			}
		},45);
	}
	function addImage(){
		var imageHolder = document.createElement("img");
		imageHolder.src = image.src;
		imageHolder.style.opacity = .0;
		imageHolder.style.filter = "alpha(opacity="+0+")"; 
		lightBox.appendChild(imageHolder);
		// fade image in
		allOpacity = 0;
		ieOpacity = 0;
		imageFadeIn = setInterval(function fadeIn(){
			allOpacity += fadeEasing;
			ieOpacity += ieFadeEasing;
			imageHolder.style.opacity = allOpacity;
			imageHolder.style.filter = "alpha(opacity="+ieOpacity+")"; 
			if(allOpacity >= 1 && ieOpacity >= 100){
				element.style.opacity = 1;
				element.style.filter = "alpha(opacity=100)";
				clearInterval(imageFadeIn);
				animateInfo();
			}
		},45);
	}
	function animateInfo(){
		infoBox = document.createElement("div");
		infoBox.setAttribute("id","gallery_info");
		document.getElementsByTagName("body")[0].appendChild(infoBox);
		infoBox.style.top = TopPosition(lightBox) + lightBox.offsetHeight + "px";
		infoBox.style.left = LeftPosition(lightBox) + "px";
		infoBox.style.width = lightBox.offsetWidth + "px";
		// add photo title
		titleText = document.createElement("p");
		titleText.setAttribute("class","bold");
		titleText.setAttribute("className","bold");
		infoBox.appendChild(titleText);
		titleText.innerHTML = element.title;
		titleText.style.visibility = "hidden";
		// add photo description
		descriptionText = document.createElement("p");
		infoBox.appendChild(descriptionText);
		descriptionText.innerHTML = element.rel;
		descriptionText.style.visibility = "hidden";
		var infoMaxHeight = infoBox.offsetHeight + (imagePadding / 2);
		// animate info box
		titleText.style.display = "none";
		descriptionText.style.display = "none";
		infoBox.style.height = "0px";
		var speed = growSpeed / 5;
		infoAni = setInterval(function infoAnimation(){
			speed -= speed / growEasing;
			var boxHeight = infoBox.offsetHeight + speed;
			infoBox.style.height = boxHeight + "px";
			if(boxHeight > infoMaxHeight){
				clearInterval(infoAni);
				infoBox.style.height = infoMaxHeight + "px";
				showInfo();
			}
		},45);
	}
	function showInfo(){
		// show photo title
		titleText.style.display = "block";
		descriptionText.style.display = "block";
		titleText.style.visibility = "visible";
		descriptionText.style.visibility = "visible";
		// create close button
		closeButton = document.createElement("a");
		closeButton.setAttribute("class","close");
		closeButton.setAttribute("href","#");
		closeButton.setAttribute("className","close");
		infoBox.appendChild(closeButton);
		// set close button position
		closeButton.style.top = "0px";
		closeButton.style.left = infoBox.offsetWidth - closeButton.offsetWidth - (imagePadding / 2) + "px";
		// close button functionality
		closeButton.onclick = function(){
			while(infoBox.hasChildNodes()){
				infoBox.removeChild(infoBox.lastChild);
			}
			document.getElementsByTagName("body")[0].removeChild(infoBox);
			while(lightBox.hasChildNodes()){
				lightBox.removeChild(lightBox.lastChild);
			}
			document.getElementsByTagName("body")[0].removeChild(lightBox);
			removeOverlay();
			return false;
		}
		LightboxNavigation(element);
	}
	
}
// prepare prev and next button if required
function LightboxNavigation(element){
	var imageArray = Array();
	var imageLinks = document.getElementsByTagName("a");
	var prevImage;
	for(var i = 0; i < imageLinks.length; i ++){
		
		if(imageLinks[i].className && imageLinks[i].className.match("JavaScript:GalleryLightbox")){
			imageArray.push(imageLinks[i]);
			if(imageLinks[i] == element){
				prevImage = (i != 0) ? imageLinks[i - 1] : "";
				nextImage = (i != imageLinks.length) ? imageLinks[i + 1] : "";
			}
		}
	}
	// if more than one image proceed
	var totalImages = imageArray.length;
	var lastImage = totalImages - 1;
	var galleryBox = document.getElementById("gallery_light_box");
	if(totalImages > 0){
		// if current image is not first image
		if(imageArray[0] != element){
			// add left column, previous button
			leftColumn = document.createElement("div");
			leftColumn.setAttribute("class","left_column");
			leftColumn.setAttribute("className","left_column");
			galleryBox.appendChild(leftColumn);
			// position for previous column
			leftColumn.style.top = "0px";
			leftColumn.style.left = "0px";
			leftColumn.style.width = (galleryBox.offsetWidth / 2) + "px";
			leftColumn.style.height = galleryBox.offsetHeight + "px";
			leftColumn.onmouseover = function(){
				leftColumn.className += " prev_hover";
			}
			leftColumn.onmouseout = function(){
				var newClass = leftColumn.className.replace(" prev_hover","");
				leftColumn.className = newClass;
			}
			leftColumn.onclick = function(){
				PrepareSelectedImage(prevImage);
			}
		}
		if(imageArray[lastImage] != element){
			// add left column, previous button
			rightColumn = document.createElement("div");
			rightColumn.setAttribute("class","right_column");
			rightColumn.setAttribute("className","right_column");
			galleryBox.appendChild(rightColumn);
			// position for previous column
			rightColumn.style.top = "0px";
			rightColumn.style.left = (galleryBox.offsetWidth / 2) + "px";
			rightColumn.style.width = (galleryBox.offsetWidth / 2) + "px";
			rightColumn.style.height = galleryBox.offsetHeight + "px";
			rightColumn.onmouseover = function(){
				rightColumn.className += " next_hover";
			}
			rightColumn.onmouseout = function(){
				var newClass = rightColumn.className.replace(" next_hover","");
				rightColumn.className = newClass;
			}
			rightColumn.onclick = function(){
				PrepareSelectedImage(nextImage);
			}
		}
	}
}
// Prepare image when use of navigation
function PrepareSelectedImage(element){
	displayPreloader();
	var image = new Image();
	image.onload = function(){
		var imageWidth = this.width;
		var imageHeight = this.height;
		UpdateLightBox(element,image,imageWidth,imageHeight);
		removePreloader();
		// have to return true otherwise IE throws a paddy
    	return true;
	}
	// src has to be after onload because IE throws another paddy
	image.src = element.href;
	var infoBox = document.getElementById("gallery_info");
	while(infoBox.hasChildNodes()){
		infoBox.removeChild(infoBox.lastChild);
	}
	document.getElementsByTagName("body")[0].removeChild(infoBox);
	var lightBox = document.getElementById("gallery_light_box");
	while(lightBox.hasChildNodes()){
		lightBox.removeChild(lightBox.lastChild);
	}
}
// update lightbox
function UpdateLightBox(element,image,imageWidth,imageHeight){
	// update lightbox div
	var lightBox = document.getElementById("gallery_light_box");
	// current positions
	var bodyWidth = GetBodyDimensions()[0];
	var bodyHeight = GetBodyDimensions()[1];
	var windowHeight = GetWindowDimensions()[1];
	var scrollLocation = GetScrollPosition();
	var currentWidth = lightBox.offsetWidth;
	var currentHeight = lightBox.offsetHeight;
	var currentTop = TopPosition(lightBox);
	var currentLeft = LeftPosition(lightBox);
	// new positions
	var maxWidth = imageWidth + imagePadding;
	var maxHeight = imageHeight + imagePadding;
	if(currentWidth < maxWidth){
		// aimate width
		var speed = growSpeed;
		growWidth = setInterval(function widthAnimation(){
			speed -= speed / growEasing;
			var lightWidth = lightBox.offsetWidth + speed;
			lightBox.style.width = lightWidth + "px";
			lightBox.style.left = (bodyWidth / 2) - (lightWidth / 2) + "px";
			if(lightWidth >= maxWidth){
				lightBox.style.width = maxWidth + "px";
				clearInterval(growWidth);
				updateHeight();
			}
		},45);
	}
	else if(currentWidth > maxWidth){
		// aimate width
		var speed = growSpeed;
		shrinkWidth = setInterval(function widthShrinkAnimation(){
			speed -= speed / growEasing;
			var lightWidth = lightBox.offsetWidth - speed;
			lightBox.style.width = lightWidth + "px";
			lightBox.style.left = (bodyWidth / 2) - (lightWidth / 2) + "px";
			if(lightWidth <= maxWidth){
				lightBox.style.width = maxWidth + "px";
				clearInterval(shrinkWidth);
				updateHeight();
			}
		},45);
	}
	else{
		updateHeight();
	}
	function updateHeight(){
		if(currentHeight < maxHeight){
			growUpdateHeight();
		}
		else if(currentHeight > maxHeight){
			shrinkUpdateHeight();
		}
		else{
			updateImage();
		}
	}
	function growUpdateHeight(){
		// animate height
		var updateSpeed = (maxHeight - currentHeight) / differenceSpeed;
		growHeight = setInterval(function heightAnimation(){
			updateSpeed -= updateSpeed / growEasing;
			var lightHeight = lightBox.offsetHeight + updateSpeed;
			lightBox.style.height = lightHeight + "px";
			lightBox.style.top = ((windowHeight / 2) + scrollLocation) - (lightHeight / 2) + "px";
			if(lightHeight > maxHeight){
				clearInterval(growHeight);
				lightBox.style.height = maxHeight + "px";
				updateImage();
			}
		},45);
	}
	function shrinkUpdateHeight(){
		// animate height
		var updateSpeed = (currentHeight - maxHeight) / differenceSpeed;
		shrinkHeight = setInterval(function heightShrinkAnimation(){
			updateSpeed -= updateSpeed / growEasing;
			var lightHeight = lightBox.offsetHeight - updateSpeed;
			lightBox.style.height = lightHeight + "px";
			lightBox.style.top = ((windowHeight / 2) + scrollLocation) - (lightHeight / 2) + "px";
			if(lightHeight <= maxHeight){
				clearInterval(shrinkHeight);
				lightBox.style.height = maxHeight + "px";
				updateImage();
			}
		},45);
	}
	function updateImage(){
		var imageHolder = document.createElement("img");
		imageHolder.src = image.src;
		imageHolder.style.opacity = .0;
		imageHolder.style.filter = "alpha(opacity="+0+")"; 
		lightBox.appendChild(imageHolder);
		// fade image in
		allOpacity = 0;
		ieOpacity = 0;
		imageFadeIn = setInterval(function fadeIn(){
			allOpacity += fadeEasing;
			ieOpacity += ieFadeEasing;
			imageHolder.style.opacity = allOpacity;
			imageHolder.style.filter = "alpha(opacity="+ieOpacity+")"; 
			if(allOpacity >= 1 && ieOpacity >= 100){
				element.style.opacity = 1;
				element.style.filter = "alpha(opacity=100)";
				clearInterval(imageFadeIn);
				animateUpdateInfo();
			}
		},45);
	}
	function animateUpdateInfo(){
		infoBox = document.createElement("div");
		infoBox.setAttribute("id","gallery_info");
		document.getElementsByTagName("body")[0].appendChild(infoBox);
		infoBox.style.top = TopPosition(lightBox) + lightBox.offsetHeight + "px";
		infoBox.style.left = LeftPosition(lightBox) + "px";
		infoBox.style.width = lightBox.offsetWidth + "px";
		// add photo title
		titleText = document.createElement("p");
		titleText.setAttribute("class","bold");
		titleText.setAttribute("className","bold");
		infoBox.appendChild(titleText);
		titleText.innerHTML = element.title;
		titleText.style.visibility = "hidden";
		// add photo description
		descriptionText = document.createElement("p");
		infoBox.appendChild(descriptionText);
		descriptionText.innerHTML = element.rel;
		descriptionText.style.visibility = "hidden";
		var infoMaxHeight = infoBox.offsetHeight + (imagePadding / 2);
		// animate info box
		titleText.style.display = "none";
		descriptionText.style.display = "none";
		infoBox.style.height = "0px";
		var speed = growSpeed / 5;
		infoAni = setInterval(function infoAnimation(){
			speed -= speed / growEasing;
			var boxHeight = infoBox.offsetHeight + speed;
			infoBox.style.height = boxHeight + "px";
			if(boxHeight >= infoMaxHeight){
				clearInterval(infoAni);
				infoBox.style.height = infoMaxHeight + "px";
				updateInfo();
			}
		},45);
	}
	function updateInfo(){
		// show photo title
		titleText.style.display = "block";
		descriptionText.style.display = "block";
		titleText.style.visibility = "visible";
		descriptionText.style.visibility = "visible";
		// create close button
		closeButton = document.createElement("a");
		closeButton.setAttribute("class","close");
		closeButton.setAttribute("href","#");
		closeButton.setAttribute("className","close");
		infoBox.appendChild(closeButton);
		// set close button position
		closeButton.style.top = "0px";
		closeButton.style.left = infoBox.offsetWidth - closeButton.offsetWidth - (imagePadding / 2) + "px";
		// close button functionality
		closeButton.onclick = function(){
			while(infoBox.hasChildNodes()){
				infoBox.removeChild(infoBox.lastChild);
			}
			document.getElementsByTagName("body")[0].removeChild(infoBox);
			while(lightBox.hasChildNodes()){
				lightBox.removeChild(lightBox.lastChild);
			}
			document.getElementsByTagName("body")[0].removeChild(lightBox);
			removeOverlay();
			return false;
		}
		LightboxNavigation(element);
	}
}
// creates the overlay
function setOverlay(){
	// hide select boxes
	var selects = document.getElementsByTagName("select");
	for(var i = 0; i < selects.length; i ++){
		selects[i].style.visibility = "hidden";
	}
	var overlay = document.createElement("div");
	overlay.setAttribute("id","overlay");
	document.getElementsByTagName("body")[0].appendChild(overlay);
	var bodyWidth = GetBodyDimensions()[0];
	var bodyHeight = GetBodyDimensions()[1];
	var windowHeight = GetWindowDimensions()[1];
	if(windowHeight > bodyHeight){
		setBodyHeight = windowHeight;
	}
	else{
		setBodyHeight = bodyHeight;
	}
	document.getElementById("overlay").style.height = setBodyHeight + "px";
}
// removes the overlay
function removeOverlay(){
	var overlay = document.getElementById("overlay");
	// fade image in
	allOpacity = 0.5;
	ieOpacity = 50;
	overlayFadeout = setInterval(function fadeOut(){
		allOpacity -= fadeEasing;
		ieOpacity -= ieFadeEasing;
		overlay.style.opacity = allOpacity;
		overlay.style.filter = "alpha(opacity="+ieOpacity+")"; 
		if(allOpacity <= 0 && ieOpacity <= 0){
			overlay.style.opacity = 0;
			overlay.style.filter = "alpha(opacity=0)";
			document.getElementsByTagName("body")[0].removeChild(document.getElementById("overlay"));
			clearInterval(overlayFadeout);
			showSelects();
		}
	},45);
	
	function showSelects(){
		var selects = document.getElementsByTagName("select");
		for(var i = 0; i < selects.length; i ++){
			selects[i].style.visibility = "visible";
		}
	}
}
function displayPreloader(){
	var lightBox = document.getElementById("gallery_light_box");
	var animatedGif = document.createElement("img");
	animatedGif.setAttribute("id","preload_gif");
	animatedGif.src = preloader.src;
	document.getElementsByTagName("body")[0].appendChild(animatedGif);
	var xpos = LeftPosition(lightBox) + (lightBox.offsetWidth / 2) - (animatedGif.offsetWidth / 2);
	var ypos = TopPosition(lightBox) + (lightBox.offsetHeight / 2) - (animatedGif.offsetHeight / 2);
	animatedGif.style.left = xpos + "px";
	animatedGif.style.top = ypos + "px";
	animatedGif.style.zIndex = "2000";
	animatedGif.style.position = "absolute";
}
function removePreloader(){
	var preloadGif = document.getElementById("preload_gif");
	
	document.getElementsByTagName("body")[0].removeChild(preloadGif);
}
// prepares rollover elements to preload background images
function fixRolloverBug(){
	var galleryBox = document.getElementById("gallery_light_box");
	leftColumn = document.createElement("div");
	leftColumn.setAttribute("class","left_column prev_hover");
	leftColumn.setAttribute("className","left_column prev_hover");
	galleryBox.appendChild(leftColumn);
	rightColumn = document.createElement("div");
	rightColumn.setAttribute("class","next_hover");
	rightColumn.setAttribute("className","next_hover");
	galleryBox.appendChild(rightColumn);
	galleryBox.removeChild(leftColumn);
	galleryBox.removeChild(rightColumn);
}