// JavaScript Document
/*
author: Wayne Weibel
created: Wednesday, August 13, 2008

the displayToolTip call needs to always have THREE arguments:
1. title = the title for the tooltip table (can be NULL)
2. content = the text to display (can be image and can be NULL)
3. event = must ALWAYS be in argument

Example (in page):
	onMouseOver="displayToolTip('TITLE','CONTENT',event);" 
	onMouseOut="removeToolTip();" 
	onMouseMove="onMouseMove(event);"
	
set the style for the TITLE and CONTENT with css (.tooltiptitle / .tooltipcontent)
*/
var tooltip = null;
var offset = 10;		//the offset from the position of the pointer
var table_width = 300;	//the width of table == width of tooltip

var HEIGHT = 0;			//check and set the browser window HEIGHT
function getWindowHeight(){
	if (window.innerHeight) {
		HEIGHT = window.innerHeight;
	}
	else if (document.documentElement.clientHeight && (document.documentElement.clientHeight > 0)) {
		HEIGHT = document.documentElement.clientHeight;
	}
	else {
		HEIGHT = document.body.clientHeight;
	}
}

var WIDTH = 0;			//check and set the browser window WIDTH
function getWindowWidth(){
	if (window.innerWidth) {
		WIDTH = window.innerWidth;
	}
	else if (document.documentElement.clientWidth && (document.documentElement.clientWidth > 0)) {
		WIDTH = document.documentElement.clientWidth;
	}

	else {
		WIDTH = document.body.clientWidth;
	}
}

function displayToolTip(title,content,event){
	var inner_table = "<table width=" + table_width + " border=\"1\" cellpadding=\"5\" cellspacing=\"0\" bordercolor=\"#000000\">";
	if (title != (null || "")) { inner_table = inner_table + "<tr><td class=\"tooltiptitle\">" + title + "</td></tr>"; }
	if (content != (null || "")) { inner_table = inner_table + "<tr><td class=\"tooltipcontent\">" + content + "</td></tr>"; }
	inner_table = inner_table + "</table>";
				  
	tooltip = document.createElement("SPAN");
	tooltip.innerHTML = inner_table;
	document.body.appendChild(tooltip);
	
	getWindowHeight(); getWindowWidth();
	
	tooltip.style.position = "absolute";
	//check bottom border tooltip position against window size, set position accordingly
	if ((event.clientY + offset + getElemHeight(tooltip)) > HEIGHT) { 
		tooltip.style.top = event.clientY - offset - getElemHeight(tooltip) + "px";
	}
	else { tooltip.style.top = event.clientY + offset + "px"; }
	//check right border tooltip position against window size, set position accordingly
	if ((event.clientX + offset + table_width) > WIDTH) { 
		tooltip.style.left = event.clientX - offset - table_width + "px";
	}
	else { tooltip.style.left = event.clientX + offset + "px"; }
}

function removeToolTip(){
	document.body.removeChild(tooltip);
}

function onMouseMove(event){
	getWindowHeight(); getWindowWidth();
	
	//check bottom border tooltip position against window size, set position accordingly
	if ((event.clientY + offset + getElemHeight(tooltip)) > HEIGHT) { 
		tooltip.style.top = event.clientY - offset - getElemHeight(tooltip) + "px";
	}
	else { tooltip.style.top = event.clientY + offset + "px"; }
	//check right border tooltip position against window size, set position accordingly
	if ((event.clientX + offset + table_width) > WIDTH) { 
		tooltip.style.left = event.clientX - offset - table_width + "px";
	}
	else { tooltip.style.left = event.clientX + offset + "px"; }
}

//MODIFIED: getHeight and getWidth by John Kim @ http://frontendframework.com/javascript/javascript-element-width-height/
function getElemHeight(elem){
	var currentStyle;
	if (elem.currentStyle) { currentStyle = elem.currentStyle; }
	else if (window.getComputedStyle) {	try{ currentStyle = document.defaultView.getComputedStyle(elem, null); } catch(err){alert(err);}}
	else { currentStyle = elem.style; }
	return elem.offsetHeight;
}

function getElemWidth(elem){
	var currentStyle;
	if (elem.currentStyle) { currentStyle = elem.currentStyle; }
	else if (window.getComputedStyle) {	try{ currentStyle = document.defaultView.getComputedStyle(elem, null); } catch(err){alert(err);}}
	else { currentStyle = elem.style; }
	return elem.offsetWidth;
}