var debug = false;  // als ik ooit nog meer alertjes ertussen moet plaatsen dan met if(debug) ervoor zodat ik ze niet weg hoef te sterren naderhand.
var mainHeight = 25;
var topOffset = 25;
var topStep = 5;
var openId = -1;  // als deze een waarde krijgt, dan opent de pagina met dit submenu open.

var subHeight = 0;  // hulpvariabele voor berekenen hoogte submenu (noodzakelijk in netscape)
var currentSubId = 0; // onhoud welk subitem op dit moment gemaakt wordt.

function setMainMenuItems(openId) {
	// Hierarchisch javascriptmenu.
	// Zorg ervoor dat de classes :
	// subItem
	// mainItem
	// mainLink
	// gedefinieerd zijn in de cascading stylesheet. Zie voorbeeld css.
	// De variabele openId kan worden meegegeven, is niet verplicht.
	// De waarde van openId is het nummer van het submenu dat bij initialisatie moet worden geopend.
	// Deze variable is vooral van belang bij gebruik met Apache Struts-Tiles.

	var i = 2; // Teller die aangeeft welk mainmenu item nu wordt geinitialiseerd/

	// Er moet een item met naam mainItem1 zijn (zie voorbeeld menu).
	// In geval er geen css is gedefinieerd, wordt dit eerste menu item
	// gebruikt om de waarden van alle volgende hoofdmenuitems te zetten.
	mainHeight = getLayerHeight('mainItem1'); // mainHeight wordt als uitgangspunt gebruikt voor de rest.
	var menuLeft =  getLayerLeft('mainItem1');
	var mainWidth = getLayerWidth('mainItem1');
	
	var stepOffset = mainHeight + topStep; // de top-top afstand tussen de menu-Items

	// In deze loop worden alle subitems op de startwaarde gezet.
	// alert('topOffset = ' + topOffset + ' layertop = ' + getLayerTop('mainItem1'));
	setLayerTop('mainItem1', topOffset);		

	while ( checkIfExists ('mainItem' + i)) {

		previousTop = topOffset + (i-1)*stepOffset;
 // getLayerTop is te onbetrouwbaar, dan moest ik knoeien met vertragingen enzo, dit is beter.
		setLayerTop('mainItem' + i, previousTop );

		i++;
	}
    
	for (var j = 1; j < i; j++) {

		if ( checkIfExists ('subItem' + j)) {
	
			// als er een <div> bestaat met id 'subitemj' stel dan waarden hiervoor in.
			mainTop = topOffset + (j)*stepOffset; 
			setLayerTop('subItem' + j , mainTop ); // set positie goed t.o.v. mainItem.
			hideLayer('subItem' + j ); // maak subitem onzichtbaar.

		}

	}

	// check of er een subitem geopend moet worden na initialisatie.
	// Dit is zo als openId een waarde heeft, open dan het submenu met dat nummer.
	if (openId > 0) openSubMenu(openId);
}

function openSubMenu(id) {
	
    if (debug) alert('openSubMenu(' + id + ')');
	// als het subitem niet bestaat, dan hoeft er niets te gebeuren.	
    if (checkIfExists('subItem' + id)) {
		// Ik ben lui, sluit alle menu's voordat dit submenu open gaat.
		// Kan evt. mooier met boolean die bepaald of meer menu's tegelijk opengeklapt zijn e.d.
		// Maar het is best zo.
		setMainMenuItems(-1);
		
		if (debug) alert('openSubMenu all submenus are closed.');
		if (!(openId == id)) {
			// subItem met id is nog niet open, open het en onthoud de id in variabele openId
			//setMainMenuItems();
		   	openId = id;
			i = parseInt(id) + 1;
			var subHeight = getLayerHeight('subItem' + id);
			
			while (checkIfExists('mainItem' + i)) {
	
				var oldTop = (i-1)*(mainHeight + topStep) + topOffset; // getLayerTop('mainItem' + i); niet betrouwbaar, i.v.m. timing problemen krijg je onverwachte resultaten.
				newTop = oldTop + topStep + subHeight;			
				setLayerTop('mainItem' + i,newTop);
				i++;
			}
			showLayer('subItem' + id);	
		} else {

			// subitem met id is open, sluit het en zet openId op -1.
			openId = -1;
			setMainMenuItems();

     	}
     } 
}

function writeMainItem(id, text){

// Maak een mainmenu item (een item met een submenu).
// Als een mainItem bestaat, dan MOET er een bijbehorend submenu bijgemaakt worden.
  if(!document.layers){ 
	  document.write('<DIV id="mainItem' + id + '" style="position: absolute;" class="mainItem" onmouseout=\"this.className=\'mainItem\';\" onmouseover=\"this.className=\'mainItemMO\';\" onclick ="openSubMenu('+ id + ');">');
  } else {
	  document.write('<LAYER name="mainItem' + id + '" class="mainItem">');
//	  document.write('&nbsp;<TABLE><TBODY><TR><TD class="mainItem" >');
	  document.write('<A class="mainItem" width="150" href="javascript:openSubMenu('+ id + ');">');
  }
  document.write(text);
  if(!document.layers){ 
	  document.write('</DIV>');
  } else {
	  document.write('</A>');
//  	  document.write('</TD></TR></TBODY></TABLE>');
  	  document.write('</LAYER>');
  }
}

function writeMainLink(id, text, onclick){

  // Maak een mainmenu link.
  // Dit item heeft een directe link (die als derde argument mee wordt gegeven (oclick event).
  // Dit item heeft dus GEEN submenu.
  // alert('id = "mainItem'+ id + '" text = ' + text + ' onclick = ' + onclick);
  if(!document.layers){ 
	document.write('<DIV id="mainItem' + id + '" style="position: absolute;" class="mainLink" ');
  } else {
	document.write('<LAYER width="150" name="mainItem' + id + '" class="mainLink">');
//	document.write('&nbsp;<TABLE><TBODY><TR><TD class="mainLink">');
        document.write('<A href="javascript://" ');
  }

  document.write('onmouseout=\"this.className=\'mainLink\';\" onmouseover=\"this.className=\'mainLinkMO\';\" onclick=\"setMainMenuItems();'+ onclick + ';\"');

  document.write('>');
  document.write(text);
  if(!document.layers){ 
	  document.write('</DIV>');
  } else {
  	  document.write('</A>');
//	  document.write('</TD></TR></TBODY></TABLE>');
          document.write('</LAYER>');
  }
}

function writeSubHeader(id){

  // Eerste stuk van een subitem.
  // 
  currentSubId = id;
  subHeight = mainHeight;
  if(!document.layers){ 
	document.write('<DIV id="subItem' + id + '"');
	document.write('style="position: absolute;" class="subItem">');
	document.write('<TABLE>');
	document.write('<TBODY>');
  } else {
	document.write('<LAYER name="subItem' + id + '"');
	document.write(' class="subItem">');
//	document.write('&nbsp;<TABLE><TBODY>');
  
  }
}

function writeSubTitle(text) {
  subHeight +=16;
  if(!document.layers){ 
	document.write('<TR><TH class="subItem">' + text + '</TH></TR>');
  } else {
	document.write('<B>' + text + '</B><BR>');
  }

}

function writeSubLink(text, onclick) {
  subHeight +=16;
  if(!document.layers){ 
	document.write('<TR><TD class="subItem" onclick="' + onclick + '">' + text + '</TD></TR>');
  } else {
	document.write('<A href="javascript://" onclick="'+ onclick + ';">' + text + '</A><BR>');
  }

}

function writeSubFooter(){
	// Laatste stuk van een subitem.
  if(!document.layers){ 
	document.write('</TBODY>');
	document.write('</TABLE>');
	document.write('</DIV>');
  } else {
//	document.write('</TBODY>');
//	document.write('</TABLE>');
	document.write('</LAYER>');
  }
  setLayerHeight('subItem' + currentSubId, subHeight);
  subHeight = 0;
  currentSubId = 0;
}