function fold_init(id)
{	
	f_tabel 	= $(id);
	f_container = $(id+'_container');
	f_div 		= $(id+'_overlay');
	f_revert	= $(id+'_revert');
	
	Event.observe(f_tabel, 'mouseover', fold_show);
	Event.observe(f_div, 'mouseout', fold_hide);
	Event.observe(f_div, 'click', fold_open);
	Event.observe(f_revert, 'click', fold_close);
	
	ie = /msie/i.test(navigator.userAgent) && !/opera/i.test(navigator.userAgent);
}

function fold_show()
{
	f_div.setStyle({display:'block'});
}

function fold_hide()
{
	f_div.setStyle({display:'none'});
}

function fold_open()
{	
	fold_hide();
	Event.stopObserving(f_tabel, 'mouseover', fold_show);
	
	$$('.fold_open').each(function(el){
	/*
		if(ie){
			el.setStyle({display:'block'});
		}else{
	    	el.setStyle({display:'table-cell'});
	    }
	*/
		
		el.setStyle({display:'block'});
	});
}

function fold_close()
{	
	$$('.fold_open').each(function(el){
    	el.setStyle({display:'none'});
	});
	
	Event.observe(f_tabel, 'mouseover', fold_show);
}



/*******************************************************
Show/hide function
parameters:
id          - id of div that needs to be showed/hidden
morefield   - id of element that contains the link to call function
numberfield - id of element that contants the number of shown items
low         - minimum number of results
high        - maximum number of results
********************************************************/
function ShowHide(id, morefield, numberfield, low, high) 
{
	var thisLevel   = document.getElementById(id);
	var morefield   = document.getElementById(morefield);
	var numberfield = document.getElementById(numberfield);
	
	if (thisLevel.style.display == "block")
	{
			thisLevel.style.display = "none";
			morefield.innerHTML     = "Meer >";
		    numberfield.innerHTML   = low;
	}
	else
	{
		
			thisLevel.style.display = "block";
			morefield.innerHTML     = "< Minder";
			numberfield.innerHTML   = high;
	}
}