Ext.namespace('MSDImages');

MSDImages.LoginApp = function() {

    var username, password;

    function login() {
        if (username.isValid() && password.isValid()) {
            document.forms['loginForm'].submit();
        } else {
            Ext.Msg.show({
                title: 'Unable to sign in',
                msg: 'Please enter your username and password to sign in',
                buttons: Ext.MessageBox.OK,
                icon: Ext.MessageBox.ERROR,
                maxWidth: 100
            });
        }
    }

    //private space
    function initFields() {

        //Login button
        new Ext.Button({
            renderTo: 'btnLogin',
            id: 'extBtnLogin',
            text: 'Sign in',
            width: 80,
            handler: function() {
                login();
            }
        });

        //username textfield
        username = new Ext.form.TextField({
            applyTo: 'username',
            allowBlank: false,
            blankText: 'Please enter your username',
            invalidText: 'Please enter your username',
            msgTarget: 'under'
        });

        //password textfield
        password = new Ext.form.TextField({
            applyTo: 'password',
            allowBlank: false,
            blankText: 'Please enter your password',
            invalidText: 'Please enter your password',
            msgTarget: 'under'
        });
    }

    //public space
    return {
        init: function() {

            initFields();

            Ext.get('loginForm').addKeyListener(Ext.EventObject.ENTER, function(key, e) {
                console.log("oh hai");
                login();
            });
        }
    }

} ();