// Helper function
function getViewportProperties() {
	// Get viewport dimensions: http://www.quirksmode.org/viewport/compatibility.html#link2
	if (document.documentElement && document.documentElement.clientHeight) {
		windowWidth		= document.documentElement.clientWidth;
		windowHeight	= document.documentElement.clientHeight;
	} else if (window.innerHeight) {
		windowWidth		= window.innerWidth;
		windowHeight	= window.innerHeight;
	} else if (document.body) {
		windowWidth		= document.body.clientWidth;
		windowHeight	= document.body.clientHeight;
	}
	
	// Get viewport scroll offsets: http://www.quirksmode.org/viewport/compatibility.html#link3
	if (self.pageYOffset) {
		scrollLeft	= self.pageXOffset;
		scrollTop	= self.pageYOffset;
	}
	else if (document.body) {
		scrollLeft	= document.body.scrollLeft;
		scrollTop	= document.body.scrollTop;
	}
	else if (document.documentElement && document.documentElement.scrollTop) {
		scrollLeft	= document.documentElement.scrollLeft;
		scrollTop	= document.documentElement.scrollTop;
	}
}

// Helper function
function addEvent(obj, ev, func) {
	if (obj.addEventListener)
		obj.addEventListener(ev, func, false);
	else
		obj["on"+ev] = func;
}

// Helper function
function addText(obj, text) {
	if (document.body.textContent)
		obj.textContent = text;
	else if (document.body.innerText)
		obj.innerText = text;
}

// Fix scrolling problem in Internet Explorer 6 caused by it not supporting fixed positioning
window.onscroll = function(e) {
	if (!screenshot.currentStyle || screenshot.currentStyle["position"] == "fixed")
		return;
	
	getViewportProperties();
	
	// Recenter the image
	var image = screenshot.getElementsByTagName("img")[0];
	var width = image.width+16+16;			// Width + left and right padding
	var height = image.height+16+24+4+4;	// Height + top padding + navigation height
	var screenshotTop = Math.round((windowHeight - height)/2);
	screenshot.style.top = (screenshotTop+scrollTop) ? (screenshotTop+scrollTop)+"px" : "0";
	
	// Recenter the loading image
	var loadingTop = scrollTop + Math.round((windowHeight - loading.height)/2);
	loading.style.top = loadingTop ? loadingTop+"px" : "0";
}

// Screenshot object
function Screenshot() {
	this.image	= 0;
	this.href	= 0;
	this.title	= 0;
}

function addBlur() {
	document.getElementsByTagName("html")[0].style.backgroundRepeat = "repeat";
	
	document.getElementById("content").appendChild(blurring);
	blurring.style.height = document.documentElement.scrollHeight+"px";
}

function removeBlur() {
	document.getElementsByTagName("html")[0].style.backgroundRepeat = "repeat-x";
	document.getElementById("content").removeChild(blurring);
}

function prepareScreenshots() {
	// Create the new elements required to show the screenshots
	blurring = document.createElement("div");
	blurring.id = "blurring";
	
	screenshot = document.createElement("div");
	screenshot.setAttribute("id", "screenshot");
	
	image = document.createElement("img");
	screenshot.appendChild(image);
	
	navigation = document.createElement("ol");
	screenshot.appendChild(navigation);
	
	var navItem = document.createElement("li");
	var navLink = document.createElement("a");
	navLink.setAttribute("href", "");
	navItem.appendChild(navLink);
	
	prevItem = navItem.cloneNode(true);
	prevItem.setAttribute("id", "previous");
	prevItem.getElementsByTagName("a")[0].appendChild(document.createTextNode("Previous"));
	addEvent(prevItem.getElementsByTagName("a")[0], "click", showPreviousScreenshot);
	navigation.appendChild(prevItem);
	prevImage = new Image();	// Preload the image
	prevImage.src = "http://umlautgames.net/wordpress/wp-content/themes/umlaut/images/previous.png";
	
	closeItem = navItem.cloneNode(true);
	closeItem.setAttribute("id", "close");
	closeItem.getElementsByTagName("a")[0].appendChild(document.createTextNode("Close"));
	addEvent(closeItem.getElementsByTagName("a")[0], "click", closeScreenshot);
	navigation.appendChild(closeItem);
	closeImage = new Image();	// Preload the image
	closeImage.src = "http://umlautgames.net/wordpress/wp-content/themes/umlaut/images/close.png";
	
	nextItem = navItem.cloneNode(true);
	nextItem.setAttribute("id", "next");
	nextItem.getElementsByTagName("a")[0].appendChild(document.createTextNode("Next"));
	addEvent(nextItem.getElementsByTagName("a")[0], "click", showNextScreenshot);
	navigation.appendChild(nextItem);
	nextImage = new Image();	// Preload the image
	nextImage.src = "http://umlautgames.net/wordpress/wp-content/themes/umlaut/images/next.png";
	
	comment = document.createElement("p");
	screenshot.appendChild(comment);
	
	loading = new Image();
	loading.src = "http://umlautgames.net/wordpress/wp-content/themes/umlaut/images/loading.gif";
	loading.setAttribute("id", "loading");
	loading.style.display = "none";
	document.body.appendChild(loading);
}

function preload() {
	getViewportProperties();
	
	loading.style.display = "block";
	var top = scrollTop + Math.round((windowHeight - loading.height)/2);
	var left = Math.round((windowWidth - loading.width)/2);
	
	loading.style.top	= top ? top+"px" : "0";
	loading.style.left	= left ? left+"px" : "0";
}

function centerScreenshot(w, h) {
	getViewportProperties();
	
	screenshot.style.width = w+"px";
	
	// IE6 doesn't update the offsets soon enough, so we can't rely on image.offsetWidth/Height
	var width = w+16+16;		// Width + left and right padding
	var height = h+16+24+4+4;	// Height + top padding + navigation height
	
	var top = Math.round((windowHeight - height)/2);
	var left = Math.round((windowWidth - width)/2);
	
	if (screenshot.currentStyle && screenshot.currentStyle["position"] == "static")
		screenshot.style.top = (top+scrollTop) ? (top+scrollTop)+"px" : "0";
	else
		screenshot.style.top = top ? top+"px" : "0";
	screenshot.style.left = left ? left+"px" : "0";
}

function showScreenshot() {
	// Show or hide the next/previous buttons
	if (current == 0)
		prevItem.className = "unavailable";
	else
		prevItem.className = "";
	if (current == screenshots.length-1)
		nextItem.className = "unavailable";
	else
		nextItem.className = "";
	
	// Show the image when it is ready
	function imageReady() {
		image.src = screenshots[current].image.src;
		addText(comment, screenshots[current].title);
		centerScreenshot(screenshots[current].image.width, screenshots[current].image.height);
		
		if (!document.getElementById("screenshot")) {
			screenshot.style.display = "block";
			document.body.appendChild(screenshot);
		}
		
		loading.style.display = "none";
	}
	
	// Load the image if it's not already cached
	if (screenshots[current].image && screenshots[current].image.width) {
		imageReady();
	}
	else {
		loading.style.display = "block";
		screenshots[current].image = new Image();
		addEvent(screenshots[current].image, "load", imageReady);
		screenshots[current].image.src = screenshots[current].href;
	}
}

var current;
function showThisScreenshot(e) {
	addBlur();
	current = this.__index;
	if (!screenshots[current].image)
		preload();
	
	showScreenshot();
	
	if (e && e.preventDefault)
		e.preventDefault();
	else
		return false;
}

function showNextScreenshot(e) {
	current += 1;
	showScreenshot();
	
	if (e && e.preventDefault)
		e.preventDefault();
	else
		return false;
}

function showPreviousScreenshot(e) {
	current -= 1;
	showScreenshot();
	
	if (e && e.preventDefault)
		e.preventDefault();
	else
		return false;
}

function closeScreenshot(e) {
	screenshot.style.display = "none";
	document.body.removeChild(screenshot);
	removeBlur();
	
	if (e && e.preventDefault)
		e.preventDefault();
	else
		return false;
}

var loaded = false;
function load() {
	if (loaded)
		return;
	loaded = true;
	
	var visualisations = document.getElementById("main");
	if (!visualisations || visualisations.className != "visualisations")
		return;
	
	prepareScreenshots();
	// Store info about all the screenshots
	screenshots = new Array();
	var thumbnails = visualisations.getElementsByTagName("a");
	for (var i = 0, thumbnail; thumbnail = thumbnails[i]; i++) {
		if (thumbnail.getAttribute("rel") != "blowup")
			continue;	// TODO: Support rel="blowup[category]" also
		
		thumbnail.__index = i;	// Store the index so we can find it in the screenshot array later
		screenshots[i] = new Screenshot();
		screenshots[i].href = thumbnail.href;
		screenshots[i].title = thumbnail.firstChild.title;
		addEvent(thumbnail, "click", showThisScreenshot);
	}
	
	// Resize the screenshot when the window is resized
	function resizeScreenshot() {
		centerScreenshot(image.width, image.height);
		
		blurring.style.height = document.documentElement.scrollHeight+"px";
	}
	addEvent(window, "resize", resizeScreenshot);
}

if (window.addEventListener) {
	window.addEventListener("load", load, false);
	window.addEventListener("DOMContentLoaded", load, false);
}
else {
	window.onload = load;
}