/*
 *
 * Copyright (c) 2006 Sam Collett (http://www.texotela.co.uk)
 * Licensed under the MIT License:
 * http://www.opensource.org/licenses/mit-license.php
 * 
 */

 
/*
 * jQuery ToolTip Demo. Demo of how to add elements and get mouse coordinates
 *	There is also a ToolTip plugin found at http://interface.eyecon.ro/,
 *	  which uses a CSS class to style the tooltip, but shows it below the input/anchor, rather than where the mouse is
 *
 *
 * @name     ToolTipDemo
 * @param    bgcolour  Background colour
 * @param    fgcolour  Foreground colour (i.e. text colour)
 * @author   Sam Collett (http://www.texotela.co.uk)
 * @example  $("a,input").ToolTipDemo('#fff');
 *
 */
$.fn.ToolTipDemo = function(bgcolour, fgcolour) {
    this.mouseover(
		function(e) {
		    if ((!this.title && !this.alt) && !this.tooltipset) return;
		    // get mouse coordinates
		    // based on code from http://www.quirksmode.org/js/events_properties.html
		    var mouseX = e.pageX || (e.clientX ? e.clientX + document.body.scrollLeft : 0);
		    var mouseY = e.pageY || (e.clientY ? e.clientY + document.body.scrollTop : 0);
		    mouseX += 10;
		    mouseY += 10;
		    bgcolour = bgcolour || "#ffffe1";
		    fgcolour = fgcolour || "#000";
		    // if there is no div containing the tooltip
		    if (!this.tooltipdiv) {
		        ;

		        if ($("#tooltip_div")) {
		            $("#tooltip_div").remove();
		        }

		        var div = document.createElement("div");
		        div.id = "tooltip_div";


		        // create a div and style it


		        this.tooltipdiv = div;
		        $(div).css(
				{
				    border: "1px solid #000",
				    padding: "2px",
				    backgroundColor: bgcolour,
				    color: fgcolour,
				    position: "absolute"
				})
		        // add the title/alt attribute to it
				.html((this.title || this.alt));
		        this.title = "";
		        this.alt = "";
		        $("body").append(div);
		        this.tooltipset = true;
		    }
		    $(this.tooltipdiv).show().css({ left: mouseX + "px", top: mouseY + 3 + "px" });
		}
	).mouseout(
		function() {
		    if (this.tooltipdiv) {
		        this.title = $(this.tooltipdiv).html();
		        this.tooltipset = false;
		        $(this.tooltipdiv).remove();
		        this.tooltipdiv = null;
		    }
		}
	);
    return this;
}