LoginDialog = function(config) {
    Ext.apply(this, config);
    this.addEvents({'login':true, 'loggedout': true});
    this.init();
}

Ext.extend(LoginDialog, Ext.util.Observable, {

    init : function(){

        Ext.Ajax.on('requestcomplete', function(c,r,o){
            this.verify(r);
        }, this);

        Ext.Ajax.on('beforerequest', function(ajax, o){ o.autoAbort = false; });

        dlg = new Ext.LayoutDialog("login-dlg", {
                modal:true,
                autoCreate: true,
                title: 'Login',
                width:300,
                height:195,
                resizable:false,
                shadow:true,
                collapsible: false,
                closable:false,
                draggable:false,
                center: {
                    titlebar:false,
                    autoScroll:false
                }
        });

        var form = new Ext.form.Form({
            labelAlign:'top',
            labelWidth:'200'
        });
        form.add(

            new Ext.form.TextField({
                fieldLabel: 'Gebruikersnaam',
                name: 'naam',
                invalidText: 'U moet een gebruikersnaam invoeren.',
                allowBlank:false
            }),

            new Ext.form.TextField({
                fieldLabel: 'Wachtwoord',
                name: 'wachtwoord',
                inputType: 'password',
                invalidText: 'U moet een wachtwoord invoeren.',
                allowBlank:false
            })
        );
        form.end();
        form.applyIfToFields({
            width:140
        });

        var panel = dlg.getLayout().getEl().createChild({id:'login-dlg-bd', tag:'div'});
        this.form = form;

        this.loginBtn = dlg.addButton('Login', this.login, this);
        dlg.addKeyListener(13, this.login, this);
        dlg.getLayout().add('center',new Ext.ContentPanel(panel, {fitToFrame:true}));

        this.dlg = dlg;
        this.loggingIn = false;

        form.render(panel);

    },

    login : function(){
        if (!this.loggingIn){
            if (this.form.isValid()){
                this.loginBtn.disable();
                this.loggingIn = true;
                Ext.Ajax.request({url:'login.php?action=verify&' + Ext.urlEncode(this.form.getValues()), scope:this, success: function(r,o){
                    var cfg = eval('(' + r.responseText + ')');
                    if (cfg['logged-in']) {
                        this.username = cfg.username;
                        this.hide();
                        Xsn.settings = cfg.settings;
                        Xsn.settings.username = cfg.username;
                        this.fireEvent('login', r.responseText);
                    } else this.showError();
                    this.loginBtn.enable();
                    this.loggingIn = false;
                }});
            } else {
                this.showError();
            }
        }
    },

    showError: function(){
        Ext.MessageBox.alert('Login error', 'U heeft een onjuiste gebruikersnaam en/of onjuist wachtwoord opgegeven.');
    },

    getUserName : function(){
        return this.username || '';
    },

    authorize : function(){
        Ext.Ajax.request({url:'index.php?action=loggedin', scope:this, success: function(r,o){
            var data = Ext.decode(r.responseText);
            if (data.loggedin) {
                this.username = data.username;
                Xsn.settings = data.settings;
                Xsn.settings.username = data.username;
                this.fireEvent('login');
            } else this.show();
        }});
    },

    verify : function(r){
        if (r.getAllResponseHeaders && r.getAllResponseHeaders.lastIndexOf('Logged-out') != -1){
            this.fireEvent('loggedout');
            return false;
            //this.show();
        } else return true;
    },

    show : function(){
        this.dlg.show();
        this.form.findField('naam').getEl().focus();
    },

    hide : function(){
        this.dlg.hide();
    }

});