/**
 * Applet to display drop-downs for the main menu.
 * 
 * The idea is that the page should contain regular XHTML markup for the items of a drop-down
 * menu; this way, if JavaScript is disabled, the pages linked by the menu items will still be
 * accessible.  What this applet does then, it removes the "regular" menu from the DOM and
 * uses its items for a drop-down menu which is displayed when the user hovers a specified 
 * entry of the main menu --- e.g. "About Us".
 *
 * Note that, although presently we only have one drop-down menu (i.e. "About Us"), this
 * applet can be started for any number of drop-down menus --- e.g. we may want to add a
 * drop-down menu for the "News" section.
 *
 *
 * INTERFACE WITH MARKUP
 * ---------------------
 * In order to attach a drop-down to an entry of the main menu, specify an id for the tag
 * containing that entry --- this will be the first parameter to the applet.
 * Your document should already contain the "regular" menu somewhere, perhaps in a div. 
 * Give this container tag an id and pass that id as the second argument to the applet.
 * This container tag is expected to have an ul block inside which lists the actual menu
 * items.  (If there's more than one, the applet will consider the first in document order.)
 * Drop down menus are styled with the CSS in "master.main-menu.css".
 *
 * 
 * DEPENDENCIES: jQuery 1.4.2
 *
 *
 * USAGE
 * -----
 * <script src="[path]/scripts/lib/jquery.js" type="text/javascript"></script>
 * <script src="[path]/scripts/master.dd-menu.js" type="text/javascript"></script>
 * <script type="text/javascript">
 *     $(document).ready(function () { startDropDownMenuApplet("menu-id", "items-id"); });
 * </script>
 *
 */

function startDropDownMenuApplet (menuId, itemsId)
{
    // Grab the container tag of the main menu entry we have to attach the drop down to.
    var menu = $("#" + menuId);
    
    // Remove the whole section containing the drop-down items and relocate those at the
    // end of the tag containing the main menu entry.
    var items = $("#" + itemsId + " > ul:first");
    menu.append(items);
    $("#" + itemsId).remove();    
    items = $("#" + menuId + " > ul:last");  // now items points to the relocated markup.
    
    // Display/hide the drop-down as the user hovers over the main menu entry.
    menu.hover(
        function () { items.fadeIn(1000); },
        function () { items.fadeOut(1500); }
    );
}