var formEntryData = new Ext.form.FormPanel({
	clientValidation: true,
	labelWidth: 125,
	frame: true,
	standardSubmit: true,
	bodyStyle:'padding:5px 5px 0',
	width: 650,
	defaultType: 'textfield',
	layout:'table',
	layoutConfig: {
		columns: 12
	},
	defaults: {
		bodyStyle:'border: 1px solid red'
	},
	items: [
		  
		/** Row 1: **/
		{xtype: 'label',		
		  html: '<img src=\"fileadmin/templates/renderflow2/calculator.png\" />',
		  rowspan: 3
		},
		{xtype: 'label',		
		  text: processor_combo_label
		},
		{xtype: 'label',
			style: {margin: '10px'},
			text: 'Ghz'
		}, 
		{xtype: 'label',
			style: {margin: '10px'},					
			text: 'Frames'
		}, 
		{xtype: 'label',
			text: hours_label
		}, 
		{xtype: 'label',			
			text: mins_label			
		}, 
		{xtype: 'label',
			text: secs_label
		}, 
		{xtype: 'button',
			rowspan: 3,
			text: 'Calcular',
			handler: function() {
				if(formEntryData.getForm().isValid()) {
				  onButtonClick();
				}
			}
		}, 
		{xtype: 'label',
			text: ''
		},
		{xtype: 'label',
			style: {margin: '10px'},
			text: resultdays_label
		}, 
		{xtype: 'label',
			style: {margin: '10px'},					
			text: resulthours_label
		}, 
		{xtype: 'label',
			style: {margin: '10px'},					
			text: resultprice_label
		},

		/** Row 2: **/
		{xtype: 'combo',
			id: 'combo',
			fieldLabel: 'processor_combo_label',
			mode: 'local',
			width:130,
			emptyText: processor_combo_hint,
			editable: false,
			triggerAction: 'all',
			store: [[1, '1x Core'], [2, '2x Cores'], [4, '4x Cores'], [8, '8x Cores']]
        },
        
		{xtype: 'numberfield',
			style: {margin: '10px'},
            fieldLabel: 'Ghz',
            id: 'ghz',
            minValue: 0,
            maxValue: 10,
            value: 2.5,
            allowNegative: false,
            width:35
		}, 
		{xtype: 'numberfield',
			style: {margin: '10px'},
			fieldLabel: 'Frames',
			id: 'frames',
            minValue: 0,
            width: 55,
            value: 100,
            allowNegative: false,
            allowDecimals: false
        }, 
		{xtype: 'numberfield',
            fieldLabel: 'Hours',
			id: 'hours',
            minValue: 0,
            maxValue: 99,
            width: 35,
            value: 0,
            allowNegative: false,
            allowDecimals: false
        }, 
		{xtype: 'numberfield',
            fieldLabel: 'Min.',
			id: 'mins',
            minValue: 0,
            maxValue: 59,
            width: 35,
            value: 10,
            allowNegative: false,
            allowDecimals: false
        }, 
		{xtype: 'numberfield',
            fieldLabel: 'Secs',
			id: 'secs',
            minValue: 0,
            maxValue: 59,
            width: 35,
            value: 0,
            allowNegative: false,
            allowDecimals: false
        }, 
		{xtype: 'label',
			text: yourworkstation_label
		},
		{xtype: 'textfield',
			style: {margin: '5px 0px 0px 10px'},
			id: 'calculatedTimeDaysWorkstation',
			readOnly: true,
			value: '0',
            width: 60								
		}, 
		{xtype: 'textfield',
			style: {margin: '5px 0px 0px 10px'},
			id: 'calculatedTimeWorkstation',
			readOnly: true,
			value: '0',
            width: 60								
		}, 
		{xtype: 'textfield',
			style: {margin: '5px 0px 0px 10px'},
			id: 'calculatedPriceWorkstation',
			readOnly: true,
			value: '0',
            width: 60											
		},

		/** Row 3 **/
		{xtype: 'label',
			text: ''
		},
		{xtype: 'label',
			text: ''
		},
		{xtype: 'label',
			text: ''
		},
		{xtype: 'label',
			text: ''
		},
		{xtype: 'label',
			text: ''
		},
		{xtype: 'label',
			text: ''
		},
		{xtype: 'label',
			text: 'RenderFlow:'
		},
		{xtype: 'textfield',
			style: {margin: '5px 0px 0px 10px'},
			id: 'calculatedTimeDaysRenderflow',
			readOnly: true,
			value: '0',
            width: 60								
		}, 
		{xtype: 'textfield',
			id: 'calculatedTimeRenderflow',
			style: {margin: '5px 0px 0px 10px'},									
			readOnly: true,
			value: '0',
            width: 60											
		}, 
		{xtype: 'textfield',
			id: 'calculatedPriceRenderflow',
			style: {margin: '5px 0px 0px 10px'},		
			readOnly: true,
			value: '0',
            width: 60										
		}
    ],
	buttons: []
});

function onButtonClick() {
	var combo = formEntryData.findById('combo');
	var ghzField = formEntryData.findById('ghz');
	var framesField = formEntryData.findById('frames');
	var hoursField = formEntryData.findById('hours');
	var minsField = formEntryData.findById('mins');
	var secsField = formEntryData.findById('secs');
	
	var totalGhz = combo.getValue() * ghzField.getValue();
	var avgHour = transformToHours(hoursField.getValue(), minsField.getValue(), secsField.getValue());
	
	estimatedTimeOnWorkstation = avgHour * framesField.getValue();	
	var daysWorkstation = Math.floor(estimatedTimeOnWorkstation / 24);
	setTimeValueResult('calculatedTimeDaysWorkstation', daysWorkstation);

	var hoursWorkstation = estimatedTimeOnWorkstation - (daysWorkstation * 24);
	setTimeValueResult('calculatedTimeWorkstation', hoursWorkstation);

	estimatedTimeOnRenderflow = ((estimatedTimeOnWorkstation * totalGhz) / renderflowPower) +1;
	daysRenderflow = Math.floor(estimatedTimeOnRenderflow / 24);
	setTimeValueResult('calculatedTimeDaysRenderflow', daysRenderflow);
	hoursRenderflow = estimatedTimeOnRenderflow - (daysRenderflow * 24);
	setTimeValueResult('calculatedTimeRenderflow', hoursRenderflow);
	
	estimatedGhz = avgHour * framesField.getValue() * totalGhz;
	estimatedPriceOnRenderflow = estimatedGhz * tariff;
	setPriceValueResult('calculatedPriceRenderflow', estimatedPriceOnRenderflow);
	
	totalPrice = estimatedTimeOnWorkstation * 0.06;
	setPriceValueResult('calculatedPriceWorkstation', totalPrice);
}

function setTimeValueResult(field, value) {
	f = formEntryData.findById(field);
	f.setValue(value.numberFormat('0,0.0'));
}

function setPriceValueResult(field, value) {
	f = formEntryData.findById(field);
	f.setValue(value.numberFormat('0,0.00'));	
}

function transformToHours(h, m, s) {
	
	var totalSecs = s;
	totalSecs += m * 60;
	totalSecs += h * 3600;
	var totalHours = totalSecs / 3600;
	return totalHours;
}

Ext.onReady(function() {
	var panel = new Ext.Panel({
		border: false,
		items: [formEntryData, formEntryData]
    });
	
    panel.render('dr');
	var combo = formEntryData.findById('combo');
	combo.setValue("2");
});