/*global Ext, AJAX_ACTION */

function LoginBox(){

var self = this;

//***************************************************************************
//** Login Form
//***************************************************************************
this.loginForm = new Ext.FormPanel({
    title: 'Login',
    autoHeight: true,
    labelAlign: 'right',
    frame: true,
    border: false,
    bodyStyle: 'padding: 20px;',
    buttonAlign: 'right',
    items: [
                {fieldLabel: 'Email', xtype: 'textfield', vtype: 'email', name: 'email',
                    msgTarget: 'side', allowBlank: false, width: '80%', value: ''},

                {fieldLabel: 'Password', xtype: 'textfield',  name: 'pass', value: '',
                    msgTarget: 'side', allowBlank: false, width: '30%'},
                new Ext.form.FieldSet({ name: 'remember', checkboxToggle: true, checkboxName: 'remember',
                                        collapsed: true, title: 'Remember me on this computer', autoHeight: true,
                                        items:  [
                                                {fieldLabel: 'Important', xtype: 'statictextfield', value: 'error',
                                                     id: 'error-message-fld', height: 50,
                                                     value: 'You will remain logged in until you explicitly log out.'
                                                }
                                        ]
                                      }),
                {name: 'action', value: 'do_login', xtype: 'hidden'}
    ],
    buttons: [
        {text: 'Let me in', handler:
                function(){
                    //var f = self.loginForm.getForm();
                    if(self.loginForm.form.isValid()){
                        //alert('ok');
                        self.loginForm.form.submit({
                                    url: AJAX_ACTION,
                                    method: 'POST',
                                    params: {vars: self.loginForm.getForm().getValues()},
                                    waitMsg: 'Logging you in..',
                                    failure: function(form, action){
                                        Ext.MessageBox.show({
                                                    title: 'Login Error', msg: action.result.err,
                                                    buttons: Ext.Msg.OK,
                                                    icon: Ext.MessageBox.ERROR,
                                                    minWidth: 150
                                         });
                                    },
                                    success: function(form, action){
                                            Ext.MessageBox.wait('Redirecting to client site', 'Authentication Successful');
                                            location.href = 'account.php';
                                    }
                                });
                    }
                }
        }
    ]
});

this.loginForm.on('afterlayout', function(){
    self.loginForm.form.clearInvalid();
});
//



//***************************************************************************
//** Reminder Form
//***************************************************************************
this.reminderForm = new Ext.FormPanel({
    title: 'Lost Password',
    autoHeight: true,
    labelAlign: 'right',
    bodyStyle: 'padding: 20px;',
    buttonAlign: 'right',
    frame: true,
    items: [    {fieldLabel: 'Email', xtype: 'textfield', name: 'email', value: '',
                    vtype: 'email', msgTarget: 'side',  allowBlank: false, 
                    id: 'reminder-email',  width: '80%'},
                {xtype: 'hidden', name: 'action', value: 'password_forgot'}

    ],
    buttons: [ {text: 'Send password',  
                    handler: function(){
                        if(self.reminderForm.form.isValid()){
                            Ext.MessageBox.wait('Please wait..', 'Sending details');
                            self.reminderForm.form.submit({
                                url: AJAX_ACTION,
                                success: function(frm){
                                    Ext.MessageBox.hide();
                                    self.reminderForm.form.reset();
                                    Ext.MessageBox.alert('Passsword Sent','Please check your mailbox in a few moments');
                                },
                                failure: function(frm, action){
                                    Ext.MessageBox.hide();
                                    Ext.MessageBox.alert('Reminder Failed', action.result.msg);
                                }
                            })

                        }
                    
                    }
                }
    ]
});
this.reminderForm.doLayout();

//***************************************************************************
//** Reminder Form
//***************************************************************************
/*
this.demoForm = new Ext.FormPanel({
    title: 'Demo login',
    autoHeight: true,
    labelAlign: 'right',
    frame: true,
    bodyStyle: 'padding: 20px;',
    buttonAlign: 'right',
    items:[ {xtype:'statictextfield',displayLabel: false,
                value: 'Click the button to login to the demo account' },
            {xtype: 'textfield', displayLabel: false, name:'demo_email', value: 'demo@example.com'},
            {xtype: 'textfield', displayLabel: false, name:'demo_pass', value: 'Secret'},
            {name: 'action', value: 'do_login_demo', xtype: 'hidden'}
    ],         
    buttons: [ {text: 'Demo Login'
                    }
    ]

});
*/

//***************************************************************************
//** Tab Panel - TODO: , this.demoForm
//***************************************************************************
this.tabPanel = new Ext.TabPanel({
    autoHeight: true,
    renderTo: 'login-box',
    plain: true,
    activeTab: 0,
    frame: true,
    border: false,
    deferredRender: false,
    items: [ this.loginForm, this.reminderForm ]

});
//this.tabPanel.doLayout();


}