Ext.namespace('SilverMapper');

SilverMapper.SpecimenGrid = function( config ) {

	var store = new Ext.data.JsonStore({
			root: 'markers'
		,	sortInfo: {field: "Family", direction: "ASC"}
		,	totalProperty: 'totalCount'
		,	idProperty: 'id'
		,	id: 'id'
		,	remoteSort: true
		,	baseParams: { task: 'recordsByPoint' }
		,	fields: [
					{name: 'Family'}
				,	{name: 'Genus'}
				,	{name: 'SpecificEpithet'}
				,	{name: 'html_summary'}
				,	{name: 'html_details'}				
			]
		,	proxy: new Ext.data.HttpProxy({
					url: 'api/silvermapper.php'
			})
	});

	var recordTplMarkup = [
			'<div class="recordDetail">'
		,	'{html_details}'
		,	'</div>'
	];

	var recordTpl = new Ext.Template(recordTplMarkup);

	Ext.apply(this, config, {
			store: store
		,	id: 'sm-specimengrid'
		,	border: false
		,	loadMask: true
		,	tbar: [{
					text: Lang.Get('Core','general','grid_return')
				,	iconCls: 'icon_return'
				,	scope: this
				,	handler: function() {

						Ext.getCmp('sm-layers').enable();
						Ext.getCmp('sm-filter').enable();

						Ext.getCmp('sm-recordsCard').getLayout().setActiveItem( 'sm-clustergrid' );				
						var mask = Ext.getCmp('sm-map').mask;
						mask.msg = Lang.Get('Core', 'general', 'map_loading');
						mask.msgCls = 'x-mask-loading';
						mask.hide();

						Ext.getCmp('sm-timeline').mask.hide();

						this.getStore().removeAll();
					}
			}]		
		,	columns: [
					{header: "Family", width: 115, dataIndex: 'Family', sortable: true}
				,	{header: "Genus", width: 100, dataIndex: 'Genus', sortable: true}
				,	{header: "Species", width: 100, dataIndex: 'SpecificEpithet', sortable: true}
			]
		,	sm: new Ext.grid.RowSelectionModel({singleSelect: true})
		,	viewConfig: {
					forceFit: true
				,	enableRowBody: true
				,	showPreview: true
				,	getRowClass : function(record, rowIndex, p, store){
						if ( this.showPreview ) {
							p.body = record.data.html_summary;
							return 'x-grid3-row-expanded';
						}
						return 'x-grid3-row-collapsed';
					}
			}
		,	listeners: {
			
					'render': function() {

						this.getSelectionModel().on('rowselect', function(sm, rowIdx, r) {

							var detailPanel = Ext.getCmp('detailPanel');
							recordTpl.overwrite( detailPanel.body, r.data );
							
						});
 
					}
			}
		,	bbar: new Ext.PagingToolbar({
					pageSize: 25
				,	store: store
				,	displayInfo: true
				,	displayMsg: '{0} - {1} of {2}'
				,	emptyMsg: "No Data"
			})
			
	});

	SilverMapper.SpecimenGrid.superclass.constructor.apply(this, arguments);

};

Ext.extend( SilverMapper.SpecimenGrid, Ext.grid.GridPanel, {
						 
});