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

Ext.chart.Chart.CHART_URL = 'assets/js/extjs/resources/charts.swf';

Ext.onReady(function(){
    this.locale = locale;
    //Ext.QuickTips.init();
	
    var fondsenStore = new Ext.data.JsonStore({
        // HttpProxy should be used here
        url: 'getresults.php',
        root: 'results',
        totalProperty: 'total',
        id: 'id',
        //remoteSort: true,
        sortInfo: {
            field: "fonds", 
            direction: "ASC"
        },
        fields:	[{
            name: 'id', 
            mapping: 'id', 
            type: 'int'
        }, {
            name: 'sector', 
            mapping: 'sector',
            type:'string'
        }, {
            name: 'fonds', 
            mapping: 'fonds',
            type:'string'
        }, {
            name: 'boekjaar', 
            mapping: 'boekjaar', 
            type:'string'
        }, {
            name: 'valuta', 
            mapping: 'valuta', 
            type:'string'
        }, {
            name: 'omzet', 
            mapping: 'omzet', 
            type: 'int'
        }, {
            name: 'assets', 
            mapping: 'assets', 
            type: 'int'
        }, {
            name: 'aantal_aandelen', 
            mapping: 'aantal_aandelen', 
            type: 'int'
        }, {
            name: 'netto_jaarwinst', 
            mapping: 'netto_jaarwinst', 
            type: 'int'
        }, {
            name: 'vreemd_vermogen', 
            mapping: 'vreemd_vermogen', 
            type: 'int'
        }, {
            name: 'eigen_vermogen', 
            mapping: 'eigen_vermogen', 
            type: 'int'
        }, {
            name: 'werkkapitaal', 
            mapping: 'werkkapitaal', 
            type: 'int'
        }, {
            name: 'betaalde_rente', 
            mapping: 'betaalde_rente', 
            type: 'int'
        }, {
            name: 'risicovrije_rente', 
            mapping: 'risicovrije_rente', 
            type:'float'
        }, {
            name: 'cashflow', 
            mapping: 'cashflow', 
            type: 'int'
        }, {
            name: 'ebitda', 
            mapping: 'ebitda', 
            type: 'int'
        }, {
            name: 'koers', 
            mapping: 'koers', 
            type: 'float'
        }]
    });
		
    fondsenStore.load();//{params:{start:0, limit:25}});
	
    var colModel = new Ext.grid.ColumnModel([
    {
        dataIndex:'sector', 
        header: locale.SECTOR, 
        width: 100, 
        sortable: true
    },

    {
        dataIndex:'fonds', 
        header: locale.FUND, 
        width: 150, 
        sortable: true, 
        renderer:function(val){
            return "<b>"+val+"</b>";
        }
    }
    ]);
	
    /*var paging = new Ext.PagingToolbar({
		store:store,
        pageSize: 25,
        displayInfo: true,
        displayMsg: 'Fonds {0} - {1} van {2}',
        emptyMsg: "No results to display"
    });*/
	
    function syncFilterBoxShadow()
    {
        filterBox.syncShadow();
        filterBox.center();
    }
	
    var filterBox = new Ext.Window({
        title: locale.FILTERS,
        modal: true,
        width: 420,
        closeAction: 'hide',
        resizable: false,
        items: [
        new Ext.form.FormPanel({
            id:'filterBoxForm',
            layout:'fit',
            //labelAlign:'top',
            bodyStyle:'padding:10px 5px 5px 5px;',
            items: [
            {
                xtype:'fieldset',
                checkboxToggle:true,
                title: locale.FILTER + '&nbsp;1',
                id: 'grid-filter-0',
                autoHeight:true,
                defaults: {
                    width: 150
                },
                defaultType: 'textfield',
                collapsed: true,
                items :[
                {
                    xtype: 'combo',
                    fieldLabel: locale.SEARCHFIELD,
                    allowBlank: false,
                    name: 'filterField0',
                    transform: 'filter-columns',
                    lazyRender: true,
                    forceSelection: true,
                    triggerAction: 'all',
                    value: 'fonds',
                    listWidth  :170
                },{
                    xtype: 'combo',
                    allowBlank: false,
                    name: 'operator0',
                    forceSelection: true,
                    triggerAction: 'all',
                    listWidth: 170,
                    value: locale.EQUALS,
                    store: [locale.EQUALS, locale.CONTAINS, locale.LOWER_THAN, locale.GREATER_THAN]
								
                },{
                    width  :166,
                    fieldLabel: locale.SEARCH_VALUE,
                    name: 'filterValue0',
                    allowBlank:false
                }
                ],
                listeners: {
                    collapse: syncFilterBoxShadow,
                    expand: syncFilterBoxShadow
                }
            },
            {
                xtype:'fieldset',
                checkboxToggle:true,
                title: locale.FILTER + '&nbsp;2',
                id: 'grid-filter-1',
                autoHeight:true,
                defaults: {
                    width: 150
                },
                defaultType: 'textfield',
                collapsed: true,
                items :[
                {
                    xtype: 'combo',
                    fieldLabel: locale.SEARCHFIELD,
                    allowBlank: false,
                    name: 'filterField1',
                    transform: 'filter-columns1',
                    lazyRender: true,
                    forceSelection: true,
                    triggerAction: 'all',
                    value: 'fonds',
                    listWidth  :170
                },{
                    xtype: 'combo',
                    allowBlank: false,
                    name: 'operator1',
                    forceSelection: true,
                    triggerAction: 'all',
                    listWidth: 170,
                    value: locale.EQUALS,
                    store: [locale.EQUALS, locale.CONTAINS, locale.LOWER_THAN, locale.GREATER_THAN]
								
                },{
                    width  :166,
                    fieldLabel: locale.SEARCH_VALUE,
                    name: 'filterValue1',
                    allowBlank:false
                }
                ],
                listeners: {
                    collapse: syncFilterBoxShadow,
                    expand: syncFilterBoxShadow
                }
            },
            {
                xtype:'fieldset',
                checkboxToggle:true,
                title: locale.FILTER + '&nbsp;3',
                id: 'grid-filter-2',
                autoHeight:true,
                defaults: {
                    width: 150
                },
                defaultType: 'textfield',
                collapsed: true,
                items :[
                {
                    xtype: 'combo',
                    fieldLabel: locale.SEARCHFIELD,
                    allowBlank: false,
                    name: 'filterField2',
                    transform: 'filter-columns2',
                    lazyRender: true,
                    forceSelection: true,
                    triggerAction: 'all',
                    value: 'fonds',
                    listWidth  :170
                },{
                    xtype: 'combo',
                    allowBlank: false,
                    name: 'operator2',
                    forceSelection: true,
                    triggerAction: 'all',
                    listWidth: 170,
                    value: locale.EQUALS,
                    store: [locale.EQUALS, locale.CONTAINS, locale.LOWER_THAN, locale.GREATER_THAN]
								
                },{
                    width  :166,
                    fieldLabel: locale.SEARCH_VALUE,
                    name: 'filterValue2',
                    allowBlank:false
                }
                ],
                listeners: {
                    collapse: syncFilterBoxShadow,
                    expand: syncFilterBoxShadow
                }
            }
            ]
        })
        ],
        buttons: [
        {
            text: locale.RESET_FILTERS,
            iconCls: 'clear-filters',
            handler: function (args) {
                Ext.getCmp('grid-filter-0').collapse();
                Ext.getCmp('grid-filter-1').collapse();
                Ext.getCmp('grid-filter-2').collapse();
                Ext.getCmp('filterBoxForm').getForm().reset();
                fondsenStore.clearFilter();
            }
        },
        new Ext.Toolbar.Fill(),
        {
            text: locale.CANCEL,
            iconCls: 'cancel',
            handler: function (args) {
                filterBox.hide();
            }
        },
        {
            text: locale.APPLY,
            iconCls: 'apply',
            handler: function () {
                // build filter object
                var filterObj = {}
                filterObj.filters = [];
                var form = Ext.getCmp('filterBoxForm').getForm();
					
					
                for(var i = 0;i < 3;i++) {
                    if(!Ext.getCmp('grid-filter-'+i).collapsed && form.findField('filterValue'+i).isValid()) {
                        var obj = {
                            filterField	:	form.findField('filterField'+i).getValue(),
                            operator	:	form.findField('operator'+i).getValue(),
                            filterValue	:	form.findField('filterValue'+i).getValue()
                        };
                        filterObj.filters.push(obj);
                    }
                }
                //console.log(filterObj.filters.length);
                //console.log(filterObj.filters);
                //alert('filter');
                if(!filterObj.filters.length == 0) {
                    // pass filter object to filter function
                    //console.log(filterObj);
                    fondsenStore.filterBy(gridFilterFunction,filterObj);
                } else {
                    fondsenStore.clearFilter();
                }
            }
        }
        ]
    });
	
    var grid = new Ext.grid.GridPanel({
        ds: fondsenStore,
        cm: colModel,
        sm: new Ext.grid.RowSelectionModel({
            singleSelect:true
        }),
        stripeRows: true,
        region:'west',
		
        viewConfig: {
            forceFit: true
        },
        //bbar: paging,
        minSize: 300,
        width: 325,
        maxSize: 500,
        height:500,
        frame:false,
        tbar:	[
        '<b style="line-height:18px;">' + locale.FUNDS + '</b>',
        '-',
        {
            iconCls:'filter',
            text:'Filters',
            handler: function(args) {
                filterBox.show();
            }
        }
        ]
    });
	
	
    var tpl = new Ext.XTemplate(
        '<table class="x-grid3-row" style="width:37%"><tbody>',
			
        '<tr><td width="20%">' + locale.COMPANY + '</td><td width="17%"><strong>{fonds}</strong></td></tr>',		
        '<tr><td>' + locale.SECTOR + '</td><td><em>{[this.toUcFirst(values.sector)]}</em></td></tr>',
        '<tr><td>' + locale.CURRENCY + '</td><td>{valuta}</td></tr>',
        '<tr><td>' + locale.PRICE + '</td><td>{[this.asFloat(values.koers)]}</td></tr>',
		
        '<tr><td colspan="2">&nbsp;</td></tr>',
		
        '<tr><td>' + locale.MARKETVALUE + '</td><td>{[this.asCurrency(Math.round(values.aantal_aandelen * values.koers))]}</td></tr>',	    
        '<tr><td>' + locale.ASSETS + '</td><td>{[this.asCurrency(values.assets)]}</td></tr>',	    
        '<tr><td>' + locale.ANNUAL_REVENUE + '</td><td>{[this.asCurrency(values.omzet)]}</td></tr>',	    
        '<tr><td>' + locale.NETTO_ANNUAL_PROFIT + '</td><td>{[this.asCurrency(values.netto_jaarwinst)]}</td></tr>',	    
        '<tr><td>' + locale.ANNUAL_EARNINGS_SHARE + '</td><td>{[this.asCurrency((values.netto_jaarwinst / values.aantal_aandelen))]}</td></tr>',	   
        '<tr><td>' + locale.PRICE_EARNINGS + '</td><td>{[this.asCurrency((values.aantal_aandelen*values.koers/values.netto_jaarwinst))]}</td></tr>',	   
		
        '<tr><td colspan="2">&nbsp;</td></tr>',
		
        '<tr><td>' + locale.PRICE_BOOK + '</td><td>{[this.asCurrency(Math.round(values.aantal_aandelen * values.koers/values.eigen_vermogen*100)/100)]}</td></tr>',	    
        '<tr><td>' + locale.SOLVABILITY + ' (EV/EV+VV)</td><td>{[this.asCurrency(parseInt(values.eigen_vermogen)/(parseInt(values.eigen_vermogen) + parseInt(values.vreemd_vermogen)) )]}</td></tr>',	    
        '<tr><td>' + locale.RETURN_EQUITY + '</td><td>{[this.asCurrency(parseInt(values.netto_jaarwinst)/parseInt(values.eigen_vermogen))]}</td></tr>',
		
        '<tr><td colspan="2">&nbsp;</td></tr>',
		
        '<tr><td>' + locale.EQUITY_SHARE + '</td><td>{[this.asCurrency((values.eigen_vermogen/values.aantal_aandelen))]}</td></tr>',
        '<tr><td>' + locale.ASSETS_SHARE + '</td><td>{[this.asCurrency((values.assets/values.aantal_aandelen))]}</td></tr>',
        '<tr><td>' + locale.DCF_SHARE + '</td><td>{[this.calculateDCF(this.calculateWACC(values.betaalde_rente,values.vreemd_vermogen,values.eigen_vermogen,values.netto_jaarwinst),values.cashflow,15,values.aantal_aandelen)]}</td></tr>',
        //'<tr><td>Riskfree rate plus 1</td><td>{[this.asFloat(values.risicovrije_rente)]}</td></tr>',
        '<tr><td>' + locale.WACC_PLUS_1 + '</td><td>{[this.asFloat(this.calculateWACC(values.betaalde_rente,values.vreemd_vermogen,values.eigen_vermogen,values.netto_jaarwinst))]}</td></tr>',
        '<tr><td>' + locale.WORKINGCAP_SHARE + '</td><td>{[this.asFloat(Math.round(100*values.werkkapitaal/values.aantal_aandelen)/100)]}</td></tr>',
	    
        '<tr><td colspan="2">&nbsp;</td></tr>',
				
        '<tr><td>' + locale.EQUITY + '</td><td>{[this.asCurrency(values.eigen_vermogen)]}</td></tr>',
        '<tr><td>' + locale.TOTAL_DEBT  + '</td><td>{[this.asCurrency(values.vreemd_vermogen)]}</td></tr>',
        '<tr><td>' + locale.WORKING_CAPITAL + '</td><td>{[this.asCurrency((values.werkkapitaal))]}</td></tr>',
        '<tr><td>' + locale.CASHFLOW + '</td><td>{[this.asCurrency(values.cashflow)]}</td></tr>',
        '<tr><td>' + locale.DILUTED_NUMBER_OF_SHARES + '</td><td>{[this.asCurrency((values.aantal_aandelen))]}</td></tr>',
	    
        '<tr><td colspan="2">&nbsp;</td></tr>',
				
        '<tr><td>' + locale.ANNUAL_OPERATING_INCOME + '</td><td>{[this.asCurrency(values.ebitda)]}</td></tr>',
        '<tr><td>' + locale.OPERATING_INCOME_TOT_DEBT_EQUITY + '</td><td>{[this.asFloat(Math.round(1000*(parseInt(values.ebitda)/(parseInt(values.eigen_vermogen)+parseInt(values.vreemd_vermogen))))/1000)]}</td></tr>',
        //'<tr><td>Ebit(da)/omzet</td><td>{[this.asFloat(Math.round(1000*values.ebitda/values.omzet)/1000)]}</td></tr>',
        '<tr><td>' + locale.OPERATING_RESULT_EQUITY + '</td><td>{[this.asFloat(Math.round(1000*values.ebitda/values.eigen_vermogen)/1000)]}</td></tr>',
	    
        '<tr><td colspan="2">&nbsp;</td></tr>',
		
        '<tr><td>' + locale.PAID_INTEREST + '</td><td>{[this.asCurrency(values.betaalde_rente)]}</td></tr>',
        '<tr><td>' + locale.PAID_INTEREST_TOTAL_DEBT + '</td><td>{[this.asFloat(Math.round(values.betaalde_rente/values.vreemd_vermogen*1000)/1000)]}</td></tr>',
        '<tr><td>' + locale.WORKCAP_ASSETS + '</td><td>{[this.asFloat(Math.round(values.werkkapitaal/values.assets*1000)/1000)]}</td></tr>',
        '<tr><td>' + locale.EQUITY_ASSETS + '</td><td>{[this.asFloat(Math.round(values.eigen_vermogen/values.assets*1000)/1000)]}</td></tr>',
        '<tr><td>' + locale.EARNINGS_REVENUE + '</td><td>{[this.asFloat(Math.round(values.netto_jaarwinst/values.omzet*1000)/1000)]}</td></tr>',
		
        '</tbody></table>',
        '<div style="position:absolute;width:63%;top:5px;left:37%;">',
        '<div id="koersgrafiek{id}" style="float:left;margin-right:5px;margin-bottom:5px;"></div>',
        '<div id="winstperaandeeldiagram{id}" style="float:left;margin-right:5px;margin-bottom:5px;"></div>',
        //'<div style="clear:both;"></div>',
        '<div id="omzetdiagram{id}" style="float:left;margin-right:5px;margin-bottom:5px;"></div>',
        '<div id="eigenvermogendiagram{id}" style="float:left;margin-right:5px;margin-bottom:5px;"></div>',
        //'<div style="clear:both;"></div>',
        '<div id="assetsdiagram{id}" style="float:left;margin-right:5px;margin-bottom:5px;"></div>',
        '<div id="cashflowdiagram{id}" style="float:left;margin-right:5px;margin-bottom:5px;"></div>',
        '<div id="totaldebtdiagram{id}" style="float:left;margin-right:5px;margin-bottom:5px;"></div>',
        '<div id="annualoperatingincomediagram{id}" style="float:left;margin-right:5px;margin-bottom:5px;"></div>',
        '<div id="stockcountdiagram{id}" style="float:left;margin-right:5px;margin-bottom:5px;"></div>',
        '</div>',
        '<div style="clear:both;"></div>',
        '<br/><br/>',	{
            asFloat: function (val)
            {
                return val.toString().replace(".",",");
            },
            asCurrency: function (val)
            {
                return formatCurrency(val);
            },
            calculateDCF: function (rvr, cf, n,am_aand)
            {
                var retval = 0;
				
                if(rvr < 1) 
                    return "<i>n/a</i>"
				
                for(var i = 1;i<=parseInt(n);i++)
                {
                    retval += parseInt(cf)/Math.pow(rvr,i);
                }
                //console.log(retval);
                return this.asCurrency(retval/am_aand);
            },
            calculateWACC:function(betaalde_rente,vreemd_vermogen,eigen_vermogen,netto_jaarwinst) 
            {
                var varA = (parseInt(betaalde_rente)/parseInt(vreemd_vermogen));
                var varB = (parseInt(vreemd_vermogen)/(parseInt(vreemd_vermogen)+parseInt(eigen_vermogen)));
                var varC = ((parseInt(netto_jaarwinst)/parseInt(eigen_vermogen))*(parseInt(eigen_vermogen)/(parseInt(eigen_vermogen)+parseInt(vreemd_vermogen))));
                //*Y7*(K7/(K7+N7))+(P7*Q7)+1
                //alert(varA);
                //alert(varB);
                //alert(varC);
                return Math.round((0.7 * varA * varB + varC +1)*1000)/1000;
            //return 0.7*(betaalde_rente/vreemd_vermogen)*(vreemd_vermogen/vreemd_vermogen+eigen_vermogen)+((parseInt(netto_jaarwinst)/parseInt(eigen_vermogen))*(parseInt(eigen_vermogen)/(parseInt(eigen_vermogen)+parseInt(vreemd_vermogen)))))+1;
            },
            toUcFirst: function(val)
            {
                return val.charAt(0).toUpperCase() + val.substr( 1, val.length);
            }
        });
    function formatCurrency(num) {
        num = num.toString().replace(/\$|\,/g,'');
        if(isNaN(num))
            num = "0";
        sign = (num == (num = Math.abs(num)));
        num = Math.floor(num*100+0.50000000001);
        cents = num%100;
        num = Math.floor(num/100).toString();

        for (var i = 0; i < Math.floor((num.length-(1+i))/3); i++)
            num = num.substring(0,num.length-(4*i+3))+'.'+
            num.substring(num.length-(4*i+3));
        if(cents == 0){
            return (sign?'':'-')+num;
        } else if (cents<10) {
            cents = "0" + cents;
        }
        return (sign?'':'-')+num + ',' + cents;
    }
    var myMask = new Ext.LoadMask(Ext.getBody(), {
        msg: locale.PLEASE_WAIT + "...",
        store:fondsenStore
    });
	
	
    var partAandeelwijzer = new Ext.Panel({
        layout:'border',
        region:'center',
        bodyBorder: false,
        defaults: {
            // collapsible: false,
            split: true,
            autoHide: false,
            useSplitTips: false
        },
        items:[
        grid
        ,new Ext.TabPanel({
            resizeTabs:true, // turn on tab resizing
            id:'propertyPanel',
            enableTabScroll:true,
            collapsible:false,
            defaults: {
                autoScroll:true
            },
            region:'center'
        })
        ]
    });
	
    var partHome = new Ext.Panel({
        contentEl:"homeContent"
    });
    var partAgenda = new Ext.Panel({
        contentEl:"agendaContent"
    });
    var partToelichting = new Ext.Panel({
        contentEl:"toelichtingContent"
    });
	
	
    var borderLayout = new Ext.Viewport({
        id:'border-panel',
        layout:'border',
        height:550,
        bodyBorder: false,
		
        defaults: {
            collapsible: false,
            split: false,
            autoHide: false,
            useSplitTips: false
        },
        items: [
        {
            layout: 'anchor',
            height: 60,
            border:false,
            collapsible: false,
            region: 'north',
            items: [
            new Ext.Panel({
                height: 32,
                contentEl:"header",
                baseCls : 'header'					
            }),
            new Ext.Toolbar({
                items: [
                {
                    toggleGroup: 'default-menu',
                    enableToggle : true,
                    pressed : true,
                    text:Ext.get("main-menu").query("a")[0].innerHTML,
                    handler:function(e){
                        e.toggle(true);
                        Ext.getCmp('contentPanel').getLayout().setActiveItem(0);
                    }
                },
                '-',
                {
                    enableToggle : true,
                    toggleGroup: 'default-menu',
                    text:Ext.get("main-menu").query("a")[1].innerHTML,
                    handler:function(e){
                        Ext.getCmp('contentPanel').getLayout().setActiveItem(1);
                        e.toggle(true);
                    }
                },
                '-',
                {
                    enableToggle : true,
                    toggleGroup: 'default-menu',
                    text:Ext.get("main-menu").query("a")[2].innerHTML,
                    handler:function(e){
                        e.toggle(true);
                        Ext.getCmp('contentPanel').getLayout().setActiveItem(2);
                    }
                },
                '-',
                {
                    enableToggle : true,
                    toggleGroup: 'default-menu',
                    text: Ext.get("main-menu").query("a")[3].innerHTML,
                    handler:function(e){
                        e.toggle(true);
                        Ext.getCmp('contentPanel').getLayout().setActiveItem(3);
                    }
                }
                ]
            })
            ]
        },
        new Ext.Panel({
            id:'contentPanel',
            layout:'card',
            activeItem: 0,
            border:false,
            //layout:'fit',
            region:'center',
            items:[partHome,partAgenda,partToelichting,partAandeelwijzer]
        })
        ]
    });
    borderLayout.render('aandeelwijzer-layout');
	
	
    /*******************************
		Listeners
	********************************/
    function gridFilterFunction(rec, id)
    {

        for (var i = 0;i < this.filters.length;i++)
        {

            var filterFieldValue;
            var filterValue = this.filters[i].filterValue;
			
            switch (this.filters[i].filterField) {
                case 'sector':
                    filterFieldValue = rec.data.sector;
                    break;
                case 'fonds':
                    filterFieldValue = rec.data.fonds;
                    break;
                case 'jaarwinst':
                    filterFieldValue = parseInt(rec.data.netto_jaarwinst);
                    break;
                case 'koers_boekwaarde':
                    filterFieldValue = Math.round(rec.data.aantal_aandelen * rec.data.koers/rec.data.eigen_vermogen * 100) / 100;
                    break;
                case 'winst_eigenvermogen':
                    filterFieldValue = rec.data.netto_jaarwinst / rec.data.eigen_vermogen;
                    break;
                case 'koers_winstverhouding':
                    filterFieldValue = rec.data.aantal_aandelen * rec.data.koers / rec.data.netto_jaarwinst;
                    break;
                case 'marktwaarde':
                    filterFieldValue = Math.round(rec.data.aantal_aandelen * rec.data.koers);
                    break;
            }
			
            switch (this.filters[i].operator)
            {
                case locale.EQUALS:
                    if(!(filterFieldValue.toString().toUpperCase() == filterValue.toString().toUpperCase()))
                        return false;
                    break;
                case locale.CONTAINS:
                    if(filterFieldValue.toString().toUpperCase().indexOf(filterValue.toString().toUpperCase()) == -1)
                        return false;
                    break;
                case locale.LOWER_THAN:
                    if(filterFieldValue >= parseFloat(filterValue.replace(',','.')))
                        return false;
                    break;
                case locale.GREATER_THAN:
                    if(filterFieldValue <= parseFloat(filterValue.replace(',','.')))
                        return false;
                    break;
            }

        }
        return true;
    //console.log(arg1, this);return false;
    }
	
    grid.addListener('cellclick',function( grid, rowIndex, columnIndex, e){
        var record = grid.getStore().getAt(rowIndex);
        var createGraphs = false;
        //var propGrid = Ext.getCmp('propGrid');
        // make sure the property grid exists
        //if (propGrid) {
        //Koers
        // populate the property grid with store data
        //setTitle("Fonds: "+  record.data.fonds);
        var tabPanel = Ext.getCmp('propertyPanel');
        if(!tabPanel.findById(record.data.id+"tab")){
            Ext.getCmp('propertyPanel').add({
                id:record.data.id+"tab",
                title:record.data.fonds,
                closable:true,
                html:tpl.applyTemplate(record.data)
            });
            createGraphs = true;
        //Ext.getCmp(record.data.id+"tab").doLayout();
        } 
        tabPanel.activate(record.data.id+"tab");
		
        if(createGraphs == true)
            addGraph(record);
		
		
    /*propGrid.setSource({
				 "Fondsnaam"			: record.data.fonds
				,"Sector"				: record.data.sector
				,"Valuta"				: record.data.valuta
				,"Koers"				: record.data.koers
				,"-"					: null
				,"Marktwaarde"			: " "
			
			});*/
    //}
    });
	
    function addGraph(rec) {
        var fundId = rec.data.id;
		
        // koers
        var koersStore = new Ext.data.JsonStore({
            autoLoad : true,
            url : 'graphData.php?action=koers&fundId='+fundId+"&boekjaar="+rec.data.boekjaar,
            fundIdentifier : fundId,
            root : 'results',
            totalProperty : 'total',
            sortInfo : {
                field: "datum", 
                direction: "ASC"
            },
            fields: [{
                name: 'datum', 
                mapping: 'datum', 
                type:'date', 
                dateFormat: 'Y-m-d'
            }, {
                name: 'week', 
                mapping: 'week'
            }, {
                name: 'koers', 
                mapping: 'koers', 
                type:'float'
            }]
        });
		
        koersStore.addListener('load',function(st, recs, opt) {
            var yaxis ;
            var useMinimum = true;
            var negativeValue = false;
			
            for (var rec in recs) {
                //console.log(recs[rec]);
                if(typeof(recs[rec]) == "object" && recs[rec]['data']['koers'] >= 1)
                    useMinimum = false;
                if(typeof(recs[rec]) == "object" && recs[rec]['data']['koers'] < 0)
                    negativeValue = true;
            }
            if(useMinimum && !negativeValue){
                yaxis =  new Ext.chart.NumericAxis({
                    displayName: 'Koers',
                    snapToUnits: false,
                    //alwaysShowZero: true,
                    minimum:0,
                    maximum: 1,
                    labelRenderer : Ext.util.Format.numberRenderer('0.000,00/i')
                });
            } else {
                yaxis =  new Ext.chart.NumericAxis({
                    displayName: 'Koers',
                    snapToUnits: false,
                    //alwaysShowZero: false,
                    //minimum: 0,
                    //maximum: 10,
                    labelRenderer : Ext.util.Format.numberRenderer('0.000,00/i')
                });
            }

            new Ext.Panel({
                title: locale.WEEKLY_STOCKPRICE,
                renderTo: 'koersgrafiek' + st.fundIdentifier,
                width : 505,
                //width : 250,
                height : 190,
                //autoScroll : true,
                //layout:'fit',
                items: {
                    xtype: 'linechart',
                    // set width of this component according to values redered in it
                    width : koersStore.data.length * 25,
                    boxMinWidth : koersStore.data.length * 25,
                    ctCls : 'overflow-x',
                    store: koersStore,
                    xField: 'week',
                    yField: 'koers',
                    listeners: {
                        itemclick: function(o){
                        //var rec = store.getAt(o.index);
                        //Ext.example.msg('Item Selected', 'You chose {0}.', rec.get('name'));
                        }
                    },
                    xAxis: new Ext.chart.CategoryAxis({
                        hideOverlappingLabels : true
                    }),
                    yAxis: yaxis,
                    tipRenderer : function(chart, record, index, series){
                        if(series.yField == 'koers'){
                            return Ext.util.Format.number(record.data.koers, '0.000,00/i') + ' in week ' + record.data.week;
                        }
                    },
                    series: [{
                        type: "line",
                        displayName: "Koers",
                        yField: "koers",
                        style: {
                            //fillColor: 0xFFAAAA,
                            fillColor: 0xFF0000,
                            //lineColor: 0xFF5555,
                            lineColor: 0xFF0000,
                            lineSize:1,
                            size: 4,
                            //line:1,
                            color:0xFF0000
                        }
                    }]
                }
            });
        });
		
        // winst per aandeel
        var winstperaandeelStore = new Ext.data.JsonStore({
            autoLoad:		true,
            url: 			'graphData.php?action=wpa&fundId='+fundId+"&boekjaar="+rec.data.boekjaar,
            fundIdentifier: fundId,
            root: 			'results',
            totalProperty: 	'total',
            sortInfo: {
                field: "datum", 
                direction: "ASC"
            },
            fields:	[
            {
                name: 'datum', 
                mapping: 'datum', 
                type: 'date', 
                dateFormat:"Y-m-d"
            },

            {
                name: 'quarter', 
                mapping: 'quarter'
            },

            {
                name: 'wpa', 
                mapping: 'wpa', 
                type:'float'
            }
            ]
        });
		
        winstperaandeelStore.addListener('load',function(st, recs, opt) {
            var yaxis ;
            var useMinimum = true;
            var negativeValue = false;
            var highestVal = 0;
            var lowestVal = 0;
			
            for (var rec in recs) {
                //console.log(recs[rec]);
                if(typeof(recs[rec]) == "object" && recs[rec]['data']['wpa'] >= 1)
                    useMinimum = false;
                if(typeof(recs[rec]) == "object" && recs[rec]['data']['wpa'] < 0)
                    negativeValue = true;
					
                highestVal 	= 	(typeof(recs[rec]) == "object" && recs[rec]['data']['wpa'] > highestVal) ? recs[rec]['data']['wpa'] : highestVal;
                lowestVal 	= 	(typeof(recs[rec]) == "object" && recs[rec]['data']['wpa'] < lowestVal) 	? recs[rec]['data']['wpa'] : lowestVal;
            }
            //if(useMinimum && !negativeValue){
            yaxis =  new Ext.chart.NumericAxis({
                displayName: 'WPA',
                snapToUnits: false,
                //alwaysShowZero: false,
                minimum: lowestVal > 0 ? 0 : Math.floor(lowestVal),
                maximum: Math.ceil(highestVal),
                labelRenderer : Ext.util.Format.numberRenderer('0.000,00/i')
            });
            /*	} 	else if(negativeValue){
				yaxis =  new Ext.chart.NumericAxis({
						displayName: 'WPA',
						snapToUnits: false,
						//alwaysShowZero: false,
						//minimum: 0,
						maximum: 1,
						labelRenderer : Ext.util.Format.numberRenderer('0.000,00/i')
					});
			} else {
				yaxis =  new Ext.chart.NumericAxis({
						displayName: 'WPA',
						snapToUnits: false,
						//alwaysShowZero: false,
						//minimum: 0,
						//maximum: 1,
						labelRenderer : Ext.util.Format.numberRenderer('0.000,00/i')
					});
			}*/
            new Ext.Panel({
                title: locale.ANNUAL_EPS,
                renderTo: 'winstperaandeeldiagram'+st.fundIdentifier,
                //width : 505,
                width:250,
                height:190,
                //layout:'fit',

                items: {
                    xtype: 'columnchart',
                    store: winstperaandeelStore,
                    ctCls : 'overflow-x',
                    width : winstperaandeelStore.data.length * 45,
                    boxMinWidth : winstperaandeelStore.data.length * 45,
                    //id:"wpachart",
                    xField: 'quarter',
                    yField: 'wpa',
					
                    listeners: {
                        itemclick: function(o){
                        //var rec = store.getAt(o.index);
                        //Ext.example.msg('Item Selected', 'You chose {0}.', rec.get('name'));
                        }
                    },
                    yAxis: yaxis,
                    tipRenderer : function(chart, record, index, series){
                        if(series.yField == 'wpa') {
                            return Ext.util.Format.number(record.data.wpa, '0.000,00/i') + ' ' + record.data.quarter;
                        }
                    },
                    series: [{
                        type: 'column',
                        displayName: 'WPA',
                        yField: 'wpa',
                        style:{
                            fillColor:'0xB3E5EF'
                        }
                    }]
                }
            });
        //console.log(Ext.getCmp('wpachart'));
        });
		
		
		
        // omzet
        var omzetStore = new Ext.data.JsonStore({
            autoLoad:		true,
            url: 			'graphData.php?action=omzet&fundId='+fundId+"&boekjaar="+rec.data.boekjaar,
            root: 			'results',
            totalProperty: 	'total',
            sortInfo: {
                field: "datum", 
                direction: "ASC"
            },
            fields:	[
            {
                name: 'datum', 
                mapping: 'datum', 
                type: 'date', 
                dateFormat:"Y-m-d"
            },

            {
                name: 'quarter', 
                mapping: 'quarter'
            },

            {
                name: 'omzet', 
                mapping: 'omzet',
                type:'int'
            }
            ]
        });
	
        omzetStore.addListener('load', function() {
            //console.debug(omzetStore.data);
            new Ext.Panel({
                title: locale.ANNUAL_REVENUE,
                renderTo: 'omzetdiagram'+fundId,
                //width : 505,
                width : 250,
                height : 190,
                //layout:'fit',
                items: {
                    xtype: 'columnchart',
                    store: omzetStore,
                    width : omzetStore.data.length * 50,
                    boxMinWidth : omzetStore.data.length * 50,
                    ctCls : 'overflow-x',
                    xField: 'quarter',
                    yField: 'omzet',
                    yAxis: new Ext.chart.NumericAxis({
                        displayName: 'Omzet',
                        snapToUnits: false,
                        labelRenderer : Ext.util.Format.numberRenderer('0.0/i')
                    }),
                    tipRenderer : function(chart, record, index, series){
                        if(series.yField == 'omzet'){
                            return Ext.util.Format.number(record.data.omzet, '0.0/i') + ' ' + record.data.quarter;
                        }
                    },
                    series: [{
                        type: 'column',
                        displayName: 'Omzet',
                        yField: 'omzet',
                        style:{
                            fillColor:'0xB3E5EF'
                        }
                    }]
                }
            });
        });
	
		
        // eigen vermogen
        var evStore = new Ext.data.JsonStore({
            autoLoad:		true,
            url: 			'graphData.php?action=ev&fundId='+fundId+"&boekjaar="+rec.data.boekjaar,
            root: 			'results',
            totalProperty: 	'total',
            sortInfo: {
                field: "datum", 
                direction: "ASC"
            },
            fields:	[
            {
                name: 'datum', 
                mapping: 'datum', 
                type: 'date', 
                dateFormat:"Y-m-d"
            },

            {
                name: 'quarter', 
                mapping: 'quarter'
            },

            {
                name: 'eigen_vermogen', 
                mapping: 'eigen_vermogen',
                type:'int'
            }
            ]
        });
	
        evStore.addListener('load', function() {
            new Ext.Panel({
                title: locale.EQUITY_FOR_SHAREHOLDERS,
                renderTo: 'eigenvermogendiagram'+fundId,
                //width : 505,
                width:250,
                height:190,
                //layout:'fit',
                items: {
                    xtype: 'columnchart',
                    store: evStore,
                    ctCls : 'overflow-x',
                    width : evStore.data.length * 50,
                    boxMinWidth : evStore.data.length * 50,
                    xField: 'quarter',
                    yField: 'eigen_vermogen',
                    yAxis: new Ext.chart.NumericAxis({
                        displayName: 'Eigen vermogen',
                        snapToUnits: false,
                        labelRenderer : Ext.util.Format.numberRenderer('0.0/i')
                    }),
                    tipRenderer : function(chart, record, index, series){
                        if(series.yField == 'eigen_vermogen'){
                            return Ext.util.Format.number(record.data.eigen_vermogen, '0.0/i') + ' ' + record.data.quarter;
                        }
                    },
                    series: [{
                        type: 'column',
                        displayName: 'E/v',
                        yField: 'eigen_vermogen',
                        style:{
                            fillColor:'0xB3E5EF'
                        }
                    }]
                }
            });
        });
	
		
		
        // assets
        var assetsStore = new Ext.data.JsonStore({
            autoLoad:		true,
            url: 			'graphData.php?action=assets&fundId='+fundId+"&boekjaar="+rec.data.boekjaar,
            root: 			'results',
            totalProperty: 	'total',
            sortInfo: {
                field: "datum", 
                direction: "ASC"
            },
            fields:	[
            {
                name: 'datum', 
                mapping: 'datum', 
                type: 'date', 
                dateFormat:"Y-m-d"
            },

            {
                name: 'quarter', 
                mapping: 'quarter'
            },

            {
                name: 'assets', 
                mapping: 'assets',
                type:'int'
            }
            ]
        });
	
        assetsStore.addListener('load', function() {
            new Ext.Panel({
                title: locale.ASSETS,
                renderTo: 'assetsdiagram'+fundId,
                //width : 505,
                width:250,
                height:190,
                //layout:'fit',
                items: {
                    xtype: 'columnchart',
                    store: assetsStore,
                    ctCls : 'overflow-x',
                    width : assetsStore.data.length * 50,
                    boxMinWidth : assetsStore.data.length * 50,
                    xField: 'quarter',
                    yField: 'assets',
                    yAxis: new Ext.chart.NumericAxis({
                        displayName: 'Assets',
                        snapToUnits: false,
                        labelRenderer : Ext.util.Format.numberRenderer('0.0/i')
                    }),
                    tipRenderer : function(chart, record, index, series){
                        if(series.yField == 'assets'){
                            return Ext.util.Format.number(record.data.assets, '0.0/i') + ' ' + record.data.quarter;
                        }
                    },
                    series: [{
                        type: 'column',
                        displayName: 'Assets',
                        yField: 'assets',
                        style:{
                            fillColor:'0xB3E5EF'
                        }
                    }]
                }
            });
        });		
		
        // cashflow
        var cfStore = new Ext.data.JsonStore({
            autoLoad:		true,
            url: 			'graphData.php?action=cashflow&fundId='+fundId+"&boekjaar="+rec.data.boekjaar,
            root: 			'results',
            totalProperty: 	'total',
            sortInfo: {
                field: "datum", 
                direction: "ASC"
            },
            fields:	[
            {
                name: 'datum', 
                mapping: 'datum', 
                type: 'date', 
                dateFormat:"Y-m-d"
            },

            {
                name: 'quarter', 
                mapping: 'quarter'
            },

            {
                name: 'cashflow', 
                mapping: 'cashflow',
                type:'int'
            }
            ]
        });
        
        cfStore.addListener('load', function() {
            new Ext.Panel({
                title: locale.CASHFLOW,
                renderTo: 'cashflowdiagram'+fundId,
                //width : 505,
                width:250,
                height:190,
                //layout:'fit',
                items: {
                    xtype: 'columnchart',
                    store: cfStore ,
                    ctCls : 'overflow-x',
                    width : cfStore.data.length * 45,
                    boxMinWidth : cfStore.data.length * 45,
                    xField: 'quarter',
                    yField: 'cashflow',
                    yAxis: new Ext.chart.NumericAxis({
                        displayName: 'Cashflow',
                        snapToUnits: false,
                        labelRenderer : Ext.util.Format.numberRenderer('0.0/i')
                    }),
                    tipRenderer : function(chart, record, index, series){
                        if(series.yField == 'cashflow'){
                            return Ext.util.Format.number(record.data.cashflow, '0.0/i') + ' ' + record.data.quarter;
                        }
                    },
                    series: [{
                        type: 'column',
                        displayName: 'Cashflow',
                        yField: 'cashflow',
                        style:{
                            fillColor:'0xB3E5EF'
                        }
                    }]
                }
            });
        });
        
        //totaldebt
        var tdStore = new Ext.data.JsonStore({
            autoLoad:		true,
            url: 			'graphData.php?action=td&fundId='+fundId+"&boekjaar="+rec.data.boekjaar,
            root: 			'results',
            totalProperty: 	'total',
            sortInfo: {
                field: "datum", 
                direction: "ASC"
            },
            fields:	[
            {
                name: 'datum', 
                mapping: 'datum', 
                type: 'date', 
                dateFormat:"Y-m-d"
            },

            {
                name: 'quarter', 
                mapping: 'quarter'
            },

            {
                name: 'vreemd_vermogen', 
                mapping: 'vreemd_vermogen',
                type:'int'
            }
            ]
        });
        
        tdStore.addListener('load', function() {
            new Ext.Panel({
                title: locale.TOTAL_DEBT,
                renderTo: 'totaldebtdiagram'+fundId,
                //width : 505,
                width:250,
                height:190,
                //layout:'fit',
                items: {
                    xtype: 'columnchart',
                    store: tdStore ,
                    ctCls : 'overflow-x',
                    width : tdStore.data.length * 45,
                    boxMinWidth : tdStore.data.length * 45,
                    xField: 'quarter',
                    yField: 'vreemd_vermogen',
                    yAxis: new Ext.chart.NumericAxis({
                        displayName: 'Total debt',
                        snapToUnits: false,
                        labelRenderer : Ext.util.Format.numberRenderer('0.0/i')
                    }),
                    tipRenderer : function(chart, record, index, series){
                        if(series.yField == 'vreemd_vermogen'){
                            return Ext.util.Format.number(record.data.vreemd_vermogen, '0.0/i') + ' ' + record.data.quarter;
                        }
                    },
                    series: [{
                        type: 'column',
                        displayName: 'Total debt',
                        yField: 'vreemd_vermogen',
                        style:{
                            fillColor:'0xB3E5EF'
                        }
                    }]
                }
            });
        });
        
        //Annual Operating Income
        var aoiStore = new Ext.data.JsonStore({
            autoLoad:		true,
            url: 			'graphData.php?action=aoi&fundId='+fundId+"&boekjaar="+rec.data.boekjaar,
            root: 			'results',
            totalProperty: 	'total',
            sortInfo: {
                field: "datum", 
                direction: "ASC"
            },
            fields:	[
            {
                name: 'datum', 
                mapping: 'datum', 
                type: 'date', 
                dateFormat:"Y-m-d"
            },

            {
                name: 'quarter', 
                mapping: 'quarter'
            },

            {
                name: 'ebitda', 
                mapping: 'ebitda',
                type:'int'
            }
            ]
        });
        
        aoiStore.addListener('load', function() {
            new Ext.Panel({
                title: locale.ANNUAL_OPERATING_INCOME,
                renderTo: 'annualoperatingincomediagram'+fundId,
                //width : 505,
                width:250,
                height:190,
                //layout:'fit',
                items: {
                    xtype: 'columnchart',
                    store: aoiStore ,
                    ctCls : 'overflow-x',
                    width : aoiStore.data.length * 45,
                    boxMinWidth : aoiStore.data.length * 45,
                    xField: 'quarter',
                    yField: 'ebitda',
                    yAxis: new Ext.chart.NumericAxis({
                        displayName: 'Annual Operating Income',
                        snapToUnits: false,
                        labelRenderer : Ext.util.Format.numberRenderer('0.0/i')
                    }),
                    tipRenderer : function(chart, record, index, series){
                        if(series.yField == 'ebitda'){
                            return Ext.util.Format.number(record.data.ebitda, '0.0/i') + ' ' + record.data.quarter;
                        }
                    },
                    series: [{
                        type: 'column',
                        displayName: 'Annual Operating Income',
                        yField: 'ebitda',
                        style:{
                            fillColor:'0xB3E5EF'
                        }
                    }]
                }
            });
        });
        
        //Stock count
        var scStore = new Ext.data.JsonStore({
            autoLoad:		true,
            url: 			'graphData.php?action=sc&fundId='+fundId+"&boekjaar="+rec.data.boekjaar,
            root: 			'results',
            totalProperty: 	'total',
            sortInfo: {
                field: "datum", 
                direction: "ASC"
            },
            fields:	[
            {
                name: 'datum', 
                mapping: 'datum', 
                type: 'date', 
                dateFormat:"Y-m-d"
            },

            {
                name: 'quarter', 
                mapping: 'quarter'
            },

            {
                name: 'aantal_aandelen', 
                mapping: 'aantal_aandelen',
                type:'int'
            }
            ]
        });
        
        scStore.addListener('load', function() {
            new Ext.Panel({
                title: locale.STOCK_COUNT,
                renderTo: 'stockcountdiagram'+fundId,
                //width : 505,
                width:250,
                height:190,
                //layout:'fit',
                items: {
                    xtype: 'columnchart',
                    store: scStore ,
                    ctCls : 'overflow-x',
                    width : scStore.data.length * 45,
                    boxMinWidth : scStore.data.length * 45,
                    xField: 'quarter',
                    yField: 'aantal_aandelen',
                    yAxis: new Ext.chart.NumericAxis({
                        displayName: 'Stock count',
                        snapToUnits: false,
                        labelRenderer : Ext.util.Format.numberRenderer('0.0/i')
                    }),
                    tipRenderer : function(chart, record, index, series){
                        if(series.yField == 'aantal_aandelen'){
                            return Ext.util.Format.number(record.data.aantal_aandelen, '0.0/i') + ' ' + record.data.quarter;
                        }
                    },
                    series: [{
                        type: 'column',
                        displayName: 'Stock count',
                        yField: 'aantal_aandelen',
                        style:{
                            fillColor:'0xB3E5EF'
                        }
                    }]
                }
            });
        });
    }	
});