Ext.namespace('InterActive.user')

InterActive.user.LoginPanel = function (config) {
    var internalConfig = {
        frame: true,
        title: 'Sign In',
        ctCls: 'loginBox',
        labelWidth: 140,
        width: 450,
        waitMsgTarget: true,
        loginAction: 'demo/login',
        redirectUrl: document.baseURI + 'demo',

        listeners: {
            actioncomplete: {
                fn: function(form, action){
                    var returnToApplication = function() {
                         location.href = this.redirectUrl
                    }

                    Ext.Ajax.request({
                        url: document.baseURI + 'moodle/login/index.php',
                        method: 'POST',
                        params: {
                            username: 'guest@studyinteractive.org',
                            password: 'guest',
                            submit: 'Login',
                            testcookies: 1
                        },
                        success: returnToApplication,
                        failure: returnToApplication,
                        scope: this
                    })
                }
            },
            actionfailed: {
                fn: function(){
                    Ext.getCmp('login-panel').doLayout()
                    this.focus()
                }
            }
        },

        items: [{
            id: 'infoBox',
            html: '<table class="errorBox" style="width:94% !important"><tr><td class="icon">&nbsp;</td><td class="error-text">To preview some of the great features of the <b style="color:#1F68B7">Inter</span><span style="color:#EF3024">Active</span></b> platform please fill out this quick form – one step and you’re there!</td></tr></table>'
        },{
            layout: 'form',
            buttonAlign:'center',
            items: [
                new Ext.form.ComboBox({
                    fieldLabel: 'Title',
                    hiddenName:'title',
                    store: new Ext.data.SimpleStore({
                        fields: ['value'],
                        data: [['Mr'], ['Ms'], ['Mrs'], ['Mrs'], ['Dr'], ['Miss']]
                    }),
                    valueField:'value',
                    displayField:'value',
                    mode: 'local',
                    triggerAction: 'all',
                    emptyText:' ',
                    selectOnFocus:true,
                    anchor: '95%'
                }),
            {
                allowBlank:false,
                xtype:'textfield',
                fieldLabel:'Surname<b>*</b>',
                name:'surname',
                anchor: '95%'
            },{
                allowBlank:false,
                xtype:'textfield',
                fieldLabel:'First Name<b>*</b>',
                name:'firstName',
                anchor: '95%'
            }, {
                xtype: 'phone',
                fieldLabel: 'Contact Number',
                name: 'contactNumber',
                labelWidth: 140,
                width: 271,
                allowBlank: false
            }, {
                allowBlank:false,
                xtype: 'textfield-email',
                fieldLabel:'Email<b>*</b>',
                anchor: '95%'
            }],
            buttons:[{
                text: 'Sign In',
                handler: function(){
                    if ( (!this.getForm().isValid()) ){
                        return false;
                    }

                    this.getForm().submit(Ext.isIE6 ? {
                        url: this.loginAction
                    } : {
                        url: this.loginAction,
                        waitMsg: 'Please wait a second...'
                    })
                },
                scope: this
            },{
                text: 'Cancel',
                handler: function(){
                    document.location = document.baseURI + 'guest'
                }
            }]
     },{
        xtype: 'label',
        html: '<p style="font:normal 9px Verdana, Tahoma; text-align:justify;"><input type="checkbox" checked="true" style="float:left;padding-rigth:4px;" /> We would like to use your information to send your relevant information about the programme of study in which you are interested. We will always give you the option to opt-out and will never sell, share or use your information for any other purpose. Please uncheck this box if you do not wish to receive future communications from us.</p>'
       }]
    }

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

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

        this.keys = [{
            key: Ext.EventObject.ENTER,
            fn: this.getForm().submit.createDelegate(this.getForm(), [{url: this.loginAction}])
        }]
    }
});

Ext.onReady(function(){
    var panel = new InterActive.user.LoginPanel({
        id: 'login-panel',
        moodleLogin: true,
        renderTo: 'user-login-form'
    })

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