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

    var loginForm = new Ext.FormPanel({
        labelWidth: 85,
        frame:true,
        bodyStyle:'padding:5px 5px 0',
        defaults: {
    		enableKeyEvents:true,
    		listeners:{
	    		specialKey: function(field, el) {
	    			if(el.getKey() == Ext.EventObject.ENTER) {
	    				Ext.getCmp('loginButton').handler();
	    			}
	    	    }
    		}
    	},
        buttonAlign:'center',
        formId: 'fmLoginForm',
        id:'loginForm',
        items: [{
        		width: 240,
                fieldLabel: 'Organization',
                name: 'company',
                id: 'company',
                value: _userCompany,
                validateOnBlur: false,
                allowBlank:true,
                xtype: 'textfield'
                //allowBlank:false
            },{
            	width: 240,
                fieldLabel: 'Unit',
                validateOnBlur: false,
                value: _userUnit,
                allowBlank:true,
                id: 'unit',
                name: 'unit',
                xtype: 'textfield'
            },{
            	width: 240,
                fieldLabel: 'Login',
                value: _userLogin,
                validateOnBlur: false,
                allowBlank:true,
                //allowBlank:false,
                name: 'login',
                id: 'login',
                xtype: 'textfield'
            }, {
            	width: 240,
                fieldLabel: 'Password',
                //allowBlank:false,
                allowBlank:true,
                name: 'pass',
                id: 'pass',
                validateOnBlur: false,
                xtype: 'textfield',
                inputType: 'password'
            }, { 
            	tag: 'div',
            	style: 'height: 5px; width: 100%; overflow: hidden;'
            }, {
				labelStyle: 'width: 200px;',
				labelSeparator: '',
			    hideLabel: true,
			    boxLabel: 'Remember me',
			    fieldLabel: 'Remember me', 
                allowBlank:true,
                name: 'rememberMe',
                id: 'rememberMe',
                style: 'margin-left: 91px;',
                inputType: 'checkbox',
                xtype: 'checkbox',
                value: true
            }, {
                tag: 'div',
                style: 'position: absolute; margin: -8px 0px 0px 92px; font-size: 10px; line-height: 12px;',//color: #15428B;
                html: '(Do not check if on a shared computer)'
            }, { 
            	tag: 'div',
            	style: 'height: 1px; width: 330px; overflow: hidden; background: #99BBE8; margin-top:17px;'
            }
        ],
        buttons: [{
            text: 'Login',
            id: 'loginButton',
            handler: function(){
 		       	loginForm.getForm().submit(
    			{
    				url:'/processLogin',
    				waitMsg:'Veryfing User Info...',
    				params: { a: 'login'},
        			success: function(form, action) {
        						location.href=redirectUrl;
        			    },
    			    failure: function(form, action) {
        			       Ext.Msg.alert('Error', 'Login failed, please try again.');
        			    }
    			});
        	}            	
        }, new Ext.Button({
            id: 'ux-wardrobe',
            style: "position: absolute; right: 113px; margin-top: -8px;",
            template: new Ext.Template(
                '<table cellspacing="0" class="x-btn" style="float: left;"><tbody><tr>',
                '<td class="ux-startbutton-center"><div unselectable="on">',
                    '<button class="buttonReset" type="{0}" style="height:16px;">Reset</button>',
                '</div></td>',
                '</tr></tbody></table>'),
            handler: function(){
	    		loginForm.getForm().reset();
	    	}
        })/*, {
            text: 'Reset',
            style: "position: absolute; right: 17px; margin-top: -11px;",
            handler: function(){
        		loginForm.getForm().reset();
        	}
        }*/]
    });

    var window = new Ext.Window({
    	title: 'Please login',
    	closable: false,
        width: 380,
        height:250,
        resizable: false,
        draggable: false,
        minWidth: 300,
        minHeight: 200,
        layout: 'fit',
        plain:true,
        bodyStyle:'padding:5px;',
        buttonAlign:'center',
        items: loginForm

        
    });
    window.show();    
});