var BmiCalc = new Class({
    initialize: function(calcEl){
        this.calcEl = calcEl;
        this.buildHtml();
        this.addEvents();
    },
    buildHtml: function(){
        this.calcEl.set( 'html','\
<h2>Kalkulator BMI</h2>\
<p>Waga [kg]: <input style="float: right; width: 50px;" type="text" id="bmi_calc_weight"></input></p>\
<p>Wzrost [m lub cm]: <input style="float: right; width: 50px;" type="text" id="bmi_calc_height"></input></p>\
<p>BMI: <input style="float: right; width: 50px;" readonly="readonly" type="text" id="bmi_calc_bmi"></input></p>\
'
        );
        
        this.weight = document.id('bmi_calc_weight');
        this.height = document.id('bmi_calc_height');
        this.bmi = document.id('bmi_calc_bmi');
    },
    addEvents: function(){
        this.weight.addEvent(
            'keyup', function(event){
                event.stopPropagation();
                this.updateBmi();
            }.bind(this)
        );
        this.height.addEvent(
            'keyup', function(event){
                event.stopPropagation();
                this.updateBmi();
            }.bind(this)
        );
    },
    updateBmi: function() {
        var weight = this.weight.get('value');
        weight = weight.replace(',', '.').toFloat();
        var height = this.height.get('value');
        height = height.replace(',', '.').toFloat();
        
        if (isNaN(weight) || isNaN(height)) {
            var bmi = '';
        } else {
            if (height > 3) {
                height = height/100;
            }

            var bmi = (weight/(height*height)).round(2);
        }
        this.bmi.set('value', bmi);
    }
    
});

window.addEvent('domready', function(){
    var bmiCalcEl = document.id('bmi_calc');
    if (bmiCalcEl) {
        window.bmiCalc = new BmiCalc(bmiCalcEl);
    }
});