bb.page.productView = {};

bb.page.productView.productFields = ["CATEGORY_ID", "PRODUCT_ID", "PARENT_CAT_ID", "PRODUCT_NAME", "DESCRIPTION", "SHORT_DESC", "url", "PROD_SKIN_TYPE", "prod_skin_type_string", "IMAGE_NAME", "DISPLAY_ORDER", "SMALL_IMAGE", "LARGE_IMAGE", "THUMBNAIL_IMAGE", "PRODUCT_USAGE", "AVERAGE_RATING", "TOTAL_REVIEW_COUNT", "RATING_IMAGE", "sku", "shaded", "sized", "WORKS_WITH_1", "WORKS_WITH_2", "MISC_FLAG", "SPP_FEATURE_TEMPLATE", "TIP1_TITLE", "TIP1_IMAGE", "TIP1_HEADLINE", "TIP1_DESCRIPTION", "TIP1_LINK", "TIP2_TITLE", "TIP2_IMAGE", "TIP2_HEADLINE", "TIP2_DESCRIPTION", "TIP2_LINK", "VIDEO_TITLE", "VIDEO_HEADLINE", "VIDEO_DESCRIPTION", "VIDEO_FILE","SUBHEADER"];
bb.page.productView.skuFields = ["SKU_ID", "PRODUCT_ID", "DISPLAYNAME", "SHADENAME", "SHADE_DESCRIPTION", "SKIN_TYPE", "skin_type_string", "PRODUCT_SIZE", "shopping_id", "STRENGTH", "PRODUCT_PRICE", "SMOOSH_DESIGN", "smoosh_path", "INVENTORY_STATUS", "REFILLABLE", "PRICE", "FORMATTED_PRICE", "HEX_VALUE", "hex_value_string", "FINISH", "COLOR_FAMILY_NAME",];
var CATEGORY_ID;

bb.page.productView.fetchData = function(args) {
    var productID = args.productID;
    var queryCategoryID = args.categoryID;
    CATEGORY_ID = args.categoryID ;
    var callbackFn = args.callback;
    
    if (productID && productID.length > 0) {
        var productFields = bb.page.productView.productFields;
        var skuFields = bb.page.productView.skuFields;
//        var categoryFields = ["CATEGORY_ID", "DISPLAY_NAME"];
        var categoryFields = ["CATEGORY_ID", "DISPLAY_NAME", "breadcrumb_url"];
        var wwwSkuFields = ["SKU_ID", "product", "PRODUCT_ID", "DISPLAYNAME", "SHADENAME", "SHADE_DESCRIPTION", "SKIN_TYPE", "skin_type_string", "PRODUCT_SIZE", "shopping_id", "STRENGTH", "PRODUCT_PRICE", "SMOOSH_DESIGN", "smoosh_path", "INVENTORY_STATUS", "REFILLABLE", "PRICE", "FORMATTED_PRICE", "HEX_VALUE", "hex_value_string", "FINISH", "COLOR_FAMILY_NAME"];

        var productQueryValue = productID;
        if (queryCategoryID && queryCategoryID.length > 0) {
            productQueryValue = queryCategoryID + productQueryValue;
        }

        var params = [{
            "product": [productQueryValue],
            "product_fields": productFields,
            "sku_fields": skuFields
        }];
        if (queryCategoryID && queryCategoryID.length > 0) {
            params[0].category = [queryCategoryID];
            params[0].category_fields = categoryFields;
        }
        var jsonrpcArgs = {
            method : "prodcat.byid",
            params : params,
            onSuccess: function(response) {
                var responseObj = response.responseText.evalJSON(true);
                if (responseObj[0].error === null) {
                    var rawProductData = responseObj[0].result;
                    if (typeof rawProductData === "object") {
                        var mergedProductData = bb.productData.mergeSkusIntoProducts(rawProductData.product, rawProductData.sku);
                        if (callbackFn && typeof callbackFn === "function") {
                            callbackFn(mergedProductData, rawProductData);
                        }
                    }
                } else {
                    console.log(responseObj[0].error);
                }
            }
        };
        bb.JSONRPC.fetch(jsonrpcArgs);
    }
};


bb.page.productView.initDescription = function(args) {
    var options = {};
    Object.extend(options, args || {});
    if (!(options.descriptionContainerNode && options.productData)) {
        return;
    }
    options.productData.imagePath = bb.page.PRODUCT_IMG_PATH + options.productData.IMAGE_NAME + "_l.jpg";
    if (options.descriptionContainerNode) {
        bb.templateFactory.get("single-product-description",false,"tmpl").evaluateCallback({
            object: options.productData,
            callback: function(html) {
                options.descriptionContainerNode.insert(html);
                var pickerContainerNode = options.descriptionContainerNode.select("div.color-swatch")[0];
                var shadeMenuContainerNode = options.descriptionContainerNode.select("div.shade-menu-container")[0];
                if (pickerContainerNode) {
                    if (options.productData.shaded == 1) {
                        var picker = new bb.page.productView.ShadePicker({
                            productData         : options.productData,
                            pickerContainerNode : pickerContainerNode,
                            shadeMenuContainerNode : shadeMenuContainerNode
                        });
                    } else {
                        pickerContainerNode.style.display="none";
                    }
                }
                var sizeMenu = new bb.page.productView.SizeMenu({
                    skuDataArray      : options.productData.sku,
                    menuContainerNode : options.descriptionContainerNode.select(".size-menu-container")[0]
                });
				var addButtonNode = options.descriptionContainerNode.select("div.form .btn-add-to-bag")[0];
				var shoppingID = "0";
				if (options.productData.sku[0].shopping_id) {
                    shoppingID = options.productData.sku[0].shopping_id.toString();
				}
				var addButton = bb.CartButton.Add({
                   	domNode : addButtonNode,
                   	progressNode : options.descriptionContainerNode.select("div.form .loading-add-to-bag")[0],
                   	skuID : options.productData.sku[0].SKU_ID,
                   	shoppingID : shoppingID,
                   	onSuccess : function() {
                       	addButtonNode.fire("cart:add:success", this.cartArgs);
                   	},
                   	onFailure : function() {console.log("page button fail");}
               	});
                var toggleAddButton = function(skuData) {
                    var btnImgNode = addButtonNode.select("img")[0];
                    if ( bb.productData.isActive(skuData) ) {
//                        addButton.domNode.show();
                        addButton.enable();
                        btnImgNode.src = "/images/btns/add-to-bag.gif";
                    } else {
//                        addButton.domNode.hide();
                        addButton.disable();
                        btnImgNode.src = "/images/btns/add-to-bag-off.gif";
                    }
                };
                toggleAddButton(options.productData.sku[0]);
				var tosNode = options.descriptionContainerNode.select("div.tos-message")[0];
                if (tosNode) {
                    	var tosMessage = new bb.page.productView.TosMessage({
                        	domNode : tosNode,
                        	skuData : options.productData.sku[0]
                    	});
                }				
                var qtyMenu = options.descriptionContainerNode.select("select.quantity")[0];
                bb.page.productView.initQuantityMenu(qtyMenu);
                options.descriptionContainerNode.observe("sku:select", function(evt) {				
                    var skuData = evt.memo;	
					addButton.setCartArgs({
    	                   	skuID      : skuData.SKU_ID,
        	               	shoppingID : skuData.shopping_id.toString()
            	    });
            	    toggleAddButton(skuData);
				});
                options.descriptionContainerNode.observe("quantity:select", function(evt) {
                    var qtyString = evt.memo;
                    addButton.setCartArgs({
                        qty : parseInt(qtyString)
                    });
                });
                if (options.postRenderCallback) {
                    options.postRenderCallback();
                }
            }
        });
    }
};


bb.page.productView.initQuantityMenu = function(selectNode) {
    if (!Object.isElement(selectNode)) {
        return;
    }
    selectNode.observe("change", function(evt) {
        selectNode.fire("quantity:select", evt.target.value);
    });
};


bb.page.productView.TosMessage = Class.create({
	initialize: function(args) {
		Object.extend(this, args || {});
		if(Object.isElement(this.domNode)) {
			if (this.skuData) {
				this.toggleDisplay(this.skuData);
			}
			var self = this;
			document.observe('sku:select', function(evt) {
				self.toggleDisplay(evt.memo);
			});
		}
	},
	toggleDisplay: function(skuData) {
		if (Object.isElement(this.domNode)) {
			if (bb.productData.isTos(skuData)) {
				this.domNode.update(bb.page.TOS_MSG);
				this.domNode.style.display = "block";
			} else if (bb.productData.isSoldOut(skuData)) {
				this.domNode.update(bb.page.SOLDOUT_MSG);
				this.domNode.style.display = "block";
			} else if (bb.productData.isComingSoon(skuData)) {
				this.domNode.update(bb.page.COMING_SOON_MSG);
				this.domNode.style.display = "block";
			} else {
				this.domNode.update('');
				this.domNode.style.display = "none";
			}
		}
	}
});


bb.page.productView.ShadePicker = function(args) {
    var options = {};
    Object.extend(options, args || {});
    if (!options.pickerContainerNode) {
        return;
    }
    var self = this;
    options.tableContainerNode = options.pickerContainerNode.select("ul.swatches")[0];
    var initTable = function() {
        self.table = new bb.page.productView.ShadePicker.Table({
            tableContainerNode : options.tableContainerNode,
            skuDataArray       : options.productData.sku
        });
    };
    initTable();
    options.shadeMenuContainerNode = options.shadeMenuContainerNode ||
            options.pickerContainerNode.select("div.names")[0];    
    var initMenu = function() {
        self.menu = new bb.page.productView.ShadePicker.Menu({
            menuContainerNode : options.shadeMenuContainerNode,
            skuDataArray      : options.productData.sku
        });
    };
    initMenu();
    options.detailContainerNode = options.pickerContainerNode.select("div.swatches-box div.img")[0];
    var initDetail = function() {
        self.detail = new bb.page.productView.ShadePicker.Detail({
            detailContainerNode : options.detailContainerNode,
            skuDataArray        : options.productData.sku
        });
    };
    initDetail();
    var initListeners = function() {
        self.onState = false;
        options.pickerContainerNode.observe("swatch:mouseover", function(evt) {
            self.onState = true;
            if (self.mouseoutTimeout) {
                clearTimeout(self.mouseoutTimeout);
            }
            self.detail.display(evt.memo);
        });
        var displaySelected = function() {
            if (!self.onState) {
                self.detail.display(self.detail.selectedSkuData);
            }
        };
        options.pickerContainerNode.observe("swatch:mouseout", function(evt) {
            self.onState = false;
            self.mouseoutTimeout = setTimeout(displaySelected, 250);
        });

        options.pickerContainerNode.observe("sku:select", function(evt) {
            self.detail.selectSku(evt.memo);
            var tbl = options.tableContainerNode;
            if (tbl !== evt.target) {
                self.table.selectSku(evt.memo);
            }
            var menu = options.shadeMenuContainerNode;
            if (menu !== evt.target) {
                self.menu.selectSku(evt.memo.SKU_ID);
            }
        });
    }
    initListeners();
};


bb.page.productView.ShadePicker.Table = function (args) {
    var self = this;
    var options = {};
    Object.extend(options, args || {});
    if (!options.tableContainerNode) {
        return;
    }
    if (!bb.validateArray(options.skuDataArray)) {
        return;
    }
    var selectedNode = null;

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

    options.nodeHash = {};
    options.skuDataArray.each( function(skuData) {
        var hexVals = skuData.hex_value_string.split(",");
        var listItemNode = new Element("li");

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

        options.tableContainerNode.insert(listItemNode);

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

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

        aNode.observe("click", function(skuData, evt) {
//            console.log(skuData);
            options.tableContainerNode.fire("sku:select", skuData);
            self.selectSku(skuData);
            evt.preventDefault();
        }.curry(skuData));

        options.nodeHash[skuData.SKU_ID] = listItemNode;

    });
    this.selectSku(options.skuDataArray[0]);
};


bb.page.productView.ShadePicker.Menu = function (args) {
    var self = this;
    var options = {};
    Object.extend(options, args || {});
    if (!options.menuContainerNode) {
        return;
    }
    if (!bb.validateArray(options.skuDataArray)) {
        return;
    }
    var selectNode = new Element("select", {"class":"replaceselect w-shades swatchmenu"});
    options.menuContainerNode.insert(selectNode);
    options.skuDataArray.each( function(skuData) {
        var optionNode = new Element("option");
        optionNode.value = skuData.SKU_ID;
        optionNode.className = "hex" + skuData.hex_value_string.split(",")[0];
        var displayName = "";
        if (bb.productData.isTos(skuData)) {
            displayName = "*";
        }
        var shadeNames = [""];
        if (skuData.SHADENAME) {
            shadeNames = skuData.SHADENAME.split(",");
        }
        var shadeName = shadeNames[0].strip();
        shadeName = shadeName.stripTags()
        displayName += shadeName;
        optionNode.insert(displayName);
        selectNode.insert(optionNode);
    });

    bb.page.replaceSelects();

    selectNode.observe("change", function(evt) {
        var selectedSkuID = evt.target.value;
        var selectedSkuData = options.skuDataArray.find( function(skuData) {
            return skuData.SKU_ID === selectedSkuID;
        });
        options.menuContainerNode.fire("sku:select", selectedSkuData);
    });
    this.selectSku = function(skuID) {
        bb.page.selectOption(selectNode, skuID, true);
    };
};


bb.page.productView.ShadePicker.Detail = function (args) {
    var self = this;
    var options = {};
    this.selectedSkuData = {};
    Object.extend(options, args || {});
    if (!options.detailContainerNode) {
        return;
    }
    if (!bb.validateArray(options.skuDataArray)) {
        return;
    }
    this.display = function(skuData) {
        if (skuData.SMOOSH_DESIGN != null) {        
            var smooshIDs = skuData.SMOOSH_DESIGN.split(",");
        	var smoosh_id = smooshIDs[0].strip();
        } else {
        	var smoosh_id = "smoosh";
        }
        
        
        var preloadImg = new Image();
        preloadImg.onload = function() {
            var hexVal = skuData.hex_value_string.split(",")[0];
            var divNode = new Element("div");       
            var getSmooshStyle = function() {
                var smooshSrc = "/images/products/smoosh/" + smoosh_id + ".png";
                var defaultStyle = {
                    backgroundColor : hexVal,
                    width           : "150px",
                    height          : "150px",
                    marginBottom    : "10px",
                    backgroundImage : "url(" + smooshSrc + ")"
                };
                if (/MSIE (\d+\.\d+)/.test(navigator.userAgent) && parseFloat(RegExp.$1) < 7) {
                    defaultStyle.filter = "progid:dximagetransform.Microsoft.AlphaImageLoader(src='" +
                    smooshSrc + "', sizingMethod='image')";
                    defaultStyle.backgroundImage = "none";
           		}
                return defaultStyle;
            };
            divNode.setStyle(getSmooshStyle());
            var spanNode = new Element("span");
            var shadeNames = [""];
            if (skuData.SHADENAME) {
                shadeNames = skuData.SHADENAME.split(",");
            }
        	var shadeName = shadeNames[0].strip();
            shadeName = shadeName.stripTags()
            spanNode.insert(shadeName);
            var descNode = new Element("div");
            descNode.insert(skuData.SHADE_DESCRIPTION);
    //        divNode.insert(imgNode);
            options.detailContainerNode.update(divNode);
            options.detailContainerNode.insert(spanNode);
            //options.detailContainerNode.insert(descNode);
        };
        preloadImg.src = "/images/products/smoosh/" + smoosh_id + ".png";

    };
    this.selectSku = function(s) {
        this.selectedSkuData = s;
        this.display(s);
    };
    var skuData = options.skuDataArray[0];
    this.selectSku(skuData);
};


bb.page.productView.SizeMenu = function(args) {
    var self = this;
    var options = {};
    Object.extend(options, args || {});
    if (!options.menuContainerNode) {
        return;
    }
    if (!bb.validateArray(options.skuDataArray)) {
        return;
    }
    var findMenuField = function(skus) {
        var fields = [
            { label: 'Concern', field: 'STRENGTH' },
            { label: 'Size', field: 'PRODUCT_SIZE' }
        ];
        var countUnique = function(field) {
            var vals = skus.pluck(field);
            vals.each(function(val, idx) {
                if (val) {
                    val = val.replace(/\s/g, "");
                    val = val.toLowerCase();
                    vals[idx] = val;
                }
            });
            // filter out null
            vals = vals.findAll(function(val) {
               return !(val===null || typeof(val)==="undefined");
            });
            return vals.uniq().length;
        }
        for (var i=0, len=fields.length; i<len; i++) {
            if (countUnique(fields[i].field) > 1) {
                return fields[i];
            }
        }
        return null;
    };
    var fieldObj = findMenuField(options.skuDataArray);
    if (fieldObj){
        var selectNode = new Element("select", {"class":"replaceselect"});
        options.menuContainerNode.insert(selectNode);
        options.skuDataArray.each(function(sku, i) {
            var txt = sku[fieldObj.field];
            txt += ' ' + sku.FORMATTED_PRICE;
            var optionNode = new Element('option', {value: sku.SKU_ID})
            optionNode.update(txt);
            selectNode.insert(optionNode);
        });
        selectNode.observe("change", function(evt) {
            var selectedSkuID = evt.target.value;
            var selectedSkuData = options.skuDataArray.find( function(skuData) {
                return skuData.SKU_ID === selectedSkuID;
            });
            selectNode.fire("sku:select", selectedSkuData);
        });
    } else {
        var skuData = options.skuDataArray[0];
        var spanNode = new Element("div", {"class":"size-data"});
        var txt = "";
        if (skuData.PRODUCT_SIZE) {
            txt = skuData.PRODUCT_SIZE + " ";
        }
        var priceNode = new Element("span", {"class":"price"});
        priceNode.update(skuData.FORMATTED_PRICE);
        spanNode.update(txt);
        spanNode.insert(priceNode);
        options.menuContainerNode.insert(spanNode);
    }

};


bb.page.productView.initQuickshopLink = function(quickshopLinkNode, productData) {
    if (!Object.isElement(quickshopLinkNode)) {
        return;
    }
    quickshopLinkNode.observe("click", function(evt) {
        evt.preventDefault();
        bb.page.productView.launchQuickshop(productData);
    });
};

         
bb.page.productView.launchQuickshop = function(product,ww_cat) {
      // if ww_cat exists then we have to add cm_vc to the url for the product link.
    var productData = null;

    var renderQuickshop = function(productData) {
		try {
  			mpp_tag(productData.PRODUCT_ID, 1, 1); // CoreMetrics
		} catch (err) {
  			console.log(err);
		}

		bb.templateFactory.get("quickshop",false,"tmpl").evaluateCallback({
            callback : function(html) {
//                alert(html);
                var quickshopWrapperNode = new Element("div", {"class":"quickshop-wrapper popup"});
                $(document.body).insert(quickshopWrapperNode);
                quickshopWrapperNode.insert(html);
                var productViewContainerNode = quickshopWrapperNode.select(".details")[0];
//                alert(productViewContainerNode);
                productData.url = bb.productData.convertProductURL(productData.url);
                productData.DESCRIPTION = bb.productData.truncateDescription(productData.DESCRIPTION, productData.url);
				
				var callbackFn = function() {
                                        var url = productData.url;
				        if (ww_cat){
                                             url = url + '&cm_vc=X' + ww_cat;
                                        }   	
					var product_name_link = "<a href='" + url + "'>" + productData.PRODUCT_NAME + "</a>";				
                	var productTitleContainer = quickshopWrapperNode.select("h1")[0];
					productTitleContainer.update(product_name_link);
					
                    bb.overlay.launchPopover(quickshopWrapperNode);
                    var closeButtonNode = quickshopWrapperNode.select("a.close")[0];
                    closeButtonNode.observe("click", function(closeClickEvent) {
                        closeClickEvent.preventDefault();
                        quickshopWrapperNode.remove();
                        bb.overlay.hide();
                    });
                    quickshopWrapperNode.observe("cart:add:success", function(evt) {
                        bb.overlay.hide();
                    });
                    bb.page.replaceSelects();
					
					// sets call out for quicklook items
					var callOutNode = productViewContainerNode.select(".callout")[0];
         			bb.productData.setCallOut(callOutNode,productData);
         			
         			// if (bb.productData.isAwardWinning(productData)) {
//             			calloutNode.update("Award Winning");
//          			} else if (bb.productData.isNew(productData)) {
//             			calloutNode.update("New");
//          			} else if (bb.productData.isNewShades(productData)) {
//             			calloutNode.update("New Shades");
//          			} else {
//             			calloutNode.hide();
//          			}
		 
                };
                var productViewArgs = {
                    descriptionContainerNode : productViewContainerNode,
                    productData              : productData,
                    postRenderCallback       : callbackFn
                };
                bb.page.productView.initDescription(productViewArgs);
            }
        });
    };
    if (typeof product === "string") {
        var productID = product;        
        var fetchCallbackFn = function(mergedProductData, rawProductData) {
            renderQuickshop(mergedProductData[0]);
        };
        var fetchDataArgs = {
            productID  : productID,
            categoryID : ww_cat,
            callback   : fetchCallbackFn
        };
        bb.page.productView.fetchData(fetchDataArgs);        
    } else if (typeof product === "object") {
        renderQuickshop(product);
    }
};




//bb.page.productView.launchQuickshop("PROD1331", "CATEGORY22780");


bb.page.addToCart = function (args) {
    if (bb.cart.add) {
        bb.cart.add({
            skuID: args.skuID,
            shoppingID : args.shoppingID,
            qty: "1",
            onSuccess : function() {
                document.fire("cart:add:success", args);
            }
        });
    }
};