//DHTML API

/*als pagina geladen is, moet de functie init worden uitgevoerd*/
if(document.addEventListener)
{
	window.addEventListener('load', init, false);	//W3C
}
else if(document.attachEvent)
{
	window.attachEvent('onload', init);		//IE
};

/*met de functie addEventHandler() kan je aan een element een event
handler koppelen.
Het aanroepen gebeurt als volgt: addEventHandler('laag1', 'click', start)
*/
function addEventHandler(el, ev, fun)
{
	var x = null;
	if(el == document)
	{
		x = el;
	}
	else {
		x = document.getElementById(el);
	};
	if(document.addEventListener)
	{
		x.addEventListener(ev, fun, false);	//W3C
	}
	else if(document.attachEvent)
	{
		ev = 'on' + ev;
		x.attachEvent(ev, fun);		//IE
	};
}

/*----------------------------------------------------------------------------------------------------------------
		Hieronder staan enkele nuttige functies om bepaalde CSS-eigenschappen te wijzigen
-----------------------------------------------------------------------------------------------------------------*/

/*met de functie moveObject() kan je een object verplaatsen
naar een willekeurige positie, alsook de z-index te veranderen.
Het aanroepen gebeurt als volgt: moveObject('laag1', 150, 300, 4)
Je kan ook gewoon één van de drie parameters wijzigen door de
andere op de waarde null te plaatsen.
*/
function moveObjectTo(el,x,y,zIndex)
{
	var ob = document.getElementById(el);
	if(x != null) ob.style.left = x + "px";
	if(y != null) ob.style.top = y + "px";
	if(zIndex != null) ob.style.zIndex = zIndex;
}

/*mbv de functie setVisibility() kan je de css-eigenschap visibity
wijzigen. Het aanroepen kan op verschillende manieren:
setVisibility('laag1', 'visible')
setVisibility('laag1', true)*/
function setVisibility(el, vis) 
{
	var x = document.getElementById(el);
	if (vis==true ||vis=='visible' ||vis=='y') 
	{
		x.style.visibility = 'visible';
	}
	else 
	{
		x.style.visibility = 'hidden';
	};
}

/*mbv de functie setDisplay() kan je de css-eigenschap display
wijzigen. Het aanroepen kan op verschillende manieren:
setDisplay('laag1', 'block')
setDisplay('laag1', false)*/
function setDisplay(el,dis)
{
	var x = document.getElementById(el);
	if (dis==true || dis=='block' || dis=='y')
	{
		x.style.display = "block";
	}
	else if (dis==false || dis=='n')
	{
		x.style.display = "none";
	}
	else
	{
		x.style.display = dis;
	};
}

/*mbv de functie changeAttributeValue() kan je de waarde van een attribuut
van een element wijzigen. Het aanroepen gebeurt op volgende manier:
changeAttributeValue('laag1', 'src','images/laag1.gif')*/
function changeAttributeValue(el, att, value)
{
	var x = document.getElementById(el);
	x.setAttribute(att,value);
}

/*----------------------------------------------------------------------------------------------------------------
		Hieronder staan enkele nuttige functies om bepaalde CSS-eigenschappen uit te lezen
-----------------------------------------------------------------------------------------------------------------*/

/*met de functie getStyle() kan je waarden van CSS-eigenschappen
uitlezen en deze dan verder bewerken in JavaScript. Het aanroepen
gebeurt als volgt: getStyle('laag1', 'fontFamily', 'font-family')
*/
function getStyle(el,IEstyleProp, CSSstyleProp)
{
	var x = document.getElementById(el);
	var y;
	if (x.currentStyle)	//IE hier moet de CSS-eigenschap zoals in JS worden opgegeven bv. fontFamily
	{
		y = x.currentStyle[IEstyleProp];
	}
	else if (window.getComputedStyle) //W3C hier moet de CSS-eigenschap zoals in een CSS-bestand worden opgegeven bv. font-family
	{
		y = document.defaultView.getComputedStyle(x,null).getPropertyValue(CSSstyleProp);
	};
	return y;
}

/*met de functie getElementPosition() kan je bepalen waar een laag
gepositioneerd is tov de linkerbovenhoek van je browservenster
voor de top-waarde: getElementPosition('laag1').top
voor de left-waarde: getElementPosition('laag1).left
*/
function getElementPosition(el) 
{
    var offsetTrail = document.getElementById(el);
    var offsetLeft = 0;
    var offsetTop = 0;
    while (offsetTrail) 
	{
        offsetLeft += offsetTrail.offsetLeft;
        offsetTop += offsetTrail.offsetTop;
        offsetTrail = offsetTrail.offsetParent;
    };
    if (navigator.userAgent.indexOf("Mac") != -1 && typeof document.body.leftMargin != "undefined") 
	{
        offsetLeft += document.body.leftMargin;
        offsetTop += document.body.topMargin;
    };
    return {left:offsetLeft, top:offsetTop};
}

/*mbv onderstaande functie kan je de afmetingen van het browservenster uitlezen
voor de hoogte: getWindowSize().height
voor de breedte: getWindowSize().width
*/
function getWindowSize() 
{
  	var myWidth = 0, myHeight = 0;
	if( typeof( window.innerWidth ) == 'number' ) 
	{
		//Non-IE
		myWidth = window.innerWidth;
		myHeight = window.innerHeight;
	} 
	else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) 
	{
		//IE 6+ in 'standards compliant mode'
		myWidth = document.documentElement.clientWidth;
		myHeight = document.documentElement.clientHeight;
	};
	return {width:myWidth, height:myHeight};
}

/*mbv onderstaande functie kan je de positie van de muiscursor uitlezen
voor de x-waarde: getMouePosition(event).x
voor de breedte: getMousePosition(event).y
*/
function getMousePosition(event)
{
	var posx = 0, posy = 0;
	if (!event) var event = window.event; 
	if (event.pageX) //W3C
	{ 
		posx = event.pageX; 
		posy = event.pageY; 
	} 
	else if (event.x) //IE 
	{ 
		posx = event.x; 
		posy = event.y;
	};
	return{x:posx, y:posy};
}

/*mbv onderstaande functie kan je de toets die een gebruiker indrukt van 
het toetsenbord uitlezen
voor de unicode: getKeyboardCode(event).unicode
	Dit geeft een getal terug: 
	- voor de letters is dit van 48 ('a') tem 57 ('z'),
	- voor de pijltjestoetsen van 37 tem 40 (links,boven,rechts,onder), voor de spatiebalk 
	is dat 32.
	- voor de getallen van 48 tem 57 (van cijfer 0 tem 9)
voor het karakter: getKeyboardCode(event).charcode (als je op de 'a' drukt dan
krijg je hier ook de letter 'a' terug als resultaat)
*/
function getKeyboardCode(event)
{
	if(!event) var event = window.event;
	var code1 = event.charCode ? event.charCode : event.keyCode;
	var code2 = String.fromCharCode(code1);
	return {unicode:code1, charcode:code2};

}