//global constants
var FADE_RATE = "slow";	//rate at which to adjust opacity
							//can be a number 0-1000 or one of the strings:
							//"slow", "normal" or "fast"
var IMAGE_ID = "image_in_show";//id of image object
var COVER_ID = "cover_in_show";//id of DIV cover object
var WAITER_ID = "waiter";//id of the waiting image object
var WAITER_URL = "/gfx/loader.gif";//url to waiter graphic
var IE = (navigator.appName == "Microsoft Internet Explorer") ? true : false;//is the current browser IE?
var DOCUMENT = (document.documentElement) ? document.documentElement : document.body;//body element to use for screen dimensions
var BODY_DARK = 0.85;//fade body to this level (0 [translucent] - 100 [opaque])
var COVER_CLASS = "cover";//name of the div class used to style the cover
var IMAGE_CLASS = "show";//name of the image class used to style the center image
var WAITER_CLASS = "waiter";//name of the class used to style the waiting icon
var FADE = true;//should the image fade in?

//global variables
var cover_added = false;//has the cover been added to the body
var waiter_added = false;//has the waiter been added to the body
var image_src = "";//source of image to be displayed in show
var original_dim = [-1,-1];//original dimension of the image (position 0 = width; position 1 = height)
var new_image = false;//are we showing a new image?
var image_downloaded = false;//has the image to be shown on the full screen been completely downloaded
var waiter_on = false;//whether loading graphic is currently displayed
var show_started = false;//is an image show currently running?

function ProcessAfterImageFade() {
	if(document.getElementById(IMAGE_ID) == null) return;
	var parent = document.getElementById(IMAGE_ID).parentNode;//remove image from body
	parent.removeChild(document.getElementById(IMAGE_ID));
}

/*
 * Remove the image show from the screen, including waiting graphic, image, and cover.
 */
function HideImage() {
	if(waiter_on) {//remove waiter graphic from screen; do not fade because it looks bad
		document.getElementById(WAITER_ID).style.display = "none";
		waiter_on = false;
	}
	if(FADE) {
		$(document.getElementById(IMAGE_ID)).fadeOut(FADE_RATE,function() {
			ProcessAfterImageFade();
			$(document.getElementById(COVER_ID)).fadeOut(FADE_RATE,function() {
				show_started = false;
				if(waiter_on) {
					document.getElementById(WAITER_ID).style.display = "none";
					waiter_on = false;
				}
			});
		});
	} else {
		ProcessAfterImageFade();
		document.getElementById(COVER_ID).style.display = "none";
		show_started = false;
	}
}

/*
 * Returns the dimension of the window in pixels.
 * OUTPUT: array dim with dim[0] = width and dim[1] = height
 */
function GetScreenDimensions() {
	var dim = [-1,-1];
	if(!IE) {
		dim[0] = window.innerWidth;
		dim[1] = window.innerHeight;
	} else if(document.documentElement && (document.documentElement.clientWidth || document.documentElement.clientHeight)) { 
		dim[0] = document.documentElement.clientWidth;
		dim[1] = document.documentElement.clientHeight;
	} else if(document.body && (document.body.clientWidth || document.body.clientHeight)) {
		dim[0] = document.body.clientWidth;
		dim[1] = document.body.clientHeight;
	}
	return dim;
}

/*
 * Place the waiter graphic in the center of the screen.
 */
function CenterWaiter() {
	var waiter = document.getElementById(WAITER_ID);
	if(waiter == null || !waiter_on) return;
	var dim = GetScreenDimensions();
	var width = dim[0];
	var height = dim[1];
	if(width < 0 || height < 0) {
		waiter.style.top = "0px";
		waiter.style.left = "0px";
		return;
	}
	if(jQuery.browser.msie && jQuery.browser.version < 7) {
		waiter.style.top = (height/2-16)+DOCUMENT.scrollTop+"px";
		waiter.style.left = (width/2-16)+DOCUMENT.scrollLeft+"px";
	} else {
		waiter.style.top = (DOCUMENT.clientHeight/2-16)+"px";
		waiter.style.left = (DOCUMENT.clientWidth/2-16)+"px";
	}
}

/*
 * Place the image at the center of the screen.
 */
function CenterImage(begin_show) {
	var image = document.getElementById(IMAGE_ID);
	if(image == null) return;
	var dim = GetScreenDimensions();
	var width = dim[0];
	var height = dim[1];
	if(width < 0 || height < 0) {
		image.style.top = "0px";
		image.style.left = "0px";
		return;
	}
	if(new_image) {	//original size needs to be saved when centering
		image.style.visibility = "hidden";//hide image temporarily to get image dimensions
		image.style.display = "inline";
		original_dim[0] = image.width;
		original_dim[1] = image.height;
		new_image = false;
		image.style.display = "none";//return image style to original settings
		image.style.visibility = "visible";
	}
	var new_dim = NormalizeDimensions(original_dim[0],original_dim[1],dim);
	image.style.width = new_dim[0]+"px";
	image.style.height = new_dim[1]+"px";
	if(jQuery.browser.msie && jQuery.browser.version < 7) {
		image.style.top = (height/2-new_dim[1]/2)+DOCUMENT.scrollTop+"px";
		image.style.left = (width/2-new_dim[0]/2)+DOCUMENT.scrollLeft+"px";
	} else {
		image.style.top = (DOCUMENT.clientHeight/2-new_dim[1]/2)+"px";
		image.style.left = (DOCUMENT.clientWidth/2-new_dim[0]/2)+"px";
	}
}

/*
 * Make the waiter graphic visible, if the image is downloading.
 */
function ShowWaiter() {
	if(image_downloaded) {
		image_downloaded = false;
		return;
	}
	waiter_on = true;
	var waiter = document.getElementById(WAITER_ID);
	CenterWaiter();
	if(FADE) $(document.getElementById(WAITER_ID)).fadeIn(FADE_RATE,function() {
			if(!show_started) {
				document.getElementById(WAITER_ID).style.display = "none";
				waiter_on = false;
			}
		});
	else {
		if(show_started) sdocument.getElementById(WAITER_ID).style.display = "inline";
		else waiter_on = false;
	}
}

/*
 * Put the black cover on the screen.
 */
function ShowCover() {
	if(FADE)
		$(document.getElementById(COVER_ID)).fadeIn(FADE_RATE,ShowWaiter);
	else {
		document.getElementById(COVER_ID).style.display = "inline";
		ShowWaiter();
	}
}

/*
 * Takes the image width and height and returns a dimension so that the image
 * fits on the screen and respects the original aspect ratio.
 * INPUT: image width, image height, screen dimensions
 * OUTPUT:  array with normalized image width (at position 2) and image height (at position 1)
 */
function NormalizeDimensions(width,height,dim) {
	var new_dim = [width,height];
	if(width > dim[0]) {
		if(height > dim[1]) {
			var ratio1 = parseFloat(dim[0])/parseFloat(width);
			var ratio2 = parseFloat(dim[1])/parseFloat(height);
			if(ratio1 > ratio2) {
				new_dim[0] = parseInt(ratio2*parseFloat(width));
				new_dim[1] = dim[1];
			} else {
				new_dim[0] = dim[0];
				new_dim[1] = parseInt(ratio1*parseFloat(height));
			}
		} else {
			new_dim[0] = dim[0];
			var ratio = parseFloat(dim[0])/parseFloat(width);
			new_dim[1] = parseInt(ratio*parseFloat(height));
		}
	} else if(height > dim[1]) {
		new_dim[1] = dim[1];
		var ratio = parseFloat(dim[1])/parseFloat(height);
		new_dim[0] = parseInt(ratio*parseFloat(width));
	}
	return new_dim;
}

/*
 * Add image node to document body.
 */
function AddImageToBody(src) {
	var image = document.createElement("IMG");
	image.id = IMAGE_ID;
	image.onclick = HideImage;
	if(!IE)	image.setAttribute("class",IMAGE_CLASS);
	else image.className = IMAGE_CLASS;
	if(jQuery.browser.msie && jQuery.browser.version < 7)
		image.style.position = "absolute";
	image.onload = function() {
		image_downloaded = true;
		CenterImage();
		if(FADE) $(document.getElementById(IMAGE_ID)).fadeIn(FADE_RATE,function() {
				document.getElementById(WAITER_ID).style.display = "none";
			});
		else {
			document.getElementById(IMAGE_ID).style.display = "inline";
			document.getElementById(WAITER_ID).style.display = "none";
		}
	}
	document.body.appendChild(image);
	new_image = true;
	image.src = src;
}

function ResizeCover() {
	if(jQuery.browser["safari"])
		document.getElementById(COVER_ID).style.height = DOCUMENT.clientHeight+"px";
	if(jQuery.browser.msie && jQuery.browser.version < 7) {
		document.getElementById(COVER_ID).style.width = DOCUMENT.scrollWidth+"px";
		document.getElementById(COVER_ID).style.height = DOCUMENT.scrollHeight+"px";
	}
}

/*
 * Add the image element to the document as well as the cover that is used
 * to dim the document body when an image is to be displayed.  The cover
 * is simply a DIV element that expands over the full screen and has a black
 * background.
 */
function AddCoverToBody() {
	var cover = document.createElement("DIV");
	cover.onclick = HideImage;
	cover.id = COVER_ID;
	if(!IE) cover.setAttribute("class",COVER_CLASS);
	else cover.className = COVER_CLASS;
	document.body.appendChild(cover);
	cover = document.getElementById(COVER_ID);
	if(!(jQuery.browser.msie && jQuery.browser.version < 7))
		cover.style.position = "fixed";
	else {
		cover.style.width = DOCUMENT.scrollWidth+"px";
		cover.style.height = DOCUMENT.scrollHeight+"px";
	}
	if(jQuery.browser["safari"])
		cover.style.height = DOCUMENT.clientHeight+"px";
	AddEvent(window,'resize',ResizeCover);
	AddEvent(window,'resize',CenterImage);
	AddEvent(window,'resize',CenterWaiter);
	cover_added = true;
}

/*
 * Add the icons for the waiting graphic to the body.  These icons are shown when the
 * image takes extra long to download.
 */
function AddWaiterToBody(base) {
	var waiter = document.createElement("IMG");
	waiter.id = WAITER_ID;
	if(!IE) waiter.setAttribute("class",WAITER_CLASS);
	else waiter.className = WAITER_CLASS;
	if(jQuery.browser.msie && jQuery.browser.version < 7)
		waiter.style.position = "absolute";
	document.body.appendChild(waiter);
	waiter.src = base+WAITER_URL;
	waiter_added = true;
}

/*
 * Called when a user clicks an image in the information box that pops up
 * under an icon.
 * INPUT: Full URL to the image.  The assumption is that the URL is of the form
 * base+"/media/some_name.jpg".
 */
function OpenImageShow(src) {
	if(!show_started) {
		if(src == null || src == "") return;
		show_started = true;
		var base = src.substring(0,src.lastIndexOf("/"));
		base = base.substring(0,base.lastIndexOf("/"));
		if(!cover_added) AddCoverToBody();
		if(!waiter_added) AddWaiterToBody(base);
		ShowCover();
		var end = src.lastIndexOf('?');
		if(end >= 0) src = src.substring(0,end);//strip the query parameters
		src += "?maxWidth=1000&maxHeight=1000";
		AddImageToBody(src);
	}
}