/* MgSubmenu class
 *
 * show and hide submenus, this class depends on jQuery
 *
 * How it works:
 * 1. The document must put a placeholder at where the submenu is to be
 * 2. The submenus must have absolute position and be hidden
 * 3. The showSub() function will move the submenus over to the placeholder
 *    location and make it visible
 * 4. The hideSub() function will make the submenu hidden again
 * 5. The class (a singleton) keeps the state of the last displayed menu
 *    so hidePrev() can make it hidden
 *
 * For the future:
 *  if you need multiple (sets of) menus, convert this to an
 *  instantiable class, and create two instances,
 *  one for each menu set that you are displaying
 */

var MgSubmenu = new function() {
    this.prev = null;
    this.showSub = function (submenu, placeholder) {
        var pos = $(placeholder).offset();  
        this.hidePrev();

        // show the menu directly over the placeholder
        $(submenu).css( {
            "left": (pos.left) + "px",
            "top": (pos.top-10) + "px" // FIXME: css dependent adjustment
        } );
        $(submenu).css('visibility','visible');
        this.prev = submenu;
    }

    this.hideSub = function (submenu) {
        // optional animation (not quite working)
        // FIXME: using callback somehow screws things up
        // $(submenu).slideUp('normal', <callback>);
        $(submenu).css('visibility', 'hidden');
    }

    this.hidePrev = function () {
        if(this.prev != null) {
            $(this.prev).css('visibility','hidden');
            this.prev = null;
        }
    }
}