var generic = generic || {};
generic.env = generic.env || {};

var bb = bb || {};
bb.productView = bb.productView || {}
bb.rb = bb.rb || {};

bb.productView.single = function (args) {
    var productData = args.productData;
    var skuMenuSelectNode;
    var skuMenuFields = [ ];
    
    return {
        getDescriptionContainerNode : function() {
            return this.descriptionContainerNode;
        },

        render : function(args) {
            productData.urlDomain = generic.env.domain;
            var self = this;

            if (Object.isElement(args.descriptionContainerNode)) {
                this.descriptionContainerNode = args.descriptionContainerNode;
                if (args.isQuickshop) {
                    productData.transformedDescription = productData.SHORT_DESCRIPTION;
                }
                else {
                    productData.transformedDescription = productData.DESCRIPTION;
                }
                generic.templatefactory.get({path: '/templates/products/single-view-description.tmpl'}).evaluateCallback({
                    object: productData,
                    callback: function(html) {
                        args.descriptionContainerNode.insert(html);

                        var purchaseRowNode = $$('.purchase-row')[0];
                        var isSample = productData.isSampleProduct;
                        if (isSample) {
                            purchaseRowNode.setStyle({'visibility':'hidden'});
                        }

                        var productInfoContainerNode = args.descriptionContainerNode.select(".product-info")[0];

                        // Note: breadcrumb not needed in QV
                        if (!args.isQuickshop) {
                            self.renderBreadcrumb({
                                containerNode: productInfoContainerNode,
                                productData: productData
                            });
                        }

                        var pickerContainerNode = args.descriptionContainerNode.select("div.color-swatch")[0];
                        var shadeMenuContainerNode = args.descriptionContainerNode.select("div.shade-menu-container")[0];

                        if (pickerContainerNode) {
                            if (productData.shaded && !productData.palette) {
                                self.initShadePicker({
                                    productData: productData,
                                    pickerContainerNode: pickerContainerNode,
                                    shadeMenuContainerNode: shadeMenuContainerNode
                                });
                            }
                            else {
                                pickerContainerNode.style.display="none";
                            }
                        }

                        var menuContainerNode = args.descriptionContainerNode.select(".size-menu-container")[0];
                        self.initSizeMenu({
                            productData: productData,
                            menuContainerNode: menuContainerNode
                        });

                        var addButtonNode = args.descriptionContainerNode.select("a.btn-add-to-bag")[0];
                        var progressNode = args.descriptionContainerNode.select("span.add-progress")[0];
                        if (addButtonNode) {
                            self.initAddButton({
                                productData: productData,
                                addButtonNode: addButtonNode,
                                progressNode: progressNode,
                                isIncrementMode: false,
                                descriptionContainerNode: args.descriptionContainerNode,
                                isQuickshop: args.isQuickshop
                            });
                        }

                        // qty menu
                        var qtyMenuNode = args.descriptionContainerNode.select("select.quantity")[0];
                        if (qtyMenuNode) {
                            /*
                            self.buildQuantityMenu({
                                selectNode: qtyMenuNode
                            });
                            */
                            self.initQuantityMenu({
                                selectNode: qtyMenuNode
                            });
                            args.descriptionContainerNode.observe("select:sku", function(e) {
                                var skuData = e.memo;
                                // no op
                            });

                            args.descriptionContainerNode.observe("quantity:select", function(e) {
                                var qtyString = e.memo;
                                // no op
                            });
                        }

                        bb.page.replaceSelects();

                        var calloutContainerNode = args.descriptionContainerNode.select(".callout")[0];
                        if (calloutContainerNode) {
                            bb.productView.setCallout(calloutContainerNode, productData);
                        }

                        bb.page.initOverlayLinks();

                        //$$(".loading-container")[0].style.display = "none";
                    }
                });
            }
        }, // end render

        renderBreadcrumb : function(args) {
            var productData = args.productData;
            var containerNode = args.containerNode;
            console.log( productData + ' ' + containerNode + ' ' + productData.category );

            if (productData == null || productData.category == null || containerNode == null) {
                return;
            }

            var categoryData = productData.category;
            var mppLink = new Element("a", {"href": "#", "class":"return"});
            mppLink.setStyle({"display":"block", "marginBottom":"10px"});
            var spName = '';
            if (categoryData.breadCrumbUrl) {
                console.log( "has breadCrumbUrl: " + categoryData.breadCrumbUrl );
                mppLink.update("Return to " + categoryData.CATEGORY_NAME);
                mppLink.href = categoryData.breadCrumbUrl;
                mppLink.id = 'cm_breadcrumb';
                var catDisplayName = categoryData.CATEGORY_NAME;
                spName = catDisplayName.replace(/\s+/g, '');
            }
            containerNode.insert({"top": mppLink});
            // coremetrics update?
        },

        renderPrice : function(args) {
            // fetch HTML template            
            generic.templatefactory.get({path: '/templates/products/single-view-price.tmpl'}).evaluateCallback({
                object: args.productData,
                callback: function(html) {
                    args.priceContainerNode.update(html);
                }
            });            
        },

        renderSkuMenu : function(args) {
            var self = this;
            // Inner function that chooses which fields to display in menu.
            // Potential field and lable names are listed in the private skuMenuFields variable.
            var findMenuFields = function(skus) {
                var fields = skuMenuFields || [];
                var countUnique = function(field) {
                    return skus.pluck(field).uniq().length;
                }
                var fieldsForMenu = [];
                for (var i=0, len=fields.length; i<len; i++) {
                    if (countUnique(fields[i].field) > 1) {
                        fieldsForMenu.push(fields[i]);
                    }
                }
                return fieldsForMenu;
            };
            var selectSku = function(skuData) {
                var self = this;
                var optsArray = $A(skuMenuSelectNode.options);
                var opt = optsArray.detect(function(opt, idx) {
                    if (opt.value == skuData.SKU_BASE_ID) {
                        return opt;
                    }
                });
                skuMenuSelectNode.selectedIndex = optsArray.indexOf(opt);
                // selectMe(this.htmlSelectID, optsArray.indexOf(opt), selects.indexOf(slct), false);
            };
            
            // Inner function that is called after HTML from template is inserted into DOM.
            // Creates OPTION nodes for SELECT menu and wires up event handlers.
            var initMenu = function (initArgs) {
                skuMenuSelectNode = initArgs.priceContainerNode.select("select.sku-menu")[0];
                if (!skuMenuSelectNode) {
                    return;
                }
                var skus = initArgs.skuData;
                // check for which unique value(s) will be displayed in menu
                var fieldObjArray = findMenuFields(skus);
                if (Object.isArray(fieldObjArray) && fieldObjArray.length > 0) {
                    // include price in the text of the select options if there
                    // is more than one unique price in the Array of SKUs
                    var includePrice = false;
                    if (skus.pluck("PRICE").uniq().length > 1) {
                        includePrice = true;
                    }
                    // pull out names of data fields
                    var selectFields = [];
                    for (var i=0; i<fieldObjArray.length; i++) {
                        selectFields.push(fieldObjArray[i].field);
                    }
                    var selectLabel = fieldObjArray[0].label;
                    
                }
                // iterate through SKUs, building HTML OPTION nodes
                skus.each(function(sku, i) {
                    var fieldValues = [];
                    // allow for multiple fields in one menu item (e.g., "[shade name] - [size]")
                    for (var i=0; i<selectFields.length; i++) {
                        var fieldName = selectFields[i];
                        var optionLabel;
                        optionLabel = sku[fieldName];
                        fieldValues.push( optionLabel );
                    }
                    var txt = fieldValues.join(" - ");
                    if (includePrice) {
                        txt += ' ' + generic.productData.getPriceDisplay(sku, ' ');
                    }
                    // build OPTION tag & insert into menu
                    var opt = new Element('option', {value: sku.SKU_BASE_ID}).update(txt);
                    skuMenuSelectNode.insert(opt);
                });
                // set up event handler for menu change.
                skuMenuSelectNode.observe('change', function(evt) {
                    var skuBaseId = $F(evt.target);
                    if (skuBaseId && skuBaseId.length > 0) {
                        var sku = skus.detect(function(sku) {
                            return sku.SKU_BASE_ID == skuBaseId;
                        });
                    }
                    evt.target.fire("select:sku", sku);
                    console.log("select:sku", sku);
                });
                // set up event handler for SKU selection elsewhere (e.g., from Shade Picker).
                document.observe("select:sku", function(evt) {
                    if (evt.target !== skuMenuSelectNode) {
                        selectSku(evt.memo);
                    }
                });
                
            }; // end initMenu
            // fetch HTML template            
            generic.templatefactory.get({path: '/templates/products/single-view-price-menu.tmpl'}).evaluateCallback({
                object: args.productData,
                callback: function(html) {
                    args.priceContainerNode.update(html);
                    initMenu({
                        skuData: args.productData.skus,
                        priceContainerNode: args.priceContainerNode
                    });
                }
            });
            
        }, // end renderSkuMenu
        /**
         */
        initAddButton: function(args) {
            // set default type to 'cart'
            var options = Object.extend({
                itemType: 'cart'
            }, args);

            //BB UK only allows Shoppable, OOS, Coming Soon and Sold Out to be displayed.
            var skus = options.productData.skus.select( function(sku) {
                return (bb.productView.isDoNotDisplay(sku)) ? 0 : 1;
            });                          

            //var skus = args.productData.skus;
            if (generic.productData.validateSkusArray(skus)) {
                var self = this;
                var btn = bb.productView.addButton({
                    addButtonNode: options.addButtonNode,
                    progressNode: options.progressNode, 
                    descriptionContainerNode: options.descriptionContainerNode,
                    skuData: skus[0],
                    itemType: options.itemType,
                    isIncrementMode: false,
                    qtyToAdd: 1,
                    isQuickshop: options.isQuickshop
                });
                if (btn.getItemType() === "cart") {
                    btn.setShoppable();
                }

                // Listen for "select:sku" event. If Prod ID from this event matches
                // Prod ID for this button, change the SKU ID associated with the button.
                document.observe("select:sku", function(evt) {
                    var skuData = evt.memo;
                    if (skuData.PRODUCT_ID == args.productData.PRODUCT_ID) {
                        btn.setSkuData(skuData);
                        if (btn.getItemType() === "cart") {
                            btn.setShoppable();
                        }
                    }
                });

                document.observe("quantity:select", function(evt) {
                    var qtyString = evt.memo;
                    btn.setQty( qtyString );
                });
            }            
        }, // end initAddButton

        initShadePicker: function(pickerArgs) {
            var shadePicker = bb.productView.shadePicker({
                productData: pickerArgs.productData,
                pickerContainerNode: pickerArgs.pickerContainerNode,
                shadeMenuContainerNode: pickerArgs.shadeMenuContainerNode,
                singleProductView: this
            });

        },

        initSizeMenu: function(args) {
            // expect menuContainerNode and productData as arguments
            if (!args.menuContainerNode) {
                return;
            }
    
            if (!generic.productData.validateSkusArray(args.productData.skus)) {
                return;
            }
            
            var findMenuField = function(skus) {
                var fields = [
                    { label: 'Concern', field: 'STRENGTH' },
                    { label: 'Size', field: 'PRODUCT_SIZE'}
                ];
                var countUnique = function(field) {
                    var vals = skus.pluck(field);
                    vals.each(function(val, idx) {
                        if (val) {
                            val = val.replace(/\s/g, "");
                            val = val.toLowerCase();
                            vals[idx] = val;
                        }
                    });
                    // filter out null
                    vals = vals.findAll(function(val){
                        return !(val === null || typeof(val) === "undefined");
                    });

                    // hack for shaded products around bad data
                    // return only one size for shaded products
                    if (args.productData.shaded && (vals.uniq().length > 0)) {
                        return 1;
                    }
                    // end hack for shaded products around bad data
                    return vals.uniq().length;
                }
                for (var i=0, len=fields.length; i<len; i++) {
                    if (countUnique(fields[i].field) > 1) {
                        return fields[i];
                    }
                }
                return null;
            };
            
            var fieldObj = findMenuField(args.productData.skus);
            if (fieldObj) {
                var selectNode = new Element("select", {"class":"replaceselect"});
                selectNode.className += " up";
                args.menuContainerNode.insert(selectNode);
                args.productData.skus.each(function(sku, i) {
                    var txt = sku[fieldObj.field];
                    txt += ' ' + sku.formattedPrice;
                    var optionNode = new Element('option', {value: sku.SKU_ID});
                    optionNode.update(txt);
                    selectNode.insert(optionNode);
                });
                selectNode.observe("change", function(e) {
                    var selectedSkuId = e.target.value;
                    var selectedSkuData = args.productData.find(function(skuData){
                        return skuData.SKU_ID === selectedSkuId;
                    });
                    selectedNode.fire("select:sku", selectedSkuData);
                });
            }
            else {
                var skuData = args.productData.skus[0];
                var spanNode = new Element("div", {"class":"size-data"});
                var txt = "";
                if (skuData.PRODUCT_SIZE) {
                    txt = skuData.PRODUCT_SIZE + " ";
                }
                var priceNode = new Element("span", {"class":"price"});
                priceNode.update(skuData.formattedTaxedPrice);
                spanNode.update(txt);
                spanNode.insert(priceNode);
                args.menuContainerNode.insert(spanNode);
            }
        },

        // would be nice if this could be aware of current options in the menu
        buildQuantityMenu: function(args) {
            args.selectNode.clear();
            for (x=1; x<=6; x++) {
                var optionNode = new Element('option', {value: x});
                if (x == 1) {
                    optionNode.writeAttribute({selected:'selected'});
                }
                optionNode.insert({'top':x});
                args.selectNode.insert({'bottom':optionNode});
            }
        },

        initQuantityMenu: function(args) {
            if (!Object.isElement(args.selectNode)) {
                return;
            }
            args.selectNode.className += " up";
            args.selectNode.observe("change", function(e){
                args.selectNode.fire("quantity:select", e.target.value);
            });
        }
                        
    };
};


/**
	* This method is used to display the quickshop popovers for the product pages.
	* generic.templatefactory is first called to grab the quickshop template and
	* then on callback, generic.overlay.launch is used to set up the overlay 
	* with the html that is returned.
	* 'overlay-container' is the top level container for the quickshop.
	* bb.productView.single is used to set up view on callback.
	* @requires param{args} Individual product data object passed.
 	* @methodOf bb.productView
*/
bb.productView.quickshop = function(args) {

    var view = bb.productView.single({
        productData : args.productData        
    });
     //notify analytics.js of QV and productID
    document.fire("MPP:productQV",args.productData.PRODUCT_ID);
 
    generic.templatefactory.get({path: '/templates/products/quickshop.tmpl'}).evaluateCallback({
        callback: function(html) {

            var quickshopWrapperNode = new Element("div", {"class":"quickshop-wrapper popup"});
            $(document.body).insert(quickshopWrapperNode);
            quickshopWrapperNode.insert(html);

            bb.overlay.launchPopover({content: quickshopWrapperNode});

            // wire up close link
            var closeButtonNode = quickshopWrapperNode.select("a.close-link")[0];
            closeButtonNode.observe("click", function(closeClickEvent) {
                closeClickEvent.preventDefault();
                quickshopWrapperNode.remove();
                bb.overlay.hide();
            });
            quickshopWrapperNode.observe("cartButton:success", function(evt){
                bb.overlay.hide();
            });

            //var overlayContainerNode = $$('.overlay-container')[0];
            var overlayContainerNode = $$('.quickshop-wrapper')[0];
            var renderArgs = {};

            renderArgs.isQuickshop = true;
            var detailsContainerNode = overlayContainerNode.select("div.details")[0];
            if (detailsContainerNode) {
                renderArgs.descriptionContainerNode = detailsContainerNode;
            };

            view.render(renderArgs);

        }
    });
};

bb.productView.shadePicker = function(args) {
    var tableContainerNode;
    var shadeDetailContainerNode;

    var onState;
    var selectedSkuData;

    var singleProductView = args.singleProductView;
    var pickerContainerNode = args.pickerContainerNode;
    var shadeMenuContainerNode = args.shadeMenuContainerNode;

    var drawSwatch = function(cellNode, skuData) {
        var self = this;
        if (!skuData.HEX_VALUE_STRING || skuData.HEX_VALUE_STRING.length < 1) {
            return;
        }
        cellNode.skuBaseId = skuData.SKU_BASE_ID;

        var hexVals = skuData.HEX_VALUE_STRING.split(",");
        var defaultStyle = getSwatchBaseStyle(skuData, hexVals);
        var divNode = new Element("div");
        divNode.setStyle(Object.extend(defaultStyle, {
//            zIndex: 10 // need a z-index to make IE6 rollover state work
        }));

        var aNode = new Element("a");
        aNode.update(bb.page.getSwatchNode(hexVals[0]));
        cellNode.update(aNode);

        tableContainerNode.insert(cellNode);

        aNode.observe("mouseover", function(skuData, evt) {
            aNode.fire("swatch:mouseover", skuData);
            onState = skuData.SKU_BASE_ID;
        }.curry(skuData));

        aNode.observe("mouseout", function(skuData, evt) {
            aNode.fire("swatch:mouseout", skuData);
            onState = "";
        }.curry(skuData));

        aNode.observe("click", function(skuData, evt) {
            evt.preventDefault();
            if (tableContainerNode) {
                tableContainerNode.fire("select:sku", skuData);
            }
            selectTableSku(skuData);
        }.curry(skuData));
    };

    var getSwatchBaseStyle = function(skuData, hexVals) {
        // BB SkuData does not implement SMOOSH_PATH_STRING
        var smoosh_id = "smoosh";
        if (skuData.SMOOSH_DESIGN != null) {
            var smooshIDs = skuData.SMOOSH_DESIGN.split(",");
            smoosh_id = smooshIDs[0].strip();
        }
        var smooshPathString = "/images/products/smoosh/" + smoosh_id + ".png";

        var hexVal = hexVals[0];
        var defaultStyle = {
            backgroundColor: hexVal,
            width: "150px",
            height: "150px",
            marginBottom: "10px",
            marginLeft: "auto",
            marginRight: "auto",
            backgroundImage : "url(" + smooshPathString + ")"
        };
        if (/MSIE (\d+\.\d+)/.test(navigator.userAgent) && parseFloat(RegExp.$1) < 7) {
            defaultStyle.filter = "progid:dximagetransform.Microsoft.AlphaImageLoader(src='" + smooshPathString + "', sizingMethod='image')";
            defaultStyle.backgroundImage = "none";
        }
        return defaultStyle;
    };

    var nodeHash = {};
    var selectedTableNode = null;
    var shadeMenuSelectNode = null;

    var renderShadePickerTable = function(tableArgs) {
        var tableNode = tableArgs.tableContainerNode;
        var skus = tableArgs.productData.skus;

        var skusToDisplay = skus;
        var skuData = tableArgs.productData.skus[0];

        skus.each(function(skuData){
            var listItemNode = new Element("li");
            drawSwatch(listItemNode, skuData);
            nodeHash[skuData.SKU_BASE_ID] = listItemNode;
        });
        selectTableSku(skusToDisplay[0]);
    };

    var selectTableSku = function(skuData) {
        if (selectedTableNode) {
            selectedTableNode.select(".active-swatch")[0].remove();
        }
        selectedTableNode = nodeHash[skuData.SKU_BASE_ID];
        var onStateDiv = new Element("div", {"class":"active-swatch"});
        var onStateImg = new Element("img", {"src":"/images/products/swatch_on.gif", "width":"20px", "height":"20px"});
        onStateDiv.update(onStateImg);
        selectedTableNode.insert({"bottom":onStateDiv});
    };

    var renderShadeMenu = function(menuArgs) {
        var menuNode = menuArgs.shadeMenuContainerNode;
        var skus = menuArgs.productData.skus;

        var skusToDisplay = skus;
        var skuData = menuArgs.productData.skus[0];

        shadeMenuSelectNode = new Element("select", {"class":"replaceselect w-shades swatchmenu"});
        menuNode.insert(shadeMenuSelectNode);

        var isTos = false;
        skus.each(function(skuData){
            if (bb.productView.isDoNotDisplay(skuData)) return; 
            var optionNode = new Element("option");
            optionNode.value = skuData.SKU_BASE_ID;
            optionNode.className = "hex" + skuData.HEX_VALUE_STRING.split(",")[0];
            var displayName = "";
            if (bb.productView.isTos(skuData) || bb.productView.isSoldOut(skuData) || bb.productView.isComingSoon(skuData)) { 
                displayName = "*";
            }

            var shadeNames = skuData.SHADENAME.split(",");
            var shadeName = shadeNames[0].strip();
            shadeName = shadeName.stripTags();
            displayName += shadeName;
            optionNode.insert(displayName);
            shadeMenuSelectNode.insert(optionNode);
        });

        //bb.page.replaceSelects();

        shadeMenuSelectNode.observe("change", function(evt){
            var selectedSkuBaseID = evt.target.value;
            var selectedSkuData = skus.detect(function(skuData){
                return skuData.SKU_BASE_ID == selectedSkuBaseID;
            });
            menuNode.fire("select:sku", selectedSkuData);
        });                
    };

    var selectMenuSku = function(skuData) {
        var skuBaseID = skuData.SKU_BASE_ID;

        var self = this;
        var optsArray = $A(shadeMenuSelectNode.options);
        var opt = optsArray.detect(function(opt, idx) {
            if (opt.value == skuData.SKU_BASE_ID) {
                return opt;
            }
        });
        shadeMenuSelectNode.selectedIndex = optsArray.indexOf(opt);
        bb.cforms.resetSelect('w-shades');
    };

    var initDetailView = function(detailArgs) {
        var containerNode = detailArgs.shadeDetailContainerNode;
        var skuData = detailArgs.productData.skus[0];
        selectDetailSku(skuData);
    };

    var selectDetailSku = function(s) {
        selectedSkuData = s;
        renderDetailView(s);
    };

    var detailDescriptionNode, detailShadeNameNode;
    var renderDetailView = function(skuData) {
        var self = this;

        renderSmooshImages(skuData);
    };

    var renderSmooshImages = function(skuData) {
        var smoosh_id = "smoosh";
        if (skuData.SMOOSH_DESIGN != null) {
            var smooshIDs = skuData.SMOOSH_DESIGN.split(",");
            smoosh_id = smooshIDs[0].strip();
        }

        var preloadImg = new Image();
        preloadImg.onload = function() {
            var hexVals = skuData.HEX_VALUE_STRING.split(",");
            var defaultStyle = getSwatchBaseStyle(skuData, hexVals);
            var divNode = new Element("div");
            divNode.setStyle(Object.extend(defaultStyle, {
                //            zIndex: 10 // need a z-index to make IE6 rollover state work
            }));

            var spanNode = new Element("span");
            var shadeNames = skuData.SHADENAME.split(",");
            var shadeName = shadeNames[0].strip();
            shadeName = shadeName.stripTags();
            spanNode.insert(shadeName);
            var descNode = new Element("p");
            descNode.setStyle({"textAlign":"center"});
            descNode.insert(skuData.SHADE_DESCRIPTION);
            
            shadeDetailContainerNode.update(divNode);
            shadeDetailContainerNode.insert(spanNode);
            shadeDetailContainerNode.insert(descNode);
        };

        preloadImg.src = "/images/products/smoosh/" + smoosh_id + ".png";
    };

    var initPickerListeners = function() {
        var self = this;
        self.mouseOverState = false;
        pickerContainerNode.observe("swatch:mouseover", function(evt){
            self.mouseOverState = true;
            if (self.mouseoutTimeout) {
                clearTimeout(self.mouseoutTimeout);
            }
            renderDetailView(evt.memo);
        });
        var displaySelected = function(){
            if (!self.mouseOverState) {
                renderDetailView(selectedSkuData);
            }
        }

        pickerContainerNode.observe("swatch:mouseout", function(evt) {
            self.mouseOverState = false;
            self.mouseoutTimeout = setTimeout(displaySelected, 250);
        });

        pickerContainerNode.observe("select:sku", function(evt) {
            selectDetailSku(evt.memo);
            var tbl = tableContainerNode;
            if (tbl !== evt.target) {
                selectTableSku(evt.memo);
            }

            var menu = shadeMenuContainerNode;
            if (menu !== evt.target) {
                selectMenuSku(evt.memo);
            }
        });

        // needed for BB JP?
        var descNode = singleProductView.getDescriptionContainerNode();
        if (Object.isElement(descNode)) {
            descNode.observe("select:sku", function(evt) {
                selectDetailSku(evt.memo);
                selectTableSku(evt.memo);
            });            
        }
    }; // end initPickerListeners

    tableContainerNode = pickerContainerNode.select("ul.swatches")[0];
    renderShadePickerTable({
        tableContainerNode: tableContainerNode,
        productData: args.productData
    });

    shadeMenuContainerNode = shadeMenuContainerNode || pickerContainerNode.select("div.names")[0];
    renderShadeMenu({
        shadeMenuContainerNode: shadeMenuContainerNode,
        productData: args.productData
    });

    shadeDetailContainerNode = pickerContainerNode.select("div.swatches-box div.img")[0];
    initDetailView({
        shadeDetailContainerNode: shadeDetailContainerNode,
        productData: args.productData
    });

    initPickerListeners();
};

document.observe('dom:loaded', function(e) {
    var rbLanguageHash = generic.rb('language');
    bb.productView.tempOutOfStock = '<img src="/images/btns/inventory_status/btn_oos_grey.gif" alt="' + rbLanguageHash.get('temp_out_of_stock') + '" /></a>';//2
    bb.productView.tempOutOfStockBtn = '<a href="#" id="btn-tos"><img src="/images/btns/inventory_status/btn_oos_animated.gif" alt="' + rbLanguageHash.get('temp_out_of_stock') + '" /></a>';//2
    bb.productView.soldOut = '<img src="/images/btns/inventory_status/btn_sold_out.gif" alt="' + rbLanguageHash.get('sold_out') + '" /></a>'; //7
    bb.productView.comingSoon = '<img src="/images/btns/inventory_status/btn_coming_soon_grey.gif" alt="' + rbLanguageHash.get('coming_soon') + '" /></a>'; //3
    bb.productView.comingSoonBtn = '<a href="#" id="btn-cs"><img src="/images/btns/inventory_status/btn_coming_soon_animated.gif" alt="' + rbLanguageHash.get('coming_soon') + '" /></a>'; //3
    bb.productView.inactive = '<img src="/images/btns/inventory_status/btn_discontinued.gif" alt="' + rbLanguageHash.get('inactive') + '" /></a>'; //5
    bb.productView.email_format = rbLanguageHash.get('enter_email_address');
});