// "load" handler for the window
YAHOO.example.onWindowLoad = function(p_oEvent) {

    // Hides submenus of the root Menubar instance
    function hideSubmenus() {
        if(oMenuBar.activeItem) {
            var oSubmenu = oMenuBar.activeItem.cfg.getProperty("submenu");
            if(oSubmenu) {
                oSubmenu.hide();
            }
        }
    }

    // Cancels the call to "hideSubmenus"
    function cancelTimer() {
        if(nTimeoutId) {
            window.clearTimeout(nTimeoutId);
        }
    }

    // "mouseout" event handler for each submenu of the menubar
    function onSubmenuMouseOut(p_sType, p_aArguments, p_oMenu) {
        cancelTimer();
        nTimeoutId = window.setTimeout(hideSubmenus, 750);
    }

    // "mouseover" handler for each item in the menubar
    function onMenuBarItemMouseOver(p_sType, p_aArguments, p_oMenuItem) {
        var oActiveItem = this.parent.activeItem;

        // Hide any other submenus that might be visible
        if(oActiveItem && oActiveItem != this) {
            this.parent.clearActiveItem();
        }

        // Select and focus the current MenuItem instance
        this.cfg.setProperty("selected", true);
        this.focus();

        // Show the submenu for this instance
        var oSubmenu = this.cfg.getProperty("submenu");
        if(oSubmenu) {
            oSubmenu.show();
        }
    }

    // "mouseout" handler for each item in the menubar
    function onMenuBarItemMouseOut(p_sType, p_aArguments, p_oMenuItem) {
        this.cfg.setProperty("selected", false);

        var oSubmenu = this.cfg.getProperty("submenu");
        if(oSubmenu) {
            var oDOMEvent = p_aArguments[0],
                oRelatedTarget = YAHOO.util.Event.getRelatedTarget(oDOMEvent);
            if(
                !(
                    oRelatedTarget == oSubmenu.element ||
                    this._oDom.isAncestor(oSubmenu.element, oRelatedTarget)
                )
            ) {
                oSubmenu.hide();
            }
        }
    }

    var nTimeoutId;

    // Instantiate and render the menubar and corresponding submenus
    var oMenuBar = new YAHOO.widget.MenuBar("menubar");
    oMenuBar.render();

    /*
        Add a "mouseover" and "mouseout" event handler each item
        in the menu bar
    */
    var aMenuBarItems = oMenuBar.getItemGroups()[0],
        i = aMenuBarItems.length - 1;
    do {
        aMenuBarItems[i].mouseOverEvent.subscribe(onMenuBarItemMouseOver);
        aMenuBarItems[i].mouseOutEvent.subscribe(onMenuBarItemMouseOut);
    }
    while(i--);

    // Assign event handlers

    // Add a "mouseover" handler to the menubar
    oMenuBar.mouseOverEvent.subscribe(cancelTimer);

    var oItem1 = oMenuBar.getItem(0).cfg.getProperty("submenu"),
        oItem2 = oMenuBar.getItem(1).cfg.getProperty("submenu"),
        oItem3 = oMenuBar.getItem(3).cfg.getProperty("submenu");

    // Add a "mouseover" event handler to each submenu
    oItem1.mouseOverEvent.subscribe(cancelTimer);
    oItem2.mouseOverEvent.subscribe(cancelTimer);
    oItem3.mouseOverEvent.subscribe(cancelTimer);

    // Add a "mouseout" event handler to each submenu
    oItem1.mouseOutEvent.subscribe(onSubmenuMouseOut, oItem1, true);
    oItem2.mouseOutEvent.subscribe(onSubmenuMouseOut, oItem2, true);
    oItem3.mouseOutEvent.subscribe(onSubmenuMouseOut, oItem3, true);

    // Add a "click" handler to the document
    YAHOO.util.Event.addListener(document, "click", hideSubmenus);

    // Redimension content to adapt to browser size
    var nViewportHeight = YAHOO.util.Dom.getClientHeight(),
        nContentHeight = 250;
    if(nViewportHeight - 345 > nContentHeight) {
        nContentHeight = nViewportHeight - 345;
    }
    YAHOO.util.Dom.setStyle("content", "height", nContentHeight + "px");

}

// Add a "load" handler for the window
YAHOO.util.Event.addListener(window, "load", YAHOO.example.onWindowLoad);

// Opens a new window to show a product
function showProduct(p_sURL) {

    var nWidth = 500,
        nHeight = 410,
        nLeft = (screen.width - nWidth) / 2,
        nTop = (screen.height - nHeight) / 2;
    window.open(p_sURL, 'tmp', 'left=' + nLeft + ',top=' + nTop + ',width=' + nWidth + ',height=' + nHeight + ',scrollbars,status,resizable');

}

// Opens a new window to show an image
function showImg(p_sURL) {

    var nWidth = 200,
        nHeight = 200,
        nLeft = 0,
        nTop = 0;
    window.open("popup.html?" + p_sURL, 'tmp', 'left=' + nLeft + ',top=' + nTop + ',width=' + nWidth + ',height=' + nHeight);

}

// Opens a new window to show the catalog
function showCatalog(p_sURL) {

    var nWidth = 800,
        nHeight = 560,
        nLeft = (screen.width - nWidth) / 2,
        nTop = (screen.height - nHeight) / 2;
    window.open(p_sURL, 'tmp', 'left=' + nLeft + ',top=' + nTop + ',width=' + nWidth + ',height=' + nHeight + ',scrollbars,status,resizable');

}