// ToolTip.js
// Based on http://www.webmasterworld.com/javascript/3077477.htm
// Feel free to reuse it
// Put 	<SCRIPT type="text/javascript" SRC="ToolTip.js"></SCRIPT> just before </BODY>
// Call this with
//	onMouseOver="JavaScript:this.alt=''; this.title=''; tooltip.on('...HTML Message...');" 
//	onMouseOut="JavaScript:tooltip.off();"
//	onmousemove="JavaScript:tooltip.move(event);";
// Remember to escape single and double quotes in the HTML message

var tool_layer = document.createElement("div");
document.body.appendChild(tool_layer);
tool_layer.style.position = "absolute";
tool_layer.style.visibility = "hidden";

// Define style for message box here:
tool_layer.style.border = "4px dashed white";
tool_layer.style.background = "#FEFED6";

var tooltip={
	displayed:false,
	
	on:
	function(obj, message) {
		obj.alt=obj.title=''; 
		tool_layer.innerHTML = message;		// ' and " must be escaped
		this.displayed = true;
		tool_layer.style.visibility = "visible";
	},
	
	off:
	function() {
		this.displayed = false;
		tool_layer.style.visibility = "hidden";
	},
	
	move:
	function(evt) {
		var dist = 15, BoxWidth=200, BoxHeight=250;	// NOTE: this 200 here should be the same as the 200 in ImageResize.php 
		var winW = 630, winH = 460;		// Default window size

		if (this.displayed) {

			// This is the browser window dimensions (or the frame's width and height)
			if (parseInt(navigator.appVersion)>3) {
				if (navigator.appName=="Netscape") {
					winW = window.innerWidth;	// -16 if scrollbar is present
					winH = window.innerHeight;	// -16 if scrollbar is present
				}
				if (navigator.appName.indexOf("Microsoft")!=-1) {
					winW = document.body.offsetWidth;	// -20 if scrollbar is present
					winH = document.body.offsetHeight;	// -20 if scrollbar is present
				}
			}
			
//			BoxHeight=BoxWidth/2;	// We should get it from the box itself but it doesn't seem to work (this.offsetheight ?)

			if (document.addEventListener || window.opera) {	// Mozilla
				tool_layer.style.width= BoxWidth;
				ClickLeft = evt.clientX + window.pageXOffset;
				ClickTop  = evt.clientY + window.pageYOffset;
				tool_layer.style.left = (ClickLeft + (evt.clientX>winW/2?-dist-BoxWidth:dist)) + 'px';
				tool_layer.style.top  = ( evt.clientY*(winH-BoxHeight)/winH + window.pageYOffset ) + 'px';
//				DebugText1.firstChild.nodeValue=" WinW="+ winW +" clientX="+ evt.clientX +" Xoffset="+ window.pageXOffset +" BoxW="+ BoxWidth;
//				DebugText2.firstChild.nodeValue=" WinH="+ winH +" clientY="+ evt.clientY +" Yoffset="+ window.pageYOffset +" BoxH="+ BoxHeight;
			}
			else if (window.event) {							// IE
				if (document.compatMode && document.compatMode!= 'BackCompat') {
					ClickLeft = event.clientX + document.documentElement.scrollLeft;
					ClickTop  = event.clientY + document.documentElement.scrollTop;
				}
				else {
					ClickLeft = event.clientX + document.body.scrollLeft;
					ClickTop  = event.clientY + document.body.scrollTop;
				}
				tool_layer.style.width= BoxWidth; 
				BoxHeight=120;	// Smaller because we don't show images in IE as we can't max-size them in CSS
				BH=parseInt(tool_layer.style.height); if (BH>20 && BH<500) BoxHeight=BH;
				tool_layer.style.left = (ClickLeft + ( evt.clientX>winW/2 ? -dist-BoxWidth : dist )) + 'px';
				tool_layer.style.top  = ( event.clientY*(winH-BoxHeight)/winH + document.body.scrollTop ) + 'px';
//				DebugText1.firstChild.nodeValue=" WinW="+ winW +" clientX="+ event.clientX +" Xoffset="+ document.body.scrollLeft +" BoxW="+ BoxWidth;
//				DebugText2.firstChild.nodeValue=" WinH="+ winH +" clientY="+ event.clientY +" Yoffset="+ document.body.scrollTop +" BoxH="+ BoxHeight;
			}
			else if (document.layers) {
				tool_layer.width= BoxWidth; 
				tool_layer.left = evt.pageX + (evt.pageX>winW/2?-dist-BoxWidth:dist);
				tool_layer.top  = evt.pageY + dist - (evt.pageY>winH/2?BoxHeight:0);;
			}
		}
	}
}