///On ready function
	
	//Customisation
	$panelWidth=888;
	$panelHeight=451;
	
	
		Ext.onReady(function(){
			  Ext.QuickTips.init();
			  
			  var search_bar=[
							{xtype:'tbtext',text:'Product, Distillery or NOM :'},
							{xtype:'field',id:'keyword'},
							{xtype:'tbbutton',text:'Find',
								handler:function(){
										var ds=Ext.getCmp('myGrid').store;
										ds.reload();
											}

								},
							{xtype:'tbseparator'},
							{xtype:'tbbutton',text:'View All',align:'right', 
								handler:function(){Ext.getCmp('keyword').setValue(''); 
								Ext.getCmp('myGrid').store.reload({params:{start: 0, limit: 16}})}
								}
					]
			  
			  
			  
	
	
	
	var $details = {
		id: 'detailPanel',
        title: 'Product Information',
        region: 'center',
        bodyStyle: 'padding:15px;background:#eee;',
		autoScroll: true,
		height:$panelHeight,
		html: '<p class="details-info">When you select a product from the left, additional details will display here.</p>'
    	};
		
		
		

	
		
	var $grid = {
				url:'server/index.php?action=client_grid',
				id:'myGrid',
				region:'center',
				title:'',
				width:'auto',
				forceFit:true,
				height:$panelHeight-26,
				tbar:search_bar,
				viewConfig: {forceFit: true},
				sortInfo:{field: "col_1_Brand_178", direction: "ASC"}
				}
	
	var $layout = {  
			  // title:'NOM Database',
			   layout:'border', //Use border Layout
			   width:$panelWidth,  //Panel Width
			   height:$panelHeight, //Panel height
			    

			   items: [
			   				{////Side Menu
						
						
								xtype:'panel',
								region:'east',
								width:220,
								
								
								items:[$details]
								
							},
							{
								region:'center', 
								id:'panel_center',
								
								title:'TEQUILA.net NOM Database'
							}
			   		   ] //Panel Items
			 }
			 
			
	window.Control={
		search:	function(str){
			Ext.getCmp('keyword').setValue(str);
			Ext.getCmp('myGrid').store.reload({params:{start: 0, limit: 16}})
		},
		loadInfo:	function(id){
				$.get('server/index.php?action=clientdetail&idproduct='+id, Control.loadInfo_exec)
				
		},
		toGrid: function(){Ext.getCmp('myGrid').expand();},
		loadInfo_exec:	function(resp){
			var detailPanel = Ext.getCmp('detailPanel');
				detailPanel.body.update(resp);
				detailPanel.expand();
				 new Ext.ToolTip({
									target: 'nom_search',
									html: 'Search this NOM',
									 trackMouse:true,
									   showDelay:100

								});	
								 
								
		},
		form_products_get: 		function(){$.get('server/index.php?action=client_grid&limit=16&start=0',Control.form_products_get_exec)},
	 	form_products_get_exec: function(resp){
		
										//Get Html
										var resp=Ext.decode(resp) ;	resp.rows=resp.data
										var myGrid=ext_grid_creator(resp,$grid);
										
										myGrid.render('ext-gen21')
										var ds=Ext.getCmp('myGrid').store
										ds.load({params:{start: 0, limit: 16}});
										myGrid.getSelectionModel().on('rowselect', function(sm, rowIdx, r) {Control.loadInfo(r.id)});
										$('#keyword').keyup(function(e){ds.load({params:{start: 0,limit:16}});})
										
										//Tooltip
										 new Ext.ToolTip({
													target: 'ext-gen32',
													html: 'Click for more information',
													 trackMouse:true,
													   showDelay:100

												});
											
											
												
										
										
											}
		}
	
	

			var layout=new Ext.Panel($layout); 
			layout.render('main');
			Control.form_products_get();
			
			//Create Layout
			
		})