window.addEvent('domready', function() {
    new InschrijfFormulier();
});

/* 
 * Inschrijf formulier
 */
var InschrijfFormulier = new Class({
    
    initialize : function() {
        if (!$('form-ride-for-the-roses')) return;

        $('form-ride-for-the-roses').addEvent('submit', function(e) {
            return this.validate();
        }.bind(this));
    },

    validateField : function(id, message) {
        var error = '';

        if (id == 'shirtmaat') {
            if ($$('#form-shirtmaat :checked').length == 0) {
                error = '- ' + message + '\n';
                $$('#form-shirtmaat label').setStyle('color', '#F00')
                $('label-shirtmaat').setStyle('color', '#F00')
                
                $$('#form-shirtmaat input').addEvent('click', function() {
                    $$('#form-shirtmaat label').setStyle('color', '#000')
                    $('label-shirtmaat').setStyle('color', '#000')
                });
            } else {
                $$('#form-shirtmaat label').setStyle('color', '#000')
                $('label-shirtmaat').setStyle('color', '#000')
            }
        } else if (id == 'betaalwijze') {
            if ($$('#form-betaalwijze :checked').length == 0) {
                error = '- ' + message + '\n';
                $$('#form-betaalwijze label').setStyle('color', '#F00')
                $('label-betaalwijze').setStyle('color', '#F00')
                
                $$('#form-betaalwijze input').addEvent('click', function() {
                    $$('#form-betaalwijze label').setStyle('color', '#000')
                    $('label-betaalwijze').setStyle('color', '#000')
                });
            } else {
                $$('#form-shirtmaat label').setStyle('color', '#000')
                $('label-shirtmaat').setStyle('color', '#000')
            }
        } else {
            if ($(id).get('value') == '') {
                error = '- ' + message + '\n';
                $(id).setStyle('border-color', '#F00');
                $(id).getPrevious('label').setStyle('color', '#F00');
                $(id).addEvent('keydown', function() {
                    if (this.get('value') != '') {
                        $(id).setStyle('border-color', '#000');
                        $(id).getPrevious('label').setStyle('color', '#000');
                    } else {
                        $(id).setStyle('border-color', '#F00');
                        $(id).getPrevious('label').setStyle('color', '#F00');
                    }
                });
            } else {
                $(id).setStyle('border-color', '#000');
                $(id).getPrevious('label').setStyle('color', '#000');
            }
        }

        return error;
    },

    validate : function() {
        var errors = '';

        errors += this.validateField('voorletters', 'Vul de voorletters in.');
        errors += this.validateField('achternaam', 'Vul een achternaam in.');
        errors += this.validateField('geboortedatum', 'Vul een geboortedatum in.');
        errors += this.validateField('adres', 'Vul een adres in.');
        errors += this.validateField('postcode', 'Vul een postcode in.');
        errors += this.validateField('woonplaats', 'Vul een woonplaats in.');
        errors += this.validateField('emailadres', 'Vul een e-mailadres in.');
        errors += this.validateField('shirtmaat', 'Geef een shirtmaat op.');
        errors += this.validateField('betaalwijze', 'Geef een betaalwijze op.');

        if (errors != '') {
            alert(errors);
            return false;
        } else {
            return true;
        }
    }
});