/* ====================================================================== */
/* ======       <a href="#" onmouseover="mOver(this);"></a>          ================== */
/* ====================================================================== */

	var mouseYOffset = -135; // als je de achtergrond van de tooltips aanpast zal dit ook aangepast moeten worden, dit is de offset van waar de tooltip verschijnt t.o.v de muis (y-as)
	var mouseXOffset = -18; // ditto als hierboven, maar dan op de X-as
	var useFade = false;  // zet dit op false als je geen effecten wilt gebruiken.
	var fadeSpeed = '0.4'; // snelheid uit-faden in seconden
	var appearSpeed = '0.05'; // snelheid in-faden in seconden
	var followMouse = false; // om de tooltip gedurende het tonen de muis te laten volgen zet dit op TRUE;
	
	var tooltips = ''; // leave this as it is pls

	function mOver(aObj){
		imgObj = aObj.getElementsByTagName('img');
		
		imgObj[0].src = imgObj[0].src.replace(".gif","_active.gif");
		
		aObj.onmouseout = function()
		{
			imgObj[0].src = imgObj[0].src.replace("_active.gif",".gif");
		}
	}
	
	normalState = "_normal.";
	overState = "_over.";
	activeState = "_down.";


/**
 * 	JS code added by Ivootje
*/
	
	
	assignTooltipEvents = function(){
		tooltips = $H({});
		$$('.float-image img').each(
			function(elem){
				if (followMouse) {
					elem.observe('mousemove', showToolTip)
				}else{
					elem.observe('mouseover', showToolTip)
				}
				elem.observe('mouseout', releaseToolTipFromSource)
			}
		)
		$$('.back').each(
			function(elem){
				var rand = (Math.random()*100000);
				elem.setAttribute('id', rand);
				elem.observe('mouseover', holdToolTip)
				elem.observe('mouseout', releaseToolTip)
			}
		)
	}
	
	showToolTip = function(event){
		var mouseX = event.pointerX();
		var mouseY = event.pointerY();
		var elem = getParentElement(event.element());
		if (elem.id.indexOf('show_') > -1){
			var showElem = elem.getAttribute('id').replace('show_', '');
			tooltips.set(showElem, true);
			mouseY = mouseY + mouseYOffset;
			mouseX = mouseX + mouseXOffset;
			$(showElem).absolutize();
			$(showElem).setStyle('top:' + mouseY +'px;left:' + mouseX + 'px;');

			if (useFade){
				new Effect.Appear($(showElem), {duration:appearSpeed});
			}else{
				$(showElem).show();	
			}
			setTimeout(
				function(){
					_hideToolTip($(showElem));
				},1
			)
		}
	}
	
	_hideToolTip = function(element){
		if (tooltips.get(element.id)) {
			setTimeout(
					function(){
						_hideToolTip(element);
					},1
				)
			return;
		}
		if (useFade){
			new Effect.Fade($(element), {duration:fadeSpeed});
		}else{
			$(element).hide();	
		}
	}
	
	releaseToolTipFromSource = function(event){
		var elem = getParentElement(event.element());
		if (elem.id.indexOf('show_') > -1){
			var showElem = elem.getAttribute('id').replace('show_', '');			
			tooltips.set(showElem, false);
		}
	}
	
	releaseToolTip = function(event){
		var elem = getTooltipContainer(event.element());
		tooltips.set(elem.id, false);
	}
	
	holdToolTip = function(event){
		var elem = getTooltipContainer(event.element());
		tooltips.set(elem.id, true);
	}
	
	getTooltipContainer = function(element){
		if (!element) return false;
		if (element.className == 'subBlok') return element;
		return getTooltipContainer(element.parentNode);
	}
	
	getParentElement = function(element){
		//if (element.className == 'float-image') return element;
		if (element.className.indexOf('float-image') > -1) return element;      // modified to support a div with more than one class
		return getParentElement(element.parentNode);
	}
	
	document.observe('dom:loaded', assignTooltipEvents);