var screenshots = [];
var screenshot_root;
var screenshot_current;

function showScreenshot ( n ) {
	var screenshot, i;
	
	if ( ! screenshot_root ) {
		screenshot_current = n;
		screenshot = screenshots[n - 1];
		
		screenshot_root = document.createElement("DIV");
		
		screenshot_root.id = "screenshot_root";
		screenshot_root.innerHTML
			= '<div id="screenshot_relative">'
			+ '<div id="screenshot_window"><div class="w2"><div class="w3">'
				+ '<div id="screenshot_controls">'
					+ '<button id="previous_screenshot" onclick="previousScreenshot()"></button>'
					+ '<button id="next_screenshot" onclick="nextScreenshot()"></button>'
					+ '<button id="close_screenshot" onclick="hideScreenshot()"></button>'
					+ '<h3 id="screenshot_title">' + screenshot.title + '</h3>'
					+ '<p id="screenshot_description">' + screenshot.description + '</p>'
					+ '<button id="print_screenshot" onclick="window.print()"></button>'
				+ '</div>'
				+ '<div id="screenshot"><img id="screenshot_img" src="' + screenshot.image + '" alt=""></div>'
			+ '</div></div></div></div>'
			+ '<div id="screenshot_bg"></div>';
		document.body.appendChild(screenshot_root);
	} else {
		switchScreenshot(n);
	}
	
	for ( i = 0 ; i < document.body.childNodes.length ; i++ ) {
		if ( document.body.childNodes[i].nodeType == 1
				&& document.body.childNodes[i].id !== "screenshot_root" ) {
			add_css_class(document.body.childNodes[i], "screenshot_hidden");
		}
	}
	
	add_css_class(document.body, "screenshot_body");
	
	screenshot_root.style.display = "block";
	
	adjustScreenshotWindow();
}

function nextScreenshot () {
	if ( screenshot_current + 1 > screenshots.length ) {
		switchScreenshot(1);
	} else {
		switchScreenshot(screenshot_current + 1);
	}
}

function previousScreenshot () {
	if ( screenshot_current - 1 < 1 ) {
		switchScreenshot(screenshots.length);
	} else {
		switchScreenshot(screenshot_current - 1);
	}
}

function switchScreenshot ( n ) {
	var screenshot_img = document.getElementById("screenshot_img");
	var screenshot_title = document.getElementById("screenshot_title");
	var screenshot_description
		= document.getElementById("screenshot_description");
	var screenshot = screenshots[n - 1];
	
	screenshot_current = n;
	
	screenshot_img.src = screenshot.image;
	screenshot_title.innerHTML = screenshot.title;
	screenshot_description.innerHTML = screenshot.description;
	screenshot_img.onload = adjustScreenshotWindow;
	
	adjustScreenshotWindow();
}

function adjustScreenshotWindow () {
	var screenshot = document.getElementById("screenshot_img");
	var other_height = Math.max(
		find_position(screenshot).y + screenshot.offsetHeight + 50,
		document.body.offsetHeight,
		window.innerHeight || 0,
		document.documentElement.clientHeight);
	
	screenshot_root.style.height = other_height + "px";
	document.getElementById("screenshot_bg").style.height
		= other_height + "px";
}

function hideScreenshot () {
	var screenshot_root = document.getElementById("screenshot_root");
	
	if ( screenshot_root ) {
		screenshot_root.style.display = "none";
	}
	
	for ( i = 0 ; i < document.body.childNodes.length ; i++ ) {
		if ( document.body.childNodes[i].nodeType == 1 ) {
			remove_css_class(document.body.childNodes[i], "screenshot_hidden");
		}
	}
	
	remove_css_class(document.body, "screenshot_body");
}

function find_position ( element ) {
	var node = element;
	var pos = { x : 0, y : 0 };
	
	while ( node.offsetParent && node.offsetParent != node ) {
		pos.x += node.offsetLeft;
		pos.y += node.offsetTop;
		node = node.offsetParent;
	}
	
	return pos;
}

function has_css_class ( node, class_name ) {
	return new RegExp("\\b" + class_name + "\\b").exec(node.className);
}

function add_css_class ( node, class_name ) {
	if ( node.className ) {
		if ( has_css_class(node, class_name) ) {
			return;
		}
		
		node.className = node.className + " " + class_name;
	} else {
		node.className = class_name;
	}
}

function remove_css_class ( node, class_name ) {
	if ( node.className ) {
		node.className = node.className.replace(
			new RegExp("\\b" + class_name + "\\b"), "");
	}
}