var generic = generic || {};
generic.env = generic.env || {};
var el = el || {};
el.productView = el.productView || {}
// TODO: replace with actual RB
el.rb = el.rb || {}
el.rb.getRRBKeys = function() {
    el.rb.language = generic.rb("language");
    el.rb.language.read_review = (el.rb.language.get("read_review"))?el.rb.language.get("read_review"):'read_review';
    el.rb.language.read_reviews = (el.rb.language.get("read_reviews"))?el.rb.language.get("read_reviews"):'read_reviews';
    el.rb.language.write_review = (el.rb.language.get("write_review"))?el.rb.language.get("write_review"):'write_review';
    el.rb.language.write_first_review = (el.rb.language.get("write_first_review"))?el.rb.language.get("write_first_review"):'write_first_review';
    if((typeof(MPTRANS) != 'undefined') && (MPTRANS === 'ES')){
        el.rb.language.read_review = (el.rb.language.get("read_review_spanish"))?el.rb.language.get("read_review_spanish"):'read_review_spanish';
        el.rb.language.read_reviews = (el.rb.language.get("read_reviews_spanish"))?el.rb.language.get("read_reviews_spanish"):'read_reviews_spanish';
        el.rb.language.write_review = (el.rb.language.get("write_review_spanish"))?el.rb.language.get("write_review_spanish"):'write_review_spanish';
        el.rb.language.write_first_review = (el.rb.language.get("write_first_review_spanish"))?el.rb.language.get("write_first_review_spanish"):'write_first_review_spanish';
    }
}
el.rb.product = new Hash({
    Formula : 'Formula',
    Coverage: 'Coverage',
    Benefits: 'Benefits',
    Concern : 'Concern',
    Finish : 'Finish',
    Color_Group: "Color Group",
    Filter_by: "Filter By",
    All : "All",
    Bestseller: "Bestseller",
    Alphabetically: "Alphabetically"
});


el.productView.single = function (args) {
    var productData = args.productData;
    
    var skuMenuSelectLabel;
    var skuMenuSelectPriceMessage;
    var skuMenuSizeSelectNode, skuMenuSkinSelectNode;
    
    el.rb.getRRBKeys();

    return {
        getDescriptionContainerNode : function() {
            return this.descriptionContainerNode;
        },
        render : function(args) {
            productData.urlDomain = generic.env.domain;
            var self = this;
             // Replace add-to-bag button on SPP to use 'PRE-ORDER' button image when displaying a Pre Order product bug 43674
			productData.SPP_BUTTON_IMAGE = productData.MISC_FLAG == 15 ? '/images/btn/btn_pre-order.gif':'/images/btn/btn_add_to_bag.gif';
			productData.QV_HOVER_BUTTON_IMAGE  = productData.MISC_FLAG == 15 ? '/images/btn/btn_pre-order.png':'/images/btn/btn_ql_over.png';
//END


            // Get callout text. Just using alt for flag images right now
            // this code must be re-usable by QuickShop
            var flagImg = el.productView.flagImages.get(productData);
            productData.calloutText = (flagImg) ? flagImg.text : "";
           
            productData.TOTAL_REVIEW_COUNT = 0; //Set to 0 in case there are no ratings in review_statistics
            if ( productData.review_statistics ) {
                if ( productData.review_statistics.PRODUCT_ID ) { delete productData.review_statistics.PRODUCT_ID; }
                if ( productData.review_statistics.STATUS ) { delete productData.review_statistics.STATUS; }
            }            
            Object.extend( productData, productData.review_statistics );
            //Hide if on 'create a review' or spp page (but not if on a qv overlay from an spp page...
            productData.RATING_DISPLAY = ((args.imageContainerNode === $('spp_primary_img')) || (window.location.pathname.indexOf('create.tmpl') != -1))?'none':'block';
            productData.ALT_TEXT = productData.AVERAGE_RATING + ' out of ' + productData.RATING_RANGE;
            productData.BV_PRODUCT_ID = (productData.PRODUCT_ID).replace(/[^\d]/g, "");
            productData.WRITE_REVIEW = el.rb.language.write_review; 
            if(productData.TOTAL_REVIEW_COUNT == null){
                productData.TOTAL_REVIEW_COUNT = 0;
                productData.RATING_IMAGE = '/images/products/stars/rating-0_0.gif';
                productData.ALT_TEXT = 'not yet rated';
                productData.WRITE_REVIEW = el.rb.language.write_first_review;
            }
            productData.READ_REVIEW = (productData.TOTAL_REVIEW_COUNT > 1)?el.rb.language.read_reviews:el.rb.language.read_review;
            productData.READ_REVIEW_DISPLAY = (productData.TOTAL_REVIEW_COUNT == 0)?'none':'inline';
            productData.URL_ESCAPED = escape(productData.url);
            productData.FACEBOOK_LINK = encodeURIComponent('http://www.esteelauder.com/product/facebook.tmpl?CATEGORY_ID=' + productData.PARENT_CAT_ID + '&PRODUCT_ID=' + productData.PRODUCT_ID ) + '&t=' + encodeURIComponent(productData.PROD_RGN_NAME);
            productData.PROD_BASE_ID = (productData.PRODUCT_ID).replace(/[^\d]/g, "");
                    
            if (Object.isElement(args.imageContainerNode)) {
                generic.templatefactory.get({path: '/templates/products/single-view-image.tmpl'}).evaluateCallback({
                    object: productData,
                    callback: function(html) {
                        // include the existing content with the update - perhaps the review snippet is there
                        args.imageContainerNode.update(html + args.imageContainerNode.innerHTML);
                        // if we're using the bv generated rating, move it to the right spot
                        // we're not simply adding the bv tags to avoid potential race condition
                        if(productData.RATING_DISPLAY === 'none')
                            args.imageContainerNode.select("div.prod_image")[0].insert({after: args.imageContainerNode.select("div.bvgenrating")[0].remove().innerHTML});

                        // handle callout flag image
                        var flagImgNode = args.imageContainerNode.select("dfn.calloutImageNode")[0];
                        var flagImg = el.productView.flagImages.get(productData);

                        if (flagImg && flagImg.sppimg) {
                            
                            //exceptions for "new", "bestseller", "limited edition", and "pre order" images
                            if(productData.MISC_FLAG < 3 || productData.MISC_FLAG === 15){// "new","limited edition", and "pre order" should be text #36059, #36060 
                                flagImgNode.insert(flagImg.alt);
                            }else if(productData.MISC_FLAG === 6){//ommit blank bestseller gif #36059
                                //do nothing
                            }else{
                                var img = new Element("img");
                                flagImgNode.insert(img);
                                img.src = flagImg.sppimg;
                                img.alt = flagImg.alt;
                            }
                        }
                        // handle alternate images
                        // alternate images
                        if (Object.isElement(args.imageContainerNode)) {
                            var containerNode = 
                                args.imageContainerNode.select("div.alternateImageContainer")[0];

												// adjust placement of alternate image on spp page only, and only when there is a flag image (NEW, BEST OF, etc)
												if (flagImg && flagImg.sppimg && typeof(args.quickshop) == 'undefined'){
														containerNode.style.top = '114px';	
												}
												                                
                            self.initAlternateImages({
                                imageContainerNode: args.imageContainerNode
                            });
                        }
                        if ($('prod-image-single')) {
                            $('prod-image-single').pngHack();
                        }
                    }
                });
            }

            // this is for product description (for EL, content inside of the tabs)
            // tabs will be rendered here
            if (Object.isElement(args.descriptionContainerNode)) {
                this.initTabContainer({
                    productData: productData,
                    descriptionContainerNode: args.descriptionContainerNode,
                    imageContainerNode: args.imageContainerNode,
                    quickshop: args.quickshop
                });
            }
                        
            try{bvLoadRR();}catch(err){}
            
            /* For EL, shade picker must be rendered after all tabs have been rendered */
        }, // end render
     
        renderSkuMenu : function(args) {

            var self = this;

            if (!self._hasMultipleSizes({skus: args.productData.skus})) {
                self._setPrice({
                    sku: args.productData.skus[0],
                    container: args.priceContainerNode
                });
            }
            
            if (!self._hasMultipleSkintypes({skus: args.productData.skus})) {
                self._setSkinTypeLabel(args);
            }
            
            if (args.productData.skus.length > 1) {
                self.renderDropDowns(args);
            }
    
            
        }, // end renderSkuMenu
  

      
        renderDropDowns: function(args) {

            var self = this;
            generic.templatefactory.get({path: '/templates/products/single-view-price-menu.tmpl'}).evaluateCallback({
                object: args.productData,
                callback: function(html) {
                    args.priceContainerNode.insert({top: html}); // switch order - drop-down goes before price/size label
                    var skus = args.productData.skus;
                    
                    // init menu if there are multiple skus
                    self._initMenus({
                        skuData: args.productData.skus,
                        priceContainerNode: args.priceContainerNode,
                        quickshop: args.quickshop
                    });
                }
            });
        },
        
        _selectSku: function(skuData) {
            var self = this;
            var optsArray = $A(skuMenuSizeSelectNode.options);
            var opt = optsArray.detect(function(opt, idx) {
                if (opt.value == skuData.SKU_BASE_ID) {
                    return opt;
                }
            });
            skuMenuSizeSelectNode.selectedIndex = optsArray.indexOf(opt);
        },
        
        _initMenus: function(initArgs) {
            var self = this;
            skuMenuSizeSelectNode = initArgs.priceContainerNode.select("select.size-menu")[0];
            skuMenuSkinSelectNode = initArgs.priceContainerNode.select("select.skintype-menu")[0];
            if (!skuMenuSizeSelectNode ||!skuMenuSkinSelectNode ) {
                return;
            }
            
            initArgs.priceContainerNode.up().addClassName('with-dropdown'); // to help with style adjustments when dropdowns are present
            
            // need boolean vars to indicate whether to render size and/or skintype
            var renderSizeDropDown     = self._hasMultipleSizes({skus:initArgs.skuData});
            var renderSkinTypeDropDown = self._hasMultipleSkintypes({skus:initArgs.skuData});
            
            // move TOS/SOLD OUT/COMING SOON skus to the end
            var skus = el.productView.nonShoppableSkusLast(initArgs.skuData);
            
            // used to uniquify skintype select options
            // if both dropdowns are present
            var skinTypesInserted = {};
            var sizeOptionLabel = function(sku) {
                return sku.PRODUCT_SIZE + ' - ' + generic.productData.getPriceDisplay(sku);
            }
            
            // iterate through SKUs, Build out size/skintype menu
            skus.each(function(sku, i) {
                // build size option
                if (renderSizeDropDown) {
                    var sizeTxt = sizeOptionLabel(sku);
                    var sizeOpt = new Element('option', {value: sku.SKU_BASE_ID}).update(sizeTxt);
                    skuMenuSizeSelectNode.insert(sizeOpt);
                } else {
                    $(skuMenuSizeSelectNode).setStyle({ display: "none" });
                }
                
                //build skintype option
                if (renderSkinTypeDropDown && !renderSizeDropDown) {
                    var skinTxt = el.productData.getSkinTypeLabel(sku);
                    var skinOpt = new Element('option', {value: sku.SKU_BASE_ID}).update(skinTxt);
                    skuMenuSkinSelectNode.insert(skinOpt);
                } else if (renderSkinTypeDropDown && renderSizeDropDown) {
                    var skinTxt = el.productData.getSkinTypeLabel(sku);
                    // Need to make sure this dropdown is uniquified
                    // for this case
                    if (skinTypesInserted[skinTxt]) { return; }
                    skinTypesInserted[skinTxt] = true;
                    
                    // if there are both size and skintype dropdowns,
                    // the value for the skintype options is the
                    // skintype. In this case, the value is retrieved from the 
                    // size options
                    var skinOpt = new Element('option', {value: sku.SKIN_TYPE}).update(skinTxt);
                    skuMenuSkinSelectNode.insert(skinOpt);
                } else {
                    // hide dropdown if there are not multiple skintypes
                    $(skuMenuSkinSelectNode).setStyle({ display: "none" });
                }
            });

            // render size menu by filtering skus
            // against visible skintype.
            var reRenderSizeDropDown = function(skinType,evt) {
                // get list of skus with same skintype
                var skusWithSameSkinType = skus.findAll(function(sku) {
                    return sku.SKIN_TYPE == skinType
                });
                
                // remove all options from size dropdown
                // and re-add options with same skintype
                skuMenuSizeSelectNode.options.length = 0;
                skusWithSameSkinType.each(function(sku) {
                    var sizeTxt = sizeOptionLabel(sku);
                    var sizeOpt = new Element('option', {value: sku.SKU_BASE_ID}).update(sizeTxt);
                    skuMenuSizeSelectNode.insert(sizeOpt);
                });
                
                // TODO: This works for now. But it would be best
                // if the event obj were passed for this in all 
                // cases
                if (evt) {
                    evt.target.fire("select:sku", skusWithSameSkinType[0]);
                } else {
                    self._selectSku(skusWithSameSkinType[0]);
                }
            }

            var primaryDropDownEvt = function(evt) {
                var skuBaseId = $F(evt.target);
                if (skuBaseId && skuBaseId.length > 0) {
                    var sku = skus.detect(function(sku) {
                        return sku.SKU_BASE_ID == skuBaseId;
                    });
                }

                // update www
                if (!initArgs.quickshop) {
                    // keep this here for now as reference
                    // to location where sku-based www's are updated
                    el.spp.recommendedProducts.update({skuData: sku, bypassCM: true});
                }

                evt.target.fire("select:sku", sku);
            };
    
            // this is only used for the skintype dropdown
            // when there is also a size dropdown
            var secondaryDropDownEvt = function(evt) {
                var selectedSkinType = parseInt($F(evt.target));
                reRenderSizeDropDown(selectedSkinType, evt);
            }
            
            // handle cases for dropdowns:
            // 1: show size dropdown only
            // 2: show skintype dropdown only
            // 3: show both
            
            if (renderSizeDropDown && !renderSkinTypeDropDown) { // case 1
                skuMenuSizeSelectNode.observe('change', primaryDropDownEvt);
            } else if (!renderSizeDropDown && renderSkinTypeDropDown) { //case 2
                skuMenuSkinSelectNode.observe('change', primaryDropDownEvt);
            } else { // case 3
                skuMenuSizeSelectNode.observe('change', primaryDropDownEvt);
                skuMenuSkinSelectNode.observe('change', secondaryDropDownEvt);
                // if we're showing both, reRender the size dropdown to
                // reflect skin type option being displayed
                reRenderSizeDropDown(skus[0].SKIN_TYPE, "");
            }
            
            // set up event handler for SKU selection elsewhere (e.g., from Shade Picker).
            document.observe('select:sku', function(evt) {
                if (evt.target !== skuMenuSizeSelectNode) {
                    self._selectSku(evt.memo);
                }
            });
        },
        
        _setPrice: function(args) {
            var sku = args.sku;
            var container = args.container;
            var price_node = container.select("span.price")[0];
            var price = ((sku.PRODUCT_SIZE)? sku.PRODUCT_SIZE + ' ':'') + generic.productData.getPriceDisplay(sku);
            $(price_node).setStyle({display: "block"});
            price_node.update(price);
        },
        
        _setSkinTypeLabel: function(args) {
            var labelNode = args.priceContainerNode.select(".skin-type-label")[0];
            var label     = el.productData.getSkinTypeLabel(args.productData.skus[0]);
            
            labelNode.update(label);
            if(label)$(labelNode).setStyle({ display: "block" });
        },
        // check if a single skintype label needs 
        // rendered
        _hasMultipleSkintypes: function(args) {
            var skus = args.skus;
            // check if first value is valid.
            // Valid being a non-false value such as 0 or undefined
            var valid = !!skus[0].SKIN_TYPE;
            
            return skus.pluck("SKIN_TYPE").uniq().length > 1 && valid;
        },
        
        _hasMultipleSizes: function(args) {
            var skus = args.skus;
            return skus.pluck("PRODUCT_SIZE").uniq().length > 1
        },
    
        // /internal helper methods
        /**
         */
        initAddButton: function(args) {
            if (!args.addButtonNode || !args.productData || !args.productData.skus) {
                return null;
            }
            // set default type to 'cart'

            var options = Object.extend({
                itemType: 'cart'
            }, args);
            var skus = options.productData.skus;
            var selectedSkuIndex = options.productData.selectedSkuIndexBeforeSorted  || 0;
            var regimenPaths = options.productData.regimenPaths;
            
            if (generic.productData.validateSkusArray(skus)) {
                var self = this;
                var btn;
                
                if (typeof(regimenPaths) != "undefined" && regimenPaths.length > 0) {
                    btn = el.productView.addRegimenButton({
                        addButtonNode: options.addButtonNode,
                        progressNode: options.progressNode,
                        paths: regimenPaths,
                        itemType: options.itemType
                    });
                } else {
                    btn = el.productView.addButton({
                        addButtonNode: options.addButtonNode,
                        progressNode: options.progressNode,
                        skuData: skus[selectedSkuIndex],
                        itemType: options.itemType
                    });
                }
                
                if (btn.getItemType() === 'cart') {
                    btn.setShoppable();                 
                }
        /*#39326-COG-20Jan2011- Xselll Quick Looks on SPP issue Fixed */
        if(!args.replenishmentNode){
            var replenishContainer = $$("div.replenishment-container")[0];
        }else{
            var replenishContainer = args.replenishmentNode;
        }
                el.productView.renderReplenishMenu({
                        addBtn: btn,
                        skuInfo : skus[0],
                        replenishContainer : replenishContainer
                });

                // 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 == options.productData.PRODUCT_ID) {
                        btn.setSkuData(skuData);
                        if (btn.getItemType() === 'cart') {
                            btn.setShoppable();                 
                        }
                    }
                    el.productView.renderReplenishMenu({
                        addBtn: btn,
                        skuInfo : skuData,
                        replenishContainer : replenishContainer
                    });
                    // self.addButton.setShoppable(productPage.isActive(skuData));
                });
       }
       if ($('smoosh0img')) {
                $('smoosh0img').pngHack();
           }


        }, // end initAddButton

        initShadePicker: function(pickerArgs) {
            var shadeswatchWidth = 33;
            if (productData.shaded) {
                var numberHexVals = pickerArgs.productData.skus[0].HEX_VALUE_STRING.split(',');
                if (numberHexVals.length > 1) {
                    shadeswatchWidth = 33 * numberHexVals.length;
                    if (shadeswatchWidth > 88) {
                        shadeswatchWidth = 88;
                    }
                }
            }
            var shadePicker = el.productView.shadePicker({
                productData: pickerArgs.productData,
                shadesContainerNode: pickerArgs.shadesContainerNode,
                shadesDetailNode: pickerArgs.shadesDetailNode,
                imageContainerNode: pickerArgs.imageContainerNode,
                swatchWidth: shadeswatchWidth,
                swatchHeight: 25,
                quickshop: pickerArgs.quickshop,
                singleProductView: this
            });


            // if (productData.shaded) {
            //     var args = {
            //         cellsPerRow : 4,
            //         pickerContainerID : "tab_shaded" + this.productTabs.idSuffix,
            //         productData : productData,
            //         viewContainerID : this.viewContainerID,
            //         categoryID : CATEGORY_ID
            //     };
            //     this.shadePicker = new productPage.ShadePicker(args);
            // }
        },

        initTabContainer: function(args) {
            var tabContainer = el.productView.tabContainer({
                productData: productData,
                descriptionContainerNode: args.descriptionContainerNode,
                imageContainerNode: args.imageContainerNode,
                quickshop: args.quickshop,
                singleProductView: this
            });
        },
    
        initAlternateImages: function(args) {
            args.productData = productData;
            var alternateImages = el.productView.alternateImages(args);
        }
    };
};

el.productView.renderReplenishMenu = function(args) {
    var initReplenishMenu = function (args) {
        if (!args.replenishContainer || !args.skuInfo || !args.addBtn) {
                        return null;
                }
                var replenishSelectNode = args.replenishContainer.select('select.replenish_select')[0];
                var skuBaseId = args.skuInfo.SKU_BASE_ID;
        var addBtn = args.addBtn;

        if (replenishSelectNode) {
                var freqValue = "0";
                var setReplenishmentItemType = function(freqValue) {
                    if (!freqValue) {
                        return;
                    }
                    addBtn.setItemType({
                        itemType: 'replenishment',
                        altParams: {
                            REPLENISHMENT_FREQ: freqValue
                        }
                    });
                };
                replenishSelectNode.observe('change', function(evt) {
                    evt.preventDefault();
                    freqValue = evt.target.value;
                    setReplenishmentItemType(freqValue);
                });
                setReplenishmentItemType(freqValue);
            }

        };

    /*#39333-COG-20Jan2011- Dynamically learn more popup populated */
    
    var initLearnMoreLink = function (args) {
        
        var learmoreNode = args.replenishContainer.select('a.replenish-learn-more');
        var module_wrapper = $("module_wrapper");
        
        learmoreNode.each(function(event) {
            event.observe('click', function(event1) {
                event1.preventDefault();
                var containerNode = $(document.body);
                var left = 0;
                var top = 0;                
                var learnNode = Event.element(event1);
                
                var offset = learnNode.cumulativeOffset();
                var top_offset = 160;
                var left_offset = 52;
                left = offset[0];
                top  = offset[1]

                if(!$('quickshop-overlay-container')){
                    learnMoreZindex = '195';
                }else{
                    /*#39333-COG-27Jan2011- learn more popup alignment for shared quick look - Fixed */
                    if($A(learnNode.up(4).classNames())[1] == 'single_swatch'){
                        left_offset = -148;                     
                    }
                    if($A(learnNode.up(10).classNames())[3] == 'shaded_small_swatch'){
                        left_offset = -48;                      
                    }
                    learnMoreZindex = '1201';
                }
                /*#39333-COG-21Jan2011- set module wrapper as static */
                if (generic.env.isIE) {                 
                    module_wrapper.setStyle({ position: "static" });

                }
                if(!$('replenish_popover')){                

                    replenishPopoverNode = new Element("div", { "id": "replenish_popover", "class": "replenish_popover"});
                    containerNode.insert(replenishPopoverNode);
                    replenishPopoverNode.setStyle({top: top-top_offset+'px',left: left+left_offset+'px', zIndex:learnMoreZindex});
                    var html_content = '<img alt="Replenishment Service" style="vertical-align: top; height: 223px; width: 411px;" src="/images/common/replenishment_service.png" usemap="#Map1"/><map name="Map1" id="Map1"><area class="area_close_learnmore" shape="rect" coords="1,1,403,13" href="javascript:void(0);" style="cursor: pointer;" onclick=""/></map>';
                    replenishPopoverNode.update(html_content);
                    var learmoreNodeClose = replenishPopoverNode.select('.area_close_learnmore')[0];
                    learmoreNodeClose.observe('click', function(evt) {                      
                        module_wrapper.setStyle({ position: "relative" });
                        replenishPopoverNode.remove();
                    });
                }
            });
        });

    };
    /*#39333-COG-20Jan2011- Dynamically learn more popup populated */

    var self = this;
    var isRefillable = args.skuInfo.REFILLABLE;
    if (isRefillable) {
            generic.templatefactory.get({path: '/templates/products/replenish_menu.tmpl'}).evaluateCallback({
                callback: function(html) {
                args.replenishContainer.update(html);
                    initReplenishMenu({
                        addBtn: args.addBtn,
                        skuInfo : args.skuInfo,
                        replenishContainer : args.replenishContainer
                    })
                    initLearnMoreLink({
                        replenishContainer : args.replenishContainer
                    })
                }
            });
    } else {
            args.replenishContainer.update('');
    }
};  



el.productView.shadePicker = function (args) {
    var swatchWidth = 33;
    var swatchHeight = 25;
    var tableNode;
    var onState;
    var selectedSkuData;
    var smooshPanels = [];
    var quickshop = args.quickshop;
    var singleProductView;
    var shadesContainerNode = args.shadesContainerNode;
    var shadesDetailNode = args.shadesDetailNode;
    var imageContainerNode = args.imageContainerNode;
    var fallbackOverlayDesign;
    var detailDescriptionNode, detailTosNode, detailShadeNameNode, detailLimitedNode, mainBackgroundNode;

    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 swatchContainerNode = cellNode.select('div.swatch-container')[0];
        
        // ie trouble using setStyle on this node
        // Need to set the width so descriptive text appears in the correct location
        swatchContainerNode.style.width = swatchWidth + "px";
        
        var linkNode = cellNode.select('a.swatch-box')[0];
        var hexVals = skuData.HEX_VALUE_STRING.split(',');
        var swatchShadeWidth = Math.ceil(swatchWidth/hexVals.length);
        var defaultStyle = getSwatchBaseStyle(cellNode, skuData, hexVals);

        var invisibleOverlay =
            skuData.PARENT_CAT_ID === "CAT642" ||
            skuData.PARENT_CAT_ID === "CAT643" ||
            skuData.PARENT_CAT_ID === "CAT644";

        var smooshOverlay = new Array();

        if (invisibleOverlay) {
            smooshOverlay.push('/products/images/swatches/33x25/foundation_liquid_33x25.png');
        } else {
            var tempTextures = skuData.SMOOSH_DESIGN.split(",");
            for(var i=0; i<tempTextures.length; i++)
            {
                smooshOverlay.push('/products/images/swatches/33x25/' + tempTextures[i] + '_33x25.png');
            }
        }

        var swatchContainerClass;
        
        switch (hexVals.length) {
            case 1 : swatchContainerClass = "single"; break;
            case 2 : swatchContainerClass = "duo"; break;
            case 4 : swatchContainerClass = "quad"; break;
            case 5 : swatchContainerClass = "quin"; break;
            case 6 : swatchContainerClass = "sext"; break;
            default: swatchContainerClass = "single";
        }
        
        $(swatchContainerNode).addClassName(swatchContainerClass);
        $(swatchContainerNode).up().addClassName(swatchContainerClass + '-container');
        
        // If there is an inventory message AND a MISC_FLAG message, use different styles - fixes layout issues ///
        if (skuData.INVENTORY_STATUS_MESSAGE != '' && skuData.MISC_FLAG != '') {
            $(swatchContainerNode).addClassName('swatch_container_multi_messages');
        }else{
            $(swatchContainerNode).addClassName('swatch_container_single_message');
        }
        
        for (var i=0; i<hexVals.length; i++) {
            var d = new Element("div", {});
            var texture = (smooshOverlay.length == 1) ? smooshOverlay[0] : smooshOverlay[i];

            d.setStyle(Object.extend(defaultStyle, {
                height: swatchHeight + "px",
                zIndex: 10, //need a z-index to make IE6 rollover state work
                backgroundImage: "url(" + texture + ")",
                backgroundColor: hexVals[i]
            }));
            
            d.className = "shade_" + i;
            
            // for individual swatch on state
            d.observe('mouseover', function(evt) {
                $(this).addClassName("on");
            });
            
            d.observe('mouseout', function(evt) {
                var self = this;

                var offState = function() {
                    $(self).removeClassName("on");
                };
                
                setTimeout(offState, 250);
            });

            swatchContainerNode.insert(d);
            $(d).pngHack();
            //put a spacer between multi-swatches
            if (i < (hexVals.length - 1)) {
                var d2 = new Element("div", {});
                d2.setStyle(Object.extend(defaultStyle, {
                    width: "2px",
                    height: swatchHeight + "px",
                    backgroundImage: "none",
                    backgroundColor: "white"
                }));
                swatchContainerNode.insert(d2);
            }
        }
        
        if (swatchContainerClass === "single") {
            var onStateNode = new Element("div", { 'class':'onstate' });
            onStateNode.setStyle({
                width: swatchWidth -6 + "px",
                height: swatchHeight -6 + "px",
                display: 'none'
            });
            swatchContainerNode.insert(onStateNode);
        }
        
        // hook up swatch hover a2b button
        var btn = cellNode.select(".swatch-rollover-button")[0];
        var priceNode = cellNode.select(".swatch-rollover-price")[0];
        if (el.productData.isShoppable(skuData)) {
            btn.observe("click", function(skuData, evt) {
                evt.preventDefault();
                var productString = 
                    skuData.PARENT_CAT_ID + skuData.PRODUCT_ID + skuData.SKU_ID;
                
                el.productView.addSkuToCart(productString,'',shadesDetailNode);
            }.curry(skuData));
        } else {
            btn.setStyle({display:"none"});
            priceNode.setStyle({display:"none"});
        }
        
        // Mouseover handler.
        cellNode.observe('mouseover', function(skuData, evt){
            linkNode.fire("swatch:mouseover", skuData);
            onState = skuData.SKU_BASE_ID;
            cellNode.addClassName('over');
            
            var rollover = cellNode.select(".swatch-rollover")[0];
            var hexes = skuData.HEX_VALUE_STRING.split(",");
            
            if (hexes.length > 1) {
                // need to set position/background color
                // of swatch hover when necessary
                var rollover = cellNode.select(".swatch-rollover")[0];
                var xMousePos = evt.clientX;
                var farLeft = $(this).cumulativeOffset()[0];
                // use this number to determine which swatch we are over
                // confirm swatch numbers as this event is fired when
                // moused over shade name
                
                // need to make sure this index doesn't go above
                // or below the first/last shade index
                var xCompensation = 5;
                xMousePos -= xCompensation;
                var overSwatch = Math.ceil((xMousePos - farLeft) / swatchWidth) - 1;
                
                if (overSwatch > hexes.length - 1) {
                    overSwatch = hexes.length - 1;
                } else if (overSwatch < 0) {
                    overSwatch = 0;
                }
                
                var hoverHex = hexes[overSwatch];
                $(rollover).className = "swatch-rollover";
                
                // class names are not 0-indexed: s2, s3, etc.
                rollover.addClassName("s" + (overSwatch + 1).toString());
                // set the color
                var hoverSmoosh = cellNode.select(".smoosh")[0];
                hoverSmoosh.setStyle({ "backgroundColor" : hoverHex });

                // To accomodate where there are multiple hex values but only one overlay
                var smooshOverlay = skuData.SMOOSH_DESIGN.split(",");
                var overlayIndex = overSwatch;
                if (overlayIndex > smooshOverlay.length - 1) {
                    overlayIndex = 0;
                }
                 
                hoverSmoosh.setStyle({ "backgroundImage" : "url('/products/images/swatches/180x175/"+smooshOverlay[overlayIndex]+"_180x175.png')" });
            }

            // toggle swatch rollover
        
            $(rollover).setStyle({display: "block"});
            $(rollover).pngHack();
        
        }.curry(skuData));
        // Mouseout handler. call after 0.25 seconds to prevent flicker
        cellNode.observe('mouseout', function(skuData, evt){
            linkNode.fire("swatch:mouseout", skuData);
            onState = "";
            var offState = function(){
                if (onState != skuData.SKU_BASE_ID) {
                    cellNode.removeClassName('over');
                }
            };
            
            // hide swatch rollover
            if (onState != skuData.SKU_BASE_ID) {
                var rollover = cellNode.select(".swatch-rollover")[0];
                $(rollover).setStyle({display: "none"});
            }
            setTimeout(offState, 250);
        }.curry(skuData));
        // Click handler. Fires "select:sku" event.
        linkNode.observe('click', function(skuData, evt) {
            evt.preventDefault();
            //linkNode.fire("swatch:click", skuData);
            if (tableNode) {
                tableNode.fire("select:sku", skuData);
            }
            selectTableSku(skuData);
        }.curry(skuData));
    
/* [37306] COG 19 OCT 2010 - EL US/ Limited Edition Flag not on SPP - Issue Fixed  */
    if (skuData.MISC_FLAG) {
        var flagImgNode = cellNode.select(".note_limited_edition")[0];                                                                                                 
        var flagImg = el.productView.flagImages.get(skuData);                                                                                                                                         
                var img = new Element("img");
                flagImgNode.update(img);
                img.src = flagImg.sppimg;
                img.alt = flagImg.alt;
        }
/* [37306] COG 19 OCT 2010 - EL US/ Limited Edition Flag not on SPP - Issue Fixed  */ 

    };

    var getSwatchBaseStyle = function(cellNode, skuData, hexVals) {
        var defaultStyle = {
            top: "0px"
        };

        if (!skuData.SMOOSH_PATH_STRING)
            return defaultStyle;

        var swatchVals = skuData.SMOOSH_PATH_STRING.split(',');
        var swatchSrc = swatchVals[0];
        // Create the thumbnail SRC by inserting the number of swatches
        // and trimming extra characters if necessary
        // e.g. "/images/swatches/duo_02_ns_ng_t.png"
        // ---> "/images/swatches/02_ns_ng_2.png"
        var re = /^(\/(?:[\w_\-]+\/)+)(?:.*_)?(\d{2}[a-z]*_\w{2}_\w{2})(?:_\w+)?(\.\w+)$/;
        var reResult = re.exec(swatchSrc);
        if (!reResult)
            return defaultStyle;
        swatchSrc = reResult[1] + reResult[2] + "_" + hexVals.length +  reResult[3];

        defaultStyle.backgroundImage = swatchSrc;
        if (/MSIE (\d+\.\d+)/.test(navigator.userAgent) && parseFloat(RegExp.$1) < 7) {
            defaultStyle.filter = "progid:dximagetransform.Microsoft.AlphaImageLoader(src='" +
                defaultStyle.backgroundImage + "', sizingMethod='image')";
            defaultStyle.backgroundImage = "none";
        } else {
            defaultStyle.backgroundImage =  "url('" + defaultStyle.backgroundImage + "')";
        }
        return defaultStyle;
    };

    var renderShadePickerTable = function(tableArgs) {
        var tableContainerNode = tableArgs.tableContainerNode;
        var cellsPerRow = tableArgs.cellsPerRow;
        if (!tableContainerNode) {
            return null;
        }

        tableNode = new Element("table", {"class":"table-swatches"} );
        var tbod = new Element("tbody", {"class":"tbody-swatches"} );
        tableContainerNode.update(tableNode);
        tableNode.insert(tbod);
        var trow;
        var skus = el.productView.nonShoppableSkusLast(tableArgs.productData.skus);
        var nonshoppable = skus.findAll(function(s) {
            return !el.productData.isShoppable(s)
                || el.productData.isTempOutOfStock(s);
        });
        // do a column major sort on these swatches so 
        // they will be sorted vertically
        var columnMajor = function(skus) {
            var sorted = [];
            var pivot = Math.ceil(skus.length / 2);
            
            for (var i = 0; i < pivot; i++) {
                sorted.push(skus[i]);
                var second = skus[i + pivot];
                
                if (second) { sorted.push(second) ;}
            }
            
            return sorted;
        };
        
        var columnMajorThree = function(skus) {
            var sorted = [];
            var rows = Math.floor(skus.length / 3);
            
            if (skus.length % 3) {
                rows++;
            }
            
            for (var i = 0; i < rows; i++) {
                sorted.push(skus[i]);
                var second = skus[rows+i];
                var third  = skus[(rows*2)+i];
                
                if (second) { sorted.push(second); }
                if (third)  { sorted.push(third); }
            }
            
            return sorted;
        };
        
        var sku_cnt = skus.length;
        var shades = skus[0].HEX_VALUE_STRING.split(",");
        var threeColumns = (shades.length == 1 && sku_cnt > 10) ? true : false;
        var sortFunction = (threeColumns) ? columnMajorThree : columnMajor;
        skus = sortFunction(skus);
        
        // special case needs to be processed here. 3 columns,
        // last row has single column. 13, 16, 19, 22, 25, 28, etc.
        var remainder = sku_cnt % 3;
        if (remainder == 1 && threeColumns && nonshoppable.length > 0) {
            var nonshoppable_count = nonshoppable.length;
            var lastColumnCount    = (sku_cnt - remainder) / 3;
            
            if (nonshoppable_count >= lastColumnCount) {
                // if they are the same, swap last and next to last
                var tmp  = skus[(sku_cnt-1) - 1]; // next to last
                skus[(sku_cnt-1) - 1] = skus[sku_cnt-1];
                skus[sku_cnt-1] = tmp;
            } else {
                var first_nonshoppable_index;
                skus.each(function(s, index) {
                    if (!el.productData.isShoppable(s) || el.productData.isTempOutOfStock(s)) {
                        if (!first_nonshoppable_index) {
                            first_nonshoppable_index = index;
                        }
                    }
                });
                
                var tmp1 = skus[(sku_cnt-1) - 1];
                skus[(sku_cnt-1) - 1] = skus[first_nonshoppable_index];
                skus[first_nonshoppable_index] = tmp1;
            }
        }
        
        var skusToDisplay = skus;
        for (var i=0; i<skusToDisplay.length; i++) {
            //
            // create new row when necessary
            if (i % cellsPerRow === 0) {
                trow = new Element("tr");
                tbod.insert(trow);
            }
            skusToDisplay[i].INVENTORY_STATUS_MESSAGE = el.productView.inventoryStatusMessage(skusToDisplay[i].INVENTORY_STATUS);
             // Replace add-to-bag button for individual skus for shaded products on mouseover on SPP to use 'PRE-ORDER' button image when displaying a Pre Order product bug 43674
			skusToDisplay[i].SHADE_ADDTOBAG = skusToDisplay[i].MISC_FLAG == 15 ? '/images/btn/btn_pre-order.gif':'/images/btn/btn_add_to_bag.gif';
			skusToDisplay[i].QV_HOVER_BUTTON_IMAGE  = skusToDisplay[i].MISC_FLAG == 15 ? '/images/btn/btn_pre-order.png':'/images/btn/btn_xsell_addtobag.png';
            //END
            
            skusToDisplay[i].swatchHoverInventoryMessage = (skusToDisplay[i].INVENTORY_STATUS == "2") ? ''
                                                         : (skusToDisplay[i].INVENTORY_STATUS == "1" && skusToDisplay[i].MISC_FLAG == "15") ? 'PRE-ORDER' 
                                                         : skusToDisplay[i].INVENTORY_STATUS_MESSAGE
                                                         ;
            
            skusToDisplay[i].initialHoverShade = 
                skusToDisplay[i].HEX_VALUE_STRING.split(",")[0];
            
            generic.templatefactory.get({path: '/templates/products/shade-table-cell.tmpl'}).evaluateCallback({
                object: skusToDisplay[i],
                callback: function(trow, i, html) {
                    trow.insert(html);
                    trow.pngHack();
                    drawSwatch(trow.select('td')[i%cellsPerRow], skusToDisplay[i]);
                    // self.initListeners();
                    // once all the swatches have been rendered, select the first one
                    if (i + 1 === skusToDisplay.length) {
                        var selected;
                        if (tableArgs.productData.preselectedSkuId) {
                            skusToDisplay.each(function(sku,index) {
                                if (sku.SKU_ID == tableArgs.productData.preselectedSkuId) {
                                    selected = index;
                                    throw $break;
                                }
                            });
                            
                        } else {
                            selected = 0;
                        }
                        
                        // save index
                        tableArgs.productData.selectedSkuIndexSorted = selected;
                        
                        selectTableSku(skusToDisplay[selected]);
                        // initialize scroll container
                        // initScroller();
                    }
                }.curry(trow, i)
            });
        } 
        setTableRowHeight(tableContainerNode);
        
    }; // end renderShadePickerTable

        
    var setTableRowHeight = function(tableContainerNode){ // set all table rows to same height as the tallest
        var maxHeight = 0;    
        setTimeout(function(){ // timeout needed to offset timing issues with the rows being populated
            var tableRows = tableContainerNode.select("tr");
            tableRows.each(function(row){
                maxHeight = Math.max(row.getHeight(), maxHeight);
            });
            maxHeight = (maxHeight > 44) ? 44 : maxHeight;
            tableRows.each(function(row){
                row.setStyle( { height: maxHeight+'px' });
            });
        },300);
    };

    var selectTableSku = function(skuData) {
        var cells = tableNode.select("td");
        cells.each(function(cell){
            cell.removeClassName('active');
            if (cell.skuBaseId == skuData.SKU_BASE_ID) {
                cell.addClassName('active');
            }
        });
    }; // end selectTableSku

    var initDetailView = function(detailArgs) {
        var containerNode = detailArgs.shadeDetailContainerNode;
        var imageContainerNode = detailArgs.imageContainerNode;
        // get index here
        var selected;
        if (detailArgs.productData.preselectedSkuId) {
            detailArgs.productData.skus.each(function(sku,index) {
                if (sku.SKU_ID == detailArgs.productData.preselectedSkuId) {
                    selected = index;
                    throw $break;
                }
            });
        } else {
            selected = 0;
        }
        
        detailArgs.productData.selectedSkuIndexBeforeSorted = selected;
        
        var skuData = detailArgs.productData.skus[selected];
        // HACK: get first defined smoosh path string
        var sku = detailArgs.productData.skus.find(function(s) {
            var path = s.SMOOSH_PATH_STRING;
            return !!path && !path.match("::");
        });

        skuData.smooshPath = (sku) ? sku.SMOOSH_PATH_STRING : skuData.SMOOSH_PATH_STRING;
        // /HACK: get first defined smoosh path string

        generic.templatefactory.get({path: '/templates/products/shade-thumb.tmpl'}).evaluateCallback({
            object: skuData,
            callback: function (productData, html) {
                containerNode.update(html);
                // Only need one
                smooshPanels[0] = containerNode.select('.smoosh-color-node')[0];
                // self.renderCallback(s);
                var addButtonNode   = containerNode.select("a.smoosh-add-link")[0];
                var addProgressNode = containerNode.select("span.shaded_add_progress")[0];
        /*#39326-COG-20Jan2011- Xselll Quick Looks on SPP issue Fixed */
        var replenishmentNode = containerNode.select("div.replenishment-container")[0];
                if (addButtonNode) {
                    singleProductView.initAddButton({
                        productData: productData,
                        addButtonNode: addButtonNode,
                        progressNode: addProgressNode,
            replenishmentNode: replenishmentNode,
            itemType: 'cart'
                    });
                }

                var addFavoritesNode = containerNode.select("a.favorites-add-link")[0];

                if (addFavoritesNode) {
                    singleProductView.initAddButton({
                        productData: productData,
                        addButtonNode: addFavoritesNode,
                        itemType: 'favorites'
                    });
                }

                var shippingMessageNode = containerNode.select("span.shipping_notification_message")[0];
                el.productView.updateShippingMessage({
                    skuData: skuData,
                    shippingMessageNode: shippingMessageNode
                });

                detailDescriptionNode = containerNode.select(".shade-details")[0];
                detailTosNode = containerNode.select(".btn-tos")[0];
                detailShadeNameNode = containerNode.select("div.shade-name")[0];
                detailaddButtonNode   = containerNode.select("a.smoosh-add-link")[0];
								detailLimitedNode = containerNode.select(".limited")[0];
                mainBackgroundNode = imageContainerNode.select(".main-product-image")[0];
                                
                selectDetailSku(skuData);
            }.curry(detailArgs.productData)
        });
    };

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

    var renderDetailView = function(skuData) {
        var self = this;
        var shade_details = "";
        if (skuData.SHADE_DESCRIPTION !== null) {
            shade_details += "<p>" +
                    skuData.SHADE_DESCRIPTION +
                    "</p>\n";
        }
        if (skuData.FINISH !== null) {
            shade_details += "<strong>" + el.rb.product.get('Finish') + ": </strong>" +
                    skuData.FINISH +
                    "<br />\n";
        }
        if (skuData.ATTRIBUTE_COLOR_FAMILY !== null) {
            shade_details += "<strong>" + el.rb.product.get('Colour_Group') + ": </strong>" +
                    skuData.ATTRIBUTE_COLOR_FAMILY +
                    "<br />\n";
        }
        // TODO: get this in place if applicable
        //detailDescriptionNode.update(shade_details);
        //M.P.C. - for now, hide it since it screws up layout to have it there empty
        if(detailDescriptionNode)detailDescriptionNode.hide();

        renderSmooshImages(skuData);
        // update www
        // keep this here for now as reference
        // to location where sku-based www's are updated
        if (!quickshop) { el.spp.recommendedProducts.update({skuData: skuData, bypassCM: true}); }
    };
   /**
    * This method pieces together the correct smoosh images and adds color.
    * We have to jump through some hoops to accommodate IE6. These elements
    * are created and added to the DOM as follows:
    * 'smoosh_container' = the top-level container of all the smoosh image nodes
    * 'smoosh_panel_X' = smoosh_container contains these 4 child divs, which break it into
    *      a 4-panel grid. They serve as containers for...
    * 'smoosh_panel_inner_X' = These divs are generated below and placed into
    *      their corresponding parent nodes by index. The smoosh image is placed
    *      in them by CSS background image (non-IE6) or filter (IE6). The divs are
    *      positioned in their parents according to the number of hex values in
    *      the SKU. These positions are stored in an associative array along with the
    *      image names and BG colors.
    */
    var renderSmooshImages = function(skuData) {
        if (!skuData.HEX_VALUE_STRING || !skuData.SMOOSH_PATH_STRING) {
            return;
        }

        var hexVals = skuData.HEX_VALUE_STRING.split(',');
        var smooshVals = skuData.SMOOSH_PATH_STRING.split(',');
        var smooshOverlays = skuData.SMOOSH_DESIGN.split(',');
    
        /*#37550 - COG OCT 06 2010 - EL / SPP / Swatch discrepancy - Fixed */
        smooshPanels[0].select("#smoosh0img")[0].src = smooshVals[0];
        /*#37550 - COG OCT 06 2010 - EL / SPP / Swatch discrepancy - Fixed */

        smooshPanels[0].style.backgroundColor = hexVals[hexVals.length-1];
        smooshPanels[0].style.backgroundImage = "url('/products/images/swatches/180x175/"+smooshOverlays[smooshOverlays.length-1]+"_180x175.png')";
        detailShadeNameNode.update(skuData.SHADENAME);
				detailaddButtonNode.select("img")[0].src = skuData.SHADE_ADDTOBAG;
				
        // update inv stat works here?
        el.productView.displayInventoryStatus({
            skuData: skuData,
            node: detailTosNode
        });

        mainBackgroundNode.style.backgroundColor = hexVals[0];
        var isMultiShaded = hexVals.length > 1;
        
        if (mainBackgroundNode.style.backgroundColor == "" || isMultiShaded) {
            mainBackgroundNode.style.backgroundImage = "url('/products/images/swatches/overlay/"+skuData.PRODUCT_CODE+"_bg.gif')";
        }
        
        el.productView.alternateSPPImage({
            node: mainBackgroundNode.select(".large-image-node")[0],
            skuData: skuData
        });
    };

    var initPickerListeners = function() {
        var self = this;
        self.mouseOverState = false;
        shadesContainerNode.observe('swatch:mouseover', function(evt) {
            // HACK
            // z-index in the masthead (logo/gnav container)
            // causes problems when swatch hovers are high on page
            var masthead = $$(".masthead")[0];
            if (masthead) {
                masthead.setStyle({zIndex: 1});
            }
            
            if (generic.env.isIE) {
                var tab_control = $$(".tab_control_set")[0];
                if (tab_control) {
                    tab_control.setStyle({zIndex: -1});
                }
            }
            // /HACK
            self.mouseOverState = true;
            if (self.mouseoutTimeout) {
                clearTimeout(self.mouseoutTimeout);
            }
            renderDetailView(evt.memo);
        });
        var displaySelected = function(){
            if (!self.mouseOverState) {
                renderDetailView(selectedSkuData);
            }
        }
        shadesContainerNode.observe('swatch:mouseout', function(evt) {
            self.mouseOverState = false;
            self.mouseoutTimeout = setTimeout(displaySelected, 250);
            // HACK
            var masthead = $$(".masthead")[0];
            if (masthead) {
                masthead.setStyle({zIndex: 199});
            }
            
            if (generic.env.isIE) {
                var tab_control = $$(".tab_control_set")[0];
                if (tab_control) {
                    tab_control.setStyle({zIndex: 9});
                }
            }
            // /HACK
            
        });
        shadesContainerNode.observe('select:sku', function(evt) {
            selectDetailSku(evt.memo);
            var tbl = tableNode;
            if (tbl !== evt.target) {
                selectTableSku(evt.memo);
            }
        });
        var descNode = singleProductView.getDescriptionContainerNode();
        if (Object.isElement(descNode)) {
            descNode.observe('select:sku', function(evt) {
                selectDetailSku(evt.memo);
                selectTableSku(evt.memo);
            });
        }
    }; // end initPickerListeners


    // fetch HTML template
    generic.templatefactory.get({path: '/templates/products/shade-picker.tmpl'}).evaluateCallback({
        object: args.productData,
        callback: function(html) {
            args.shadesContainerNode.update(html);
            var tableContainerNode = args.shadesContainerNode.select("div.swatch-table-container")[0];

            singleProductView = args.singleProductView;

            var columns;
            var first_sku = args.productData.skus[0];
            var shades = first_sku.HEX_VALUE_STRING.split(",");

            switch (shades.length) {
                case 1: columns = (args.productData.skus.length > 10) ? 3 : 2; break;
                case 2: columns = 2; break;
                case 4: columns = 1; break;
                default: columns = 1; // this is meant to cover gt 4 shades
            }

            // HACK: force uniformity among swatch overlays
            var skus = args.productData.skus;
            var sku = skus.find(function(s) {
                var design = s.SMOOSH_DESIGN.split(",")[0];
                return !!design && !design.match("::");
            });

            if (sku && sku.SMOOSH_DESIGN) {
                fallbackOverlayDesign = sku.SMOOSH_DESIGN;
                fallbackOverlayDesign = fallbackOverlayDesign.split(",")[0];
                fallbackOverlayDesign.replace(" ", "");
            }
            // HACK

            renderShadePickerTable({
                cellsPerRow : columns,
            //     includeFilters : true,
                tableContainerNode: tableContainerNode,
                productData: args.productData
            });

            initDetailView({
                shadeDetailContainerNode: shadesDetailNode,
                imageContainerNode: imageContainerNode,
                productData: args.productData
            });
            initPickerListeners();            
        }
    });


};

el.productView.tabContainer = function(args) {
    // get this from args.productData. make sure its a sorted list
    var productData = args.productData;
    var imageContainerNode = args.imageContainerNode;
    var tabData = productData.tabs;
    /* Max # of tabs to show on quickshop */
    var maxQuickShopTabs = 3;
    
    // fixes nesting shadows for quickview on spp pages
    var tabs_content = 'tabs-content';
    
    var randomString = function() {
        var text = "";
        var possible = "abcdefghijklmnopqrstuvwxyz";

        for( var i=0; i < 5; i++ )
            text += possible.charAt(Math.floor(Math.random() * possible.length));
            
        return text;
    };   
        
    // TODO: subclass TabbedContent for SPP specifically
    // so all of this can be moved to tabs.js
    var tabArgs = {
        descriptionContainerNode: args.descriptionContainerNode,
        context: args.singleProductView,
        currentTab: 0,
        quickshop: args.quickshop,
        maxTabs: tabData.length,
        callQueue: [],
        onComplete: function(productTabsObj) {
            // Draw drop shadows
            this.descriptionContainerNode.select(".shadow_container").each(function(node) {
                el.page.shadowBox.attachShadow(node);
            	  node.setStyle({visibility: 'visible'});
            });

            // Select first tab
            productTabsObj.first();

            // Hook up first tab functionality
            var priceContainerNode = this.descriptionContainerNode.select("div.sku_select_container")[0];

        if (priceContainerNode) {
                if (generic.productData.validateSkusArray(productData.skus)) {
                    this.context.renderSkuMenu({
                        productData: productData,
                        priceContainerNode: priceContainerNode,
                        quickshop: this.quickshop
                    });
                }
            }

            /* NOTE: Attaching of events to a2b/favorites buttons
             * here is for nonshaded products. Events for shaded
             * products are attached in el.productView.shadePicker
             * due to shaded products consisting of multiple templates */
            var addButtonNode = this.descriptionContainerNode.select("a.description-add-link")[0];
            var progressNode = this.descriptionContainerNode.select("span.add-progress")[0];
        /*#39326-COG-20Jan2011- Xselll Quick Looks on SPP issue Fixed */
        var replenishmentNode = this.descriptionContainerNode.select("div.replenishment-container")[0];                                                                                                   
            if (addButtonNode) {
                this.context.initAddButton({
                    productData: productData,
                    addButtonNode: addButtonNode,
                    progressNode: progressNode,
            replenishmentNode: replenishmentNode,
                    itemType: 'cart'
                });
            }

            var addFavoritesNode = this.descriptionContainerNode.select("a.favorites-add-link")[0];
            var favoritesProgressNode = this.descriptionContainerNode.select("span.favorites-progress")[0];

            if (addFavoritesNode) {
                this.context.initAddButton({
                    productData: productData,
                    addButtonNode: addFavoritesNode,
                    progressNode: favoritesProgressNode,
                    itemType: 'favorites'
                });
            }
            
            var shippingMessageNode = args.descriptionContainerNode.select("span.shipping_notification_message")[0];
            el.productView.updateShippingMessage({
                skuData: productData.skus[0],
                shippingMessageNode: shippingMessageNode
            });

            var invStatusNode = args.descriptionContainerNode.select("span.btn-tos")[0];
            el.productView.displayInventoryStatus({
                skuData: productData.skus[0],
                node: invStatusNode
            });

            // 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) {
                if (evt.memo.PRODUCT_ID == productData.PRODUCT_ID) {
                    el.productView.displayInventoryStatus({
                        skuData: evt.memo,
                        node: invStatusNode
                    });
                    
                    el.productView.alternateSPPImage({
                        node: args.imageContainerNode.select('.large-image-node')[0],
                        skuData: evt.memo
                    });
                    
                    el.productView.updateShippingMessage({
                        skuData: evt.memo,
                        shippingMessageNode: shippingMessageNode
                    });
                }
            });

            // toggle 'SEE FULL PAGE' link for quickshops
            if (this.quickshop) {
                var seeFullPage = this.descriptionContainerNode.select("div.see_full_page")[0];
                seeFullPage.setStyle({
                    display: "block"
                });
                //seeFullPage.writeAttribute("loctmpl",'RECV~QVSPP' + ','+ productData.PRODUCT_ID + '~' + productData.PARENT_CAT_ID);
                seeFullPage.writeAttribute("loctmpl", Analytics.lastQVloc );
                seeFullPage.observe('click', function(e) {
                    params = {};
                    params['PRODUCT_KEY'] = Analytics.lastQVkey;
                    params['TYPE_LOCATION'] = Analytics.lastQVloc;
                    params['URL_CLICK'] = 1;
                    Analytics.lastQVkey = '';
                    Analytics.lastQVloc = '';
                    el.productView.reportProductView(params);
                });
            }

            // handle shaded products
            if (productData.shaded) {
                var shadesContainerNode = this.descriptionContainerNode.select("div.shades-container")[0];
                
                /*
                 * NOTE on 'shadesDetailNode'
                 * Layout for EL requires causes large smoosh to
                 * be rendered outside of template which contains
                 * shadesContainerNode.
                 */
                var shadesDetailNode = this.descriptionContainerNode.select("div.featured_content_wrapper")[0];

                this.context.initShadePicker({
                    productData: productData,
                    shadesContainerNode: shadesContainerNode,
                    shadesDetailNode: shadesDetailNode,
                    imageContainerNode: args.imageContainerNode,
                    quickshop: this.quickshop
                });
            }
            
            // check for canada shipping restriction
            var canadaMsgNode = this.descriptionContainerNode.select(".special_restrict")[0];
            if (productData.SPECIAL_RESTRICT) {
                canadaMsgNode.setStyle({"display" : "block"});
                canadaMsgNode.up().addClassName("with-canada");// to help with layout
            }
            
			//Added the following for #41139
            var videoTab1 = this.descriptionContainerNode.select(".tabvideo_block")[1]; // To display the video in video tips
            var videoTab0 = this.descriptionContainerNode.select(".tabvideo_block")[0]; // To display the video in video tips
			var videoTab = videoTab0;
			if(videoTab1){
				videoTab = videoTab1;
			}
				
				
			if (videoTab) {
                // get first defined media file
                var media = productData.TAB_MEDIA.findAll(function(el) {
                    return !!el;
                });
                
                if (video = media[0]) {                    
                    videoTab.id = "video-tab-" + productData.PRODUCT_ID;
                    
                    var userAgent = ("" + navigator.userAgent).toLowerCase();
                    var isFireFox =  (userAgent.indexOf("windows") >= 0) && (userAgent.indexOf("firefox") >= 0);
                    var prodNameForCoreMetrics = productData.PROD_RGN_NAME + productData.PROD_RGN_SUBHEADING;
                    
                    var flashvars = {
                        isFireFoxPC: isFireFox,
                        assetsDomain: "",
                        videoPath: "",
                        imagesPath: "/flash/video/images/",
                        videoName : video,
                        videoWidth : 336,
                        videoHeight : 189,
                        prodName : escape(prodNameForCoreMetrics.substr(0,50))                        
                    };
                    var params = {
                        quality: "high",
                        bgcolor: "#ffffff",
                        allowScriptAccess: "sameDomain",
                        allowFullScreen: true,
                        menu: false,
                        wmode: "opaque",
                        align: "middle",
                        play: true
                    };
                    var attr = {
                        id: "faces",
                        name: "faces",
                        data: "/flash/video/videoplayer_sm.swf",
                        width: 336,
                        height: 206,
                        style: "margin: 15px 0 20px 0;"
                    };
                    
                    // ! Load ELVideoPlayer, HTML5 or Flash  
                    //jQuery(document).ready(function(){   
                    //  var video_player1 = new el.ELVideoPlayer({
                    //    id: videoTab.id,
                    //    width: 336,
                    //    height: 206,
                    //    controls: true,
                    //    autoplay: false,
                    //    src_h264: video,
                    //    flashplayer: "/flash/video/videoplayer_sm.swf",
                    //    flashvars: flashvars,
                    //    flashparams: params,
                    //    flashattr: attr,
                    //    default_element_category: "Product Page Videos",
                    //    default_element_id: (productData.PROD_RGN_NAME + " " + productData.PROD_RGN_SUBHEADING).substring(0, 49),
                    //    force_flash: false,
                    //    metric_tags: {
                    //      ready: "0",
                    //      play: "2",
                    //      pause: "1",
                    //      end: "3"
                    //    }
                    //  });                      
                    //}); 
                    
                    swfobject.embedSWF("/flash/video/videoplayer_sm.swf", videoTab.id, "336", "206", "9.0.0", false, flashvars, params, attr );
                }
            }
                        var contentBlock = '';
                        if(contentBlock = this.descriptionContainerNode.select('.nonshaded_description_content_block','.shaded_description_content_block')[0]){
                              var detailsTabContainerDiv = contentBlock.up();
                              var yOffset = 12;
                              var iterations = 32;
                                var timeout = [];

                              contentBlock.setStyle({height: '450px'});
                              
                              for (var i = 2;i <= iterations;i++) {
                                var step = 250;
                                var timeToWait = step*i;
                                timeout[i] = setTimeout(function(){
                                              var tabVisibilityContainer = detailsTabContainerDiv.up(6);
                                              
                                              // render the tab to calculate height, if it is not currently displayed
                                              if (tabVisibilityContainer.getStyle('display') == 'none'){
                                                  tabVisibilityContainer.setStyle({
                                                      display: 'block',
                                                      visibility: 'hidden'
                                                  });
                                              }
                                              
                                              // calculate the height
																							var shadedContainer1Height = ( detailsTabContainerDiv.select('.tab_dummy_bar')[0]) ? detailsTabContainerDiv.select('.tab_dummy_bar')[0].getHeight() : 0;
																							var shadedContainer2Height = ( detailsTabContainerDiv.select('.prod_attributes')[0]) ? detailsTabContainerDiv.select('.prod_attributes')[0].getHeight() : 0;
																							var nonShadedContainer1Height = ( detailsTabContainerDiv.select('.prod_sell_info')[0] ) ? detailsTabContainerDiv.select('.prod_sell_info')[0].getHeight() : 0;
																							var nonShadedContainer2Height = ( detailsTabContainerDiv.select('.prod_attributes')[0] ) ? detailsTabContainerDiv.select('.prod_attributes')[0].getHeight() : 0;
																							var maxH = productData.shaded
																											 ? ((430 - (  shadedContainer1Height + shadedContainer2Height)) - yOffset)
																							         : ((detailsTabContainerDiv.getHeight() - (nonShadedContainer1Height + nonShadedContainer2Height)) - yOffset)
																											 ;
					                          					
					                          					// set the height
					                          					if (maxH != parseInt(contentBlock.getStyle('height'))) {
					                          						contentBlock.setStyle( { height: maxH + 'px', minHeight: maxH + 'px', display: 'block' } );
					                          					}                                              
                                            
                                              // reset the tabs visibility
                                              if (tabVisibilityContainer.getStyle('visibility') == 'hidden'){
                                                  tabVisibilityContainer.setStyle({
                                                      visibility: 'visible',
                                                      display: 'none'
                                                  });
                                              }
                                         }, timeToWait );
                              }
                        }                        
					    $('tabs-content').fire("tabs:loaded",{});                        
        },

        callback: function(productTabsObj) {
            var cbScope = this;
            
            var renderTab = function() {
                var self = this;
                var tab_id = self.id;
                
                generic.templatefactory.get({path:self.template}).evaluateCallback({
                    object: productData,
                    callback: function(html) {
                        var contentDiv = productTabsObj.createTab({
                            tabContainerNode: productTabsObj.descriptionContainerNode.select(".tab_control_set")[0],
                            contentContainerNode: productTabsObj.descriptionContainerNode.select(".tabs-content-container")[0],
                            tabID: tab_id,
                            tabLabel: self.label,
                            tabDesc: self.desc,
                            content: html
                        });

                        var goto_link = contentDiv.select(".goto_first_tab")[0];
                        if (goto_link && !productData.shaded) {
                            var text = el.rb.language.get('purchase_this_product');
                            $(goto_link).update(text);
                        }
                        
                        // Render product attributes
                        contentDiv.select("dl.prod_attributes").each(function(node) {
                            var p = productData;
                            var fields = [];
                            var attribute_count = $A(p.ATTRIBUTE_LABEL).length;
                            for (var i = 1; i < attribute_count + 1; i++) {
                                var label  = p["ATTRIBUTE_LABEL_" + i];
                                var field  = p["ATTRIBUTE_DESC_" + i];
                                fields.push({"label": label, "field": field });
                            }
                            
                            fields.each(function(attr) {
                                if (attr.field && attr.field.length > 0) {
                                    var dt = new Element("dt")
                                        .insert(
                                            new Element("span")
                                                .addClassName("note")
                                                .update(attr.label)
                                    );
                                    
                                    var dd = new Element("dd").update(attr.field);
                                    node.insert(dt);
                                    node.insert(dd);
                                }
                            });
                            
                        });

                        var next = cbScope.callQueue.shift();

                        if (next) {
                            next();
                        } else {
                            /* All tabs have been created */
                            console.log('ALL TABS CREATED');
                            cbScope.onComplete(productTabsObj);
                        }
                        
                        if ($('smoosh0img')) {
                            $('smoosh0img').pngHack();
                        }
                    }
                });
            };

            /* Create a queue of calls so tabs can be created in order */
            var rand = randomString();
            for (var i = 0;i < this.maxTabs;i++) {
                if ((args.quickshop && i > maxQuickShopTabs - 1) || i > tabData.length - 1) {
                    break;
                }
                var filename = tabData[i].template.split("/").last();
                // random characters are only used by controltabs.js
                // to distinguish between tab selections. solves
                // problem with having quickviews on spp
                tabData[i].id = rand + "_" + filename.split(".").first() + "-" + i;
                this.callQueue.push(renderTab.bind(tabData[i]));
            }

            var first = this.callQueue.shift();
            /* Begin the chain of calls to create tabs */
            first();
        }

    
    };    
    /* See js/v2/internal/classes/tabs.js */
    var tabbedPane = new TabbedContent(tabArgs);
    
    
         
};       
         
el.productView.alternateImages = function(args) {
    var productData = args.productData;
    var containerNode = args.imageContainerNode;
    var alternateImagesContainer = containerNode.select("div.alternateImageContainer")[0];
    var largeImageNode = containerNode.select(".prod_image > .main-product-image img")[0];
         
    /* 35893 16 NOV PROJECTS / EL US / Awards Page*/
    var spp_image_award = productData.AWARD_1;
    if(spp_image_award) {
        var innerContainer = new Element("div", {
               "class": 'award_image_container'
        });
    var img = new Element("img", { 
        "src": "/products/images/awards/"+spp_image_award,
        "class": 'award_image'
    });  
    $(innerContainer).insert(img);
    $(alternateImagesContainer).update(innerContainer);
    }    
    /* 35893 16 NOV PROJECTS / EL US / Awards Page*/
         
    var images = productData.alternateImages || [];
    images.each(function(image) {
    var isAwardsImage = typeof(image.largesrc) === "undefined";
        //As per brand - either award1 or alternative shade quad will be visisble on spp page
        if (!isAwardsImage) {
        var innerContainer = new Element("div", {
               "class":  'alternate_image_container"'
            });
            var img = new Element("img", { 
                  "src": image.src, 
                  "class": 'alt_image'
            });
            // preload large images so there
            // is no delay on mouseover
            (new Image()).src = image.largesrc;
               
            img.setAttribute('largesrc', image.largesrc);
            
            $(img).observe('mouseover', function(e) {
                largeImageNode.src = image.largesrc;
            });
            
            $(img).observe('mouseout', function(e) {
                largeImageNode.src = productData.LARGE_IMAGE;
            });
            $(innerContainer).insert(img);
            $(alternateImagesContainer).update(innerContainer);
    }    
    });  
         
};       
         
/**      
    * 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.
    * el.productView.single is used to set up view on callback.
    * @requires param{args} Individual product data object passed.
     * @methodOf el.productView
*/       
el.productView.quickshop = function(args) {
         
    var view = el.productView.single({
        productData : args.productData
    });  
         
    //notify analytics.js of QV and productID
    document.fire("MPP:productQV",args.productData.PRODUCT_ID,args.productData.PARENT_CAT_ID);
         
   // if byid is called, this could have already been taken care of
   if (!args.location_handled){
       // track recently viewed
       params={};
       params['PRODUCT_KEY'] = args.productData.PARENT_CAT_ID +'~' + args.productData.PRODUCT_ID;
       if (typeof page_data.catalog != "undefined"){
           if (typeof page_data.catalog.spp != "undefined"){
               params['TYPE_LOCATION'] = "XSELL~QVSPP";
           }
           if (typeof page_data.catalog.mpp != "undefined"){
               params['TYPE_LOCATION'] = "MAIN~QVMPP";
           }
           if (typeof page_data.catalog.cart != "undefined"){
               params['TYPE_LOCATION'] = "XSELL~CART";
           }
       } 
         
       // Please leave in for now EF
       if (params['TYPE_LOCATION'] && typeof params['TYPE_LOCATION'] != "undefined"){
           console.log("VIEWED on generic QV",params['TYPE_LOCATION']); 
           el.productView.reportProductView(params);
           if ( typeof Analytics =='object' ){
               Analytics.lastQVloc = params['TYPE_LOCATION']; // This is only to be used for product links within QV window
               Analytics.lastQVkey = params['PRODUCT_KEY']; 
           } 
       } 
   }     
         
    generic.templatefactory.get({path: '/templates/products/quickshop.tmpl'}).evaluateCallback({
        callback: function(html) {
            generic.overlay.launch({
                content: html,
                includeBackground: true,
                lockPosition: true,
                center: false,
                cssStyle: {
                    left: el.productView.getLeftPosition() + "px",
                    top: el.productView.getTopPosition() + "px"
                }
            });
         
            var overlayContainerNode = $$('.overlay-container')[0];
            overlayContainerNode.id = 'quickshop-overlay-container';
            var renderArgs = {};
            var imageContainerNode = overlayContainerNode.select("div.quickshop-left-col")[0];
            if (imageContainerNode) {
                renderArgs.imageContainerNode = imageContainerNode;
            };
            var descriptionContainerNode = overlayContainerNode.select("div.prod_features_wrapper")[0];
            if (descriptionContainerNode) {
                renderArgs.descriptionContainerNode = descriptionContainerNode;
            };
         
            var closeLink = overlayContainerNode.select("a.close-link")[0];
            closeLink.observe('click', function(evt) {
                evt.preventDefault();
            });
         
            // a couple things make necessary the ability for
            // el.productView.single to make a distinction between
            // when it is or is not rendering a quickview. i.e. -
            // sku level work-well-with and fewer tabs shown
            // in quickshop tab container
            renderArgs.quickshop = true;
            
            view.render(renderArgs);
        }
    });  
         
};       
         
el.productView.initQuickshopLinks = function() {
    $$("a.quickshoplink").each(function(o){
        el.productView.initQuickshopLink(o);
    });  
};       
         
el.productView.quickshopById = function(categoryID, productID, skuIds, target, preselectedSkuId) {
         
    // track recently viewed
    var product_type='';
    var product_location='';
         
    if (target){                                                                                                                    
        params={};                                                                                                                  
        params['PRODUCT_KEY'] = categoryID +'~'+ productID;                                                                         
        if (target.hasAttribute('loc')){                                                                                            
            params['TYPE_LOCATION'] = target.readAttribute('loc');                                                                  
        }else{                                                                                                                      
            if (typeof Analytics == "object"){                                                                                      
                params['TYPE_LOCATION'] = Analytics.findAttrUp(target,'loc');                                                       
            }                                                                                                                       
        }                                                                                                                           
                                                                                                                                
        // Please leave in for now EF                                                                                               
        if (params['TYPE_LOCATION'] && typeof params['TYPE_LOCATION'] != "undefined"){                                              
           console.log("VIEWED call on LOC",params['TYPE_LOCATION'],target);                                                        
           el.productView.reportProductView(params);                                                                                
           if ( typeof Analytics =='object' ){                                                                                      
               Analytics.lastQVloc = params['TYPE_LOCATION']; // This is only to be used for product links within QV window
               Analytics.lastQVkey = params['PRODUCT_KEY'];
           }                                                                                                                        
           loc_info = params['TYPE_LOCATION'].split("~");                                                                         
           console.log("LOC INFO  to prodcat ",loc_info);                                                                         
           product_type =  loc_info[0];                                                                                           
           product_location = loc_info[1];                                                                                        
        }else{  // defaults based on page_data                                                                                      
             // track recently viewed                                                                                               
            if (typeof page_data.catalog != "undefined"){                                                                           
                if (typeof page_data.catalog.spp != "undefined"){                                                                   
                    params['TYPE_LOCATION'] = "XSELL~QVSPP";                                                                        
                }                                                                                                                   
                if (typeof page_data.catalog.mpp != "undefined"){                                                                   
                    params['TYPE_LOCATION'] = "MAIN~QVMPP";                                                                         
                }                                                                                                                   
                if (typeof page_data.catalog.cart != "undefined"){                                                                  
                    params['TYPE_LOCATION'] = "XSELL~CART";                                                                         
                }                                                                                                                   
            }                                                                                                                       
            if (params['TYPE_LOCATION'] && typeof params['TYPE_LOCATION'] != "undefined"){                                          
                console.log("VIEWED on generic QV",params['TYPE_LOCATION']);                                                        
                el.productView.reportProductView(params);                                                                           
                if ( typeof Analytics =='object' ){                                                                                 
                    Analytics.lastQVloc = params['TYPE_LOCATION']; // This is only to be used for product links within QV window    
                    Analytics.lastQVkey = params['PRODUCT_KEY'];
                }                                                                                                                   
            }                                                                                                                       
        }                                                                                                                           
    }                                                                                                                               
         
         
    generic.productData.getProductData({
        categoryId: categoryID,
        productId: productID,
        page_context: 'MISCQV',
        product_location: product_location,
        product_type: product_type,
        fetchOverride: skuIds.length > 0,
        productFields:  rb.page_data_configuration["catalog.spp.productFields"],
        skuFields : rb.page_data_configuration["catalog.spp.skuFields"],
        callback: function(d) {
            console.log("getProductData callback");
            console.log(d);
            // filter products skus
            if (skuIds.length) {
                var temp = [];
                skuIds.each(function(id) {
                    sku = d.skus.findAll(function(s) {
                        return s.SKU_ID == id;
                    });
                    
                    temp.push(sku[0]);
                });
                
                d.skus = temp;
            
                // make sure correct first tab is 
                // used for shaded products when 
                // sku subsets are used
                if (d.shaded && skuIds.length < 10) {
                    var first = d.skus[0];
                    var shadeCount = first.HEX_VALUE_STRING.split(',').length;
                    var template;
            
                    switch (shadeCount) {
                        case 1 : template = '/templates/products/spp/tabs/shades_single.tmpl'; break;
                        case 2 : template = '/templates/products/spp/tabs/shades_duo.tmpl'; break;
                        case 4 : template = '/products/spp/tabs/shades_quad.tmpl'; break;
                        default: template = '/products/spp/tabs/shades_quad.tmpl';// more than 4 use quad
                    }
                    
                    d.tabs[0].template = template;
                }
            }
            
            if (preselectedSkuId) {
                d.preselectedSkuId = preselectedSkuId;
            } else {
                // make sure we reset. fresh data is not retrieved
                // everytime the quickview is rendered so we dont
                // want any skus preselected when they are not supposed
                // to be
                d.preselectedSkuId = undefined;
            }
            
            el.productView.quickshop({
                productData: d,
                location_handled: 1
            });
        }
    });  
};       
         
/* default callbacks for addSku(s)ToCart calls */
el.productView.updateCartSuccess = function() {
         
    var resultData = r.getData();
    //update global util nav if this was add to bag
    if (resultData.trans_data) {
        var cartCount = resultData.trans_data.items_count;
        $('shoppingbag_count').update(cartCount);
    }    
};       
         
el.productView.updateCartFailure = function(r) {
        console.error("Update cart fail");
};       
         
/* /default callbacks for addSku(s)ToCart calls */
         
el.productView.addSkuToCart = function(prodString, qty, shadesDetailNode) {
         
         
//prodString will be in the form CATXXXPRODYYYSKUZZZ
    var re = new RegExp("^(CAT[0-9]+)(PROD[0-9]+)(SKU[0-9]+)$");
    
    re.exec(prodString);
    
    var categoryId = RegExp.$1;
    var productId = RegExp.$2;
    var skuId = RegExp.$3;
    
    // dont try to add to cart if we dont have the proper args
    if (!categoryId || !productId || !skuId) {
        console.error("malformed argument. Cannot add to cart");
        return;
    }
    
    // remove "SKU" prefix from skuId and cast
    skuId = parseInt(skuId.replace("SKU", ""));
    
    // need to process how many of the current sku are already in the cart
    // specifying quantity will reset the count of the sku
    // for example if one sku x is in the cart, adding
    // 2 more of sku x will result in 2 being in the cart....not 3
    var to_add = qty || 1;
    var items = (typeof(generic.checkout.cart.data.order) != 'undefined' ) ? generic.checkout.cart.data.order.items : [];
           
    var item = items.findAll(function(i) {
        return i['sku.SKU_BASE_ID'] === skuId;
    })[0];
    
    if (item) {
        to_add += item.ITEM_QUANTITY;
    }
    var itemType = 'cart';
    var item_params = {};
    var replenishNode = typeof(shadesDetailNode) != 'undefined' 
                      ? shadesDetailNode.select('select.replenish_select')[0] 
                      : 0;
    if(replenishNode && replenishNode.value !=0){
        itemType = 'replenishment';
    }
    if (itemType == 'replenishment') {
            item_params = {
                skus: [skuId],
                action: 'add',
                add_to_cart: 1,
                QTY: to_add,
                itemType: 'replenishment',
                REPLENISHMENT_FREQ: replenishNode.value,
                INCREMENT: 1
            }
    }else{
         item_params = {
                skus: [skuId],
                itemType: 'cart',
                QTY: to_add,
                INCREMENT: 1
        }
    }
 
    /*/* TODO: refactor this so code so it be used for regimen also */
    generic.checkout.cart.updateCart({
        params: item_params,
        onSuccess: el.productView.updateCartSuccess,
        onFailure: el.productView.updateCartFailure
    });
}

el.productView.addSkusToCart = function(prodStrings) {
    var skuIds = [];
    
    var re = new RegExp("^(CAT[0-9]+)(PROD[0-9]+)(SKU[0-9]+)$");
    
    for (var i = 0; i < prodStrings.length; i++) {
        var currentString = prodStrings[i];
        
        // process CATXXXPRODYYYSKUZZZ strings
        re.exec(currentString);
    
        var categoryId = RegExp.$1;
        var productId = RegExp.$2;
        var skuId = RegExp.$3;
        
        // dont allow if we dont have the proper args
        if (!categoryId || !productId || !skuId) {
            console.error("malformed argument. Cannot add " + currentString + " to cart");
        } else {
            skuId = parseInt(skuId.replace("SKU", ""));
            skuIds.push(skuId);
        }
    }
    
    if (skuIds.length) {
        var item_params = {
            skus: skuIds,
            itemType: 'cart',
            INCREMENT: 1
        };
        
        generic.checkout.cart.updateCart({
            params: item_params,
            onSuccess: el.productView.updateCartSuccess,
            onFailure: el.productView.updateCartFailure
        });
    }
}

document.observe('dom:loaded', function(e) {
    var rbLanguageHash = generic.rb('language');
    el.productView.tempOutOfStock = rbLanguageHash.get('temp_out_of_stock');//2
    el.productView.soldOut = rbLanguageHash.get('sold_out'); //7
    el.productView.comingSoon = rbLanguageHash.get('coming_soon'); //3
    el.productView.inactive = rbLanguageHash.get('inactive'); //5

    el.productView.initQuickshopLinks();
});


el.productView.displayInventoryStatus = function(args) {
    if (!args.node || !args.skuData) {
        return null;
    }
    var msg = '';
    if (el.productData.isTempOutOfStock(args.skuData)) {
        msg = el.productView.tempOutOfStock;
    } else if (el.productData.isComingSoon(args.skuData)) {
        msg = el.productView.comingSoon;
    } else if (el.productData.isSoldOut(args.skuData)) {
        msg = el.productView.soldOut;
    } else if (el.productData.isInactive(args.skuData)) {
        msg = el.productView.inactive;
    }
    args.node.update(msg);
    //hide the node for layout if msg is empty
    // if you hide it, you need to re-show it when necessary
    if ((msg === '') && args.node.up()) {
        args.node.up().hide();
    } else {
        args.node.up().show(); 
    }
};

el.productView.alternateSPPImage = function(args) {
    if (!args.node || !args.skuData) {
        return null;
    }
    
    var largeImageNode = args.node;
    var skuData = args.skuData;
    
    var src;
    if (skuData.SKU_IMAGE_1) {
        src = '/products/images/311x311/' + skuData.SKU_IMAGE_1 + '_311x311.jpg';
    } else {
        src = largeImageNode.getAttribute("originalsrc");
    }
    
    largeImageNode.src = src;
};

el.productView.updateShippingMessage = function(args) {
    var node = args.shippingMessageNode;
    var sku  = args.skuData;
console.log('this is sku data');
console.log(sku);
    if (!node || !sku) {
        return null;
    }

    // Last minute update to messaging for GWP products - should come down when GWP summer 2011 is over
    //var GWP_Prods = 'PROD16000,PROD15999,PROD15690,PROD15130,PROD14026,PROD14025,PROD13160,PROD13159,PROD13158,PROD13018,PROD13015,PROD10212,PROD10202,PROD9512,PROD9454,PROD9337,PROD9325,PROD9321,PROD7213,PROD7212,PROD7211,PROD7209,PROD7208,PROD6601,PROD6596,PROD6504,PROD4752,PROD4751,PROD4595,PROD4533,PROD4533,PROD4528,PROD4419,PROD4418,PROD4417,PROD4416,PROD4374,PROD4358,PROD4352,PROD4346,PROD4345,PROD4311,PROD4294,PROD4197,PROD4196,PROD4195,PROD3894,PROD3581,PROD3542,PROD3461,PROD3460,PROD3369,PROD3341,PROD3298,PROD3231,PROD3174,PROD3151,PROD3150,PROD3066,PROD3062,PROD3049,PROD3046,PROD3045,PROD3044,PROD3042,PROD2910,PROD2882,PROD2880,PROD2785,PROD2683,PROD2665,PROD2651,PROD2650,PROD2649,PROD2648,PROD2647,PROD2646,PROD2645,PROD2644,PROD2643,PROD2342,PROD2282,PROD2281,PROD2224,PROD2212,PROD2196,PROD2193,PROD2182,PROD2164,PROD2161,PROD2117,PROD2092,PROD2090,PROD2089,PROD2079,PROD2065,PROD2043,PROD1913,PROD1883,PROD1858,PROD1834,PROD1824,PROD1804,PROD1799,PROD1798,PROD1796,PROD1792,PROD9514,PROD9517,PROD9516';
    //var IsItGWP = GWP_Prods.match(args.skuData.PRODUCT_ID);
    //var message = IsItGWP ? '<a href="/promotions/gwp.tmpl?cm_sp=Promotions-_-RedMessaging-_-Spring11GWP" style="color: #FA2E2E;">Free gift with $34 skincare or foundation purchase!</a>' : sku.shippingMessage;
    
    var message = sku.shippingMessage;
//change default shipping message for Pre-order products bug 41200
    if (sku.MISC_FLAG ==15) {
       message = el.rb.language.get('preorder_prod_default_shipping_message');
    }
    node.update(message);
};