// preparations


var layerStepX = 11;
var layerStepY = 28;
var layerPosX = 40 - layerStepX;
var layerPosY = 40 - layerStepY;
var layerIndex = 0;
var kleurtjes = new Array("#ff3333","#ffff33","#ff33ff","#33ff33","#33ffff","#3333ff");

var curbgrTimer = -1;

function setBgr(nr) {
	if(bgrTimer) clearTimeout(bgrTimer);
	if(bgrs["src"].length) {
		randomnumber = curbgrTimer;
		if(nr == 0) {
			randomnumber = 0;
		} else {
			while(randomnumber == curbgrTimer) {
				randomnumber = Math.floor(Math.random()*bgrs["src"].length);
			}
		}
		curbgrTimer = randomnumber;
		var oTarget = document.getElementById("main");
		if(oTarget) {
			oTarget.style.background = "url(/afbeeldingen/"+bgrs["src"][randomnumber]+")";
			if(bgrs["repeats"][randomnumber] == 0) {
				oTarget.style.backgroundRepeat = "no-repeat";
			} else if(bgrs["repeats"][randomnumber] == 1) {
				oTarget.style.backgroundRepeat = "repeat-x";
			} else if(bgrs["repeats"][randomnumber] == 2) {
				oTarget.style.backgroundRepeat = "repeat-y";
			} else {
				oTarget.style.backgroundRepeat = "repeat";
			}
			bgrTimer = setTimeout("setBgr();", bgrs["delays"][randomnumber]*1000);
		} else {
			bgrTimer = setTimeout("setBgr(0);", 10);
		}
	}
}
// timer, only one fade a time
var timerFadeBusy = false;
function openLayer(target, id, title, pid) {
	if(!timerFadeBusy) {
		getScrollXY();
		// ande the layer itself
		var oTarget = document.getElementById("lay"+target);
		var openNow = false;
		if(!oTarget)
		{	// there is no target
			// create a fader first
			var oTargetBGR = document.createElement("div");
			oTargetBGR.setAttribute("class", "fade");
			oTargetBGR.setAttribute("className", "fade");
			oTargetBGR.setAttribute("id", "bgr"+(layerIndex+100));
			oTargetBGR.id = "bgr"+(layerIndex+100);
			oTargetBGR.setAttribute("onclick", (document.all ? new Function("closeLayer()") : "closeLayer();"));
			// than the target on top of it
			var oTarget = document.createElement("div");
			oTarget.setAttribute("class", "laag");
			oTarget.setAttribute("className", "laag");
			oTarget.setAttribute("id", "lay"+(layerIndex+100));
			oTarget.id = "lay"+(layerIndex+100);
			//alert(layerIndex+100)
			oTarget.style.width = 640+"px";
			if(target == "contact") startRequest("container.php?screen=large&what=info&id="+id, "handleInfo", (layerIndex+100));
			if(target == "media") startRequest("container.php?screen=large&what=tag&id="+id, "handleMedia", (layerIndex+100));
			if(target == "project") startRequest("container.php?screen=large&what=project&id="+id, "handleProject", (layerIndex+100));
			if(target == "preview") startRequest("container.php?screen=large&what=preview&id="+id, "handlePreview", (layerIndex+100));
			if(target == "detail") {
				title = title.replace(/\[\#39\]/g, "'");
				id = id.replace(/\[\#39\]/g, "'");
				oTarget.innerHTML = "<div class=\"header\"><h2 id=\"head"+(layerIndex+100)+"\">"+id+"</h2></div><div id=\"laycontent"+(layerIndex+100)+"\"><div class=\"description\">"+title+"</div></div></div>";
				openNow = true;
			} else if(target == "project") {
				title = title.replace(/\[\#39\]/g, "'");
				oTarget.innerHTML = "<div class=\"header\"><h2 id=\"head"+(layerIndex+100)+"\">"+title+"<span id=\"aanvullendeinfo\">&nbsp;</span></h2><img src=\"images/wait.gif\" class=\"waiter\" style=\"display:none\"id=\"wait"+(layerIndex+100)+"\"></div><div id=\"laycontent"+(layerIndex+100)+"\" starter=\""+pid+"\"></div></div>";
			} else {
				title = title.replace(/\[\#39\]/g, "'");
				oTarget.innerHTML = "<div class=\"header\"><h2 id=\"head"+(layerIndex+100)+"\">"+title+"</h2><img src=\"images/wait.gif\" class=\"waiter\" style=\"display:none\"id=\"wait"+(layerIndex+100)+"\"></div><div id=\"laycontent"+(layerIndex+100)+"\"></div></div>";
			}
			
			// the target (body)
			var bodyTarget = document.getElementById("main");
			bodyTarget.appendChild(oTargetBGR);
			bodyTarget.appendChild(oTarget);
			// remember target number
			oTarget.setAttribute("myIndex", layerIndex+100);
			// set target to new number
			target = layerIndex+100;
			layerIndex++;
		}
		// get the fader-layer
		var oTargetBGR = document.getElementById("bgr"+target);
		// set opacity to full visible
		oTarget.style.filter='progid:DXImageTransform.Microsoft.Alpha(Opacity=' + 100 + ')';
		oTarget.style.opacity = (100/100);
		// display otherwise we cannot get it's size
		// (it will not be shown until function is done)
		oTarget.style.display = "block";
		// reposition target postition
		layerPosX += layerStepX;
		layerPosY += layerStepY;
		// set position
		oTarget.style.marginLeft = layerPosX+"px";
		oTarget.style.marginTop = (layerPosY+scrollPosY)+"px";
		// get the layers header
		var oHead = document.getElementById("head"+target);
		var startW = 0;
		var startH = 0;
		if(oHead)
		{	// we have a header so initial size shows headertext
			startW = getElementWidth(oHead) + 22;
			startH = getElementHeight(oHead) + 6;
		}
		// get random color for fader
		var randomnumber = Math.floor(Math.random()*kleurtjes.length);
		//if(target > 2) oTarget.style.borderColor = kleurtjes[randomnumber];
		if(oTargetBGR) oTargetBGR.style.backgroundColor = kleurtjes[randomnumber];
		// remember the height of the previous openend layer
		oTarget.setAttribute("oudeHoogte", curHeight);
		// get original height + top + some extra space below
		var hoogte = getElementHeight(oTarget) + getElementTop(oTarget) + 20;
		var h = getElementHeight(oTarget);
		// remember my height
		oTarget.setAttribute("mijnHoogte", h);
		// remember my height is it's the highest
		if(hoogte > curHeight) curHeight = hoogte;
		// set the height of the bgr-fader to the heighest height
		if(oTargetBGR) oTargetBGR.style.height = curHeight+"px";
		// do the same with the width
		var breedte = getElementWidth(oTarget) + getElementLeft(oTarget) + 20;
		oTarget.setAttribute("oudeBreedte", curWidth);
		var w = getElementWidth(oTarget);
		oTarget.setAttribute("mijnBreedte", w);
		if(breedte > curWidth) curWidth = breedte;
		if(oTargetBGR) oTargetBGR.style.height = curWidth+"px";
		// get the current opacity of the bgr-fader
		if(oTargetBGR) var opa = oTargetBGR.getAttribute("opa") ? oTargetBGR.getAttribute("opa") : 0;
		opa = parseInt(opa);
		// start to fade the bgr
		if(oTargetBGR) fader("bgr"+target, 50, 10, opa);
		// set width and height to initial size (zero or headertext size)
		oTarget.style.width = startW+"px";
		oTarget.style.height = startH+"px";
		
		if(target == 1)
		{	// extra info menu on homepage must be opend to
			obj2 = document.getElementById("lay2");
			obj2.style.display = "";
			oHead2 = document.getElementById("head2");
			if(oHead2) {
				// set layer to its header size
				mijnW = getElementWidth(obj2);
				mijnH = getElementHeight(obj2);
				obj2.setAttribute("mijnW", mijnW);
				obj2.setAttribute("mijnH", mijnH);
				obj2.style.width = (getElementWidth(oHead2) + 20) + "px";
				obj2.style.height = (getElementHeight(oHead2) + 6) + "px";
				// place info menu below the main menu
				obj2.style.marginLeft = layerPosX+"px";
				obj2.style.marginTop = (getElementTop(oTarget) + getElementHeight(oTarget) + 20) +"px";
			}
		} else if(target > 2) {
			document.getElementById("sluiter").style.marginLeft = (layerPosX-5)+"px";
			document.getElementById("sluiter").style.marginTop = (scrollPosY+layerPosY-5)+"px";
			document.getElementById("sluiter").style.display = "block";
		}
		document.getElementById("lefty").style.display = "none";
		document.getElementById("righty").style.display = "none";
		// 
		//fader("lay"+target, 100, 2, 100);
		// start reziser after half a second (first we fade)
		if(target < 3) setTimeout("resizeLayer('lay"+target+"',"+(w-2)+","+(h-6)+");", 500);
		if(openNow) {
			oTarget.setAttribute("loadReady", 1);
			startResizer(target, 640, (h-6));
		}
		getSize();
	}
}
var remContent = "";
function handleInfo(result, id) {
	if(result != "") {
		remContent = result;
		result = "";
	}
	divs = document.getElementsByTagName("div");
	oTarget = false;
	for(i in divs) {
		idval = false;
		if(divs[i]) {
			if(divs[i].attributes) {
				if(divs[i].attributes.getNamedItem("id")) {
					idval = divs[i].attributes.getNamedItem("id").value;
					//alert(idval);
					if(idval == "lay"+id) {
						oTarget = divs[i];
						break;
					}
				}
			}
		}
	}
	if(oTarget) {
		handleInfoForReal(result, id);
	} else {
		setTimeout("handleInfo(\'"+result+"\', "+id+");", 20);
	}
}
function handleInfoForReal(result, id) {
	result = remContent;
	oTarget = document.getElementById("lay"+id);
	if(oTarget) {
		var w = oTarget.style.width;
		var h = oTarget.style.height;
		obj = document.getElementById("laycontent"+id);
		obj.innerHTML = result;
		var breedte = screenPosWidth - 38 - parseInt(oTarget.style.marginLeft);
		if(breedte > 640) breedte = 640;
		oTarget.style.width = breedte+"px";
		oTarget.style.height = "auto";
		
		var tw = getElementWidth(oTarget)
		var th = getElementHeight(oTarget)
		var hoogte = getElementHeight(oTarget) + getElementTop(oTarget) + 20;
		// remember my height
		oTarget.setAttribute("mijnHoogte", th);
		// remember my height is it's the highest
		if(hoogte > curHeight) curHeight = hoogte;
			
		oTargetBGR = document.getElementById("bgr"+id);
		if(oTargetBGR) oTargetBGR.style.height = curHeight+"px";
			
		oTarget.style.width = w;
		oTarget.style.height = h;
		oTarget.setAttribute("loadReady", 1);
		startResizer(id, (tw-2), (th-6));
	}
		
	// call getSize for optimizing all bgr-fader sizes
	getSize();
}
function handleMedia(result, id) {
	if(result != "") {
		remContent = result;
		result = "";
	}
	divs = document.getElementsByTagName("div");
	oTarget = false;
	for(i in divs) {
		idval = false;
		if(divs[i]) {
			if(divs[i].attributes) {
				if(divs[i].attributes.getNamedItem("id")) {
					idval = divs[i].attributes.getNamedItem("id").value;
					//alert(idval);
					if(idval == "lay"+id) {
						oTarget = divs[i];
						break;
					}
				}
			}
		}
	}
	if(oTarget) {
		handleMediaForReal(result, id);
	} else {
		setTimeout("handleMedia(\'"+result+"\', "+id+");", 20);
	}
}
function handleMediaForReal(result, id) {
	result = remContent.split("|-|");
	var aantal = (parseInt(result[1]) * 270) + 24;
	result = result[0];
	oTarget = document.getElementById("lay"+id);
	var w = oTarget.style.width;
	var h = oTarget.style.height;
	obj = document.getElementById("laycontent"+id);
	obj.innerHTML = result;
	var breedte = screenPosWidth - 38 - parseInt(oTarget.style.marginLeft);
	breedte = breedte - ((breedte - 20) % 270) + 20;
	if(breedte > aantal && aantal > 270) breedte = aantal;
	
	oTarget.style.width = breedte+"px";
	oTarget.style.height = "auto";
	
	var tw = getElementWidth(oTarget)
	var th = getElementHeight(oTarget)
	var hoogte = getElementHeight(oTarget) + getElementTop(oTarget) + 20;
	// remember my height
	oTarget.setAttribute("mijnHoogte", th);
	// remember my height is it's the highest
	if(hoogte > curHeight) curHeight = hoogte;
		
	oTargetBGR = document.getElementById("bgr"+id);
	if(oTargetBGR) oTargetBGR.style.height = curHeight+"px";
		
	oTarget.style.width = w;
	oTarget.style.height = h;
	oTarget.setAttribute("loadReady", 1);
	startResizer(id, (tw-2), (th-6), 1);
	
		// call getSize for optimizing all bgr-fader sizes
		getSize();
}
function previousPreview() {
	var infolayer = document.getElementById("previewinfo");
	var aantal = parseInt(infolayer.getAttribute("aantal"));
	curId--;
	if(curId < 0) curId = aantal - 1;
	toonPreview(curId);
}
function nextPreview() {
	var infolayer = document.getElementById("previewinfo");
	var aantal = parseInt(infolayer.getAttribute("aantal"));
	curId++;
	if(curId == aantal) curId = 0;
	toonPreview(curId);
}
var curPreview = -1;
var curId = -1;
function handleProject(result, id) {
	if(result != "") {
		remContent = result;
		result = "";
	}
	divs = document.getElementsByTagName("div");
	oTarget = false;
	for(i in divs) {
		idval = false;
		if(divs[i]) {
			if(divs[i].attributes) {
				if(divs[i].attributes.getNamedItem("id")) {
					idval = divs[i].attributes.getNamedItem("id").value;
					//alert(idval);
					if(idval == "lay"+id) {
						oTarget = divs[i];
						break;
					}
				}
			}
		}
	}
	if(oTarget) {
		handleProjectForReal(result, id);
	} else {
		setTimeout("handleProject(\'"+result+"\', "+id+");", 20);
	}
}
function handleProjectForReal(result, id) {
	result = remContent;
	oTarget = document.getElementById("lay"+id);
	var w = oTarget.style.width;
	var h = oTarget.style.height;
	obj = document.getElementById("laycontent"+id);
	var starter = obj.getAttribute("starter") ? obj.getAttribute("starter") : 0;
	obj.innerHTML = result;
	
	var breedte = screenPosWidth - 38 - parseInt(oTarget.style.marginLeft);
	
	var beschikbaar = breedte - 20;
	var infolayer = document.getElementById("previewinfo");
	var minWidth = parseInt(infolayer.getAttribute("minwidth"));
	var maxWidth = parseInt(infolayer.getAttribute("maxwidth"));
	var aantal = parseInt(infolayer.getAttribute("aantal"));
	
	
	var start = 0;
	for(i=0;i<aantal;i++) {
		oPreview = document.getElementById("preview"+i);
		work = oPreview.getAttribute("work");
		if(work == starter) start = i;
		if(oPreview.getAttribute("media")) {
			if(minWidth < 640) {
				//minWidth = 640;
				//infolayer.setAttribute("minwidth", minWidth);
			}
			b = beschikbaar < 640 ? beschikbaar : 640;
			w = parseInt(640 * ((b)/640));
			oPreview.setAttribute("mywidth", w);
			h = parseInt(480 * ((b)/640));
			oPreview.setAttribute("myheight", h);
			oImage = document.getElementById("playerspace"+i);
			var so = new SWFObject('/new/mediaplayer.swf','ply',w,h,'9','#ffffff');
			so.addParam('allowfullscreen','true');
			so.addParam('allowscriptaccess','always');
			so.addParam('wmode','opaque');
			so.addVariable('file',oImage.innerHTML);
			if(i == 0)
				so.addVariable('autostart','true');
			else
				so.addVariable('autostart','true');
			so.write('playerspace'+i);
			if(work != starter) {
				oPreview.style.display = "none";
			}
		}
	}
	
	if(beschikbaar > maxWidth) breedte = maxWidth+20;
	beschikbaar = breedte - 20;
	if(beschikbaar < minWidth) breedte = minWidth+20;
	infolayer.setAttribute("realwidth", (breedte-20));
	infolayer.setAttribute("myid", id);
	/*
	if(imgWidth > beschikbaar) {
		var factor = beschikbaar/imgWidth;
		var mijnhoogte = factor*parseInt(oImage.getAttribute("myheight"));
		oImage.setAttribute("mywidth", beschikbaar);
		oImage.setAttribute("myheight", mijnhoogte);
	}
	oImage.style.width = parseInt(oImage.getAttribute("mywidth"))+"px";
	oImage.style.height = parseInt(oImage.getAttribute("myheight"))+"px";
	*/
	
	//var verschil = 14 + getElementTop(oImage) - getElementTop(oTarget);
	//oTarget.style.height = (parseInt(oImage.getAttribute("myheight"))+verschil)+"px";
	
	oTarget.style.width = breedte+"px";
	oTarget.style.height = "auto";
	toonPreview(start, id);
}
function toonPreview(nr) {
	curId = nr;
	if(curPreview != -1) {
		document.getElementById("preview"+curPreview).style.display = "none";
		document.getElementById("thumbframe"+curPreview).className = "thumbnail";
	}
	
	var infolayer = document.getElementById("previewinfo");
	var myid = parseInt(infolayer.getAttribute("myid"));
	var minWidth = parseInt(infolayer.getAttribute("minwidth"));
	var maxWidth = parseInt(infolayer.getAttribute("realwidth"));
	var aantal = parseInt(infolayer.getAttribute("aantal"));
	
	
	oTarget = document.getElementById("lay"+myid);
	oPreview = document.getElementById("preview"+nr);
	oImage = document.getElementById("previewimg"+nr);
	
	titel = oPreview.getAttribute("mytitle").replace(/\[\#39\]/g, "'");
	titel = titel.replace(/_/g, " ");
	document.getElementById("aanvullendeinfo").innerHTML = " | " + titel;
	
	var imgWidth = parseInt(oPreview.getAttribute("mywidth"));
	if(imgWidth > maxWidth) {
		var factor = maxWidth/imgWidth;
		var mijnhoogte = factor*parseInt(oPreview.getAttribute("myheight"));
		oPreview.setAttribute("mywidth", maxWidth);
		oPreview.setAttribute("myheight", mijnhoogte);
	}
	oPreview.style.display = "";
	var breedte = parseInt(oPreview.getAttribute("mywidth"));
	if(breedte < minWidth) breedte = minWidth+20;
	oPreview.style.width = breedte+"px";
	xtrahoogte = document.getElementById("description"+nr);
	xtrahoogte = xtrahoogte ? getElementHeight(xtrahoogte) : 0;
	//xtrahoogte += 40;
	oPreview.style.height = (parseInt(oPreview.getAttribute("myheight"))+xtrahoogte+12)+"px";
	if(oImage) {
		oImage.style.width = parseInt(oPreview.getAttribute("mywidth"))+"px";
		oImage.style.height = parseInt(oPreview.getAttribute("myheight"))+"px";
	}
	var verschil = 14 + getElementTop(oPreview) - getElementTop(oTarget);
	oTarget.style.height = (parseInt(oPreview.getAttribute("myheight"))+verschil+xtrahoogte)+"px";
	
	var tw = getElementWidth(oPreview) + 20;
	var th = getElementHeight(oTarget)
	var hoogte = getElementHeight(oTarget) + getElementTop(oTarget) + 20;
	// remember my height
	oTarget.setAttribute("mijnHoogte", th);
	// remember my height is it's the highest
	if(hoogte > curHeight) curHeight = hoogte;
		
	oTarget.setAttribute("loadReady", 1);
	startResizer(myid, (tw-2), (th-6));
	
	curPreview = nr;
	if(aantal > 1) {
		document.getElementById("thumbframe"+curPreview).className = "thumbnailactive";
		
		document.getElementById("lefty").style.marginLeft = (getElementLeft(oPreview)+1)+"px";
		document.getElementById("lefty").style.marginTop = (getElementTop(oPreview)+50)+"px";
		document.getElementById("lefty").style.display = "block";
		//document.getElementById("righty").style.marginLeft = (getElementLeft(oPreview)+getElementWidth(oPreview)-32)+"px";
		document.getElementById("righty").style.marginTop = (getElementTop(oPreview)+50)+"px";
		document.getElementById("righty").style.display = "block";
		
		var leftArrow = document.getElementById("lefty");
		doAlpha(leftArrow);
		
		
	}
		// call getSize for optimizing all bgr-fader sizes
		getSize();
		
		
	
}
function handlePreview(result, id) {
	oTarget = document.getElementById("lay"+id);
	var w = oTarget.style.width;
	var h = oTarget.style.height;
	obj = document.getElementById("laycontent"+id);
	obj.innerHTML = result;
	
	var breedte = screenPosWidth - 38 - parseInt(oTarget.style.marginLeft);
	var beschikbaar = breedte - 20;
	oImage = document.getElementById("preview0");
	if(oImage) {
		var imgWidth = parseInt(oImage.getAttribute("mywidth"));
		if(imgWidth < beschikbaar) breedte = imgWidth+20;
		if(imgWidth > beschikbaar) {
			var factor = beschikbaar/imgWidth;
			var mijnhoogte = factor*parseInt(oImage.getAttribute("myheight"));
			oImage.setAttribute("mywidth", beschikbaar);
			oImage.setAttribute("myheight", mijnhoogte);
		}
		oImage.style.width = parseInt(oImage.getAttribute("mywidth"))+"px";
		oImage.style.height = parseInt(oImage.getAttribute("myheight"))+"px";
		oTarget.style.width = breedte+"px";
		var verschil = 14 + getElementTop(oImage) - getElementTop(oTarget);
		oTarget.style.height = (parseInt(oImage.getAttribute("myheight"))+verschil)+"px";
	} else {
		oImage = document.getElementById("playerspace");
		
			if(beschikbaar > 640) beschikbaar = 640;
			w = parseInt(640 * ((beschikbaar)/640));
			//oPreview.setAttribute("mywidth", w);
			h = parseInt(480 * ((beschikbaar)/640));
			//oPreview.setAttribute("myheight", h);
			//oImage = document.getElementById("playerspace"+i);
			//var so = new SWFObject('/new/mediaplayer.swf','ply',w,h,'9','#ffffff');
			
			
		breedte = w+20;
		oTarget.style.width = breedte+"px";
		var verschil = 14 + getElementTop(oImage) - getElementTop(oTarget);
		oTarget.style.height = (h+verschil)+"px";
		var so = new SWFObject('/new/mediaplayer.swf','ply',w,h,'9','#ffffff');
		so.addParam('allowfullscreen','true');
		so.addParam('allowscriptaccess','always');
		so.addParam('wmode','opaque');
		so.addVariable('file',oImage.innerHTML);
		so.addVariable('autostart','true');
		so.write('playerspace');
	}
	
	var tw = getElementWidth(oTarget)
	var th = getElementHeight(oTarget)
	var hoogte = getElementHeight(oTarget) + getElementTop(oTarget) + 20;
	// remember my height
	oTarget.setAttribute("mijnHoogte", th);
	// remember my height is it's the highest
	if(hoogte > curHeight) curHeight = hoogte;
		
	oTargetBGR = document.getElementById("bgr"+id);
	if(oTargetBGR) oTargetBGR.style.height = curHeight+"px";
		
	oTarget.style.width = w;
	oTarget.style.height = h;
	oTarget.setAttribute("loadReady", 1);
	startResizer(id, (tw-2), (th-6));
	
		// call getSize for optimizing all bgr-fader sizes
		getSize();
}
function startResizer(id, w, h, b) {
	oTarget = document.getElementById("lay"+id);
	if(oTarget.getAttribute("fadeReady")) {
		setTimeout("resizeLayer('lay"+id+"',"+w+","+h+","+b+");", 1);
		if(document.getElementById("wait"+id)) document.getElementById("wait"+id).style.display = "none";
	} else {
		setTimeout("startResizer("+id+", "+w+", "+h+", '"+b+"');",100);
	}
	
}
function closeLayer(target) {
	if(!timerFadeBusy)
	{	// only if fade is not busy
		// if there is no target just decrease
		layerIndex--;
		if(!target) target = layerIndex + 100;
		// get target en bgr-fader objects
		var oTarget = document.getElementById("lay"+target);
		var oTargetBGR = document.getElementById("bgr"+target);
		// oTarget.style.display = "none";
		// reset heighest height to previous one
		curHeight = parseInt(oTarget.getAttribute("oudeHoogte"));
		// get opacity
		var opa = oTargetBGR.getAttribute("opa") ? oTargetBGR.getAttribute("opa") : 0;
		opa = parseInt(opa);
		//setTimeout("resizeLayer('lay"+target+"',"+(w-22)+","+(h-22)+");", 700);
		// fade layer and bgr
		fader("lay"+target, 0, 20, 100);
		fader("bgr"+target, 0, 20, opa);
		// reposition target postition
		layerPosX -= layerStepX;
		layerPosY -= layerStepY;
		
		if(layerIndex > 0) {
			var oTarget = document.getElementById("lay"+(layerIndex+99));
		}
		
		document.getElementById("sluiter").style.marginLeft = (getElementLeft(oTarget)-5)+"px";
		document.getElementById("sluiter").style.marginTop = (getElementTop(oTarget)-5)+"px";
		if(!layerIndex) document.getElementById("sluiter").style.display = "none";
		
		curPreview = -1;
		curId = -1;

	}
}
var extraBusy = false;
function fader(obj, to, step, opa)
{	// this is the fader
	//		if(timerFadeBusy) clearTimeout(timerFadeBusy);
	//		timerFadeBusy = false;
	// get layer object
	var oTarget = document.getElementById(obj);
	// translate strings to int
	to = parseInt(to);
	step = parseInt(step);
	opa = parseInt(opa);
	// determine fade direction
	var stap = to>opa ? step : -step;
	// change opacity
	opa += stap;
	// and set
	oTarget.style.filter='progid:DXImageTransform.Microsoft.Alpha(Opacity=' + opa + ')';
	oTarget.style.opacity = (opa/100);
	if((stap > 0 && to > opa) || (stap < 0 && to < opa))
	{	// if not ready yet, show and do again
		if(opa > 0) oTarget.style.display = "block";
		timerFadeBusy = setTimeout("fader('"+obj+"', '"+to+"', '"+step+"', '"+opa+"');", 1);
	} else
	{	// else set opacity to final value
		if((stap > 0 && opa > to) || (stap < 0 && opa < to)) opa = to;
		oTarget.style.filter='progid:DXImageTransform.Microsoft.Alpha(Opacity=' + opa + ')';
		oTarget.style.opacity = (opa/100);
		oTarget.setAttribute("opa", opa);
		// if full opaque than hide
		if(opa == 0) oTarget.style.display = "none";
		// ready
		timerFadeBusy = false;
		
		if(stap < 0)
		{	// if fade out than destroy layer
			oTarget.parentNode.removeChild(oTarget);
			if(layerIndex > 0) {
				var oTarget = document.getElementById("lay"+(layerIndex+99));
				
				var infolayer = document.getElementById("previewinfo");
				if(infolayer) {
					var aantal = parseInt(infolayer.getAttribute("aantal"));
					if(aantal > 1) {
						document.getElementById("lefty").style.display = "block";
						document.getElementById("righty").style.display = "block";
					} else {
						document.getElementById("lefty").style.display = "none";
						document.getElementById("righty").style.display = "none";
					}
				} else {
					document.getElementById("lefty").style.display = "none";
					document.getElementById("righty").style.display = "none";
				}
			}
			
		} else
		{	// if fade in than resize layer now
			target = obj.replace(/bgr/, "");
			oTarget = document.getElementById("lay"+target);
			oTarget.setAttribute("fadeReady", 1);
			if(!oTarget.getAttribute("loadReady")) {
				var tw = getElementWidth(oTarget);
				var th = getElementHeight(oTarget);
				setTimeout("nogFFwachten('"+target+"',"+tw+","+th+");", 1000);
			}
		}
	}
}
function nogFFwachten(obj, tw, th) {
	oTarget = document.getElementById("lay"+obj);
	if(oTarget) {
		if(!oTarget.getAttribute("loadReady")) {
			resizeLayer("lay"+obj,tw-2+21,th-6);
			document.getElementById("wait"+obj).style.display = "";
		}
	}
}
var timerSizeBusy = false;
function resizeLayer(obj,w,h,b)
{	// resize layer
	if(timerSizeBusy) clearTimeout(timerSizeBusy);
	timerSizeBusy = false;
	// get the target
	var oTarget = document.getElementById(obj);
	if(oTarget) {
		// if target width is not set than get it from default
		if(w == -1) w = parseInt(oTarget.getAttribute("mijnBreedte")) - 2;
		// get current width also
		var breedte = getElementWidth(oTarget) - 2;
		if(w != breedte)
		{	// if not the same change
			var difX = w - breedte;
			var step = 20;
			if(b == 1) {
				step = 270;
				if(Math.abs(difX) < 320) step = 20;
			}
			if(Math.abs(difX) < 50) step = 10;
			if(Math.abs(difX) < 40) step = 5;
			if(Math.abs(difX) < 20) step = 2;
			if(Math.abs(difX) < 5) step = 1;
			if(difX < 0) step *= -1;
			breedte += step;
			if(Math.abs(breedte-w) <= 1) breedte = w; // do not cross max
			// and set
			oTarget.style.width = breedte+"px";
			if(document.getElementById("righty").style.display == "block") {
				document.getElementById("righty").style.marginLeft = (getElementLeft(oTarget)+breedte-39)+"px";
			}
		} else
		{	// if width is ok than test height
			// target height
			if(h == -1) h = parseInt(oTarget.getAttribute("mijnHoogte")) - 6;
			// current height
			var hoogte = getElementHeight(oTarget) - 6;
			if(h != hoogte)
			{	// if not the same change
				var difY = h - hoogte;
				var step = 20;
				if(b == 1) {
					step = 250;
					if(Math.abs(difY) < 300) step = 20;
				}
				if(Math.abs(difY) < 50) step = 10;
				if(Math.abs(difY) < 40) step = 5;
				if(Math.abs(difY) < 20) step = 2;
				if(Math.abs(difY) < 5) step = 1;
				if(difY < 0) step *= -1;
				hoogte += step;
				if(Math.abs(hoogte-h) <= 1) hoogte = h; // do not cross max
				// and set
				oTarget.style.height = hoogte+"px";
			}
		}
		if(hoogte != h || breedte != w)
		{	// if width or height is not ready than do again
			timerSizeBusy = setTimeout("resizeLayer('"+obj+"', "+w+", "+h+", '"+b+"');", 1);
			if(obj == "lay1")
			{	// update info menu to new height of main menu
				obj2 = document.getElementById("lay2");
				obj2.style.marginTop = (getElementTop(oTarget) + getElementHeight(oTarget) + 20) +"px";
			}
		} else
		{	// if ready set new highest height
			hoogte = getElementHeight(oTarget) + getElementTop(oTarget) + 20;
			oTarget.setAttribute("mijnHoogte", getElementHeight(oTarget));
			if(oTarget.getAttribute("oudeHoogte")) curHeight = parseInt(oTarget.getAttribute("oudeHoogte"));
			if(hoogte > curHeight) curHeight = hoogte;
			// and also widest width
			breedte = getElementWidth(oTarget) + getElementLeft(oTarget) + 20;
			oTarget.setAttribute("mijnBreedte", getElementWidth(oTarget));
			curWidth = parseInt(oTarget.getAttribute("oudeBreedte"));
			curWidth = isNaN(curWidth) ? 0 : curWidth;
			if(breedte > curWidth) curWidth = breedte;
			
			if(obj == "lay1")
			{	// update info menu to new height of main menu
				mijnW = document.getElementById("lay2").getAttribute("mijnW");
				mijnH = document.getElementById("lay2").getAttribute("mijnH");
				setTimeout("resizeLayer('lay2','"+(mijnW-2)+"','"+(mijnH-6)+"');", 250);
			}
			// call getSize for optimizing all bgr-fader sizes
			getSize();
		}
	}
}

// standard function for screen and object sizes

var screenPosWidth = 0;
var screenPosHeight = 0;
var curWidth = 0;
var curHeight = 0;
function getSize() {
	if( typeof( window.innerWidth ) == 'number' ) {
		//Non-IE
		screenPosWidth = window.innerWidth;
		screenPosHeight = window.innerHeight;
	} else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
		//IE 6+ in 'standards compliant mode'
		screenPosWidth = document.documentElement.clientWidth;
		screenPosHeight = document.documentElement.clientHeight;
	} else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
		//IE 4 compatible
		screenPosWidth = document.body.clientWidth;
		screenPosHeight = document.body.clientHeight;
	}
	var instelBreedte = screenPosWidth;
	if(instelBreedte < curWidth) instelBreedte = curWidth;
	var instelHoogte = screenPosHeight;
	if(instelHoogte < curHeight) instelHoogte = curHeight;
	divs = document.getElementsByTagName("div");
	for(obj in divs) {
		if(divs[obj]) {
			if(divs[obj].id) {
				if(divs[obj].id.indexOf("bgr") > -1) {
					//divs[obj].style.width = instelBreedte+"px";
					divs[obj].style.height = instelHoogte+"px";
				}
			}
		}
	}
}
getSize();
var scrollPosY = 0;
var scrollPosX = 0;
function getScrollXY() {
	scrollPosY = 0;
	scrollPosX = 0;
	if( typeof( window.pageYOffset ) == 'number' ) {
		//Netscape compliant
		scrollPosY = window.pageYOffset;
		scrollPosX = window.pageXOffset;
	} else if( document.body && ( document.body.scrollLeft || document.body.scrollTop ) ) {
		//DOM compliant
		scrollPosY = document.body.scrollTop;
		scrollPosX = document.body.scrollLeft;
	} else if( document.documentElement && ( document.documentElement.scrollLeft || document.documentElement.scrollTop ) ) {
		//IE6 standards compliant mode
		scrollPosY = document.documentElement.scrollTop;
		scrollPosX = document.documentElement.scrollLeft;
	}
}
function getElementWidth(Elem) {
	if(Elem) {
		var xPos = false;
		if(typeof(Elem) == "string")
		{
			if(document.getElementById) {
				var Elem = document.getElementById(Elem);
			} else if (document.all){
				var Elem = document.all[Elem];
			}
		}
		if(Elem.offsetWidth) {
			xPos = Elem.offsetWidth;
		} else if (Elem.style) {
			if (Elem.style.pixelWidth) xPos = Elem.style.pixelWidth;
		}
	}
	return xPos;
}
function getElementHeight(Elem) {
	if(Elem) {
		var yPos = false;
		if(typeof(Elem) == "string")
		{
			if(document.getElementById) {
				var Elem = document.getElementById(Elem);
			} else if (document.all){
				var Elem = document.all[Elem];
			}
		}
		if(Elem.offsetHeight) {
			yPos = Elem.offsetHeight;
		} else if (Elem.style) {
			if (Elem.style.pixelHeight) yPos = Elem.style.pixelHeight;
		}
	}
	return yPos;
}

function getElementLeft(Elem) {
	if(Elem) {
		if(typeof(Elem) == "string")
		{
			if(document.getElementById) {
				var Elem = document.getElementById(Elem);
			} else if (document.all) {
				var Elem = document.all[Elem];
			}
		}
		var xPos = Elem.offsetLeft;
		var tempEl = Elem.offsetParent;
		while (tempEl != null) {
			xPos += tempEl.offsetLeft;
			tempEl = tempEl.offsetParent;
		}
	}
	return xPos;
}

function getElementTop(Elem) {
	if(Elem) {
		if(typeof(Elem) == "string")
		{
			if(document.getElementById) {	
				var Elem = document.getElementById(Elem);
			} else if (document.all) {
				var Elem = document.all[Elem];
			}
		}
		var yPos = Elem.offsetTop;
		var tempEl = Elem.offsetParent;
		while (tempEl != null) {
			yPos += tempEl.offsetTop;
			tempEl = tempEl.offsetParent;
		}
	}
	return yPos;
}

// events

function afterLoad(e) {
	if(!document.all) document.captureEvents(Event.MOUSEMOVE);
	document.onmousemove = onmousemovement;
}

function onmousemovement(e) {
	// ten aller tijden de muispositie bepalen
	if(document.all) {
		if(document.documentElement.scrollTop) {
			xx = document.documentElement.scrollLeft;
			yy = document.documentElement.scrollTop;
		} else {
			xx = document.body.scrollLeft;
			yy = document.body.scrollTop;
		}
		topX = xx + 20;
		topY = yy + 20;
		mousePosX = event.clientX + xx;
		mousePosY = event.clientY + yy;
	} else {
		if(document.body.scrollTop || document.body.scrollLeft) {
			mousePosX = parseInt(e.pageX);
			mousePosY = parseInt(e.pageY);
			topX = parseInt(document.body.scrollLeft) + 20;
			topY = parseInt(document.body.scrollTop) + 20;
		} else {
			xx = parseInt(window.pageXOffset);
			yy = parseInt(window.pageYOffset);
			topX = xx + 20;
			topY = yy + 20;
			mousePosX = parseInt(e.pageX); // + xx;
			mousePosY = parseInt(e.pageY); // + yy;
		}
	}
	if(mousePosX < 0) {
		mousePosX = 0;
	}
	if(mousePosY < 0) {
		mousePosY = 0;
	}
	var leftArrow = document.getElementById("lefty");
	//alert(leftArrow);
	if(leftArrow.style.display == "block") {
		doAlpha(leftArrow);
	}
}

function doAlpha(leftArrow) {
	var verschilX = Math.abs(parseInt(leftArrow.style.marginLeft) + 16 - mousePosX);
	var verschilY = Math.abs(parseInt(leftArrow.style.marginTop) + 32 - mousePosY);
	var verschil = Math.sqrt(verschilX*verschilX+verschilY*verschilY);
	if(verschil > 116) verschil = 116;
	verschil = 100 - (verschil - 16);
	leftArrow.style.filter='progid:DXImageTransform.Microsoft.Alpha(Opacity=' + verschil + ')';
	leftArrow.style.opacity = (verschil/100);
	
	var rightArrow = document.getElementById("righty");
	var verschilX = Math.abs(parseInt(rightArrow.style.marginLeft) + 16 - mousePosX);
	var verschilY = Math.abs(parseInt(leftArrow.style.marginTop) + 32 - mousePosY);
	var verschil = Math.sqrt(verschilX*verschilX+verschilY*verschilY);
	if(verschil > 116) verschil = 116;
	verschil = 100 - (verschil - 16);
	rightArrow.style.filter='progid:DXImageTransform.Microsoft.Alpha(Opacity=' + verschil + ')';
	rightArrow.style.opacity = (verschil/100);
	
	
}