/* yalstar.js
 * Yet Another Light* because lightbox and lightwindow are just too complicated.
 * Copyright 2008 - Tim Climis and Indiana University
 *
 * Contains code for animated elements with the name foobox
 */

function yalInitialize() {
	var thumbnails = $$('.yal');
	for (var i=0; i<thumbnails.length; i++) {
		thumbnails[i].rel = thumbnails[i].href;
		thumbnails[i].href="javascript:;";
	}
}

function windowPop(element,site) {  // site is needed to make the clear gif url on test and prod
	buildPopUp(site);
	updateContent(element);
	animatePopUp();
}

function windowClose() {
	animateClose();
}

function buildPopUp(site) {
	var box, content;

	if (!$("overlay")) {
		var cover = document.createElement("div");
		cover.style.zIndex = "500";
		cover.style.position = "fixed";
		cover.style.top = "0px";
		cover.style.bottom = "0px";
		cover.style.left = "0px";
		cover.style.right = "0px";
		cover.style.display = "none";
		cover.id = "overlay";
		cover.onclick = windowClose;
		document.body.appendChild(cover);
	}

	if (!$("yal_container")) {
		box = document.createElement("div");
		box.style.position = "fixed";
		box.style.zIndex = "501";
		box.id = "yal_container";
		document.body.appendChild(box);
	}
	else
		box = $("yal_container");

	if (!$("yal_titlebar")) {
		var titlebar = document.createElement("div");
		titlebar.id = "yal_titlebar";
		box.appendChild(titlebar);

		var title = document.createElement("h3");
		title.id = "yal_title";
		titlebar.appendChild(title);

		var close = document.createElement("a");
		close.setAttribute("href","javascript:;");
		close.onclick = windowClose;
		close.innerHTML = "Close";
		close.id = "yal_close";
		titlebar.appendChild(close);
	}

	if (!$("yal_content")) {
		content = document.createElement("div");
		content.style.position = "relative";
		content.id = "yal_content";
		box.appendChild(content);

		var img = document.createElement("img");
		img.alt = "";
		img.id = "yal_thing";
		content.appendChild(img);
	}
	else
		content = $("yal_content");

	if (!$("yal_caption")) {
		var caption = document.createElement("p");
		caption.id = "yal_caption";
		box.appendChild(caption);
	}

	if (!$("yal_next")) {
		var next = document.createElement("a");
		next.style.zIndex = "502";
		next.style.position = "absolute";
		next.style.display = "block";
		next.style.top = "0px";
		next.style.right = "0px";
		next.style.height = "100%";
		next.style.width = "25%";
		next.href="javascript:;";
		next.id = "yal_next";
		content.appendChild(next);

		var img = document.createElement("img");
		img.className = "yal_nav_image";
		img.src = "/~" + site + "/files/images/yalstar/clear.gif";
		img.style.display = "block";
		img.style.height = "100%";
		img.style.width = "100%";
		next.appendChild(img);
	}

	if (!$("yal_prev")) {
		var prev = document.createElement("a");
		prev.style.zIndex = "502";
		prev.style.position = "absolute";
		prev.style.display = "block";
		prev.style.top = "0px";
		prev.style.left = "0px";
		prev.style.height = "100%";
		prev.style.width = "25%";
		prev.href="javascript:;";
		prev.id = "yal_prev";
		content.appendChild(prev);

		var img = document.createElement("img");
		img.className = "yal_nav_image";
		img.src = "/~" + site + "/files/images/yalstar/clear.gif";
		img.style.display = "block";
		img.style.height = "100%";
		img.style.width = "100%";
		prev.appendChild(img);
	}
}

function updateContent(element) {
	var content = $("yal_content");

	if (element.rel.search(/(\.)(jpe?g|png|gif)/i) < 0) { // if not a picture
		var frame = document.createElement("iframe");
		frame.id = "yal_thing";
		frame.src = element.rel;
		content.replaceChild(frame, $("yal_thing"));
	}
	else {
		var img = document.createElement("img");
		img.id = "yal_thing";
		img.src = element.rel;
		img.alt = element.getElementsByTagName("IMG")[0].alt;
		img.title = element.title;
		img.className = element.getElementsByTagName("IMG")[0].className;
		content.replaceChild(img, $("yal_thing"));
	}

	$("yal_container").style.height = "";
	$("yal_container").style.width = "";

	$("yal_title").innerHTML = element.title;
	if($(element).firstDescendant())
		$("yal_caption").innerHTML = $(element).firstDescendant().alt;
	else
		$("yal_caption").innerHTML = "";

	if (getPreviousSibling(element.parentNode)) {
		$("yal_prev").onclick = scopePresMove("previous",element);
		$("yal_prev").style.display = "block";
	}
	else
		$("yal_prev").style.display = "none";

	if (getNextSibling(element.parentNode)) {
		$("yal_next").onclick = scopePresMove("next",element);
		$("yal_next").style.display = "block";
	}
	else
		$("yal_next").style.display = "none";
}

function animatePopUp() {
	var overlay = $("overlay");
	var box = $("yal_container");
	var content = $("yal_thing");
	var page = getPageSize();

	//shrink picture
	var finalDims = shrinkPicture(box, page, content);

	// set appearance dimensions
	var initialWidth = 0;
	var initialHeight = 0;

	box.style.width = initialWidth+"px";
	box.style.height = initialHeight+"px";
	box.style.top = (page.windowHeight-initialHeight)/2+"px";
	box.style.left = (page.windowWidth-initialWidth)/2+"px";

	new Effect.Parallel (
		[
			new Effect.Appear(overlay, {to: 0.8}),
			new Effect.Appear(box)
		], {
			duration: 0.5,
			beforeStart: function() {
				$("yal_titlebar").style.visibility = "hidden";
				$("yal_content").style.visibility = "hidden";
				$("yal_caption").style.visibility = "hidden";
			},
			afterFinish: function() {
				new Effect.Morph (box, {
					style: {
						width: finalDims.width+"px",
						left: (page.windowWidth-finalDims.width)/2+"px",
						height: finalDims.height+"px",
						top: (page.windowHeight-finalDims.height)/2+"px"
					},
					afterFinish: function() {
						$("yal_titlebar").style.display = "none";
						$("yal_titlebar").style.visibility = "";
						new Effect.Appear("yal_titlebar", {duration:0.5});

						$("yal_content").style.display = "none";
						$("yal_content").style.visibility = "";
						new Effect.Appear("yal_content", {duration: 0.5});

						$("yal_caption").style.display = "none";
						$("yal_caption").style.visibility = "";
						new Effect.Appear("yal_caption", {duration: 0.5});
					}
				});
			}
		}
	);
}

function animateClose() {
	var overlay = $("overlay");
	var box = $("yal_container");

	new Effect.Parallel ([
		new Effect.Fade(box, {sync: true}),
		new Effect.Fade(overlay, {sync: true})
	], {
		duration: 1.5,
		beforeStart: function() {
			if($("yal_thing").tagName == "IFRAME")
				$("yal_content").style.visibility = "hidden";
		},
		afterFinish: function() {
			$("yal_content").style.visibility = "visible";
			box.style.width = "";
			box.style.height = "";
		}
	});
}

function animateChange(initialWidth, initialHeight) {
	var box = $("yal_container");
	var content = $("yal_thing");
	var page = getPageSize();

	//shrink new picture
	var finalDims = shrinkPicture(box, page, content);

	// set current dimensions
	box.style.width = initialWidth+"px";
	box.style.height = initialHeight+"px";
	box.style.top = (page.windowHeight-initialHeight)/2+"px";
	box.style.left = (page.windowWidth-initialWidth)/2+"px";

	// here's where things start changing
	new Effect.Morph (box, {
		style: {
			width: finalDims.width+"px",
			left: (page.windowWidth-finalDims.width)/2+"px",
			height: finalDims.height+"px",
			top: (page.windowHeight-finalDims.height)/2+"px"
		},
		beforeStart: function() {
			$("yal_thing").style.visibility = "";
			$("yal_thing").style.display = "none";
			$("yal_titlebar").style.visibility = "";
			$("yal_titlebar").style.display = "none";
			$("yal_caption").style.visibility = "";
			$("yal_caption").style.display = "none";
		},
		afterFinish: function() {
			new Effect.Parallel ([
				new Effect.Appear("yal_thing"),
				new Effect.Appear("yal_caption"),
				new Effect.Appear("yal_titlebar")
			], {
				afterFinish: function () {
					$("yal_prev").style.display = "block";
					$("yal_next").style.display = "block";
				}
			});
		}
	});
}

function scopePresMove(dir,element) {
	return function () {
		new Effect.Parallel ([
			new Effect.Fade("yal_thing"),
			new Effect.Fade("yal_caption"),
			new Effect.Fade("yal_titlebar")
		],{
			beforeStart: function() {
				$("yal_prev").style.display = "none";
				$("yal_next").style.display = "none";
			},
			afterFinish: function() {
				$("yal_thing").style.visibility = "hidden";
				$("yal_thing").style.display = "";
				$("yal_titlebar").style.visibility = "hidden";
				$("yal_titlebar").style.display = "";
				$("yal_caption").style.visibility = "hidden";
				$("yal_caption").style.display = "";

				var newParent = false;
				if (dir == "previous")
					newParent = getPreviousSibling(element.parentNode);
				else if (dir == "next")
					newParent = getNextSibling(element.parentNode);

				if (newParent)
					element = newParent.getElementsByTagName("A")[0];

				var initialWidth = $("yal_container").offsetWidth - 20;
				var initialHeight = $("yal_container").offsetHeight - 20;

				updateContent(element);
				animateChange(initialWidth, initialHeight);
			}
		});
	};
}

function getPageSize() {

	var xScroll, yScroll;

	if (window.innerHeight && window.scrollMaxY) {
		xScroll = document.body.scrollWidth;
		yScroll = window.innerHeight + window.scrollMaxY;
	}
	else if (document.body.scrollHeight > document.body.offsetHeight) { // all but Explorer Mac
		xScroll = document.body.scrollWidth;
		yScroll = document.body.scrollHeight;
	}
	else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari
		xScroll = document.body.offsetWidth;
		yScroll = document.body.offsetHeight;
	}

	var windowWidth, windowHeight;
	if (self.innerHeight) {	// all except Explorer
		windowWidth = self.innerWidth;
		windowHeight = self.innerHeight;
	}
	else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode
		windowWidth = document.documentElement.clientWidth;
		windowHeight = document.documentElement.clientHeight;
	}
	else if (document.body) { // other Explorers
		windowWidth = document.body.clientWidth;
		windowHeight = document.body.clientHeight;
	}

	// for small pages with total height less then height of the viewport
	if(yScroll < windowHeight)
		pageHeight = windowHeight;
	else
		pageHeight = yScroll;

	// for small pages with total width less then width of the viewport
	if(xScroll < windowWidth)
		pageWidth = windowWidth;
	else
		pageWidth = xScroll;

	var page = {"pageWidth":pageWidth, "pageHeight":pageHeight, "windowWidth":windowWidth ,"windowHeight":windowHeight};
	return page;
}

function shrinkPicture (box, page, content) {
	var diffHeight, diffWidth, ratio, imgWidth, imgHeight, boxWidth, boxHeight;
	var initialDisplay = box.style.display;
	box.style.display = "block"; // show the container to give it dimensions to change

	do {
		diffHeight = box.offsetHeight - (page.windowHeight-20);
		diffWidth = box.offsetWidth - (page.windowWidth-20);

		var height = (content.height != "") ? content.height : content.offsetHeight;
		var width = (content.width != "") ? content.width : content.offsetWidth;

		ratio = Math.min(
			(height - diffHeight - 20) / height, // if the height is too big this is < 1.
			(width - diffWidth - 20) / width ,  // if the width is too big, this is < 1.
			1 // if the picture is fine just the way it is, this will make sure it doesn't grow
		);

		imgWidth = width*ratio;
		imgHeight = height*ratio;

		content.style.width = imgWidth + "px";
		content.style.height = imgHeight + "px";

		boxWidth = imgWidth + 20;
		boxHeight = imgHeight + 20;
		box.style.width = boxWidth + "px";
		$("yal_title").style.width = boxWidth-($("yal_close").offsetWidth+5) + "px";
	}
	while (box.offsetHeight+10 > page.windowHeight || box.offsetWidth-10 > page.windowWidth);

	var finalWidth = box.offsetWidth-20; // compensate for borders and padding
	var finalHeight = box.offsetHeight-20; // compensate for borders and padding
	box.style.display = initialDisplay; // set it back to what it started as.

	var finalContainer = {"width":finalWidth, "height":finalHeight};
	return finalContainer;
}

function getPreviousSibling(element) {
	if (element.previousSibling != null) {
		if(element.previousSibling.nodeType == 1) {
			if (element.previousSibling.tagName == "DIV")
				return element.previousSibling;
			else
				return false;
		}
		else
			return getPreviousSibling(element.previousSibling);
	}
	return false;
}

function getNextSibling(element) {
	if (element.nextSibling != null) {
		if (element.nextSibling.nodeType == 1) {
			if(element.nextSibling.tagName == "DIV")
				return element.nextSibling;
			else
				return false;
		}
		else
			return getNextSibling(element.nextSibling);
	}
	return false;
}