Ext.BLANK_IMAGE_URL = 'resources/s.gif';
Ext.QuickTips.init();

var enterListener = {specialkey:function(f,o){if(o.getKey()==13){loginForm.getForm().submit();}}};
var username = new Ext.form.TextField({fieldLabel: 'Username', name: 'username', value: '', allowBlank:false, width:300,listeners:enterListener});
var password = new Ext.form.TextField({fieldLabel: 'Password', name: 'password', value: '', allowBlank:false, width:300, inputType: 'password',listeners:enterListener});

var loginForm = new Ext.form.FormPanel({
		fileUpload: true,
        labelAlign: 'right',
		region: 'center',
        labelWidth: 100,
		frame: true,
        title: 'Pages Login',
        bodyStyle: 'padding:5px 5px 0',
        width: 600,
		defaultType: 'textfield',
		url:'/service/siteManager/login.php',
		method: 'POST',
		standardSubmit: true,
		items: [
			username,
			password,
			{ name: 'action', value: 'doLogin', xtype:'hidden' },
			{
				xtype: 'checkbox',
		        fieldLabel: 'Remember me',
		        name: 'remember',
		        value: 'yes',
				listeners:enterListener
	    	}
		],
		buttons: [{
            text: 'Login',
			handler: sendLogin
        }]

});


MainPanel = function(){
    MainPanel.superclass.constructor.call(this, {
        id: 'mainpanel',
        autoScroll: true,
        region: 'center',
        border: false,
        bodyStyle: {
            padding: "10px"
        },
        cls: 'eve',
        style: {
            border: "1px solid #B5B8C8"
        },
        width: 700,
		height:600,
        margins: '77 5 5 5',
        cmargins: '3 3 10 3',
        items: [new Ext.BoxComponent({
            region: 'center',
            el: 'pages_help_close',
            width: 600,
            margins: '0 0 10 0',
            autoHeight: true
        }), new Ext.BoxComponent({
            region: 'center',
            el: 'pages_help_open',
            width: 600,
            margins: '0 0 10 0',
            autoHeight: true
        }), loginForm]
    });
};

Ext.extend(MainPanel, Ext.Panel, {

    initEvents: function(){
        MainPanel.superclass.initEvents.call(this);
    },
    initPanel: function(){
    },
    clear: function(){
        this.items.each(function(item){
            this.remove(item);
        }, this);
    }
    
});

var mainPanel = new MainPanel();


// -------- START
Ext.onReady(function(){
  
    var viewport = new Ext.Viewport({
        layout: 'border',
        items: [mainPanel]
    });
    
    viewport.doLayout();
    
    setTimeout(function(){
        Ext.get('loading').remove();
        Ext.get('loading-mask').fadeOut({
            remove: true
        });
    }, 250);
      
});

// ---------- CUSTOM FUNCTION -------

function sendLogin(){
	var s = loginForm.getForm().getEl().dom.submit();
}