var tooltip = document.createElement('p');
var ttTimer = null;

window.onload = function(){
	tooltip.style.position = 'absolute';
	tooltip.style.display = 'none';
	tooltip.className = 'tooltip';
	document.body.appendChild(tooltip);
}

function viewportWidth(){
	return self.innerWidth || (document.documentElement.clientWidth || document.body.clientWidth);
}
function viewportHeight(){
	return self.innerHeight || (document.documentElement.clientHeight || document.body.clientHeight);
}
function viewportSize(){
	return { width: viewportWidth(), height: viewportHeight() };
}

function getY( oElement ){
	var iReturnValue = 0;
	while( oElement != null ) {
		iReturnValue += oElement.offsetTop;
		oElement = oElement.offsetParent;
	}
	return iReturnValue;
}

function getX( oElement ){
	var iReturnValue = 0;
	while( oElement != null ) {
		iReturnValue += oElement.offsetLeft;
		oElement = oElement.offsetParent;
	}
	return iReturnValue;
}

function getPos(oElement){
	return {
		x:getX(oElement),
		y:getY(oElement)
	};
}

function showToolTip(oElement){
	var pos = getPos(oElement);
	var newX = pos.x + 10;
	var newY = pos.y + 10;
	
	tooltip.innerHTML = oElement.ttText;
	
	tooltip.style.top = newY + 'px';
	tooltip.style.left = newX + 'px';
	
	tooltip.style.display = '';
	
	if(pos.x + tooltip.offsetWidth > viewportWidth()){
		newX = viewportWidth() - tooltip.offsetWidth - 20;
		tooltip.style.left = newX + 'px';
	}
	
	// need to handle scroll offset to do this propertly
	
//	
//	if(pos.y + tooltip.offsetHeight > viewportHeight()){
//		newY = viewportHeight() - tooltip.offsetHeight - 20;
//		tooltip.style.top = newY + 'px';
//	}
	
	window.clearTimeout(ttTimer);
}

function hideToolTip(){
	ttTimer = window.setTimeout("tooltip.style.display = 'none'",2000);
}