dojo.require("site.layout.SwatchContainer");
dojo.require("site.layout.ProductMessage");
dojo.require("site.productButton");
dojo.require("generic.flashx");
dojo.require("site.form.DropDownSelect");

var productDisplay = {

    is_shaded: false,

    // input field (as add to bag btn) that holds sku path 
    // value of currently selected color sku
    skuField: "", 
    
    // page/content type
    type: "mpp",
    
    // this can be used when products which contain the same product
    // id are going to appear on the same page. Setting to true,
    // will append the path of the first sku instead of a product id to nodes
    altNodeId: false,
    
    // this is used in the case that products have the same id.
    // the type used if this is true is the time to ensure that
    // ids are unique for swatches
    altType: false,
    
    init: function(args) {
        var products = args.data;
        var cartConfirmMsg;
        var self = this;
        this.altNodeId = (args.altNodeId ? args.altNodeId : false );
        this.altType = (args.altType ? args.altType : false );
        if (args.type) { this.type = args.type; }
        
        if (products) {
            dojo.forEach(products, function(prod, idx) {
                var is_shaded = (prod.shaded == 1 ? true : false);
                var nodeId = (self.altNodeId ? prod.skus[0].path : prod.product_id);

                // proceed if node exists in html (some spps have x-sell data but no x-sell content)
                if (dojo.byId(nodeId)) {
                
                    // init cart confirm
                    var created = false;
                    if (!dijit.byId("cart_confirm-" + nodeId)) {
                        created = true;
                        cartConfirmMsg = new site.layout.CartConfirm({
                            id: "cart_confirm-" + nodeId,
                            is_shaded: is_shaded,
                            prodName: prod.name
                        }, dojo.byId("cart_confirm_placeholder-" + nodeId));
                    }
                    
                    var msgProps;
                    if (is_shaded && args.shadedMessageProps) {
                        msgProps = args.shadedMessageProps;                    
                    } else if (args.messageProps) {
                        msgProps = args.messageProps;                    
                    }
                          
                    if (is_shaded && created) {
                        // set up swatches
                        var type = (self.altType ? (new Date()).getTime() : self.type);
                        self.initSwatch(prod, cartConfirmMsg, type, msgProps);
                    } else {
                        // non-shaded: 1st sku is default add-to-bag button value
                        self.initButton(prod, cartConfirmMsg, msgProps);
                    }
                
                }
            }); // end forEach products
        }
    },
    
    initSwatch: function(prod, cartConfirmMsg, type, msgProps) {
        var nodeId = (this.altNodeId ? prod.skus[0].path : prod.product_id);
        var smooshImgLg = prod.skus[0].smoosh;
        var skuFieldId = "prod_sku_cart_add-" + nodeId;        
        
        // init quick buy popover
        var cartAddMsg = this.initCartPopover(prod, nodeId, {
            is_shaded: true,
            skuFieldId: skuFieldId,
            smooshPath: smooshImgLg.replace(/168x168/g, "56x56"),
            smooshId: "smooshImg_cart_add-" + nodeId,
            cartConfirm: cartConfirmMsg             
        });
        
        // mixin alternate properties for text values, favorites remove, etc...
        if (msgProps) {
            dojo.mixin(cartAddMsg, msgProps);
        }
        
        // sku field is in CartAdd template, so now it's available
        var skuField = dojo.byId(skuFieldId);
        
        // init swatch color squares
        var swatch = new site.layout.SwatchContainer({
            product: prod,
            skuField: skuField,
            productType: type,
            
            // on swatch select:
            onSelectCallback: function(selectedChild) {
                // quick buy
                cartAddMsg.sku = selectedChild.sku;
                cartAddMsg.show();
                // tell CartConfirm which sku has been selected
                cartConfirmMsg.sku = selectedChild.sku;
            }
            
        }, dojo.byId("swatch_colors_placeholder-" + nodeId)); 
    },
    
    initButton: function(prod, cartConfirmMsg, msgProps) {  
        var nodeId = (this.altNodeId ? prod.skus[0].path : prod.product_id);        
        var skuFieldId = "prod_sku-" + nodeId;
        var skuField = dojo.byId(skuFieldId);
        
        // if shoppable, init add button
        if ( skuField ) {        
            cartConfirmMsg.sku = prod.skus[0];
            skuField.value = prod.skus[0].path;
            
            // note: shouldn't be needed for non-shaded prod:
            /*
            var cartAddMsg = this.initCartPopover(prod, nodeId, {
                skuFieldId: skuFieldId,
                cartConfirm: cartConfirmMsg             
            }); 
            */
            var cartAddBtn = new site.productButton({
                node: skuField,
                callback: function(resp) {
                    cartConfirmMsg.show(resp);
                }
            });
        
    
            // mixin alternate properties for text values, favorites remove, etc...
            if (msgProps) {
                cartConfirmMsg.setDisplayProperties(msgProps.confirm);
            }
        }
        
        // handle remove button for favorites
        if (this.type === "favorites") {
            var removeNode = dojo.byId("btn_favorites_remove-" + nodeId);
            if (removeNode) {
                var removeBtn = new site.productButton({
                    node: removeNode,
                    valueField: removeNode,
                    cartType: "favorites",
                    cartAction: "remove",
                    callback: function(resp) {
                        if (msgProps.callbackRemoveButton) {
                            msgProps.callbackRemoveButton(resp);
                        }
                    }
                }); 
            }
        }
    },

    initCartPopover: function(product, nodeId, args) {
        var widget = site.layout.CartAdd;
        var popArgs = {
            id: "cart_add-" + nodeId,
            is_shaded: false,
            prodName: product.name,
            price: product.price    
        }
        dojo.mixin(popArgs, args);
        
        if (this.type === "favorites") {
            widget = site.layout.CartAddFromFavorites;
            popArgs.isRemovable = true;
        }
        var cartAddMsg = new widget(popArgs, dojo.byId("cart_add_placeholder-" + nodeId));
        
        return cartAddMsg;
    },
    
    sppInventoryStatus: function(args) {
        var inv_stat = args.sku.inventory_status;
        var inv_stat_msg = args.sku.inventory_status_message;
        var prodbtn = dojo.byId("add_to_bag");
        var prodbtn_top = dojo.byId("add_to_bag_top_container");
        if (args.shaded) {
            var statusnode = dojo.byId("inventory_status");
        } else {
            var statusnode = dojo.byId("inventory_btn_message");
        }
        
        if ( inv_stat == 3 || inv_stat == 7 ) {
            //suppress add to bag
            prodbtn.style.display = "none";
            if (prodbtn_top) {
                prodbtn_top.style.visibility = "hidden";
            }
            statusnode.innerHTML = inv_stat_msg;
        
        } else if ( inv_stat == 2 && !args.shaded ) {
            statusnode.innerHTML = inv_stat_msg;
            prodbtn.style.display = "";
            if (prodbtn_top) {
                prodbtn_top.style.visibility = "";
            }
        
        } else {
            if ( args.shaded ) {
                statusnode.innerHTML = (inv_stat_msg ? inv_stat_msg : "");
            } else {
                statusnode.innerHTML = "";
            }
            
            prodbtn.style.display = "";
            if (prodbtn_top) {
                prodbtn_top.style.visibility = "";
            }
            
        }
        
        if (inv_stat_msg.length > 1) {
            statusnode.style.display = "block";
        } else {
            statusnode.style.display = "none";
        }
    }
};


    // SPP functions

// swatch display for color grid & name list
swatchSet = {
    init: function(args) {
        if (!args.node) { return; }
        var swatchContainer;
        var swatchArgs = args.swatchArgs;
        var hexField = args.pageArgs.hexField;
        var product = swatchArgs.product;
        var skuField = swatchArgs.skuField;
        var filters = {};
        var cartConfirm = args.pageArgs.cartConfirm;
        swatchArgs.isSingleSku = args.pageArgs.isSingleSku;
        var hasPhotosBySku = false;
    
        if (swatchArgs.isSingleSku) {
            // for now the only prods that display multi-colored sets of swatches also only display 1 sku per page
            swatchContainer = new site.layout.SwatchContainer(swatchArgs, args.node);
            skuField.value = product.skus[0].path;
            args.pageArgs.favField.value = skuField.value;
            cartConfirm.sku = product.skus[0];               
        } else {
        
            // store filters
            if (swatchArgs.shadedType !== "duo") {
                // by finish
                this.finishFilters = this.getFinishFilters(product, "color");
                this.filters = this.finishFilters.filters;
                // bestsellers
                var bestsellers = this.getBestsellersFilters(product);
                if (bestsellers) {
                    this.filters.bestsellers = bestsellers;
                }

                swatchArgs.filters = this.filters;
            }
    
            // set up main image swapping by sku
            if (product.skus[0].sku_special_packaging_image) {
                hasPhotosBySku = photoBySku.init(product.skus);
            }
            
            // on swatch select
            swatchArgs.onSelectCallback = function(selectedChild) {
                // tell CartConfirm which sku has been selected
                cartConfirm.sku = selectedChild.sku;
                // tell color play button which hex has been selected
                if (hexField) {
                    hexField.value = selectedChild.asHex;
                }
                // tell name menu which swatch has been selected
                swatchMenus.updateNameMenu(selectedChild.idx);  
                
                // swap main Image
                if (hasPhotosBySku) {
                    photoBySku.onSwatchSelect(selectedChild.idx);
                }
            }
            swatchContainer = new site.layout.SwatchContainer(swatchArgs, args.node);
        }
                        
        return swatchContainer;
        
    },
    
    getFinishFilters: function(product, sortType) {
        var filters = {};
        var labels = {};
        var sortedSkus = product.sorters[sortType];
        for (var i=0; i<product.skus.length; i++) { 
            var num = sortedSkus[i];
            var finish = label = product.skus[num].finish;
            if (!finish) { continue; }
            finish = finish.replace(/ /, "");
            finish = finish.toLowerCase();
            labels[finish] = label;
            if (!filters[finish]) {
                filters[finish] = [num.toString()];
            } else {
                filters[finish].push(num.toString());
            }
        }
        return { filters: filters, labels: labels};             
    },
    
    getBestsellersFilters: function(product) {
        if (product.filters) {
            var bestsellers = product.filters.bestsellers;
        } else {
            return false;
        }
        if (!bestsellers || !bestsellers.length > 0) {
            return false;
        }
        
        var filters = [];
        for (var i=0; i<bestsellers.length; i++) { 
            var num = bestsellers[i];
            filters.push(num.toString());
        }
        return filters;             
    }
    
}


// check for duos, trios quads, etc...
function getShadeType(args) {
    var type = "solo";
    var ismulti = false;
    var sku = args.product.skus[0];
    
    // check properties in page data
    var pdtype = args.product.product_multicolor_type;
    if (!pdtype && sku.sku_multicolor_type) {
        pdtype = sku.sku_multicolor_type;
    }

    // finally, check for multiple hexes
    if (pdtype && (sku.color.length >= args.multicolor_min)) {
        type = pdtype;
        ismulti = true;
    }
      
    return { type: type, ismulti: ismulti };
}
    

// sorting/filtering drop-downs
var swatchMenus = {

    _currentFilter: "all",
    _settingCurrentFilter: false,
    
    init: function(args) {
        var swatchContainer = args.swatchContainer;
        this.finishFilterMenu = this._initFinishFiltering("menu_filter_by", swatchContainer);         
        this.swatchNameMenu = this._initNameMenu("menu_swatches_by_name", swatchContainer, args.product);
        this.hasBestsellersMenu = this._initBestsellersFiltering("btn_bestsellers", "btn_all_shades", swatchContainer, args.product);
        this.filters = swatchSet.filters;
        
        // load with first sku selected
        var firstSel = (swatchContainer.selectedChildWidget ? swatchContainer.selectedChildWidget.idx : null);
        if (firstSel) {
            this.updateNameMenu(firstSel);
        }
    },

    _initNameMenu: function(menuid, swatchContainer, product) {
        // set up callback for sorting menu
        var menu = dijit.byId(menuid);
        if (!menu) { return false; }
        var self = this;        
        var options = this._getNames(product);     
        dojo.forEach(options, function(opt, idx) {
            menu.addOption(opt.num, opt.label);
        });
        
        menu.onChangeCallback = function() {        
            var value = this.getValue();
            if (typeof(value) === "undefined") { return; }
            var swatch = dijit.byId("swatch_" + product.skus[value].sku_id);
            if (!swatch || swatchContainer.selectedChildWidget == swatch) { return; }
            swatchContainer.setSwatch(swatch);
            
            // if swatch seleted is not in current filter, set filter back to "all"
            var filter = self._currentFilter;        
            if (filter !== "all") {
                var hasSwatchInFilter = dojo.some(self.filters[filter], function(swatchIdx) { 
                    return (swatchIdx === value);
                });
                
                // reset filter display state to "all"
                if (!hasSwatchInFilter) {
                    self._setCurrentFilter("all", "name", swatchContainer);
                }
            }
        }
        return menu;
    },
        
    _initFinishFiltering: function(menuid, swatchContainer) {
        // populate filtering menu
        var menu = dijit.byId(menuid);
        if (!menu || !swatchSet.finishFilters) {
            if (menu) menu.domNode.style.display = "none";
            return false;
        }
        var self = this;
        var labels = swatchSet.finishFilters.labels;
        var count = 0;
        for (var filter in swatchSet.finishFilters.filters) {
            menu.addOption(filter, labels[filter]);
            count++;
        }
        
        // hide menu if no prod has no finishes
        if (count == 0) {
            menu.domNode.style.display = "none";
            return;
        }
        
        // set up callback
        menu.onChangeCallback = function() {
            var value = this.getValue();
            if (value !== self._currentFilter && !self._settingCurrentFilter) {
                self._setCurrentFilter(value, "finishes", swatchContainer);
                swatchContainer.processData("filter", value);
            }
        }
        return menu;
    },

    _initBestsellersFiltering: function(btnbestsellersid, btnallid, swatchContainer, product) {
        var btnbestsellers = this.btnbestsellers = dojo.byId(btnbestsellersid);
        var btnbestsellersall = this.btnbestsellersall = dojo.byId(btnallid);
        if (!btnbestsellers || !btnbestsellersall) { return false; }
        
        // show btns if there are bestsellers to show
        if (product.filters && product.filters.bestsellers && product.filters.bestsellers.length > 0) {
            var n = dojo.byId("bestsellers_toggle");
            if (n) {
                n.style.display = "block";
            }
        }
        
        var self = this;
                
        function _onClickBestsellers() {
            self._toggleBestsellers("bestsellers", swatchContainer);
        }
        function _onClickBestsellersAll() {
            self._toggleBestsellers("all", swatchContainer);
        }
        dojo.connect(btnbestsellers, "onclick", _onClickBestsellers);
        dojo.connect(btnbestsellersall, "onclick", _onClickBestsellersAll);
        
        return true;
    },

    _toggleBestsellers: function(value, swatchContainer) {
        if (this._currentFilter !== value) {
            swatchContainer.processData("filter", value);
        }
        if (!this._settingCurrentFilter) {
            this._setCurrentFilter(value, "bestsellers", swatchContainer);
        }
        this._toggleBestsellersBtn(value);
    },
 
     _toggleBestsellersBtn: function(value) {
        var btnstate = (value === "bestsellers" ? true : false);
        var btnallstate = (value === "all" ? true : false);
        dojo.toggleClass(this.btnbestsellers, "btn_bestsellers_selected", btnstate);
        dojo.toggleClass(this.btnbestsellersall, "btn_bestsellers_selected", btnallstate);
    },
    
    updateNameMenu: function(idx) {
        if (this.swatchNameMenu) {
            this.swatchNameMenu.setAttribute("value", idx);
        }
    },
    
    _getNames: function(product) {
        var names = [];
        var sortedSkus = product.sorters.names;
        for (var i=0; i<product.skus.length; i++) {
            var name = {};
            var num = sortedSkus[i];
            name.num = num.toString();
            name.label = product.skus[num].shade_name;
            names[i] = name;
        }
        return names;             
    },

    _setCurrentFilter: function(value, type, swatchContainer) {
        var prev = this._currentFilter;
        this._currentFilter = value;
                
        if (prev === value || this._settingCurrentFilter) { return; }
        this._settingCurrentFilter = true;
        
        // name menu selection is forcing a re-display of all swatches
        if (value === "all" && type === "name") {
            swatchContainer.processData("filter", "all");
        }
        
        if (value !== "bestsellers") {
            // reset bestsellers btns
            if (this.hasBestsellersMenu) {
                // since name or filter menu is taking care of what group of swatches should display, all we have to do is reset bestsellers buttons 
                this._toggleBestsellersBtn("all");
            }             
        }
        
        if (type !== "finishes") {
            this.finishFilterMenu.setAttribute("value", "all");
        }
        
        this._settingCurrentFilter = false;
        
    }
    
}

// color play link
var colorPlayButton = {        
    url: "/flash/color_play/index.tmpl",
    param: "?colorplaysample=",
    
    init: function(field) {
        if (!field) {
            return false;
        }
        this.field = field;
        dojo.connect(field, "onclick", this, "_onClick");
    },
    
    _onClick: function(e) {
        var hex;
        hex = this.field.value.split("#")[1];
        hex = "0x" + hex;
        location.href = this.url + this.param + hex;
    }
}

// main image rollover
var photoRollover = {
    hasRollover: true,
    init: function(img, altImg) {
        var node = dojo.byId("prod_image_rollover");
        if (!img || !altImg || !node) {
            this.hasRollover = false;
            return false;
        }
        
        this.img = img;
        this.altImg = altImg;
        var pl = new Image();
        pl.src = altImg; 
        dojo.connect(node, "onmouseover", this, "over");
        dojo.connect(node, "onmouseout", this, "out");
    },
    
    over: function(e) {
        e.currentTarget.src = this.altImg;
    },
    
    out: function(e) {
        e.currentTarget.src = this.img;
    }
}

// main image swap on shade selection
var photoBySku = {
    init: function(skus) {
        this.node = dojo.byId("prod_image_rollover");
        if (!this.node) {
            return false;
        }
        var imgPaths = [];
        var pl = new Image();
        
        dojo.forEach(skus, function(sku, idx) {
            var img = sku.sku_special_packaging_image;
            if (img) {
                imgPaths[idx] = img;
                pl.src = sku.sku_special_packaging_image;
            }
        });
        
        this.imgPaths = imgPaths;
        
        return true;
    },
    
    onSwatchSelect: function(swatchIdx) {
        if (!swatchIdx) { return; }
        var img = this.imgPaths[swatchIdx];
        if (!img) { return; }
        this.node.src = img;
        
        // if photo rollover, set off state to currently selected "special" image
        var pr = dojo.global.photoRollover;
        if (pr.hasRollover) {
            pr.img = img;
        }
    }
}

/* JS used to hook up product popovers on content pages (i.e. news, artists) */
var contentProducts = {

    cartConfirmProps: {},
    
    init: function(args) {
        var self = this;
        var is_shaded = false;
        var containerId = (args.containerId ? args.containerId : "main_content");
        this.cartConfirmProps = (args.cartConfirmProps ? args.cartConfirmProps : this.cartConfirmProps);
        if (args.positionPopup) {
            this.positionPopup = args.positionPopup;
        }
        
        dojo.forEach( args.products, function( product ) {
            var sku = product.skus[0];
            var hasLinkNodes = false;

            // check for link nodes as single instances (element  id) or multiple instances (css class)
            var linkNodes = new Array();
            linkNodes = dojo.query("."+sku.path, containerId);
            if (linkNodes.length > 0) {
                hasLinkNodes = true;
            } else {
                linkNodes[0] = dojo.byId(product.skus[0].path);
                if (linkNodes[0]) {
                    hasLinkNodes = true;
                }
            }
            
            if (hasLinkNodes) {
                self.initPopover(product, sku, linkNodes);
            }
            
        });         
    },
    
    initPopover: function(product, sku, linkNodes) {
        var self = this;
        if ((sku.shade_name.length > 0) && (sku.color[0].length > 2)) {
            is_shaded = true;
        } else {
            is_shaded = false;
        }
        
        this.cartConfirmProps.type = "order";
        
        var cartConfirmMsg = new site.layout.CartConfirm({
            id: "cart_confirm-" + sku.path,
            is_shaded: false,
            prodName: product.name
        }, dojo.byId("cart_confirm_placeholder-" + sku.path));
        
        cartConfirmMsg.setDisplayProperties(this.cartConfirmProps);
        
        // init quick buy popover
        var cartAddArgs = {
            id: "cart_add-"+sku.path,
            is_shaded: is_shaded,
            prodName: product.name,
            skuFieldId: "prod_sku_cart_add-" + sku.path,
            price: product.price,
            cartConfirm: cartConfirmMsg,
            sku: sku                    
        }
        
        if (is_shaded) {
            cartAddArgs.smooshId = "smooshImg_cart_add-" + sku.path // pass smooshImg id to set template to use swatch smoosh instead of product thumb
        } else {
            cartAddArgs.smooshPath = product.thumb;
        }
        
        var cartAddMsg = new site.layout.CartAdd(cartAddArgs, dojo.byId("cart_add_placeholder-" + sku.path));
        
        dojo.byId("prod_sku_cart_add-" + sku.path).value = sku.path; 
        
        var show = function(evt) {
            self.show(evt, cartAddMsg, cartConfirmMsg);
        }
        
        // connect each link node to popover action
        dojo.forEach( linkNodes, function( node ) {
            dojo.connect( node, "onclick", show );  
        });
    },
    
    show: function(evt, cartAddMsg, cartConfirmMsg) {
        if (this.positionPopup) {
            this.positionPopup(evt, cartAddMsg, cartConfirmMsg);
        }
        cartAddMsg.show();            
    }
}