/**
  * Product sort based on user selections
  */

// set blank image to local file
function toggleMe(a){
  var e=document.getElementById(a);
  var imgn = a + "-img";
  var eimg = document.getElementById(imgn);
  if(!e)return true;

	if(e.className == "hidden"){
		e.className = "";
		eimg.className = "x-layout-collapse-south";
	}else {
		e.className = "hidden";
		eimg.className = "x-layout-collapse-east";
	}
	return true;
}

Ext.BLANK_IMAGE_URL = 'jscript/ext-1.1/resources/images/default/s.gif';

//sortProductsForm
var sortProductsForm = function(){

	 var iconPath = '../imgs/icons/';
    
    // define some private variables
    var form, form1, form2, form3, form4, form5;
	var accs;
    var appStore, appCheckboxArray;
	var brandStore, brandCheckboxArray;
	var printermakeStore, printermakeCheckboxArray;
	var printerinkStore, printerinkCheckboxArray;
	var finishStore, finishCheckboxArray;
	var typeStore, typeCheckboxArray;
	var printermodelStore, printermodelCheckboxArray;
	var userSelectionDataStore;

    // return a public interface
    return {
		//startMask:null,
        init : function(){
	
			var startMask = new Ext.LoadMask(document.body,{msg:'Loading',msgCls:'ext-el-mask-msg x-mask-loading',removeMask:false});
			startMask.show('Product info and controls...',true);

				//ARRAYS
				 appCheckboxArray = new Array();
				 brandCheckboxArray = new Array();
				 printermakeCheckboxArray = new Array();
				 printermodelCheckboxArray = new Array();
				 printerinkCheckboxArray = new Array();
				 finishCheckboxArray = new Array();
				typeCheckboxArray = new Array();

				//{{{DATASTORES
				 appStore = new Ext.data.Store({
							baseParams: {action: 'loadapps'},
							proxy: new Ext.data.HttpProxy({url: 'ajax-load-sort-options.php'}),
							reader: new Ext.data.XmlReader({
							totalRecords: 'totalCount',
							record: 'application',
							id: 'appid'
							}, ['name', 'indoor','outdoor'])
					});

					brandStore = new Ext.data.Store({
							baseParams: {action: 'loadcats'},
							proxy: new Ext.data.HttpProxy({url: 'ajax-load-sort-options.php'}),
							reader: new Ext.data.XmlReader({
							record: 'category',
							id: 'catid'
							}, ['name'])
					});

					printermakeStore = new Ext.data.Store({
							baseParams: {action: 'loadmanu'},
							proxy: new Ext.data.HttpProxy({url: 'ajax-load-sort-options.php'}),
							reader: new Ext.data.XmlReader({
							record: 'manufacturer',
							id: 'manid'
							}, ['manid','name'])
					});

					printermodelStore = new Ext.data.Store({
							baseParams: {action: 'loadprinters'},
							proxy: new Ext.data.HttpProxy({url: 'ajax-load-sort-options.php'}),
							reader: new Ext.data.XmlReader({
							record: 'printer',
							id: 'printerid'
							}, ['name'])
					});

					printerinkStore = new Ext.data.Store({
							baseParams: {action: 'loadinks'},
							proxy: new Ext.data.HttpProxy({url: 'ajax-load-sort-options.php'}),
							reader: new Ext.data.XmlReader({
							record: 'ink',
							id: 'inkid'
							}, ['name'])
					});

					typeStore = new Ext.data.Store({
							baseParams: {action: 'loadtypes'},
							proxy: new Ext.data.HttpProxy({url: 'ajax-load-sort-options.php'}),
							reader: new Ext.data.XmlReader({
							record: 'type',
							id: 'typeid'
							}, ['name'])
					});

					userSelectionDataStore = new Ext.data.Store({
						proxy: new Ext.data.HttpProxy({url: 'ajax-user-data.php'}),
						baseParams: {action:'getUserData'},//{action:'returnHomeNum'},
						reader: new Ext.data.JsonReader({
							root: "user_selections",
							id: 'selectionID'
						},['applications','categories','prodtypes','printerModels'])
					});

				
					//END DATASTORES }}}}


					//{{{ ONLOAD FUNCTIONS
					userSelectionDataStore.on("load", function(){
						//Ext.Msg.alert("",userSelectionDataStore.getById('1').get("applications"));

						appStore.load(); //uncomment after testing
					});

					appStore.on("load",function(ds, ecords,opts){

						//load the following ds store
						brandStore.load();

						//create checkboxes and put them in checkbox array
						for(i=0; i< ds.getCount(); i++){
							var curItem_id = ds.getAt(i).id;
							var curItem_name =  ds.getAt(i).get("name");
							var ischecked = false;
							
					
					
							var thisCheckBox = new Ext.form.Checkbox({
								boxLabel: curItem_name,
								checked: ischecked,
								name: 'productApp',
								inputValue: curItem_id,
								listeners:{
									'check' : function(cb, checked){
										if(productView.getDataStore() != undefined){
											productView.addFilters();
										}
									},
									'render': function(c){
										
												var userApps = userSelectionDataStore.getById('1').get("applications");
												//alert(c.getRawValue());
												//alert(userApps);
													if(userApps != null){
														
														if(typeof(userApps) == 'object'){ 
															var jsonString = Ext.encode(userApps);
															var re = /[^\d,]/g;
															var newString = jsonString.replace(re,'');
															var arry = newString.split(',');
															

															for(var x=0 ; x< arry.length; x++) {
												
																if (arry[x] == c.getRawValue()) {
																	c.setValue(true);
																}
															}
																
														}else {
															if(c.getRawValue() == userApps){
																c.setValue(true);
															} 
														}
													}
									}
								}
							});
							
							appCheckboxArray.push(thisCheckBox);
						}
						//end make checkbox

					});


					brandStore.on("load",function(ds, ecords,opts){
						//load the following ds store
						printermakeStore.load();

						//create checkboxes and put them in checkbox array
						for(i=0; i< ds.getCount(); i++){
							var curItem_id = ds.getAt(i).id;
							var curItem_name =  ds.getAt(i).get("name");

							var thisCheckBox = new Ext.form.Checkbox({
								boxLabel: curItem_name,
								checked: false,
								name: 'productCategory',
								inputValue: curItem_id,
								listeners:{
									'check' : function(f, nv, ov){
										productView.addFilters();
									}
								}
							});
							brandCheckboxArray.push(thisCheckBox);
						}
						//end make checkbox

					});

				
					printermakeStore.on("load",function(ds, ecords,opts){
						//load the following ds store
						//printerinkStore.load();
						typeStore.load();
						
					});

					printermodelStore.on("beforeload", function(){
						
						 printermodelStore.baseParams = {
							 action: 'loadprinters', 
							 man_id: sortProductsForm.returnPrinterMake()
						};
					});

					printermodelStore.on("load", function(ds, ecords, opts){
						
						//create checkboxes and put them in checkbox array
						for(i=0; i< ds.getCount(); i++){
							var curItem_id = ds.getAt(i).id;
							var curItem_name =  ds.getAt(i).get("name");
							var thisCheckBox = new Ext.form.Checkbox({
								boxLabel: curItem_name,
								checked: false,
								name: 'printerModel',
								inputValue: curItem_id,
								listeners:{
									'check' : function(cb, checked){
										productView.addFilters(); //add to the filters
									}
								}
							});
							printermodelCheckboxArray.push(thisCheckBox);
						}
						//end make checkbox
						
						//destroy the div so we can start fresh

						//render a div to the model-panel
						Ext.DomHelper.overwrite(Ext.get('printerModelHolder'), {tag: 'div', id: 'printerModelHolder'}, true);
					

						for(var i=0; i<printermodelCheckboxArray.length; i++){
							printermodelCheckboxArray[i].render('printerModelHolder');
						} 

						productView.addFilters();//reload filters

					});

				typeStore.on("load",function(ds, ecords,opts){

						//load the following ds store

						//create checkboxes and put them in checkbox array
						for(i=0; i< ds.getCount(); i++){
							var curItem_id = ds.getAt(i).id;
							var curItem_name =  ds.getAt(i).get("name");
							var thisCheckBox = new Ext.form.Checkbox({
								boxLabel: curItem_name,
								checked: false,
								name: 'productType',
								inputValue: curItem_id,
								listeners:{
									'check' : function(f, nv, ov){
										productView.addFilters();
									}
								}
							});
							typeCheckboxArray.push(thisCheckBox);
						}
						//end make checkbox

						//last store in the chain creates the form
						sortProductsForm.makeForm();
						Ext.DomHelper.append(Ext.get('model-panel'), {tag: 'div', id: 'printerModelHolder'}, true);
						startMask.hide();
					});


				//load the first store - the others load from each other in order
				startMask.showDefer('Loading product controls...',userSelectionDataStore.load(),{millis:600});
		},

		makeForm: function(){

			Ext.QuickTips.init();

			 // turn on validation errors beside the field globally
			Ext.form.Field.prototype.msgTarget = 'side';

			form1 = new Ext.form.Form({
							name: 'sortProductsForm1',
							id: 'sortProductsForm1',
						//	url: 'process_savepage.php',
							method: "post",
							labelWidth: 1 //to hide the labels
				});

			form2 = new Ext.form.Form({
							name: 'sortProductsForm2',
							id: 'sortProductsForm2',
						//	url: 'process_savepage.php',
							method: "post",
							labelWidth: 1 //to hide the labels
				});
			form3 = new Ext.form.Form({
							name: 'sortProductsForm3',
							id: 'sortProductsForm3',
						//	url: 'process_savepage.php',
							method: "post",
							labelWidth: 1 //to hide the labels
				});

			form4 = new Ext.form.Form({
							name: 'sortProductsForm4',
							id: 'sortProductsForm4',
						//	url: 'process_savepage.php',
							method: "post",
							labelWidth: 1 //to hide the labels
				});

			var printerMakeBox = new Ext.form.ComboBox({
					//fieldLabel: 'Manufacturer',
					hiddenName:'printerMake',
					name: 'printerMake',
					store: printermakeStore,
					displayField:'name',
					valueField: 'manid',
					typeAhead: true,
					mode: 'local',
					editable: 'false',
					triggerAction: 'all',
					emptyText:'Select a printer make...',
					selectOnFocus:true,
					width:150,
					allowBlank: true,
					listeners:{
									'select' : function(thisfield, newvalue, oldvalue){
										//Ext.get("printerModelHolder").destroy();
										//productView.addFilters(); //add to the filters
										printermodelStore.load();//load the datastore of the printer models
										var e=document.getElementById("printermodel-panel");
										var imgn = "printermodel-panel-img";
										var eimg = document.getElementById(imgn);
										e.className = "";
										eimg.className = "x-layout-collapse-south";
									}
					}
				});

			form5 = new Ext.form.Form({
							name: 'sortProductsForm5',
							id: 'sortProductsForm5',
							method: "post",
							labelWidth: 1 //to hide the labels
						});

					form1.column({width:190, labelAlign:'right',labelSeparator:''});
						for(var i=0; i<appCheckboxArray.length; i++){
							form1.add(appCheckboxArray[i]);
						}
					form1.end();
					form1.render('app-form');

					form2.column({width:190, labelAlign:'right',labelSeparator:''});
						for(var i=0; i<typeCheckboxArray.length; i++){
							form2.add(typeCheckboxArray[i]);
						}
					form2.end();
					form2.render('mediatype-form');

					form3.column({width:190, labelAlign:'right',labelSeparator:''});
						for(var i=0; i<brandCheckboxArray.length; i++){
							form3.add(brandCheckboxArray[i]);
						}
					form3.end();
					form3.render('brands-form');


					form4.column({width:190, id:'printermake-text'});
					form4.end();
					form4.column({width:190, labelAlign:'right',labelSeparator:''});
						form4.add(printerMakeBox);
						form4.addButton('Reset', function(){
							printerMakeBox.setValue(null);
							//productView.addFilters(); //add to the filters
							printermodelStore.load();//load the datastore of the printer models
						}, form4);
					form4.end();
					form4.render('printermake-form');

					Ext.DomHelper.append(Ext.get('printermake-text'),{tag: 'div', id: 'printermaketext'} , true);
					Ext.DomHelper.overwrite('printermaketext',"After you select the printer make, select the printer model(s) to narrow products." , true);


					form5.column({id:'model-panel', width:190, labelAlign:'right',labelSeparator:''});
						
					form5.end();
					form5.render('printermodel-form');

			//call the product view init
			productView.init();
		},
	returnApps : function(){
		var formv = form1.getValues();
		return Ext.encode(formv.productApp);
	},
	returnProductTypes : function(){
		var formv = form2.getValues();
		return Ext.encode(formv.productType);
	},
	returnProductCategories : function(){
		var formv = form3.getValues();
		return Ext.encode(formv.productCategory);
	},
	returnPrinterMake : function(){
		var formv = form4.getValues();
		return Ext.encode(formv.printerMake);
	},
	returnPrinterModel : function(){
		var formv = form5.getValues();
		return Ext.encode(formv.printerModel);
	},
	resetPrinterModel: function(){
		return "&printerModel=null";
	}

	};
}();
//end sortProductsForm


var productView = function(){
	var view;
	var ds_products;
	var lookup;
	var pageLimit;
	var startMask;
	
	return {
        init : function(){
		 startMask = new Ext.LoadMask(document.body,{msg:'Getting products...',msgCls:'ext-el-mask-msg x-mask-loading',removeMask:false});

			//set default starting paging size
			productView.setPageSize(12);

			 // create the Data Store
			ds_products = new Ext.data.Store({
				// load using HTTP
				proxy: new Ext.data.HttpProxy({url: 'ajax-find-products.php'}),
				//baseParams
				baseParams: {action:'returnProducts'},//{action:'returnProducts'},
				// the return will be XML, so lets set up a reader
				reader: new Ext.data.JsonReader({
					totalProperty: "totalResults",    // The property which contains the total dataset size (optional)
					root: "products",                // The property which contains an Array of row objects
					id: "product_id"                     // The property within each row object that provides an ID for the record (optional)
					},['product_id','name', 'imageurl','indoor','outdoor','new','active','categorytext','typetext','applications','mediatypes','categories']),
				// turn on remote sorting
				remoteSort: true
				});

				ds_products.on('beforeload', function() {
					startMask.show("",true);

					ds_products.baseParams = { // modify the baseParams setting for this request
						action:'returnProducts',
						applications: sortProductsForm.returnApps(),
						prodtypes: sortProductsForm.returnProductTypes(),
						categories: sortProductsForm.returnProductCategories(),
						printerMake: sortProductsForm.returnPrinterMake(),
						printerModels: sortProductsForm.returnPrinterModel()
					};
				});

				ds_products.on("load",function(){
					startMask.hide();
				});

				productView.showProducts();
		},
		showProducts : function(){
			// create the required templates

			var thumbTemplate = new Ext.Template(
			'<div id="product-info"><div id="{product_id}"></div>' +
			'<img src="{imageurl}" title="{name}" class="product-thumb">' +
			'<div id="product-desc"><a href="product.php?id={product_id}">{name}</a><br/>{typetext}<br/>{categorytext}</div>' +
			'</div>'
			);
			thumbTemplate.compile();	

			view = new Ext.View("product-view", thumbTemplate, {
				singleSelect: true,
				selectedClass: "ydataview-selected",
				store: ds_products
			});

			view.on("click", function(vw, index, node, e){
				//alert('Node "' + node.id + '" at index: ' + index + " was clicked.");
				//alert('products.php?id=' + node.firstChild.id);
				location.href='product.php?id=' + node.firstChild.id;
			});

			// add a paging toolbar to the bottom of the products
				var pagingtop = new Ext.PagingToolbar('prod-navigation-top', ds_products, {
					pageSize: productView.getPageSize(),
					beforePageText : 'Go to page: ',
					displayInfo: true,
					displayMsg: 'Displaying products {0} - {1} of {2}',
					emptyMsg: "No products to display"
				});
				
				//page sizing
				var pageSizeCombo = new Ext.form.ComboBox({
					store: new Ext.data.SimpleStore({
						fields: ['text', 'value'],
						data: [['12', 12], ['24', 24], ['36', 36], ['48', 48], ['72', 72]]
						}),
						mode: 'remote',
						name: 'pageSize',
						displayField: 'text',
						valueField: 'value',
						editable: false,
						allowBlank: false,
						triggerAction: 'all',
						width: 40
					});
					
					pageSizeCombo.setValue(12);
					pageSizeCombo.on("select", function(c,r,i){
						var newPageSize = r.get("value");
						productView.setPageSize(newPageSize);
						pagingtop.pageSize = productView.getPageSize();
						pagingbottom.pageSize = productView.getPageSize();
						pageSizeCombobottom.setValue(newPageSize);

						//Ext.Msg.alert("","rid:" + 	r.get("value") );
						ds_products.load({params:{start:0, limit: productView.getPageSize()}});
					});

					pagingtop.addField(pageSizeCombo);
					pagingtop.add(' ', ' per page '); // add a separator followed by a text string to label the filter input


					// add a paging toolbar to the bottom of the products
					var pagingbottom = new Ext.PagingToolbar('prod-navigation-bottom', ds_products, {
						pageSize: productView.getPageSize(),
						beforePageText : 'Go to page: ',
						displayInfo: true,
						displayMsg: 'Displaying products {0} - {1} of {2}',
						emptyMsg: "No products to display"
					});

					//page sizing
					var pageSizeCombobottom = new Ext.form.ComboBox({
					store: new Ext.data.SimpleStore({
						fields: ['text', 'value'],
						data: [['12', 12], ['24', 24], ['36', 36], ['48', 48], ['72', 72]]
						}),
						mode: 'remote',
						name: 'pageSizeBottom',
						displayField: 'text',
						valueField: 'value',
						editable: false,
						allowBlank: false,
						triggerAction: 'all',
						width: 40
					});
					
					pageSizeCombobottom.setValue(12);
					pageSizeCombobottom.on("select", function(c,r,i){
						var newPageSize = r.get("value");
						productView.setPageSize(newPageSize);
						pagingtop.pageSize = productView.getPageSize();
						pagingbottom.pageSize = productView.getPageSize(),
						pageSizeCombo.setValue(newPageSize);
						//Ext.Msg.alert("","rid:" + 	r.get("value") );
						ds_products.load({params:{start:0, limit: productView.getPageSize()}});
					});

					pagingbottom.addField(pageSizeCombobottom);
					pagingbottom.add(' ', ' per page '); // add a separator followed by a text string to label the filter input
				

			ds_products.load({params:{start:0, limit: productView.getPageSize()}});

			
		},
		addFilters:function(){
			ds_products.load({params:{start:0, limit: productView.getPageSize()}});
		},
		setPageSize : function(newlimit){
			pageLimit = newlimit;
		},
		getPageSize : function(){
			return pageLimit;
		},
		getDataStore: function(){
			return ds_products;
		}
	};
}();

Ext.onReady(sortProductsForm.init, sortProductsForm, true);
// end of file