var overlayBackground = null;
var overlay = null;

function initOverlay() {	
	overlayBackground = document.getElementById("img-overlay-bg");
	overlay = document.getElementById("img-overlay");
	
	//set the onclick for the background div to close the overlay
	overlayBackground.onclick = hideOverlay;
	overlay.onclick = hideOverlay;
}

function showOverlay(img, width, height, name, location, caption) {	
	//we need the body element to get its height and width
	var tagArr = document.getElementsByTagName("body");
	var bodyObj = tagArr.item(0);
	var htmlObj = getHTMLObj();
	var padding = 30;

	//disable the scroll bar
	htmlObj.style.overflowY = "hidden";

	var captionHTML = "";
	if (caption != "undefined" && caption != "") {
		captionHTML = "<div>" + caption + "</div>";
		padding += 30;
	}
	var overlayHeight = height + padding;
	var overlayWidth = width;

	//dynamically place image inside of the overlay
	overlay.style.width = overlayWidth + "px";
	overlay.style.height = overlayHeight + "px";
	overlay.innerHTML = "<div><a href=\"javascript: void(0);\" onclick=\"hideOverlay()\">Close Window</a>" + name + " at " + location + "</div><img id=\"dynamic-img\" src=\"" + img + "\" width=\"" + width + "\" height=\"" + height + "\" />" + captionHTML; 

	//based on the height of the image, center the overlay
	var imageObj = document.getElementById("dynamic-img");
	var leftValue = (bodyObj.clientWidth - overlayWidth) / 2;
	var topValue = (bodyObj.clientHeight - overlayHeight) / 2;
	
	if (leftValue < 0)
		leftValue = 0;
		
	if (topValue < 0)
		topValue = 0;
		
	overlayBackground.style.height = bodyObj.clientHeight + "px";
	overlayBackground.style.width = bodyObj.clientWidth + "px";
	overlayBackground.style.top = htmlObj.scrollTop + "px";
	overlayBackground.style.left = htmlObj.scrollLeft + "px";

	overlay.style.top = topValue + htmlObj.scrollTop + "px";
	overlay.style.left = leftValue + htmlObj.scrollLeft + "px";
	
	//display the background and overlay
	overlayBackground.style.display = "block";
	overlay.style.display = "block";
}

function hideOverlay() {
	overlayBackground.style.display = "none";
	overlay.style.display = "none";
	
	//enable the scrollbars
	getHTMLObj().style.overflowY = "scroll";
}

function getHTMLObj() {
	var tagArr = document.getElementsByTagName("html");
	return tagArr.item(0);;
}