box.dom(document).ready(function() {

    box.ui('form').addPatterns({
        birthdate: /^[0-9]{2}\/[0-9]{2}\/[0-9]{4}$/
    });

    box.ui('form').create({
        element: '#joinUsForm'
    }).addReplacement().mustValidate(function(form) {

        form.field('firstname').mustValidate(function(field) {
            if (field.isEmpty()) {
                return l10n.errors.required.EM_SW_04;
            }
        });

        form.field('lastname').mustValidate(function(field) {
            if (field.isEmpty()) {
                return l10n.errors.required.EM_SW_05;
            }
        });

        form.field('zip').mustValidate(function(field) {
            if (field.isEmpty()) {
                return l10n.errors.required.EM_SW_12;
            }
        });

        form.field('city').mustValidate(function(field) {
            if (field.isEmpty()) {
                return l10n.errors.required.EM_SW_13;
            }
        });

        form.field('phone').mustValidate(function(field) {
            if (field.isEmpty()) {
                return l10n.errors.required.EM_SW_14;
            }
        });

        form.field('email').mustValidate(function(field) {
            if (field.isEmpty()) {
                return l10n.errors.required.EM_SW_06;
            } else if (!field.isMatching('email')) {
                return l10n.errors.required.EM_SW_06;
            }
        });

        form.field('birthdate').mustValidate(function(field) {
            if (field.isEmpty() || !field.isMatching('birthdate')) {
                return l10n.errors.required.EM_SW_17;
            }
        });

        form.field('message').mustValidate(function(field) {
            if (field.isEmpty()) {
                return l10n.errors.required.EM_SW_34;
            }
        });

        form.field('legales').mustValidate(function(field) {
            if (field.type == "checkbox" && !field.isChecked()) {
                return l10n.errors.required.EM_SW_111;
            }
        });

        return l10n.errors.form;
    });

    var errorCls = 'error';

    var getErrorTarget = function(field) {
        if ('radio' != field.type) {
            return field.getLabel();
        } else {
            return field.getElements().parent().parent().prev();
        }
    };

    var addErrorIcon = function(field, target) {
        var id = field.name + 'Error';
        var img = box.dom('#' + id);
        if (img.length) {
            img.attr('alt', field.getError());
        } else {
            target.append('<span id="' + id + '">- ' + field.getError() + '<br/></span>');
        }
    };

    var addFieldError = function(e) {
        getErrorTarget(e.source).addClass(errorCls);
        var sourceForm = $('#' + e.id).parents('form').attr('id');
        addErrorIcon(e.source, $('#' + sourceForm + ' div.alert .content p'));
    };

    var removeFieldError = function(e) {
        getErrorTarget(e.source).removeClass(errorCls);
        box.dom('#' + e.source.name + 'Error').remove();
    };

    var addFormError = function(e) {
        var id = e.source.id + 'Error';
        var msg = e.source.msg;
        var error = box.dom('#' + id);
        if (error.length) {
            error.html(msg);
        } else {
            $('#' + e.source.id + ' div.alert').show();
        }
    };

    var removeFormError = function(e) {
        box.dom('#' + e.source.id + 'Error').remove();
    };


    box.addClick({
        id: 'btSubmit',
        deepness: 3,
        test: function(e, element) {
            return (element.nodeName.toLowerCase() == 'span' && element.className.indexOf('btSubmit') > -1);
        },
        action: function(e, element) {
            $('#joinUsForm').submit();
        }
    });

    // binding des événements
    box.bind({
        'error.form': addFormError,
        'valid.form': removeFormError,
        'error.field.text': addFieldError,
        'error.field.select': addFieldError,
        'error.field.radio': addFieldError,
        'error.field.checkbox': addFieldError,
        'valid.field.text': removeFieldError,
        'valid.field.select': removeFieldError,
        'valid.field.radio': removeFieldError,
        'valid.field.checkbox': removeFieldError
    });
});