var myOverlay;

function initOverlay() {
	var overlayDiv = $("contentOverlay");
	
	var overlayNav = "<table border=\"0\" cellspacing=\"0\" cellpadding=\"0\"><tr><td class=\"sideCell\"><a href=\"#\" class=\"prevLink\">&laquo; Previous</a></td><td class=\"closeCell\"><a href=\"#\" onclick=\"hideOverlay();\" class=\"closeLink\">Close</a></td><td class=\"sideCell\"><a href=\"#\" class=\"nextLink\">Next &raquo;</a></td></tr></table>";
	
	var overlayHeader = new Element("div");
	overlayHeader.id = "overlayHeader";
	overlayHeader.addClassName("hd");
	overlayHeader.insert(overlayNav);
	overlayDiv.insert(overlayHeader);
	
	var overlayBody = new Element("div");
	overlayBody.addClassName("bd");
	var overlayBodyInner = new Element("div");
	overlayBodyInner.addClassName("bdInner");
	overlayBodyInner.id = "contentWindow";
	overlayBody.insert(overlayBodyInner);
	overlayDiv.insert(overlayBody);
	
	var overlayFooter = new Element("div");
	overlayFooter.id = "overlayFooter";
	overlayFooter.addClassName("ft");
	overlayFooter.insert(overlayNav);
	overlayDiv.insert(overlayFooter);
	
	myOverlay = new YAHOO.widget.Overlay("contentOverlay", {
		visible: false, 
		zIndex: 1000,
		effect: {effect: YAHOO.widget.ContainerEffect.FADE, duration: 1},
		constraintoviewport: true,
		y: 20
	});
	myOverlay.cfg.setProperty("fixedcenter", true);
	myOverlay.render();
}
function showOverlay(feature, slide) {
	var prevSlide = slide - 1;
	var nextSlide = slide + 1;
	
	// image urls
	var slideSrc = "images/interiors/" + feature + "/850/" + feature + "_f0" + slide + ".jpg";
	var nextSlideSrc = "images/interiors/" + feature + "/850/" + feature + "_f0" + nextSlide + ".jpg";
	
	// set up slide navigation (previous and next buttons)
	var overlayNav = "<table border=\"0\" cellspacing=\"0\" cellpadding=\"0\" style=\"background-image: url(" + nextSlideSrc + "); background-repeat: no-repeat; background-position: -5000px -5000px;\"><tr><td class=\"sideCell\"><a href=\"#\" class=\"prevLink\" onclick=\"showOverlay('" + feature + "', " + prevSlide + ");\">&laquo; Previous</a></td><td class=\"closeCell\"><a href=\"#\" onclick=\"hideOverlay();\" class=\"closeLink\">Close</a></td><td class=\"sideCell\"><a href=\"#\" class=\"nextLink\" onclick=\"showOverlay('" + feature + "', " + nextSlide + ");\">Next &raquo;</a></td></tr></table>";
	$("overlayHeader").update(overlayNav);
	$("overlayFooter").update(overlayNav);
	
	var prevButtons = $$("a.prevLink");
	prevButtons.each(function(i){
		if (slide == 1) {
			i.style.visibility = "hidden";
		} else {
			i.style.visibility = "visible";
		}	 
	});
	switch (feature) {
		case "waywework":
			var maxSlide = 9;
			break;
		case "mosque":
			var maxSlide = 4;
			break;
	}
	var nextButtons = $$("a.nextLink");
	nextButtons.each(function(i){
		if (slide == maxSlide) {
			i.style.visibility = "hidden";
		} else {
			i.style.visibility = "visible";
		}	 
	});
	
	if (slide == 1) {
		// get the new image and set its height and width
		var image = new Element("img");
		image.src = slideSrc;
		image.width = 850;
		image.height = (feature == "waywework") ? 542 : 566;
		image.id = "slideImg";
		
		// get the element that will hold the image and replace its current content with the image
		var win = $("contentWindow");
		win.update(image);
		myOverlay.show();
	} else {
		$("slideImg").src = slideSrc;
	}
	
}
function hideOverlay() {
	var nextButtons = $$("a.nextLink");
	nextButtons.each(function(i){
		i.style.visibility = "hidden";	 
	});
	var prevButtons = $$("a.prevLink");
	prevButtons.each(function(i){
		i.style.visibility = "hidden"; 
	});
	myOverlay.hide();
}