(function($) {
    
    var W = this, D = this.document;
    
    $(D).ready(function() {
                
        if(D.getElementById('subscribeForm')) {
            
            $('#subscribeForm input').focus(function() {
                $(this).addClass('focus');
            }).blur(function() {
                $(this).removeClass('focus');
            });
            
            box.ui('form').addPatterns({
                zip: /^[0-9]{5}$/
            });
            box.ui('form').create({
                element: '#subscribeForm'
            }).addReplacement().mustValidate(function(form) {
                                
                form.field('salonName').mustValidate(function(field) {
                    if(field.isEmpty()) {
                        return l10n.subscribe.errors.salonName;
                    }
                });
                
                form.field('managerName').mustValidate(function(field) {
                    if(field.isEmpty()) {
                        return l10n.subscribe.errors.managerName;
                    }
                });
                
                form.field('address').mustValidate(function(field) {
                    if(field.isEmpty()) {
                        return l10n.subscribe.errors.address;
                    }
                });
                
                form.field('cp').mustValidate(function(field) {
                    if(field.isEmpty()) {
                        return l10n.subscribe.errors.cp;
                    } else if(!field.isMatching('zip')) {
                        return l10n.subscribe.invalid.cp;
                    }
                });
                
                form.field('city').mustValidate(function(field) {
                    if(field.isEmpty()) {
                        return l10n.subscribe.errors.city;
                    }
                });
                
                form.field('phone').mustValidate(function(field) {
                    if(field.isEmpty()) {
                        return l10n.subscribe.errors.phone;
                    }
                });
                
                form.field('mail').mustValidate(function(field) {
                    if(field.isEmpty()) {
                        return l10n.subscribe.errors.mail;
                    } else if(!field.isMatching('email')) {
                        return l10n.subscribe.invalid.mail;
                    }

                });
                
                return l10n.subscribe.errors.form;
            });
            
            var errorCls = 'error';
    
            var getErrorTarget = function(field) {
                if('radio' != field.type) {
                    return field.getLabel();
                }
            };
            
            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.next().after('<img id="' + id + '" alt="' + field.getError() + '" title="' + field.getError() + '" src="/templates/img/btn/form-main-error-picto.png" />');
                }
            };
            
            var addFieldError = function(e) {
                getErrorTarget(e.source).next().addClass(errorCls);
                addErrorIcon(e.source, getErrorTarget(e.source));
            };
            
            var removeFieldError = function(e) {
                box.dom('#' + e.source.name + 'Error').remove();
                getErrorTarget(e.source).next().removeClass(errorCls);
            };
            
            var addFormError = function(e) {
				
                var id = e.source.id + 'Error';
                var msg = '<p>' + e.source.msg + '</p>';
                var error = box.dom('#' + id);
                if(error.length) {
                    error.html('<span>' + l10n.subscribe.errors.oops + '</span>' + msg);
                } else {
                    e.source.getElement().prepend('<div id="' + id + '" class="' + errorCls + '"><span>' + l10n.subscribe.errors.oops + '</span>' + msg + '</div>');
                }
            };
            
            var removeFormError = function(e) {
                box.dom('#' + e.source.id + 'Error').remove();
            };
            
            // binding des événements
            box.bind({
                'submit.form': function(e, domEvt) {
                    if(!e.valid) {
                        addFormError(e);
                    }
                },
                'error.field': addFieldError,
                'valid.field': removeFieldError
            });

        }
        
        // configure scrollbar HTML
        // take notice of class="{$barCls}", because the class name is also configurable
        box.ui('scroll').configure({
            bar: '<a href="#" class="{$barCls}"></a>'
        });
        
        // create a mask for popins
        box.ui('mask').create({
            id: 'example',
            
            html: '<div id="popinMask"></div>',
            insertStyles: {opacity: 0, width: 'viewport:content-box', height: 'document:content-box'},
            insertAnimStyles: {opacity: 0.85},
            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: 'example',
            
            html: '<div id="popinLoader">' + l10n.loading + '</div>',
            insertStyles: {opacity: 0, top: 'viewport:middle', left: 'viewport:middle'},
            insertAnimStyles: {opacity: 1},
            insertAnimDuration: 200,
            removeAnimStyles: {opacity: 0},
            removeAnimDuration: 150
        });
        
        // create a new popin object
        box.ui('popin').create({
            id: 'example',
            
            loader: 'example',
            mask: 'example',
            
            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: 'popinOpen',
            closeClassName: 'popinClose'
        });
        
    });
    
})(jQuery);