brand.globalnav.Detail = Class.create(Widget, 
{
    // summary:
    //      Most detailed level in heirarchy: includes description, thumbnail & url      
    //templatePath: "/js/brand/globalnav/templates/Detail.html",
    templatePath: "jsTemplates.globalnav.Detail",
    //templateType: "detail",    

    //simpleDetailPath: "/js/brand/globalnav/templates/SimpleDetail.html",
    simpleDetailPath: "jsTemplates.globalnav.SimpleDetail",
    
    // parentId: String
    // PanelSubnav/ProductCategorySubnav widget parent
    parentId: null,
    
    // displayName: String
    displayName: "",
    
    // hdPath: String
    // header img src
    hdPath: "",

    // hdStates: Array
    // possible suffixes for header img src states   
    hdStates: ["off","on","sel"],
    
    // thumbPath: String
    // thumbnail img src
    thumbPath: "",

    // thumbRolloverPath: String (optional)
    // thumbnail rollover img src
    thumbRolloverPath: null,
    
    // description: String
    description: "",
    
    // url: String
    // template href value
    url: "",
    
    // isdefault: Boolean
    // flagged true if item is default item (i.e. product item corresponding w/ current spp)
    isdefault: false,
    
    // isInDefaultCategory: Boolean
    // flagged true if item is within default category
    isInDefaultCategory: false,

    // baseClass: String (optional)
    // supplemental css class, ex: panelnav_link_category   
    baseClass: "", 

    offImg: "off",
    
    timer: null,    
    timerDuration: 3,
    
    initialize: function($super, properties) { 
        this.setProperties(properties);
        //console.log("Detail.init "+this.id); 
        
        if (this.template) {
            var t = this.template;
            if (t.detail) {
                var type = t.detail.type;
                if (type) { this.templatePath = type; }
                var baseClass = t.detail.baseClass;
                if (baseClass) { this.baseClass = baseClass; }
                var hstates = t.detail.headerStates;
                if (hstates) { this.hdStates = hstates; }
            }
        }
          
        $super();
    },
    
    postCreate: function() { 
        //console.log("Detail.postCreate "+ this.id + " / " + $(this.id)); 
           
        // header image 
        var hdNode = $(this.id + "_hd");
        if (hdNode) this.hdImg = new brand.img(hdNode, this.hdStates);

        if (this.isInDefaultCategory) {         
            if (this.isdefault) { 
                this.setDefaultState();
            } else {
                this.offImg = "sel"; // exception for "dimmed" style: "sel" state used for off state of hdImg
                this.setDefaultCategoryState();
            }
        }
  
        // thumbnail rollover
        var thumbImg = $(this.id + "_thumb");
        if (this.thumbRolloverPath && thumbImg) {
            this.thumbImg = thumbImg;
            var preload = new Image();
            preload.src = this.thumbRolloverPath; 
        }
    },
        
    _onMouseOver: function(e) {
        if (this.isdefault) return;
        var event = e || window.event;
        if (this.timer) clearTimeout(this.timer);
        if (this.hdImg) this.hdImg.changeSrc("on");
        if (this.thumbImg) this.thumbImg.src = this.thumbRolloverPath;         
        this.domNode.addClassName("panelnav_link_on");
        Event.stop(event);
    },
    
    _onMouseOut: function(e) {
        if (this.isdefault) return;
        var event = e || window.event;
        Event.stop(event);
        var self = this;
        var out = function() {
            if (self.hdImg) self.hdImg.changeSrc(self.offImg);
            if (self.thumbImg) self.thumbImg.src = self.thumbPath;        
            self.domNode.removeClassName("panelnav_link_on");
        }
        
        // IE workaround for item bg flickering. cancels bubbling unless mouse is totally out of item
        if (generic.env.isIE) {
            this.timer = setTimeout(out, this.timerDuration);
        } else {
            out();
        }
    },
    
    _onClick: function(e) {
        //console.log("Detail._onClick "+this.domParent );  
        // workaround for ie: use location prop as back-up for href
        if (this.url && generic.env.isIE) {
            location.href = this.url;
        }
    },
    
    setDefaultState: function() {
        //console.log("Detail.setDefaultState "+this.id+"/"+$(this.id));
        if (this.hdImg) {
            // most sites use on state for rollover & spp "default" state vs. others which 
            // use distinct xxx_active.gif img
            var activeImg = "on";
            var hdStates = this.hdStates;
            hdStates.any(function(state) { 
                if (state === "active") {
                    activeImg = state;
                    return true;
                } 
            });
            this.hdImg.changeSrc(activeImg);
        }
        
        this.domNode.addClassName("panelnav_default");
        
        // if url matches current page, remove link
        var loc = window.location.pathname;
        if (loc.indexOf(this.url) > -1) { 
            $(this.id).removeAttribute("href");
            this._onClick = function() { };
            $(this.id).addClassName("unclickable");
        } 
    },
    
    setDefaultCategoryState: function() {
        // displays "dimmed" state for detail items in same category as default item
        if (this.hdImg) this.hdImg.changeSrc(this.offImg);
    },
    
    reset: function() {
       this.destroy();
    }
});
 
brand.globalnav.ProductCategoryDetail = Class.create( brand.globalnav.Detail,
{
    // summary:
    //      Category detail-level of heirarchy:
    //      Includes details of category item, but is not the final level in nav heirarchy.
    //      onClick event triggers display of category list (Accordion).
    //
    //      Receives id args for widget parent ProductSubNav (parentId) & DOM parent (containerId)
    //      Refers to parent class method(s) for talking back up the heirarchy chain
    //      Uses container for placement in DOM only
    //
    //      Receives id arg for cousin Accordion to pass to parent.openAccorion
    
    //templatePath: "/js/brand/globalnav/templates/ProductCategoryDetail.html",
    templatePath: "jsTemplates.globalnav.ProductCategoryDetail",
    
    // containerNode: DOM node
    // container for CategoryDetail item
    containerNode: null,
    
    // accordionId: String
    // Accordion widget id
    accordionId: null,
    
    initialize: function($super, properties) { 
        //console.log("Detail.ProductCategoryDetail.init");
        if (this.containerNode) {
            this.domParent = this.containerNode; 
        }  
        $super(properties);  
    }, 
    
    _onClick: function(e) {
        //console.log("ProductCategoryDetail._onClick: "+this.domParent ); 
        // hide category detail
        this.containerNode.style.display = "none";
        // show accordion
        $(this.parentId).widget.getAccordion(this.accordionId);
    }
    
});

brand.globalnav.CollectionCategoryDetail = Class.create( brand.globalnav.ProductCategoryDetail,  
{
    
    //templatePath: "/js/brand/globalnav/templates/CollectionCategoryDetail.html", 
    templatePath: "jsTemplates.globalnav.CollectionCategoryDetail",
        
    isContainer: true,

    startup: function($super, arguments) {
        this.containerNode = $(this.parentId);
        this.accordionId = this.id+"_accordion";
        $super(arguments);
        this.parent = $(this.parentId).widget;
    },
    
    _onClick: function(e) {
        //console.log("CollectionCategoryDetail._onClick: "+this.categoryDetailNode.id); 
        // hide category detail
        this.categoryDetailNode.style.display = "none";
        // show accordion
        this.parent.getAccordion(this.accordionId);
    },
    
    onChildClick: function(/* String */sectionId) {
        //this.parent.onChildClick();
    }
    
});

brand.globalnav.SearchProductDetail = Class.create(brand.globalnav.Detail, 
{ 
    //templatePath: "/js/brand/globalnav/templates/SearchProductDetail.html", 
    templatePath: "jsTemplates.globalnav.SearchProductDetail",
        
    hex: "",
    actionImg: null,
    
    initialize: function($super, arguments) {
        //console.log("brand.globalnav.SearchProductDetail init"); 
        $super(arguments); 
    },
    startup: function($super, arguments) {
        //console.log("brand.globalnav.SearchProductDetail.startup"); 
        var actionImgNode = $(this.id + "_actionimg");         
        if (actionImgNode) this.actionImg = new brand.img(actionImgNode, ["off","on"]);
    },
    
    _onMouseOver: function($super, e) {
        $super(e);
        if (this.actionImg) this.actionImg.changeSrc("on");
    },
    
    _onMouseOut: function($super, e) {
        $super(e);
        if (this.actionImg) this.actionImg.changeSrc("off");
    }
 
});


brand.globalnav.SearchQuickBuyDetail = Class.create(brand.globalnav.Detail, 
{
    
    //templatePath: "/js/brand/globalnav/templates/SearchQuickBuyDetail.html", 
    templatePath: "jsTemplates.globalnav.SearchQuickBuyDetail",
        
    isContainer: true,
    product: null,
    hex: "",
    skupath: "",
    cartConfirmMsg: null,
    shadedResult: false,
    shaded: false,

    initialize: function($super, arguments) {
        //console.log("brand.globalnav.SearchQuickBuyDetail.init");
        $super(arguments);
    },
    postCreate: function($super, arguments) {
        $super(arguments);
        this.shadedResult = (this.product.shade_result ? true : false),
        this.skupath = this.product.sku.path;
        this.shaded = (this.product.shaded ? true : false);  
    },
    
    startup: function($super, arguments) {
        //console.log("brand.globalnav.SearchQuickBuyDetail.startup "+this.shadenameNode + "/" + this.descriptionNode);
 
        if ( this.shadedResult ) {
            this.shadenameNode.removeClassName("hidden");
        } else {
            this.descriptionNode.removeClassName("hidden");
        }
        
        this._initCartAction();
    },
    
    _initCartAction: function() {
        var shoppable = (this.product.sku.shoppable === "1" ? true : false);
        var self = this;
                
        if ( shoppable ) {
            //console.log("brand.globalnav.SearchQuickBuyDetail._initCartAction shoppable");
            this.cartConfirmMsg = new brand.product.cartConfirm({
                id: "search_cart_confirm-" + this.skupath,
                is_shaded: this.shaded,
                prodName: this.displayName,
                sku: this.product.sku,
                nodeToReplace: this.cartConfirmNode
            });
            
            //console.log("brand.globalnav.SearchQuickBuyDetail._initCartAction shoppable");
            // add to cart button 
            var btnNode = $(this.id + "_btn_add");
            btnNode.value = this.skupath;
            var button = brand.product.addButton({
                addButtonNode: btnNode,
                callback: function(response) {
                    self.cartConfirmMsg.show({ response: response });
                }
            });
        
        } else {
            //console.log("brand.globalnav.SearchQuickBuyDetail._initCartAction !shoppable");
            var btn = $(this.id + "_btn_add");
            if (btn) {
                btn.style.display = "none";
            }
            this.inventoryStatusNode.innerHTML = this.product.sku.inventory_status_message;
            this.inventoryStatusNode.style.display = "block";
        }
    },
    
    reset: function() {
        if (this.cartConfirmMsg) {
            this.cartConfirmMsg.destroy();
        }
        this.destroy();
    }
     
});

 
brand.globalnav.DiscontinuedProductDetail = Class.create( 
    brand.globalnav.Detail,
{
    
    //templatePath: "/js/brand/globalnav/templates/DiscontinuedProductDetail.html", 
    templatePath: "jsTemplates.globalnav.DiscontinuedProductDetail",
        
    sku: null,
    hex: "",
    shadename: "",
    shadedResult: false,

    initialize: function($super, properties) { 
        $super(properties); //calls Detail.postMixInProperties  
        
        if ( this.shadedResult && this.sku ) {
            this.hex = this.sku.color[0];
            this.shadename = this.sku.shade_name;
            this.url += "&SKU_ID=" + this.sku.sku_id;           
        }    
    },   
    
    startup: function($super, arguments) {
        $super(arguments);
        
        if ( this.shadedResult ) {
            this.shadenameNode.removeClassName("hidden");
        }       
    } 
});