// hieronder de bestandsnamen van de 10 pagina's die in het menu staan:

var page = Array('main.html','lidwien.html','ed.htm','martje.htm','wieneke.htm','stoffel.htm','lonneke.htm','kleinkinderen.htm','links.htm');

// hieronder van alles voor plaatjes en het menu

var intro = Array('1,0','2,0','3,0','4,0','6,0','7,0','0,1','7,1','6,2','1,3','5,3','0,4','6,4','7,4','1,5','2,5','3,5','5,5','6,5'); // x,y positie van afbeeldingen op openingspagina
var usedimages = Array() // lege array om op te slaan welke afbeeldingen in gebruik zijn
var imagecount = 0; // Het aantal gebruikte afbeeldingen
var maxfile = 48; // hoogste nummer van de afbeeldingen
var imgwidth = 97; // breedte van afbeelding in pixels
var w1 = getWindowWidth() // breedte van het venster in pixels
var maxcol = Math.floor(w1/imgwidth)-1; // breedte van het venster in kolommen
var h1 = getWindowHeight() // hoogte van het venster in pixels
var maxrow = Math.floor(h1/imgwidth)-1; // hoogte van het venster rijen

function randomUnusedImage() {
	t = 0;
	do {
		rr = Math.round((maxfile - 1)*Math.random());
		t++;
	}
	while((usedimages[rr] > 0) || (t>100)) 
	return rr;
}

function randomIntroImage() {
	rr = Math.round((intro.length -1)*Math.random())
	return rr;
}

function swapimages() {
	var myInterval = window.setInterval(function () {
		r = randomIntroImage();
		for(var i in intro) {
			if (usedimages[i]==r) {
				usedimages[i]=0;
			}
		}
		imgnr = randomUnusedImage();
		usedimages[imgnr]=r;
		image = pad(imgnr+1, 3, '0');
		document.getElementById('image'+r).src = 'images/'+image+'.jpg';
	},1000);
}

function showIntroImage(i, xn, yn) {
	imgnr = randomUnusedImage();
	image = pad(imgnr+1, 3, '0');
	pos = (yn*10)+xn;
	xpos = (xn * imgwidth) - 1;
	ypos = (yn * imgwidth) - 1;
	document.write("<DIV id='div"+i+"' style='z-index:"+(pos+100)+";position:absolute;top:"+ypos+"px;left:"+xpos+"px;border:1px solid #fff;'><"+"IMG id='image"+i+"' src='images/"+image+".jpg'></DIV>");
	usedimages[imgnr] = i;
}

function showSiteImage(i, xn, yn) {
	imgnr = randomUnusedImage();
	image = pad(imgnr+1, 3, '0');
	pos = (yn*10)+xn;
	xpos = (xn * imgwidth) - 1;
	ypos = (yn * imgwidth) - 1;
	if(yn>3) ypos-=30; 
	document.write("<DIV id='div"+i+"' style='z-index:"+(pos+100)+";position:absolute;top:"+ypos+"px;left:"+xpos+"px;border:1px solid #fff;'><"+"IMG id='image"+i+"' src='images/"+image+".jpg'></DIV>");
	usedimages[imgnr] = i;
}

function showIntroImages() {
	var myPause = window.setTimeout(function() { window.location=page[0]; },30000);

	for(var i in intro) {
		c = intro[i].split(',');
		showIntroImage(i,c[0],c[1]);
	}
	imagecount = intro.length;
	document.write("<DIV style='z-index:110;position:absolute;top:-1px;left:484px;border:1px solid #fff;'><"+"IMG src='images/text1.gif'></DIV>");
	document.write("<DIV style='z-index:110;position:absolute;top:193px;left:-1px;border:1px solid #fff;'><"+"IMG src='images/text2.gif'></DIV>");
	document.write("<DIV style='z-index:110;position:absolute;top:290px;left:678px;border:1px solid #fff;'><"+"IMG src='images/text3.gif'></DIV>");
	document.write("<DIV style='z-index:110;position:absolute;top:387px;left:96px;border:1px solid #fff;'><"+"IMG src='images/text4.gif'></DIV>");
	document.writeln("<div id='biglogo' onClick='window.location=page[0];' style='top:"+(123)+"px;left:"+(182)+"px;'></div>\n");
	swapimages();
}

function showMenu() {
	x = window.location.pathname.lastIndexOf('/');
	if(x) {
		currentPage = window.location.pathname.substr(x+1);
	} else {
		currentPage = window.location.pathname.substr(1);
	}

	yoffset = 97;
	for(i=0;i<9;i++) {
		y = (i*29)+yoffset
		if(currentPage == page[i]) {
			document.writeln("<div style='position:absolute;top:"+y+"px;left:0px;'><img src='menu/btn_"+i+"_active.gif'></div>\n");
		} else {
			document.writeln("<div style='position:absolute;top:"+y+"px;left:0px;'><a href='"+page[i]+"'><img src='menu/btn_"+i+".gif' onMouseOver='this.src=\"menu/btn_"+i+"_over.gif\"' onMouseOut='this.src=\"menu/btn_"+i+".gif\"'></a></div>\n");
		}
	}
}

function showLayout() {
	preloadMenu();
	var j=0;
	for(i=0;i<=2;i++) {
		showSiteImage(j,i,0);
		j++;
	}
	for(i=4;i<=maxrow;i++) {
		showSiteImage(j,0,i);
		j++;
	}
	for(i=4;i<=maxrow-((maxrow-4)/2);i++) {
		showSiteImage(j,1,i);
		j++;
	}
	showMenu();
	imagecount = j;
	document.write("<div id='mainheader'></div>");
}

// generic functions

function pad(str,newlength,fillchar) { // paddingfunctie
	str = str.toString();
	fillchar = fillchar.toString();
	step = newlength - str.length;
	for(j=1;j<=step;j++) {
		str = fillchar + str;
	}
	return str;
}

function getWindowHeight() {
	var windowHeight=0;
	if (typeof(window.innerHeight)=='number') {
		windowHeight=window.innerHeight;
	} else {
		if (document.documentElement&&
			document.documentElement.clientHeight) {
			windowHeight=document.documentElement.clientHeight;
		} else {
			if (document.body&&document.body.clientHeight) {
				windowHeight=document.body.clientHeight;
			}
		}
	}
	return windowHeight;
}

function getWindowWidth() {
	var windowWidth=0;
	if (typeof(window.innerWidth)=='number') {
		windowWidth=window.innerWidth;
	} else {
		if (document.documentElement&&
			document.documentElement.clientWidth) {
			windowWidth=document.documentElement.clientWidth;
		} else {
			if (document.body&&document.body.clientWidth) {
				windowWidth=document.body.clientWidth;
			}
		}
	}
	return windowWidth;
}

function resize() {
	var h = getWindowHeight()-116;
	document.getElementById('tekstkader').style.height = h + 'px';
}

function preloadMenu() {
 	for(var i=0;i<10;i++) { 
		newimg=new Image; 
		newimg.src='menu/btn_'+i+'.gif';
		newimg.src='menu/btn_'+i+'_over.gif';
		newimg.src='menu/btn_'+i+'_active.gif';
	}
}