//
// Menu Item - The Model
//
// Holds the information about a MenuItem
//
function MenuItem ( text, id, link, size, ui ) {
    // The text that is shown
    this.text = text;
    // The id of the menu item. This should correspond with the html element
    this.id = id;
    // The parent menu item
    this.parent = null;
    // The ui that creates the html elements
    this.ui = ui;
    // The link 
    this.link = link ? link : null;
    // The size of this menu item. This value may be ignored by the Menu
    this.size = size;
    // Builds the UI using the ui object
    this.build = function( ) {
        return ui.build( this );
    }
}

//
// MenuItemUI - View
//
// This will create the HTML elements and event handlers for the MenuItem
//
var MenuItemUI = {
    // Builds the ui html element for the menuitem
    build:function( menuitem ) {
        return "<div class='menu_item' id='" + menuitem.id + "'" +
        " style='width:" + menuitem.size.width + ";height:" + menuitem.size.height + ";'" +
        " onmouseover='Menubar.wait();this.className=\"menu_item_over\";' onmouseout='Menubar.hide(\"" + menuitem.parent.id + "\");this.className=\"menu_item\";' onclick='MenuItemUI.clicked(\"" + menuitem.parent.id + "\",\"" + menuitem.id + "\",\"" + menuitem.link + "\");'>" + menuitem.text + "</div>";
    },
    // Handles the mouse event click for the menuitem element.
    clicked:function( parentid, id, link ) {
        this.animate( parentid, id, link );
    },
    // Creates an animation that blinks the menuitem component before changing the location.
    animate:function( parentid, id, link ) {
        setTimeout("MenuItemUI.setClassName('" + id + "','menu_item')", 100 ); 
        setTimeout("MenuItemUI.setClassName('" + id + "','menu_item_over')", 200 );
        setTimeout("MenuItemUI.setClassName('" + id + "','menu_item')", 300 );
        setTimeout("Menubar.hide('" + parentid+ "')", 300 );
        if ( link != "null" )  {
            setTimeout("document.location='" + link + "'", 300 );
        }
    },
    // Set the class name for the menuitem.
    setClassName:function( id, className ) {
        getElement( id ).className = className;
    }
}

//
// Menu - This extends MenuItem
//
// This Menu contains a list of MenuItems and builds the ui that
// displays the MenuItems.
//
function Menu( text, id, link, size, ui ) {
    // Extends the MenuItem object
    var local = new MenuItem( text, id, link, size, ui ? ui : MenuItemUI );
    // Holds the menuitems for this menu
    MenuItem.prototype.menuitems = new Array( );
    MenuItem.prototype.addMenuItem = function( menuitem ) {
        local.menuitems.push( menuitem );
        menuitem.parent = this;
    }
    // Returns a menuitem
    MenuItem.prototype.getMenuItem = function( index ) {
        return local.menuitems[ index ];
    }
    // Handles the displaying of this menu. In the future we will
    // support multiple layers.
    MenuItem.prototype.show = function( ) {
        var point = getElementPosition( local.id );
        var container =  local.getContainer( );
        var html = "";
                for( i = 0; i < local.menuitems.length; i++ ) {
                    var menuitem = local.menuitems[ i ];
                    if ( local.size == null ) {
                        menuitem.size = {width:getElementSize( local.id ).width, height:getElementSize( local.id ).height};
                    }
                    else {
                        menuitem.size = {width:local.size.width + "px", height:local.size.height + "px"};
                    }
                    if ( menuitem.ui ) {
                        html += menuitem.build( );
                    }
                    else {
                        html += local.ui.build( menuitem );
                    }
                }
                container.innerHTML = html;
                container.style.left = point.left + "px";
                container.style.top = point.top + local.parent.size.height + "px";
                container.style.visibility = "visible";
    }
    // Hides this menu
    MenuItem.prototype.hide = function( ) {
        local.getContainer( ).style.visibility = "hidden";
    }
    // Returns the HTML element that this menu will write to
    MenuItem.prototype.getContainer = function( ) {
        return document.getElementById( "menu" );
    }
    return local;
}

//
// This is a controller. It handles all request to show, hide, wait for the menus.
//
var Menubar = {
    id:null,
    size:{width:0,height:0},
    menus:new Array( ),
    hideTimeoutID:0,
    addMenu:function( menu ) {
        this.menus.push( menu );
        menu.parent = this;
    },
    show:function( id ) {
        this.wait( );
        var menu = this.getMenu( id );
        if ( menu )
            menu.show( );
    },
    hide:function( id ) {
        var menu = this.getMenu( id );
        this.hideTimeoutID = setTimeout("menu.hide()", 200 ); 
    },
    getMenu:function( menuId ){
         for( i = 0; i < this.menus.length; i++ ) {
            if ( this.menus[ i ].id == menuId )
                return this.menus[ i ];
        }
        return null;
    },
    wait:function( ) {
        clearTimeout( this.hideTimeoutID );
    }
}