var Page = {

    listID: "EmployeeList",
    linkID: "EmployeeListLink",
    
    wait: 1000,
    
    init: function() {
        var list = Ext.get(this.listID)

        list.setVisibilityMode(Ext.Element.DISPLAY);
        list.hide();
    },

    focusLink: function() {
        var list = Ext.get(this.listID)
        var link = Ext.get(this.linkID)
        
        //
        // If list is already visible, make sure it
        // stays visible as long as link is hovered.
        //
        if (list.isVisible()) {
            list.requested = true;
        } 
        //
        // If list is not visible, initiate timed
        // reveal of list as long as link keeps
        // focus. (See blurLink() for cancellation
        // of this timed show.)
        //
        else {
            link.timedShow = setTimeout("Page.showList()", this.wait);
        }
    },
    
    blurLink: function(id) {
        var list = Ext.get(this.listID)
        var link = Ext.get(this.linkID)
        
        //
        // If list is visible, initiate timed
        // hide.
        //
        if (list.isVisible()) {
            list.requested = false;
            list.timedHide = setTimeout("Page.hideList()", this.wait);
        }
        //
        // If a timed reveal of the list was 
        // initiated, cancel it.
        //
        else if (link.timedShow) {
            clearTimeout(link.timedShow);
            link.timedShow = null;
        }
    },
        
    focusList: function(id) {
        var list = Ext.get(this.listID)
        var link = Ext.get(this.linkID)

        //
        // Make sure list "requested" status stays "true".
        //
        list.requested = true;
        
        //
        // If a timed hide was initated,
        // cancel it.
        //
        if (list.timedHide) {
            clearTimeout(list.timedHide);
            list.timedHide = null;
        }
    },
    
    blurList: function(id) {
        var list = Ext.get(this.listID)
        var link = Ext.get(this.linkID)

        //
        // Set "requested" status to false and
        // initiated timed hide.
        //
        list.requested = false;
        list.timedHide = setTimeout("Page.hideList()", this.wait);
    },
    
    showList: function(id) {
        var list = Ext.get(this.listID)
        var link = Ext.get(this.linkID)

        if (!list.isVisible()) {

            //
            // Change style of link.
            //
            link.replaceClass("ShowMore", "ShowingMore");

//            list.dom.style.display = "block";    // for Safari

            list.show();
            //
            // slideIn() and fadeIn() don't work
            // well with all browsers (esp. Mac FF)
            //
            /*
            list.slideIn();
            list.fadeIn();
            */

//            this.doFadeOut("BioDetails", {endOpacity: 0.25});
        }
    },

    hideList: function(id) {
        var list = Ext.get(this.listID)
        var link = Ext.get(this.linkID)
        
        //
        // Only hide if an effect (e.g. show) isn't
        // in progress.
        //
        if (!list.hasActiveFx()) {
            if (list.isVisible() && !list.requested) {
            
                /*
                list.blur();  // for Safari
                list.slideOut("t", {
                    callback: function() {
                        list.hide();
                        Ext.get(id + "Link").replaceClass("showinglist", "showlist");
                    }
                });
                */

                list.fadeOut({
                    callback: function() {
                        list.dom.style.display = "none"; // for Mac FF
                        link.replaceClass("ShowingMore", "ShowMore");
                    }
                });

//                this.doFadeIn("BioDetails");
            }
        }
    }    

};
Ext.EventManager.onDocumentReady(Page.init, Page, true);