/* This code is inspired by the popup code from "www.themaninblue.com" */

function getSize() {
  var myWidth = 0, myHeight = 0;
  if( typeof( window.innerWidth ) == 'number' ) {
    //Non-IE
    myWidth = window.innerWidth;
    myHeight = window.innerHeight;
  } else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
    //IE 6+ in 'standards compliant mode'
    myWidth = document.documentElement.clientWidth;
    myHeight = document.documentElement.clientHeight;
  } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
    //IE 4 compatible
    myWidth = document.body.clientWidth;
    myHeight = document.body.clientHeight;
  }
  return myHeight;
}

function popupImage(theTarget)
{
    var myHeight = getSize();
	var body = document.getElementsByTagName("body")[0];
	var imagePopup = document.getElementById("imagePopup");
	var content = document.createElement("dl");
    imagePopup.style.height = myHeight;
    
	var head = document.createElement("dd");
	var headContent = document.createElement("div");
	var headSpan = document.createElement("span");
	
	var top = document.createElement("dd");
	var topContent = document.createElement("div");
	
	var closeLink = document.createElement("a");
	var closeSpan = document.createElement("span");
	var closeImg = document.createElement("img");
	
	var theIDNum = 0;
	var image = document.createElement("dd");
	var imageDiv = document.createElement("div");
	var imageTag = document.createElement("img");
	
	var desc = document.createElement("dd");
	var descContent = document.createElement("div");
	var descSpan = document.createElement("span");
	
	var navigation = document.createElement("dd");
	var navigationContent = document.createElement("div");
	var nextLink = document.createElement("a");
	var previousLink = document.createElement("a");
	
	var bottom = document.createElement("dd");
	var bottomContent = document.createElement("div");
	
	// --------------------------------------------------------------
	idNum = parseInt(this.id.replace(/.*screenshotLink(.).*/, "$1"));
	imagePopup.innerHTML = "";

	body.style.backgroundColor = "#000000";
	imagePopup.className = "on";
	
	imageTag.id = "exampleImage";
	imageTag.src = this.href.replace(/\?.*/, "");
	imageTag.width = this.href.replace(/.*\?(.*),.*/, "$1");
	imageTag.height = this.href.replace(/.*,/, "");
	imageTag.alt = this.title.replace(/Grossansicht: /, "");

	
	imageDiv.className = "i";
	imageDiv.style.width = imageTag.width + 10 +"px";
	imageDiv.style.marginLeft = 15 +"px";
	image.appendChild(imageDiv);
	
	content.style.width = imageTag.width + 40 +"px";
	content.style.marginTop = "80px"; //parseInt((theContentHeight - theImage.height - 10 - 27 - 10) / 2) + "px";

	headSpan.innerHTML = " ";
	headContent.appendChild(headSpan);
	headContent.style.width = imageTag.width + 40 +"px";
    head.appendChild(headContent);
    head.className = "head";
    head.style.width = imageTag.width + 40 +"px";
    
    closeImg.className = "close";
	closeImg.src = "pics/viewer_close.gif";
	closeImg.width = "14";
	closeImg.height = "14;"
	closeImg.align= "absmiddle";
    
    closeSpan.innerHTML = "Close ";
    closeSpan.appendChild(closeImg);
    
	closeLink.id = "closeLink";	
	closeLink.href = "#";
	closeLink.onclick = closeImage;
	
	closeLink.title = "Schliessen";
	closeLink.appendChild(closeSpan);
	topContent.appendChild(closeLink);
	topContent.style.width = imageTag.width + 10 +"px";
	top.style.width = imageTag.width + 10 +"px";
	top.style.height = "22px";
	top.className = "top";
	top.appendChild(topContent);
	
	descSpan.innerHTML = imageTag.alt;
	descContent.appendChild(descSpan);
	descContent.style.marginTop = "3px";
    descContent.style.paddingTop = "2px";
    descContent.style.paddingBottom = "2px";
	desc.appendChild(descContent);
	desc.className = "desc";
    desc.style.width = "610px";
    desc.style.marginLeft = "15px";
    

	previousLink.className = "previousLink";
	
	if (document.getElementById("screenshotLink" + (idNum - 1)))
	{
		var previousScreenshot = document.getElementById("screenshotLink" + (idNum - 1));
		
		previousLink.id = previousScreenshot.id + "Previous";
		previousLink.href = previousScreenshot.href;
		previousLink.onclick = popupImage;
		previousLink.title = previousScreenshot.title;
	}
	else
	{
		previousLink.name = "none";
		previousLink.className += " off";
	}
	
	nextLink.className = "nextLink";	
	
	if (document.getElementById("screenshotLink" + (idNum + 1)))
	{
		var nextScreenshot = document.getElementById("screenshotLink" + (idNum + 1));
		
		nextLink.id = nextScreenshot.id + "Previous";
		nextLink.href = nextScreenshot.href;
		nextLink.onclick = popupImage;
		nextLink.title = nextScreenshot.title;
	}
	else
	{
		nextLink.name = "none";
		nextLink.className += " off";
	}
    
    navigationContent.appendChild(previousLink);
    navigationContent.appendChild(nextLink);
    navigation.appendChild(navigationContent);
    navigation.className = "navigation";
    navigation.style.width = "610px";
    navigation.style.marginLeft = "15px";
    
    
    bottomContent.innerHTML = " ";
    bottomContent.style.width = imageTag.width + 40 +"px";
    bottom.appendChild(bottomContent);
    bottom.className = "bottom";
    bottom.style.width = imageTag.width + 40 +"px";
    
    imageDiv.appendChild(imageTag);
    
    content.appendChild(head);
    content.appendChild(top);
    content.appendChild(imageDiv);
    content.appendChild(desc);
    content.appendChild(navigation);
    content.appendChild(bottom);
    imagePopup.appendChild(content);
    
	return false;
}

function closeImage()
{
	var body = document.getElementsByTagName("body")[0];
	var imagePopup = document.getElementById("imagePopup");
	
	body.style.backgroundColor = "#747D88";
	imagePopup.className = "";
	
	return false;
}