Ext.namespace('InterActive.user')

InterActive.user.PasswordRecoveryForm = function (config) {
    var internalConfig = {
        frame: true,
        title: 'Password Recovery',
        ctCls: 'loginBox',
        width: 330,
        labelWidth: 90,
        labelAlign:'top',
        waitMsgTarget: true,
        loginAction: 'user/password-recovery',
        redirectUrl: document.baseURI + 'dashboard',
        listeners: {
            actioncomplete: {
                fn: function(){
                    this.hide()
                    Ext.get('password-recovery-success').show()
                }
            },
            actionfailed: {
                fn: function(){
                    Ext.getCmp('errorBox').show()
                }
            }
        },
        items: [{
            id: 'errorBox',
            html: '<table class="errorBox"><tr><td class="icon"><div class="error-icon"></div></td><td class="error-text">The information you entered does not match our records. Please enter a valid Email and Answer.</td></tr></table>'
        },{
            html:'<div class="x-form-item-label" style="padding-bottom:10px;">Please type in your email</div>'
        }, {
            layout: 'form',
            items: [{
                id:'email-field',
                labelSeparator:'',
                allowBlank: false,
                xtype: 'textfield',
                fieldLabel: 'Email',
                name: 'email',
                vtype: 'email',
                width: 300
            }]
        }, {
            xtype: 'button',
            text: 'Proceed',
            handler: function(){
                Ext.getCmp('errorBox').hide()

                if ( !Ext.getCmp('email-field').isValid() )
                {
                    Ext.Msg.alert('Error','All field is required')
                    return false
                }
                this.getForm().submit(Ext.isIE6 ? {
                    url: this.loginAction
                } : {
                    url: this.loginAction,
                    waitMsg: 'Please wait a second...'
                })
            },
            scope: this
        }]
    }

    config = config || {}
    Ext.applyIf(config, internalConfig)
    InterActive.user.PasswordRecoveryForm.superclass.constructor.call(this, config)
}

Ext.extend(InterActive.user.PasswordRecoveryForm, Ext.FormPanel, {
    initComponent: function () {
        InterActive.user.PasswordRecoveryForm.superclass.initComponent.call(this)

        Ext.getCmp('errorBox').hide()
    }
});

Ext.onReady(function(){
    var panel = new InterActive.user.PasswordRecoveryForm({
        id: 'password-recovery-panel',
        renderTo: 'password-recovery-form' 
    });

    Ext.get('password-recovery-panel').center(document.body)
});