// JavaScript Document

(function () {
	
	var imageSurrounderId = "photos";
	
	var imageSurrounder, fragment;
	
	if (window.addEventListener)
		window.addEventListener("load", Main, false);
	else if (window.attachEvent)
		window.attachEvent("onload", Main);
	else document.body.onload = Main;
	
	function Main(e) {
		
		imageSurrounder = document.getElementById(imageSurrounderId);
		
		for (var i = 0; i < imageSurrounder.childNodes.length; i++) {
			if (imageSurrounder.childNodes[i].nodeType == 1 &&
				imageSurrounder.childNodes[i].tagName == "IMG") {
				if (window.addEventListener) {
					imageSurrounder.childNodes[i].addEventListener("click", enlarge, false);
				} else if (window.attachEvent) {
					imageSurrounder.childNodes[i].attachEvent("onclick", enlarge);
				} else {
					imageSurrounder.onclick = enlarge;
				}
			}
		}
		
	}
	
	function enlarge(e) {
		
		fragment = document.createDocumentFragment();
		var dark = document.createElement("div");
		var img = document.createElement("img");
		
		dark.style.position = "fixed";
		dark.style.left = "0";
		dark.style.top = "0";
		dark.style.height = "100%";
		dark.style.width = "100%";
		dark.style.backgroundColor = "black";
		dark.style.opacity = "0.7";
		dark.style.zIndex = "5";
		dark.id = "dark";
		
		img.src = this.src;
		img.style.display = "block";
		img.style.position = "fixed";
		if (this.offsetHeight < this.offsetWidth) {
			img.style.width = "500px";
			img.style.marginLeft = "-250px";
			img.style.marginTop = -1 * (250 * (this.offsetHeight / this.offsetWidth)) + "px";
		} else {
			img.style.width = "250px";
			img.style.marginLeft = "-125px";
			img.style.marginTop = -1 * (125 * (this.offsetHeight / this.offsetWidth)) + "px";
		}
		img.style.left = "50%";
		img.style.top = "50%";
		img.style.zIndex = "6";
		img.style.cursor = "pointer";
		img.id = "enlargement";
		
		if (window.addEventListener) {
			img.addEventListener("click", removeEnlargement, false);
			dark.addEventListener("click", removeEnlargement, false);
		} else if (window.attachEvent) {
			img.attachEvent("onclick", removeEnlargement);
			dark.attachEvent("onclick", removeEnlargement);
		} else {
			img.onclick = removeEnlargement;
			dark.onlcik = removeEnlargement;
		}
		
		fragment.appendChild(dark);
		fragment.appendChild(img);
		document.body.appendChild(fragment);
	}
	
	function removeEnlargement(e) {
		
		document.body.removeChild(document.getElementById("dark"));
		document.body.removeChild(document.getElementById("enlargement"));
		
	}
	
})();