/**
 * @class Ext.ux.ValidationStatus A {@link Ext.StatusBar} plugin that provides
 *        automatic error notification when the associated form contains
 *        validation errors.
 * @extends Ext.Component
 * @constructor Creates a new ValiationStatus plugin
 * @param {Object}
 *            config A config object
 */
Ext.ux.ValidationStatus = Ext.extend(Ext.Component, {

    errorIconCls : 'x-status-error',

    errorListCls : 'x-status-error-list',

    validIconCls : 'x-status-valid',

    showText : 'sono presenti degli errori (clicca qui per i dettagli)',

    hideText : 'clicca qui per nascondere i dettagli errore',

    submitText : 'verifica in corso...',

    // private
    init : function(sb) {
        sb.on('render', function() {
            this.statusBar = sb;
            this.monitor = true;
            this.errors = new Ext.util.MixedCollection();
            this.listAlign = (sb.statusAlign == 'right' ? 'br-tr?' : 'bl-tl?');

            if (this.form) {
                this.form = Ext.getCmp(this.form).getForm();
                this.startMonitoring();

                // Have to give the status bar time to render since it happens
                // in afterRender
                (function() {
                    sb.statusEl.on('click', this.onStatusClick, this, {
                        buffer : 200
                    });
                }).defer(200, this);

                this.form.on('beforeaction', function(f, action) {
                    if (action.type == 'submit') {
                        // Ignore monitoring while submitting otherwise the
                        // field validation
                        // events cause the status message to reset too early
                        this.monitor = false;
                    }
                }, this);
                var startMonitor = function() {
                    this.monitor = true;
                }
                this.form.on('actioncomplete', startMonitor, this);
                this.form.on('actionfailed', startMonitor, this);
            }
        }, this, {
            single : true
        });
    },

    // private
    startMonitoring : function() {
        this.form.items.each(function(f) {
            f.on('invalid', this.onFieldValidation, this);
            f.on('valid', this.onFieldValidation, this);
        }, this);
    },

    // private
    stopMonitoring : function() {
        this.form.items.each(function(f) {
            f.un('invalid', this.onFieldValidation, this);
            f.un('valid', this.onFieldValidation, this);
        }, this);
    },

    // private
    onDestroy : function() {
        this.stopMonitoring();
        this.statusBar.statusEl.un('click', this.onStatusClick, this);
        Ext.ux.ValidationStatus.superclass.onDestroy.call(this);
    },

    // private
    onFieldValidation : function(f, msg) {
        if (!this.monitor) {
            return false;
        }
        if (msg) {
            this.errors.add(f.id, {
                field : f,
                msg : msg
            });
        } else {
            this.errors.removeKey(f.id);
        }
        this.updateErrorList();
        if (this.errors.getCount() > 0) {
            if (this.statusBar.getText() != this.showText) {
                this.statusBar.setStatus({
                    text : this.showText,
                    iconCls : this.errorIconCls
                });
            }
        } else {
            this.statusBar.clearStatus().setIcon(this.validIconCls);
        }
    },

    // private
    updateErrorList : function() {
        if (this.errors.getCount() > 0) {
            var msg = '<ul>';
            this.errors.each(function(err) {
                msg += ('<li id="x-err-' + err.field.id + '"><a href="#">'
                        + err.msg + '</a></li>');
            }, this);
            this.getMsgEl().update(msg + '</ul>');
        } else {
            this.getMsgEl().update('');
        }
    },

    // private
    getMsgEl : function() {
        if (!this.msgEl) {
            this.msgEl = Ext.DomHelper.append(Ext.getBody(), {
                cls : this.errorListCls + ' x-hide-offsets'
            }, true);

            this.msgEl.on('click', function(e) {
                var t = e.getTarget('li', 10, true);
                if (t) {
                    Ext.getCmp(t.id.split('x-err-')[1]).focus();
                    this.hideErrors();
                }
            }, this, {
                stopEvent : true
            }); // prevent anchor click navigation
        }
        return this.msgEl;
    },

    // private
    showErrors : function() {
        this.updateErrorList();
        this.getMsgEl().alignTo(this.statusBar.getEl(), this.listAlign)
                .slideIn('b', {
                    duration : .3,
                    easing : 'easeOut'
                });
        this.statusBar.setText(this.hideText);
        this.form.getEl().on('click', this.hideErrors, this, {
            single : true
        }); // hide if the user clicks directly into the form
    },

    // private
    hideErrors : function() {
        var el = this.getMsgEl();
        if (el.isVisible()) {
            el.slideOut('b', {
                duration : .2,
                easing : 'easeIn'
            });
            this.statusBar.setText(this.showText);
        }
        this.form.getEl().un('click', this.hideErrors, this);
    },

    // private
    onStatusClick : function() {
        if (this.getMsgEl().isVisible()) {
            this.hideErrors();
        } else if (this.errors.getCount() > 0) {
            this.showErrors();
        }
    }
});