/************************************************************************/
/*                                                                      */
/*  toolTip.js                                                          */
/*  Created By: Nicholas Voss                                           */
/*                                                                      */
/*  Last Modified: 3/29/2006                                            */
/*                                                                      */
/*  Function:  Create a tip balloon layer to tell users                 */
/*             more information about something they are                */
/*             working on.                                              */
/*                                                                      */
/*  Usage:    see the index.html file                                   */
/************************************************************************/




// create document level handlers to capture the current mouse position
if (document.layers) { // Netscape
    document.captureEvents(Event.MOUSEMOVE);
    document.onmousemove = captureMousePosition;
} 
else if (document.all) { // Internet Explorer
    document.onmousemove = captureMousePosition;
} 
else if (document.getElementById) { // Netcsape 6
    document.onmousemove = captureMousePosition;
}

if((navigator.appName == "Netscape") && (parseInt(navigator.appVersion) >=4)){ 
windowwidth = window.innerWidth;
windowheight = window.innerHeight;
}
else if((navigator.appName == "Microsoft Internet Explorer") && (parseInt(navigator.appVersion) >=4)){ 
windowwidth = document.documentElement.clientWidth;
windowheight = document.documentElement.clientHeight;
}
else{ 
windowwidth = 800;
windowheight = 600;
}
// global variables
var tipTimerOut = 0;
var tipTimerOn=0;
var subject = "ToolTip";
var tip = "Tooltips version 1.0 by Nick Voss";
var images = "/javascripts/toolTipv1/includes/";
var myTool;
var myText;
var mySubj;
var myPointer;
var myWidth;
var myHeight;
var pointer1;
var pointer2;
var pointer3;
var pointer4;
var yTipOffset = 8;
var xTipOffset = 5;

// constructor
function createTool(imagePath,toolWidth,toolHeight,xOff,yOff){
	//if (imagePath) images = imagePath;
	if (xOff)xTipOffset = xOff;
	if (yOff) yTipOffset = yOff;
	preLoadTipPointers();
	
// draw the outer div
//    document.write('<link rel="stylesheet" href="'+images+'toolTip.css"/>');
	myTool = document.createElement("div");
	myTool.className = 'tip';
	document.body.appendChild(myTool);
	
	myPointer = document.createElement("img");
	myPointer.className = 'tipPointer';
	document.body.appendChild(myPointer);
	
	mySubj = document.createElement("div");
	mySubj.className = 'tipSubj';	
	myTool.appendChild(mySubj);
	
	myText = document.createElement("div");
	myText.className = 'tipText';	
	myTool.appendChild(myText);
	
	myTool.style.width = toolWidth;
	myWidth = toolWidth;
	myTool.style.height = toolHeight;
	myHeight = toolHeight;
}

// preloads the images used on the tip pointers
function preLoadTipPointers(){
	if (document.images){
		pointer1= new Image(); 
		pointer1.src= images+'topLeft.gif'; 
		pointer2= new Image(); 
		pointer2.src= images+'topRight.gif'; 
		pointer3= new Image(); 
		pointer3.src= images+'bottomLeft.gif'; 
		pointer4= new Image(); 
		pointer4.src= images+'bottomRight.gif'; 
		pointer5= new Image(); 
		pointer5.src= images+'helpIcon.gif'; 
	}
}
// function call to turn the tool on
function toolOn(tip, subj, tipWidth, tipHeight, delay){
	// turn off the destruction of the tool tip if its in the process of animating out
	if (tipTimerOut){
		clearTimeout(tipTimerOut);
	}
	
	if (delay != undefined){ thisDelay = delay;} else{ thisDelay=750;}
	
	// resize the tip window as necessary
	if (tipWidth){
		myTool.style.width = tipWidth + 'px';
	}
	else{
		myTool.style.width = myWidth + 'px';
	}
	if (tipHeight){
		myTool.style.height = tipHeight + 'px';
	}
	else{
		myTool.style.height = myHeight + 'px';
	}
	// change the tip and its subject info
	myText.innerHTML = tip;
	mySubj.innerHTML = '<table border=0 cellpadding=0 cellspacing=0><tr><td class="tooltip"><img src="'+images+'helpIcon.gif" ></td><td class="tooltip" width="100%"><div class="tipSubj">' + subj + '</div></td></tr></table>';
	
	// figure out which direction to go
	if( (yMousePos - parseInt(myTool.style.height) - parseInt(myPointer.height) - yTipOffset) > 0 ){
		// can go top
		type = "top";
		if( -1 != navigator.userAgent.indexOf("MSIE") ) myPointer.filters.item(0).enabled = 1;
	}
	else{
		// bottom
		type = "bottom";
		if( -1 != navigator.userAgent.indexOf("MSIE") ) myPointer.filters.item(0).enabled = 0;
	}
	
	if ( (xMousePos - parseInt(myTool.style.width) - xTipOffset) > 0 ){
	   // can go left
	   type = type + "Left";
	}
	else{
		// right
	   type = type + "Right";
	}
	myPointer.src = images + type + '.gif';
	// figure placement
	switch (type){
		case "topLeft":
			//myPointer = pointer1;
			myTool.style.top = (yMousePos - parseInt(myTool.style.height) - parseInt(myPointer.height) - yTipOffset) + 'px';
			myTool.style.left = (xMousePos - parseInt(myTool.style.width) - xTipOffset) + 'px';
			myPointer.style.top = (yMousePos - parseInt(myPointer.height) - yTipOffset + 7) + 'px';
			myPointer.style.left = (xMousePos - (parseInt(myTool.style.width)/5)) + 'px' ;
		break;
		case "topRight":
			//myPointer = pointer2;
			myTool.style.top = (yMousePos - parseInt(myTool.style.height) - parseInt(myPointer.height) - yTipOffset) + 'px';
			myTool.style.left = (xMousePos + xTipOffset) + 'px';
			myPointer.style.top = (yMousePos - parseInt(myPointer.height) - yTipOffset + 7) + 'px';
			myPointer.style.left = (xMousePos + (parseInt(myTool.style.width)/5)) + 'px' ;
		break;
		case "bottomLeft":
			//myPointer = pointer3;
			myTool.style.top = (yMousePos + parseInt(myPointer.height) + yTipOffset) + 'px';
			myTool.style.left = (xMousePos - parseInt(myTool.style.width) - xTipOffset) + 'px';
			myPointer.style.top = (yMousePos - parseInt(myPointer.height) - yTipOffset + 32) + 'px';
			myPointer.style.left = (xMousePos - (parseInt(myTool.style.width)/5)) + 'px' ;
		break;
		case "bottomRight":
			//myPointer = pointer4;
			myTool.style.top = (yMousePos + parseInt(myPointer.height) + yTipOffset) + 'px';
			myTool.style.left = (xMousePos + xTipOffset) + 'px';
			myPointer.style.top = (yMousePos - parseInt(myPointer.height) - yTipOffset + 32) + 'px';
			myPointer.style.left = (xMousePos + (parseInt(myTool.style.width)/5)) + 'px' ;
		break;
		
	}
	
	if (tipTimerOn){ clearTimeout(tipTimerOn);}
	
	tipOn=1;
	
	if(thisDelay !=0){ tipTimerOn = setTimeout('switchTipOn()',thisDelay);} else{ switchTipOn();}
	
	}
	
function switchTipOn(){
	if(tipOn){
		myTool.style.display = 'inline';
		myPointer.style.display = 'inline';	
	}
}
	
// function call to shut it off 
function toolOff(){
	tipOn=0;
	if (tipTimerOn) clearTimeout(tipTimerOn);
	tipTimerOut = setTimeout('displayOff()',150);
	
}
function displayOff(){
	myTool.style.display = 'none';
	myPointer.style.display = 'none';
}
// captures and stores the current mouse position as xMousePos and yMousePos
function captureMousePosition(e) {
    if (document.layers) {
        // When the page scrolls in Netscape, the event's mouse position
        // reflects the absolute position on the screen. innerHight/Width
        // is the position from the top/left of the screen that the user is
        // looking at. pageX/YOffset is the amount that the user has 
        // scrolled into the page. So the values will be in relation to
        // each other as the total offsets into the page, no matter if
        // the user has scrolled or not.
        xMousePos = e.pageX;
        yMousePos = e.pageY;
        xMousePosMax = window.innerWidth+window.pageXOffset;
        yMousePosMax = window.innerHeight+window.pageYOffset;
    } else if (document.all) {
        // When the page scrolls in IE, the event's mouse position 
        // reflects the position from the top/left of the screen the 
        // user is looking at. scrollLeft/Top is the amount the user
        // has scrolled into the page. clientWidth/Height is the height/
        // width of the current page the user is looking at. So, to be
        // consistent with Netscape (above), add the scroll offsets to
        // both so we end up with an absolute value on the page, no 
        // matter if the user has scrolled or not.
        xMousePos = window.event.clientX+document.documentElement.scrollLeft;
        yMousePos = window.event.clientY+document.documentElement.scrollTop;
        xMousePosMax = document.documentElement.clientWidth+document.documentElement.scrollLeft;
        yMousePosMax = document.documentElement.clientHeight+document.documentElement.scrollTop;
    } else if (document.getElementById) {
        // Netscape 6 behaves the same as Netscape 4 in this regard 
        xMousePos = e.pageX;
        yMousePos = e.pageY;
        xMousePosMax = window.innerWidth+window.pageXOffset;
        yMousePosMax = window.innerHeight+window.pageYOffset;
    }
}