var tooltipTimer;
var tooltipId = 0;

/**
 * Geef alle elementen met een title attribuut de tooltip functie.
 */
$(document).ready(function(){
	initTooltips();
});

/**
 * Initialiseert het script.
 * @return
 */
function initTooltips() {
	$("*[title]").each(initTooltip);
	$("input, textarea").keypress(hideToolTip);
}

/**
 * Geef alle niet buttons met een title een andere tooltip handler.
 * @param a
 * @param elem
 * @return
 */
function initTooltip(a, elem) {
	if (/button/i.test(elem.tagName) || /hidden/i.test(elem.type))
		return;
	
	// Zet de title in een ttTitle attribuut zodat de standaard tooltip niet getoond wordt.
	var tooltip = elem.title;
	elem.removeAttribute("title");
	elem.setAttribute("ttTitle", tooltip);
	if (!elem.id)
		elem.id = 'toolTipItem' + tooltipId++;
	
	// Zet een 1 seconde delay op de tooltip.
	elem.onmouseover = function(event) {
		if (window.event) event = window.event;
		tooltipTimer = setTimeout('showTooltip(document.getElementById("'+this.id+'"), '+event.clientX+','+event.clientY+');', 500);
	}
	
	// Laat de tooltip meebewegen of reset de timer als de tooltip nog niet zichtbaar is.
	elem.onmousemove = function(event) {
		if (window.event) event = window.event;
		var div = document.getElementById("tooltipDiv");
		if (!div || div.style.display == 'none') {
			if (!tooltipTimer) return;
			clearTimeout(tooltipTimer);
			tooltipTimer = setTimeout('showTooltip(document.getElementById("'+this.id+'"), '+event.clientX+','+event.clientY+');', 500);
			return;
		}
		var x = event.clientX, y = event.clientY;
		if (div.scrollHeight < y)
			y = y - div.scrollHeight;
		else
			y += 4;
		x += 10;
		div.style.left = x + "px";
		div.style.top = y + "px";
	}
	
	// Verberg de tooltip.
	elem.onmouseout = function() {
		clearTimeout(tooltipTimer);
		tooltipTimer = null;
		var div = document.getElementById("tooltipDiv");
		if (div) div.style.display = "none";
	}
}

/**
 * Maak de tooltip div en toon deze.
 * @param tooltip
 * @param x
 * @param y
 * @return
 */
function showTooltip(tooltip, x, y) {
	var html = '';
	
	// Zoek of maak de div.
	var div = document.getElementById("tooltipDiv");
	if (!div) {
		var div = document.createElement("div");
		div.style.zIndex = 10005; // hoger dan Popup's
		div.style.position = "absolute";
		div.id = "tooltipDiv";
		div.style.maxWidth = "500px";
		addClass(div, "blackOnWhite");
		addClass(div, "tooltip");
		document.body.appendChild(div);
	}
	// Zet de HTML van de div en vervang de enters met html tags.
	div.innerHTML = tooltip.getAttribute("ttTitle").replace(/</g, "&lt;").replace(/\n/g, "<br/>");
	div.style.display = "block";

	// Bepaal de positie van de tooltip.
	if (div.scrollHeight < y)
		y = y - div.scrollHeight;
	else
		y += 4;
	x += 10;
	div.style.left = x + "px";
	div.style.top = y + "px";
}

/**
 * Verberg de tooltip.
 */
function hideToolTip()
{
	var div = document.getElementById("tooltipDiv");
	if (div) div.style.display = "none";
}
