var screenwidth,screenheight;
var imgSize = new Image();
var imageborder = 50;

function openImageViewer(imageNumber){
	if(images[imageNumber]){
		darkenScreen();
		viewerShell = document.createElement('div');
		viewerShell.setAttribute('class','imageviewershell');
		viewerShell.setAttribute('className','imageviewershell');
		viewerShell.setAttribute('id','imageviewershell');
		
		viewer = document.createElement('div');
		viewer.setAttribute('class','imageviewer');
		viewer.setAttribute('className','imageviewer');
		viewer.setAttribute('style',"height:150px; width:200px");
		viewer.setAttribute('id','viewer');
		
		closebutton = document.createElement('div');
		closebutton.setAttribute('id','closebutton');
		closebutton.appendChild(document.createTextNode('Close'));
		closebutton.setAttribute('class','closebutton');
		closebutton.setAttribute('className','closebutton');
		
		img = document.createElement('img');
		img.src = images[imageNumber];
		img.width = getMaxWidth();
		
		viewer.appendChild(closebutton);
		viewer.appendChild(img);
		viewerShell.appendChild(viewer);
		document.getElementById('body').insertBefore(viewerShell,document.getElementById('body').firstChild);
		
		document.getElementById('closebutton').onclick = closeImageViewer;
	
		imgSize.src = images[imageNumber];
		setTimeout("resizeViewer("+imageNumber+")",100);
	}
}

function getMaxWidth(){
	if(screenheight == 0){
		screenheight = getscreenheight();
	}
	if(screenwidth ==0){
		screenwidth = getscreenwidth();
	}
	imageWidth = imgSize.width;
	imageHeight = imgSize.height;
	if(imageWidth == 0){
		alert('zero');
	}
	if(imageWidth / screenwidth >= imageHeight / screenheight){
		//Limit Width
		width = screenwidth-imageborder;
	}
	else{
		//Limit Height
		height = screenheight - imageborder;
	}
	
}

function resizeViewer(imageNumber){
	viewer = document.getElementById('viewer');
	width = imgSize.width + 10;
	height = imgSize.height + 10;
	currentwidth = parseInt(viewer.style.width);
	currentheight = parseInt(viewer.style.height);
	update = false;
	
	if(screenheight == 0){
		screenheight = getscreenheight();
	}
	if(screenwidth ==0){
		screenwidth = getscreenwidth();
	}
	
	if(currentheight < height && currentheight <  window.innerHeight - 130){
		viewer.style.height = currentheight+15+'px';
		update = true;
	}
	else if(currentwidth < width && currentwidth < screenwidth - 40){
		viewer.style.width = currentwidth+20+'px';
		update = true;
	}
	
	if(update){
		setTimeout("resizeViewer("+imageNumber+")",10);
	}
	else{
		viewer.style.backgroundImage = "url("+images[imageNumber]+")";
	}
}

function closeImageViewer(){
	document.getElementById('body').removeChild(document.getElementById('imageviewershell'));
	golight();
}

function getscreenwidth(){
	if(screenwidth > 0){
		return(screenwidth);
	}
	else{
		if( window.innerWidth && window.scrollMaxX ){
			width = window.innerWidth + window.scrollMaxX;
		}
		else if( document.body.scrollHeight > document.body.offsetHeight ){
			width = document.body.scrollWidth;
		}
		else 
		{ 
			width = document.body.offsetWidth + document.body.offsetLeft;
		}
		return(width);
	}
}

function getscreenheight(){
	if(screenheight > 0){
		return(screenheight);
	}
	else{
		if( window.innerHeight && window.scrollMaxY ){
			height = window.innerHeight + window.scrollMaxY;
		}
		else if( document.body.scrollHeight > document.body.offsetHeight ){
			height = document.body.scrollHeight;
		}
		else 
		{ 
			height = document.body.offsetHeight + document.body.offsetTop;
		}
		return(height);
	}
}

function darkenScreen(){
	height = getscreenheight();
	
	body = document.getElementById('body');
	div = document.createElement('div');
	div.setAttribute('id','frozenpage');
	div.setAttribute('class', 'frozenpage');
	div.setAttribute('className', 'frozenpage');
	div.setAttribute('style', 'height: '+height+'px; opacity: .0');
	body.insertBefore(div,body.firstChild);
	godark();
}

function godark(){
	if(document.getElementById('frozenpage')){
		opacity = document.getElementById('frozenpage').style.opacity;
		document.getElementById('frozenpage').style.opacity = parseFloat(opacity) + .05;
		if(opacity < .5)
		{
			setTimeout(godark,30);
		}
	}	
}

function golight(){
	if(document.getElementById('frozenpage')){
		opacity = document.getElementById('frozenpage').style.opacity;
		document.getElementById('frozenpage').style.opacity = parseFloat(opacity) - .05;
		if(opacity > 0)
		{
			setTimeout(golight,30);
		}
		else{
			body.removeChild(document.getElementById('frozenpage'));
		}
	}	
}