// Tijd die nodig is voor één stapje dus bijv. één extra subcel vullen (in microsec.)
var tijdStapje = 27 ;
// zodat niet telkens   opnieuw getypt hoeft te worden. Niet "", dit levert een vert. sprong van het linkermenu bij mOut
var nx = " " ;
// Kleur van rand vóór de beweging, grijs (nu)
var heenKlr = "EEEEEE" ;
// Kleurr die rand van een submenu link krijgt (roze)
var terugKlr = "FFDDDD" ;
// Kleur van randen van subknoppen 
var hoofdKnopKlr = "#FFDDDD" ;
var kleuterKnopKlr = "#FFDDDD" ;
var selKnopKlr= "#FF99FF" ;
var volwKnopKlr= "#CCCCFF" ;
var tienerKnopKlr= "#CCFFCC" ;
var kindKnopKlr= "#FFCC99" ;
// Wit, als het submenu leeg wordt gemaakt
var leegKlr = "FFFFFF" ;
// Dikte van rand van een subm. cel
var rDikte = 1 ;
// Totale tijd die nodig is voor legen. Dit is tijd voor hoelang gewacht moet worden
// met vullen van een submenu, anders wordt deze direct gewist
var leegTijd = tijdStapje * 18;
// Deze var is 0 als er geen submenu staat, en is 'leegTijd' als er wél een subm. staat.
var x = 0;
//  var voor timer probleem oplossing
var nummer = 0;
// Periode die gewacht moet worden met invullen van de sublinks
var mHeenPeriod = 0;

if (document.images)
{	s1 = new Image();
	s1.src= "icoontjes/start.jpg";
	s1O = new Image();
	s1O.src= "icoontjes/startO.jpg";
	
	s2 = new Image();
	s2.src= "icoontjes/info.jpg"
	s2O = new Image();
	s2O.src= "icoontjes/infoO.jpg"
	
	s3 = new Image();
	s3.src= "icoontjes/roosters.jpg";
	s3O = new Image();
	s3O.src= "icoontjes/roostersO.jpg";
	
	s4 = new Image();
	s4.src= "icoontjes/nieuwsbr.jpg";
	s4O = new Image();
	s4O.src= "icoontjes/nieuwsbrO.jpg";
	
	s5 = new Image();
	s5.src= "icoontjes/fotos.jpg";
	s5O = new Image();
	s5O.src= "icoontjes/fotosO.jpg";
	
	s6 = new Image();
	s6.src= "icoontjes/contact.jpg";
	s6O = new Image();
	s6O.src= "icoontjes/contactO.jpg";
	
	s7 = new Image();
	s7.src= "icoontjes/selectie.jpg";
	s7O = new Image();
	s7O.src= "icoontjes/selectieO.jpg";
	
	s8 = new Image();
	s8.src= "icoontjes/volwassen.jpg";
	s8O = new Image();
	s8O.src= "icoontjes/volwassenO.jpg";
	
	s9 = new Image();
	s9.src= "icoontjes/tiener.jpg";
	s9O = new Image();
	s9O.src= "icoontjes/tienerO.jpg";
	
	s10 = new Image();
	s10.src= "icoontjes/kind.jpg";
	s10O = new Image();
	s10O.src= "icoontjes/kindO.jpg";
	
	s11 = new Image();
	s11.src= "icoontjes/kleuter.jpg";
	s11O = new Image();
	s11O.src= "icoontjes/kleuterO.jpg";
}

// Maak object voor menuknop 
function menuKnop(idNaam,tekst,bronNormaal,bronOver,bronDown,subKnop,knopKlr)
{	this.idNaam = idNaam;
	this.tekst = tekst;
	this.bronNormaal = bronNormaal;
	this.bronOver = bronOver;
	this.bronDown = bronDown;
	this.subKnop = subKnop;
	this.knopKlr = knopKlr;
}
// Maak object voor subknop
function subKnop(tekst,url)
{	this.tekst = tekst;
	this.url = url;
}

// In subknop 'tekst' en 'url'
var infoArray = new Array();
	infoArray[0] = new subKnop('Docenten','info_docenten.php');
	infoArray[1] = new subKnop('Accommodatie','info_accommodatie.php');
	infoArray[2] = new subKnop('Dansvormen','info_dansvormen.php');
	infoArray[3] = new subKnop('Kleding','info_kleding.php');
	infoArray[4] = new subKnop('Lesgeld','info_lesgeld.php');
	infoArray[5] = new subKnop('Kinderfeestjes','info_kinderfeestjes.php');

// In subknop 'tekst' en 'url'
var fotoArray = new Array();
	fotoArray[0] = new subKnop('Nieuwste','http://www.studiomax-ballet.nl/foto_nieuw.php?categorienaam=Algemeen&start=0');
	fotoArray[1] = new subKnop('Selectie gr.','selectie_fotos.php');
	fotoArray[2] = new subKnop('Volwassen','volwassen_fotos.php');
	fotoArray[3] = new subKnop('Tiener','tiener_fotos.php');
	fotoArray[4] = new subKnop('Kind','kind_fotos.php');
	fotoArray[5] = new subKnop('Kleuter','kleuter_fotos.php');

var selectieArray = new Array();
	selectieArray[0] = new subKnop('Start','selectie_start.php');
	selectieArray[1] = new subKnop('Foto\'s','selectie_fotos.php');
	selectieArray[2] = new subKnop('Gastenboek','selectie_gastenboek.php');

var volwassenArray = new Array();
	volwassenArray[0] = new subKnop('Start','volwassen_start.php');
	volwassenArray[1] = new subKnop('Foto\'s','volwassen_fotos.php');
	volwassenArray[2] = new subKnop('Gastenboek','volwassen_gastenboek.php');

var tienerArray = new Array();
	tienerArray[0] = new subKnop('Start','tiener_start.php');
	tienerArray[1] = new subKnop('Foto\'s','tiener_fotos.php');
	tienerArray[2] = new subKnop('Gastenboek','tiener_gastenboek.php');

var kindArray = new Array();
	kindArray[0] = new subKnop('Start','kind_start.php');
	kindArray[1] = new subKnop('Foto\'s','kind_fotos.php');
	kindArray[2] = new subKnop('Gastenboek','kind_gastenboek.php');

var kleuterArray = new Array();
	kleuterArray[0] = new subKnop('Start','kleuter_start.php');
	kleuterArray[1] = new subKnop('Foto\'s','kleuter_fotos.php');
	kleuterArray[2] = new subKnop('Gastenboek','kleuter_gastenboek.php');
	
var evenementArray = new Array();
	evenementArray[0] = new subKnop('Start','evenementen.php');
	evenementArray[1] = new subKnop('Showballet','evenement_maxenroute.php');
// evenementArray[2] = new subKnop('Data & info','evenement_data.php');
	
var startArray = new Array();
	startArray[0] = new subKnop('Start','index.php');
	startArray[1] = new subKnop('Polletje','polletje.php');

var nieuwsbriefArray = new Array();
	nieuwsbriefArray[0] = new subKnop('Nieuwsbrief','nieuwsbrief.php');
	nieuwsbriefArray[1] = new subKnop('Word documenten','nieuwsbrief_documenten.php');
	nieuwsbriefArray[1] = new subKnop('Food Meets Sport','http://www.foodmeetssport.nl');
	
var roostersArray = new Array();
	roostersArray[0] = new subKnop('Roosters','roosters.php');
	
var contactArray = new Array();
	contactArray[0] = new subKnop('Contact','contact.php');	

// Array met deze var in menuKnop; idNaam, tekst, bronNormaal, bronOver, bronDown, subKnop, knopKlr
var menuArray = new Array();
	menuArray[0] = new menuKnop("I0","Start pagina","icoontjes/start.jpg","icoontjes/startO.jpg","icoontjes/startD.jpg",startArray,hoofdKnopKlr);
	menuArray[1] = new menuKnop("I1","Extra info","icoontjes/info.jpg","icoontjes/infoO.jpg","icoontjes/infoD.jpg",infoArray,hoofdKnopKlr);
	menuArray[2] = new menuKnop("I2","Foto's","icoontjes/fotos.jpg","icoontjes/fotosO.jpg","icoontjes/fotosD.jpg",fotoArray,hoofdKnopKlr);
	menuArray[3] = new menuKnop("I3","Nieuwsbrief","icoontjes/nieuwsbr.jpg","icoontjes/nieuwsbrO.jpg","icoontjes/nieuwsbrD.jpg",nieuwsbriefArray,hoofdKnopKlr);
	menuArray[4] = new menuKnop("I4","Roosters","icoontjes/rooster.jpg","icoontjes/roosterO.jpg","icoontjes/roosterD.jpg",roostersArray,hoofdKnopKlr);
	menuArray[5] = new menuKnop("I5","Contact","icoontjes/contact.jpg","icoontjes/contactO.jpg","icoontjes/contactD.jpg",contactArray,hoofdKnopKlr);
	menuArray[6] = new menuKnop("I6","Selectie groepen","icoontjes/selectie.jpg","icoontjes/selectieO.jpg","icoontjes/selectieD.jpg",selectieArray,selKnopKlr);
	menuArray[7] = new menuKnop("I7","Volwassen","icoontjes/volwassen.jpg","icoontjes/volwassenO.jpg","icoontjes/volwassenD.jpg",volwassenArray,volwKnopKlr);
	menuArray[8] = new menuKnop("I8","Tiener","icoontjes/tiener.jpg","icoontjes/tienerO.jpg","icoontjes/tienerD.jpg",tienerArray,tienerKnopKlr);
	menuArray[9] = new menuKnop("I9","Kind","icoontjes/kind.jpg","icoontjes/kindO.jpg","icoontjes/kindD.jpg",kindArray,kindKnopKlr);
	menuArray[10] = new menuKnop("I10","Kleuter","icoontjes/kleuter.jpg","icoontjes/kleuterO.jpg","icoontjes/kleuterD.jpg",kleuterArray,kleuterKnopKlr);
	menuArray[11] = new menuKnop("I11","Evenementen","icoontjes/evenement.jpg","icoontjes/evenementO.jpg","icoontjes/evenementD.jpg",evenementArray,hoofdKnopKlr);

// maak tekst weer leeg 
function maakTekstVeldLeeg()
{	document.getElementById('knoptekst').innerHTML= nx;
}

// Tekst bij icoon verschijnen als cursor eroverheen gaat (bovenin scherm)
function menuTekst(nmr)
{	document.getElementById('knoptekst').innerHTML = menuArray[nmr].tekst;
}

// de mOver voor het icoontje boven
function overIcoon(nmr)
{	// Maak plaatje benaderbaar op basis van meegegeven nmr
	var plaatje = eval("document." + menuArray[nmr].idNaam);
		
	// mOver plaatje/animatie icoontje
	plaatje.src = menuArray[nmr].bronOver;
	
	// Tekst verschijnen die hoort bij icoontje
	menuTekst(nmr);
}

// laat tekst weer verschijnen als je van icoontje afgaat (bovenin scherm)
function afIcoon(nmr)
{	var plaatje = eval("document." + menuArray[nmr].idNaam);
	
	// mOut plaatje/animatie icoontje
	plaatje.src = menuArray[nmr].bronNormaal;
	
	// maak tekst weer leeg (zodat niet icoontje tekst blijft staan)
	maakTekstVeldLeeg();	
}

// Legen van het submenu zodat er een nieuw menu geplaatst kan worden.
function leegSubMenu()
{	tijd0 = setTimeout("document.getElementById('lMenu0').innerHTML = nx;clearTimeout(tijd0);", 7*tijdStapje);
	tijd1 = setTimeout("document.getElementById('lMenu1').innerHTML = nx;clearTimeout(tijd1);", 6*tijdStapje);
	tijd2 = setTimeout("document.getElementById('lMenu2').innerHTML = nx;clearTimeout(tijd2);", 5*tijdStapje);
	tijd3 = setTimeout("document.getElementById('lMenu3').innerHTML = nx;clearTimeout(tijd3);", 4*tijdStapje);
	tijd4 = setTimeout("document.getElementById('lMenu4').innerHTML = nx;clearTimeout(tijd4);", 3*tijdStapje);
	tijd5 = setTimeout("document.getElementById('lMenu5').innerHTML = nx;clearTimeout(tijd5);", 2*tijdStapje);
	tijd6 = setTimeout("document.getElementById('lMenu6').innerHTML = nx;clearTimeout(tijd6);", 1*tijdStapje);
			
	tijd7 = setTimeout("document.getElementById('lMenu0').style.borderColor = leegKlr;clearTimeout(tijd7);", 14*tijdStapje);
	tijd8 = setTimeout("document.getElementById('lMenu1').style.borderColor = leegKlr;clearTimeout(tijd8);", 13*tijdStapje);
	tijd9 = setTimeout("document.getElementById('lMenu2').style.borderColor = leegKlr;clearTimeout(tijd9);", 12*tijdStapje);
	tijd10 = setTimeout("document.getElementById('lMenu3').style.borderColor = leegKlr;clearTimeout(tijd10);", 11*tijdStapje);
	tijd11 = setTimeout("document.getElementById('lMenu4').style.borderColor = leegKlr;clearTimeout(tijd11);", 10*tijdStapje);
	tijd12 = setTimeout("document.getElementById('lMenu5').style.borderColor = leegKlr;clearTimeout(tijd12);", 9*tijdStapje);
	tijd13 = setTimeout("document.getElementById('lMenu6').style.borderColor = leegKlr;clearTimeout(tijd13);", 8*tijdStapje);
}

// Maakt een grijs randje om het antal benodigde cellen
function maakHeenRandjes(aantal)
{	for(i=0;i<aantal;i++)
	{	// Versch. var namen, zodat ze versch. uit te zetten zijn
		if(i==0){wacht = setTimeout("setBorder(0);clearTimeout(wacht);", tijdStapje);}
		if(i==1){wacht1 = setTimeout("setBorder(1);clearTimeout(wacht1);", tijdStapje*2);}
		if(i==2){wacht2 = setTimeout("setBorder(2);clearTimeout(wacht2);", tijdStapje*3);}
		if(i==3){wacht3 = setTimeout("setBorder(3);clearTimeout(wacht3);", tijdStapje*4);}
		if(i==4){wacht4 = setTimeout("setBorder(4);clearTimeout(wacht4);", tijdStapje*5);}
		if(i==5){wacht5 = setTimeout("setBorder(5);clearTimeout(wacht5);", tijdStapje*6);}
		if(i==6){wacht6 = setTimeout("setBorder(6);clearTimeout(wacht6);", tijdStapje*7);}
		if(i==7){wacht7 = setTimeout("setBorder(7);clearTimeout(wacht7);", tijdStapje*8);}		
	}	
}

// aangeroepen door clickIcoon; laadt het submenu aan de linkerkant
function laadSubmenu()
{	// icoontje hoofdmenu-item plaatsen linkerkant boven de subknoppen. Indien ik dat ga doen..
	var nmr = nummer;
			
	// zet in volgorde grijze borders neer zoveel als aantal sub onderwerpen zijn.
	// + 1 voor de titel van submenu bijvoorbeeld de bovenste moet 'selectie groepen' zelf zijn.
	aantalCellen = menuArray[nmr].subKnop.length + 1;
	mHeenPeriod = aantalCellen * tijdStapje*2;
	
	// zet de randen om de cellen, die later een sublink krijgen
	maakHeenRandjes(aantalCellen);
		
	// laad omgekeerde volgorde sublinks in
	tellerSubLinks = setTimeout("laadSublinks(nummer,aantalCellen);clearTimeout(tellerSubLinks)",mHeenPeriod)
	
	var wachtLengte = menuArray[nmr].subKnop.length*5;
	// maak de link naar 1e uit submenu
	wachtTotKlaar = setTimeout("laadPagina();clearTimeout(wachtTotKlaar);;",wachtLengte*tijdStapje);
}

// zorg voor de benodigde handelingen bij het klikken van een icoontje
function clickIcoon(nmr)
{
	// mouseDown plaatje/animatie
	// nu het submenu weer geleegd is, kan de wachttijd weer op 0 gezet worden. 
	// Bij een nieuwe vulling wordt dat ontdekt door clickIcoon(dus geen probleem)
	x=0
	// voor juiste periode wachten tussen omhoog en omlaag Klren randjes, moet eerst op 0 gezet worden.
	mHeenPeriod = 0	
	
	// check of er submenu staat
	if (document.getElementById('lMenu0').innerHTML != nx)
	{	x = leegTijd;
		// zoja; leeg dit submenu
		leegSubMenu();
	}
		
	// kijk of er een submenu hoort bij het icoontje
	if (menuArray[nmr].subKnop != "")
	{	nummer = nmr;
		wachtLeeg = setTimeout("laadSubmenu();clearTimeout(wachtLeeg);",x);
	}
}

function setBorder(bGetal)
{	var hetID = "lMenu"+bGetal;
	document.getElementById(hetID).style.borderColor = heenKlr;
	document.getElementById(hetID).style.borderWidth = rDikte;	
}

// het nummer is voor de menuArray, het aantal geeft aan hoeveel submenu items er zijn.
function laadSublinks(subnummer,aantal)
{	for(i=aantal;i>0;i--)
	{	if(i==0){subCelNaam = "lMenu0";	celtekst = maakInfoHTML(subnummer,0);
				wOok = setTimeout("document.getElementById(subCelNaam).innerHTML = celtekst;clearTimeout(wOok);",8*tijdStapje);}
		if(i==1){subCelNaam1 = "lMenu0";celtekst1 = maakInfoHTML(subnummer,1);
				wOok1 = setTimeout("document.getElementById(subCelNaam1).innerHTML = celtekst1;clearTimeout(wOok1);",7*tijdStapje);}
		if(i==2){subCelNaam2 = "lMenu1";celtekst2 = maakInfoHTML(subnummer,2);
				wOok2 = setTimeout("document.getElementById(subCelNaam2).innerHTML = celtekst2;clearTimeout(wOok2);",6*tijdStapje);}
		if(i==3){subCelNaam3 = "lMenu2";celtekst3 = maakInfoHTML(subnummer,3);
				wOok3 = setTimeout("document.getElementById(subCelNaam3).innerHTML = celtekst3;clearTimeout(wOok3);",5*tijdStapje);}
		if(i==4){subCelNaam4 = "lMenu3";// alert("tjek i is 4 for loop werkt, subnummer is: " + subnummer);
				celtekst4 = maakInfoHTML(subnummer,4);// alert("we hebben een celtekst en dat is: "+ celtekst4);
				wOok4 = setTimeout("document.getElementById(subCelNaam4).innerHTML = celtekst4;clearTimeout(wOok4);",4*tijdStapje);}
		if(i==5){subCelNaam5 = "lMenu4";celtekst5 = maakInfoHTML(subnummer,5);		
				wOok5 = setTimeout("document.getElementById(subCelNaam5).innerHTML = celtekst5;clearTimeout(wOok5);",3*tijdStapje);}
		if(i==6){subCelNaam6 = "lMenu5";celtekst6 = maakInfoHTML(subnummer,6);
				wOok6 = setTimeout("document.getElementById(subCelNaam6).innerHTML = celtekst6;clearTimeout(wOok6);",2*tijdStapje);}
		if(i==7){subCelNaam7 = "lMenu6";celtekst7 = maakInfoHTML(subnummer,7);
				wOok7 = setTimeout("document.getElementById(subCelNaam7).innerHTML = celtekst7;clearTimeout(wOok7);",1*tijdStapje);}
		// schrijf de titel van het submenu neer. Let op deze is zonder teller en verschijnt dus direct
		document.getElementById('lMenu0').innerHTML = menuArray[subnummer].tekst;
	}		
}

// Geeft de link uit de bovenste cel van het submenu nadat het submenu is ingeladen.
function laadPagina()
{	window.location = menuArray[nummer].subKnop[0].url;
}

function maakInfoHTML(menuGetal,nummerInfoHTML)
{	// schrijf de HTML neer in de cel
	var teller = nummerInfoHTML-2;
	
	// Omdat het nmr de lengte van het aantal elementen aangaf, moet er -1 worden gedaan,
	// om er voor te zorgen dat het laatste element gekozen wordt
	var deUrl = menuArray[menuGetal].subKnop[teller].url;
	var deTekst = menuArray[menuGetal].subKnop[teller].tekst;
			
	var HTMLvoorKnop = "<a href='" + deUrl + "'>"+ deTekst +"</a>";
	setBorder2(teller+1);	
	return HTMLvoorKnop;
}

function maakFotoHTML(menuGetal,nmr)
{	// Schrijf de HTML neer in de cel
	var HTMLvoorKnop = "<a href='"+menuArray[menuGetal].subKnop[nmr].url+"'>"+menuArray[menuGetal].subKnop[nmr].tekst+"</a>";
	
	setBorder2(nmr);
	return HTMLvoorKnop;
}

// Maak geKlrde randjes voor het terugomhooggaan van het submenu
function setBorder2(nmr)
{	var hetID = "lMenu"+nmr;
	
	// zet de Klr van de submenu randjes in de goede Klr (afhankelijk van welk submenu)
	if(nummer<6){document.getElementById(hetID).style.borderColor = terugKlr;}
	if(nummer==11){document.getElementById(hetID).style.borderColor = terugKlr;}
	if(nummer==6){document.getElementById(hetID).style.borderColor = selKnopKlr;}
	if(nummer==7){document.getElementById(hetID).style.borderColor = volwKnopKlr;}
	if(nummer==8){document.getElementById(hetID).style.borderColor = tienerKnopKlr;}
	if(nummer==9){document.getElementById(hetID).style.borderColor = kindKnopKlr;}
	if(nummer==10){document.getElementById(hetID).style.borderColor = kleuterKnopKlr;}
	
	document.getElementById(hetID).style.borderWidth = rDikte;	
}