/*
 * 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="https://docs.google.com/spreadsheet/ccc?key=0AvVkqcSG7Ub6dHNtVzFYUVhGYjN2RDU5ZnlFRU1WaFE&hl=en_US#gid=4" target="_blank" style="color:#15428b;">Quinn, A.</a>',9,8,6,1,0,1,0,8,4,1,.888],
        ['<a href="https://docs.google.com/spreadsheet/ccc?key=0AvVkqcSG7Ub6dHNtVzFYUVhGYjN2RDU5ZnlFRU1WaFE&hl=en_US#gid=3" target="_blank" style="color:#15428b;">Knupp, M.</a>',9,1,0,1,0,0,0,6,6,4,.111],
		['<a href="https://docs.google.com/spreadsheet/ccc?key=0AvVkqcSG7Ub6dHNtVzFYUVhGYjN2RDU5ZnlFRU1WaFE&hl=en_US#gid=1" target="_blank" style="color:#15428b;">Garner, C.</a>',11,4,1,3,0,0,0,2,8,4,.363],
		['<a href="https://docs.google.com/spreadsheet/ccc?key=0AvVkqcSG7Ub6dHNtVzFYUVhGYjN2RDU5ZnlFRU1WaFE&hl=en_US#gid=2" target="_blank" style="color:#15428b;">Golden, K.</a>',15,7,5,1,1,0,0,6,3,7,.466],
		['<a href="https://docs.google.com/spreadsheet/ccc?key=0AvVkqcSG7Ub6dHNtVzFYUVhGYjN2RDU5ZnlFRU1WaFE&hl=en_US#gid=0" target="_blank" style="color:#15428b;">Bozack, T.</a>',6,3,1,1,0,1,0,6,6,1,.500]
    ];

    // 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:'2012 Batters'
    });

    grid.render('batters');

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