var store;


// Called after store load. Can be used to do some after processing.
function chart_callback(store,records,options) {
  if (Ext.fly('varmeudgift-summary-text')) {
    if (store.data.items[1]) {
      Ext.fly('varmeudgift-summary-text').dom.innerHTML = store.data.items[1].data.cost;
    }
  }
}

Ext.onReady(function(){
  if (Ext.fly('chart-container')) {    
    var record = Ext.data.Record.create([{name: 'name'},{name: 'cost',type: 'int'}]);

    store = new Ext.data.Store({remoteSort: true,
                                autoLoad: true,
                                reader: new Ext.data.JsonReader({root: 'root',totalProperty: 'results'},record),
                                proxy: new Ext.data.HttpProxy({method: 'GET',url: '/steps/steps/update_chart',success:function(){}})
                                   });

    store.on('load',chart_callback);

    if (Ext.fly('chart-container')) {

      new Ext.Panel({
          id:'chart',
          iconCls:'chart',
          frame:false,
          border:false,
          renderTo: 'chart-container',
          width:364,
          height:182,
          layout:'fit',

          items: {
              xtype: 'columnchart',
              store: store,
              url:'../ext/resources/charts.swf',
              xField: 'name',
              yAxis: new Ext.chart.NumericAxis({
                  displayName: 'Cost',
                  labelRenderer : Ext.util.Format.numberRenderer('0.0/i')
              }),
              tipRenderer : function(chart, record, index, series){
                var value ='\nÅrlig varmeudgift: ' + Ext.util.Format.number(record.data.cost, '0.0/i') + " kr.";
                if (index == 0) {
                 return "Varmeomkostninger i nutidskroner da huset blev opført \nbaseret på primære varmekilde." + value;
                } else if (index == 1) {
                  return "Varmeomkostninger i dag baseret på de angivne varmekilder.\nHvis elvarme indgår, er der fratrukket standardforbrug\nfor husets personer." + value;
                } else if (index == 2) {
                  return "Varmeomkostninger ved energioptimering i nutidskroner\n baseret på primære varmekilde." + value;
                } else if (index == 3) {
                  return "Varmeomkostning ved tilsvarende boligareal og opvarmningssystem\ni nutidskroner baseret på primære varmekilde - huset opført efter \nbygningsreglementet gældende for 2015." + value;
                }
              },
              chartStyle: {
                  background:
                  {
                   image: "/images/layout/content_backgrounds.png",
                   mode: "repeat",
                   color: 0xdfeef4
                  },
                  padding: 5,
                  animationEnabled: true,
                  font: {
                      name: 'Arial',
                      color: 0x222222,
                      size: 11
                  },
                  dataTip: {
                      padding: 5,
                      border: {
                          color: 0xbfbfbf,
                          size:1
                      },
                      background: {
                          color: 0xffffff,
                          alpha: .9
                      },
                      font: {
                          name: 'Arial',
                          color: 0x184f6a,
                          size: 11,
                          bold: false
                      }
                  },
                  xAxis: {
                      color: 0x69aBc8,
                      majorTicks: {color: 0x69aBc8, length: 4},
                      minorTicks: {color: 0x69aBc8, length: 2}
                  },
                  yAxis: {
                      color: 0x69aBc8,
                      minorUnit: 1000,
                      maximum: 10000,
                      majorTicks: {color: 0x69aBc8, length: 4},
                      minorTicks: {color: 0x69aBc8, length: 2},
                      majorGridLines: {size: 1, color: 0xdfe8f6}
                  }
              },
              series: [{
                  type: 'column',
                  displayName: 'Cost',
                  yField: 'cost',
                  style: {
                      image:'/images/bar.gif',
                      size:30,
                      mode: 'stretch',
                      color:0x99BBE8
                  }
              }]
          }
      });
    }
  }
});