/**
 * brand.menu
 * Class: Creates a menu whose display is triggerd by mouse events over targetId
 * @memberOf brand
 */
brand.menu = Class.create( {

    // targetId: String
    // id of dom node that triggers display of menu
    targetId: "",
    
    // menuId: String
    // id of menu dom node
    menuId: "",
    
    timer: null,    
    timerDuration: 3,

    /**
     * brand.menu.initialize
     * Method for creating an instance of brand.menu
     * @param {String} args.menu  Menu node Id
     * @param {String} args.target  Id of node which triggers display of menu 
     * @example
        var footerMenu = new brand.menu({
            menu: "countries_container",
            target: "countries_hd"
        });
     * @methodOf brand.menu
     */
    initialize: function(/* Object */args) { 
        this.menuId = args.menu;
        var target = $(args.target);
        var menu = $(this.menuId);
        if (menu && target) {
        this.handlers = [
            target.observe('mouseover', this.show.bind(this)),
            target.observe('mouseout', this.startHide.bind(this)),
            menu.observe('mouseover', this.keepMenu.bind(this)),
            menu.observe('mouseout', this.startHide.bind(this))
        ];
    }
    },
    show: function(e) {
            //console.log("calling  show from "+e.target);
        this.keepMenu(e);
        $(this.menuId).removeClassName("hidden");
    },
    startHide: function(e) {
            //console.log("calling startHide from "+e.target); 
        this.timer = setTimeout(this.hide.bind(this), this.timerDuration);
        Event.stop(e);
        //dojo.stopEvent(e);
    },    
    keepMenu: function(e) {
        //console.log("calling keepMenu from "+e.target);
        clearTimeout(this.timer);
        Event.stop(e);
        //dojo.stopEvent(e);        
    },
    hide: function() { 
        $(this.menuId).addClassName("hidden");
    }
});


/**
 * brand.menuItem
 * line item in a menu
 * @memberOf brand.view
 */
brand.menuItem = Class.create({
    // domNode: Node Object
    // menu item dom node
    domNode: null,
    
    // rolloverClass: String
    // class to apply on mouseover
    rolloverClass: "",

    initialize: function(/* Object */args) { 
        this.domNode = args.domNode;
        this.rolloverClass = args.rolloverClass;
        if (this.domNode) {
            this.domNode.observe('mouseover', this._onMouseOver.bind(this));
            this.domNode.observe('mouseout',  this._onMouseOut.bind(this));
        }
    },
    _onMouseOver: function(e) {
        this.domNode.addClassName(this.rolloverClass);
    },
    _onMouseOut: function(e) {
        this.domNode.removeClassName(this.rolloverClass);
    }
});