function getWindowHeight()
{
	var height;
	if (self.innerHeight) {
		height = self.innerHeight;
	}
	else if (document.documentElement && document.documentElement.clientHeight) {
		height = document.documentElement.clientHeight;
	}
	else if (document.body) {
		height = document.body.clientHeight;
	}

	return height;
}

function getHeight()
{
	var y;
	if (document.body.scrollHeight) {
		y = document.body.scrollHeight
	}

	else {
		y = document.body.offsetHeight;
	}

	return y;
}

function getPagePosition() {
	var scroll;

	if (self.pageYOffset) {
		scroll = self.pageYOffset
	}

	else if (document.documentElement && document.documentElement.scrollTop) {
		scroll = document.documentElement.scrollTop;
	}

	else if (document.body) {
		scroll = document.body.scrollTop;
	}

	return scroll;
}

function initialize()
{
	// Load the load animation
	var loadURL = "images/load.gif";
	var loadImg = new Image();
	loadImg.src = loadURL;

	/* Create following elements
	 * <div id="transparentBox">
	 * <div id="imageBox">
	 * <p>
	 * <img src="images/load.gif" />
	 * </p>
	 * <p><a href="#">Sulje ikkuna</a></p>
	 * </div>
	 * </div>
	 */
	 
	var objBody = document.getElementsByTagName("body").item(0);
	
	var transparentBox = document.createElement("div");
	transparentBox.setAttribute("id", "transparentBox");

	var imageBox = document.createElement("div");
	imageBox.setAttribute("id", "imageBox");
	transparentBox.appendChild(imageBox);
	
	// var imageParagraph = document.createElement("p");
 	// imageParagraph.setAttribute("id", "imageParagraph");
 	// imageBox.appendChild(imageParagraph);

	var closeBox = document.createElement("div");
	closeBox.setAttribute("id", "closeBox");
	imageBox.appendChild(closeBox);
 

	var closeLink = document.createElement("a");
	closeLink.setAttribute("href", "#");
	closeLink.setAttribute("rel", "closeImage");
	imageBox.appendChild(closeLink);
	
	var imageTag = document.createElement("img");
	imageTag.setAttribute("src", loadURL);
	imageTag.setAttribute("id", "loadImage");
	closeLink.appendChild(imageTag);

	var closeLinkClone = closeLink.cloneNode(false);
	closeBox.appendChild(closeLinkClone);

	var closeX = document.createElement("img");
	closeX.setAttribute("src", "images/close.png");
	closeLinkClone.appendChild(closeX);
	
	objBody.insertBefore(transparentBox, objBody.firstChild);
	transparentBox.style.height = getHeight() + "px";
	var position = getPagePosition() + getWindowHeight() / 2 - loadImg.height / 2;
	imageBox.style.top = position + "px";

	
	// Register action listeners
	var imageLinks = searchRels("imageOpen");
	
	for (var i = 0; i < imageLinks.length; i++) {
		imageLinks[i].onclick = openImage;
	}
	

}

function openImage()
{
	/* Create following elements
	 * <div id="transparentBox">
	 * <div id="imageBox">
	 * <p>
	 * <img src="url" />
	 * </p>
	 * <p><a href="#">Sulje ikkuna</a></p>
	 * </div>
	 * </div>
	 */
	 
	var image = new Image();
	var closeLink = searchRels("closeImage")[1];
	var loadImage = document.getElementById("loadImage");
	var link = this.href;
	var position;
	var transparentBox = document.getElementById("transparentBox");
	var imageBox = document.getElementById("imageBox");
//	transparentBox.style.top = getPagePosition() + "px";

	if (loadImage) {
		position = getPagePosition() + getWindowHeight() / 2 - loadImage.height / 2;
		imageBox.style.top = position + "px";
	}


	image.onload = function() {
		//document.getElementById("imageParagraph").style.top = getPagePosition() + 10 + "px";
		var position = getPagePosition() + getWindowHeight() / 2 - this.height / 2;
		imageBox.style.top = position + "px";
		imageBox.style.width = this.width + "px";

		var bigImage = document.createElement("img");
		bigImage.setAttribute("src", link);
		bigImage.setAttribute("id", "bigImage");
		closeLink.replaceChild(bigImage, loadImage);

		document.getElementById("closeBox").style.display = "block";
		
		return false;
	}

//	document.getElementsByTagName("html").item(0).style.overflow = "visible";

	var closeRels = searchRels("closeImage");
	closeRels[0].onclick = closeImage;
	closeRels[1].onclick = closeImage;
	transparentBox.style.display = "block";
	image.src = this.getAttribute("href");

	
	return false;
	
}

function closeImage()
{
	document.getElementById("closeBox").style.display = "none";
	document.getElementById("transparentBox").style.display = "none";
	document.getElementsByTagName("html").item(0).style.overflow = "auto";

	var closeLink = searchRels("closeImage")[1];
	var bigImage = document.getElementById("bigImage");
//	var loadImg = new Image()
//	loadImg.src = "images/load.gif";

	
	var loadImage = document.createElement("img");
	loadImage.setAttribute("src", "images/load.gif");
	loadImage.setAttribute("id", "loadImage");
	closeLink.replaceChild(loadImage, bigImage);
//	var position = getPagePosition() + getWindowHeight() / 2 - document.getElementById("loadImage").height / 2;
//	document.getElementById("imageBox").style.top = position + "px";
	return false;
}

function searchRels(keyword)
{
	var allTags = document.getElementsByTagName("*");
	var matchedTags = Array();
	var amount = 0;
	
	for (var i = 0; i < allTags.length; i++) {
		if (allTags[i].getAttribute("rel") == keyword) {
			matchedTags[amount] = allTags[i]
			amount++;
		}
	}
	
	return matchedTags;
}

function addLoadEvent(func)
{
	var oldOnload = window.onload;
	if (typeof window.onload != 'function') {
		window.onload = func
	}
	else {
		window.onload = function() {
			oldOnload();
			func();
		}
	}
}

addLoadEvent(initialize);