/*!
 * Ext JS Library 3.1.0
 * Copyright(c) 2006-2009 Ext JS, LLC
 * licensing@extjs.com
 * http://www.extjs.com/license
 */
Ext.onReady(function(){
					 
	Ext.QuickTips.init();
	var txtKeyWord = Ext.get('txtKeyWord').dom.value;
	var zip = Ext.get('zip').dom.value;
	var miles = Ext.get('TravelFromZip_List_ID_fk').dom.value;
	
	tb = new Ext.Toolbar({
     region:'north',
	 height:30,
    items: [{
	 xtype:'tbtext',
	 text:'City,State or Zip:'
	},{
	xtype: 'textfield',
	id:'tbzip',
	value:zip
    },{
	 xtype:'tbtext',
	 text:'Miles:'
	 
	},{
	xtype: 'textfield',
	id:'tbmiles',
	width:50,
	value:miles
    },{
	 xtype:'tbtext',
	 text:'Key Words:'
	},{
		
	xtype: 'textfield',
	value:txtKeyWord,
	id:'tbkeywords',
	width:170
    
	},{
	xtype: 'tbbutton',
	text:'Search',
	handler: function(){
                        store.load({
                        params: {
                            start: 0,
                            limit: 100,
							txtKeyWord: Ext.getDom('tbkeywords').value,
							zip: Ext.getDom('tbzip').value,
							TravelFromZip_List_ID_fk: Ext.getDom('tbmiles').value
                        }
                    });
                     }

     }]
  });
	
    var store = new Ext.data.JsonStore({
		autoDestroy: true,
         url: 'http://www.jobalarm.com/grid-filter2.php',
		root:'data',
				
		listeners:{			
    				beforeload: function()
					{						
						var onload = Ext.getCmp('view-all-stats-grid');
						if (onload)
							onload.getEl().mask('Loading, please Wait...', 'x-mask-loading');
					},
					load: function()
					{
						var onload = Ext.getCmp('view-all-stats-grid');
						if (onload)
							onload.getEl().unmask();
					},
					loadexception: function()
					{
						var onload = Ext.getCmp('view-all-stats-grid');
						if (onload)
							onload.getEl().unmask();
					}
    			},

		totalProperty: 'total',
       fields: [ {name:'jobtitle'}, {name:'company'}, {name:'location'}, {name:'link'}, {name:'description'} , 
				{name:'dateposted', type: 'date', dateFormat: 'Y-m-d H:i:s'},{name:'source'}]
    
    });
     //new Ext.LoadMask(el, {msg: 'Loading Please Wait...', store: store});
	 // store.on('beforeload', function(store){
	//store.baseParams = {txtKeyWord: 'Medical+Equipment+Sales', zip: '75024'};
   // });
	 
	
    // create the grid
    var grid = new Ext.grid.GridPanel({
        id: 'view-all-stats-grid',
		store: store,
		
		stripeRows:true,
		listeners: {
            render: {
                fn: function(){
                    store.load({
                        params: {
                            start: 0,
                            limit: 100,
							txtKeyWord: txtKeyWord,
							zip: zip,
							TravelFromZip_List_ID_fk: miles
                        }
                    });
                }
            }
        },
		
        columns: [
            {header: "Job Title", width: 200, dataIndex: 'jobtitle', sortable: true},
            {header: "Company", width: 100, dataIndex: 'company', sortable: true},
			{header: "Location", width: 50, dataIndex: 'location', sortable: true},
            {header: "Post Date", width: 50, dataIndex: 'dateposted', sortable: true, renderer: Ext.util.Format.dateRenderer('M d Y')
}
            
        ],
		sm: new Ext.grid.RowSelectionModel({singleSelect: true}),
		viewConfig: {
			forceFit: true
		},
	   /*	
		bbar: new Ext.PagingToolbar({
            store: store,
            pageSize: 100,
			displayInfo:true,
			displayMessage:"Displaying Products {0} - {1} of {2}",
			emptyMsg: 'No Requirments to display'

            
        }),
        */
		
		
        height:300,
		//split: true,
		region: 'center'
    });
	
	//store.load({params:{start:0, limit:5}});//,txtKeyWord:txtKeyWord,zip:zip,TravelFromZip_List_ID_fk:miles}});

	// define a template to use for the detail view
	var bookTplMarkup = [
		'Link to Requirement: <a href="{link}" target="_blank">Link</a><br/>',
		'Source: {source}<br/>',
		'Company: {company}<br/>',
		'Description: {description}<br/>'
	];
	var bookTpl = new Ext.Template(bookTplMarkup);

	var ct = new Ext.Panel({
		renderTo: 'binding-example',
		frame: true,
		title: 'Job Search Results - Click on a job and see details below',
		width: 740,
		height: 410,
		layout: 'border',
		items: [
				tb,
				
			grid,
			{
				id: 'detailPanel',
				region: 'south',
				height: 100,
				bodyStyle: {
					background: '#F0F0F0',
					padding: '7px'
				},
				html: 'Please select a job posting to see additional details.'
			}
		]
	})
	grid.getSelectionModel().on('rowselect', function(sm, rowIdx, r) {
		var detailPanel = Ext.getCmp('detailPanel');
		bookTpl.overwrite(detailPanel.body, r.data);
	});
    
	
});