// anonymous function tha gets executed immediately
// this is to alias the plugin
// so that we can safely use the $ alias with other plugins
(function($) {

	$.fn.glosTip = function(){

		/* CONFIG */
		var xOffset = 20;
		var yOffset = 20;
		// these 2 variable determine popup's distance from the cursor
		// you might want to adjust to get the right result
		/* END CONFIG */

		glosTimer = false;

		// pass in the element and the event
		function glosTipShow(el, e){

			// if user has gone from one tooltip to another without 
			// allowing enough time for the hide function to fire
			// remove the previous tooptip
			if(glosTimer){
				clearTimeout(glosTimer);
				$("#glosTip").remove();
			}
			$("body").append("<div id='glosTip'><div id='glosTipShadow'><div id='glosTipBox'><div id='glosTipHeading'><img src='"+relPath+"content/layout/glosRemove.gif' width='14' height='14' alt='remove' title='hide' /><a href='#'>Glossary</a></div><div id='glosTipContent'><p style='text-align: center;'><img src='"+relPath+"content/layout/glosLoading.gif'></p></div></div></div></div>");
			glosTipFetchHtml(el.text());
			$("#glosTipHeading img").bind("click", function(){
				glosTipHideNow();
			});
			$("#glosTip").hover(function(){
				clearTimeout(glosTimer);
			},function(){
				glosTipHideDelay();
			});

			xOverlap = (e.pageX + 260 + xOffset) - $(window).width();
			if( xOverlap < 0 ) {
				xFix = 0;
			} else {
				xFix = xOverlap;
			}
			
			$("#glosTip")
				.css("top",(e.pageY + yOffset) + "px")
				.css("left",(e.pageX + xOffset - xFix) + "px")
				.fadeIn();
		};


		function glosTipHideNow(){
			$("#glosTip").fadeOut("slow", function(){
				$(this).remove();
			});
		}


		function glosTipHideDelay(){
			glosTimer = window.setTimeout(function() {
				glosTipHideNow();
			}, 1000);
		};


		function glosTipFetchHtml(abbr){
			if(relPath == '../'){
				var depth = '1';
			} else if(relPath == '../../'){
				var depth = '2';
			} else {
				var depth = '0';
			}
			$("#glosTipContent").load(""+relPath+"glossary/fetch.asp", {'term': abbr, 'depth': depth});
		}


		// loop through all the matched tags that were passed in
		return this.each(function() {
			$(this).hover(function(e){
				glosTipShow($(this), e);
			}, function(){
				glosTipHideDelay($(this));
			});
		});


	};

})(jQuery);




// starting the script on page load
jQuery(document).ready(function(){
	// use the plugin on all matched elements
	jQuery('.glosTip').glosTip();
});