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



Ext.onReady(function(){

    // create the Data Store
    var store = new Ext.data.Store({
        // load using HTTP
        url: 'http://www.earthscope.org/index.php?c=data&m=js_safod_sample_data_list&pgid='+pi_group_id,

        // the return will be XML, so lets set up a reader
        reader: new Ext.data.XmlReader({
               // records will have an "station" tag
               record: 'request_record'
           }, [
               // set up the fields mapping into the xml doc
               // The first needs mapping, the others are very basic

               'sample_ref_num',
			   'pi_group_name',
			   'request_date',
			   'requested_by',
			   'hole',
			   'run',
			   'section',
			   'interval',
			   'mass',
			   'sample_type'
           ])
    });





    // create the grid
    var grid = new Ext.grid.GridPanel({
		id: 'samplegrid',
 		store: store,
        columns: [
            {header: "Reference", width: 90, dataIndex: 'sample_ref_num', sortable: true},
            {header: "PI Group", width: 140, dataIndex: 'pi_group_name', sortable: true},
            {header: "Date", width: 90, dataIndex: 'request_date', sortable: true},
            {header: "Request By", width: 110, dataIndex: 'requested_by', sortable: true},
			{header: "Hole", width: 35, dataIndex: 'hole', sortable: true},
	        {header: "Run", width: 35, dataIndex: 'run', sortable: true},
	        {header: "Section", width: 55, dataIndex: 'section', sortable: true},
	        {header: "Interval", width: 75, dataIndex: 'interval', sortable: true},
	        {header: "Mass", width: 50, dataIndex: 'mass', sortable: true},
	        {header: "Type", width: 135, dataIndex: 'sample_type', sortable: true}
        ],
    	viewConfig: {
       		 forceFit: true
    	},
    	sm: new Ext.grid.RowSelectionModel({singleSelect:true}),
		height:185,
		width: 840
    });
	
	// define a template to use for the detail view
	var bookTplMarkup = [
		'<table width=\'800px\'><tr><td width=\'40\' nowrap=\'nowrap\' align=\'right\'><p style=\'text-align: right; font-weight: bold\'>Reference Number:</p></td><td width=\'4\'></td><td> <p>{sample_ref_num}</p></td>',
		'<td width=\'100\'></td><td><button onClick=\"editReq(\'{sample_ref_num}\')\" style=\'border:1px solid #333333; background-color:#cccccc\'>View {sample_ref_num}</button>',
	    '<td width=\'40\'></td><td><button  id=\"deleteButton\" onClick=\"if(checkAccess()) {delReqConfirm(\'{sample_ref_num}\')}else {alert(\'Your PI Group Lead Has Not Granted You Edit or Delete Permissions\'); this.visibility=\'hidden\'\}" style=\'border:1px solid #333333; background-color:#cccccc\'>Delete {sample_ref_num}</button>',
		'<tr><td align=\'right\'> <p style=\'text-align: right; font-weight: bold\'>Sample Type: </p></td><td width=\'4\'></td><td> <p>{sample_type}</p></td></tr>',
		'<tr><td align=\'right\'> <p style=\'text-align: right; font-weight: bold\'>Interval: </p></td><td width=\'4\'></td><td> <p>{interval}</p></td></tr>',
		'<tr><td align=\'right\'> <p style=\'text-align: right; font-weight: bold\'>Mass: </p></td><td width=\'4\'></td><td> <p>{mass}</p></td></tr></table><br/>'
		
	];
	var bookTpl = new Ext.Template(bookTplMarkup);


	
	var ct = new Ext.Panel({
	    height:235,
		width: 840,
		renderTo: 'sample_data_table',
		frame: true,
		title: '<H3 style=\"font-size: 15px; margin-bottom:22px;\">PI Group Sample Requests<H3>',
		style:'width: 840px;  height: 235px;', 
		layout: 'border',
		items: [
			grid,
			{
				id: 'sampleDataPanel',
				region: 'center',
				bodyStyle: {
				background: '#f8f8f7',
				padding: '7px'
				},
				html: '<p style=\'color:#000000;font-size: 16px; padding: 25px\'> To Edit or Delete, click on a sample request in the table above.</p>'
			}
		]
	})
	grid.getSelectionModel().on('rowselect', function(sm, rowIdx, r) {
		var sampleDataPanel = Ext.getCmp('sampleDataPanel');
		bookTpl.overwrite(sampleDataPanel.body, r.data);
	});
    
	
	
	 store.load();
	

});