var dirs = document.getElementsByName('dir');

function mouseOver() {
	this.src = String.substring(this.src, 0, this.src.length - 4) + '_.gif';
}

function mouseOut() {
	this.src = String.substring(this.src, 0, this.src.length - 5) + '.gif';
}

var n = dirs.length
for (var i = 0; i < n; i++) {
	dirs[i].onmouseover = mouseOver;
	dirs[i].onmouseout = mouseOut;
}

function getPageSize(){
	var xScroll, yScroll;
	
	if (window.innerHeight && window.scrollMaxY) {	
		xScroll = document.body.scrollWidth;
		yScroll = window.innerHeight + window.scrollMaxY;
	} else if (document.body.scrollHeight > document.body.offsetHeight){
		xScroll = document.body.scrollWidth;
		yScroll = document.body.scrollHeight;
	} else {
		xScroll = document.body.offsetWidth;
		yScroll = document.body.offsetHeight;
	}
	
	var windowWidth, windowHeight;
	if (self.innerHeight) {
		windowWidth = self.innerWidth;
		windowHeight = self.innerHeight;
	} else if (document.documentElement && document.documentElement.clientHeight) {
		windowWidth = document.documentElement.clientWidth;
		windowHeight = document.documentElement.clientHeight;
	} else if (document.body) {
		windowWidth = document.body.clientWidth;
		windowHeight = document.body.clientHeight;
	}	
	

	if(yScroll < windowHeight){
		pageHeight = windowHeight;
	} else { 
		pageHeight = yScroll;
	}

	if(xScroll < windowWidth){	
		pageWidth = windowWidth;
	} else {
		pageWidth = xScroll;
	}
	
	return new Array(pageWidth,windowHeight,pageHeight);
}

var element;
var loading = false;
var closing = false;
var open = -1;
var current = -1;
var image;

function next() {
    closeimage();
    open = current + 1;
    return false;
}
function previous() {
    closeimage();
    open = current - 1;
    return false;
}

function openimage(id) {
    current = id;
    
	var link = document.getElementById('image_link_' + id);
	var newimage = link.href;
	
	if (element == null) {
		element = document.createElement('div');
		element.className = 'imagehover';
	}
	
	var size = getPageSize();
	element.style.width = size[0] + 'px';
	element.style.height = size[2] + 'px';
	element.style.top = '0px';
	element.style.position = 'absolute';
	
	element.onMousedown = closeimage;
	
	if (element.childNodes.length == 0) {
		var subElement = document.createElement('div');
		
		if (self.pageYOffset) {
			subElement.style.top = self.pageYOffset + 'px';
		} else if (document.documentElement && document.documentElement.scrollTop){
			subElement.style.top = document.documentElement.scrollTop + 'px';
		} else if (document.body) {
			subElement.style.top = document.body.scrollTop + 'px';
		}
		
		subElement.style.position = 'relative';
	} else {
		var subElement = element.childNodes[0];
		
		while (subElement.childNodes.length > 0) subElement.removeChild(subElement.childNodes[0]);
	}
	
	var center = document.createElement('span');
	if (id > 1) {
	    var templink = document.createElement('a');
	    templink.onclick= previous;
	    templink.className = 'floatleft';
	    templink.appendChild(document.createTextNode('Vorige'));
	    templink.href="#";
	    center.appendChild(templink);
	}
	if (id < count) {
	    var templink = document.createElement('a');
	    templink.onclick= next;
	    templink.className = 'floatright';
	    templink.appendChild(document.createTextNode('Volgende'));
	    templink.href="#";
	    center.appendChild(templink);
	}
	templink = document.createElement('a');
	templink.href = newimage;
	
	center.appendChild(templink);
	templink.appendChild(document.createTextNode('Weergegeven: ' + link.childNodes[2].nodeValue + ' '));
	for (var i = 4; i < link.childNodes.length; i += 2) templink.appendChild(document.createTextNode(link.childNodes[i].nodeValue));
	subElement.appendChild(center);
	
	subElement.appendChild(document.createElement('br'));
	
	image = document.createElement('img');
	image.src = '/img/loader.gif';
	image.onclick = function() {closeimage(); };
	subElement.appendChild(image);
	
	var preload = document.createElement('img');
	preload.onclick=function() {closeimage(); };
	preload.src = newimage;
	
	new resize(preload).wait();
		
	subElement.className = 'imagediv';
		
	element.appendChild(subElement);
	document.body.insertBefore(element, document.body.childNodes[0]);
	
	loading = true;
	
	return false;
}

function resize(f) {
	this.width;
	this.height;
	this.from = f;
	
	this.start = function() {
		if (element) {
			var div = element.childNodes[0];
			var size = getPageSize();
			if (closing) {
				if (this.from) {
					div.removeChild(this.from);
					this.from = null;
				}
				
				if (div.style.width == '' || Math.abs(100 - parseInt(div.style.width)) > 3 || Math.abs(100 - parseInt(div.style.height)) > 3) {
					div.style.width = Math.floor((parseInt(div.style.width == '' ? 450 : div.style.width) + 100) / 2) + 'px';
					div.style.height = Math.floor((parseInt(div.style.height == '' ? 450 : div.style.height) + 100) / 2) + 'px';
				} else {
					document.body.removeChild(element);
					element = null;
					closing = false;
					if (open != -1) openimage(open);
					open = -1;
				}
			} else if (this.from && this.from.width && element) {
				if (!this.width) {
					var scale = Math.min(parseInt(size[1]) * .95 / this.from.height, parseInt(element.style.width) * .95 / this.from.width);
					if (scale > 1) {
						this.width = this.from.width + 50;
						this.height = this.from.height + 50;
					} else {
						this.width = this.from.width * scale;
						this.height = this.from.height * scale;
					}
				}
				
				oldtop = parseInt(div.style.top);
				if (self.pageYOffset) {
					div.style.top = self.pageYOffset + 'px';
				} else if (document.documentElement && document.documentElement.scrollTop){	 // Explorer 6 Strict
					div.style.top = document.documentElement.scrollTop + 'px';
				} else if (document.body) {// all other Explorers
					div.style.top = document.body.scrollTop + 'px';
				}
				div.style.top = (parseInt(div.style.top) + oldtop * 3) / 4 + 'px';
				
				if (div.style.width == '' || Math.abs(this.width - parseInt(div.style.width)) > 3 || Math.abs(this.height - parseInt(div.style.height)) > 3) {
					div.style.width = Math.floor((parseInt(div.style.width == '' ? 450 : div.style.width) * 2 + this.width) / 3) + 'px';
					div.style.height = Math.floor((parseInt(div.style.height == '' ? 450 : div.style.height) * 2 + this.height) / 3) + 'px';
				} else if (loading) {
					this.from.style.width = Math.floor(this.width - 50) + 'px';
					this.from.style.height = Math.floor(this.height - 50) + 'px';
					
					div.removeChild(div.childNodes[div.childNodes.length - 1]);
					div.appendChild(this.from);
					this.from.onclick = function() {closeimage(); };
					
					loading = false;
				}
			}
			
			this.wait();
		}
	}
	
	this.wait = function() {
		var _self = this;
		setTimeout(function(ms) {_self.start();}, 50);
	}
}

function closeimage() {
	if (!loading) {
		closing = true;
		if (image != null) image.src='/img/loader.gif';
	}
}