////////////// Preload images //////////////
var preload = new Array('close_over.png', 'flag_en.png', 'flag_en_sel.png', 'flag_nl.png', 'flag_nl_sel.png', 'info_over.png', 'logo_over.gif', 'mask_60.png', 'menu_over.png', 'next_over.png', 'prev_over.png');
function preloadImages(){
	var images = new Array();
	for(i=0; i<preload.length; i++) {
		images[i] = new Image();
		images[i].src = "images/"+preload[i];
	}
}
preloadImages();

////////////// Function to change images //////////////
function swapImage(id, new_src){
	var img = document.getElementById(id);
	img.src = "images/"+new_src;
}

////////////// Remove noscript a href's //////////////
function removeNoScript(){
	noscript = 2 // number of <a> elements to remove the href part of
	for(i=1; i<=noscript; i++){
		document.getElementById("noscript"+i).removeAttribute("href");
	}
}

////////////// Resizing //////////////
var picWidth = -1;
var picHeight = -1;
function resize(force){
	var myWidth = 0, myHeight = 0;
	if(typeof( window.innerWidth ) == 'number'){
		//Non-IE
		myWidth = window.innerWidth;
		myHeight = window.innerHeight;
	}else if(document.documentElement && (document.documentElement.offsetWidth || document.documentElement.offsetHeight)){
		//IE 6+ in 'standards compliant mode'
		myWidth = document.documentElement.offsetWidth;
		myHeight = document.documentElement.offsetHeight;
	}else if(document.body && (document.body.offsetWidth || document.body.offsetHeight)){
		//IE 4 compatible
		myWidth = document.body.offsetWidth;
		myHeight = document.body.offsetHeight;
	}
	
	var pic = document.getElementById('pic');
	var centre = document.getElementById('centre');
	var info = document.getElementById('info');
	if(!info){
		info = document.getElementById('end_of_series');
	}
	var overlay = document.getElementById('overlay');
	if(picWidth < 0){ // first run, initialising original width and height values
		picWidth = pic.width;
		picHeight = pic.height;
	}
	var dWidth = (myWidth - picWidth) / picWidth;
	var dHeight = (myHeight - 100 - picHeight) / picHeight;
	var delta = Math.min(dWidth, dHeight);
	if (delta >= 0){ // picture can be displayed at max size
		pic.style.width = picWidth+'px';
		pic.style.height = picHeight+'px';
		pic.style.marginTop = parseInt((myHeight-100-picHeight)/2)+'px';
		info.style.maxWidth = picWidth+'px';
		info.style.maxHeight = picHeight+'px';
		info.style.width = picWidth+'px';
		info.style.height = picHeight+'px';
		info.style.marginTop = parseInt((myHeight-100-picHeight)/2)+'px';
		overlay.style.maxWidth = picWidth+'px';
		overlay.style.maxHeight = picHeight+'px';
		overlay.style.width = picWidth+'px';
		overlay.style.height = picHeight+'px';
		overlay.style.marginTop = parseInt((myHeight-100-picHeight)/2)+'px';
		centre.style.minWidth = picWidth+'px';
		centre.style.minHeight = (picHeight+50)+'px';
	}else{ // picture needs to be scaled
		pic.style.width = Math.max(0, ( picWidth + parseInt((delta*picWidth)) ))+'px';
		pic.style.height = Math.max(0, ( picHeight + parseInt((delta*picHeight)) ))+'px';
		info.style.maxWidth = Math.max(0, ( picWidth + parseInt((delta*picWidth)) ))+'px';
		info.style.maxHeight = Math.max(0, ( picHeight + parseInt((delta*picHeight)) ))+'px';
		info.style.width = Math.max(0, ( picWidth + parseInt((delta*picWidth)) ))+'px';
		info.style.height = Math.max(0, ( picHeight + parseInt((delta*picHeight)) ))+'px';
		overlay.style.maxWidth = Math.max(0, ( picWidth + parseInt((delta*picWidth)) ))+'px';
		overlay.style.maxHeight = Math.max(0, ( picHeight + parseInt((delta*picHeight)) ))+'px';
		overlay.style.width = Math.max(0, ( picWidth + parseInt((delta*picWidth)) ))+'px';
		overlay.style.height = Math.max(0, ( picHeight + parseInt((delta*picHeight)) ))+'px';
		centre.style.minWidth = Math.max(0, ( picWidth + parseInt((delta*picWidth)) - 4 ))+'px';
		centre.style.minHeight = Math.max(0, ( picHeight + parseInt((delta*picHeight)) + 44 ))+'px';
		var heightDif = ( picHeight + parseInt((delta*picHeight)) ) - (myHeight-100);
		if (heightDif >= 0){
			pic.style.marginTop = 0+'px';
			info.style.margin = 0+'px';
			overlay.style.margin = 0+'px';
		}else{
			pic.style.marginTop = parseInt((heightDif*-1)/2)+'px';
			info.style.marginTop = parseInt((heightDif*-1)/2)+'px';
			overlay.style.marginTop = parseInt((heightDif*-1)/2)+'px';
		}
	}
	overlay.style.visibility = 'visible'; // enable the previous/next picture overlays
}

////////////// Masking the screen //////////////
var menu_hover = 0;
function set_mask(mode){
	if (mode=='info'){
		var info = document.getElementById('info');
		if(!info){
			return;
		}
		swapImage('info_image','info_over.png');
		var info_button = document.getElementById('info_button');
		info_button.onclick = function(){unmask('info');}
		info_button.style.zIndex = 1;
		var info_image = document.getElementById('info_image');
		info_image.onmouseover = '';
		info_image.onmouseout = '';
		var pic = document.getElementById('pic');
		pic.style.visibility = 'hidden';
		info.style.visibility = 'visible';
	}else if (mode=='menu'){
		menu_hover += 1;
		swapImage('menu_image','menu_over.png');
		var menu_button = document.getElementById('menu_button');
		menu_button.style.zIndex = 1;
		var menu = document.getElementById('menu');
		menu.style.display = 'block';
	}
	var mask = document.getElementById('mask');
	mask.style.display = 'block';
}
function unmask(mode){
	if (mode=='info'){
		swapImage('info_image','info.png');
		var mask = document.getElementById('mask');
		mask.style.display = 'none';
		var info = document.getElementById('info');
		info.style.visibility = 'hidden';
		var pic = document.getElementById('pic');
		pic.style.visibility = 'visible';
		var info_image = document.getElementById('info_image');
		info_image.onmouseover = function(){swapImage('info_image','info_over.png');}
		info_image.onmouseout = function(){swapImage('info_image','info.png');}
		var info_button = document.getElementById('info_button');
		info_button.onclick = function(){set_mask('info');}
		info_button.style.zIndex = 0;
	}else if (mode=='menu'){
		menu_hover -= 1;
		if (menu_hover <= 0){
			menu_hover = 0;
			swapImage('menu_image','menu.png');
			var mask = document.getElementById('mask');
			mask.style.display = 'none';
			var menu = document.getElementById('menu');
			menu.style.display = 'none';
			var menu_button = document.getElementById('menu_button');
			menu_button.style.zIndex = 0;
		}
	}
}