function Tooltip(elm)
{
  this._elm = elm;
  
  // Het HTML element waarvoor de tooltip nu werkt
  this.src = null;
  
  // Aan deze property kan je zien of de tooltip op dit moment zichtbaar is
  this.state = "hidden"; // can be on, hidden
  
  /* Als de muis een beweging heeft gemaakt die een verandering zou betekenen 
  wordt eerst even getimed. Een mouseover dient minstens een poosje te duren 
  voordat we een tip tonen. Als de muis het gebied verlaat, duurt het ook 
  weer een paar tellen voor de tip verdwijnt.
  */
  this.timerstate = "off"; // can be on, timing
  this.timeout = 2; // in eenheden van 30 (van de messageLoop)
  
  // In deze teller wordt bijgehouden hoe lang je al een state hebt waarbij 
  // de tip zou moeten verschijnen
  this.ticksIn = 0;
  // In deze teller wordt bijgehouden hoe lang je al een state hebt waarbij 
  // de tip zou moeten verdwijnen
  this.ticksOut = 0;

  this.showTip = Tooltip_ShowTip;
  this.hide = Tooltip_Hide;
  
  xAddEventListener(elm, "mouseover", function(){Tooltip_GoIn(theTooltip.src);}, false);
  xAddEventListener(elm, "mouseout", Tooltip_GoOut, false);
}
var theTooltip; 


/*
  Deze functie toont de tooltip. Het meegegeven HTML element elm bepaalt de 
  tooltip text en de positie van de tooltip. Er kunnen vele i-tjes op een 
  pagina staan, maar er is maar één tooltip. Deze verandert de hele tijd van 
  plaats en inhoud.
*/
function Tooltip_ShowTip(elm)
{

  var ttHTML;
  ttHTML = "<div class=\"iTextTop\"></div>";  
  ttHTML+= "<div class=\"iTextContent\">";
  ttHTML+= "<div class=\"content\">"; 
  ttHTML+= elm.attributes['tooltipcontent'].value;
  ttHTML+= "</div>"; 
  ttHTML+= "</div>"; 

  this._elm.innerHTML = ttHTML;

	// Bepalen van de positie van het huidige element
  var x = xPageX(elm) + xWidth(elm) + 4;
  var y = xPageY(elm) + xHeight(elm) + 4;

  // Corrigeren voor scroll state van de pagina  
  y -= xScrollTop(elm);


  // Corrigeren voor relatieve positie (bv. RechtsBoven)
  var tooltipposition = elm.getAttribute("tooltipposition");
  if (tooltipposition!="") {
	switch(tooltipposition) {
		case 'RightAbove':
			x = xPageX(elm) + xWidth(elm) + 3;
			y = xPageY(elm) - xHeight(this._elm);
			break;
		case 'LeftAbove': 
			x = xPageX(elm) - xWidth(this._elm);
			y = xPageY(elm) - xHeight(this._elm);
			break;
		case 'RightBelow': 
			x = xPageX(elm) + xWidth(elm) + 3;
			y = xPageY(elm) + xHeight(elm) + 3;
			break;
		case 'LeftBelow': 
			x = xPageX(elm) - xWidth(this._elm);
			y = xPageY(elm) + xHeight(elm) + 3;
			break;
	}
  }

  // Correctie om te voorkomen dat tips buiten beeld vallen.
  if(x - xScrollLeft(null) < 0)
  {
	x = xScrollLeft(null);
  }
  if(x + xWidth(this._elm) - xScrollLeft(null) > xClientWidth())
  {
	x = xClientWidth() - xWidth(this._elm) + xScrollLeft(null);
  }
  if(y - xScrollTop(null) < 0)
  {
	y = xScrollTop(null);
  }
  if(y + xHeight(this._elm) - xScrollTop(null) > xClientHeight())
  {
	y = xPageY(elm) - 3 - xHeight(this._elm);
  }

	// Toon het tipje op de berekende plaats
  xMoveTo(this._elm, x, y);
  xShow(this._elm);

  // State bijwerken
  this.state = "on";
  this.timerstate = "off";
}

/*
  Verbergen van de tooltip
*/
function Tooltip_Hide(elm)
{
  this._elm.innerHTML = "";
  this.state = "hidden";
  xHide(this._elm);
  this.timerstate = "off";
}

/*
  Event handler voor het verlaten van het tooltip gebied. Als de tip zichtbaar is,
  wordt de timer aangezet
*/
function Tooltip_GoOut(elm)
{

  if(theTooltip.state == "on")
  {
		theTooltip.timerstate = "timing";
		theTooltip.ticksIn = 0;
		theTooltip.ticksOut = 10;
		Tooltip_Timer();
	}else{
		theTooltip.timerstate = "off";
	}
}
/*
  Event handler voor het binnengaan van het tooltip gebied. Als de tip onzichtbaar is,
  wordt de timer aangezet. Als het gaat om de tip die al zichtbaar is, wordt de 
  timer uitgeschakeld.
  Als het gaat om een nieuwe tip (de oude is nog zichtbaar, maar we gaan nu met 
  de muis over een nieuwe tip heen), tonen we deze onmiddellijk.
*/
function Tooltip_GoIn(elm)
{

  if(theTooltip.state == "hidden")
  {
		theTooltip.src = elm;
		theTooltip.timerstate = "timing";
		theTooltip.ticksIn = 10;
		theTooltip.ticksOut = 0;
		Tooltip_Timer();
	}else if(elm == theTooltip.src){
		theTooltip.timerstate = "off";
	}else{
		theTooltip.src = elm;
		theTooltip.timerstate = "timing";
		theTooltip.ticksIn = 1;
		theTooltip.ticksOut = 0;
		Tooltip_Timer();
	}
}

// Hier komen de Timer tikken binnen. Afhankelijk van de timerstate en het 
// aantal tikken dat al binnen is gekomen, roepen we hier .showtip() of 
// .hide() aan.
function Tooltip_Timer()
{
  if(theTooltip.timerstate == "timing")
  {
    theTooltip.ticksIn--;
    theTooltip.ticksOut--;
    if(theTooltip.ticksIn == 0)
    {
      theTooltip.showTip(theTooltip.src);
      return;
    }
    if(theTooltip.ticksOut == 0)
    {
      theTooltip.hide();
      return;
    }
		msglpAddJob("Tooltip_Timer();", theTooltip.timeout);
	}
}