var ajaxtooltip={
	fadeeffect: [false, 300], //enable Fade? [true/false, duration_milliseconds]
	useroffset: [10, 10], //additional x and y offset of tooltip from mouse cursor, respectively
	loadingHTML: '<div class="item" style="font-style:italic;">Loading...</div>',
	errorHTML: '<div class="item" style="font-style:italic;">Error Loading ToolTip</div>',
	
	positiontip:function($tooltip, e){
		var docwidth=(window.innerWidth)? window.innerWidth-15 : ajaxtooltip.iebody.clientWidth-15
		var docheight=(window.innerHeight)? window.innerHeight-18 : ajaxtooltip.iebody.clientHeight-15
		var twidth=$tooltip.get(0).offsetWidth
		var theight=$tooltip.get(0).offsetHeight
		var tipx=e.pageX+this.useroffset[0]
		var tipy=e.pageY+this.useroffset[1]
		tipx=(e.clientX+twidth>docwidth)? tipx-twidth-(2*this.useroffset[0]) : tipx //account for right edge
		tipy=(e.clientY+theight>docheight)? tipy-theight-(2*this.useroffset[0]) : tipy //account for bottom edge
		$tooltip.css({left: tipx, top: tipy})
	},

	showtip:function($tooltip, e){
		if (this.fadeeffect[0])
			$tooltip.hide().fadeIn(this.fadeeffect[1])
		else
			$tooltip.show()
	},

	hidetip:function($tooltip, e){
		//if (this.fadeeffect[0])
		//$tooltip.fadeOut(this.fadeeffect[1])
		//else
		$tooltip.hide()
	}

}

$(function() {
	LoadTooltips();
})

function LoadTooltips() {
	ajaxtooltip.iebody=(document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
	var tooltips = new Array(); //array to contain references to all tooltip DIVs on the page
	$('*[title^="ajax:"]').each(function(index){ //find all links with "title=ajax:" declaration
		this.titleurl=jQuery.trim(this.getAttribute('title').replace("ajax:", "")); //get URL of external file
		
		//if (this.getAttribute('alt') != "")
		//this.titleposition = this.getAttribute('alt');
		//else
		this.titleposition = index //remember this tooltip DIV's position relative to its peers
		tooltips[this.titleposition] = $('<div style="position:absolute;display:none;"></div>').appendTo('body');
		var $target=$(this)
		$target.removeAttr('title')
		$target.hover(
			function(e){ //onMouseover element
				var $tooltip=tooltips[parseInt(this.titleposition)]
				$tooltip.get(0).active = true;
				if (!$tooltip.get(0).loadsuccess){ //first time fetching Ajax content for this tooltip?
					$tooltip.html(ajaxtooltip.loadingHTML);
					ajaxtooltip.positiontip($tooltip, e);
					ajaxtooltip.showtip($tooltip, e);
					
					$.ajax({
						type: "GET",
						url: this.titleurl,
						success: function(html){
							if (html.length == 0) {
								$tooltip.html(ajaxtooltip.errorHTML);
							}
							$tooltip.html(html);
							$tooltip.get(0).loadsuccess=true;
							ajaxtooltip.positiontip($tooltip, e);
							if ($tooltip.get(0).active)
								ajaxtooltip.showtip($tooltip, e);
						},
						error: function() { 
							$tooltip.html(ajaxtooltip.errorHTML);
						}
					});
				}
				else{
					ajaxtooltip.positiontip($tooltip, e)
					ajaxtooltip.showtip($tooltip, e)
				}
			},
			function(e){ //onMouseout element
				var $tooltip=tooltips[parseInt(this.titleposition)]
				$tooltip.get(0).active = false;
				ajaxtooltip.hidetip($tooltip, e)		
			}
		)
		$target.bind("mousemove", function(e){
			var $tooltip=tooltips[parseInt(this.titleposition)]
			ajaxtooltip.positiontip($tooltip, e)
		})
	})
}