// vim: sw=4:ts=4:nu:nospell:fdc=4
/**
 * Ext.ux.grid.RecordForm Plugin Example Application
 *
 * @author    Ing. Jozef Sakáloš
 * @copyright (c) 2008, by Ing. Jozef Sakáloš
 * @date      31. March 2008
 * @version   $Id: recordform.js 93 2008-09-30 06:51:10Z jozo $

 * @license recordform.js is licensed under the terms of
 * the Open Source LGPL 3.0 license.  Commercial use is permitted to the extent
 * that the code/component(s) do NOT become part of another Open Source or Commercially
 * licensed development library or toolkit without explicit permission.
 * 
 * License details: http://www.gnu.org/licenses/lgpl.html
 */

/*global Ext, Web, Example */
function showImageUpload(LocationID) {
    dialog = new Ext.ux.UploadDialog.Dialog({
      url: 'api/saveLocationImage',
      reset_on_hide: false,
      allow_close_on_upload: false,
      upload_autostart: true,
      base_params:{
	    LocationID:LocationID
      }
    });
    dialog.on({
        uploadsuccess: function(updialog, filename, json){
	    Ext.getCmp('imageDV').store.reload();
        }
    }); 
    dialog.show();
}
function showLocationImages(LocationID,close) {
    var store = new Ext.data.JsonStore({
	proxy:new Ext.data.HttpProxy({url:'api/getLocationImages',method:'POST'}),
	root: 'images',
	baseParams:{LocationID:LocationID},
	fields: ['ImageName', 'ImageID','url']
    });
    store.load();

    var tpl = new Ext.XTemplate(
		'<tpl for=".">',
	    '<div class="thumb-wrap" id="{name}">',
		    '<div class="thumb"><img src="{url}" title="{name}"></div>',
		    '<span class="x-editable">{shortName}</span></div>',
	'</tpl>',
	'<div class="x-clear"></div>'
	);

    var toolbar = new Ext.Toolbar({
	items:[{
		 text:'Add Images'
		,tooltip:'Add images to location'
		,iconCls:'icon-form-add'
		,listeners:{
			click:{fn:function() {showImageUpload(LocationID)}}
		}
	}]
    });
    var panel = new Ext.Window({
	id:'images-view',
	width:535,
	modal:true,
	tbar:toolbar,
	resizable:false,
	draggable:true,
	autoHeight:true,
	layout:'fit',
	title:'Image List (Double click to delete an image)',

	items: new Ext.DataView({
	    store: store,
	    tpl: tpl,
	    id:'imageDV',
	    autoHeight:true,
	    multiSelect: false,
	    overClass:'x-view-over',
	    style:'background-color:white',
	    itemSelector:'div.thumb-wrap',
	    emptyText: 'No images to display',

	    listeners: {
		dblclick : function(scope,index,node,e){
		    ImageID = scope.getRecord(node).json.ImageID;
		    if (!ImageID) {
		    	return;
		    }
		     Ext.Msg.show({
			 title:'Delete record?'
			,msg:'Are you sure you wish to delete this image?</b><br/>There is no undo.'
			,icon:Ext.Msg.QUESTION
			,buttons:Ext.Msg.YESNO
			,scope:this
			,fn:function(response) {
				if('yes' !== response) {
					return;
				}
				else {
				    Ext.MessageBox.show({
				       msg: 'Deleting image, please wait...',
				       progressText: 'Saving...',
				       width:300,
				       wait:true,
				       waitConfig: {interval:200},
				       icon:'ext-mb-download', //custom class in msg-box.html
				       animEl: 'mb7'
				   });
				   
				   function callbackWin() {
				   	Ext.MessageBox.hide()
				       
				       this.store.reload();
				    }
				    
				    function callbackFail() {
				    	Ext.MessageBox.show({
					       title: 'Error',
					       msg: "Server is unable to process your request at this time",
					       buttons: Ext.MessageBox.OK,
					       icon: Ext.MessageBox.ERROR
				       });
				    }
				   
				    Ext.Ajax.request({
					url: 'api/deleteLocationImage',
					success: callbackWin,
					failure: callbackFail,
					scope:this,
					params: { 
					    ImageID	:	ImageID
					}
				    });
				}
			}
		});
		
		}
	    }
	})
    });
    panel.show();
    if (close) {
	panel.close();
    }
}

Ext.ns('Example');
Ext.state.Manager.setProvider(new Ext.state.CookieProvider);
Example.version = 'Beta 2'
Ext.QuickTips.init();

Example.Grid1 = Ext.extend(Ext.grid.GridPanel, {
	 layout:'fit'
	,border:false
	,stateful:false
	,url:'api/getLocations'
	,idName:'LocationID'
	// {{{
	,initComponent:function() {
		this.recordForm = new Ext.ux.grid.RecordForm({
			 title:'Location'
			,iconCls:'icon-edit-record'
			,columnCount:2
			,ignoreFields:{
			    compID:true,
			    CategoryName:true,
			    RegionName:true,
			    CountyName:true,
			    TownID:true,
			    LocationID:true
			}
			,readonlyFields:{action1:true}
			,disabledFields:{qtip1:true}
			,formConfig:{
				 labelWidth:150
				,buttonAlign:'right'
				,closable:false
				,bodyStyle:'padding-top:10px'
			}
		});

		// create row actions
		this.rowActions = new Ext.ux.grid.RowActions({
			 actions:[{
				 iconCls:'icon-minus'
				,qtip:'Delete Record'
			},{
				 iconCls:'icon-edit-record'
				,qtip:'Edit Record'
			},{
				 iconCls:'icon-form-add'
				,qtip:'Upload new images'
			}
			]
			,widthIntercept:Ext.isSafari ? 4 : 2
			,id:'actions'
		});
		this.rowActions.on('action', this.onRowAction, this);

		Ext.apply(this, {
			// {{{
			store:new Ext.data.Store({
				reader:new Ext.data.JsonReader({
				     id:'LocationID'
				    ,totalProperty:'NumberOfRecords'
				    ,root:'data'
				    ,fields:[
					    {name:'CategoryID', type:'int'},
					    {name:'TownName', type:'string'},
					    
					    {name:'LocationName', type:'string'},
					    {name:'LocationPostcode', type:'string'},
					    
					    {name:'LocationAddress1', type:'string'},
					    {name:'LocationPhoneNumber', type:'string'},
					    
					    {name:'LocationAddress2', type:'string'},
					    {name:'LocationWeb', type:'string'},
					    
					    {name:'RegionID', type:'int'},
					    {name:'LocationFax', type:'string'},
					    
					    {name:'CountyID', type:'int'},
					    {name:'CategoryName', type:'string'},
					    
					    {name:'LocationEmail', type:'string'},				    
					    {name:'RegionName', type:'string'},
					    
					    {name:'CountyName', type:'string'},
					    
					    
					    {name:'LocationID', type:'int'},
					    {name:'TownID', type:'int'},
					    
					    
					    
					    
					    
					    {name:'ElectricHookUp', type:'int'},
					    {name:'ChildrensPark', type:'int'},
					    {name:'PetsAllowed', type:'int'},
					    {name:'ToiletBlock', type:'int'},
					    {name:'Pool', type:'int'},
					    {name:'OnSiteShop', type:'int'},
					    {name:'Entertainment', type:'int'},
					    {name:'HardStandard', type:'int'},
					    {name:'TentsWelcome', type:'int'},
					    {name:'StaticCaravansToHire', type:'int'},
					    {name:'OpenAllYear', type:'int'},
					    {name:'AdultsOnly', type:'int'},
					    {name:'FamilyFriendly', type:'int'},
					    {name:'FacilitiesForDisabled', type:'int'},
					    {name:'Fishing', type:'int'},
					    {name:'Cycling', type:'int'},
					    {name:'ClubHouse', type:'int'},
					    {name:'NumberOfPitches', type:'int'},
					    
					    {name:'WirelessInternet', type:'int'},
					    {name:'InternetAccess', type:'int'},
					    {name:'SiteDescription', type:'string'},
					    {name:'KeyFeatures', type:'string'},
					    {name:'OpeningTimes', type:'string'},
					    {name:'Prices', type:'string'},
					    {name:'Directions', type:'string'}
					    
				    ]
				})
				,proxy:new Ext.data.HttpProxy({url:this.url})
				,sortInfo:{field:'LocationName', direction:'ASC'}
				,remoteSort:true
			})
			// }}}
			// {{{
			,columns:[
			{
				 header		:	'Location Name',
				 hidden		:	false,
				 dataIndex	:	'LocationName',
				 width		:	75,
				 sortable	:	true,
				 allowBlank	:	false,
				 editor		:	new Ext.form.TextField({
					id		:	'LocationName',
					allowNull	:	false
				 })
			},
			{
				 header		:	'Location ID',
				 hidden		:	true,
				 dataIndex	:	'LocationID',
				 width		:	75,
				 sortable	:	false
			},
			{
				 header		:	'Address Line 1',
				 hidden		:	true,
				 dataIndex	:	'LocationAddress1',
				 width		:	75,
				 sortable	:	true,
				 editor		:	new Ext.form.TextField({
					id		:	'AddressLine1'
				 })
			},
			{
				 header		:	'Address Line 2',
				 hidden		:	true,
				 dataIndex	:	'LocationAddress2',
				 width		:	75,
				 sortable	:	true,
				 editor		:	new Ext.form.TextField({
					id		:	'AddressLine2'
				 })
			},
			{
				 header		:	'Postcode',
				 hidden		:	true,
				 allowBlank	:	false,
				 dataIndex	:	'LocationPostcode',
				 width		:	75,
				 sortable	:	true
			},
			{
				 header		:	'Phone Number',
				 hidden		:	true,
				 dataIndex	:	'LocationPhoneNumber',
				 width		:	75,
				 sortable	:	true,
				 allowBlank	:	false
			},
			
			// CATEGORY ID
			{
				 header		:	'Category',
				 dataIndex	:	'CategoryID',
				 width		:	75,
				 sortable	:	false,
				 renderer	:	function (v,meta,record,rowindex,colindex,store) {
				    if (record.isModified('CategoryID')) {
				    	recordx = Ext.getCmp('CategoryCombo').store.getById(v);
					return Ext.getCmp('CategoryCombo').store.getById(v).get('CategoryName');
				    }
				    else {
				    	return record.get('CategoryName');
				    }
				 },
				 editor		:	new Ext.form.ComboBox({
					store	:	new Ext.data.Store({
					    reader:new Ext.data.JsonReader({
						totalProperty:'NumberOfRecords',
						root:'data',
						id:'CategoryID',
						fields	:	['CategoryID','CategoryName']
					    }),
					    proxy	:	new Ext.data.HttpProxy({
						method:'POST',
						url:'api/getCategories'
					    }),
					    autoLoad	:	true
					}),
					displayField	:	'CategoryName',
					valueField	:	'CategoryID',
					hiddenId	:	'CategoryID',
					triggerAction	:	'all',
					mode		:	'remote',
					id		:	'CategoryCombo',
					editable	:	false,
					allowBlank	:	false,
					lazyRender	:	true,
					forceSelection	:	true,
					autoLoad	:	true,
					listeners	:	{
					    'select'	:	function() {
					    	Ext.getCmp('RegionCombo').setValue('');
						Ext.getCmp('CountyCombo').setValue('');
						Ext.getCmp('AddressLine1').setValue('');
						Ext.getCmp('AddressLine2').setValue('');
					    }
					}
				})
			},
			
			// REGION ID
			{
				 header		:	'Region',
				 dataIndex	:	'RegionID',
				 width		:	75,
				 sortable	:	false,
				 renderer	:	function (v,meta,record,rowindex,colindex,store) {
				    if (record.isModified('RegionID')) {
				    	recordx = Ext.getCmp('RegionCombo').store.getById(v);
					return Ext.getCmp('RegionCombo').store.getById(v).get('RegionName');
				    }
				    else {
				    	return record.get('RegionName');
				    }
				 },
				 editor		:	new Ext.form.ComboBox({
					store	:	new Ext.data.Store({
					    proxy	:	new Ext.data.HttpProxy({
						method	:	'POST',
						url	:	'api/getRegions'
					    }),
					    reader:new Ext.data.JsonReader({
						totalProperty:'NumberOfRecords',
						root:'data',
						id:'RegionID',
						fields	:	['RegionID','CategoryID','RegionName']
					    }),
					    autoLoad	:	true,
					    listeners	:	{
					    	'load'	:	function(store) {
						    z=Ext.getCmp('CategoryCombo').getValue()
						    store.filter('CategoryID',(z ? z : false));
						}
					    }
					}),
					displayField	:	'RegionName',
					valueField	:	'RegionID',
					hiddenId	:	'RegionID',
					id		:	'RegionCombo',
					triggerAction	:	'all',
					mode		:	'remote',
					editable	:	false,
					lazyRender	:	true,
					allowBlank	:	false,
					forceSelection	:	true,
					listeners: {
					    beforequery: function(qe){
						delete qe.combo.lastQuery;
					    },
					    'select'	:	function() {
						Ext.getCmp('CountyCombo').setValue('');
					    }
					}
				})
			},
			
			// COUNTY ID
			{
				 header		:	'County',
				 dataIndex	:	'CountyID',
				 width		:	75,
				 sortable	:	false,
				 renderer	:	function (v,meta,record,rowindex,colindex,store) {
				    if (record.isModified('CountyID')) {
				    	recordx = Ext.getCmp('CountyCombo').store.getById(v);
					return Ext.getCmp('CountyCombo').store.getById(v).get('CountyName');
				    }
				    else {
				    	return record.get('CountyName');
				    }
				 },
				 editor		:	new Ext.form.ComboBox({
					store	:	new Ext.data.Store({
					    
					    proxy	:	new Ext.data.HttpProxy({
						method:'POST',
						url		:	'api/getCounties'
					    }),
					    reader:new Ext.data.JsonReader({
						totalProperty:'NumberOfRecords',
						root:'data',
						id:'CountyID',
						fields	:	['CountyID','RegionID','CountyName']
					    }),
					    autoLoad	:	true,
					    listeners	:	{
					    	'load'	:	function(store) {
						    z=Ext.getCmp('RegionCombo').getValue()
						    store.filter('RegionID',(z ? z : false));
						}
					    }
					}),
					displayField	:	'CountyName',
					valueField	:	'CountyID',
					hiddenId	:	'CountyID',
					triggerAction	:	'all',
					id		:	'CountyCombo',
					mode		:	'remote',
					editable	:	false,
					lazyRender	:	true,
					allowBlank	:	false,
					forceSelection	:	true,
					autoLoad	:	true,
					listeners: {
					    beforequery: function(qe){
						delete qe.combo.lastQuery;
					    }
					}
				})
			},
			{
				 header		:	'Email Address',
				 hidden		:	true,
				 dataIndex	:	'LocationEmail',
				 width		:	75,
				 sortable	:	false,
				 editor		:	new Ext.form.TextField({
					allowBlank	:	true,
					fieldLabel	:	'Email'
				 })
			},
			
			{
				 header		:	'Website',
				 hidden		:	true,
				 dataIndex	:	'LocationWeb',
				 width		:	75,
				 sortable	:	false,
				 editor		:	new Ext.form.TextField({
					allowBlank	:	true,
					fieldLabel	:	'Website'
				 })
			},
			
			{
				 header		:	'Fax Number',
				 hidden		:	true,
				 dataIndex	:	'LocationFax',
				 width		:	75,
				 sortable	:	false,
				 editor		:	new Ext.form.TextField({
					allowBlank	:	true
				 })
			},
			{
				 header		:	'Town',
				 hidden		:	false,
				 dataIndex	:	'TownName',
				 width		:	75,
				 sortable	:	true,
				 editor		:	new Ext.form.TextField({
					allowBlank	:	false
				 })
			},
			{
				 header		:	'Toilet Block',
				 hidden		:	true,
				 dataIndex	:	'ToiletBlock',
				 width		:	75,
				 sortable	:	false,
				 editor		:	new Ext.form.Checkbox({
					allowBlank	:	false
				 })
			},
			{
				 header		:	'Pool',
				 hidden		:	true,
				 dataIndex	:	'Pool',
				 width		:	75,
				 sortable	:	false,
				 editor		:	new Ext.form.Checkbox({
					allowBlank	:	false
				 })
			},
			{
				 header		:	'On Site Shop',
				 hidden		:	true,
				 dataIndex	:	'OnSiteShop',
				 width		:	75,
				 sortable	:	false,
				 editor		:	new Ext.form.Checkbox({
					allowBlank	:	false
				 })
			},
			{
				 header		:	'Entertainment',
				 hidden		:	true,
				 dataIndex	:	'Entertainment',
				 width		:	75,
				 sortable	:	false,
				 editor		:	new Ext.form.Checkbox({
					allowBlank	:	false
				 })
			},
			{
				 header		:	'Hard Standard',
				 hidden		:	true,
				 dataIndex	:	'HardStandard',
				 width		:	75,
				 sortable	:	false,
				 editor		:	new Ext.form.Checkbox({
					allowBlank	:	false
				 })
			},
			{
				 header		:	'Tents Welcome',
				 hidden		:	true,
				 dataIndex	:	'TentsWelcome',
				 width		:	75,
				 sortable	:	false,
				 editor		:	new Ext.form.Checkbox({
					allowBlank	:	false
				 })
			},
			{
				 header		:	'Static Caravans To Hire',
				 hidden		:	true,
				 dataIndex	:	'StaticCaravansToHire',
				 width		:	75,
				 sortable	:	false,
				 editor		:	new Ext.form.Checkbox({
					allowBlank	:	false
				 })
			},
			{
				 header		:	'Open All Year',
				 hidden		:	true,
				 dataIndex	:	'OpenAllYear',
				 width		:	75,
				 sortable	:	false,
				 editor		:	new Ext.form.Checkbox({
					allowBlank	:	false
				 })
			},
			{
				 header		:	'Adults Only',
				 hidden		:	true,
				 dataIndex	:	'AdultsOnly',
				 width		:	75,
				 sortable	:	false,
				 editor		:	new Ext.form.Checkbox({
					allowBlank	:	false
				 })
			},		    
			{
				 header		:	'Family Friendly',
				 hidden		:	true,
				 dataIndex	:	'FamilyFriendly',
				 width		:	75,
				 sortable	:	false,
				 editor		:	new Ext.form.Checkbox({
					allowBlank	:	false
				 })
			},
			{
				 header		:	'Facilities For Disabled',
				 hidden		:	true,
				 dataIndex	:	'FacilitiesForDisabled',
				 width		:	75,
				 sortable	:	false,
				 editor		:	new Ext.form.Checkbox({
					allowBlank	:	false
				 })
			},
			
			{
				 header		:	'Fishing',
				 hidden		:	true,
				 dataIndex	:	'Fishing',
				 width		:	75,
				 sortable	:	false,
				 editor		:	new Ext.form.Checkbox({
					allowBlank	:	false
				 })
			},	
			
			{
				 header		:	'Cycling',
				 hidden		:	true,
				 dataIndex	:	'Cycling',
				 width		:	75,
				 sortable	:	false,
				 editor		:	new Ext.form.Checkbox({
					allowBlank	:	false
				 })
			},	
			
			{
				 header		:	'Club House',
				 hidden		:	true,
				 dataIndex	:	'ClubHouse',
				 width		:	75,
				 sortable	:	false,
				 editor		:	new Ext.form.Checkbox({
					allowBlank	:	false
				 })
			},	
			
			{
				 header		:	'Childrens Park',
				 hidden		:	true,
				 dataIndex	:	'ChildrensPark',
				 width		:	75,
				 sortable	:	false,
				 editor		:	new Ext.form.Checkbox({
					allowBlank	:	false
				 })
			},	    
			{
				 header		:	'Electric Hook Up',
				 hidden		:	true,
				 dataIndex	:	'ElectricHookUp',
				 width		:	75,
				 sortable	:	false,
				 editor		:	new Ext.form.Checkbox({
					allowBlank	:	false
				 })
			},
			{
				 header		:	'Pets Allowed',
				 hidden		:	true,
				 dataIndex	:	'PetsAllowed',
				 width		:	75,
				 sortable	:	false,
				 editor		:	new Ext.form.Checkbox({
					allowBlank	:	false
				 })
			},
			
			{
				 header		:	'Wireless Internet',
				 hidden		:	true,
				 dataIndex	:	'WirelessInternet',
				 width		:	75,
				 sortable	:	false,
				 editor		:	new Ext.form.Checkbox({
					allowBlank	:	false
				 })
			},
			
			{
				 header		:	'Internet Access',
				 hidden		:	true,
				 dataIndex	:	'InternetAccess',
				 width		:	75,
				 sortable	:	false,
				 editor		:	new Ext.form.Checkbox({
					allowBlank	:	false
				 })
			},
			
			{
				 header		:	'Number of Pitches',
				 hidden		:	true,
				 dataIndex	:	'NumberOfPitches',
				 width		:	75,
				 sortable	:	false,
				 editor		:	new Ext.form.NumberField({
					allowBlank	:	true
				 })
			},
			
			{
				 header		:	'Site Description',
				 hidden		:	true,
				 dataIndex	:	'SiteDescription',
				 width		:	75,
				 sortable	:	false,
				 editor		:	new Ext.form.TextArea({
					allowBlank	:	true
				 })
			},
			
			{
				 header		:	'Key Features',
				 hidden		:	true,
				 dataIndex	:	'KeyFeatures',
				 width		:	75,
				 sortable	:	false,
				 editor		:	new Ext.form.TextArea({
					allowBlank	:	true
				 })
			},
			
			{
				 header		:	'Opening Times',
				 hidden		:	true,
				 dataIndex	:	'OpeningTimes',
				 width		:	75,
				 sortable	:	false,
				 editor		:	new Ext.form.TextArea({
					allowBlank	:	true
				 })
			},
			
			{
				 header		:	'Prices',
				 hidden		:	true,
				 dataIndex	:	'Prices',
				 width		:	75,
				 sortable	:	false,
				 editor		:	new Ext.form.TextArea({
					allowBlank	:	true
				 })
			},
			
			{
				 header		:	'Directions',
				 hidden		:	true,
				 dataIndex	:	'Directions',
				 width		:	75,
				 sortable	:	false,
				 editor		:	new Ext.form.TextArea({
					allowBlank	:	true
				 })
			},
			
			this.rowActions]
			// }}}
			,plugins:[new Ext.ux.grid.Search({
				 iconCls:'icon-zoom'
				,readonlyIndexes:['note']
				,disableIndexes:[
				    'ElectricHookUp',
				    'ChildrensPark',
				    'PetsAllowed',
				    'ToiletBlock',
				    'Pool',
				    'OnSiteShop',
				    'Entertainment',
				    'HardStandard',
				    'TentsWelcome',
				    'StaticCaravansToHire',
				    'OpenAllYear',
				    'AdultsOnly',
				    'FamilyFriendly',
				    'FacilitiesForDisabled',
				    'Fishing',
				    'NumberOfPitches',
				    'Cycling',
				    'ClubHouse',
				    'RegionID',
				    'CountyID',
				    'LocationID',
				    'TownID',
				    'CategoryID',
				    'WirelessInternet',
				    'InternetAccess',
				    'SiteDescription',
				    'KeyFeatures',
				    'OpeningTimes',
				    'Prices',
				    'Directions',
				    'LocationEmail',
				    'LocationWeb',
				    'LocationFax'
				]
			}), this.rowActions, this.recordForm]
			,viewConfig:{forceFit:true}
			,buttons:[{
				 text:'Save'
				,iconCls:'icon-disk'
				,scope:this
				,handler:this.commitChanges
			},{
				 text:'Reset'
				,iconCls:'icon-undo'
				,scope:this
				,handler:function() {
					this.store.rejectChanges();
				}
			},{
				 text:'Close'
				,iconCls:'icon-close'
				,scope:this
				,handler:function() {
					Ext.getCmp('rfwin').hide();
				}
			}]
			,tbar:[{
				 text:'Add Location'
				,tooltip:'Add Location to Database'
				,iconCls:'icon-form-add'
				,listeners:{
					click:{scope:this, buffer:200, fn:function(btn) {
						this.recordForm.show(this.addRecord(), btn.getEl());
					}}
				}
			}]
		}); // eo apply

		this.bbar = new Ext.PagingToolbar({
			 store:this.store
			,displayInfo:true
			,pageSize:20
		});

		// call parent
		Example.Grid1.superclass.initComponent.apply(this, arguments);
	} // eo function initComponent
	// }}}
	// {{{
	,onRender:function() {
		// call parent
		Example.Grid1.superclass.onRender.apply(this, arguments);

		// load store
		this.store.load({params:{start:0,limit:20}});

	} // eo function onRender
	// }}}
	// {{{
	,addRecord:function() {
		var store = this.store;
		if(store.recordType) {
			var rec = new store.recordType({newRecord:true});
			rec.fields.each(function(f) {
				rec.data[f.name] = f.defaultValue || null;
			});
			rec.commit();
			store.add(rec);
			return rec;
		}
		return false;
	} // eo function addRecord
	// }}}
	// {{{
	,onRowAction:function(grid, record, action, row, col) {
		switch(action) {
			case 'icon-minus':
				this.deleteRecord(record);
			break;

			case 'icon-edit-record':
				// Remove filter
				Ext.getCmp('RegionCombo').store.clearFilter()
				Ext.getCmp('CountyCombo').store.clearFilter()
				this.recordForm.show(record, grid.getView().getCell(row, col));
				break;
				
			case 'icon-form-add':
				showLocationImages(record.get('LocationID'));
				break;
				
			break;
		}
	} // eo onRowAction
	// }}}
	// {{{
	,commitChanges:function() {
		var records = this.store.getRange();
		if(!this.store.getModifiedRecords().length) {
			Ext.MessageBox.show({
			       title: 'Error',
			       msg: "You have not modified any records",
			       buttons: Ext.MessageBox.OK,
			       icon: Ext.MessageBox.ERROR
		       });
			return;
		}
		var data = [];
		Ext.each(records, function(r, i) {
			data.push(r.data);
		}, this);
		var o = {
			 url:'api/saveLocation'
			,method:'post'
			,callback:this.requestCallback
			,scope:this
			,params:{
				data:Ext.encode(data)
			}
		};
		Ext.MessageBox.show({
		   msg: 'Saving changes, please wait..',
		   progressText: 'Saving...',
		   width:300,
		   wait:true,
		   waitConfig: {interval:200},
		   icon:'ext-mb-download', //custom class in msg-box.html
		   animEl: 'mb7'
	       });
		Ext.Ajax.request(o);
	} // eo function commitChanges
	// }}}
	// {{{
	,requestCallback:function(options, success, response) {
		if(true !== success) {
			this.showError(response.responseText);
			return;
		}
		try {
			var o = Ext.decode(response.responseText);
		}
		catch(e) {
			this.showError(response.responseText, 'Cannot decode JSON object');
			return;
		}
		if(true !== o.success) {
			this.showError(o.error || 'Unknown error');
			return;
		}

		var records = this.store.getModifiedRecords();
		Ext.each(records, function(r, i) {
			if(o.insertIds && o.insertIds[i]) {
				r.set(this.idName, o.insertIds[i]);
				delete(r.data.newRecord);
			}
		});
		this.store.commitChanges();
		this.store.reload();
		Ext.getCmp('RegionCombo').store.clearFilter()
		Ext.getCmp('CountyCombo').store.clearFilter()
		Ext.getCmp('CategoryCombo').store.clearFilter()
		
		Ext.MessageBox.show({
		       title: 'Successful',
		       msg: "Changes saved",
		       buttons: Ext.MessageBox.OK,
		       icon: Ext.MessageBox.INFO
	       });
	} // eo function requestCallback
	// }}}
	// {{{
	,showError:function(msg, title) {
		Ext.Msg.show({
			 title:title || 'Error'
			,msg:Ext.util.Format.ellipsis(msg, 2000)
			,icon:Ext.Msg.ERROR
			,buttons:Ext.Msg.OK
			,minWidth:1200 > String(msg).length ? 360 : 600
		});
	} // eo function showError
	// }}}
	// {{{
	,deleteRecord:function(record) {
		Ext.Msg.show({
			 title:'Delete record?'
			,msg:'Do you really want to delete <b>' + record.get('LocationName') + '</b><br/>There is no undo.'
			,icon:Ext.Msg.QUESTION
			,buttons:Ext.Msg.YESNO
			,scope:this
			,fn:function(response) {
				if('yes' !== response) {
					return;
				}
				else {
				    Ext.MessageBox.show({
				       msg: 'Deleting location, please wait...',
				       progressText: 'Saving...',
				       width:300,
				       wait:true,
				       waitConfig: {interval:200},
				       icon:'ext-mb-download', //custom class in msg-box.html
				       animEl: 'mb7'
				   });
				   
				   function callbackWin() {
				   	Ext.MessageBox.show({
					       title: 'Error',
					       msg: "Location deleted",
					       buttons: Ext.MessageBox.OK,
					       icon: Ext.MessageBox.INFO
				       });
				       
				       this.store.reload();
				    }
				    
				    function callbackFail() {
				    	Ext.MessageBox.show({
					       title: 'Error',
					       msg: "Server is unable to process your request at this time",
					       buttons: Ext.MessageBox.OK,
					       icon: Ext.MessageBox.ERROR
				       });
				    }
				   
				    Ext.Ajax.request({
					url: 'api/deleteLocation',
					success: callbackWin,
					failure: callbackFail,
					scope:this,
					params: { 
					    LocationID	:	record.get('LocationID')
					}
				    });
				}
			}
		});
	} // eo function deleteRecord
	// }}}

}); // eo extend

// register xtype
Ext.reg('examplegrid1', Example.Grid1);


function showSearchWindow() {
    if (Ext.getCmp('rfwin')) {
    	Ext.getCmp('rfwin').show();
    }
    else {
    	_showSearchWindow();
    }
}
function _showSearchWindow() {
    Ext.override(Ext.form.Field, {msgTarget:'side'});
    var win = new Ext.Window({
	     id:'rfwin'
	    ,title:'Search Database'
	    ,iconCls:'icon-grid'
	    ,width:700
	    ,height:400
//		,stateful:false
	    ,x:320
	    ,y:82
	    ,plain:true
	    ,layout:'fit'
	    ,closable:false
	    ,draggable:true
	    ,modal:true
	    ,mazimized:true
	    ,border:false
	    ,maximizable:true
	    ,items:{xtype:'examplegrid1', id:'examplegrid1'}
	    ,plugins:[new Ext.ux.menu.IconMenu()]
    });
    win.show();

    var rf = new Ext.ux.grid.RecordForm({
	     formCt:'east-form'
	    ,closable:false
	    ,autoShow:true
	    ,autoHide:false
//		,showButtons:false
	    ,ignoreFields:{compID:true}
	    ,formConfig:{autoHeight:false,border:true, frame:false, margins:'10 10 10 10'}
    });
    var win2 = new Ext.Window({
	     id:'rfwinbl'
	    ,layout:'border'
	    ,width:800
	    ,height:400
	    ,closable:false
	    ,maximizable:true
	    ,mazimized:true
	    ,border:false
	    ,stateful:false
	    ,plugins:[new Ext.ux.menu.IconMenu({iconCls:'icon-grid'})]
	    ,items:[{
		     region:'center'
		    ,id:'center-grid'
		    ,title:'Grid'
		    ,stateful:false
		    ,xtype:'examplegrid'
		    ,autoScroll:true
		    ,plugins:[rf]
	    },{
		     region:'east'
		    ,id:'east-form'
		    ,title:'Form'
		    ,stateful:false
		    ,width:300
		    ,split:true
		    ,border:true
		    ,frame:true
		    ,collapsible:true
		    ,layout:'fit'
	    }]
    });
    win.maximize();
}