document.observe("dom:loaded", function(event) {

	// Class op body die aangeeft dat Javascript enabled is
	var bodyElement = $$('body').first();
	if( bodyElement ) {
		bodyElement.addClassName('js-on');
	}
	
	// Alle links met een class 'externe-link' openen in een nieuw venster
	$$('a.externe-link, a[rel*=external], a[href^="http:"]').each( function(el) {
		el.target =  '_blank';
	});
	
	// Alle submit-knoppen krijgen een class on-hover. Dit is handig voor ie6
	$$('input[type=submit]').each( function(el) {
		el.observe( 'mouseover', function(event) {
			el.addClassName('button-hover');
		});
		el.observe( 'mouseout', function(event) {
			el.removeClassName('button-hover');
		});
	});
	
	// Tekstvelden vullen
	// setValue( $('zoeken-q'), 'zoeken...' );
	setValue( $('zoeken-q'), translations['search'] );
	setValue( $('naam-zoeken-q'), translations['search-name'] );
	setValue( $('zoeken-q-submenu'), translations['search'] );
	setValue( $('afmeting'), translations['afmeting'] );
	setValue( $('aantal'), translations['aantal'] );
	setValue( $('diner_aantal'), translations['aantal'] );
	setValue( $('aantal_personen'), translations['aantal'] );
	
	makeClickable('.js-clickable', 'js-hover');
});

var currentForm = null;
function showSelect(select_form) {
	if ( select_form != currentForm && currentForm != null )
		document.getElementById(currentForm).style.display = 'none';

	if (document.getElementById(select_form).style.display=='block') 
		document.getElementById(select_form).style.display='none';
	
	else 
		document.getElementById(select_form).style.display='block';
		
	currentForm = select_form;
}

//Items in hoofdmenu krijgen class zodat submenu werkt in ie6
var menudelay = 1;
var menudelay_id;
var menudelayed;
$$('ul#mainMenu li.level1').each( function(el) {
	Event.observe( el, 'mouseover', function() {
		if(menudelay_id > 0) {
			window.clearTimeout(menudelay_id);
			menudelayed.removeClassName( 'hover-ie' );
		}
		
		el.addClassName('hover-ie');
	});
	Event.observe( el, 'mouseout', function() {
		menudelay_id = Element.removeClassName.delay( menudelay, el, 'hover-ie' );
		menudelayed = el;
	});
});

// maandoverzicht klapt uit bij hover over de knop
//$$('div.maand-overz').each( function(el) {
//	Event.observe( el, 'mouseover', function() {
//		el.addClassName('maand-overz-hover');
//	});
//	Event.observe( el, 'mouseout', function() {
//		el.removeClassName( 'maand-overz-hover' );
//	});
//});

$$('.givemehover').each( function(el) {
	el.observe('mouseover', function() {
		el.addClassName( 'hover' );
	});
	el.observe('mouseout', function() {
		el.removeClassName( 'hover' );
	});
});

var maandoverzdelay = 0;
var maandoverzdelay_id;
var maandoverzdelay;
$$('div.maand-overz').each( function(el) {
	Event.observe( el, 'mouseover', function() {
		if(maandoverzdelay_id > 0) {
			window.clearTimeout(maandoverzdelay_id);
			maandoverzdelayed.removeClassName( 'maand-overz-hover' );
		}
		
		el.addClassName('maand-overz-hover');
	});
	Event.observe( el, 'mouseout', function() {
		maandoverzdelay_id = Element.removeClassName.delay( maandoverzdelay, el, 'maand-overz-hover' );
		maandoverzdelayed = el;
	});
});

// Kalender-items welke hoger dan 100px zijn worden bij hover uitgeklapt.
$$('div.cal-items').each( function(el) {
	var height = el.getHeight();
	var wrapper;
	if (height > 100) {
		el.addClassName('groter');
		
		Event.observe( el, 'mouseover', function() {
			el.removeClassName( 'groter' );
			wrapper = el.up('div');
			wrapper.removeClassName('item-wrap');
			wrapper.addClassName('item-wrap-hover');
		});
		Event.observe( el, 'mouseout', function() {
			el.addClassName('groter');
			wrapper = el.up('div');
			wrapper.addClassName('item-wrap');
			wrapper.removeClassName('item-wrap-hover');
		});
	}
});

function setValue( el, nieuwevalue ) {
	if (el !== null && (el.value == '' || el.value == nieuwevalue)) {
		el.setAttribute('value', nieuwevalue);
		
		Event.observe(el, 'focus', function(){		
			if (el.value == nieuwevalue) 
				el.value = '';
		});
		Event.observe(el, 'blur', function(){
			if (el.value == '') 
				el.value = nieuwevalue;
		});
	}
}
//Zoekt naar elementen met class die wordt meegegeven met eerste parameter
//Haalt per element eerste <a> op en haalt link uit die <a> en zet 'm onclick
//op het element. Verder wordt onmouseover een class (tweede paramter) aan het
//element toegevoegd
function makeClickable( selector, classnameHover ) {
	$$(selector).each( function(el) {
		var anchorElement = el.down('a.js-target');
		if( anchorElement ) {
			el.observe('click', function(event) {
				if( anchorElement.hasClassName('externe-link') )
					window.open( anchorElement );
				else
					location.href = anchorElement;
			});

			Event.observe(el, 'mouseover', function(event) {
				el.addClassName(classnameHover);
			});
			Event.observe(el, 'mouseout', function(event) {
				el.removeClassName(classnameHover);
			});

		}
	});
}