//activeItem bevat alle active items en hun ouders
var activeItem = new Array();
//menuBlocks bevat alle itemcontainers
var menuBlocks = new Array();
//menuDelay is het aantal milliseconden dat het menu wacht met inklappen wanneer je van een item afmuist.
menuDelay = 500;

//De basis van het menu is altijd de div met het ID menu. Hier wordt een administratief object geinitialiseerd
var rootMenu = new Object();
rootMenu.id = 'menu';
rootMenu.kids = 0;

//Menuitemdefinities worden in dit object bewaard.
var aMenuItems = new Object();
aMenuItems.aantal = 0;

//addMenuItem wordt gebruikt om een menuitem toe te voegen. De parameters spreken voor zich.
function addMenuItem( ouder, naam, link, target, tekst, hoogte, breedte, regelhoogte, klasse, hoverklasse, linkhoverklasse, richting )
{
	menuItem = document.createElement( 'div' );
	menuItem.id = naam;
	//evens instellen
	menuItem.onmouseover = function() { regMuis( this ); };
	menuItem.onmouseout = function() { regMuisUit( this ); };
	//Wanneer een link aan het item is gekoppeld moeten er enkele extra dingen ingesteld worden.
	if( link != undefined && link != '' && link != '#' )
	{
		menuItem.setAttribute("link", link );
		menuItem.setAttribute("linktarget", target );
		hoverklasse = hoverklasse + ' ' + linkhoverklasse;
		//De waarde van het target bepaalt hoe de link gevolgd wordt.
		switch( target )
		{
			case "_blank":
				menuItem.onclick = function() { window.open( this.getAttribute('link'), 'GHG_popup', '' ); };
			break;
			case "_current":
			case "":
				menuItem.onclick = function() { document.location.href = this.getAttribute('link'); };
			break;
			default:
				menuItem.onclick = function() { linkObj = eval(this.getAttribute('linktarget')); linkObj.location.href = this.getAttribute('link'); };
		}
	}
	//De text binnen een item wordt altijd in een <p> gevouwen.
	menuText = document.createElement('p');
	menuText.id = naam + '_p';
	menuText.name = naam + '_p';
	menuText.style.paddingLeft = '10px';
	menuText.innerHTML = tekst;
	menuText.style.lineHeight = regelhoogte;
	menuItem.appendChild( menuText );
	
	//Wanneer het menu horizontaal is, dan moet een float style toegekend worden.
	if( richting == 'h' )
	{
		menuItem.setAttribute("style","float:left");
		menuItem.style.styleFloat = 'left';
	}
	//positioneringsstyles etc
	menuItem.style.position = 'relative';
	menuItem.style.height = hoogte + 'px';
	menuItem.style.width = breedte + 'px';
	//de klasse wordt in een nieuw attribuut opgeslagen, zodat deze later hergebruikt kan worden.
	menuItem.setAttribute("klasse", klasse);
	menuItem.className = klasse;
	//hetzelfde geldt voor de hoverklasse.
	menuItem.setAttribute( "hoverklasse", klasse + ' ' + hoverklasse );
	
	document.getElementById( ouder ).appendChild( menuItem );
}

//met menuPart worden itemcontainers aangemaakt.
function addMenuPart( ouder, boven, links )
{
	menuPart = document.createElement( 'div' );
	//containers worden herkend doordat ze de naam van de ouder met de toevoeging _sub dragen.
	menuPart.id = ouder + '_sub';
	//style instellingen.
	menuPart.style.position = 'absolute';
	menuPart.style.top = boven + 'px';
	menuPart.style.left = links + 'px';
	
	//afhankelijk van het type ouder moeten in dit geval enkele afbeeldingen toegevoegd worden.
	//als dit in de stylesheet gedaan zou worden, zou de controle verloren worden over de momenten waarop de afbeeldingen niet toegevoegd moeten worden.
	splitOuder = ouder.split( '_' );
	if( splitOuder.length > 2 )
	{
		ouderPart = document.getElementById( ouder );
		ouderPart.style.backgroundImage = 'url( http://www.ghg.nl/menumachine/topmenu_003/images/arrwedgesmlright_white.gif )';
		ouderPart.style.backgroundPosition = 'center right';
		ouderPart.style.backgroundRepeat = 'no-repeat';
	}
	else
	{
		ouderPart = document.getElementById( ouder );
		ouderPart.setAttribute( 'hoverBackground' , 'url( http://www.ghg.nl/menumachine/topmenu_003/images/arrwedgesmldown_white.gif )' );
		ouderPart.style.backgroundImage = 'url( http://www.ghg.nl/menumachine/topmenu_003/images/arrwedgesmlright_white.gif )';
		ouderPart.style.backgroundPosition = 'center left';
		ouderPart.style.backgroundRepeat = 'no-repeat';
	}
	
	document.getElementById( ouder ).appendChild( menuPart );
	menuBlocks[menuPart.id] = menuPart;
}

//regMuis wordt gebruikt wanneer het onmouseover event getriggered wordt.
function regMuis( item )
{
	//Toevoegen van het item aan de activeItem array met als index de diepte van het item in het menu.
	splitNaam = item.id.split('_');
	activeItem[splitNaam.length] = item;
	//klasse veranderen.
	item.childNodes[0].className = item.getAttribute( 'hoverklasse' );
	lastItem = getLastItem();
	//alleen de vervolgfunctie aanroepen wanneer dit item de diepste uit het menu is.
	if( lastItem == item.id )
	{
		showMenuParts( );
	}
}

//regMuisUit wordt gebruikt wanneer het onmouseout event getriggered wordt.
function regMuisUit( item )
{
	//originele klasse herstellen
	item.childNodes[0].className = '';
	//item verwijderen uit activeItem lijst.
	splitNaam = item.id.split('_');
	activeItem[splitNaam.length] = undefined;
	//Vervolgfunctie met een delay aanroepen om het menu niet zo zenuwachtig te maken.
	setTimeout( 'showMenuParts( );', menuDelay );
}

//collapseMenu klapt alle itemcontainers in.
function collapseMenu()
{
	for( idx in menuBlocks )
	{
		containerDisplay( menuBlocks[idx], 'none' );
		//menuBlocks[idx].style.display = 'none';
	}
}

//containerDisplay is de functie die intern gebruikt wordt om submenu's te tonen en verbergen
function containerDisplay( container, display )
{
	if( display == 'none' )
	{
		zichtbaar = 'hidden';
	}
	else
	{
		zichtbaar = 'visible';
	}
	container.style.display = display;
	container.style.visibility = zichtbaar;
}

//getLastItem wordt gebruikt om het diepste menuitem uit de activeItem array te vissen.
function getLastItem()
{
	var lastItem = '';
	for( idx in activeItem )
	{
		//Het komt voor dat er lege entries in de array zitten. die moeten genegeerd worden.
		if( activeItem[idx] != undefined )
		{
			lastItem = activeItem[idx].id;
		}
	}
	
	return lastItem;
}

//showMenuParts wordt aangeroepen wanneer een verandering aan het menu optreedt.
function showMenuParts( )
{
	lastItem = getLastItem();
	//Wanneer een item is geselecteerd, ga verder. klap anders het menu maar in.
	if( lastItem != '' )
	{
		//Hoverklasse instellen voor het huidige item en alle items erboven.
		lastItemObj = document.getElementById( lastItem );
		//voer de collapseMenu functie uit wanneer gebladerd wordt naar een onderdeel van een geheel andere tak van het menu.
		if( lastItemObj.style.display != 'inline' )
		{
			collapseMenu();
		}
		//ga uitzoeken welke itemcontainers allemaal opengeklapt moeten zijn. En begin bij het hoogste niveau van het menu.
		splitItem = lastItem.split( '_' );
		aantalSubItem = splitItem.length;
		var newItem = '';
		for( var i = 0; i < aantalSubItem; i++ )
		{
			if( newItem.length > 0 )
			{
				newItem += '_';
			}
			newItem += splitItem[i];
			if( menuBlocks[newItem + '_sub'] != undefined )
			{
				containerDisplay( menuBlocks[newItem + '_sub'], 'inline' );
				//menuBlocks[newItem + '_sub'].style.display = 'inline';
			}
		}
	}
	else
	{
		collapseMenu();
	}
	//menuStatus();
}

//translateMenu zoekt eventuele vertalingen en veranderingen op voor de gevraagde taal en past ze toe.
function translateMenu( taal )
{
	for( var idx = 0; idx < aMenuItems.aantal; idx++ )
	{
		if( taal == "nederlands" )
		{
			//nederlands is default en is dus altijd aanwezig
			//De vertaling van het item
			document.getElementById(aMenuItems[idx].id + '_p').innerHTML = aMenuItems[idx].tekst;
			//De hoogte van het veld
			document.getElementById(aMenuItems[idx].id).style.height = aMenuItems[idx].hoogte + 'px';
			//De breedte van het veld
			document.getElementById(aMenuItems[idx].id).style.width = aMenuItems[idx].breedte + 'px';
			//De link van het veld
			document.getElementById(aMenuItems[idx].id).setAttribute("link", aMenuItems[idx].link );
		}
		else if( aMenuItems[idx][taal] != undefined )
		{
			//De vertaling van het item
			if( aMenuItems[idx][taal].tekst != undefined )
			{
				document.getElementById(aMenuItems[idx].id + '_p').innerHTML = aMenuItems[idx][taal].tekst;
			}
			//De hoogte van het veld
			if( aMenuItems[idx][taal].hoogte != undefined )
			{
				document.getElementById(aMenuItems[idx].id).style.height = aMenuItems[idx][taal].hoogte + 'px';
			}
			//De breedte van het veld
			if( aMenuItems[idx][taal].breedte != undefined )
			{
				document.getElementById(aMenuItems[idx].id).style.width = aMenuItems[idx][taal].breedte + 'px';
			}
			//De link van het veld
			if( aMenuItems[idx][taal].link != undefined )
			{
				document.getElementById(aMenuItems[idx].id).setAttribute("link", aMenuItems[idx][taal].link );//style.width = aMenuItems[idx][taal].breedte + 'px';
			}
		}
	}
}

//createMenu wordt bij de onload van de pagina aangeroepen om het menu te gaan maken
function createMenu()
{
	for( var i = 0; i < aMenuItems.aantal; i++ )
	{
		addMenuItem( aMenuItems[i].ouder, aMenuItems[i].id, aMenuItems[i].link, aMenuItems[i].target, aMenuItems[i].tekst, aMenuItems[i].hoogte, aMenuItems[i].breedte, aMenuItems[i].regelhoogte, aMenuItems[i].klasse, aMenuItems[i].hoverklasse, aMenuItems[i].linkhoverklasse, aMenuItems[i].richting );
		
		if( aMenuItems[i].container != undefined )
		{
			//container aanmaken
			addMenuPart( aMenuItems[i].container.ouder, aMenuItems[i].container.boven, aMenuItems[i].container.links );
		}
	}
	
	collapseMenu();
}

//newMenuItem  bereidt een nieuw object voor waarin het ID en de ouder al correct worden ingesteld. Wanneer het een submenu betreft, moet een omvattende container geregistreerd worden.
function newMenuItem( ouder, template )
{
	var newMenuItemObj = new Object();
	//gebruik een deel van de gegevens van de ouder om het menu te maken.
	ouder.kids++;
	//maak voor het eerste child een container aan en gebruik die vervolgens als parent
	//behalve als het een rootmenuitem is.
	if( ouder.id != 'menu' && ouder.kids == 1 )
	{
		ouder.container = new Object();
		ouder.container.ouder = ouder.id;
		ouder.container.boven = ouder.hoogte;
		ouder.container.links = 0;
		newMenuItemObj.ouder = ouder.id + '_sub';
	}
	else if( ouder.id != 'menu' && ouder.kids > 1 )
	{
		newMenuItemObj.ouder = ouder.id + '_sub';
	}
	else
	{
		newMenuItemObj.ouder = ouder.id;
	}
	newMenuItemObj.id = ouder.id + '_' + ouder.kids.toString();
	newMenuItemObj.kids = 0;
	
	if( template != undefined )
	{
		newMenuItemObj.target = template.target;
		newMenuItemObj.hoogte = template.hoogte;
		newMenuItemObj.regelhoogte = template.regelhoogte;
		newMenuItemObj.klasse = template.klasse;
		newMenuItemObj.hoverklasse = template.hoverklasse;
		newMenuItemObj.linkhoverklasse = template.linkhoverklasse;
		newMenuItemObj.richting = template.richting;
		
		/*
		for( var idx in template )
		{
			newMenuItemObj.idx = template.idx;
		}
		*/
	}
	
	return newMenuItemObj;
}