var PRODUCT_JSON_URL = "/rpc/jsonrpc.tmpl";


document.observe("categoryData:loaded", function() {
    productPage.mpp.init();
    var mergedSkus = [];
    CatProdData.getSkus().each(function(s){
    	if (s.HEX_VALUE_STRING) {
			var p = CatProdData.getProductBySku(s.SKU_ID);
			var c = CatProdData.getCategoryBySku(s.SKU_ID);
			s.product = p;
			s.category = c;
			mergedSkus.push(s);
		}
    });
    productPage.launchColorFinder = function(skusData) {
        var args = {
            tableData : skusData
        };
        var cf = new productPage.ColorFinder(args);
    }.curry(mergedSkus);
    
    
//    productPage.launchColorFinder();
    
    
});

var params = Object.extend({
        "categories" : [CATEGORY_ID],
    	"category_fields" : ["CATEGORY_ID",
                "CATEGORY_NAME",
                "products"]
        }, productPage.DETAIL_VIEW_QUERY.PRODUCT_FIELDS);
params = Object.extend (params,
        productPage.DETAIL_VIEW_QUERY.SKU_FIELDS);
params = [params];

document.observe("dom:loaded", function() {
    CatProdData = new CatProdPageData(params);
});
//
// define filter fields and menu labels for different categories
productPage.categoryFilterMenus = new Hash({
    CAT1687 : { // Mositurizers
        filters: [ { label: prodrb.get("Skin_Concern"), field: "SKIN_CONCERN_1::SKIN_CONCERN_2::SKIN_CONCERN_3" } ]
    },
    CAT1599 : { // Foundations
        filters: [ { label: prodrb.get("Form"), field: "FORMULA" },
                   { label: prodrb.get("Skin_Type"), field: "PROD_SKIN_TYPE_TEXT" } ]
    },
    CAT1607 : { // Powder
        filters: [ { label: prodrb.get("Form"), field: "FORMULA" },
                   { label: prodrb.get("Coverage"), field: "ATTRIBUTE_COVERAGE" } ]
    },
    CAT1596 : { // Concealor
        filters: [ { label: prodrb.get("Skin_Concern"), field: "SKIN_CONCERN_1::SKIN_CONCERN_2::SKIN_CONCERN_3" },
                   { label: prodrb.get("Coverage"), field: "ATTRIBUTE_COVERAGE" } ]
    },
    CAT1597 : { // Eye Liner
        filters: [ { label: prodrb.get("Form"), field: "FORMULA" } ]
    },
    CAT1598 : { // Eye Shadow
        filters: [ { label: prodrb.get("Form"), field: "FORMULA" } ]
    },
    CAT1603 : { // Lip Gloss
        filters: [ { label: prodrb.get("Benefit"), field: "ATTRIBUTE_BENEFIT" } ]
    },
    CAT1606 : { // Mascara
        filters: [ { label: prodrb.get("Benefit_Priority"), field: "ATTRIBUTE_BENEFIT" } ]
    },
    CAT1593 : { // Blush
        filters: [ { label: prodrb.get("Form"), field: "FORMULA" } ]
    },
    CAT1594 : { // Bronzer
        filters: [ { label: prodrb.get("Form"), field: "FORMULA" } ]
    },
    CAT1605 : { // Lipstick
        filters: [ { label: prodrb.get("Benefit"), field: "ATTRIBUTE_BENEFIT" },
                   { label: prodrb.get("Coverage"), field: "ATTRIBUTE_COVERAGE" } ]
    },
    CAT1673: { // Makeup Removers/Cleansers
        filters: [ { label: prodrb.get("Skin_Concern"), field: "SKIN_CONCERN_1::SKIN_CONCERN_2::SKIN_CONCERN_3" } ]
    },
    CAT1682: { // Exfoliators/Masks
        filters: [ { label: prodrb.get("Skin_Concern"), field: "SKIN_CONCERN_1::SKIN_CONCERN_2::SKIN_CONCERN_3" } ]
    },
    CAT1683: { // Eye & Lip Care
        filters: [ { label: prodrb.get("Skin_Concern"), field: "SKIN_CONCERN_1::SKIN_CONCERN_2::SKIN_CONCERN_3" } ]
    },
    CAT1686: { // Hand & Body
        filters: [ { label: prodrb.get("Concern"), field: "SKIN_CONCERN_1::SKIN_CONCERN_2::SKIN_CONCERN_3" } ]
    }, 
    CAT1625: { // Men's Skincare
        filters: [ { label: prodrb.get("Skin_Type"), field: "PROD_SKIN_TYPE_TEXT" } ]
    },
    CAT1623: { // Men's Shave
        filters: [ { label: prodrb.get("Concern"), field: "SKIN_CONCERN_1::SKIN_CONCERN_2::SKIN_CONCERN_3" } ]
    },
    CAT1621: { // All Men's Grooming
        filters: [ { label: prodrb.get("Concern"), field: "SKIN_CONCERN_1::SKIN_CONCERN_2::SKIN_CONCERN_3" } ]
    },
    CAT1661: { // SPF For Face and Body
        filters: [ { label: prodrb.get("Concern"), field: "SKIN_CONCERN_1::SKIN_CONCERN_2::SKIN_CONCERN_3" } ]
    }
});

productPage.categoryFilterMenus.each(function(record) {
    var cat = productPage.categoryFilterMenus.get(record.key);
    cat.sort= [ { label: prodrb.get("Bestseller") , field: "PROD_CAT_DISPLAY_ORDER" } ,
                { label: prodrb.get("Alphabetically") , field: "PROD_RGN_NAME" }];
});


productPage.mpp = function() {
    return {
        init: function() {
            // product Table object parameters
            var args = {
                containerID: "products-grid-container",
                filter_form_selector: "form.productstable-filters",
                filter_menu_class: "productslist_filter",
                sort_menu_class: "productslist_sort",
                maxItems: 9,
                startIndex: 0
            };        
            args.tableData = CatProdData.data.get('category_by_id').get(CATEGORY_ID).products;
            var prodsLength = args.tableData.length;
            //
            // for 8 or less products, hide bestseller table and filter menus.
            if (prodsLength < 9) {          
                $('bestseller_accordion').hide();
                $('filter-toolbar').hide();
                productPage.productsTable = new productPage.ProductsTable(args);
            //
            // for 9 or more products, show bestseller table and filter menus.
            // bestseller table should display products 0-2 while the next table
            // displays items 3 and up.
            } else {
                $('bestseller_accordion').style.display = "block";
                $('filter-toolbar').style.display = "block";
                args.maxItems = undefined;
                args.startIndex = 3;
                productPage.productsTable = new productPage.ProductsTable(args);
                //
                // start filter & sort logic. This should remain on JS side
                var hideFilters = true;
                //
                // check whether this product category requires filter menus.
                // If so, get labels & field names and build the menus accordingly.
				if (productPage.categoryFilterMenus.get(CATEGORY_ID)) {
					var menuMetaData = productPage.categoryFilterMenus.get(CATEGORY_ID);
					productPage.productsTable.createFilterMenus({
						filterMenuContainerNode : $("filter_menu_container"),
						tableData    : args.tableData,
						menuMetaData : menuMetaData,
						menuWidth    : 140 });
                    hideFilters = false;
				}
				//
				// all cateogires with >8 products get a sort menu
                var sortNode = this.initSortMenu();
                if (sortNode) {
                    productPage.productsTable.addSortNode(sortNode);
                    hideFilters = false;
                }
                if (hideFilters) {
                    $('filter-toolbar').hide();                
                }
                args.maxItems = 3;
                args.startIndex = 0;
                args.containerID = "bestsellers-container";
                productPage.bestsellerTable = new productPage.ProductsTable(args);
            }
            //
            // Accordion behavior needs to be initialized in JS, but table should be rendered in Perl
            var bs_accordion = new Accordion('bestseller_accordion');
            bs_accordion.activate($$('#bestseller_accordion .accordion_toggle')[0]);
            $('filter-toolbar').observe('table:filter', function(evt) {
                if ($$('#bestseller_accordion .accordion_content')[0].style.display !== 'none') {
                    bs_accordion.deactivate();
                    productPage.productsTable.startIndex = 0;
                }
            })
        },
        initSortMenu : function () {
            if (productPage.categoryFilterMenus.keys().indexOf(CATEGORY_ID) > -1) {
                var cat = productPage.categoryFilterMenus.get(CATEGORY_ID);
                var selectNode = productPage.productsTable.buildSortMenu({
                    containerNode : $("sort_menu_container"),
                    sortMenuArray : cat.sort,
                    menuWidth: 130,
                    selectNodeID : "productstable-sort" });
                niceform_init();
                return selectNode;
            }
        },
        buildMenu: function(args) {
            var containerNode = $("filter_menu_container");

            var slct = new Element("select", {
                'class' : "width_130",
                id    : args.fieldName,
                name  : args.fieldName });
            slct.insert(new Element("option", {
                value    : "",
                selected : "selected" }).insert(args.menuLabel));
            slct.insert(new Element("option", {
                value : "" }).insert( prodrb.get("All") ));
            args.menuOptions.each(function(val) {
                slct.insert(new Element("option", {
                    value : val
                }).insert(val));
            });

            containerNode.insert(slct);
            return slct;
        }
    };
}();

productPage.ColorFinder = Class.create({
    initialize: function(args) {
    	var self = this;
        this.containerID = 'colorfinder-container';
        templatefactory.get(productPage.TEMPLATE_DIR + 'colorfinder.tmpl').evaluateCallback({
        	object   : args.tableData[0].category,
            callback : function(html) {
//                console.log("ColorFinder callback");
    			// create temporary hidden div to contain the table as it gets built
    			var wrapperNode = new Element("div", {id:"colorfinder-wrapper"});
    			wrapperNode.setStyle({display:"none"});
    			$(document.body).insert(wrapperNode);
    			wrapperNode.update(html);

    			var filterContainer = $$('#colorfinder-filter-container .filter-options')[0];

    			// initialize table
                var tableArgs = {
                    tableData: args.tableData,
                    tableContainerID: 'colorfinder-table-container',
                    viewContainerID : "colorfinder-wrapper",
                    cellsPerRow : 7,
                    filterMenuContainerNode : filterContainer,
                    includeFilters: true,
                    sortMenuContainerNode : filterContainer,
                    postRenderCallback: function() {
//                            console.log("postRenderCallbackFn");
                            wrapperNode.style.display = "block";
                			// open pop-over window
                            overlay.launch({
                                content  : wrapperNode,
                                cssStyle : {padding: '10px'}
                            });
                			// activate "close" link
                			$('colorfinder-close-link').observe('click', function(){
                				overlay.hide();
                			});                        
                            var overlayNode = $(productPage.OVERLAY_CONTAINER_ID);
                            overlayNode.style.overflow = "visible";
            				overlayNode.observe("cart:add:success", function () { overlay.hide(); } );
            				overlayNode.observe("cart:add:fail", function () { overlay.hide(); } );
                            var detailArgs = {
                                shadeDetailContainerID : 'colorfinder-detail-container',
                                viewContainerID : productPage.OVERLAY_CONTAINER_ID,
                                skuData : args.tableData[0]
                            };
//                            console.log("new ColorFinder");
//                            console.log(detailArgs);
                            var cfd = new productPage.ShadePicker.Detail.ColorFinder(detailArgs);
            			}
                };

                var cft = new productPage.ShadePicker.Table.ColorFinder(tableArgs);
            }
        });
    }
});