function getPageOffsetLeft(el) {

  var x;

  // Return the x coordinate of an element relative to the page.

  x = el.offsetLeft;
  if (el.offsetParent != null)
    x += getPageOffsetLeft(el.offsetParent);

  return x;
}

function getPageOffsetTop(el) {

  var y;

  // Return the x coordinate of an element relative to the page.

  y = el.offsetTop;
  if (el.offsetParent != null)
    y += getPageOffsetTop(el.offsetParent);

  return y;
}

// houdt bij welk menu zichtbaar is
var visibleDropDownMenu = null;

// houdt bij welke activiteit er gaande is (growing, shrinking of null)
var menu_actie = null;

// de dropdownmenu die groeit/krimpt
var dm;

// dropdownmenu
var hoogte = 0;		// doelhoogte
var h = 0;			// huidige hoogte
var dh = 12;		// stap

var waiting = false;	// houdt bij of er gewacht wordt (na een mouseout van het menu
var wait = null;		// timer


function showMenu(index, updatebutton) {
	var el = document.getElementById('menuitem' + index + '_selecteerBalk');
	
	if(updatebutton) {
		var td = document.getElementById('td' + index + '_selecteerBalk');
		td.bgColor='#700060';
		var link = document.getElementById('link' + index + '_selecteerBalk');
		link.style.color = '#ffffff';
		link.style.bgColor = '#700060';
		var image = document.getElementById('img' + index + '_selecteerBalk');
		image.style.visibility = 'hidden';
	}

	if (waiting) waiting = false;
	if (wait) clearTimeout(wait);
	if (menu_actie == null) {
		
		// dropdownmenu object
		var drop = document.getElementById( el.id.substr(0, el.id.indexOf('_')) + "_dropDownMenu" );

		// Hide the menu if you leave it
		if (
			(drop == null && visibleDropDownMenu != null)
			||
			(drop != null && drop != visibleDropDownMenu)
		)
		{
		  if (dm != null)
			  waiting = true;
		  hideMenu();
		}
		
		// If there is no submenu or the submenu is already shown then do nothing
		if(drop == null || drop == visibleDropDownMenu)
			return;
		
		
		// dropdownmenu content
		var dc = document.getElementById( el.id.substr(0, el.id.indexOf('_')) + "_items" );
		
		// posititie instellen
		drop.style.left = getPageOffsetLeft(el);
		drop.style.top = getPageOffsetTop(el) + el.offsetHeight;
		
		// globale variabele instellen, die het object onthoudt dat krimpt/groeit
		dm = drop;
		
		// streefhoogte vh dropdownmenu
		hoogte = drop.offsetHeight;
		
		dc.style.display = "none";
		
		//alert(hoogte);
		
		drop.style.height = h + "px";
		
		drop.style.visibility = "visible";
	
		// huidige dorpdownmenu als zichtbaar kenmerken
		visibleDropDownMenu = dm;
		
		menu_actie = "growing";
	
		growing();
		
		//visibleDropDownMenu = drop.id;
	}
}



function growing() {
	
	if (h+dh < hoogte) {
		
		h += dh;
		
		dm.style.height = h;
		
		//alert("..");
		timer = setTimeout("growing()", 10);
		
	} else {
		var dc = document.getElementById( dm.id.substr(0, dm.id.indexOf('_')) + "_items" );	
		//alert(dc.id);\
		
		// items tonen
		dc.style.display = "block";
		
		// hoogte precies instellen
		dm.style.height = hoogte;
		
		// de actie is voorbij
		menu_actie = null;
		
		// reset
		h = 0;
	}
	
}

function hideMenu() {
	if (waiting) {
		dm.style.visibility = "hidden";
		visibleDropDownMenu = null;
	}
}

function outMenu(index, updatebutton) {
	el = document.getElementById('menuitem' + index + '_selecteerBalk')

	if(updatebutton) {
		td = document.getElementById('td' + index + '_selecteerBalk');
		td.bgColor='#ffffff';
		var link = document.getElementById('link' + index + '_selecteerBalk');
		link.style.color = '#700060';
		var image = document.getElementById('img' + index + '_selecteerBalk');
		image.style.visibility = 'visible';
	}

	if (visibleDropDownMenu != null) {
		waiting = true;
		wait = setTimeout("hideMenu()", 1);
	}
}