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

var g_prodcatMethod = 'prodcat';
var g_prodcatQueryParams = [{
			"suppress_bad_skus" : 1,	
			
			"category_fields" : ["CATEGORY_ID",
				"CATEGORY_NAME",
				"products"],

		    "product_fields" : [ "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",
		        //"IMAGE_NAME",
		        //"DISPLAY_ORDER",
		        "SMALL_IMAGE",
		        "LARGE_IMAGE",
		        "THUMBNAIL_IMAGE",
		        "PRODUCT_USAGE",
		        "AVERAGE_RATING",
		        "TOTAL_REVIEW_COUNT",
		        "RATING_IMAGE",
		        "FORMULA",
		        "ATTRIBUTE_COVERAGE",
		        "ATTRIBUTE_BENEFIT",
		        //"BRUSH",
		        "SKIN_CONCERN_LABEL", 
		        "SKIN_CONCERN_1",
		        "SKIN_CONCERN_2",
		        "SKIN_CONCERN_3",
		        "skus",
		        "shaded",
		        "sized",
		        "url"],
	
			"sku_fields" : ["SKU_ID",
                "SKU_BASE_ID",
				"PRODUCT_ID",
				//"DISPLAYNAME",
				"SHADENAME",
				"SHADE_DESCRIPTION",
				"SKIN_TYPE",
				"SKIN_TYPE_TEXT",
				"PRODUCT_SIZE",
				//"shopping_id",
				"STRENGTH",
				"PRICE",
				"SMOOSH_DESIGN",
				"SMOOSH_PATH_STRING",
				"INVENTORY_STATUS",
				"isShoppable",
				"REFILLABLE",
				"PRICE",		
				"formattedPrice",
				"formattedUnitPrice",
				"UNIT_SIZE",
				"UOM",
				"formattedTaxedPrice",
				"HEX_VALUE",
				"HEX_VALUE_STRING",
				"FINISH",
				"ATTRIBUTE_COLOR_FAMILY"
                ]
            }];


var g_tacdorpMethod = 'prodcat';
var g_tacdorpQueryParams = [{
			"suppress_bad_skus" : 1,	
			
			"sku_fields" : ["SKU_ID",
                "SKU_BASE_ID",
				"PRODUCT_ID",
				//"DISPLAYNAME",
				"SHADENAME",
				"SHADE_DESCRIPTION",
				"SKIN_TYPE",
				"SKIN_TYPE_TEXT",
				"PRODUCT_SIZE",
				//"shopping_id",
				"STRENGTH",
				"PRICE",
				"SMOOSH_DESIGN",
				"SMOOTH_PATH_STRING",
				"INVENTORY_STATUS",
				"isShoppable",
				"REFILLABLE",
				"PRICE",		
				"formattedPrice",
				"HEX_VALUE",
				"HEX_VALUE_STRING",
				"FINISH",
				"ATTRIBUTE_COLOR_FAMILY"
                           ],

		    "product_fields" : [ "PRODUCT_ID",
		        "DEFAULT_CAT_ID",
		        "PARENT_CAT_ID",
		        "PROD_RGN_NAME",
		        "DESCRIPTION",
		        "SHORT_DESC",
		        "PROD_SKIN_TYPE",
		        "PROD_SKIN_TYPE_TEXT",
		        "IMAGE_NAME",
		        //"DISPLAY_ORDER",
		        "SMALL_IMAGE",
		        "LARGE_IMAGE",
		        "THUMBNAIL_IMAGE",
		        "PRODUCT_USAGE",
		        "AVERAGE_RATING",
		        "TOTAL_REVIEW_COUNT",
		        "RATING_IMAGE",
		        "FORMULA",
		        "ATTRIBUTE_COVERAGE",
		        "ATTRIBUTE_BENEFIT",
		        //"BRUSH",
		        "SKIN_CONCERN_LABEL", 
		        "SKIN_CONCERN_1",
		        "SKIN_CONCERN_2",
		        "SKIN_CONCERN_3",
		        "skus",
		        "shaded",
		        "sized",
		        "url"],
				
			"category_fields" : ["CATEGORY_ID",
				"CATEGORY_NAME"]

			}];

var ProductMultiBox = Class.create({

    initialize: function(args) {
        
        // Init defaults for class variables
		this.productIds = [];
		this.productImages = [];
		this.categoryIds = [];
		this.skuIds = [];
		this.catprodData = null;
		this.queryParams = [];
		this.productsPerRow = 1;
		this.maxProducts = 0;
		this.containerId = 'elm_' + generateGuid();
		this.prodcatMethod = g_prodcatMethod;
		this.callbackDataLoaded = function(){};
		this.callbackCompleted  = function(){};
		
		// Possible display modes:
		// 0 == thumb
		// 1 == small product
		// 2 == large product
		this.mode = 0;

		// Load up passed params
        Object.extend(this, args || {});
	},
	
	addProduct: function(productId,productImage) {
		this.productIds.push(productId);
		if ( productImage ) {
			this.productImages[productId] = productImage;
		}
	},
	
	addCategory: function(categoryId) {
		this.categoryIds.push(categoryId);
	},
	
	addSku: function(skuId) {
		this.skuIds.push(skuId);
	},
	
	setContainer: function(containerId,productsPerRow) {
		this.containerId = containerId;
		this.productsPerRow = productsPerRow || this.productsPerRow;
	},
	
	loadMultiBox: function() {
		
		if ( this.containerId && 
			 ( this.productIds.length > 0 || this.categoryIds.length > 0 || this.skuIds.length > 0 ) ) {
			
			// For now, we ONLY support EITHER sku-based (tacdorp) or product/cat based (prodcat) query
            // CHANGE FOR PERLGEM API IS IN PROGRESS
			if ( this.skuIds.length > 0 ) {
				// Make a sku-based query (tacdorp)
				this.prodcatMethod = g_tacdorpMethod;
				this.queryParams = $A(g_tacdorpQueryParams).clone();
				this.queryParams[0]["skus"] = this.skuIds.toArray();
                this.queryParams[0]["get_product"] = 1;
                this.queryParams[0]["get_category"] = 1;
			} else {
				// Make a prodcat query
				this.prodcatMethod = g_prodcatMethod;
				this.queryParams = $A(g_prodcatQueryParams).clone();
				
				if ( this.productIds.length > 0 ) {
					this.queryParams[0]["products"] = this.productIds.toArray();
				}
				if ( this.categoryIds.length > 0 ) {
					this.queryParams[0]["categories"] = this.categoryIds.toArray();
				}
			}
			
			this.catprodData = new CatProdPageData ( 
										this.queryParams, 
										false, 
										this.callbackMultiBox.bind(this), 
										this.prodcatMethod
										);
		}
		
	},
	
	callbackMultiBox: function() {
	    var args = {
	        containerID: "",
	        maxItems: 0,
	        startIndex: 0,
	        cellsPerRow: 1,
	        mode: 0,
	        productImages: []
	    };
	    
	    var prods = [];
	    
	    // If sku-based, we need to link the skus to the products
		if ( this.skuIds.length > 0 ) {
			this.catprodData.linkSkusToProducts();
	    	args.maxItems = this.maxProducts || this.skuIds.length;
	    	
	    	this.skuIds.each(function(skuid){
	    		var tprod = this.catprodData.getProductBySku(skuid);
	    		if ( tprod ) prods[prods.length] = tprod;
	    	}, this);
	    
		} else {
	    	args.maxItems = this.maxProducts || this.productIds.length;
	    	
	    	// If products were given but no categories, then pull the prods
	    	// in the order listed.  Otherwise, just pull them all and the
	    	// display-order will take precedence.
	    	if ( this.productIds.length > 0 && !this.categoryIds.length ) {
	    		this.productIds.each(function(prodid){
	    			// The getProductById() method can return null for
	    			// products that become inactive.
	    			var tprod = this.catprodData.getProductById(prodid);
	    			if ( tprod ) prods[prods.length] = tprod;
	    		}, this);
	    	} else {
	    		prods = this.catprodData.data.get('all_products');
	    	}
		}
	    
	    args.containerID = this.containerId;
	    args.tableData = prods; //this.catprodData.data.get('all_products');
	    args.cellsPerRow = this.productsPerRow;
	    args.mode = this.mode;
	    args.productImages = this.productImages;
//Adding code here for 66438 enhancement from CL DE
        args.catMultiCol = this.catMultiCol;
        args.cats = this.cats;
//END add code

		this.callbackDataLoaded(prods);

		mergeIntoGlobalCatProdData ( this.catprodData );
	    
	    var myTable =
	    	( this.mode == 0 ? new productPage.miniThumbTable(args) :
	    	  this.mode == 1 ? new productPage.ProductsTable(args) :
	    	  				   new productPage.ProductsTable(args) );

		// Notify everyone we've loaded.
		// FIXME: There is a timing issue here cuz the productPage object
		// is itself asynchronous, so it may not be done loading data when
		// this event is fired.
		//document.fire("productMultBox:loaded", this.containerId);
		
		this.callbackCompleted(prods);
	}
});