var PRODUCT_JSON_URL = "/jsonrpc.json";

var g_prodcatMethod = 'prodcat.byid';
var g_prodcatQueryParams = {
	
			"category_fields" : ["CATEGORY_ID",
				"DISPLAY_NAME",
				"product"],

		    "product_fields" : [ "PRODUCT_ID",
		        "DEFAULT_CAT_ID",
		        "PARENT_CAT_ID",
		        "PRODUCT_NAME",
		        "DESCRIPTION",
		        "SHORT_DESC",
		        "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",
		        "FORMULA",
		        "COVERAGE",
		        "BENEFITS",
		        "BRUSH",
		        "SKIN_CONCERN", 
		        "SKIN_CONCERN_1",
		        "SKIN_CONCERN_2",
		        "SKIN_CONCERN_3",
		        "sku",
		        "shaded",
		        "sized",
		        "url"],
	
			"sku_fields" : ["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",
				"LIFE_OF_PRODUCT",
				"COLOR_FAMILY_NAME"]
			};


var g_tacdorpMethod = 'tacdorp.byid';
var g_tacdorpQueryParams = {
	
			"sku_fields" : ["SKU_ID",
				"PRODUCT_ID",
				"DISPLAYNAME",
				"SHADENAME",
				"SHADE_DESCRIPTION",
				"SKIN_TYPE",
				"PRODUCT_SIZE",
				"skin_type_string",
				"shopping_id",
				"STRENGTH",
				"PRODUCT_PRICE",
				"SMOOSH_DESIGN",
				"smoosh_path",
				"INVENTORY_STATUS",
				"REFILLABLE",
				"PRICE",		
				"FORMATTED_PRICE",
				"HEX_VALUE",
				"hex_value_string",
				"FINISH",
				"COLOR_FAMILY_NAME",
				"LIFE_OF_PRODUCT",
				"product"
				],
			
			"product_fields" : ["PRODUCT_ID",
		        "DEFAULT_CAT_ID",
		        "PARENT_CAT_ID",
				"PRODUCT_NAME",
				"DESCRIPTION",
				"SHORT_DESC",
				"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",
		        "FORMULA",
		        "COVERAGE",
		        "BENEFITS",
		        "BRUSH",
		        "SKIN_CONCERN_1",
		        "SKIN_CONCERN_2",
		        "SKIN_CONCERN_3",
				"WWW_SID_1",
				"WWW_SID_2",
				"WWW_SID_3",
				"shaded",
				"sized",
				"url",
				"sku",
				"category"],
				
			"category_fields" : ["CATEGORY_ID",
				"DISPLAY_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.showShadeTable = 0;
		this.containerId = 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 ) ) {
			 	
			$(this.containerId).update(SpinnerHtml);
			
			// For now, we ONLY support EITHER sku-based (tacdorp) or product/cat based (prodcat) query
			if ( this.skuIds.length > 0 ) {
				// Make a sku-based query (tacdorp)
				this.prodcatMethod = g_tacdorpMethod;
				this.queryParams = { "sku" : this.skuIds.toArray() };
				this.queryParams = Object.extend ( this.queryParams, g_tacdorpQueryParams );
				this.queryParams = [ this.queryParams ];
				
			} else {
				// Make a prodcat query
				this.prodcatMethod = g_prodcatMethod;
				this.queryParams = { };
				if ( this.productIds.length > 0 ) {
					this.queryParams = Object.extend ( this.queryParams, { "product" : this.productIds.toArray() } );
				}
				if ( this.categoryIds.length > 0 ) {
					this.queryParams = Object.extend ( this.queryParams, { "category" : this.categoryIds.toArray() } );
				}
				this.queryParams = Object.extend ( this.queryParams, g_prodcatQueryParams );
				this.queryParams = [ this.queryParams ];
			}
			
			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){
	    		prods[prods.length] = this.catprodData.getProductBySku(skuid);
	    	}, 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){
	    			var pobj = this.catprodData.getProductById(prodid);
	    			var pidx = prods.length;
	    			pobj.DISPLAY_ORDER = pidx+1;
	    			prods[pidx] = pobj;
	    		}, this);
	    	} else {
	    		prods = this.catprodData.data.get('product').all;
	    	}
		}
	    
	    args.containerID = this.containerId;
	    args.tableData = prods; //this.catprodData.data.get('product').all;
	    args.cellsPerRow = this.productsPerRow;
	    args.mode = this.mode;
	    args.productImages = this.productImages;
	    args.showShadeTable = this.showShadeTable;

		this.callbackDataLoaded(prods);

		mergeIntoGlobalCatProdData ( this.catprodData );
	    
		$(this.containerId).update('');
		
	    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);
	}
});