// summary:
//      PanelSubNav base class & extensions:
//      PanelSubNav, ProductSubNav

brand.globalnav.PanelSubNav = Class.create(Widget, 
{
    // summary:
    //      Contains subnav content for each PanelNav
    //      DOM child of Panel

    //templatePath: "/js/brand/globalnav/templates/PanelSubNav.html",   
    templatePath: "jsTemplates.globalnav.PanelSubNav",  
            
    isContainer: true,
    
    // parentId: String
    // id of PanelNav that displayed me
    parentId: "",

    // activeItemId: String
    // currently active/open child widget id
    activeItemId: "",

    // dataId: String
    // id as defined in json (ex: supercat id)
    dataId: "",

    // content: Object
    // contains parameters for requesting items from server, ex: content.url
    content: null,
    
    // isDefaultPanel: Boolean
    // true if panel is the open/page panel
    isDefaultPanel: false,

    // hasLoaded: Boolean
    // flag set to true when content has been rendered as html (true if declarative or after json request & render)
    hasLoaded: false,
    
    // cache: Boolean
    // cache after first request for content
    cache: true,
    
    initialize: function($super, properties) {
        this.setProperties(properties);
        //console.log("PanelSubNav.initialize: "+this.id + " / "+this.parentId + " " +this.isDefaultPanel+" properties = ",properties);
        
        // check for properties stored in this.content config settings
        var content = this.content;
        if (content) {
            if (content.reinsertNode) this.reinsertNode = content.reinsertNode;
            if (content.cache) this.cache = content.cache;
            if (content.hasLoaded) this.hasLoaded = content.hasLoaded;
        }
        
        if (this.isDefaultPanel) {
            this.domParent =  "panel_open"; 
        } else { 
            this.domParent = $($(this.parentId).widget.panelId).widget.containerNode;  
        }
        //console.log("PanelSubNav.initialize add subnav "+this.id + " / parent "+ this.parentId);

        $super();
    },  
    
    postCreate: function() {
        //console.log("PanelSubNav.postCreate "+this.id+ " / "+$(this.id)); 
        
        // method won't exist for the default panel on page, bc that content is in panel_open
        if ($(this.parentId) && $(this.parentId).widget && $(this.parentId).widget.addSubNav) {
             $(this.parentId).widget.addSubNav(this);      
        }
       
        // show instances that are loaded, but hidden before init (i.e. my mac)
        if (this.hasLoaded) {
            //console.log("PanelSubNav.postCreate "+this.id+ " / "+$(this.id)+" reinsertNode = "+this.reinsertNode);
        
            this.showProgress(false);
            //psubnav.domNode.removeClassName("invisible"); 
            //$(this.id).removeClassName("invisible");
            this.containerNode.removeClassName("invisible");
        }
        
        if (this.callback) {
            //console.log("PanelSubNav.postCreate "+this.id+ " > callback");
            this.callback(); 
        }
    },

    onChildrenLoaded: function(args) {
        this.showProgress(false);
        this.containerNode.removeClassName("invisible"); // show loaded content
        
        if (args && args.hasLoaded) {
            this.hasLoaded = true;
        }
    },
    
    addSubItem: function(/* DOM node ? String */item,/* DOM node? */container) {
        // summary:
        //      Places child node(s)
        //      If passed a string, create a container node for placement 
        //console.log("PanelSubNav.addSubItem "+container+" / " + typeof container);
               
        if (!container) {
             container = this.containerNode || $(this.id); 
        }
        /**
        if (!container && this.containerNode) {
            container = this.containerNode; 
        } else {
            container = $(this.id); 
        }**/
        
        var node = item;
        if (typeof(item) === "string") {
            node = document.createElement("div");
            node.innerHTML = item;
            this.hasLoaded = true;
        }
        try {
            container.appendChild(node);
        }
        catch (e) { 
            console.log("PanelSubNav.addSubItem e: "+e.description);  
        }
    },
    
    onChildClick: function(/* String */sectionId) {
        // summary:
        //      Called by child widgets
        //      Captures events occuring further down in navigation heirarchy

        if (this.activeItemId && (this.activeItemId !== sectionId)) {
            var activeItem = $(this.activeItemId).widget;
            activeItem.close();
        }   

    },
    
    onParentClick: function() {
    },
    
    showProgress: function(/* Boolean */state) {
        this.progressNode.style.display = (state) ? "block" : "none"; 
    },
    
    setDefaultState: function() {
        $(this.id).addClassName("panelnav_category_default");
    }
    
});


brand.globalnav.ProductSubNav = Class.create( brand.globalnav.PanelSubNav,
{
    // summary:
    //      Contains product catalog subnav content for each PanelNav:
    //      category-level (ProductCategoryDetail) items and category list (Accordion) items.
    //      Detail-level (ProductDetail) items contained within category Accordion

    templateString: null,    
    //templatePath: "/js/brand/globalnav/templates/ProductSubNav.html",  
    templatePath: "jsTemplates.globalnav.ProductSubNav", 
        
    // inAccordionMode: Boolean
    // is subnav showing accordion items (rather than category detail items)
    inAccordionMode: false,

    // activeAccordionId: String
    // currently active/open child Accordion    
    activeAccordionId: "",
    
    initialize: function($super, properties) {
       //console.log("ProductSubNav.init"); 
       $super(properties);  
    },

    addCategoryDetail: function(/* Object */args) {
        // summary:
        //      Creates category detail element
        //      Places ProductCategoryDetail in detailContainerNode

        //console.log("ProductSubNav.addCategoryDetail "+args.id + "/ "+this.id);
        args.parentId = this.id; // this sub nav
        //JSTEST args.parentId =  $(this.id).widget.parent.id;
        args.containerNode = this.detailContainerNode; //JSTEST bc of Detail._onClick, change?
        args.domParent = this.detailContainerNode; // ProductCategoryDetail container 
        args.accordionId = args.id+"_accordion"; // id of corresponding Accordion 
             
        var detail = new brand.globalnav.ProductCategoryDetail(args);
        //detail.startup(); // SS: commented out since brand.globalnav.ProductCategoryDetail had an empty startup method
    },
    
    addCategoryAccordion: function(/* Object */args) {
        // summary:
        //      Creates category list/accordion element
        //      Places Accordion in accordionContainerNode
        //      Returns instance of Accordion
        //console.log("ProductSubNav.addCategoryAccordion "+args.id+"_accordion to "+this.accordionContainerNode.id);
        args.accordionId = args.id+"_accordion";
        
        var accordion = new brand.globalnav.Accordion({
            id: args.accordionId,
            displayName: args.displayName,
            domParent: this.accordionContainerNode,
            hdPath: args.hdPath,
            parentId: this.id
        });
        //JSTEST this.accordionContainerNode.appendChild(accordion.domNode);
        //accordion.startup(); // SS: accordion class no longer has startup method
                                    
        return accordion;
    },
    
    getAccordion: function(/* String */id) {
        var accordion = $(id).widget;
        this.openAccordion(accordion);
    },
    
    openAccordion: function(/* Widget */accordion) {
        //console.log("ProductSubNav.openAccordion "+accordion.id);  
        // show accordion container
        this.accordionContainerNode.style.display = "block"; 
        this.inAccordionMode = true;
        // show accordion nav
        accordion.open();
        this.activeAccordionId = accordion.id;
    },

    setCategoryState: function(args) {
        //console.log("ProductSubNav.setCategoryState "+args.accordion.id);  
        if (args.isDefaultCat && args.useAccordionMode) {
              //console.log("ProductSubNav.setCategoryState "+args.accordion.hdNode);  
       
            this.accordionContainerNode.removeClassName("hidden");
            var accordion = args.accordion;
            
            // show items in category under accordion
            function openAccordion() {
                accordion.open();
            }
            openAccordion.delay(1);
            
            this.detailContainerNode.style.display = "none";
            // apply subnav group style if there is default detail item to show
            if (args.hasItemInDefaultCategory) {
                $(accordion.id).addClassName("panelnav_category_default");
            }            
        }
    },

    setPanelState: function(args) {
        //if category level includes non-category (childless) items      
        if (args.hasMixed) {
            $(this.id).addClassName("panelnav_subnav_mixed");
            this.detailLinksContainerNode.style.display = "block";           
        }
    },
    
    reset: function() {
        // summary:
        //      Resets default state of subnav:
        //      shows ProductCategoryDetail container, hides Accordion container
        //console.log("ProductSubNav.reset"); 
        if (this.inAccordionMode) {
            this.detailContainerNode.style.display = "";
            this.accordionContainerNode.style.display = "";
            $(this.activeAccordionId).widget.close();
            this.inAccordionMode = false;
            this.activeAccordionId = "";
        }
    },
    
    onParentClick: function() {
        this.reset();
    }
    
});

brand.globalnav.SectionDescSubNav = Class.create( brand.globalnav.PanelSubNav,
{
    // summary:
    //      PanelSubNav with additional content attributes.  Contains:
    //      Large Section header & description text
    //      Detail-level (Detail) items

    templateString: null,    
    templatePath: "jsTemplates.globalnav.SectionDescSubNav", 
        
    // hdAlt: String
    hdAlt: "",

    // description: String
    description: "",

    setContent: function(args) {
        // populate additional content nodes
        this.panelDescriptionNode.innerHTML = args.description;
        this.hdNode.setAttribute("src", args.header);
        this.hdNode.setAttribute("alt", args.header_alt);
    },
    
    onChildrenLoaded: function(args) {
        this.showProgress(false);
        this.contentNode.removeClassName("invisible"); // show loaded content
        this.hasLoaded = true;
    }
    
});


brand.globalnav.ArtistryInActionSubNav = Class.create( brand.globalnav.PanelSubNav,
{
    // summary:
    //      PanelSubNav with additional content attributes.  Contains:
    //      Detail-level (Detail) items
    //      "Previous" button

    templateString: null,
    //templatePath: "/js/brand/globalnav/templates/ArtistryInActionSubNav.html",
    templatePath: "jsTemplates.globalnav.ArtistryInActionSubNav",
    itemCount: 0,
    featuredMax: null,
    domInsertionMethodName: "addSubItem", // tell GlobalNav class to use specific method for DOM Insertion to override generic.widget class default DOM insertion (insertMixIn)

    initialize: function($super, properties) {
        $super(properties);
        this.featuredMax = this.content.featuredMax;
    },

    postCreate: function($super) {
        $super();
        // set up event handler for "previous" button
        var previousBtn = $("psubnav_artistry_in_action_btnprevious");
        var btnContainer = this.containerNode.select("div.psubnav_artistry_in_action_btn_container")[0];

        this.containerNode.select('div.intro-text p.description')[0].innerHTML = generic.rb('language').get('makeup_artistry.panel_nav_intro');

        var self = this;
        if (btnContainer && previousBtn) {
            previousBtn.observe("click", function (clickEvent) {
                clickEvent.preventDefault();
                btnContainer.hide();
                self.previousContainerNode.style.display = "block";
                // this isn't an accordion object, but the expansion functionality is the same, so we still want to broadcast the event for brand.view.heightHandler
                if (!self.isDefaultPanel) {
                    generic.events.fire({event:"accordion:open", msg:{ type: "accordion", id: self.id, parentId: self.parentId }}); 
                }
            });
        }
        
    },
    
    addSubItem: function(item) {
        // summary:
        //      Places child node(s)
        this.itemCount++;
        //console.log("this.itemCount = "+this.itemCount+" this.featuredMax = "+this.featuredMax);
        if (this.itemCount <= this.featuredMax) {
            container = this.featuredContainerNode; 
        } else {
            container = this.previousContainerNode;
        }
        
        var node = item;
        if (typeof(item) === "string") {
            node = document.createElement("div");
            node.innerHTML = item;
            this.hasLoaded = true;
        }
        try {
            container.appendChild(node);
        }
        catch (e) { 
            console.log("ArtistryInActionSubNav.addSubItem e: ",e);  
        }
    }
    
});