Ext.onReady(function(){
		var loaded = false;
		var store = new Ext.data.GroupingStore({
			url: 'data.php?class=contracts&feed=view',
			sortInfo:{field: 'status', direction: "ASC"},
			groupField:'status',
			reader: new Ext.data.JsonReader({
				root: 'records',
				fields: ['contract', 'category', 'number', 'label', 'award', 'starts', 'ends', 'prime', 'contact', 'year', 'status']
			})
		});

	    function renderTopic(value, p, record){
	    	return String.format(
	    			'<b><a href="#" style="cursor:pointer;" onclick="sys.connect(null, \'home.showItem&space=contracts&pclass=contracts&pid={0}\', \'nowrite\');">{1}</a></b><div>{2}</div>',
	                value, record.data.label, record.data.number);
	    }

	   var grid = new Ext.grid.GridPanel({
	        id:'programbook-grid',
	        store: store,
	        height:$(window).height()-150,
	        width:$(window).width()-Ext.getCmp('quick-panel').getWidth()-50,
	        title:'Contracts List',
	        trackMouseOver:false,
	        disableSelection:true,
	        loadMask: true,
	        columnLines:true,
	        stripeRows: true,
	        // grid columns
	        columns:[
	            {header: "Contract Name",dataIndex: 'contract',width: 235,sortable: true, renderer:renderTopic},
	            {header: "Status",dataIndex: 'status',width: 50,hidden: true,sortable: true},
	            {header: "Contract Type",dataIndex: 'category',width: 200,hidden: false,sortable: true},
	            {header: "Funding Amount",dataIndex: 'award',width: 200,hidden: false,sortable: true},
	            {header: "Starts",dataIndex: 'starts',width: 100,hidden: false, sortable:true},
	            {header: "Ends",dataIndex: 'ends',width: 150,hidden: false,sortable: true},
	            {header: "Prime Contractor",dataIndex: 'prime',width: 100,sortable: true},
	            {header: "Contact",dataIndex: 'contact',width: 195,sortable: true},
	            {header: "Start Year",dataIndex: 'year',width: 195, hidden:true, sortable:true}
	        ],
	        tools:[
	               	{
	               		id:'help',
	               		qtip:'Help',
	               		handler: function(event,toolEl,panel) {}
	               	},{
	               		id:'plus',
	               		qtip:'Add Contract',
	               		handler: 
	               			function(event,toolEl,panel) {
	               				additem();
	               			}
	               	},
	               	{
	               		id:'print',
	               		qtip:'Print View',
	               		handler: function(event,toolEl,panel) {
	               			 Ext.ux.Printer.print(grid); 
	               		}
	               	}
	         ],
	        view: new Ext.grid.GroupingView({
		    	forceFit:true,
		    	groupTextTpl: '{text} ({[values.rs.length]} {[values.rs.length > 1 ? "Items" : "Item"]})'
		    })
	    });

	    // render it
	   if (document.getElementById('extjsgrid') && !document.getElementById('programbook-grid')) {
		    grid.render('extjsgrid');
		    // trigger the data store load
		    store.load({params:{start:0, limit:10}});
		    grid.getView().scrollOffset = 1;
	   }
	});

	function additem(item) {
		var addon='';
		if (item)
			addon='&contract='+item
		var tabs = new Ext.Panel({
	        region: 'center',
	        id:'configure-contracts-pane',
	        frame:false,
	        border:false,
	        hideBorders:true,
	        margins:'3 3 3 0', 
	        activeTab: 0,
	        defaults:{autoScroll:true},
	        items:[{
	            listeners: {afterlayout: openItem},
	            url: 'service.php',
	            params: '&request=contracts.create'+addon
	        }]
	    });
	
	    // Panel for the west
	
	    var win = new Ext.Window({
	    	id:'configure-contracts-window',
	        title: 'Configure Contract',
	        closable:true,
	        pageX:125,
	        pageY:75,
	        modal:true,
	        width:400,
	        height:550,
	        plain:true,
	        items: [tabs]
	    });
	    win.show(this);
	}
	
	function openItem(tab) {
		tab.getUpdater().update({url:tab.url, callback: cnfjs, params:tab.params});
	}