/**********************************************************************************************

Fader v0.1.6
by Matthew Riley (matt [at] lonelyvegan [dot] com), with thanks to David Nordlund

**********************************************************************************************/

//You can copy any/all of the following four variables and declare them on a specific page if you
//want to override them.

//Set the amount of time (in milliseconds) for the image fade in and fade out to take.
var fadetime = 200;
//Set the amount of time (in milliseconds) for the background fade in and fade out to take.
var bgfadetime = 500;
//Set the style of the bg that appears behind the image and in front of the rest of the page.
var bgstyle = "#FFFFFF";
//Set the opacity level of the bg.
var bgopacity = "80";

//These variables shouldn't be set on the page; they're fine here, as they don't do anything
//style-wise.

var imageison = false;

var viewportw = document.documentElement.clientWidth;
var viewporth = document.documentElement.clientHeight;

function opacity(id, opacStart, opacEnd, millisec) {
	//Speed for each frame.
	var speed = Math.round(millisec / 100);
	var timer = 0;

	//Determine the direction for the blending; if start and end are the same. nothing happens.
	if(opacStart > opacEnd) {
		for(i = opacStart; i >= opacEnd; i--) {
			setTimeout("changeOpac(" + i + ",'" + id + "')",(timer * speed));
			timer++;
		}
	}
	
	else if(opacStart < opacEnd) {
		for(i = opacStart; i <= opacEnd; i++) {
			setTimeout("changeOpac(" + i + ",'" + id + "')",(timer * speed));
			timer++;
		}
	}
	
}

function changeOpac(opacity, id) {
	//Change the opacity for different browsers.
	var object = document.getElementById(id).style; 
	object.opacity = (opacity / 100);
	object.MozOpacity = (opacity / 100);
	object.KhtmlOpacity = (opacity / 100);
	object.filter = "alpha(opacity=" + opacity + ")";
	
}

function shiftOpacity(id, millisec) {
	//if an element is invisible, make it visible, else make it ivisible
	if(document.getElementById(id).style.opacity == 0) {
		opacity(id, 0, 100, millisec);
	}
	
	else {
		opacity(id, 100, 0, millisec);
	}
	
}

function shiftBGOpacity(id, millisec) {
	//If an element is invisible, make it visible; otherwise, make it ivisible.
	if(document.getElementById(id).style.opacity == 0) {
		opacity(id, 0, bgopacity, millisec);
	}
	
	else {
		opacity(id, bgopacity, 0, millisec);
	}
	
}

function currentOpac(id, opacEnd, millisec) {
	//Standard opacity is 100.
	var currentOpac = 100;
	
	//If the element has an opacity set, get it.
	if(document.getElementById(id).style.opacity < 100) {
		currentOpac = document.getElementById(id).style.opacity * 100;
	}

	//Call for the function that changes the opacity.
	opacity(id, currentOpac, opacEnd, millisec);

}

function showImage(a, w, h) {
	//Make sure that there isn't already an image loaded.
	if (imageison == false) {
		//Checks to see whether or not the browser is IE.
		if (browser.isIE == true) {
			//IE gets no cool fade effects. The image just appears along with the bg.
			if (browser.isIE7up == true) {
				//Get the image source from the href in the hyperlink and style from the variables passed when the function is called.
				var bigimg = document.getElementById('bigimg');
				bigimg.src = a.href;
				bigimg.style.width = w;
				bigimg.style.height = h;
				
				//Center the image vertically and horizontally based on the browser's viewport.
				var bigdiv = document.getElementById('bigdiv');
				var viewportw = (document.documentElement.clientWidth / 2 - w / 2);
				var viewporth = (document.documentElement.clientHeight / 2 - h / 2);
				bigdiv.style.left = viewportw + "px";
				bigdiv.style.bottom = viewporth + "px";
				bigdiv.style.display = "block";
				
				//Set the style of the bg that covers the rest of the page behind the image.
				var PageFader = document.getElementById('PageFader');
				PageFader.style.background = bgstyle;
				PageFader.style.filter = "alpha(opacity=" + bgopacity + ")";
				PageFader.style.display = "block";
			}
			
			else {
				//And if it's not IE 7+, it just opens the image in the browser window. How boring.
				var bigimg = document.getElementById('bigimg');
				bigimg.src = a.href;
				document.location.href = bigimg.src;
			}
		}
			
		else {
			//Get the image source from the href in the hyperlink and style from the variables passed when the function is called.
			var bigimg = document.getElementById('bigimg');
			bigimg.src = a.href;
			bigimg.style.width = w;
			bigimg.style.height = h;
			
			//Do the cool fade effects.
			shiftOpacity('bigdiv', fadetime);
			shiftBGOpacity('PageFader', bgfadetime);
			
			//Center the image vertically and horizontally based on the browser's viewport.
			var bigdiv = document.getElementById('bigdiv');
			var viewportw = (document.documentElement.clientWidth / 2 - w / 2);
			if (browser.isGecko == true) {
				var viewporth = (document.documentElement.clientHeight / 2 - h / 2);
			}
			else {
				var viewporth = (document.documentElement.clientHeight / 2 - h / 12);
			}
			bigdiv.style.left = viewportw + "px";
			bigdiv.style.bottom = viewporth + "px";
			bigdiv.style.display = "block";
			
			//Set the style of the bg that covers the rest of the page behind the image.
			var PageFader = document.getElementById('PageFader');
			PageFader.style.background = bgstyle;
			PageFader.style.display = "block";
			
		}
		
		//Sets the imageison flag to true after everything is done fading in.
		setTimeout('imageison = true', fadetime);
		
	}
	
	else {
		//Hides the image instead, if there is already one displayed.
		hideImage();
	}
	
}
	
function hideImage() {
//Gets rid of the elements that were shown in showImage();
	if (imageison == true) {
		//Again, IE doesn't do the fades; it just hides the divs.
		if (browser.isIE == true) {
			var bigdiv = document.getElementById('bigdiv');
			bigdiv.style.display = "none";
			var bigimg = document.getElementById('bigimg');
			bigimg.src = null;
			var PageFader = document.getElementById('PageFader');
			PageFader.style.display = "none";
		}
		
		else {
			shiftOpacity('bigdiv', fadetime);
			shiftBGOpacity('PageFader', bgfadetime);
			setTimeout('document.getElementById("bigdiv").style.display = "none";document.getElementById("bigimg").src = null;', fadetime);
			setTimeout('document.getElementById("PageFader").style.display = "none";', bgfadetime);
		}
		
		imageison = false;
	}
	
}