/*
To use this tooltip, simply call:
 show_tooltip('message you want to show up', object to align tooltip to)

To make the tooltip disappear call:
 hide_tooltip()

Example:
    <a onmouseover="show_tooltip('Look a tooltip!', this)" onmouseout="hide_tooltip()">Hover over me!</a>

*/
 var TooltipObject = null;
 var TooltipText = null;

 function tooltipCreateDiv()
 {
    // Create the main element (this will contain the text area and the arrow)
    TooltipObject = document.createElement("DIV");
    // Append style for displaying
    TooltipObject.setAttribute("id", "TooltipObject");
    // Append style for displaying
    TooltipObject.style.visibility = "hidden";
    TooltipObject.style.position = "absolute"; 
    TooltipObject.style.left = "30px"; 
    TooltipObject.style.top = "30px"; 
    TooltipObject.style.zIndex = "10001";

    // Create the text area  
    var baseTextArea = document.createElement("DIV");
    // Append tooltip class
    baseTextArea.setAttribute("class", "tooltip_textarea");
    // Add baseTextArea to the ToolTipObject
    TooltipObject.appendChild(baseTextArea);

    // Add text so we can override it later
    TooltipText = document.createElement("DIV");
    // Append style for displaying
    TooltipText.setAttribute("id", "TooltipText");
    // Add TooltipText to the baseTextArea
    baseTextArea.appendChild(TooltipText);
    
    // Create the text area  
    var arrowPiece = document.createElement("DIV");
    // Append tooltip class
    arrowPiece.setAttribute("class", "tooltip_arrow");
    //Add ArrowPiece to the ToolTipObject
    TooltipObject.appendChild(arrowPiece)

    if (document.all) // IE seems to work better with the write command
    {
        document.write(TooltipObject.outerHTML);
        // now I have to re-query this items
        TooltipObject = document.all["TooltipObject"];
        TooltipText = document.all["TooltipText"];
    }
    else // Everyone seems ok with this whole append child command
    {
        document.body.appendChild(TooltipObject);
    }
 }
 
 function createAttribute(name, value)
 {
    var cssClass = document.createAttribute(name);
    cssClass.value = value;
    return cssClass;
 }
 
 function show_tooltip(text, control, offsetTop, offsetLeft)
 {
    var ns6=document.getElementById && !document.all;
    
    TooltipText.innerHTML = text;
    
    if (control != null)
    {
        var offsetTopValue = 17;
        var curX=$(control).offset().left + (isNaN(offsetLeft) ? 0 : offsetLeft);
        var curY=$(control).offset().top + (isNaN(offsetTop) ? 0 : offsetTop);
        //alert("X: " + curX + ", Y: " + curY);

        TooltipObject.style.left = curX - (TooltipObject.offsetWidth/2) + ($(control).outerWidth()/2) + "px"; 
        TooltipObject.style.top = curY - TooltipObject.offsetHeight - offsetTopValue + "px";
    }
    
    TooltipObject.style.visibility="visible";
 }
 
 function hide_tooltip()
 {
    TooltipObject.style.visibility="hidden";
 }
 
 tooltipCreateDiv();