﻿function openbox(url)
{
	
	var fonsterbredd;
	var fonsterhojd;
	
	var bildbredd;
	var bildhojd;
	
	var posbredd;
	var poshojd;
	
	var halvaposbredd;
	var halvaposhojd;
	
	var content;
	var image;
	
	var bodyelement;
	
	var nydiv;
	
	if (typeof window.innerWidth != 'undefined')
	{
		fonsterbredd = window.innerWidth;
		fonsterhojd = window.innerHeight;
	}
	else (typeof document.documentElement != 'undefined' && typeof document.documentElement.clientWidth != 'undefined' && document.documentElement.clientWidth != 0)
	{
		fonsterbredd = document.documentElement.clientWidth;
		fonsterhojd = document.documentElement.clientHeight;
	}
	
	bodyelement = document.getElementById('body');
	
	nydiv = document.createElement('div');
	
	nydiv.setAttribute('id','imagebox');
	
	bodyelement.appendChild(nydiv);
	
	content = document.getElementById('imagebox');
	
	content.innerHTML = "<img style='border:5px white solid' id='imageid' src=" + url + " alt=" + url + " onclick='closebox()' />";
	
	image = document.getElementById('imageid');
	
	bildbredd = image.width;
	bildhojd = image.height;
	
	posbredd = fonsterbredd - bildbredd - 26;
	halvaposbredd = posbredd / 2;
	
	poshojd = fonsterhojd - bildhojd;
	halvaposhojd = poshojd / 2;
	
	content.style.display='block';
	content.style.position='fixed';
	content.style.left='0px';
	content.style.top='0px';
	content.style.width= fonsterbredd + 'px';
	content.style.height= fonsterhojd + 'px';
	content.style.backgroundImage='url(image/bg.png)';
	
	image.style.position='fixed';
	image.style.left=halvaposbredd + 'px';
	image.style.top=halvaposhojd + 'px';
	image.style.backgroundColor='yellow';
	image.style.border='5px white solid';
	
	document.onkeypress = closebox;
	
}	

function closebox()
{
	document.getElementById('imagebox').style.display='none';
}
