window.addEventListener('load', buildTooltip, false);

function buildTooltip()
{
	tipItems = getTipElementsByClass("tooltip");
	setTooltipItems();
	makeTooltip();
}
		
var tipItems = new Array();
var tooltip;
var tooltipContent;
var timer = 20;
var alpha = 0;
var endalpha = 95;
var speed = 10;
var ie = document.all ? true : false;
var tooltipWidth;
var tooltipHeight;
var toolTipValue = 'there was an error...'

function getTipElementsByClass(theClass)
{
	var allHTMLTags = document.getElementsByTagName( '*' );
	for (var i = 0; i < allHTMLTags.length; i++)
	{
		if (allHTMLTags[i].className == theClass)
		{
			tipItems.push(allHTMLTags[i]);
		}
	}
	return tipItems;
}

function makeTooltip()
{
	tooltip = document.createElement('table');
	tooltip.setAttribute('id', 'tipDiv');
		var firstRow = document.createElement('tr');
			var firstRowTd1 = document.createElement('td');
				firstRowTd1.setAttribute('id', 'tipTL');
			firstRow.appendChild(firstRowTd1);
			var firstRowTd2 = document.createElement('td');
				firstRowTd2.setAttribute('id', 'tipTC');
			firstRow.appendChild(firstRowTd2);
			var firstRowTd3 = document.createElement('td');
				firstRowTd3.setAttribute('id', 'tipTR');
			firstRow.appendChild(firstRowTd3);

		var secondRow = document.createElement('tr');
			var secondRowTd1 = document.createElement('td');
				secondRowTd1.setAttribute('id', 'tipML');
			secondRow.appendChild(secondRowTd1);
			
			var secondRowTd2 = document.createElement('td');
				secondRowTd2.setAttribute('id', 'tipMC');				
			secondRow.appendChild(secondRowTd2);
			var secondRowTd3 = document.createElement('td');
				secondRowTd3.setAttribute('id', 'tipMR');
			secondRow.appendChild(secondRowTd3);

		var thirdRow = document.createElement('tr');
			var thirdRowTd1 = document.createElement('td');
				thirdRowTd1.setAttribute('id', 'tipBL');
			thirdRow.appendChild(thirdRowTd1);
			var thirdRowTd2 = document.createElement('td');
				thirdRowTd2.setAttribute('id', 'tipBC');
			thirdRow.appendChild(thirdRowTd2);
			var thirdRowTd3 = document.createElement('td');
				thirdRowTd3.setAttribute('id', 'tipBR');
			thirdRow.appendChild(thirdRowTd3);

	// this is where the content goes			
	tooltipContent = secondRowTd2;
	
	tooltip.appendChild(firstRow);
	tooltip.appendChild(secondRow);
	tooltip.appendChild(thirdRow);
	document.body.appendChild(tooltip);
	tooltip.style.display = 'none';
	
	tooltip.addEventListener('mouseover', clearTooltip, false);
}

function clearTooltip()
{
	tooltip.style.display = 'none';
}

function setTooltipItems()
{
	for (var i = 0; i < tipItems.length; i++)
	{
		tipItems[i].addEventListener('mouseover', showTooltip, false);
		tipItems[i].addEventListener('mousemove', positionTooltip, false);
		tipItems[i].addEventListener('mouseout', hideTooltip, false);
	}
}

function setTooltip(content)
{
	toolTipValue = content;
}

function showTooltip(event)
{
	setTimeout( function() { 
		setTooltipContent(toolTipValue);
		clearInterval(tooltip.timer);
		tooltip.timer = setInterval(function(){fade(1)}, timer);
		tooltip.style.position = 'absolute';
		tooltip.style.display = 'block';
		tooltipWidth = parseInt(getComputedStyle(tooltip, "").width);
		tooltipHeight = parseInt(getComputedStyle(tooltip, "").height);
	}, 0);
}

function setTooltipContent(content)
{
	tooltipContent.innerHTML = content;
}
	
function positionTooltip(event)
{
	var u = ie ? event.clientY + document.documentElement.scrollTop : event.pageY;
	var l = ie ? event.clientX + document.documentElement.scrollLeft : event.pageX;
	tooltip.style.left = l - (tooltipWidth * 0.5) + 'px';
	tooltip.style.top = u - (tooltipHeight + 20) + 'px';
}

function hideTooltip(event)
{
	clearInterval(tooltip.timer);
	tooltip.timer = setInterval(function(){fade(-1)}, timer);
}

function fade(d){
	var a = alpha;
	if((a != endalpha && d == 1) || (a != 0 && d == -1))
	{
		var i = speed;
		if (endalpha - a < speed && d == 1)
		{
			i = endalpha - a;
		}
		else if(alpha < speed && d == -1)
		{
			i = a;
		}
		alpha = a + (i * d);
		tooltip.style.opacity = alpha * .01;
		tooltip.style.filter = 'alpha(opacity=' + alpha + ')';
	}
	else
	{
		clearInterval(tooltip.timer);
		if(d == -1){tooltip.style.display = 'none'};
	}
}