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

Ext.onReady(function(){

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

    var myData = [
    //                                        Ges. ,Jan.,Feb.,Mar.,Apr.,Mai ,Juni,Juli,Aug.,Sep.,Okt.,Nov.,Dez.,Wer.,Pl.Vormonat
	[ 1,'Wilde, F.',        './.      ',  16   ,16  ,    ,    ,    ,    ,    ,    ,    ,    ,    ,    ,    ,    ,  ],
	[ 1,'Nötzel, F.',       'Borussia ',  16   ,16  ,    ,    ,    ,    ,    ,    ,    ,    ,    ,    ,    ,    ,  ],
	[ 3,'Gros, D.',         'Bau-Union',  13   ,13  ,    ,    ,    ,    ,    ,    ,    ,    ,    ,    ,    ,    ,  ],
	[ 4,'Freudenstein, K.', 'Bau-Union',  11   ,11  ,    ,    ,    ,    ,    ,    ,    ,    ,    ,    ,    ,    ,  ],
	[ 4,'Bandlow, R.',      'Bau-Union',  11   ,11  ,    ,    ,    ,    ,    ,    ,    ,    ,    ,    ,    ,    ,  ],
	[ 4,'Fitzke, U.',       'Bau-Union',  11   ,11  ,    ,    ,    ,    ,    ,    ,    ,    ,    ,    ,    ,    ,  ],
	[ 7,'Blank, D.',        'Bau-Union',   9   , 9  ,    ,    ,    ,    ,    ,    ,    ,    ,    ,    ,    ,    ,  ],
	[ 8,'Reinhardt, M.',    'Bau-Union',   7.5 , 7.5,    ,    ,    ,    ,    ,    ,    ,    ,    ,    ,    ,    ,  ],
	[ 8,'Fettkenheuer, C.', 'Bau-Union',   7.5 , 7.5,    ,    ,    ,    ,    ,    ,    ,    ,    ,    ,    ,    ,  ],
	[10,'Kernke, K.',       'Bau-Union',   6   , 6  ,    ,    ,    ,    ,    ,    ,    ,    ,    ,    ,    ,    ,  ]
    ]; 

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

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

    //make the text bold
    function makebold(val){
        return '<div style="font-weight:bold;" align="center">' + val + '</div>';
    }

    //make the text centered
    function tendenzIcon(val){
       var imageTag = '<div align="center"><img src="images/radio.gif" alt="keine Veränderung" title="keine Veränderung"></div>'; //black    
	   for(i=0; i<myData.length; i++) {
        if(val == myData[i][17]) {
		    if(myData[i][17] > myData[i][0]) {
		        //green
		        imageTag = '<div align="center"><img src="images/pfeil_hoch.gif"  width="10" height="13" alt="verbessert" title="verbessert"></div>';
		    } else if(myData[i][17] < myData[i][0]) {
		        //red
		        imageTag = '<div align="center"><img src="images/pfeil_runter.gif"  width="10" height="13" alt="verschlechtert" title="verschlechtert"></div>';
		    }
		 }   
		}		
		return imageTag;
	}

    //make the text centered
    function makecenter(val){
        return '<div align="center">' + val + '</div>';
    } 

    // create the data store
    var store = new Ext.data.SimpleStore({
        fields: [
           {name: 'platz'},
           {name: 'name', type: 'string'},
           {name: 'verein', type: 'string'},
	   {name: 'gesamt', type: 'float'},
	   {name: 'jan', type: 'float'},
	   {name: 'feb', type: 'float'},
	   {name: 'mrz', type: 'float'},
	   {name: 'apr', type: 'float'},
	   {name: 'mai', type: 'float'},
	   {name: 'jun', type: 'float'},
	   {name: 'jul', type: 'float'},
	   {name: 'aug', type: 'float'},
	   {name: 'sep', type: 'float'},
	   {name: 'okt', type: 'float'},
	   {name: 'nov', type: 'float'},
	   {name: 'dez', type: 'float'},
	   {name: 'wertung', type: 'string'},
           //{name: 'pctChange', type: 'float'},
           //{name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
	   {name: 'tendenz', type: 'string'}
        ]
    });
    store.loadData(myData);

    // create the Grid
    var grid = new Ext.grid.GridPanel({
        store: store,
        columns: [
            {id:'platz',header: "Platz", width: 10, sortable: true, renderer: makecenter, dataIndex: 'platz'},
            {header: "Name", width: 90, sortable: true, dataIndex: 'name'},
            {header: "Verein", width: 75, sortable: true, dataIndex: 'verein'},
	    {header: "Gesamt", width: 60, sortable: true, renderer: makebold, dataIndex: 'gesamt'},
	    {header: "Jan", width: 40, sortable: true, renderer: makecenter, dataIndex: 'jan'},
	    {header: "Feb", width: 40, sortable: true, renderer: makecenter, dataIndex: 'feb'},
	    {header: "Mrz", width: 40, sortable: true, renderer: makecenter, dataIndex: 'mrz'},
	    {header: "Apr", width: 40, sortable: true, renderer: makecenter, dataIndex: 'apr'},
	    {header: "Mai", width: 40, sortable: true, renderer: makecenter, dataIndex: 'mai'},
	    {header: "Jun", width: 40, sortable: true, renderer: makecenter, dataIndex: 'jun'},
	    {header: "Jul", width: 40, sortable: true, renderer: makecenter, dataIndex: 'jul'},
	    {header: "Aug", width: 40, sortable: true, renderer: makecenter, dataIndex: 'aug'},
	    {header: "Sep", width: 40, sortable: true, renderer: makecenter, dataIndex: 'sep'},
	    {header: "Okt", width: 40, sortable: true, renderer: makecenter, dataIndex: 'okt'},
	    {header: "Nov", width: 40, sortable: true, renderer: makecenter, dataIndex: 'nov'},
	    {header: "Dez", width: 40, sortable: true, renderer: makecenter, dataIndex: 'dez'},
	    {header: "Wertung", width: 60, sortable: true, renderer: makecenter, dataIndex: 'wertung'},
	    //{header: "Gesamt", width: 75, sortable: true, renderer: change, dataIndex: 'gesamt'},
            //{header: "% Change", width: 75, sortable: true, renderer: pctChange, dataIndex: 'pctChange'},
            //{header: "Last Updated", width: 85, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
	    {header: "Tendenz", width: 60, sortable: true, renderer: tendenzIcon, dataIndex: 'tendenz'}
        ],
        stripeRows: false,
        autoExpandColumn: 'platz',        
        height: 500,
        width: 910,
	    frame: true,
	    border: true,
	    autoScroll: true,
        title:'Blitzpokal 2012 - aktuelle Ergebnisse'
    });

    grid.render('blitz-tabelle');

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