////////////////////////////////////////////////////////////////////////////////////////////////////////
// Calc.calc_04.input
////////////////////////////////////////////////////////////////////////////////////////////////////////
// Klasa reprezentuje sekcję wprowadzania danych użytkownika
////////////////////////////////////////////////////////////////////////////////////////////////////////
Ext.ns('Calc.calc_04.input');

Calc.calc_04.input = Ext.extend(Calc.input, {
	title: 'Kalkualtor korzyści z konsolidacji',
	border: false,
	initComponent: function() {
		Ext.apply(this, {
			header: true,
			id: 'input-section',
			items: [{
				xtype: 'inputPanel',
				baseCls: 'calc-04-input-subsection',
				title: 'kredyty',
				header: false,
				html: '',
				items: [{
					xtype: 'panel',
					header: false,
					border: false,
					html: [
						'Wybierz kredyt, który Cię dotyczy i zmień domyślne dane. Jeśli dany kredyt Cię nie dotyczy kliknij na ikonę ',
						'<img alt="zamknij" src="'+ Calc.Path.Root +'_img/btn.close.gif"/><br/>Możesz również dodać kredyt klikając w <span class="icon-add">dodaj kredyt</span>'
					].join(' ')
				},{
			          xtype: 'panel',
			          border: false,
			          baseCls: 'calc-04-loan-wrapper',
			          header: true,
			          footer: true,
			          //title: 'nara',
			          plugins: [{
			            init: function(panel){
			              panel.on('render', function(){
			                  Ext.DomHelper.insertHtml('afterBegin', this.header.dom, [
			                    '<div class="tab-add-loan-top"><div class="add-loan">',
			                    '<a href="#">dodaj kredyt</a></div></div>'
			                  ].join(' '));
			                  Ext.DomHelper.insertHtml('afterBegin', this.footer.dom, [
			                    '<div class="tab-add-loan-bottom"><div class="add-loan-bottom">',
			                    '<a href="#">dodaj kredyt</a></div></div>'
			                  ].join(' '));

			                  var topButton = Ext.query('.add-loan a', this.dom)[0];
			                  topButton = new Ext.Element(topButton);
			                  topButton.on('click', function(evt){
  			                	evt.stopEvent();
  			                	this.add({xtype: 'calc_04.loanPanel', loanType: 1});
  			                	this.doLayout();
        							  	return false;
        							  },this);

							  var bottomButton = Ext.query('.add-loan-bottom a', this.dom)[0];
			                  bottomButton = new Ext.Element(bottomButton);
			                  bottomButton.on('click', function(evt){
  			                	evt.stopEvent();
  			                	this.add({xtype: 'calc_04.loanPanel', loanType: 1});
  			                	this.doLayout();
        							  	return false;
      							    },this);

			              });
			            }
			          }],
			          items: [{
							xtype: 'calc_04.loanPanel',
							loanType: 1  //1 gotówkowy, 2 samochodowy, 3 ror, 4 karta kredytowa, 5 mieszkaniowy
						},{
							xtype: 'calc_04.loanPanel',
							loanType: 2  //1 gotówkowy, 2 samochodowy, 3 ror, 4 karta kredytowa, 5 mieszkaniowy
						}]
	        }

        	]
			},{
			  	//-----------------------------HR-------------------------------
				xtype: 'panel',
				border: false,
				baseCls: 'hr',
				html: '<div class="horizontal-dot-separator margin"/>'
				//-----------------------------/HR-------------------------------
			},{
				xtype: 'inputPanel',
				title: 'Kredyt konsolidacyjny',
				html: '',
				items: [{
					//-----------------------------OKRES SLIDER-------------------------------
					xtype: 'elem.slider',
					title: 'Okres spłaty kredytu konsolidacyjnego',
					valueName: 'okres',
					yearsToMonths: true,
					labels: Calc.sliderData.okres,
					initValue: Calc.Defaults.values.okres
					//-----------------------------/OKRES SLIDER-------------------------------
				},{
					xtype: 'panel',
					labelAlign: 'left',
					border: true,
					baseCls: 'calc-form',
					bodyStyle:'padding:5px',
			        //width: 500,
			        items: [{
			            layout:'column',
			            baseCls: 'calc-form',
			            border: false,
			            items:[{
			                columnWidth:.4,
			                layout: 'form',
			                baseCls: 'calc-form',
			                labelWidth: 210,
			                border: false,
			                items: [{
			                    xtype:'elem.numberfield',
			                    width: 40,
			                    fieldLabel: 'Oprocentowanie kredytu konsolidacyjnego',
			                    id: 'oprocentowanie',
			                    name: 'oprocentowanie',
			                    value: Calc.Defaults.values.oprocentowanie,
                                plugins: Calc.Labels.proc                                
                            }]
			            }]
			        }]
				}]
			}]
		});
		Calc.calc_04.input.superclass.initComponent.apply(this, arguments);
		this.addEvents ( 'afterrender' );
	},
	afterRender: function(){
		Calc.calc_04.input.superclass.afterRender.call(this);
		this.fireEvent('afterrender', this);
	}

});

Ext.reg('calc_04.input', Calc.calc_04.input);


/*************************************************************************************/


Calc.calc_04.loanPanel = Ext.extend(Ext.Panel, {
      border: false,
      cls: 'multiInput',
	  plugins: {
			init: function(curPanel){
				curPanel.on('afterrender', function(comp){
					var closeEl = Ext.query('.remove-loan a', this.body.dom)[0];
					closeEl = new Ext.Element(closeEl);
					closeEl.on('click', function(evt){
						evt.stopEvent();
						if(this.ownerCt.getComponent(1)){
							this.ownerCt.remove(this);
							this.destroy();
						}
					}, this);
				});
			}
	  },
	  initComponent:function() {
	  	  Ext.apply(this, {

			  html: [
		      '<div class="loan">',
		        '<div class="loan-col-left">',
		          '<div class="remove-loan">',
		            '<a class="tr" href="#">Usuń</a>',
		          '</div>',
		        '</div>',
		        '<div class="loan-col-right">',
		          '<div class="loan-top">',
		            '<div class="loan-left">',
		              '<div class="input-wrapper">',
		              '<div class=input style="float: left; padding: 0 5px 0;"></div>',
		              '</div>',
		            '</div>',
		            '<div class="loan-right">',
		              '<div class="input-wrapper">',
		              '<div style="clear:both;float:right"><label>Kwota kredytu pozostała do spłaty</label>',
		                '<div class=input style="float: left; padding: 0 5px 0;"></div>',
					  '<span>zł</span>',
					    '</div>',
		              '</div>',
		            '</div>',
					'<div style="clear:both;"></div>',
		          '</div>',
		          '<div class="loan-separator"></div>',
		          '<div class="loan-bottom">',

		            '<div class="loan-left sub"><span>Wypełnij oprocentowanie i czas do końca spłat</span>',
					  '<div class="li">',
					  	'<div class="input-wrapper">',
		              	  '<label>Obecne oprocentowanie spłacanego kredytu</label>',
		              	  '<div class=input style="float: left; padding: 0 5px 0;width:48px;"></div>',
		              	  '<span>%</span>',
		              	'</div>',
		              '</div>',
					  '<div style="clear:both;"></div>',
		              '<div class="li">',
					  	'<div class="input-wrapper">',
		              	  '<label>Ilość miesięcy do spłaty kredytu</label>',
		              	  '<div class=input style="float: left; padding: 0 3px 0;width:52px;"></div>',
		              	  '<span>msc</span>',
		              	'</div>',
		              '</div>',
		            '</div>',

		            '<div class="loan-right sub"><span>Lub kwotę miesięcznej spłaty</span>',
		              '<div class="li">',
					  	'<div class="input-wrapper">',
		              	  '<label>Miesięczna spłata</label>',
		              	  '<div class="input" style="float:left;padding:0 1px 0;width:52px;"></div>',
		              	  '<span>zł</span>',
		              	'</div>',
		              '</div>',
		            '</div>',

		          '</div>',
				  '<div style="clear:both;"></div>',
		        '</div>',
				'<div style="clear:both;"></div>',
		      '</div>',
			  '<div style="clear:both;"></div>',
		    '</div>'
		     ].join(' ')

		  });


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

		  var inputs = Ext.query('.input', this.el.dom);
		  var rightSubpanel = Ext.query('.loan-bottom .loan-right', this.el.dom)[0];

		  this.combo = new Calc.elem.combo({
		  	fieldLabel: 'Typ kredytu',
        store: [[1,'Gotówkowy'],
            	[2,'Samochodowy'],
			    [3,'ROR'],
            	[4,'Karta kredytowa'],
            	[5,'Mieszkaniowy']],
  			hiddenName: 'typKredytu',
  			width: 120,
  			renderTo: inputs[0]
		  });
		  this.kwotaPozostala = new Calc.elem.numberfield({ renderTo: inputs[1], width: 60 });
		  this.oprocentowanie = new Calc.elem.numberfield({ renderTo: inputs[2] , maxValue: 100, maxText: 'Wartość musi się zawierać między 0 a 100'});
		  this.miesiace = new Calc.elem.numberfield({ renderTo: inputs[3] });
		  this.rata = new Calc.elem.numberfield({ renderTo: inputs[4], allowBlank: true, width: 40 });

		  this.rightPanel = new Ext.Element(rightSubpanel);

		  this.combo.setValue(this.loanType);
		  this.adjustInputs();

		  this.combo.on('select', function(){
        this.adjustInputs();
      }, this);


      this.fireEvent('afterrender', this);
   },
   adjustInputs: function(){
      var type = this.combo.getValue();
      this.kwotaPozostala.setValue( Calc.Defaults.values[ 's' +type ]   );
      this.oprocentowanie.setValue( Calc.Defaults.values[ 'r' +type ] );
      if ( type!=3 && type!=4 ) {
        this.miesiace.setValue( Calc.Defaults.values['n' +type ]  );
        this.rightPanel.show();
      }
      else this.rightPanel.hide();
   }

});

Ext.reg('calc_04.loanPanel', Calc.calc_04.loanPanel);