// SUBMENU TONEN
function showHideSubMenu(menuName) {
	var item = menuName;
	
	if (document.getElementById(item).style.display == 'block') {
		document.getElementById(item).style.display = 'none';
	}
	else {
		document.getElementById(item).style.display = 'block';
	}
}


function opacity(id, opacStart, opacEnd, millisec) {
	//snelheid van elke frame
	var speed = Math.round(millisec / 1000);
	var timer = 0;

	//animatie
	for(i = opacStart; i <= opacEnd; i++) {
	setTimeout("changeOpac(" + i + ",'" + id + "')",(timer * speed));
	timer++;
	}
}  
  
//Opacity voor verschillende browsers
function changeOpac(opacity, id) {
	var object = document.getElementById(id).style;
	object.opacity = (opacity / 99);
	object.MozOpacity = (opacity / 99);
	object.KhtmlOpacity = (opacity / 99);
	object.filter = "alpha(opacity=" + opacity + ")";
}

// Opacity  initialiseren
function shiftOpacity(id, millisec) {
	opacity(id, 0, 60, millisec);
}

	function switchfoto() {
		document.img_overlay.src = urls[2];
	}

function switchPopUp(div_id, popup, img, url, titel, tekst, breedte, hoogte) {
	
	
	//afbeelding plaatsen
	document.img_overlay.src = url;

	// breedte x hoogte van achtergrond bepalen
	var scrollHeight = document.documentElement['scrollHeight'];
	var clientHeight = document.documentElement['clientHeight'];
	var scrollTop = document.documentElement['scrollTop'];
	
	if (breedte < hoogte) { 
		new_height = scrollHeight+140;
	} else {
		if (clientHeight < scrollHeight) {
			new_height = scrollHeight+20;
		} else { 
			new_height = scrollHeight+(clientHeight-scrollHeight);
		}
	}
	document.getElementById(popup).style.height = new_height +'px';
	
	
	// popup aanzetten
	shiftOpacity('pop_up_screen', 1000);
	id = document.getElementById(div_id);
	id.style.display = (id.style.display == 'none') ? 'block' : 'none';
	
	// teksten plaatsen
	document.getElementById('popup_titel').innerHTML = titel;
	document.getElementById('popup_tekst').innerHTML = tekst;

	/* --- formaat scroll_content bepalen --- */
	popup_content = document.getElementById('pop_up_content');
	
	var min_breedte = 400;
	var max_breedte = 500;
	
	var max_height = 480;
	
	var hoogte_tekst = 55;
	
	// breedte x hoogte & in het midden uitlijnen
	if (breedte > min_breedte && breedte < max_breedte) {
		document.img_overlay.style.width = 'auto';
		
		popup_content.style.width = breedte + 'px';
		popup_content.style.height = hoogte + hoogte_tekst + 'px';
		
		popup_content.style.marginLeft = '-' + (breedte / 2)-10 + 'px';
	} else {
		if (breedte < min_breedte) {
			document.img_overlay.style.width = 'auto';
		
			popup_content.style.width = min_breedte + 'px';
			popup_content.style.height = hoogte + hoogte_tekst + 'px';
			// in het midden uitlijnen door margin aan te passen
			popup_content.style.marginLeft = '-' + (min_breedte / 2)-10 + 'px';
			popup_content.style.marginTop = scrollTop + 'px';
			
		} else {
			// max-breedte is overschreden
			
			// Wanneer max-height is overschreven moet de ratio de afbeelding corrigeren
			if (hoogte > max_height) {
				var ratio = breedte / hoogte;
			} else {
				var ratio = 1; 
			}

			document.img_overlay.style.width = max_breedte * ratio + 'px';
			popup_content.style.width = max_breedte * ratio + 'px';
			
			new_height = hoogte * (max_breedte / breedte) * ratio;
			popup_content.style.height = new_height + hoogte_tekst + 'px';
			
			popup_content.style.marginLeft = '-' + (max_breedte * ratio / 2)-10 + 'px';
			popup_content.style.marginTop = scrollTop + 'px';
		}
	}
}


/* 

	Image Link, multistyle version
	written by Alen Grakalic, provided by Css Globe (cssglobe.com)
	please visit http://cssglobe.com/post/1238/style-your-image-links for more info
	
*/

this.imagelink = function(){
	
	// CONFIG
	
	
	// with multistyle version of this script 
	// you can apply various styles to various images on site
	// the style "groups" consist of 3 elements:
	// 1. css class of images that you wish to apply style to
	// 2. css class that defines how span that covers the image is styled by default
	// 3. css class that defines how span that covers the image is styled when rolled over 
	//
	// use as many varioations as you want, just set the css class to images in html 

	
	// [image css class, covering span default css class, covering span mouseover css class]
	var arr = [			   			  				
				["image1", "", "imageOver"],
				["image2", "imageOut2", "imageOver2"],
				["image3", "", "imageOver3"],
				["image4", "", "imageOver4"],
				["image5", "", "imageOver5"]
			  ];
			
	// END CONFIG
	
	for (var x=0;x<arr.length;x++){
		
		var a = document.getElementsByTagName("a");
		for (var i=0;i<a.length;i++){
			var img = a[i].getElementsByTagName("img");		
			for (var j=0;j<img.length;j++){			
				if(img[j].className == arr[x][0] || arr[x][0] == ""){
					a[i].style.position = "static";						 
					if(a[i].getElementsByTagName("span").length > 0) a[i].removeChild(a[i].getElementsByTagName("span")[0]);
					var span = document.createElement("span");	
					var image = img[j];
					span.style.position = "absolute";
					span.style.top = image.offsetTop + "px";
					span.style.left = image.offsetLeft + "px";
					span.style.width = image.offsetWidth + "px";
					span.style.height = image.offsetHeight + "px";
					span.style.cursor = "pointer";
					span.out = span.className = arr[x][1];
					span.over = arr[x][2];
					span.a = img[j].a = a[i];	
					span.j = img[j].j = j;					
					a[i]["span" + j] = span;					
					span.onmouseover = img[j].onmouseover = function(){ 
						this.a["span" + this.j].className = this.a["span" + this.j].over;
					};
					span.onmouseout = img[j].onmouseout = function(){
						this.a["span" + this.j].className = this.a["span" + this.j].out;
					};
					a[i].appendChild(span);							
				};		
			};	
		};
		
	};
};



// script initiates on page load. 

this.addEvent = function(obj,type,fn){
	if(obj.attachEvent){
		obj['e'+type+fn] = fn;
		obj[type+fn] = function(){obj['e'+type+fn](window.event );}
		obj.attachEvent('on'+type, obj[type+fn]);
	} else {
		obj.addEventListener(type,fn,false);
	};
};
addEvent(window,"load",imagelink);
addEvent(window,"resize",imagelink);