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

Ext.onReady(function(){

    Ext.state.Manager.setProvider(new Ext.state.CookieProvider());

    var myData = [
        ['<a href="http://spreadsheets.google.com/ccc?key=tExGneaglfIRHNEAESQEoOw&output=html&gid=6" target="_blank" style="color:#15428b;">Quinn, A.</a>',35,22,12,8,1,1,0,31,17,4,.629],
        ['<a href="http://spreadsheets.google.com/ccc?key=tExGneaglfIRHNEAESQEoOw&output=html&gid=9" target="_blank" style="color:#15428b;">Kumpf, J.</a>',16,2,1,0,0,1,0,4,7,10,.125],
		['<a href="http://spreadsheets.google.com/ccc?key=tExGneaglfIRHNEAESQEoOw&output=html&gid=7" target="_blank" style="color:#15428b;">Ehnert, B.</a>',5,2,1,1,0,0,0,2,1,0,.400],
		['<a href="http://spreadsheets.google.com/ccc?key=tExGneaglfIRHNEAESQEoOw&output=html&gid=11" target="_blank" style="color:#15428b;">Witmer, D.</a>',9,5,2,1,1,1,1,5,0,1,.556],
		['<a href="http://spreadsheets.google.com/ccc?key=tExGneaglfIRHNEAESQEoOw&output=html&gid=1" target="_blank" style="color:#15428b;">Garner, C.</a>',34,13,5,6,1,1,1,24,21,10,.382],
		['<a href="http://spreadsheets.google.com/ccc?key=tExGneaglfIRHNEAESQEoOw&output=html&gid=2" target="_blank" style="color:#15428b;">Bozack, T.</a>',11,6,1,3,1,1,1,6,14,3,.545],
		['<a href="http://spreadsheets.google.com/ccc?key=tExGneaglfIRHNEAESQEoOw&output=html&gid=4" target="_blank" style="color:#15428b;">Golden, K.</a>',30,16,10,6,0,0,0,20,7,9,.533],
		['<a href="http://spreadsheets.google.com/ccc?key=tExGneaglfIRHNEAESQEoOw&output=html&gid=5" target="_blank" style="color:#15428b;">Tomson, D.</a>',10,5,3,2,0,0,0,4,9,5,.500],
		['<a href="http://spreadsheets.google.com/ccc?key=tExGneaglfIRHNEAESQEoOw&output=html&gid=0" target="_blank" style="color:#15428b;">Clancy, J.</a>',16,10,4,3,1,2,1,16,11,3,.625]
    ];

    // example of custom renderer function
    function change(val){
        if(val > 0){
            return '<span style="color:black;">' + val + '</span>';
        }else if(val < 0){
            return '<span style="color:black;">' + val + '</span>';
        }
        return val;
    }

    // example of custom renderer function
    function pctChange(val){
        if(val > 0){
            return '<span style="color:black;">' + val + '%</span>';
        }else if(val < 0){
            return '<span style="color:black;">' + val + '%</span>';
        }
        return val;
    }

    // create the data store
    var store = new Ext.data.SimpleStore({
        fields: [
           {name: 'player'},
           {name: 'ab', type: 'float'},
           {name: 'h', type: 'float'},
           {name: '1b', type: 'float'},
		   {name: '2b', type: 'float'},
		   {name: '3b', type: 'float'},
		   {name: 'hr', type: 'float'},
		   {name: 'cyc', type: 'float'},
		   {name: 'rbi', type: 'float'},
		   {name: 'bb', type: 'float'},
		   {name: 'ko', type: 'float'},
		   {name: 'ba', type: 'float'}
        ]
    });
    store.loadData(myData);

    // create the Grid
    var grid = new Ext.grid.GridPanel({
        store: store,
        columns: [
            {id:'player',header: "Player", width: 93, sortable: true, dataIndex: 'player'},
            {header: "AB", width: 35, sortable: true, dataIndex: 'ab'},
            {header: "H", width: 35, sortable: true, dataIndex: 'h'},
            {header: "1B", width: 35, sortable: true, dataIndex: '1b'},
            {header: "2B", width: 35, sortable: true, dataIndex: '2b'},
            {header: "3B", width: 35, sortable: true, dataIndex: '3b'},
            {header: "HR", width: 35, sortable: true, dataIndex: 'hr'},
			{header: "CYC", width: 35, sortable: true, dataIndex: 'cyc'},
            {header: "RBI", width: 35, sortable: true, dataIndex: 'rbi'},
            {header: "BB", width: 35, sortable: true, dataIndex: 'bb'},
            {header: "KO", width: 35, sortable: true, dataIndex: 'ko'},
            {header: "BA", width: 35, sortable: true, dataIndex: 'ba'}
        ],
        stripeRows: true,
        //autoExpandColumn: 'player',
        height:315,
        width:500,
        title:'2009 Batters'
    });

    grid.render('batters');

    grid.getSelectionModel().selectFirstRow();
});