// helpers to manage error display on form validation
var W = this, D = this.document;

var addFormError = function(e) {
    box.dom('#' + e.source.id + 'Error').html('<p>' + e.source.msg + '</p>');
};

var addFieldError = function(e) {
    var error = box.dom('#' + e.source.name + 'Error');
    if(error.length) {
        //error.html(e.msg);
    } else {
        if (e.source.getLabel() != null) {
            e.source.getLabel().addClass('error');
            e.source.getLabel().append('<br /><em id="' + e.source.name + 'Error" class="error">' + e.msg + '</em>');
        }
    }
    error = null;

};

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

// wait for the DOM to be ready
box.dom(document).ready(function() {
    
    box.ui('form').addPatterns({
        zipcode:/^[0-9]{5}$/
    });
    
    // create a mask for popins
    box.ui('mask').create({
        id: 'mask',
        html: '<div id="popinMask"></div>',
        insertStyles: {opacity: 0, width: 'viewport:content-box', height: 'document:content-box'},
        insertAnimStyles: {opacity: 0.7},
        insertAnimDuration: 200,
        removeAnimStyles: {opacity: 0},
        removeAnimDuration: 150,
        resizeStyles: {width: 'viewport:content-box', height: 'document:content-box'}
    });
    
    // create a loader for popins
    box.ui('loader').create({
        id: 'loader',
        html: '<div id="popinLoader"><span>' + l10n.loading + '</span></div>',
        insertStyles: {opacity: 0, top: 'viewport:middle', left: 'viewport:middle'},
        insertAnimStyles: {opacity: 1},
        insertAnimDuration: 200,
        removeAnimStyles: {opacity: 0},
        removeAnimDuration: 150
    });
    
    box.ui('popin').create({
        id: 'alert',
        loader: 'loader',
        mask: 'mask',
        insertStyles: {top: 'viewport:before', left: 'viewport:middle', 'min-left': 0},
        insertAnimStyles: {top: 'viewport:middle', 'min-top': 0},
        insertAnimDuration: 600,
        removeAnimStyles: {top: 'viewport:before'},
        removeAnimDuration: 500,
        openClassName: 'alertPopinOpen',
        closeClassName: 'popinClose'
    });
    
    box.ui('popin').create({
        id: 'setAlert',
        loader: 'loader',
        mask: 'mask',
        insertStyles: {top: 'viewport:before', left: 'viewport:middle', 'min-left': 0},
        insertAnimStyles: {top: 'viewport:middle', 'min-top': 0},
        insertAnimDuration: 600,
        removeAnimStyles: {top: 'viewport:before'},
        removeAnimDuration: 500,
        openClassName: 'setAlertPopinOpen',
        closeClassName: 'popinClose'
    });
    
    
    box.ui('popin').create({
        id: 'confirm',
        loader: 'loader',
        mask: 'mask',
        insertStyles: {top: 'viewport:before', left: 'viewport:middle', 'min-left': 0},
        insertAnimStyles: {top: 'viewport:middle', 'min-top': 0},
        insertAnimDuration: 600,
        removeAnimStyles: {top: 'viewport:before'},
        removeAnimDuration: 500,
        openClassName: 'confirmPopinOpen',
        closeClassName: 'popinClose'
    });

    box.ui('popin').create({
        id: 'login',
        loader: 'loader',
        mask: 'mask',
        insertStyles: {top: 'viewport:before', left: 'viewport:middle', 'min-left': 0},
        insertAnimStyles: {top: 'viewport:middle', 'min-top': 0},
        insertAnimDuration: 600,
        removeAnimStyles: {top: 'viewport:before'},
        removeAnimDuration: 500,
        openClassName: 'loginPopinOpen',
        closeClassName: 'popinClose'
    });
    
    box.ui('popin').create({
        id: 'updatePassword',
        loader: 'loader',
        mask: 'mask',
        insertStyles: {top: 'viewport:before', left: 'viewport:middle', 'min-left': 0},
        insertAnimStyles: {top: 'viewport:middle', 'min-top': 0},
        insertAnimDuration: 600,
        removeAnimStyles: {top: 'viewport:before'},
        removeAnimDuration: 500,
        openClassName: 'updatePasswordPopinOpen',
        closeClassName: 'popinClose'
    });
    
    box.ui('popin').create({
        id: 'forgottenPassword',
        loader: 'loader',
        mask: 'mask',
        insertStyles: {top: 'viewport:before', left: 'viewport:middle', 'min-left': 0},
        insertAnimStyles: {top: 'viewport:middle', 'min-top': 0},
        insertAnimDuration: 600,
        removeAnimStyles: {top: 'viewport:before'},
        removeAnimDuration: 500,
        openClassName: 'forgottenPasswordPopinOpen',
        closeClassName: 'popinClose'
    });
    
    box.ui('popin').create({
        id: 'pictoDefinition',
        loader: 'loader',
        mask: 'mask',
        insertStyles: {top: 'viewport:before', left: 'viewport:middle', 'min-left': 0},
        insertAnimStyles: {top: 'viewport:middle', 'min-top': 0},
        insertAnimDuration: 600,
        removeAnimStyles: {top: 'viewport:before'},
        removeAnimDuration: 500,
        openClassName: 'pictoDefinitionPopinOpen',
        closeClassName: 'popinClose'
    });
    
    box.ui('popin').create({
        id: 'publishComment',
        loader: 'loader',
        mask: 'mask',
        insertStyles: {top: 'viewport:before', left: 'viewport:middle', 'min-left': 0},
        insertAnimStyles: {top: 'viewport:middle', 'min-top': 0},
        insertAnimDuration: 600,
        removeAnimStyles: {top: 'viewport:before'},
        removeAnimDuration: 500,
        openClassName: 'publishCommentPopinOpen',
        closeClassName: 'popinClose'
    });
    
    box.ui('popin').create({
        id: 'confirmsupp',
        loader: 'loader',
        mask: 'mask',
        insertStyles: {top: 'viewport:before', left: 'viewport:middle', 'min-left': 0},
        insertAnimStyles: {top: 'viewport:middle', 'min-top': 0},
        insertAnimDuration: 600,
        removeAnimStyles: {top: 'viewport:before'},
        removeAnimDuration: 500,
        openClassName: 'confirmsupp',
        closeClassName: 'popinClose'
    });
    
    
    box.bind({
        // react on form errors
        'submit.form.updatePasswordForm': function(e, domEvt) {
            if(e.valid === false) {
                domEvt.preventDefault();
                addFormError(e);
            }
        }, 'error.field': function(e) {
            if(e.source.form == 'updatePasswordForm') {
                addFieldError(e);
            }
            if(e.source.form == 'publishCommentForm') {
                addFieldError(e);
            }
        }, 'valid.field': function(e) {
            if(e.source.form == 'updatePasswordForm') {
                removeFieldError(e);
            }
            if(e.source.form == 'publishCommentForm') {
                removeFieldError(e);
            }
        }, 'addtodom.popin.updatePassword': function(e) {
            box.ui('form').addPatterns({
                password: /^[a-zA-Z0-9]{6,}$/
            });
            box.ui('form').create({
                element: '#updatePasswordForm'
            }).mustValidate(function(form) {
                form.field('currentPassword').mustValidate(function(field) {
                    if(field.isEmpty()) {
                        return l10n.errors.required.password;
                    }
                });
                var pass1val, pass2val = '';
                form.field('newPassword1').mustValidate(function(field) {
                    if(field.isEmpty()) {
                        return l10n.errors.required.password;
                    } else if(!field.isMatching('password')) {
                        return l10n.errors.invalid.password;
                    } else {
                        pass1val = field.getValue();
                    }
                });
                form.field('newPassword2').mustValidate(function(field) {
                    if(field.isEmpty()) {
                        return l10n.errors.required.password;
                    } else if(!field.isMatching('password')) {
                        return l10n.errors.invalid.passwordConfirmation;
                    } else {
                        pass2val = field.getValue();
                        if (pass1val != pass2val) {
                            return l10n.errors.invalid.passwordConfirmationDifferent;
                        }
                    }
                    
                });

                return l10n.errors.forms;
                
            });
        }, 'removefromdom.popin.updatePassword': function(e) {
            box.ui('form').destroy('updatePasswordForm');
        }, 'submit.form.publishCommentForm': function(e, domEvt) {
            if(e.valid === false) {
                domEvt.preventDefault();
                addFormError(e);
            }
        }, 'addtodom.popin.forgottenPassword' :function(e) {
            box.ui('form').create({
                element: '#forgottenPasswordForm'
            }).mustValidate(function(form) {
                form.field('email').mustValidate(function(field) {
                    if (field.isEmpty()) {
                        return l10n.errors.required.email;
                    } else if (!field.isMatching('email')) {
                        return l10n.errors.invalid.email;
                    }
                });
                return l10n.errors.forms
            });
        },
        'addtodom.popin.publishComment': function(e) {
            box.ui('form').create({
                element: '#publishCommentForm'
            }).mustValidate(function(form) {
                form.field('commentMessage').mustValidate(function(field) {
                    if(field.isEmpty()) {
                        return l10n.errors.required.message;
                    }
                });                
                if (form.field('alreadyRegistered') != null) {
                    form.field('alreadyRegistered').mustValidate(function(field) {
                        if (!field.isChecked()) {
                            return l10n.errors.mandatory;
                        } else {
                            if (field.getValue() == '1') {
                                form.field('userNickname').removeValidation().clearError();
                                form.field('userEmail').removeValidation().clearError();
                                form.field('userLogin').mustValidate(function(field) {
                                    if(field.isEmpty()) {
                                        return l10n.errors.required.nickname;
                                    }
                                });
                                form.field('userPassword').mustValidate(function(field) {
                                    if(field.isEmpty()) {
                                        return l10n.errors.required.password;
                                    }
                                });
                            }
                            if (field.getValue() == '0') {
                                form.field('userLogin').removeValidation().clearError();
                                form.field('userPassword').removeValidation().clearError();
                                form.field('userNickname').mustValidate(function(field) {
                                    if(field.isEmpty()) {
                                        return l10n.errors.required.nickname;
                                    }
                                });
                                form.field('userEmail').mustValidate(function(field) {
                                    if(field.isEmpty()) {
                                        return l10n.errors.required.email;
                                    } else if (! field.isMatching('email')) {
                                        return l10n.errors.invalid.email;
                                    }
                                        
                                });
                            }
                        }
                    });
                }
                return l10n.errors.forms;
            });
        },
        'addtodom.popin.setAlert': function(e) {
            var formId = $('#searchChange form').attr('id');
            var popinFormId = $('#popinSearch form').attr('id');
            $('#'+ formId +' input').each(function() {
                var id = $(this).attr('id');
                var value = $(this).val();
                var type = $(this).attr('type');
                switch (type) {
                    case 'text' :
                        $('#'+ popinFormId +' input#'+id+'Popin').val(value);
                        break;
                    case 'checkbox' :
                        $('#'+ popinFormId +' input#'+id+'Popin').attr('checked', value);
                        break;
                    case 'radio' :
                        $('#'+ popinFormId +' input#'+id+'Popin').attr('checked', value);
                        break;
                }
            });
            $('#'+ formId +' select').each(function() {
                id = $(this).attr('id');
                value = $(this).val();
                $('#'+ popinFormId +' select#'+id+'Popin').val(value);
            });
            box.ui('form').create({
                element: '#'+popinFormId
            }).mustValidate(function(form) {
                if (form.field('userLogin')) {
                    form.field('userLogin').mustValidate(function(field) {
                        if (field.isEmpty) {
                            return l10n.errors.mandatory
                        }
                    });
                    form.field('userPassword').mustValidate(function(field) {
                        if (field.isEmpty) {
                            return l10n.errors.mandatory
                        }
                    });
                    return l10n.errors.forms;
                }
            });
        }
    });

    var datas = {};
    if ($(D.body).hasClass('callbackFormOK')) {
        datas.url = l10n.url.popinCallBackConfirmation;
        box.ui('popin.callbackConfirmation').open(datas);
    };

    if ($(D.body).hasClass('alert')) {
        datas.url = l10n.url.popinAlert;
        box.ui('popin.alert').open(datas);
    };
    
    if ($(D.body).hasClass('confirm')) {
        datas.url = l10n.url.popinConfirm;
        box.ui('popin.confirm').open(datas);
    };
    
    if ($(D.body).hasClass('loginFormKO')) {
        datas.url = l10n.url.popinLogin;
        box.ui('popin.login').open(datas);
    };
    
    if ($(D.body).hasClass('updatePasswordFormKO')) {
        datas.url = l10n.url.popinUpdatePassword;
        box.ui('popin.updatePassword').open(datas);
    };
    
    if ($(D.body).hasClass('forgottenPasswordFormKO')) {
        datas.url = l10n.url.popinForgottenPassword;
        box.ui('popin.forgottenPassword').open(datas);
    };
    
    if ($(D.body).hasClass('publishCommentFormKO')) {
        datas.url = l10n.url.popinPublishComment;
        box.ui('popin.publishComment').open(datas);
    };
});