function initMenu()
{
	buildMenu();
	// When the page loads none of the sub menu's should be visible
	collapseAll();
	// Add event handlers for onmouseover and onmouseout
	addOnMouseOverOut();
}

function addMainMenuItem(id, text)
{
	var newMainMenuItem = document.createElement('DIV');
	newMainMenuItem.id = id;
	newMainMenuItem.className = 'mainMenuItem';

	var newMainMenuText = document.createElement('SPAN');
	newMainMenuText.innerHTML = text;
	newMainMenuText.className = 'mainMenuText';
	newMainMenuText.onclick = function() { toggleVisibility($(id)); };

	var newSubMenuItems = document.createElement('DIV');
	newSubMenuItems.className = 'subMenuItems';

	var newSubMenuItemsContainer = document.createElement('DIV');
	newSubMenuItemsContainer.id = id + '_subItemsContainer';

	// glue everything together
	newSubMenuItems.appendChild(newSubMenuItemsContainer);
	newMainMenuItem.appendChild(newMainMenuText);
	newMainMenuItem.appendChild(newSubMenuItems);
	$('menu').appendChild(newMainMenuItem);
}

function addSubMenuItem(mainMenuItem, text, link)
{
	var newSubMenuItem = document.createElement('DIV');
	newSubMenuItem.className = 'subMenuText';
	newSubMenuItem.onclick = function() { surfTo(link); };
	newSubMenuItem.innerHTML = text;
	$(mainMenuItem + '_subItemsContainer').appendChild(newSubMenuItem);
}

function surfTo(link)
{
		document.location.href = link;
}


function toggleVisibility(mainMenuItem)
{
	// Retrieve the element surrounding all sub menu items
	var subMenuItems = mainMenuItem.getElementsByClassName('subMenuItems')[0];

	// If there are no sub menu items, then exit this function	
	if (!subMenuItems.down())
		return;

	// subMenuItems span has a custom attribute 'collapsed' which informs us if the sub menu items are collapsed or not.
	// slide up or slide down the sub menu items according to the collapsed value.
	if (subMenuItems.collapsed)
		Effect.SlideDown(subMenuItems);
	else
		Effect.SlideUp(subMenuItems);
			
	// Store if the sub menu items are expanded or collapsed
	var opened = subMenuItems.collapsed;

	// Invert the collapsed value.
	subMenuItems.collapsed = !subMenuItems.collapsed;
	
	// Use CSS magic to display the correct icon in front of the main menu text
	var mainMenuText = mainMenuItem.down();
	switchIcon(opened, mainMenuText);
	
	// Retrieve all main menu items and collapse them (except of the one which was opened off course)
	if (opened)	// only collapse other menu items if the current one was opened
	{
		var otherSubMenuItems;
		$A($('menu').getElementsByClassName('mainMenuItem')).each(function(otherMainItem, idx)
											{
												// check if it's not the one which got toggled
												if (otherMainItem.id != mainMenuItem.id)
												{
													otherSubMenuItems = otherMainItem.getElementsByClassName('subMenuItems')[0];
													
													// if the sub menu items are collapsed, then don't do anything
													if (otherSubMenuItems.collapsed)
														return;
													Effect.SlideUp(otherSubMenuItems);
													otherSubMenuItems.collapsed = true;
																																		
													// change the icon to 'closed'
													var otherMainMenuText = otherMainItem.down();
													switchIcon(false, otherMainMenuText);
												}
											});
	}
}

function collapseAll()
{
	// Retrieve ALL sub menu items and toggle their visibility.
	var subMenuItemss = $A($('menu').getElementsByClassName('subMenuItems'));

	subMenuItemss.each(function (subMenuItems, idx) 
				{
					// If visible, then hide; if hidden, then make visible.
					Element.toggle(subMenuItems);
	
					// Set our custom 'collapsed' attribute to true;
					subMenuItems.collapsed = true;
				});
										
	// Retrieve ALL main menu item texts and use CSS magic to put the 'closed' image in front of it.
	$A($('menu').getElementsByClassName('mainMenuText')).each(function(mainMenuText, idx)
										{
											switchIcon(false, mainMenuText);
										});
}

function addOnMouseOverOut()
{
	// Retrieve ALL main menu item texts and add onMouseOver / onMouseOut event handlers.
	$A($('menu').getElementsByClassName('mainMenuText')).each(function(mainMenuText, idx)
										{
											mainMenuText.addClassName('mouseOutMain');
											mainMenuText.onmouseover = function() {  mainMenuText.removeClassName('mouseOutMain'); mainMenuText.addClassName('mouseOverMain'); }
											mainMenuText.onmouseout = function() { mainMenuText.removeClassName('mouseOverMain'); mainMenuText.addClassName('mouseOutMain'); }
										});
}

// Update the objects css classes so that the correct icon shows in front of it.
function switchIcon(open, element)
{
	if (open)
	{
		element.removeClassName('closed');
		element.addClassName('opened');		
	}
	else
	{
		element.removeClassName('opened');
		element.addClassName('closed');
	}
}

// Hieronder het eigenlijke menu


function buildMenu()
{
	// FIRST
	addMainMenuItem('main1', 'Prieel Eden Rond');
	addSubMenuItem('main1', 'Eden rond 3m', 'http://www.novabotanica.be/Prielen/Eden/Rond/prieel_eden_rond_3m.php');
	addSubMenuItem('main1', 'Eden rond 4m', 'http://www.novabotanica.be/Prielen/Eden/Rond/prieel_eden_rond_4m.php');
	addSubMenuItem('main1', 'Eden rond 5m', 'http://www.novabotanica.be/Prielen/Eden/Rond/prieel_eden_rond_5m.php');
	addSubMenuItem('main1', 'Eden rond 6m', 'http://www.novabotanica.be/Prielen/Eden/Rond/prieel_eden_rond_6m.php');
	addSubMenuItem('main1', 'Acrylaat dak', 'http://www.novabotanica.be/Prielen/Eden/Rond/prieel_eden_rond_acrylaat.php');
	
	
	// SECOND
	addMainMenuItem('main2', 'Prieel Eden Rechthoekig');
	addSubMenuItem('main2', 'Eden vierkant 2,5m x 2,5m', 'http://www.novabotanica.be/Prielen/Eden/Rechthoekig/prieel_eden_25x25.php');
	addSubMenuItem('main2', 'Eden vierkant 3m x 3m', 'http://www.novabotanica.be/Prielen/Eden/Rechthoekig/prieel_eden_3x3.php');
	addSubMenuItem('main2', 'Eden vierkant 4m x 4m', 'http://www.novabotanica.be/Prielen/Eden/Rechthoekig/prieel_eden_4x4.php');
	addSubMenuItem('main2', 'Eden rechthoekig 3m x 4m', 'http://www.novabotanica.be/Prielen/Eden/Rechthoekig/prieel_eden_3x4.php');
	addSubMenuItem('main2', 'Eden rechthoekig op maat', 'http://www.novabotanica.be/Prielen/Eden/Rechthoekig/prieel_eden_xxy.php');
	
	
	// THIRD
	addMainMenuItem('main3', 'Prieel Classica');
	addSubMenuItem('main3', 'Classica 3m x 4m', 'http://www.novabotanica.be/Prielen/Classica/Rechthoekig/prieel_classica_3x4.php');
	addSubMenuItem('main3', 'Classica 3m x 6m', 'http://www.novabotanica.be/Prielen/Classica/Rechthoekig/prieel_classica_demo.php');
	
	
	// FOURTH
	addMainMenuItem('main4', 'Rozenbogen');
	addSubMenuItem('main4', 'Eden', 'http://www.novabotanica.be/Rozenbogen/rozenboog_eden.php');
	addSubMenuItem('main4', 'Classica Victoria', 'http://www.novabotanica.be/Rozenbogen/rozenboog_classica.php');
	addSubMenuItem('main4', 'Classica Nest', 'http://www.novabotanica.be/Rozenbogen/rozenboog_classica_nest.php');

	
	// FIFTH
	addMainMenuItem('main5', 'Solitaire Elementen');
	addSubMenuItem('main5', 'Klimplantenrek Solitair Classica', 'http://www.novabotanica.be/Solitaire_elementen/klimplantenrek_solitair_classica.php');
	addSubMenuItem('main5', 'Klimrozen Piramide', 'http://www.novabotanica.be/Solitaire_elementen/klimrozen_piramide_classica.php');
	addSubMenuItem('main5', 'Obelisk', 'http://www.novabotanica.be/Solitaire_elementen/obelisk.php');
	addSubMenuItem('main5', 'Rozenstaander', 'http://www.novabotanica.be/Solitaire_elementen/rozenstaanders.php');
	
	
	// SIXTH
	addMainMenuItem('main6', 'Klimplantenrekken');
	addSubMenuItem('main6', 'Artisane', 'http://www.novabotanica.be/Klimplantenrekken/klimplantenrek_artisanaal.php');
	addSubMenuItem('main6', 'Organica', 'http://www.novabotanica.be/Klimplantenrekken/klimplantenrek_organisch.php');
	
	
	// SEVENTH
	addMainMenuItem('main7', 'Bloembakken');
	addSubMenuItem('main7', 'Kubus', 'http://www.novabotanica.be/Bloembakken/bloembak_kubus.php');
	addSubMenuItem('main7', 'Bloempothouder', 'http://www.novabotanica.be/Bloembakken/bloempothouder.php');
	
	
	// EIGHTH
	addMainMenuItem('main8', 'Poorten');
	addSubMenuItem('main8', 'Tuinpoort Organica', 'http://www.novabotanica.be/Tuinpoorten/tuinpoort_organica.php');
	addSubMenuItem('main8', 'Tuinpoort Artisane', 'http://www.novabotanica.be/Tuinpoorten/tuinpoort_artisanaal.php');
	addSubMenuItem('main8', 'Inrijpoort Organica', 'http://www.novabotanica.be/Tuinpoorten/inrijpoort_organica.php');
	
	
	// NINTH
	addMainMenuItem('main9', 'Voedertafels');
	addSubMenuItem('main9', 'Voedertafel Botanica', 'http://www.novabotanica.be/Voedertafels/index.php');

}




// Hieronder het script voor de switchimage


function switchIntroImage(newImagePath)
{
    $('introImage').style.backgroundImage = 'url(' + newImagePath + ')';
    scrollBy(0, -2000);
}

// Hieronder het script voor de "vertel een vriend"-mail

function sendEmail(emailVeld)
{
       if (emailVeld.value.length == 0 || emailVeld.value.indexOf('@') == -1 || emailVeld.value.indexOf('.') == -1)
       {
               alert('Vul een email adres in!');
               return;
       }
       var link = $('mailLink');
       link.setAttribute('href', 'mailto:' + emailVeld.value + '?CC=noreply@novabotanica.be&subject=Tip over tuinconstructies&body=Deze website zal jou ongetwijfeld interesseren. Tot later!');
}