var generic = generic || {};
var el = el || {};
// TODO: replace with actual RB
el.rb = el.rb || {}

el.rb.getRBKeys = function() {
    el.rb.language = generic.rb("language");
    el.rb.language.viewAll = el.rb.language.get("view_all");
    el.rb.language.filterBy = el.rb.language.get("Filter_by");
    el.rb.language.all = el.rb.language.get("All");
    el.rb.language.bestseller = el.rb.language.get("Bestseller");
    el.rb.language.alphabetically = el.rb.language.get("Alphabetically");
    el.rb.language.concern = el.rb.language.get("concern");
    el.rb.language.skinConcern = el.rb.language.get("Skin_Concern");
    el.rb.language.formula = el.rb.language.get("Formula");
    el.rb.language.coverage = el.rb.language.get("Coverage");
    el.rb.language.benefits = el.rb.language.get("Benefits");
    el.rb.language.finish = el.rb.language.get("Finish");
    el.rb.language.colorGroup = el.rb.language.get("Color_Group");
    el.rb.language.form = el.rb.language.get("Form");
	el.rb.language.review = el.rb.language.get("review");
	el.rb.language.reviews = el.rb.language.get("reviews");
}

el.mpp = function () {
    var tableContainerNode, pagingContainerNode;
    var productsDataArray = [];
    var defaultMaxItems = 8;
    var maxItems = defaultMaxItems;
    var startIndex = 0;
    var ulClassName = 'grid_layout';// changed
    var liClassName = 'grid_cell';// changed
    var liLastClassName = 'last';
    var self;
    
    el.rb.getRBKeys();

    var launchQuickshop = function(args) {
        var view = el.productView.quickshop({
            productData: args.productData
        });
    };
    
    var that = el.productView.filterTable();

    that.init = function(mppData) {

        self = this;
        pagingContainerNode = $$("#paging-controls-container")[0];
        tableContainerNode = $$("#products-grid-container")[0];
        productsDataArray = mppData;

        productsDataArray.each(function(item){
            item.display = true;
        });
        // sort on PROD_CAT_DISPLAY_ORDER
        productsDataArray = productsDataArray.sortBy( function(p) {
            return p.PROD_CAT_DISPLAY_ORDER ? p.PROD_CAT_DISPLAY_ORDER : 0;
        });
       
        this.renderTable();
    };
    /**
     * This method provides a hook for the el.filter class. It is called
     * after that class filters & sorts the data.
     * @methodOf el.mpp
     */
    that.build = function(filteredData) {
        productsDataArray = filteredData;
        this.renderTable();
    }
    that.renderTable = function() {
        // display property will be toggled when the table is filtered or sorted
        
        var filteredProducts = productsDataArray.select( function(p) {
            return p.display;
        });
        
        tableContainerNode.update();//not sure what this is for
        
        // Create one ul for all li's to be put into
        var ul = new Element("ul", {'class': ulClassName});
        tableContainerNode.insert(ul);
        // check if there is a merch window
        var merchWindowContainerNode = $("merch-window-content");
        var mw;
        if (merchWindowContainerNode.getAttribute("hasmerchwindow") === "1") {
            mw = new Element("li");
            mw.insert(merchWindowContainerNode.innerHTML);
            ul.insert(mw);        
        }
        
        for (var i = startIndex; i < filteredProducts.length; i++) {
            var indexInTable = i - startIndex;
            var productData = filteredProducts[i];
            productData.liClassName = liClassName;
            /* FIXME: Multiple templates not working
            var template = (productData.PRODUCT_TMPL) ?
                '/templates/products/product_gift_thumb.tmpl'
                :
                '/templates/products/product_thumb.tmpl';
            */
			
			//Setup for reviews
			productData.RATING_DISPLAY = (productData.TOTAL_REVIEW_COUNT != null)?'block':'none';
			productData.RATING_REVIEW_WORD = (productData.TOTAL_REVIEW_COUNT > 1)?el.rb.language.reviews:el.rb.language.review;
			
            var template = '/templates/products/product_thumb.tmpl';
			
            generic.templatefactory.get({path: template}).evaluateCallback({
                object: productData,
                callback: function(ul, indexInTable, productData, html) {
                    var selector = "li." + productData.liClassName;
                    ul.insert(html);
                    that.initProductThumb({
                        thumbNode: ul.select(selector)[indexInTable],
                        productData: productData,
                        //giftcell: (productData.PRODUCT_TMPL) ? true : false
                        giftcell: false
                    });
                    
                    if (mw && indexInTable == filteredProducts.length - 1) {
                        mw.className = 'grid_cell';
                    }
                    
                }.curry(ul, indexInTable, productData)
            });
        }
    };

    that.initProductThumb = function (args) {
        /* initialize rollover and click events for Quickshop */
        var quickshopLinks = args.thumbNode.select('a.quickshop-link');
        
        
        if (quickshopLinks) {
            quickshopLinks.each(function(link) {
                var quickshopButton = link.select('.quickshop-btn')[0];
                link.observe("click", function (e) {
                    e.preventDefault(); //make sure this works in IE
                    launchQuickshop({ productData: args.productData });
                });
                link.observe("mouseover", function (e) {
                    quickshopButton.addClassName('qs-active');
                });
                link.observe("mouseout", function (e) {
                    quickshopButton.removeClassName('qs-active');
                });
            });
        }
        
        // render attributes (Coverage, Skin Types, Benefits, etc)
        var attrContainer = args.thumbNode.select('.prod_attributes')[0];
        
        if (attrContainer) {
            this.displayAttributes({
                containerNode : attrContainer,
                productData   : args.productData
            });
        }
        
        // Add product price
        var priceContainer = (args.giftcell) ?
            args.thumbNode.select('.prod_price_value')[0]
            :
            args.thumbNode.select('.prod_price')[0];
            
        if (priceContainer) {
            var price = el.productView.formatPriceRange(args.productData);
            priceContainer.update(price)
        }
        
        // Check inventory status of the product
        var inventoryStatusNode = args.thumbNode.select('.prod_status')[0];
        if (inventoryStatusNode) {
            var status  = el.productData.isNonShoppableProduct(args.productData);
            var message = el.productView.inventoryStatusMessage(status);
            inventoryStatusNode.update(message);
        }
        
        // 'See Details' link text
        var seeDetailsLink = args.thumbNode.select('.prod_action_set .action_btn a')[0];
        if (seeDetailsLink) {
            var text = (args.productData.shaded) ? 
                el.rb.language.get("see_shades_and_details")
                :
                el.rb.language.get("see_details")
            ;
            
            seeDetailsLink.update(text);
        }
        
        // Flag images for product
        var flagImgNode = args.thumbNode.select(".prod_details .prod_title .note")[0];
        if (args.productData.MISC_FLAG) {
            var flagImg = el.productView.flagImages.get(args.productData);
            var img = new Element("img");
            flagImgNode.update(img);
            img.src = flagImg.mppimg;
            img.alt = flagImg.alt;
        } else {
            $(flagImgNode).setStyle({"display" : "none"});
        }
        
        // draw shadow around cell
        el.page.shadowBox.attachShadow(args.thumbNode.childNodes[generic.env.isIE ? 0 : 1]);
    };
    
    that.renderPageControls = function(args) {
        var totalProducts = args.productData.length;
        var rangeEnd = args.startIndex + args.maxItems;
        if (rangeEnd > totalProducts) {
            rangeEnd = totalProducts;
        }
        var range = (args.startIndex + 1) + " - " + rangeEnd;
        //
        // create links to pages
        var pageNumber = 1;
        var pageLinks = [];
        for (var i=0; i< totalProducts; i++) {
            if (i % defaultMaxItems === 0) {
                var link = new Element("a", {
                    href:"#"
                });
                if ( (maxItems <= defaultMaxItems) && // if we are not showing All Items
                        (i == args.startIndex) ) { // if this is the current page number
                    link = new Element("span"); // use SPAN instead of A
                }
                link.className += " start-" + i;
                link.insert(pageNumber);
                pageNumber++;
                pageLinks.push(link);
            }
        }
        generic.templatefactory.get({path: '/templates/products/mpp-paging-controls.tmpl'}).evaluateCallback({
            object: {
                totalProducts: totalProducts,
                range: range
            },
            callback: function(html) {
                pagingContainerNode.update(html);
                var linksContainer = pagingContainerNode.select("span#page-links")[0];
                pageLinks.each( function (link) {
                    linksContainer.insert(" ");
                    linksContainer.insert(link);
                    if (link.tagName.toLowerCase() === "a") {
                        link.observe("click", function(e) {
                            var reResults = e.target.className.match(/start\-(\d)+/);
                            if (Object.isArray(reResults)) {
                                maxItems = defaultMaxItems;
                                startIndex = parseInt(reResults[1]);
                                self.renderTable();
                            }
                        });
                    }
                }); // end pageLinks.each()
                var viewAllLinkNode = pagingContainerNode.select("a#view-all-link")[0];
                if (viewAllLinkNode) {
                    viewAllLinkNode.observe("click", function(e) {
                        maxItems = totalProducts;
                        startIndex = 0;
                        self.renderTable();
                    });
                }
            } // end callback
        }); // end generic.templatefactory.get() 
        
    };
    /**
     * This method determines which optional attribute fields are present in a product data object.
     * It then renders a UL that contains those field values along with labels and drops that UL
     * into a container node that it receives as a parameter.
     * The fields which get selected as attributes can be modified in the "fields" array
     * @param {Node} args.containerNode the node into which the UL will be inserted
     * @param {Object} productData JSON-formatted data that contains product information.
     */
    that.displayAttributes = function(args) {
        if (!args.containerNode) { 
            return;
        }
        var p = args.productData;
        var fields = [
            { label: el.rb.language.benefits, field: p.ATTRIBUTE_BENEFIT },
            { label: el.rb.language.formula, field: p.FORMULA },
            { label: el.rb.language.coverage, field: p.ATTRIBUTE_COVERAGE },
            { label: el.rb.language.concern, field: p.SKIN_CONCERN_LABEL }
        ];
        
        /* 
         * TODO: These are rendering correctly, but content looks off. 
         * There is a lot more content than there is on MICA
         * */
        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);
                args.containerNode.insert(dt);
                args.containerNode.insert(dd);
            }
        });
    };

    // default product catalog rpc fields
    // Not currently used. Don't rely on these for usage as they currently are.
    that.mppParams = {
        categoryFields: {
            categoryFields : ["CATEGORY_ID", "CATEGORY_NAME", "products"]
        },
        productFields: {
            productFields : ["PRODUCT_ID", "DEFAULT_CAT_ID", "PARENT_CAT_ID", "PROD_RGN_NAME", "PROD_RGN_SUBHEADING", "SUB_LINE", "DESCRIPTION", "SHORT_DESC", "PROD_SKIN_TYPE", "PROD_SKIN_TYPE_TEXT", "PROD_CAT_IMAGE_NAME", "PROD_CAT_DISPLAY_ORDER", "SMALL_IMAGE", "LARGE_IMAGE", "THUMBNAIL_IMAGE", "PRODUCT_USAGE", "FORMULA", "ATTRIBUTE_COVERAGE", "ATTRIBUTE_BENEFIT", "SKIN_CONCERN_LABEL", "SKIN_CONCERN_1", "SKIN_CONCERN_2", "SKIN_CONCERN_3", "skus", "shaded", "sized", "url"]
        },
        skuFields: {
            skuFields : ["SKU_ID", "SKU_BASE_ID", "PRODUCT_ID", "SHADENAME", "SHADE_DESCRIPTION", "DISPLAY_ORDER", "SKIN_TYPE", "SKIN_TYPE_TEXT", "PRODUCT_SIZE", "STRENGTH", "PRICE", "formattedPrice", "formattedTaxedPrice", "INVENTORY_STATUS", "SMOOSH_DESIGN", "SMOOSH_PATH_STRING", "REFILLABLE", "HEX_VALUE", "HEX_VALUE_STRING", "FINISH", "ATTRIBUTE_COLOR_FAMILY", "LIFE_OF_PRODUCT", "UNDERTONE", "SKIN_TONE", "SKIN_TONE_TEXT", "COLORGROUPING"]
        }
    };

    return that;    
}();

document.observe("dom:loaded", function() {
    // load data from either page_data or AJAX
    // 1. Set up the product catalog fetch parameters
    var productDataParams = {};
    productDataParams.pageDataKey = 'catalog.mpp';
    // Where is this set? includes/head/js.tmpl
    productDataParams.categoryId = window.CATEGORY_ID;
    productDataParams.callback = function(mppData) {
        // pass to multiple product filter view
        el.mpp.init(mppData.products);
    };
    
    // obtain the fields from the page_data resource otherwise use a hardcoded default
    
    el.mpp.page_data_configuration = generic.rb("page_data_configuration");

    if (el.mpp.page_data_configuration.get("catalog.mpp.categoryFields") != 'catalog.mpp.categoryFields') {
        productDataParams.categoryFields = el.mpp.page_data_configuration.get("catalog.mpp.categoryFields");
        productDataParams.productFields = el.mpp.page_data_configuration.get("catalog.mpp.productFields");
        productDataParams.skuFields = el.mpp.page_data_configuration.get("catalog.mpp.skuFields");
    } else {
        productDataParams = Object.extend ( productDataParams, el.mpp.mppParams.categoryFields );
        productDataParams = Object.extend ( productDataParams, el.mpp.mppParams.productFields );
        productDataParams = Object.extend ( productDataParams, el.mpp.mppParams.skuFields );
    }

    // 2. Obtain the data
    generic.productData.getCategoryData(productDataParams);
});

document.observe('cart:updated', function(e) {
    //alert(e.memo.ac_results[0].result.CARTITEM["prod.PROD_RGN_NAME"] + " added to cart.");
});

// 
// document.observe("mpp-product-thumb:rendered", function (e) {
//     el.mpp.initProductThumb(e.memo);    
// });