// document.getElementById() shortcut from the Prototype library
if (!window.$) {
    window.$ = function () {
        var elements = new Array();

        for (var i = 0; i < arguments.length; i++) {
            var element = arguments[i];
            if (typeof element == 'string')
                element = document.getElementById(element);

            if (arguments.length == 1) 
                return element;

            elements.push(element);
        }

        return elements;
    }
}

// Info overlay storage and manager.
var tsInfoOverlayManager = new YAHOO.widget.OverlayManager();

// Mousover function for elements that produce overlays. The id is the
// id of the element that will become the overlay, and the link is
// the <a href=""> element that the overlay should be located underneath.
// If an Overlay object doesn't already exist, it will create one. It 
// also attaches the mouseover and mouseout event handlers to both the
// overlay element and the link element.
function tsShowOverlay (id, link) {
    // Does the overlay already exist?
    var overlay = tsInfoOverlayManager.find(id);
    if (overlay) {
        overlay.tsInFocus = true;
        overlay.show();
        tsInfoOverlayManager.focus(overlay);
    }

    // Hide any other overlays that are visible.
    for (var i = 0; i < tsInfoOverlayManager.overlays.length; i++) {
        if (overlay === tsInfoOverlayManager.overlays[i]) continue;
        if (YAHOO.util.Dom.getStyle(tsInfoOverlayManager.overlays[i].element, "visibility"))
            tsInfoOverlayManager.overlays[i].hide();
    }

    // If we already found the overlay in the overlay manger we're all done.
    if (overlay) return;

    // Determine the position for the overlay.
    var pos = YAHOO.util.Dom.getXY(link);
    pos[0] -= 60;
    pos[1] += 10;

    // Create a new Overlay.
    overlay = new YAHOO.widget.Overlay(id,
        { width: 350,
          constraintoviewport: false,
          xy: pos
        });
    tsInfoOverlayManager.register(overlay);

    // Used to determine if the overlay should go away or not.
    overlay.tsInFocus = true;

    // Set the mouseover and mouseout handlers for the overlay and context.
    YAHOO.util.Event.addListener( $(id), "mouseover",
                                  tsInfoOverlayMouseover, {'id':id} );
    YAHOO.util.Event.addListener( $(id), "mouseout", 
                                  tsInfoOverlayMouseout, {'id':id} );
    YAHOO.util.Event.addListener( link, "mouseout",
                                  tsInfoOverlayMouseout, {'id':id} );       

    // Set a resize handler that deletes the overlay from the manager to
    // force a resize.
    overlay.onDomResize = function (e, o) {
        overlay.hide();
        tsInfoOverlayManager.remove(overlay);
    };

    // Render then show the overlay.
    overlay.render(document.body);
    overlay.show();
    tsInfoOverlayManager.focus(overlay);
}

function tsInfoOverlayMouseover (e, o) {
    tsInfoOverlayManager.find(o.id).tsInFocus = true;
}

function tsInfoOverlayMouseout (e, o) {
    var overlay = tsInfoOverlayManager.find(o.id);
    if (!overlay) return;  // Unfortunately this can happen somehow. Yay IE6.
    overlay.tsInFocus = false;
    setTimeout(function () {
        if (!overlay.tsInFocus) overlay.hide();
    }, 300);
}

// For Gecko browsers we need to setup a window.onresize event listener.
YAHOO.util.Event.addListener( window, "resize", function () {
   var overlays = tsInfoOverlayManager.overlays;
   for (var i = 0; i < overlays.length; i++) {
       overlays[i].hide();
       tsInfoOverlayManager.remove(overlays[i]);
   }
});