window.onload = setImages;

vIE = document.all?true:false;
vIE6 = window.XMLHttpRequest?false:true;
vOpera = window.opera?true:false;
if(vOpera)
	vIE = false;

function getIE7(){
	if(vIE6){
		fLink = 'http://www.microsoft.com/downloads/details.aspx?FamilyId=9AE91EBE-3385-447C-8A30-081805B2F90B&displaylang=nl';
	}
}
function addEvent(fObj, fType, fn){
	if(fObj.addEventListener)
		fObj.addEventListener(fType, fn, false);
	else if(fObj.attachEvent){
		fObj['e'+ fType + fn] = fn;
		fObj[fType + fn] = function(){fObj['e'+ fType + fn](window.event);}
		fObj.attachEvent('on'+ fType, fObj[fType + fn]);
	}
}
function setOpacity(fObject, fOpacity){
	if(document.getElementById(fObject))
		fObject = document.getElementById(fObject);
	vIE?fObject.style.filter = 'alpha(opacity='+ fOpacity +')':fObject.style.opacity = (fOpacity / 100);
	fObject.style.display = 'block';
}
/* menu */
function menuMouseOn(fObject){
	if(!fObject.on){
		fObject.on = true;
		fParent = fObject.parentNode;
		if(fParent.className.substr(0, 4) != 'hold'){
			fParent.className = fParent.className.replace('buttonbg', 'buttonbg_on');
		}
	}
}
function menuMouseOut(fObject){
	if(fObject.on){
		fObject.on = false;
		fParent = fObject.parentNode;
		if(fParent.className.substr(0, 4) != 'hold'){
			fParent.className = fParent.className.replace('buttonbg_on', 'buttonbg');
		}
	}
}
/* images */
vNewWidth = 100;
vNewHeight = 100;
vSteps = (vIE)?24:16;
vImages = '';
function setImages(){
	fAtags = document.getElementsByTagName('a');
	f = 0;
	vImages = new Array;
	for(i in fAtags){
		if(fAtags[i].className == 'showImage'){
			vImages[f] = fAtags[i];
			
			fAtags[i].href = 'javascript:void(0)';
			fAtags[i].imageNumber = f;
			addEvent(fAtags[i], 'click', showImage);
			f++;
		}
	}
	if(f != 0){
		window['vLoading'] = new Image;
		vLoading.src = '/images/loading.gif';
	}
}
function showImage(fId){
	makePhotoFrame();
	if(isNaN(parseInt(fId)))
		fId = this.imageNumber;
	
	setPhotoboxImage('/images/loading.gif');
	
	vSetWidth = false;
	vSetHeight = false;
	document.getElementById('photobox_nav').style.display = 'none';
	document.getElementById('photobox_info_images').innerHTML = 'Afbeelding: '+ (fId + 1) +'/'+ vImages.length;
	
	if(vImages[fId].tagName == 'A'){
		fFile = vImages[fId].style.backgroundImage.replace('/kl_', '/gr_').replace('url(', '').replace(')', '').replace(/"/g, '');
		fTitle = vImages[fId].getAttribute('title');
		vImages[fId] = new Image;
		vImages[fId].src = fFile;
		vImages[fId].imageNumber = fId;
		vImages[fId].title = fTitle;
	}
	if(vIE)
		vImages[fId].oncomplete = loadImage(vImages[fId]);
	else
		vImages[fId].onload = loadImage(vImages[fId]);
}
function makePhotoFrame(){
	if(!document.getElementById('photobox')){
		fBody = document.body;
		fPhotoBox = document.createElement('div');
		fPhotoBox.setAttribute('id', 'photobox');
		fPhotoBoxBg = document.createElement('div');
		fPhotoBoxBg.setAttribute('id', 'photobox_bg');
		
		fBody.insertBefore(fPhotoBox, fBody.firstChild);
		fBody.insertBefore(fPhotoBoxBg, fBody.firstChild);
		
		document.getElementById('photobox').innerHTML = '<div id="photobox_fg"><div id="photobox_nav"><a class="prev" href="javascript:void(0);" onclick="photoNav(1);"></a><a class="next" href="javascript:void(0);" onclick="photoNav(2);"></a></div><div id="photo"></div><div id="photobox_info"><div id="photobox_infobox"><div id="photobox_info_images"></div><a href="javascript:void(0);" onclick="closePhotobox();">Sluiten</a><div id="photobox_title"></div></div></div></div>';
		document.getElementById('photobox').style.display = 'none';
		document.getElementById('photobox_bg').style.display = 'none';
		window['vPhotoBoxFg'] = document.getElementById('photobox_fg');
		setOpacity('photobox_bg', 70);
	}
	if(document.getElementById('photobox').style.display == 'none'){
		vPhotoBoxWidth = 200;
		vPhotoBoxHeight = 200;
		document.getElementById('photobox_fg').style.width = '200px';
		document.getElementById('photobox_fg').style.height = '200px';
		document.getElementById('photobox').style.display = 'block';
		document.getElementById('photobox_bg').style.display = 'block';
	}
}
function loadImage(fImage){
	if(fImage.width != 0 && fImage.height != 0)
		setImage(fImage);
	else
		setTimeout('loadImage(vImages['+ fImage.imageNumber +'])', 50);
}
function setImage(fImage){
	fImage.onload = function(){};
	fWidth = fImage.width;
	vNewWidth = fWidth + (fWidth % 2);
	vNewHeight = fImage.height;
	resize('photobox_fg');
	setPhotoboxImage(fImage.src);
	document.getElementById('photobox_title').innerHTML = fImage.title;
	document.getElementById('photobox').currentPhoto = fImage.imageNumber;
}
function setNav(){
	if(vImages.length > 1)
		document.getElementById('photobox_nav').style.display = '';
}
function setPhotoboxImage(fImage){
	document.getElementById('photo').style.backgroundImage = 'url("'+fImage+'")';
}
function resize(fId){
	fDiv = document.getElementById(fId);
	fWidth = fDiv.clientWidth;
	fHeight = fDiv.clientHeight;
	
	fSetWidth = false;
	fSetHeight = false;
	if(fWidth != vNewWidth || fHeight != vNewHeight){
		if(fHeight > vNewHeight)
			fSetHeight = true;
		else{
			if(fWidth != vNewWidth)
				fSetWidth = true;
			else if(fHeight != vNewHeight)
				fSetHeight = true;
		}
		setTimeout('resize("'+ fId +'");', 25);
	}
	else
		setNav();
	
	
	if(fSetWidth){
		if(fWidth < vNewWidth){
			if((fWidth + vSteps) > vNewWidth)
				fDiv.style.width = vNewWidth +'px';
			else
				fDiv.style.width = (fWidth + vSteps) +'px';
		}
		else{
			if((fWidth - vSteps) < vNewWidth)
				fDiv.style.width = vNewWidth +'px';
			else
				fDiv.style.width = (fWidth - vSteps) +'px';
		}
	}
	if(fSetHeight){
		if(fHeight > vNewHeight){
			if((fHeight - vSteps) < vNewHeight)
				fDiv.style.height = vNewHeight +'px';
			else
				fDiv.style.height = (fHeight - vSteps) +'px';
		}
		else{
			if((fHeight + vSteps) > vNewHeight)
				fDiv.style.height = vNewHeight +'px';
			else
				fDiv.style.height = (fHeight + vSteps) +'px';
		}
		if(vIE6){
			document.getElementById('photo').style.height = fDiv.style.height;
			document.getElementById('photobox_nav').style.height = fDiv.style.height;
		}
	}
}
function photoNav(fDirection){
	if(!vIE)
		this.blur();

	fCurrent = document.getElementById('photobox').currentPhoto;
	if(fDirection == 1){
		fCurrent--;
		if(fCurrent == -1)
			fCurrent = (vImages.length - 1);
	}
	else{
		fCurrent++;
		if(fCurrent == vImages.length)
			fCurrent = 0;
	}
	showImage(fCurrent);
}
function closePhotobox(){
	document.getElementById('photobox').style.display = 'none';
	document.getElementById('photobox_bg').style.display = 'none';
}
/* Parkeren en Entree */
function setRoute(fId){
	if(fId == 1){
		fImage = 'kl_aanrijroute_danenhoef.jpg';
		fWidth = 150;
		fHeight = 224;
		fTekst = 'Na het parkeren kunt u over de fietsstraat lopen naar de Zevenbergeweg. Vervolgs gaat uw links en loopt u de Zevenbergseweg helemaal uit tot u bij de rotonde bent.';
		fLink = 'http://maps.google.nl/maps?f=d&hl=nl&geocode=6479156956831495150,51.775610,5.576117&saddr=&daddr=51.761147,5.56303&mra=dme&mrcr=0&mrsp=1&sz=15&sll=51.76776,5.56921&sspn=0.01968,0.040169&ie=UTF8&ll=51.758915,5.559812&spn=0.009842,0.020084&z=16&om=1';
	}
	else if(fId == 2){
		fWidth = 220;
		fHeight = 150;
		fImage = 'kl_aanrijroute_invaliden.jpg';
		fTekst = 'Voor bezoekers die in bezit zijn van een invalidenkaart zullen langs de Osseweg parkeerplaatsen worden gereserveerd.';
		fLink = 'http://maps.google.nl/maps?f=d&hl=nl&geocode=10260063118507422367,51.769566,5.555176&saddr=&daddr=51.769467,5.558449&mra=dme&mrcr=0&mrsp=1&sz=17&sll=51.768769,5.557312&sspn=0.00492,0.010042&ie=UTF8&om=1&ll=51.769115,5.559683&spn=0.00984,0.020084&z=16';
	}
	else{		
		fImage = 'kl_aanrijroute_degeer.jpg';
		fWidth = 220;
		fHeight = 141;
		fTekst = 'Na het parkeren moet u te voet verder, loop over het fietsbrugje richting Berghem. Daarna naar het einde van de Spaanderstraat. U komt uit op het parcours.';
		fLink = 'http://maps.google.nl/maps?f=d&amp;hl=nl&amp;geocode=5565101850870768139,51.779380,5.552860%3B6968104178726820153,51.779304,5.553913%3B6198774502253799898,51.775194,5.558192&amp;saddr=Veluwemeer+%4051.779380,+5.552860&amp;daddr=Veluwemeer+%4051.779304,+5.553913+to:51.775194,5.558192&amp;mra=cc&amp;dirflg=h&amp;sll=51.777931,5.557215&amp;sspn=0.009838,0.020084&amp;ie=UTF8&amp;ll=51.777931,5.557215&amp;spn=0.009838,0.020084&amp;om=1&amp;source=embed';
	}
	//<iframe width="100%" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="'+ fRoute +'"></iframe>
	document.getElementById('route').innerHTML = '<a href="'+ fLink +'" target="_blank">Route Beschrijving</a><br /><a href="#" class="showImage" style="width:'+fWidth+'px; height:'+fHeight+'px; background-image:url(/data/images/content/'+ fImage +');"></a><br />'+ fTekst;
	setImages();
}