var boxes = new Array( 'z_doelgroep', 'z_dienst', 'z_onderwerp', 'z_gemeente' );
var boxlinks = new Array( 'a_doelgroep', 'a_dienst', 'a_onderwerp', 'a_gemeente' );

document.observe("dom:loaded", function(event) {
	// Alle zoekitems verwijderen
	hideSearchBoxes();
	
	// Toon 1e box
	$(boxes[0]).show();
	$(boxlinks[0]).addClassName( 'active' );
	
	// Clicks on search links
	boxlinks.each(function(boxlink, index) {
		$(boxlink).observe("click", function(event) {
			Event.stop(event);
			
			hideSearchBoxes();
			
			$(boxes[index]).show();
			
			//	Activeren:
			boxlinks.each( function ( link ) {
				$(link).removeClassName( 'active' );
			});
			event.element().addClassName( 'active' );
			
		});
	});
	
	// Clicks on search items
	$$('ul.zoekitems li').each( function(slink) {
		// Set the selected values
		if(slink.hasClassName('active')) {
			slink.up('ul').down('input').setValue(slink.readAttribute('id'));
		
			//			Waarde-span vullen
			var id	= slink.up('ul').identify().replace(/z_/i,'a_');
			if ( $(id) && $(id).next() )
				if ( slink.hasClassName( 'geen-voorkeur' ) )
					$(id).next().hide();
				else {
					$(id).next().update(slink.innerHTML);
					$(id).next().show();
				}
			
		}
		
		slink.observe("click", function(event) {
			// Remove an active
			var active = slink.up('ul').down('.active');
			if(active)
				active.removeClassName('active')
				
			// Make it active
			slink.addClassName('active');
			
			// Change the form
			slink.up('ul').down('input').setValue(slink.readAttribute('id'));
			
			//	Waarde-span vullen
			var id	= slink.up('ul').identify().replace(/z_/i,'a_');
			if ( $(id) && $(id).next() )
				if ( slink.hasClassName( 'geen-voorkeur' ) )
					$(id).next().hide();
				else {
					$(id).next().update(slink.innerHTML);
					$(id).next().show();
				}
			
		});
		
		slink.observe("mouseover", function(event) {
			slink.setStyle({cursor: 'pointer'});
		});
		
		slink.observe("mouseout", function(event) {
			slink.setStyle({cursor: 'auto'});
		});
	});
	
	// Click on search
	var sbutton = $('f_zoeker');
	sbutton.observe("click", function(event) {
		Event.stop(event);
		sbutton.up('form').submit();
	});
});

function hideSearchBoxes() {		
	boxes.each( function(box) {
		$(box).hide();
	});
}