var offsetfromcursorX=12; //Customize x offset of tooltip
var offsetfromcursorY=10; //Customize y offset of tooltip

var offsetdivfrompointerX=10; //Customize x offset of tooltip DIV relative to pointer image
var offsetdivfrompointerY=14; //Customize y offset of tooltip DIV relative to pointer image. Tip: Set it to (height_of_pointer_image-1).

document.write('<div id="dhtmltooltip">tooltip</div>'); //write out tooltip DIV

//write out divs to hold pointers
document.write('<DIV id="upper_left_arrow">upperleft</DIV>');
document.write('<DIV id="upper_right_arrow">upperright</DIV>');
document.write('<DIV id="lower_left_arrow">lowerleft</DIV>');
document.write('<DIV id="lower_right_arrow">lowerright</DIV>');
//getting ie and ns6 variables
var ie=document.all;
var ns6=document.getElementById && !document.all;

//initially don't want to show
var enabletip=false;
if (ie||ns6) {
	var tipobj=document.all? document.all["dhtmltooltip"] : document.getElementById? document.getElementById("dhtmltooltip") : "";
}
var pointerobj;

function ietruebody(){
	return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body;
}
//function that actually enables the tooltip
function tip(thetext, thewidth, thecolor){
	if (ns6||ie){
		if (typeof thewidth!="undefined") {
			tipobj.style.width=thewidth+"px";
		}
		if (typeof thecolor!="undefined" && thecolor!="") {
			tipobj.style.backgroundColor=thecolor;
		}
		tipobj.innerHTML=thetext;
		enabletip=true;
		return false;
	}
}
//event called on mouse movement
function positiontip(e){

	//if tip is enabled
	if (enabletip){
	
		//hide old arrow
		pointerobj.style.visibility="hidden";

		//get current position
		var curX=(ns6)?e.pageX : event.clientX+ietruebody().scrollLeft;
		var curY=(ns6)?e.pageY : event.clientY+ietruebody().scrollTop;
		
		//Find out how close the mouse is to the corner of the window
		var winwidth=ie&&!window.opera? ietruebody().clientWidth : window.innerWidth-20;
		var winheight=ie&&!window.opera? ietruebody().clientHeight : window.innerHeight-20;
		
		//get edge information
		var rightedge=ie&&!window.opera? winwidth-event.clientX-offsetfromcursorX : winwidth-e.clientX-offsetfromcursorX;
		var bottomedge=ie&&!window.opera? winheight-event.clientY-offsetfromcursorY : winheight-e.clientY-offsetfromcursorY;
		var leftedge=(offsetfromcursorX<0)? offsetfromcursorX*(-1) : -1000;

		//variable to see if right edge has been reached
		var right=false;
		
		//if the horizontal distance isn't enough to accomodate the width of the context menu
		if (rightedge<tipobj.offsetWidth){
			
			//move the horizontal position of the menu to the left by it's width
			tipobj.style.left=curX-tipobj.offsetWidth+"px";
			right = true;

			//place on right side of tip object
			pointerobj.style.left=curX-offsetfromcursorX-(2*offsetdivfrompointerX)+"px";

		}
		else if (curX<leftedge) {
			tipobj.style.left="5px";
		}
		else{
			//position the horizontal position of the menu where the mouse is positioned
			tipobj.style.left=curX+offsetfromcursorX-offsetdivfrompointerX+"px";
			
			//place on left side of tip object
			pointerobj.style.left=curX+offsetfromcursorX+"px";
		}
		
		//if bottom needs to be displayed
		if (bottomedge<tipobj.offsetHeight){

			//initial height for tip object
			tipobj.style.top=curY-tipobj.offsetHeight-offsetfromcursorY+"px";

			//if right display lower right, otherwise display left
			if(right) {
				pointerobj=document.all? document.all["lower_right_arrow"] : document.getElementById? document.getElementById("lower_right_arrow") : "";
			}
			else {
				pointerobj=document.all? document.all["lower_left_arrow"] : document.getElementById? document.getElementById("lower_left_arrow") : "";
			}
				
			//account for shadow if IE
			if(ie) {
				//comment out if not using shadow in IE
				pointerobj.style.top=curY-offsetdivfrompointerY-5+"px";
			}
			//account for 3 pixels lost by drawing tip for FF
			else {
				pointerobj.style.top=curY-offsetdivfrompointerY+3+"px";
			}
		}

		//otherwise display upper ones
		else{
			
			//initial height for tip object
			tipobj.style.top=curY+offsetfromcursorY+offsetdivfrompointerY+"px";
			
			//if right, display upper right, if not, display left
			if(right) {
				pointerobj=document.all? document.all["upper_right_arrow"] : document.getElementById? document.getElementById("upper_right_arrow") : "";
			}
			else {
				pointerobj=document.all? document.all["upper_left_arrow"] : document.getElementById? document.getElementById("upper_left_arrow") : "";
			}
			
			//upper position of pointer object
			pointerobj.style.top=curY+offsetfromcursorY+"px";

		}

		//match background color of pointer to div
		var kids = pointerobj.childNodes;
		for(var i=0; i<kids.length; i++) {

			//if ie style...
			if(tipobj.currentStyle) {
				kids[i].style.backgroundColor = tipobj.currentStyle['backgroundColor'];
			}
			//otherwise mozilla?
			else if(window.getComputedStyle) {
				if(kids[i].className != 'arrow_tip') {
					kids[i].style.backgroundColor = document.defaultView.getComputedStyle(tipobj,null).getPropertyValue('background-color');
				}
			}
			else {
				//other style...
			}
		}

		//set all to visible
		tipobj.style.visibility="visible";
		pointerobj.style.visibility="visible";
	}
}

//hides tooltip
function hide_tip(){
	if (ns6||ie){

		//disable tip
		enabletip=false;

		//hide all objects
		tipobj.style.visibility="hidden";
		pointerobj.style.visibility="hidden";
		tipobj.style.left="-1000px";
	}
}
//function initially draws arrows using only CSS
function draw_arrows() {
	var div = document.getElementById('upper_left_arrow');
	var h = '';
	var end = 15;
	
	//upper left pointer 
	if(!ie) {
		//initial tip for FF aarow
		h += "<DIV class='arrow_tip' style='width: 1px;'></DIV>";
		h += "<DIV class='arrow_tip' style='width: 2px;'></DIV>";
		h += "<DIV class='arrow_tip' style='width: 3px;'></DIV>";
		end = 12;
	}

	//printing out main triangle
	for(var i=0; i<end; i++) {
		h += "<DIV class='arrow' style='width: " + (i) + "px;'>";
		h += "</DIV>";
	}
	div.innerHTML = h;


	//lower left pointer
	div = document.getElementById('lower_left_arrow');
	h = '';

	//main triangle
	for(var i=end; i>0; i--) {
		h += "<DIV class='arrow' style='width: " + (i) + "px;'>";
		h += "</DIV>";
	}
	
	if(!ie) {
		//tip for FF arrow
		h += "<DIV class='arrow_tip' style='width: 3px;'></DIV>";
		h += "<DIV class='arrow_tip' style='width: 2px;'></DIV>";
		h += "<DIV class='arrow_tip' style='width: 1px;'></DIV>";
	}
	div.innerHTML = h;
	

	//lower right pointer
	div = document.getElementById('lower_right_arrow');
	h = '';
	
	//main triangle
	for(var i=end; i>0; i--) {
		h += "<DIV class='arrow' style='border-left-width: 2px; border-right-width: 1px; width: " + (i) + "px;'>";
		h += "</DIV>";
	}
	if(!ie) {
		//tip for FF arrow
		h += "<DIV class='arrow_tip' style='width: 3px;'></DIV>";
		h += "<DIV class='arrow_tip' style='width: 2px;'></DIV>";
		h += "<DIV class='arrow_tip' style='width: 1px;'></DIV>";
	}
	div.innerHTML = h;


	//upper right pointer
	div = document.getElementById('upper_right_arrow');
	h = '';
	if(!ie) {
		//tip for FF arrow
		h += "<DIV class='arrow_tip' style='width: 1px;'></DIV>";
		h += "<DIV class='arrow_tip' style='width: 2px;'></DIV>";
		h += "<DIV class='arrow_tip' style='width: 3px;'></DIV>";
	}

	//main triangle
	for(var i=0; i<end; i++) {
		h += "<DIV class='arrow' style='border-left-width: 2px; border-right-width: 1px; width: " + (i) + "px;'>";
		h += "</DIV>";
	}
	div.innerHTML = h;

	
	//initially select upper left
	pointerobj=document.all? document.all["upper_left_arrow"] : document.getElementById? document.getElementById("upper_left_arrow") : ""
}
//initially draw out arrows
draw_arrows();

//set onmousemove event to position tip
document.onmousemove=positiontip;