function fold_init(id)
{	
	f_tabel 	= $(id);
	f_container = $(id+'_container');
	f_div 		= $(id+'_overlay');
	f_revert	= $(id+'_revert');
	f_title		= $(id+'_title');
	f_showAll	= $(id+'_showAll');
	
	Event.observe(f_container, 'mouseout', fold_hide);
	Event.observe(f_tabel, 'mouseover', fold_show);
	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()
{
	var lLinkHeight = 0;
	
	if (f_showAll)
	{
		lLinkHeight = f_showAll.offsetHeight + 10;
	}
	
	f_div.setStyle({display:'block'});
	f_div.style.height = (f_tabel.offsetHeight - (f_title.offsetHeight + lLinkHeight)) + 'px';
}

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){
		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;
	}
}