Ext.onReady(function() {
    Ext.QuickTips.init();

    // Create a variable to hold our EXT Form Panel.
    // Assign various config options as seen.
    //var logoUrl = "images/huc_desktop_logo.png";

    var logoPanel = new Ext.Panel({
        baseCls: 'x-plain',
        bodyStyle: 'background:#DFE8F6 url(images/huc_desktop_logo.png) no-repeat center; height:64px;',
        id: 'login-logo',
        region:'center'
    });

    var login = new Ext.FormPanel({
        labelWidth:100,
        url:'../HuDesktop',
        frame:true,
        bodyStyle: 'background:#DFE8F6;',
        //title:'Please Login',
        region: 'center',
        defaultType:'textfield',
        monitorValid:true,
        // Specific attributes for the text fields for username / password.
        // The "name" attribute defines the name of variables sent to the server.
        items:[
            {
                id:'user_id',
                fieldLabel:'Username',
                name:'loginUsername',
                allowBlank:false ,
                width: 210,
                listeners:{
                    specialkey:function(f, e) {
                        if (e.getKey() == e.ENTER)
                            Ext.getCmp('pass_id').focus();
                    }
                }

            },
            {
                id:'pass_id',
                fieldLabel:'Password',
                name:'loginPassword',
                inputType:'password',
                allowBlank:false,
                width:210,
                listeners:{
                    specialkey:function(f, e) {
                        if (e.getKey() == e.ENTER) {
                            var output1 = Ext.getCmp('user_id').getValue();
                            var output2 = Ext.getCmp('pass_id').getValue();
                            var json_login = {cmd:"login",params:{user:output1, password:(new MD5(output2)).getDigest()}};

                            new Ext.data.Connection(HuDesktopConst.init_defaultConnectionConfig).request({
                                url: "../HuDesktop",
                                method: "POST",
                                params: {data: Ext.encode(json_login)},
                                success: function(o) {
                                    var obj = Ext.util.JSON.decode(o.responseText);
                                    if (obj.success) {
                                        login_win.close();
                                        //var return_data = "Name: " + obj.response.user.name + "  Desc: " + obj.response.user.description + "  Email: " + obj.response.user.email;
                                        window.location = 'desktop.jsp';
                                    }
                                    else {
                                        Ext.Msg.alert('Login failed!', 'Invalid username or password. Please check typing and try again.');
                                        login.getForm().reset();
                                    }
                                },
                                failure: function() {
                                    Ext.Msg.alert('Login failed!', 'Invalid username or password. Please check typing and try again.');
                                    login.getForm().reset();
                                }
                            });
                        }
                    }
                }

            }
        ],

        // All the magic happens after the user clicks the button
        buttons:[
            {
                text:'Login',
                formBind: true,
                // Function that fires when user clicks the button
                handler:function() {
                    var output1 = Ext.getCmp('user_id').getValue();
                    var output2 = Ext.getCmp('pass_id').getValue();
                    var json_login = {cmd:"login",params:{user:output1 , password:(new MD5(output2)).getDigest()}};

                    new Ext.data.Connection(HuDesktopConst.init_defaultConnectionConfig).request({
                        url: "../HuDesktop",
                        method: "POST",
                        params: {data: Ext.encode(json_login)},
                        success: function(o) {
                            var obj = Ext.util.JSON.decode(o.responseText);
                            if (obj.success) {
                                login_win.close();
                                //var return_data = "Name: " + obj.response.user.name + "  Desc: " + obj.response.user.description + "  Email: " + obj.response.user.email;
                                window.location = 'desktop.jsp';
                            }
                            else {
                                Ext.Msg.alert('Login failed!', 'Invalid username or password. Please check typing and try again.');
                                login.getForm().reset();
                            }
                        },
                        failure: function() {
                            Ext.Msg.alert('Login failed!', 'Invalid username or password. Please check typing and try again.');
                            login.getForm().reset();
                        }
                    });
                }
            },
            {
                text:'Manual',
                handler:function() {
                    window.location = HuDesktopConst.hudesktop_manual_url;
                }
            },
            {
                text:'Contact Information',
                handler:function() {
                    window.location = HuDesktopConst.hudesktop_manual_url;
                }
            }
        ]
    });


    // This just creates a window to wrap the login form.
    // The login object is passed to the items collection.
    var login_win = new Ext.Window({
        layout:'border',
        width:340,
        height:205,
        closable: false,
        resizable: false,
        bodyStyle: 'background:#DFE8F6;',
        // plain: true,
        border: false,
        items: [
            {
                region:'north',
                autoScroll:false,
                collapsible:false,
                border: false,
                height:90,
                layout:'border',
                title: 'Login',
                items:[logoPanel, new Ext.form.Label({html:'<div align="right">' + HuDesktopConst.version_string + '</div>', region:'south'})]
            },
            {
                region:'center',
                border:false,
                //layout:'fit',
                height:115,
                //margins:'0 0 0 0',
                items:[login]
            }

        ]
    });
    login_win.show();
});