/* - dropout.js - */
/*
 * This is the code for the "dropout" menus that push to the side using just spans. 
 * It uses the following markup:
 *
 * <span class="actionMenu" id="uniqueIdForThisMenu">
 *   <span class="spanActionHeader"
 *     <a href="">A Title</a>
 *    </span>
 *   <span class="subspan">
 *     <!-- Here can be any content you want -->
 *   </span>
 * </span>
 *
 * When the menu is toggled, then the span with the class actionMenu will get an
 * additional class which switches between 'activated' and 'deactivated'.
 * You can use this to style it accordingly, for example:
 *
 * .actionMenu.activated {
 *   display: block;
 * }
 *
 * .actionMenu.deactivated {
 *   display: none;
 * }
 *
 * When you click somewhere else than the menu, then all open menus will be
 * deactivated. When you move your mouse over the a-tag of another menu, then
 * that one will be activated and all others deactivated. When you click on a
 * link inside the actionMenuContent element, then the menu will be closed and
 * the link followed.
 *
 */

function myhideAllMenus() {
    jq('span.actionMenu').removeClass('activated').addClass('deactivated');
};

function mytoggleMenuHandler(event) {
    // swap between activated and deactivated
    jq(this).parents('.actionMenu:first')
        .toggleClass('deactivated')
        .toggleClass('activated');
    return false;
};

function myactionMenuDocumentMouseDown(event) {
    if (jq(event.target).parents('.actionMenu:first').length)
        // target is part of the menu, so just return and do the default
        return true;

    myhideAllMenus();
};

function myactionMenuMouseOver(event) {
    var menu_id = jq(this).parents('.actionMenu:first').attr('id');
    if (!menu_id) return true;

    var switch_menu = jq('span.actionMenu.activated').length > 0;
    jq('span.actionMenu').removeClass('activated').addClass('deactivated');
    if (switch_menu)
        jq('#' + menu_id).removeClass('deactivated').addClass('activated');
};

function myinitializeMenus() {
    jq(document).mousedown(myactionMenuDocumentMouseDown);

    myhideAllMenus();

    // add toggle function to header links
    jq('span.actionMenu .spanActionHeader a')
        .click(mytoggleMenuHandler)
        .mouseover(myactionMenuMouseOver);
        
    // add hide function to all links in the dropdown, so the dropdown closes
    // when any link is clicked
    jq('span.actionMenu > .subspan').click(myhideAllMenus);
};

jq(myinitializeMenus);