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

Calc.calc_06.input = Ext.extend(Calc.input, {
	title: 'Złotówka czy waluta?',
	initComponent: function() {
		Ext.apply(this, {
			id: 'input-section',
			items: [{
			  //input subsection
				xtype: 'inputPanel',
				title: 'Warunki kredytu w PLN',
				html: '',
				items: [{
					//-----------------------------KWOTA SLIDER-------------------------------
					xtype: 'elem.slider',
					title: 'Jaka kwota kredytu Cię interesuje?',
					valueName: 'kwotaPozostala',
					labels: Calc.sliderData.kwota,
					initValue: Calc.Defaults.values.kwota
					//-----------------------------/KWOTA SLIDER-------------------------------
				},{
					//-----------------------------OKRES SLIDER-------------------------------
					xtype: 'elem.slider',
					title: 'Okres spłaty',
					valueName: 'okresSplaty',
					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:.45,
			                layout: 'form',
			                //labelAlign: 'right',
			                baseCls: 'calc-form',
			                labelWidth: 210,
			                border: false,
			                items: [{
			                    xtype:'elem.numberfield',
			                    width: 50,
			                    fieldLabel: 'Oprocentowanie kredytu',
			                    id: 'oprocentowanie',
			                    name: 'oprocentowanie',
			                    value: Calc.Defaults.values.oprocentowanie_pln,
                                plugins: Calc.Labels.proc
                            }]
			            }, {
			            	xtype: 'panel',
			            	columnWidth:.5,
			                layout: 'table',
			                baseCls: 'radio-table',
			                border: false,
			                layoutConfig: {
			                    columns: 5
			                },
			                //anchor: '100%',
			                defaults: {
			                    border: false,
			                    layout: 'form',
			                    labelWidth: 40,
			                    style: {
			                        paddingRight: '10px',
                                    paddingLeft: '3px'
			                    }
			                },
			                items: [{
			                    xtype: 'label',
			                    text: 'Rodzaj raty:'
			                }, {
                                xtype: 'radio',
                                checked: true,
                                name: 'rodzajRaty',
                                id: 'rodzajRatyR',
                                inputValue: 'rowne',
                                hideLabel: true
			                }, {
			                    xtype: 'label',
			                    text: 'równe',
                                forId: 'rodzajRatyR'
                            }, {
                                xtype: 'radio',
                                name: 'rodzajRaty',
                                id: 'rodzajRatyM',
                                inputValue: 'malejace',
                                hideLabel: true
			                }, {
			                    xtype: 'label',
			                    text: 'malejąca',
                                forId: 'rodzajRatyM'
                            }]



			            }]
			        }]
				}]

			},{
			  	//-----------------------------HR-------------------------------
				xtype: 'panel',
				border: false,
				baseCls: 'hr',
				html: '<div class="horizontal-dot-separator margin"/>'
				//-----------------------------/HR-------------------------------
			},{
        xtype: 'inputPanel',
				title: 'Kredyt w obcej walucie',
				html: '',
				items: [{
          xtype: 'panel',
					labelAlign: 'left',
					border: true,
					baseCls: 'calc-form',
					bodyStyle:'padding:5px',
			        //width: 500,
			        items: [{
			            layout:'column',
			            baseCls: 'calc-form',
			            border: false,
			            items:[{
			                columnWidth:.5,
			                layout: 'form',
			                //labelAlign: 'right',
			                baseCls: 'calc-form',
			                labelWidth: 210,
			                border: false,
			                items: [{
			                	xtype: 'elem.combo',
			                	fieldLabel: 'Wybierz walutę',
                        		store: [[1,'CHF (Szwajcaria)'],
                                  [2,'EUR (UE)'],
                                  [3,'GBP (W. Brytania)'],
                                  [4,'JPY (Japonia)'],
                                  [5,'USD (USA)']],
                        		hiddenName: 'waluta',
                        		id: 'waluty',
                        		value: 1
			                },{
			                    xtype:'elem.numberfield',
			                    width: 40,
			                    fieldLabel: 'Oprocentowanie kredytu',
			                    id: 'oprocentowanieWaluta',
			                    name: 'oprocentowanieWaluta',
                                value: Calc.Defaults.values.oprocentowanie_chf,
                                plugins: Calc.Labels.proc
                            },{
			                    xtype:'elem.numberfield',
			                    width: 50,
			                    fieldLabel: 'Kurs między walutą a PLN',
			                    id: 'kurs',
                                decimalPrecision: 4,
                                allowBlank:  false,
                                validator: function(){
									var panel = Ext.getCmp('zmianyPanel');
									if(panel) return panel.checkUniqe();
									else return true;

								},
                                name: 'kurs'
			                },{
			                    xtype: 'elem.combo',
			                	  fieldLabel: 'Liczba zmian kursu waluty w okresie spłaty kredytu',
		                          store: [[0,'brak'],[1,1],[2,2],[3,3],[4,4],[5,5]],
		                          hiddenName: 'zmianyKursu',
		                          value: 0
			                }]
			            }]
						  }]
        }]
      },{
        xtype: 'inputPanel',
        title: 'zmiany',
        id: 'zmianyPanel',
        header: false,
        html: '',
        //border: false,
        //baseCls: 'changes-panel',
        id: 'changesPanel',
        checkUniqe: function(val){
			var panels = this.find('xtype', 'calc_06.changePanel');
			var months = [];
			for(var i=0; i<panels.length; i++){
				months.push(panels[i].miesiac.getValue());
			}
			var tmpArr = [];
			var unique = true;
			for(var i=0; i<months.length; i++){
				if(months[i]){
					if( tmpArr.indexOf(months[i]) == -1 ){
						tmpArr.push(months[i]);
					}else unique = false
				}
			}
			var field = Ext.getCmp('kurs');
			if (unique) {
				field.clearInvalid();
				return true;
			}
			else {
				field.markInvalid('miesiące zmian muszą być unikalne');
				return false;
			}
		}
      }]
		});
		Calc.calc_06.input.superclass.initComponent.apply(this, arguments);
	},
	afterRender: function(){
		Calc.calc_06.input.superclass.afterRender.call(this);

		var oprocentowanie = this.find('id','oprocentowanieWaluta')[0];
		var aValNames = {  1: 'chf', 2: 'euro', 3: 'jen', 4: 'pln', 5: 'usd' };

		var waluty = this.find('id','waluty')[0];
		waluty.on('select', function(){
			oprocentowanie.setValue( Calc.Defaults.values[ 'oprocentowanie_' + aValNames[ waluty.getValue() ] ]   );
		    });


	    var changes = this.find('xtype','elem.combo')[1];
	    var panel = this.find('id', 'changesPanel')[0];
	    var components;
	    changes.on('select', function(){
	      components = panel.find('xtype', 'calc_06.changePanel');
	      for(var i=0; i<components.length; i++){
	        panel.remove(components[i]);
	      }

	      for(var i=0; i<this.getValue(); i++){
	        panel.add({ xtype: 'calc_06.changePanel'});
	      }
	      panel.doLayout();



	    });

	}

});

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



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

Calc.calc_06.changePanel = Ext.extend(Ext.Panel, {
      border: false,
      cls: 'multiInput',

	  initComponent:function() {
	  	  Ext.apply(this, {

			  html: [
		      '<div class="change" style="height:26px;">',
		        '<div class="input-wrapper" style="float:left">',
		        '<label style="float: left; width: 210px; text-align:right;padding-top:4px;">Miesiąc</label>',
		        '<div class="changeMonthInput input" style="float: left; padding: 0 5px 0;"></div>',
		        '</div>',
		        '<div class="input-wrapper" style="float:left">',
		        '<label style="float: left;margin-left:20px;padding-top:4px;">Kurs</label>',
		        '<div class="changeKursInput input" style="float: left; padding: 0 5px 0;"></div>',
		        '</div>',
		      '</div>'
		     ].join(' ')

		  });


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

		  var inputs = Ext.query('.input', this.el.dom);
		  this.miesiac = new Calc.elem.numberfield({ renderTo: inputs[0], width: 50 });
		  this.kurs = new Calc.elem.numberfield({ renderTo: inputs[1], width: 50 });

		  var that = this;
		  this.miesiac.on('change', function(){
			 that.ownerCt.checkUniqe( this.getValue() );
		  });

      this.fireEvent('afterrender', this);
   }

});

Ext.reg('calc_06.changePanel', Calc.calc_06.changePanel);