// array om bij te houden of een animatie al gestart is
var animatie_gestart = new Array(0,0,0,0,0);

// snelheid waarmee geanimeerd wordt
var _v = 10;

// breedte formaten waarnaar de <IMG> elementen geschaald worden
var _w0 = 104; /* dit is de oorspronkelijke breedte */
var _w1 = 129;
var _wbr = 154;
var _w2 = 371; // achtergrond
var _w3 = 420;
var _w4 = 430; //412; // mouseover geen submenu
var _w5 = 480;

// array om y eindposities van de <LI> elementen te bewaren 
var pos = new Array();
var xpos = new Array();
var h = new Array(); // hoogte
var subh = new Array(); // hoogte submenu
var w = new Array();
var b = new Array(); // bottom hoogte
var _to = new Array();
var _from = new Array();

var space = 12; //ruimte tussen layers
var _h0 = 50; 
var _h1 = 195; //195;// grow to
var _h2 = 43; // bottom

function registreerAnimatie(num) {
	/*
		- Deze functie update de array waarin bijgehouden wordt
		welke animatie is gestart en welke niet.
		- Tegelijkertijd wordt 1 submenu zichtbaar gemaakt en de andere 4 onzichtbaar
		- het submenu krijgt ook een fade-in
	*/
	
	for(a=1;a<=3;a++) {
		
		if(num==a) {
			animatie_gestart[a] = true;
			eval("kop" + a + ".style.display = 'none'");
			eval("s" + a + ".style.display = 'block'");
		} else {
			animatie_gestart[a] = false;
			eval("kop" + a + ".style.display = 'block'");
			eval("s" + a + ".style.display = 'block'");
		}
	}	
}

function animeer(modus){
	/*
		Deze functie start de animaties op
		Maakt gebruik van 'bytefx.js'
	*/
	
	if(modus=='positioneer') {
		_v = 100;
	} else {
		_v=18;//20
	} 	
	// beweeg de <LI> elementen
	bytefx.move(h1,{x:xpos[1],y:pos[1]},_v);
	bytefx.move(h2,{x:xpos[2],y:pos[2]},_v);
	bytefx.move(h3,{x:xpos[3],y:pos[3]},_v);

	bytefx.size(h1,{width:w[1],height:h[1]},_v);
	bytefx.size(h2,{width:w[2],height:h[2]},_v);
	bytefx.size(h3,{width:w[3],height:h[3]},_v);
	bytefx.size(h4,{width:w[4]},40);
	
	// submenu
	bytefx.size(s1,{width:w[1],height:subh[1]},_v );
	bytefx.size(s2,{width:w[2],height:subh[2]},_v);
	bytefx.size(s3,{width:w[3],height:subh[3]},_v);
	
	bytefx.fade(s1,_from[1],_to[1],15);
	bytefx.fade(s2,_from[2],_to[2],15);
	bytefx.fade(s3,_from[3],_to[3],15);
}

function set_alpha() {
	bytefx.alpha(s1, 30);
	bytefx.alpha(s2, 30);
	bytefx.alpha(s3, 30);
}
function m(item,modus) {
	/* 
		Geef alle menu items hun nieuwe eindposities
		en ook hun nieuwe schaalfactor
		Met animeer() worden de animaties vervolgens gestart
	*/
	
	// bepaal eindposities en schaalfactoren van menuitems 
	// maar alleen als de animatie nog niet gestart is
	
	if(!animatie_gestart[1] && item=="h-1") {
		
		registreerAnimatie(1);
		xpos[1] = 0;
		if (highlight == 1) {
			
			xpos[2] = xpos[1] + space + _wbr + space + 4;
			xpos[3] = xpos[2] + space + _w0 - 4;
		
		} else if (highlight == 2) {
			
			xpos[2] = xpos[1] + space + _wbr + space + 4;
			xpos[3] = xpos[2] + space + _wbr -4;	
		
		} else {
			xpos[2] = xpos[1] + space + _wbr + space + 4;
			xpos[3] = xpos[2] + space + _w0 -4;	
		}
		//xpos[4] = xpos[3] + space + _w0;

		// bepaal de nieuwe posities voor de <LI> elementen
		pos[1] = -(-2 + (subitems_1 * 10)); 
		pos[2] = 0; 
		pos[3] = 0;

		h[1] = -pos[1] + 50;
		h[2] = _h0;
		h[3] = _h0;

		subh[1] = _h1;
		subh[2] = 1;
		subh[3] = 1;
		
		// bepaal de nieuwe schaalfactoren voor de <IMG> elementen
		w[1] = _wbr;
		w[2] = (highlight == 2) ? _wbr : _w0;
		w[3] = (highlight == 3) ? _wbr : _w0;
		w[4] = (highlight == 2 || highlight == 3) ? _w5 : _w4;
		
		
		//alpha
		_from[1] = 30;
		_from[2] = 100;
		_from[3] = 100;
		
		_to[1] = 100;
		_to[2] = 30;
		_to[3] = 30;

		animeer(modus);
	
	} else if(!animatie_gestart[2] && item=="h-2") {
		
		registreerAnimatie(2);
		
		xpos[1] = 0;
		
		if (highlight == 1) {
			
			xpos[2] = xpos[1] + _wbr + space + space + 4;
			xpos[3] = xpos[2] + space + _wbr - 4;
		
		} else if (highlight == 2) {
			
			xpos[2] = xpos[1] + _w0 + space + space + 4;
			xpos[3] = xpos[2] + space + _wbr - 4;
			
		} else {
			
			xpos[2] = xpos[1] + _w0 + space + space + 4;
			xpos[3] = xpos[2] + space + _wbr - 4;
		}

		//xpos[4] = xpos[3];

		// bepaal de nieuwe posities voor de <LI> elementen
		pos[1] = 0; 
		pos[2] = -(-10 + (subitems_2 * 10));
		pos[3] = 0;
		
		h[1] = _h0;
		h[2] = -pos[2] + 54;
		h[3] = _h0;
		
		subh[1] = 1;
		subh[2] = _h1;
		subh[3] = 1;
		
		// bepaal de nieuwe schaalfactoren voor de <IMG> elementen
		w[1] = (highlight == 1) ? _wbr : _w0;
		w[2] = _wbr;
		w[3] = (highlight == 3) ? _wbr : _w0;
		w[4] = (highlight == 1 || highlight == 3) ? _w5 : _w4;
		
		//alpha
		_from[1] = 100;
		_from[2] = 30;
		_from[3] = 100;
		
		_to[1] = 30;
		_to[2] = 100;
		_to[3] = 30;

		animeer(modus);
	
	} else if(!animatie_gestart[3] && item=="h-3") 	{
		
		registreerAnimatie(3);
		
		xpos[1] = 0;
		
		if (highlight == 1) {
			
			xpos[2] = xpos[1] + _wbr + space + space + 4;
			xpos[3] = xpos[2] + space + _w0 - 4;
		
		} else if (highlight == 2) {
			
			xpos[2] = xpos[1] + _w0 + space + space + 4;
			xpos[3] = xpos[2] + space + _wbr - 4;
			
		} else {
			
			xpos[2] = xpos[1] + _w0 + space + space + 4;
			xpos[3] = xpos[2] + space + _w0 - 4;
		}
			
		
		//xpos[4] = xpos[3] + space + _w0;

		
		// bepaal de nieuwe posities voor de <LI> elementen
		pos[1] = 0; 
		pos[2] = 0;
		pos[3] = -20;
		//pos[4] = 0;
		
		h[1] = _h0;
		h[2] = _h0;
		h[3] = 100;
		
		subh[1] = 1;
		subh[2] = 1;
		subh[3] = 80;
		
		// bepaal de nieuwe schaalfactoren voor de <IMG> elementen
		w[1] = (highlight == 1) ? _wbr : _w0;
		w[2] = (highlight == 2) ? _wbr : _w0;
		w[3] = _w1;
		w[4] = (highlight == 1 || highlight == 2) ? _w5 : _w4;
		
		//alpha
		_from[1] = 100;
		_from[2] = 100;
		_from[3] = 30;
		
		_to[1] = 30;
		_to[2] = 30;
		_to[3] = 100;

		animeer(modus);
	
	} else if(!animatie_gestart[4] && item=="mout") 	{
		
		registreerAnimatie(4);
		
		xpos[1] = 0;
		if (highlight == 1) {
			
			xpos[2] = xpos[1] + _wbr + space + space + 4;
			xpos[3] = xpos[2] + space + _w0 - 4;
		
		} else if (highlight == 2) {
			
			xpos[2] = xpos[1] + _w0 + space + space + 4;
			xpos[3] = xpos[2] + space + _wbr - 4;
			
		} else {
			
			xpos[2] = xpos[1] + _w0 + space + space + 4;
			xpos[3] = xpos[2] + space + _w0 - 4;
		}

		// bepaal de nieuwe posities voor de <LI> elementen
		pos[1] = 0; 
		pos[2] = 0;
		pos[3] = 0;
		
		h[1] = _h0;
		h[2] = _h0;
		h[3] = _h0;
		
		subh[1] = 1;
		subh[2] = 1;
		subh[3] = 1;
		
		// bepaal de nieuwe schaalfactoren voor de <IMG> elementen
		w[1] = (highlight == 1) ? _wbr : _w0;
		w[2] = (highlight == 2) ? _wbr : _w0;
		w[3] = _w1;
		w[4] = (highlight == 1 || highlight == 2 || highlight == 3) ? _w4 : _w2;
		
		//alpha
		_from[1] = 100;
		_from[2] = 100;
		_from[3] = 100;
		
		_to[1] = 30;
		_to[2] = 30;
		_to[3] = 30;
		
		animeer(modus);
	}
}