//----------------------------------------------------------------------------
// Should be called from the body's onload event
//
//--!! NOTE: We have some hard-coded class names in here, which would be better
//--!! implemented with a more generic solution.
//
function initTooltips() {
    var allElems = document.all ? document.all : document.getElementsByTagName('*');

    // Loop through all the elements in the document
    for (var idx = 0; idx < allElems.length; idx++) {
    
        // Is the currently indexed element a tooltip reference?
        thisElem = allElems[idx];
        if (thisElem.className == "tool-ref") {

            // Gget the definition text
            //--!! NOTE: we make a big assumption that it's inside the next
            //--!! regular HTML node in the document, so you must set things
            //--!! up correctly for this to work.  It would be smart to be less
            //--!! fragile than this
            for (defNode = thisElem.nextSibling; defNode && defNode.nodeType != 1; defNode = defNode.nextSibling);
            defText = defNode.innerHTML;
            
            // Setup the container div
            thisElem.containerDiv = document.createElement("div");
            thisElem.containerDiv.style.position = "relative";
            thisElem.containerDiv.style.visibility = "hidden";
            
            // Setup the content and the drop shadow
            thisElem.content = document.createElement("div");
            thisElem.content.className = "tool-tip";
            thisElem.shadow = document.createElement("div");
            thisElem.shadow.className = "tool-shadow";

            // Copy the definition text into the new div
            thisElem.content.innerHTML = defText;

            // Append the new nodes where they belong
            thisElem.containerDiv.appendChild(thisElem.shadow);
            thisElem.containerDiv.appendChild(thisElem.content);
            thisElem.parentNode.replaceChild(thisElem.containerDiv, defNode);

            // Size the drop-shadow, now that we can actually find the real
            // width/height of the content
            thisElem.shadow.style.width = thisElem.content.offsetWidth +"px";
            thisElem.shadow.style.height = thisElem.content.offsetHeight + "px";
            
            //----------------------------------------------------------------
            // mouseover
            //
            thisElem.onmouseover = function() {
                this.containerDiv.style.visibility = "visible";
            };

            //----------------------------------------------------------------
            // mouseout
            //
            thisElem.onmouseout = function() {
                this.containerDiv.style.visibility = "hidden";
            };
        }
    }
}