////////////////////////////////////////////////////////////////////////////////////////////////////////
// Calc.calc_13.result
////////////////////////////////////////////////////////////////////////////////////////////////////////
// Klasa reprezentuje sekcję wyników obliczeniowych
////////////////////////////////////////////////////////////////////////////////////////////////////////
Ext.ns('Calc.calc_13.result');

Calc.calc_13.result = Ext.extend(Calc.result, {
	title: 'Podsumowanie',
	initComponent: function() {
		Ext.apply(this, {
		  items: [{
	        xtype: 'panel',
	        cls: 'resultPanel',
	        border: false,
	        html: ['<div class="looseData">',
	                '<div class="left" style="width: 200px">',
	                  'Rata kredytu<br />',
	                  'Kwota do spłaty<br /><br />',
	                  'Rata + oszczędzanie<br />',
	                  'Spłata kredytu w<br />',
	                  'Zainwestowana kwota',
	                '</div>',
	                '<div class="right" style="width: 180px"> ',

	                //Dane z resonse lądują tutaj - zmienić nazwy zmiennych
	                  Calc.results.inne.rata +'<span class="label"> zł</span><br />',
	                  Calc.results.inne.raty_suma_oczekiwana+'<span class="label"> zł</span><br /><br />',
	                  Calc.results.inne.rata_oszczedzanie+'<span class="label"> zł</span><br />',
	                  Calc.results.inne.miesiac_splaty+'<span class="label"> m-c</span><br />',
	                  Calc.results.inne.raty_suma+'<span class="label"> zł</span>',
	                '</div>',
	                '<div class="right" style="width: 130px"><br /><b>Legenda:</b> <br />',
	                  '<span class="label" style="color: orange"> &nbsp; --- Kredyt</span><br />',
	                  '<span class="label" > &nbsp; --- Lokata</span><br />',
	                  '<span class="label" style="color: violet"> &nbsp; --- Oszczędzanie</span><br />',
	                  '<span class="label" style="color: red"> &nbsp; --- Rata + oszczędzanie</span>',
	                '</div>',
	               '</div>'
	          ].join(' ')
	      },{
        xtype: 'elem.flashContent',
        floats: true
      },{
	      	//////////////////////////////////////////////////////////////////////////////////////////
	      	// Tabelka rozwijana
	      	//////////////////////////////////////////////////////////////////////////////////////////
        	xtype: 'grid',
		    disableSelection : true,
		    id: 'grid1',
		    autoHeight: true,
		    //draggable: false,
		    enableColumnHide: false,
		    hideHeaders: true,
		    enableColumnMove: false,
		    enableColumnResize: false,
		    enableDragDrop: false,
		    enableHdMenu: false,
		    footer: false,
		    stripeRows: true,
		    style: 'margin-left: 8px',
			trackMouseOver: false,
		    width: 690,
	      	header: true,
	      	//title: 'Tabela',
			  baseCls: 'calc-result-grid',
			  // deinicja pól wierszy jakie wylądują w gridzie, ważne aby ich ilość się zgadzała z ilością elementów w response!
			  ds: new Ext.data.SimpleStore({fields: [{
			  		name: 'miesiac'
				  },{
		            name: 'rataCalkowita'
		          },{
		            name: 'saldoZadluzenia'
		          },{
			  		name: 'wplataRegularna'
				  },{
		            name: 'wartoscRegularnych'
		          },{
		            name: 'wartoscJednorazowych'
		          },{
		            name: 'wartoscLaczna'
		          }], data: []}),
		        //definicja kolumn grida - pole header nie ma znaczenia (i tak się nie wyświetla),
				//dataIndex ma być taki sam jak w sekcji ds powyżej, width - chyba wiadomo ;)
			    columns: [
			      {header: 'Miesiąc',  dataIndex:'miesiac', width: 70},
		          {header: 'Rata całkowita',  dataIndex:'rataCalkowita', width: 80},
		          {header: 'Saldo zadłużenia', dataIndex:'saldoZadluzenia', width: 110},
		          {header: 'Wpłata regularna',  dataIndex:'wplataRegularna', width: 110},
		          {header: 'Wartość oszczędności regularnych',  dataIndex:'wartoscRegularnych', width: 100},
		          {header: 'Wartość oszczędności jednorazowych', dataIndex:'wartoscJednorazowych', width: 100},
		          {header: 'Łączna wartość oszczędności', dataIndex:'wartoscLaczna', width: 118}
		        ],
		     plugins:[{
			 	 init: function(grid){
			 	 	grid.store.on('load', function(){

            //dokleja nagłówek grida
            //tutaj znajdują się właściwe header'y grida. Zadbać o odpowiednią ilość i szerokość komorek, wpisać odpowiednie opisy kolumn
            if(Calc.expandedGrids['grid1']!=[])	{
				var scroller = Ext.query('.x-grid3-scroller',grid.body.dom)[0];
				this.gridHeader = Ext.DomHelper.insertBefore(scroller, ['<div><table class="result-grid-header"><thead>',
					'<tr class="result-grid-lower-header">',
					'<td style="width: 50px;" class="boder-left">Miesiąc</td>',
					'<td style="width: 110px;">Rata całkowita</td>',
					'<td style="width: 100px;" class="boder">Saldo zadłużenia</td>',
					'<td style="width: 100px;" class="boder">Wpłata regularna</td>',
					'<td style="width: 110px;" >Wartość oszczędności regularnych</td>',
					'<td style="width: 110px;" class="boder">Wartość oszczędności jednorazowych</td>',
					'<td style="width: 106px;" class="boder-right">Łączna wartość oszczędności</td></tr>',
					'</thead></table></div>'
					].join(' '));
				}else{
					this.gridHeader.parentNode.removeChild(this.gridHeader);
				}

                    var expander = grid.ownerCt.findByType('elem.expand')[0];
                    if(Calc.gridState == 'expand') expander.changeText('Zwiń tabelę');
                    else if(Calc.gridState == 'collapse') expander.changeText('Pokaż pełne zestawienie');
              });

				 }
			 }]
      },{
      	//////////////////////////////////////////////////////////////////////////////////////////
      	// Element do rozwiajania tabelki
      	//////////////////////////////////////////////////////////////////////////////////////////
        xtype: 'elem.expand',
	    expandCmp: 'grid1'
      }]

		});
		Calc.calc_13.result.superclass.initComponent.apply(this, arguments);
		this.addEvents ( 'afterrender' );
	},
	afterRender: function(){
		Calc.calc_13.result.superclass.afterRender.call(this);
		this.fireEvent('afterrender', this);
	}

});

Ext.reg('calc_13.result', Calc.calc_13.result);