/*
Tooltip.js
Written by James Dudley (@jdstudios)
Date: July 29, 2010
Description: 
First you need to assign the "ToolTipTrigger" class to any element(s) on your page.
Then anywhere in your document, create a bunch of div's, one for each tooltip,
each with the class "ToolTip", which will hold all the content for your actual tooltip.
These containers are hidden unless the hover event is triggered on their corresponding
ToolTipTrigger elements on the page. Using the jQuery .each method we'll find each
element on the page with the class "ToolTipTrigger", then associate the mouseenter
event with displaying the following "ToolTip" element found on the page.
The first ToolTipTrigger will be associated with the first "ToolTip" element
on the page, and so on and so forth.

The only other things required are jQuery (obviously), the styles (see ToolTip.css),
and the little icon image.  The _initToolTips method must be called when the document
is ready (see master template file).
*/


/*
IMPORTANT!!!!
Set the following variables accordingly! This plugin needs to know these settings so
it can display the tooltip popup in the correct location, even if the window is
resized to various sizes.  (the coordinates of the event are based off the relative
position of the parent container it is in, which changes when you resize the window)
 */
containerWidth = 960;
containerMarginTop = 0;
containerMarginLeft = 0;
containerPaddingTop = 0;
containerPaddingLeft = 0;

// don't change anything beyond here

var mouseX, mouseY;

$(document).ready(function() {
	
	// loop over each element with the class ToolTipTrigger
	$( ".ToolTipTrigger" ).each(
		function( intIndex ){
			// show the tooltip on mouseenter
			$( this ).bind("mouseenter", function(e){ _showToolTip(intIndex,e);	});
		}
	);

	// loop over each element with the class ToolTip
	$( ".ToolTip" ).each(
		function( intIndex ){
			// hide the tooltip on mouseleave
			$( this ).bind("mouseleave", function(e){ $( this ).hide("slow"); });
			// add the close icon to the upper-right corner of the tooltip
			$( this ).html("<div class='ToolTipClose' onclick='_hideToolTip("+intIndex+")'></div>" + $( this ).html());
			
		}
	);
	
	$(document).mousemove(function(e){
		mouseX = e.pageX;
		mouseY = e.pageY;
    }); 
   
});

function _showToolTip(tipIndex, event) {
	// loop over each element with the class ToolTip
	$( ".ToolTip" ).each(
		function( intIndex ){
			// if the intIndex matches, show the ToolTip
			if (intIndex == tipIndex) {
				$( this ).css("top", event.pageY - containerMarginTop - 20);
				positionX = event.pageX - ((document.documentElement.clientWidth - containerWidth) / 2) + containerPaddingLeft - 40;
				if (document.documentElement.clientWidth < containerWidth) positionX = event.pageX - 40;
				$( this ).css("left", positionX);
				//$( this ).show("fast");
				$( this ).css("display", "block");
				setTimeout ("_checkForMouseGone("+tipIndex+")", 1000);
			}
		}
	);
}

function _hideToolTip(tipIndex) {
	$( ".ToolTip" ).each(
		function( intIndex ){
			// if the intIndex matches, this is the one we want to close
			if (intIndex == tipIndex) $(this).hide("slow");
		}
	);
}

function _checkForMouseGone(tipIndex) {
	$( ".ToolTip" ).each(
		function( intIndex ){
			// if the intIndex matches, this is the one we want to check
			if (intIndex == tipIndex) {
				if (mouseX < $(this).position().left) $(this).hide("slow");
				if (mouseY <  $(this).position().top) $(this).hide("slow");
			}
		}
	);
}