/*
 * Ext JS Library 3.0 RC1
 * Copyright(c) 2006-2009, Ext JS, LLC.
 * licensing@extjs.com
 * 
 * http://extjs.com/license
 */

function ShowDetails(detail, PartType){
	var sf = Ext.getCmp('sf');
	var bf = Ext.getCmp('bf');
	var swf = Ext.getCmp('swf');
	var wf = Ext.getCmp('wf');
	var hf = Ext.getCmp('hf');
	var mf = Ext.getCmp('mf');
	var sff = Ext.getCmp('sff');
	if(!dEl){
		var dEl = Ext.get('DetailsContainer');
		//var bd = Ext.getCmp('details-panel').body;
		//bd.update('').setStyle('background','#fff');
		//var dEl = bd.createChild(); //create default empty div
		}
	if(dEl.dom.innerHTML.indexOf(detail,1)<0){
		dEl.hide().update(Ext.getDom(detail).innerHTML).slideIn('t', {stopFx:true,duration:.2});
	}
	
}

function FilterData(FilterBox){
	var myMask = new Ext.LoadMask(Ext.getBody(), {msg:"Please wait..."});
	var IsFiltered = false;
	myMask.show();
	Results3Store.removeAll();
	Ext.get('AccessoriesPanel').insertHtml("afterBegin", "<h4 class='DataViewHeader'>Select an Extrusion to see Accessories that work with it.</h4>");
	HardwareStore.clearFilter();
	Ext.getCmp('OpenPDF').disable();
	Ext.getCmp('OpenPDP').disable();
	//Ext.getCmp('DownloadCAD').disable();
	setTimeout(function() {
		Ext.getCmp('content-panel').layout.setActiveItem('Results-panel');
		//var tab = Ext.getCmp('Results-panel').getActiveTab();
		var tab = "Extrusions";
		var sf = Ext.getCmp('sf');
		var bf = Ext.getCmp('bf');
		var swf = Ext.getCmp('swf');
		var wf = Ext.getCmp('wf');
		var hf = Ext.getCmp('hf');
		var mf = Ext.getCmp('mf');
		var sff = Ext.getCmp('sff');
		var s1 = Extrusions.series;
		var s2 = Extrusions.bases;
		var s3 = Extrusions.slots;
		var s4 = Extrusions.widths;
		var s5 = Extrusions.heights;
		var s6 = Extrusions.materials;
		var s7 = Extrusions.surfacefinish;
		var n;
		for(n=0;n<s1.length;n++){s1[n][2]='';}
		for(n=0;n<s2.length;n++){s2[n][2]='';}
		for(n=0;n<s3.length;n++){s3[n][2]='';}
		for(n=0;n<s4.length;n++){s4[n][2]='';}
		for(n=0;n<s5.length;n++){s5[n][2]='';}
		for(n=0;n<s6.length;n++){s6[n][1]='';}
		for(n=0;n<s7.length;n++){s7[n][1]='';}
		var j;
		if(sf.value){
			//Now, highlight the div
			Ext.get("SeriesFilter").addClass("selected");
		}else{
			Ext.get("SeriesFilter").removeClass("selected");
		};
		if(bf.value){
			//Now, highlight the div
			Ext.get("BaseFilter").addClass("selected");
		}else{
			Ext.get("BaseFilter").removeClass("selected");
		};
		if(swf.value){
			//Now, highlight the div
			Ext.get("SlotWidthFilter").addClass("selected");
		}else{
			Ext.get("SlotWidthFilter").removeClass("selected");
		};
		if(wf.value){
			//Now, highlight the div
			Ext.get("WidthFilter").addClass("selected");
		}else{
			Ext.get("WidthFilter").removeClass("selected");
		};
		if(hf.value){
			//Now, highlight the div
			Ext.get("HeightFilter").addClass("selected");
		}else{
			Ext.get("HeightFilter").removeClass("selected");
		};
		if(mf.value){
			//Now, highlight the div
			Ext.get("MaterialFilter").addClass("selected");
		}else{
			Ext.get("MaterialFilter").removeClass("selected");
		};
		if(sff.value){
			//Now, highlight the div
			Ext.get("SurfaceFinishFilter").addClass("selected");
		}else{
			Ext.get("SurfaceFinishFilter").removeClass("selected");
		};
		// Clear previous panel results
		ResultsStore.removeAll();
		ProfileStore.clearFilter()
		var a = ProfileStore;

			a.filterBy(function(rs){
				// This function is called upon every record in the recordset.
				// If this function returns true, then the record is included in the filtered results
				// If this function returns false, then the record is not included in the filtered results
				found = false;
				arr = new Array();
				if(sf.value){
					arr = rs.get('Series').split('|');
					for(i=0;i<arr.length;i++){
						if(arr[i]==sf.value){
							found = true;
						};
					};
					if(found==false){return false;}
					//alert("Filtering Slot Width "+swf.value+", - "+a.getCount());
				};
				found = false;
				arr = new Array();
				if(bf.value){
					arr = rs.get('ExtrusionBase').split('|');
					for(i=0;i<arr.length;i++){
						if(arr[i]==bf.value){
							found = true;
						};
					};
					if(found==false){return false;}
					//alert("Filtering Slot Width "+swf.value+", - "+a.getCount());
				};
				found = false;
				arr = new Array();
				if(swf.value){
					arr = rs.get('SlotWidth').split('|');
					for(i=0;i<arr.length;i++){
						if(arr[i]==swf.value){
							found = true;
						};
					}
					if(found==false){return false;}
					//alert("Filtering Slot Width "+swf.value+", - "+a.getCount());
				};
				found = false;
				arr = new Array();
				if(wf.value){
					arr = rs.get('Width').split('|');
					for(i=0;i<arr.length;i++){
						if(arr[i]==wf.value){
							found = true;
						};
					}
					if(found==false){return false;}
					//alert("Filtering Width "+wf.value+", - "+a.getCount());
				};
				found = false;
				arr = new Array();
				if(hf.value){
					arr = rs.get('Height').split('|');
					for(i=0;i<arr.length;i++){
						if(arr[i]==hf.value){
							found = true;
						};
					}
					if(found==false){return false;}
					//alert("Filtering Height "+hf.value+", - "+a.getCount());
				};
				found = false;
				arr = new Array();
				if(mf.value){
					arr = rs.get('Material').split('|');
					for(i=0;i<arr.length;i++){
						if(arr[i]==mf.value){
							found = true;
						};
					}
					if(found==false){return false;}
					//alert("Filtering Material "+mf.value+", - "+a.getCount());
				};
				found = false;
				arr = new Array();
				if(sff.value){
					arr = rs.get('SurfaceFinish').split('|');
					for(i=0;i<arr.length;i++){
						if(arr[i]==sff.value){
							found = true;
						};
					}
					if(found==false){return false;}
					//alert("Filtering Surface Finish "+sff.value+", - "+a.getCount());
				};
				return true;
			});
			a.sortByFields([{field: 'Series', direction:'ASC'}, {field: 'ExtrusionBase', direction:'ASC'}, {field: 'SurfaceFinish', direction:'ASC'}, {field: 'SlotWidth', direction:'ASC'}, {field: 'Width', direction:'ASC'}, {field: 'Height', direction:'ASC'}]);
			var i = 0;
			var Jstring = "[";
			//var Jstring = "[";
			
			var csw = "";
			var cb = "";
			var snh = false;
			
			a.each(function(rs){
				//Iterating through each record individually.  Add tiles when needed.
				if (csw!=rs.get('Series') || cb!=rs.get('ExtrusionBase')){
					// if there is an old record, end it
					if(Jstring.substring(Jstring.length - 1)==","){Jstring = Jstring.substring(0,Jstring.length - 1);}
					if(snh){Jstring = Jstring + "]},";}
					// start new record
					csw = rs.get('Series');
					cb = rs.get('ExtrusionBase');
					snh = true;
					Jstring = Jstring + "{Filtered:"+IsFiltered+",title:'Series: " + csw + ", Base: " + cb + "',series:'" + csw + "',base:'" + cb + "',samples:["
				}
//					Jstring = Jstring + "{text:'" + rs.get('PartType') + "',slotwidth:'" + rs.get('SlotWidth') + "',series:'" + rs.get('Series') + "',extrusionbase:'" + rs.get('ExtrusionBase') + "',url:'" + rs.get('Project') + "',desc:'" + i + "',width:'" + rs.get('Width') + "',height:'" + rs.get('Height') + "',material:'" + rs.get('Material') + "',surface:'" + rs.get('SurfaceFinish') + "',pagenumber:'" + rs.get('PageNumber') + "',productid:'" + rs.get("Project").substr(rs.get("Project").length - 5, 5) + "'";
				Jstring = Jstring + "{text:'" + rs.get('PartType') + "',slotwidth:'" + rs.get('SlotWidth') + "',series:'" + rs.get('Series') + "',extrusionbase:'" + rs.get('ExtrusionBase') + "',url:'" + rs.get('Project') + "',desc:'" + i + "',width:'" + rs.get('Width') + "',height:'" + rs.get('Height') + "',material:'" + rs.get('Material') + "',surface:'" + rs.get('SurfaceFinish') + "',pagenumber:'" + rs.get('PageNumber') + "',productid:'" + rs.get("ProductID") + "'";
				if(rs.get('SurfaceFinish')=="Black Anodize"){Jstring = Jstring + ",isBlack:true";}
				if(rs.get('SurfaceFinish')=="Glossy Clear Coating"){Jstring = Jstring + ",isClear:true";}
				Jstring = Jstring + "},";
				// Now, add combobox dropdown rows
				// Also, test to make sure not to filter the rows of
				// the combobox that initiated the call
				//	Series
				for(j=0;j<s1.length;j++){
					if(s1[j][0] == rs.get("Series")){
						s1[j][2] = 'Bold';
						j = s1.length;
					}
				}
				//	Bases
				for(j=0;j<s2.length;j++){
					if(s2[j][1] == rs.get("ExtrusionBase")){
						s2[j][2] = 'Bold';
						j = s2.length;
					}
				}
				//	Slot Widths
				for(j=0;j<s3.length;j++){
					if(s3[j][0] == rs.get("SlotWidth")){
						s3[j][2] = 'Bold';
						j = s3.length;
					}
				}
				//	Widths
				for(j=0;j<s4.length;j++){
					if(s4[j][1] == rs.get("Width")){
						s4[j][2] = 'Bold';
						j = s4.length;
					}
				}
				//	Heights
				for(j=0;j<s5.length;j++){
					if(s5[j][1] == rs.get("Height")){
						s5[j][2] = 'Bold';
						j = s5.length;
					}
				}
				//	Materials
				for(j=0;j<s6.length;j++){
					if(s6[j][0] == rs.get("Material")){
						s6[j][1] = 'Bold';
						j = s6.length;
					}
				}
				//	Surface Finish
				for(j=0;j<s7.length;j++){
					if(s7[j][0] == rs.get("SurfaceFinish")){
						s7[j][1] = 'Bold';
						j = s7.length;
					}
				}
				i = i + 1;
			});
			Jstring = Jstring.substring(0,Jstring.length - 1);
			Jstring = Jstring + "]}]";
			if(Jstring=="]}]"){Jstring="[]";};
			var JSON = Ext.decode(Jstring);
			ResultsStore.loadData(JSON);
			// Now, Eval the jsons for the filterboxes
			store6.loadData(s1);
			//store6.sort("Value");
			store7.loadData(s2);
			//store7.sort("Value");
			store.loadData(s3);
			//store.sort("Value");
			store2.loadData(s4);
			//store2.sort("Value");
			store5.loadData(s5);
			//store5.sort("Value");
			store3.loadData(s6);
			//store3.sort("Value");
			store4.loadData(s7);
			//store4.sort("Value");
		if(sf.value || bf.value || swf.value || wf.value || hf.value || mf.value || sff.value){
			if(a.getCount()>0){
				Ext.get('ResultsPanel').insertHtml('afterBegin', '<h4 id="ResultHeader" class="DataViewHeader">Misumi Extrusion Products Matching Filter Criteria:</h4>');
			}
		} 
		else {
			// No filters selected
//			Ext.getCmp('content-panel').layout.setActiveItem('start-panel');
//			store6.loadData(Extrusions.series);
//			store7.loadData(Extrusions.bases);
//			store.loadData(Extrusions.slots);
//			store2.loadData(Extrusions.widths);
//			store5.loadData(Extrusions.heights);
//			store3.loadData(Extrusions.materials);
//			store4.loadData(Extrusions.surfacefinish);
			//Ext.DomHelper.insertHtml(
			Ext.get('ResultsPanel').insertHtml('afterBegin', '<h4 id="ResultHeader" class="DataViewHeader"><b><--</b> Narrow Search Results By Using Filters</h4>');
		}
			if(a.getCount()==0){
				Ext.get('ResultsPanel').insertHtml("afterBegin", "<h4 class='DataViewHeader'>No parts found that match your search criteria.</h4>");
			}
		myMask.hide();
		sf.collapse();
		bf.collapse();
		swf.collapse();
		wf.collapse();
		hf.collapse();
		mf.collapse();
		sff.collapse();
	}, 0);

};

function FilterAccessoriesData(Extrusion){
	var myMask = new Ext.LoadMask(Ext.getBody(), {msg:"Please wait..."});
	myMask.show();
	setTimeout(function() {
		var j;
		// Clear previous panel results
		Results3Store.removeAll();
		Ext.get('AccessoriesPanel').insertHtml("afterBegin", "<h4 class='DataViewHeader'>Select an Extrusion to see Accessories that work with it.</h4>");
		HardwareStore.clearFilter()
		var a = HardwareStore;
		a.sortByFields([{field: 'Group', direction:'ASC'},{field: 'Series', direction:'ASC'}]);
		a.filterBy(function(rs){
			// This function is called upon every record in the recordset.
			// If this function returns true, then the record is included in the filtered results
			// If this function returns false, then the record is not included in the filtered results
			found = false;
			arr = new Array();
			arr = rs.get('Extrusions').split('|');
			for(i=0;i<arr.length;i++){
				if(arr[i]==Extrusion){
					found = true;
				};
				if(arr[i]=="*"){
					found = true;
				};
			};
			if(found==false){return false;}
			return true;
		});
		var i = 0;
		var Jstring = "[";
		
		var csw = "";
		var cb = "";
		var snh = false;
		
		a.each(function(rs){
			//Iterating through each record individually.  Add tiles when needed.
			if (csw!=rs.get('Group')){
				// if there is an old record, end it
				if(Jstring.substring(Jstring.length - 1)==","){Jstring = Jstring.substring(0,Jstring.length - 1);}
				if(snh){Jstring = Jstring + "]},";}
				// start new record
				csw = rs.get('Group');
				snh = true;
				Jstring = Jstring + "{title:'" + rs.get('Group') + "',series:'" + rs.get('Series') + "',base:'" + cb + "',samples:[";
			}
//			Jstring = Jstring + "{text:'" + rs.get('PartType') + "',parttype:'" + rs.get('PartType') + "',description:'" + rs.get('Description') + "',series:'" + rs.get('Series') + "',desc:'" + i + "',extrusions:'" + rs.get('Extrusions') + "',material:'" + rs.get('Material') + "',surface:'" + rs.get('SurfaceFinish') + "',pagenumber:'" + rs.get('PageNumber') + "',project:'" + rs.get('Project') + "',url:'" + rs.get('Project') + "',productid:'" + rs.get("Project").substr(rs.get("Project").length - 5, 5) + "'";
			Jstring = Jstring + "{text:'" + rs.get('PartType') + "',parttype:'" + rs.get('PartType') + "',description:'" + rs.get('Description') + "',series:'" + rs.get('Series') + "',desc:'" + i + "',extrusions:'" + rs.get('Extrusions') + "',material:'" + rs.get('Material') + "',surface:'" + rs.get('SurfaceFinish') + "',pagenumber:'" + rs.get('PageNumber') + "',project:'" + rs.get('Project') + "',url:'" + rs.get('Project') + "',productid:'" + rs.get("ProductID") + "'";
			//if(rs.get('SurfaceFinish')=="Black Anodize"){Jstring = Jstring + ",isBlack:true";}
			//if(rs.get('SurfaceFinish')=="Glossy Clear Coating"){Jstring = Jstring + ",isClear:true";}
			Jstring = Jstring + "},";
			i = i + 1;
		});
		Jstring = Jstring.substring(0,Jstring.length - 1);
		Jstring = Jstring + "]}]";
		if(Jstring=="]}]"){Jstring="[]";};
		var JSON = Ext.decode(Jstring);
		Results3Store.loadData(JSON);
		if(a.getCount()==0){
			Ext.get('AccessoriesPanel').insertHtml("afterBegin", "<h4 class='DataViewHeader'>No parts found that match your search criteria.</h4>");
		}
		// Now, enable the titlebar buttons
		Ext.getCmp('OpenPDF').enable();
		Ext.getCmp('OpenPDP').enable();
		//Ext.getCmp('DownloadCAD').enable();
		myMask.hide();
	}, 0);

};

function clearAllFilters(){
	Ext.getCmp('sf').clearValue();
	Ext.getCmp('bf').clearValue();
	Ext.getCmp('swf').clearValue();
	Ext.getCmp('wf').clearValue();
	Ext.getCmp('hf').clearValue();
	Ext.getCmp('mf').clearValue();
	Ext.getCmp('sff').clearValue();
	Ext.getCmp('OpenPDF').disable();
	Ext.getCmp('OpenPDP').disable();
	//Ext.getCmp('DownloadCAD').disable();
	FilterData();
}

function movePreview(m, pressed){
	if(!m){ // cycle if not a menu item click
		var readMenu = Ext.menu.MenuMgr.get('reading-menu');
		readMenu.render();
		var items = readMenu.items.items;
		var b = items[0], r = items[1], h = items[2];
		if(b.checked){
			r.setChecked(true);
		}else if(r.checked){
			h.setChecked(true);
		}else if(h.checked){
			b.setChecked(true);
		}
		return;
	}
	if(pressed){
		var preview = Ext.getCmp("preview");
		var right = Ext.getCmp('right-preview');
		var bot = Ext.getCmp('bottom-preview');
		//var btn = this.grid.getTopToolbar().items.get(2);
		switch(m.text){
			case 'Bottom':
				right.hide();
				bot.add(preview);
				bot.show();
				bot.ownerCt.doLayout();
				//btn.setIconClass('preview-bottom');
				break;
			case 'Right':
				bot.hide();
				right.add(preview);
				right.show();
				right.ownerCt.doLayout();
				//btn.setIconClass('preview-right');
				break;
			case 'Hide':
				preview.ownerCt.hide();
				preview.ownerCt.ownerCt.doLayout();
				//btn.setIconClass('preview-hide');
				break;
		}
	}
}

function openPage(pn){
	if(pn.type=='button'){
		var t = Ext.getCmp("ResultsPanel").selected.el.dom.attributes.getNamedItem('ext:pagenumber');
		pn = t.value;
	}
	window.open("http://www.misumiusa.com/PDFViewer.aspx?Metric=true2009&Page="+pn);
}

function openProductDescriptionPage(url){
	if(url=="" || typeof(url)=='object'){
		var t = Ext.getCmp("ResultsPanel").selected.el.dom.attributes.getNamedItem('ext:url');
		window.open(t.value);
	}
	else
	{
		window.open(url);
	}
}

function openCAD(url){
/*	if(url.type=='button'){
		var t = Ext.getCmp("ResultsPanel").selected.el.dom.attributes.getNamedItem('ext:project');
		url = t.value;
	}
	window.open("https://www.partserver.de/misumi_assistant/english/23d-libs/us/ps_conf.asp?floggedin=1&prj="+url);
*/
	openProductDescriptionPage(url);
}

function showStartPage(){
	Ext.getCmp('content-panel').layout.setActiveItem('start-panel');
}

function hideStartPage(){
	Ext.getCmp('content-panel').layout.setActiveItem('Results-panel');
}

Ext.form.ClearableComboBox = function(config){
	Ext.form.ClearableComboBox.superclass.constructor.call(this, config);
	
	this.tpl = config.tpl || 
		'<tpl for="."><div class="x-combo-list-item {' + this.boldField + '}">'
		+ '{' + this.displayField + '}'
		+ '</div></tpl>';	
} 

Ext.extend(Ext.form.ClearableComboBox, Ext.form.ComboBox, {

	initComponent : function(){
		this.addEvents('reset');
		Ext.form.ClearableComboBox.superclass.initComponent.call(this);

		this.triggerConfig = {
			tag:'span', cls:'x-form-twin-triggers', style:'padding-right:3px',  // padding needed to prevent IE from clipping 2nd trigger button
			cn:[
				{tag: "img", src: Ext.BLANK_IMAGE_URL, cls: "x-form-trigger"},
				{tag: "img", src: Ext.BLANK_IMAGE_URL, cls: "x-form-trigger x-form-clear-trigger"}
			   ]
		   };
	},

	getTrigger : function(index){
		return this.triggers[index];
	},

	initTrigger : function(){
		var ts = this.trigger.select('.x-form-trigger', true);
		this.wrap.setStyle('overflow', 'hidden');
		var triggerField = this;
		ts.each(function(t, all, index){
			t.hide = function(){
				var w = triggerField.wrap.getWidth();
				this.dom.style.display = 'none';
				triggerField.el.setWidth(w-triggerField.trigger.getWidth());
			};
			t.show = function(){
				var w = triggerField.wrap.getWidth();
				this.dom.style.display = '';
				triggerField.el.setWidth(w-triggerField.trigger.getWidth());
			};
			var triggerIndex = 'Trigger'+(index+1);

			if(this['hide'+triggerIndex]){
				t.dom.style.display = 'none';
			}
			t.on("click", this['on'+triggerIndex+'Click'], this, {preventDefault:true});
			t.addClassOnOver('x-form-trigger-over');
			t.addClassOnClick('x-form-trigger-click');
		}, this);
		this.triggers = ts.elements;
	},

	onTrigger1Click : function() {this.onTriggerClick()},   // pass to original combobox trigger handler
	onTrigger2Click : function() {this.reset();this.fireEvent('reset',this)}			 // clear contents of combobox
	
});

Ext.override(Ext.data.Store, {
	/**
	 * Sort by multiple fields in the specified order.
	 * @param {Array} An Array of field sort specifications, or, if ascending
	 * sort is required on all columns, an Array of field names. A field specification
	 * looks like:<pre><code>
					{
						field: 'orderNumber',
						direction: 'ASC'
					}
					</code><pre>
	 */
	sortByFields: function(fields) {
		
//	  Collect sort type functions,
//	  Convert string field names to field+direction spec objects.
		var st = [];
		for (var i = 0; i < fields.length; i++) {
			if (typeof fields[i] == 'string') {
				fields[i] = {
					field: fields[i],
					direction: 'ASC'
				};
			}
			st.push(this.fields.get(fields[i].field).sortType);
		}

		var fn = function(r1, r2) {
			var result;
			for (var i = 0; !result && i < fields.length; i++) {
				var v1 = st[i](r1.data[fields[i].field]);
				var v2 = st[i](r2.data[fields[i].field]);
				result = (v1 > v2) ? 1 : ((v1 < v2) ? -1 : 0);
				if (fields[i].direction == 'DESC') result = -result;
			}
			return result;
		};
		this.data.sort('ASC', fn);
		if(this.snapshot && this.snapshot != this.data){
			this.snapshot.sort('ASC', fn);
		}
		this.fireEvent("datachanged", this);
	}
});

//
// This is the main layout definition.
//

Ext.onReady(function(){
	
	Ext.QuickTips.init();
	Ext.apply(Ext.QuickTips.getQuickTip(), {
		trackMouse: true
	});
	// This is an inner body element within the Details panel created to provide a "slide in" effect
	// on the panel body without affecting the body's box itself.  This element is created on
	// initial use and cached in this var for subsequent access.
	var detailEl;
	
	// This is the main content center region that will contain each example layout panel.
	// It will be implemented as a CardLayout since it will contain multiple panels with
	// only one being visible at any given time.

	var start = {
		id: 'start-panel',
		title: 'Start Page',
		layout: 'fit',
		bodyStyle: 'padding:25px',
		contentEl: 'start-div'  // pull existing content from the page
	};

	var ResultsPanel = Ext.extend(Ext.DataView, {
	id:'ResultsPanel',
	autoHeight: false,
	autoScroll: true,
	//frame:true,
	layout:'fit',
	cls:'demos',
	itemSelector: 'dd',
	overClass: 'over',
	loadingText: "Please Wait",
	selectedClass: 'selected',
	singleSelect: true,
	listeners: {
		'click' : {
			fn: function(a,i,h,e){
				var t = e.getTarget('dd', 5, true);
				var parttype = t.getAttributeNS('ext', 'parttype');
/*				if(t && !e.getTarget('a', 2)){
					var parttype = t.getAttributeNS('ext', 'parttype');
					var Series = t.getAttributeNS('ext', 'series');
					var Width = t.getAttributeNS('ext', 'width');
					var Height = t.getAttributeNS('ext', 'height');
					}*/
				FilterAccessoriesData(parttype);
				a.select(i);
				//alert(parttype);
				//window.open(url);
			},
			//scope: this,
			delay: 100
		},
		'containerclick' : {
			fn: function(a,i,h,e){
				Results3Store.removeAll();
				Ext.get('AccessoriesPanel').insertHtml("afterBegin", "<h4 class='DataViewHeader'>Select an Extrusion to see Accessories that work with it.</h4>");
				HardwareStore.clearFilter();
				Ext.getCmp('OpenPDF').disable();
				Ext.getCmp('OpenPDP').disable();
				//Ext.getCmp('DownloadCAD').disable();
				//window.open(url);
			}
			//scope: this
			//delay: 100
		},
		'dblclick' : {
			fn: function(a,i,h,e){
				var t = e.getTarget('dd', 5, true);
				var url = t.getAttributeNS('ext', 'url');
				window.open(url);
			}
			
		},
		'mouseenter' : {
			fn: function(a,i,h,e){
				var t = e.getTarget('dd', 5, true);
				if(t && !e.getTarget('a', 2)){
					var parttype = t.getAttributeNS('ext', 'parttype');
					}
				//alert(url);
				ShowDetails('ResultTile-details', parttype)
				//alert(parttype);
			}
		}
	},


	tpl : new Ext.XTemplate(
		'<div id="sample-ct">',
			'<tpl for=".">',
			'<div><a name="{id}"></a><h2><div>{title}</div></h2>',
			'<dl>',
				'<tpl for="samples">',
//				'<dd ext:project="{url}" ext:parttype="{text}" ext:series="{series}" ext:width="{width}" ext:height="{height}" ext:pagenumber="{pagenumber}" ext:url="https://fa.misumiusa.com/gwos/catalog/catalog_view_pc080.aspx?CATALOG_ID=0001&CATEGORY_ID=026&PRODUCT_ID={productid}"><img src="images/{text}.jpg"/>',
//					'<dd ext:project="{url}" ext:parttype="{text}" ext:series="{series}" ext:width="{width}" ext:height="{height}" ext:pagenumber="{pagenumber}" ext:url="http://www.misumi-ec.com/usa/eusaen/ItemDetail/{productid}.html"><img src="images/{text}.jpg"/>',
					'<dd ext:project="{url}" ext:parttype="{text}" ext:series="{series}" ext:width="{width}" ext:height="{height}" ext:pagenumber="{pagenumber}" ext:url="http://us.misumi-ec.com/us/ItemDetail/{productid}.html"><img src="images/{text}.jpg"/>',
 						'<div',
						'<tpl if="values.isBlack"> class="black"</tpl>',
						'<tpl if="values.isClear"> class="clear"</tpl>',
						'><h4>{text}',
							'</h4><p>Slot Width: {slotwidth}</p><p>Extrusion Base: {extrusionbase}</p><p>Width: {width}, Height: {height}</p><p ext:qtip="{material}">Material: {material}</p><p ext:qtip="{surface}"',
							'<tpl if="values.isBlack"> class="black"</tpl>',
							'<tpl if="values.isClear"> class="clear"</tpl>',
//							'>Surface: {surface}</p><p class="PageRow"><a ext:qtip="US Metric 2009" onclick="openPage({pagenumber});" class="PageRow">Page: {pagenumber}</p></a><a onclick="openCAD('+ "'http://www.misumi-ec.com/usa/eusaen/ItemDetail/" + '{productid}' + ".html'" + ');"><img class="icons" style="width:78px;height:14px;display:inline;margin:1px;margin-left:22px;" src="images/SmallDownloadCAD.jpg"/></a>',
							'>Surface: {surface}</p><p class="PageRow"><a ext:qtip="US Metric 2009" onclick="openPage({pagenumber});" class="PageRow">Page: {pagenumber}</p></a><a onclick="openCAD('+ "'http://us.misumi-ec.com/us/ItemDetail/" + '{productid}' + ".html'" + ');"><img class="icons" style="width:78px;height:14px;display:inline;margin:1px;margin-left:22px;" src="images/SmallDownloadCAD.jpg"/></a>',
							'</div>',
					'</dd>',
				'</tpl>',
			'<div style="clear:left"></div></dl></div>',
			'</tpl>',
		'</div>'
	),

	onClick : function(e){
		var group = e.getTarget('h2', 3, true);
		if(group){
			group.up('div').toggleClass('collapsed');
		}/*else {
			var t = e.getTarget('dd', 5, true);
			if(t && !e.getTarget('a', 2)){
				var url = t.getAttributeNS('ext', 'url');
				window.open(url);
			}
		}*/
		return ResultsPanel.superclass.onClick.apply(this, arguments);
	}

});

	var AccessoriesPanel = Ext.extend(Ext.DataView, {
	autoHeight: false,
	autoScroll: true,
	//frame:true,
	layout:'fit',
	cls:'demos',
	itemSelector: 'dd',
	overClass: 'over',
	selectedClass: 'selected',
	listeners: {
		'dblclick' : {
			fn: function(a,i,h,e){
				var t = e.getTarget('dd', 5, true);
				var url = t.getAttributeNS('ext', 'url');
				window.open(url);
			}
			
		}
	},
	tpl : new Ext.XTemplate(
		'<div id="accessories-ct">',
			'<tpl for=".">',
			'<div class="collapsed"><a name="{id}"></a><h2><div>{title}</div></h2>',
			'<dl>',
				'<tpl for="samples">',
//					'<dd ext:project="{url}" ext:parttype="{text}" ext:series="{series}" ext:pagenumber="{pagenumber}" ext:url="https://fa.misumiusa.com/gwos/catalog/catalog_view_pc080.aspx?CATALOG_ID=0001&CATEGORY_ID=026&PRODUCT_ID={productid}"><img src="images/{text}.jpg"/>',
//					'<dd ext:project="{url}" ext:parttype="{text}" ext:series="{series}" ext:pagenumber="{pagenumber}" ext:url="http://www.misumi-ec.com/usa/eusaen/ItemDetail/{productid}.html"><img src="images/{text}.jpg"/>',
					'<dd ext:project="{url}" ext:parttype="{text}" ext:series="{series}" ext:pagenumber="{pagenumber}" ext:url="http://us.misumi-ec.com/us/ItemDetail/{productid}.html"><img src="images/{text}.jpg"/>',
 						'<div><h4>{text}',
							'</h4><p>Series: {series}</p>',
							'</h4><p ext:qtip="{description}" class="Description">{description}</p><p ext:qtip="{material}">Material: {material}</p><p ext:qtip="{surface}"',
//							'>Surface: {surface}</p><p class="PageRow"><a ext:qtip="US Metric 2009" onclick="openPage({pagenumber});" class="PageRow">Page: {pagenumber}</p></a><a onclick="openCAD('+ "'http://www.misumi-ec.com/usa/eusaen/ItemDetail/" + '{productid}' + ".html'" + ');"><img class="icons" style="width:78px;height:14px;display:inline;margin:1px;margin-left:22px;" src="images/SmallDownloadCAD.jpg"/></a>',
							'>Surface: {surface}</p><p class="PageRow"><a ext:qtip="US Metric 2009" onclick="openPage({pagenumber});" class="PageRow">Page: {pagenumber}</p></a><a onclick="openCAD('+ "'http://us.misumi-ec.com/us/ItemDetail/" + '{productid}' + ".html'" + ');"><img class="icons" style="width:78px;height:14px;display:inline;margin:1px;margin-left:22px;" src="images/SmallDownloadCAD.jpg"/></a>',
							'</div>',
					'</dd>',
				'</tpl>',
			'<div style="clear:left"></div></dl></div>',
			'</tpl>',
		'</div>'
	),
	onClick : function(e){
		var group = e.getTarget('h2', 3, true);
		if(group){
			group.up('div').toggleClass('collapsed');
		}
		return ResultsPanel.superclass.onClick.apply(this, arguments);
	}
});

	ResultsStore = new Ext.data.JsonStore({
		idProperty: 'id',
		fields: ['id', 'title', 'samples'],
		data: catalog
	});
	Results2Store = new Ext.data.JsonStore({
		idProperty: 'id',
		fields: ['id', 'title', 'samples'],
		data: catalog2
	});
	Results3Store = new Ext.data.JsonStore({
		idProperty: 'id',
		fields: ['id', 'title', 'samples'],
		data: catalog3
	});

	var preview = new Ext.Panel({
		id: 'preview',
		region: 'south',
		cls:'preview',
		border: true,
/*		tbar:[
			{
				id:'OpenPDF2',
				text:'Open PDF Page',
				disabled:true,
				tooltip: {title:'Open PDF', text:'Open the PDF of the Misumi Catalog Page'},
				//iconCls: 'openPDF',
				handler: openPage
			},
			"-",
			{
				id:'OpenPDP2',
				text:'Open Product Description Page / Download CAD',
				disabled:true,
				tooltip: {title:'Open Product Description Page', text:'Open the Product Description Page from the Misumi Website'},
				//iconCls: 'openProductDescriptionPage',
				handler: openProductDescriptionPage
			}
		],*/
		items: new AccessoriesPanel({
					store: Results3Store,
					id: 'AccessoriesPanel',
					region: 'center',
					autoScroll: true
		}),
		autoScroll: true
	});	

	var Results = {
//		xtype: 'tabpanel',
		id: 'Results-panel',
//		plain: true,  //remove the header border
		layout:'fit',
//		activeItem: 0,
		defaults: {bodyStyle: 'padding:15px'},
			items: [{
				id:'Results',
				layout:'border',
				//title:'Extrusions',
				tbar:[
						{
							split:true,
							text:'Accessories Pane',
							tooltip: {title:'Accessories Pane',text:'Show, move or hide the Accessories Pane'},
							//iconCls: 'preview-bottom',
							handler: movePreview.createDelegate(this, []),
							menu:{
								id:'reading-menu',
								cls:'reading-menu',
								width:100,
								items: [{
									text:'Bottom',
									checked:false,
									group:'rp-group',
									checkHandler:movePreview,
//									scope:this,
									iconCls:'preview-bottom'
								},{
									text:'Right',
									checked:false,
									group:'rp-group',
									checkHandler:movePreview,
//									scope:this,
									iconCls:'preview-right'
								},{
									text:'Hide',
									checked:true,
									group:'rp-group',
									checkHandler:movePreview,
//									scope:this,
									iconCls:'preview-hide'
								}]
							}
						},
						"-",
						{
							id:'OpenPDF',
							text:'Open PDF Page',
							disabled:true,
							tooltip: {title:'Open PDF', text:'Open the PDF of the Misumi Catalog Page'},
							//iconCls: 'openPDF',
							handler: openPage
						},
						"-",
						{
							id:'OpenPDP',
							text:'Open Product Description Page / Download CAD',
							disabled:true,
							tooltip: {title:'Open Product Description Page', text:'Open the Product Description Page from the Misumi Website'},
							//iconCls: 'openProductDescriptionPage',
							handler: openCAD
						},
						"-",
						{
							id:'ShowStartPage',
							text:'Show Start Page',
							disabled:false,
							//enableToggle:true,
							tooltip: {title:'Show Start Page', text:'Display a page that describes how to use this site'},
							//toggleHandler: showStartPage
							handler: showStartPage
						}/*,
						"-",
						{
							id:'DownloadCAD',
							disabled:true,
							text:'Download CAD',
							//iconCls:'downloadCAD',
							handler: openCAD
						}*/
					],
				hideMode:'offsets',
				items:
				[
					new ResultsPanel({
					store: ResultsStore,
					id: 'ResultsPanel',
					//autoHeight:true,
					//id: 'd-panel',
					region: 'center',
					//bodyStyle: 'padding-bottom:15px;background:#fff',
					autoScroll: true
					}), 
					{ // This is where IE is crashing....
						id:'bottom-preview',
						layout:'fit',
						title: 'Accessories',
						height: 250,
						items:preview,
						split: true,
						border:true,
						hidden:true,
						region:'south'
					},
					{
						id:'right-preview',
						layout:'fit',
						title: 'Accessories',
						border:true,
						region:'east',
						width:350,
						split: true,
						hidden:true
					}
				]
			}]
	};

	var contentPanel = {
		id: 'content-panel',
		region: 'center', // this is what makes this panel into a region within the containing layout
		layout: 'card',
		margins: '2 5 5 0',
		activeItem: 0,
		border: false,
		items: [
			// from basic.js:
			start, Results
		]
	};

	var filterPanel = {
		id: 'filter-panel',
		region: 'north',
		title: 'Filter By:<span class="ClearAllFilters">Clear All Filters</span>',
		split: true,
		height: 340,
		minSize: 150,
		autoScroll: true,
		tools:[{
			id:'close',
			qtip: 'Click to remove all filters.',
			handler: clearAllFilters
		}],
		html: '<div class="filter-info" id="SeriesFilter">Series (Slot Width):</div></p><p id="bp"><div class="filter-info" id="BaseFilter">Base Size:</div></p><p id="swp"><div class="filter-info" id="SlotWidthFilter">Slot Width:</div></p><p id="wp"><div class="filter-info" id="WidthFilter">Extrusion Width:</div></p><p id="hp"><div class="filter-info" id="HeightFilter">Extrusion Height:</div></p><p id="mp"><div class="filter-info" id="MaterialFilter">Material:</div></p><p id="sfp"><div class="filter-info" id="SurfaceFinishFilter">Surface Finish:</div></p>'
		//
	};

	// This is the Details panel that contains the description for each example layout.
	var detailsPanel = {
		id: 'details-panel',
		title: 'Details',
		region: 'center',
		bodyStyle: 'padding-bottom:15px;background:#fff',
		autoScroll: true,
		html: '<div id="DetailsContainer"><p class="details-info">When you select an extrusion from above, additional details will display here.</p></div>'
	};

	// Finally, build the main layout once all the pieces are ready.  This is also a good
	// example of putting together a full-screen BorderLayout within a Viewport.
	new Ext.Viewport({
		layout: 'border',
		title: 'Ext Layout Browser',
		items: [{
			xtype: 'box',
			region: 'north',
			applyTo: 'header',
			height: 30
		},{
			layout: 'border',
			id: 'layout-browser',
			region:'west',
			border: false,
			split:true,
			margins: '2 0 5 5',
			width: 210,
			minSize: 195,
			maxSize: 500,
			items: [filterPanel, detailsPanel]
		},
			contentPanel
		],
		renderTo: Ext.getBody()
	});


	Ext.getCmp('Results-panel').addListener('tabchange', FilterData);

	ProfileStore = new Ext.data.SimpleStore({
		fields: ['PartType','Series','SlotWidth','ExtrusionBase','Width','Height','Material','SurfaceFinish','PageNumber','Project','ProductID'],
		data: Extrusions.ProfileData
	});
	BracketStore = new Ext.data.SimpleStore({
		fields: ['PartType','Series','SlotWidth','ExtrusionBase','Width','Height','Material','SurfaceFinish','PageNumber','Project','ProductID'],
		data: Extrusions.BracketData
	});
	HardwareStore = new Ext.data.SimpleStore({
		fields:['PartType','Description','Series','Material','SurfaceFinish','PageNumber','Project','Extrusions','ProductID','Group'],
		data: Extrusions.HardwareData
	});
	//Series
	store6 = new Ext.data.SimpleStore({
		fields: ['Value', 'Series', 'Bold'],
		data: Extrusions.series
	});
	// Bases
	store7 = new Ext.data.SimpleStore({
		fields: ['Base', 'Value', 'Bold'],
		data: Extrusions.bases
	});
	// Slot Widths
	store = new Ext.data.SimpleStore({
		fields: ['Value', 'SlotWidth', 'Bold'],
		data: Extrusions.slots
	});
	// Widths
	store2 = new Ext.data.SimpleStore({
		fields: ['Width','Value', 'Bold'],
		data: Extrusions.widths
	});
	// Heights
	store5 = new Ext.data.SimpleStore({
		fields: ['Height','Value', 'Bold'],
		data: Extrusions.heights
	});
	// Materials
	store3 = new Ext.data.SimpleStore({
		fields: ['Value', 'Bold'],
		data: Extrusions.materials
	});
	// Surface Finish
	store4 = new Ext.data.SimpleStore({
		fields: ['Value', 'Bold'],
		data: Extrusions.surfacefinish
	});

	// Series
	sf = new Ext.form.ClearableComboBox({
		id: 'sf',
		store: store6,
		displayField: 'Series',
		valueField: 'Value',
		boldField: 'Bold',
		typeAhead: true,
		mode: 'local',
		triggerAction: 'all',
		emptyText: 'Select a Series...',
		selectOnFocus: true,
		renderTo: 'SeriesFilter'
	});
	// Filter the data after a selection...
	sf.on('select', function(cmbo,r,index){
		FilterData(sf);
	});
	sf.on('reset', function(cmbo,r,index){
		FilterData(sf);
	});
/*	new Ext.ToolTip({
		target: 'SeriesFilter',
		anchor: 'top',
		width: 185,
		anchorOffset: 155, // center the anchor on the tooltip
		bodyStyle:'font-weight:bold',
		html: 'Click to clear this filter'
	});
*/	// Base
	bf = new Ext.form.ClearableComboBox({
		id: 'bf',
		store: store7,
		renderTo: 'BaseFilter',
		displayField: 'Base',
		valueField: 'Value',
		boldField: 'Bold',
		typeAhead: true,
		mode: 'local',
		triggerAction: 'all',
		emptyText: 'Select a Base...',
		selectOnFocus: true
	});
	// Filter the data after a selection...
	bf.on('select', function(cmbo,r,index){
		FilterData(bf);
	});
	bf.on('reset', function(cmbo,r,index){
		FilterData(bf);
	});
/*	new Ext.ToolTip({
		target: 'BaseFilter',
		anchor: 'top',
		width: 185,
		anchorOffset: 155, // center the anchor on the tooltip
		bodyStyle:'font-weight:bold',
		html: 'Click to clear this filter'
	});
*/	// Slot Width
	swf = new Ext.form.ClearableComboBox({
		id: 'swf',
		store: store,
		renderTo: 'SlotWidthFilter',
		displayField: 'SlotWidth',
		boldField: 'Bold',
		valueField: 'Value',
		typeAhead: true,
		mode: 'local',
		triggerAction: 'all',
		emptyText: 'Select a Slot Width...',
		selectOnFocus: true
	});
	// Filter the data after a selection...
	swf.on('select', function(cmbo,r,index){
		FilterData(swf);
	});
	swf.on('reset', function(cmbo,r,index){
		FilterData(swf);
	});
/*	new Ext.ToolTip({
		target: 'SlotWidthFilter',
		anchor: 'top',
		width: 185,
		anchorOffset: 155, // center the anchor on the tooltip
		bodyStyle:'font-weight:bold',
		html: 'Click to clear this filter'
	});
*/	// Width
	wf = new Ext.form.ClearableComboBox({
		id: 'wf',
		store: store2,
		renderTo: 'WidthFilter',
		displayField: 'Width',
		valueField: 'Value',
		boldField: 'Bold',
		typeAhead: true,
		mode: 'local',
		triggerAction: 'all',
		emptyText: 'Select a Width...',
		selectOnFocus: true
	});
	// Filter the data after a selection...
	wf.on('select', function(cmbo,r,index){
		FilterData(wf);
	});
	wf.on('reset', function(cmbo,r,index){
		FilterData(wf);
	});
/*	new Ext.ToolTip({
		target: 'WidthFilter',
		anchor: 'top',
		width: 185,
		anchorOffset: 155, // center the anchor on the tooltip
		bodyStyle:'font-weight:bold',
		html: 'Click to clear this filter'
	});
*/	// Height
	hf = new Ext.form.ClearableComboBox({
		id: 'hf',
		store: store5,
		renderTo: 'HeightFilter',
		displayField: 'Height',
		valueField: 'Value',
		boldField: 'Bold',
		typeAhead: true,
		mode: 'local',
		triggerAction: 'all',
		emptyText: 'Select a Height...',
		selectOnFocus: true
	});
	// Filter the data after a selection...
	hf.on('select', function(cmbo,r,index){
		FilterData(hf);
	});
	hf.on('reset', function(cmbo,r,index){
		FilterData(hf);
	});
/*	new Ext.ToolTip({
		target: 'HeightFilter',
		anchor: 'top',
		width: 185,
		anchorOffset: 155, // center the anchor on the tooltip
		bodyStyle:'font-weight:bold',
		html: 'Click to clear this filter'
	});
*/	// Material
	mf = new Ext.form.ClearableComboBox({
		id: 'mf',
		store: store3,
		renderTo: 'MaterialFilter',
		displayField: 'Value',
		valueField: 'Value',
		boldField: 'Bold',
		typeAhead: true,
		mode: 'local',
		triggerAction: 'all',
		emptyText: 'Select a Material...',
		selectOnFocus: true
	});
	// Filter the data after a selection...
	mf.on('select', function(cmbo,r,index){
		FilterData(mf);
	});
	mf.on('reset', function(cmbo,r,index){
		FilterData(mf);
	});
/*	new Ext.ToolTip({
		target: 'MaterialFilter',
		anchor: 'top',
		width: 185,
		anchorOffset: 155, // center the anchor on the tooltip
		bodyStyle:'font-weight:bold',
		html: 'Click to clear this filter'
	});
*/	// Surface Finsih
	sff = new Ext.form.ClearableComboBox({
		id: 'sff',
		store: store4,
		renderTo: 'SurfaceFinishFilter',
		displayField: 'Value',
		valueField: 'Value',
		boldField: 'Bold',
		typeAhead: true,
		mode: 'local',
		triggerAction: 'all',
		emptyText: 'Select a Surface Finish...',
		selectOnFocus: true
	});
	// Filter the data after a selection...
	sff.on('select', function(cmbo,r,index){
		FilterData(sff);
	});
	sff.on('reset', function(cmbo,r,index){
		FilterData(sff);
	});
/*	new Ext.ToolTip({
		target: 'SurfaceFinishFilter',
		anchor: 'top',
		width: 185,
		anchorOffset: 155, // center the anchor on the tooltip
		bodyStyle:'font-weight:bold',
		html: 'Click to clear this filter'
	});
*/	
	Ext.get('SeriesFilter').on('mouseenter', function(){ShowDetails('Series-details','');});
	Ext.get('BaseFilter').on('mouseenter', function(){ShowDetails('Base-details','');});
	Ext.get('SlotWidthFilter').on('mouseenter', function(){ShowDetails('SlotWidth-details','');});
	Ext.get('WidthFilter').on('mouseenter', function(){ShowDetails('Width-details','');});
	Ext.get('HeightFilter').on('mouseenter', function(){ShowDetails('Height-details','');});
	Ext.get('MaterialFilter').on('mouseenter', function(){ShowDetails('Material-details','');});
	Ext.get('SurfaceFinishFilter').on('mouseenter', function(){ShowDetails('SurfaceFinish-details','');});

	// Had to do it this way because IE sucks a lot.
	movePreview();
	movePreview();
	
	clearAllFilters();
});