brand.globalnav.Accordion = Class.create( Widget, 
{
    // summary:
    //      Container for a set of nav links where only 1 nav category link's content is visible at a time
    //      Switching between nav categories slides the sub nav links in each nav category up/down 
    
    //templatePath: "/js/brand/globalnav/templates/Accordion.html",  
    templatePath: "jsTemplates.globalnav.Accordion",
    
    templateType: "",
    isContainer: true,

    // hasLoaded: Boolean
    // have template nodes loaded in DOM
    // declarative instance = true
    hasLoaded: false,

    // parentId: String (Optional: passed for declarative instances)
    // parent object id 
    parentId: "",
    
    // displayName: String
    displayName: "",
    
    // hdPath: String
    // header img src
    hdPath: "", 
    
    // isOpen: Boolean
    // is accordion sub nav open
    isOpen: false,

    // activeItemId: String
    // currently active/open child PanelNavs associated w/ this Accordion
    activeSubItemId: "",
   
    // open/close animation properties
    durationOpen: 0.4,     
    durationClose: 0.3,      
    durationFade: 0.3, 

    initialize: function($super, properties) { 
        this.setProperties(properties); 
        //console.log("Accordion.initialize "+this.id);
        
        /**MK: still used?
        if (this.templateType && this.templateType !== "") {  
            this.templatePath = "/js/brand/globalnav/templates/" + this.templateType + ".html";
          }**/
          
        $super();
    }, 
    postCreate: function() {  
        //console.log("Accordion.postCreate "+this.id);
        
        // set header img states
        var hdNode = $(this.id + "_hd"); 
        this.hdImg = new brand.img(hdNode, ["off","on","sel"]);
    },
 
    onClick: function() {    
        //console.log("Accordion.onClick: "+this.id);
        
        // tell parent of event
        if (this.parent) {
            this.parent.onChildClick(this.id);
        }   
 
        // toggle state
        if (this.isOpen) {
            this.close();
        } else {
            this.open();
        }   
       
    },

    open: function() {
         //console.log("Accordion.open "+this.id);  
         if (this.hdImg) this.hdImg.changeSrc("sel"); // switch img 
 
         this._showSubNav();
         this._setActive(true);  
         
         generic.events.fire({event:"accordion:open", msg:{ type: "accordion", id: this.id, parentId: this.parentId, displayName: this.displayName }});        
    },
    
    close: function(/* String */defaultId) {
        // summary:
        //      Closes the active accordion, unless it is associated with default item
        //      Close subitems (panelsubnavs) 
          
        //console.log("Accordion.close "+this.id + " " + defaultId); 
         
        // handle subitems
        if (this.activeSubItemId) {
            var activeSubItem = $(this.activeSubItemId).widget;  
            activeSubItem.close(); 
        } 
        // handle this accordion
        if (this.id !== defaultId) {
            if (this.hdImg) {
                this.hdImg.changeSrc("off"); // switch img
            }
            this._hideSubNav();
            this._setActive(false);
            generic.events.fire({event:"panelnav:hide", msg: { type: "accordion", id: this.id, parentId: this.parentId }}); 
        } 
    },
    
    _setActive: function(/* Boolean */state) {     
        this.isOpen = state;
         
        if (this.parent) {
            if (state == true) {
                this.parent.activeItemId = this.id;
            } else if (this.parent.activeItemId === this.id) {
               this.parent.activeItemId = "";
            }
        } 
    },
    
    _showSubNav: function() {
        var node = this.containerNode; 
        //console.log("Accordion._showSubNav "+ node.id); 
        node.setOpacity(0);
        node.style.overflow = "hidden";
        if (node.style.visibility == "hidden" || node.style.display == "none") { 
            node.style.height = "1px";
            node.style.display = "block";
            node.style.visibility = "";        
        } 
           
        var duration = this.durationOpen;
        var h = node.scrollHeight; 
        
        var expandAccordion  = function() { 
            new Effect.Morph( node, {
                duration    : duration, 
                style       : { height  : h + "px"},   
                afterFinish : fadeUp
            });
        };
        duration = this.durationFade;
        var fadeUp  = function() {  
            new Effect.Opacity ( node, {
                duration    : duration, 
                transition  : Effect.Transitions.linear, 
                from        : 0,
                to          : 1 
            });
        };   
        expandAccordion();   
    },
    
    _hideSubNav: function() {
        var node = this.containerNode;
        //console.log("Accordion._hideSubNav "+ node.id);  
        
       var duration = this.durationClose;
       var contractAccordion = function() {  
            new Effect.Morph(node, {
                duration    : duration, 
                style       : { height  : "1px" },   
                afterFinish : function() {
                    node.hide();
                    node.style.overflow = "hidden";
                }
            });
        };
        duration = this.durationFade;
        var fadeDown  = function() {  
            new Effect.Opacity ( node, {
                duration    : duration,  
                transition  : Effect.Transitions.linear, 
                from        : 1,
                to          : 0 
            });
         };   
         fadeDown();
         contractAccordion();      
    }, 
    
    _onMouseOver: function(e) {
        if (this.hdImg.changeSrc && !this.isOpen) {
            this.hdImg.changeSrc("on");
        }
    },
    
    _onMouseOut: function(e) { 
        if (this.hdImg.changeSrc && !this.isOpen) { 
            this.hdImg.changeSrc("off"); 
        }
    }
});