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

//-------------------FUNCTIONS----------------------

    function showLogon(){
        var selected =
        Ext.Ajax.request({
                    url: '../../../messaging/inc/action.php',
                    params: {action: 'logon',
                            uid: userIDTextField.getValue(),
                            pass: passwordTextField.getValue(),
                            },
                    method: 'POST',
                    success: function(f,a){
                        var jsonData = Ext.util.JSON.decode(f.responseText);
                        var userName=jsonData.data.name;
                        Ext.Msg.alert("Success!", "Logged in as "+userName);
                    },
                    failure: function(f,a){
                            Ext.Msg.alert("Error!", "there was a problem updating the user");

                    }
        });
    }

//-------------------BUTTONS----------------------

    var receiveButton = new Ext.Button ({
        text: 'Receive',
        iconCls: "receive-icon",
        listeners:{
            click: function(){

            }
        }
    });

    var newButton = new Ext.Button ({
        text: 'New',
        iconCls: "newmessage-icon",
        listeners:{
            click: function(){

            }
        }
    });

    var replyButton = new Ext.Button ({
        text: 'Reply',
        iconCls: "reply-icon",
        listeners:{
            click: function(){

            }
        }
    });

    var deleteButton = new Ext.Button ({
        text: 'Delete',
        iconCls: "remove-icon",
        listeners:{
            click: function(){

            }
        }
    });

    var logonButton = new Ext.Button({
        text: 'Go!',
        listeners:{
            click: function(){
                        showLogon();
            }
        }
    });

//-------------------VARIABLES----------------------

    var userIDTextField = new Ext.form.TextField({
        fieldLabel: 'User ID'
    });

    var passwordTextField = new Ext.form.TextField({
        fieldLabel: 'Password'
    });

    var logonFieldSet = new Ext.form.FieldSet({
        title: 'Log On',
        items:[userIDTextField, passwordTextField],
        buttons: [logonButton]
    });

    var logonPanel = new Ext.Panel ({
        layout: 'bordered',
        fieldLabel: 'Test',
        width: 100,
        height: 50,
        items:[logonFieldSet],
        buttons:[logonButton]

    });

    var loginWindow = new Ext.Window({
        width:500,
        layout:'form',
        closable:false,
        draggable:false,
        resizable:false,
        header:false,
        items:[logonPanel]
    });

    var topPanel = new Ext.Panel ({
        region: 'north',
        html: "<img src=inc/lib/messageconnection.gif>",
        height: 50
    });

    var typeStore = new Ext.data.SimpleStore({
        fields: ['id', 'name'],
        data: [['inbox', 'Inbox'], ['sent', 'Sent']]
    });

    var typeCombo = new Ext.form.ComboBox({
        fieldLabel: 'Location',
        store: typeStore,
        mode: 'local',
        valueField: 'id',
        displayField: 'name',
        editable: false,
        width: 143,
        triggerAction: "all",
        allowBlank: false,
        listeners:{
            afterrender: function(typeCombo) {
                var recordSelected = typeCombo.getStore().getAt(0);
                typeCombo.setValue(recordSelected.get('name'));
            }
        }
    });

/*  var userStore = new Ext.data.SimpleStore({
        fields: ['userName', 'subjectTitle', 'dateEntered']
    });*/

    var inboxStore = new Ext.data.Store ({
        autoLoad: false,
        url: '../../../messaging/inc/action.php?list=messages',
        reader: new Ext.data.JsonReader({
            root: 'messages',
            id: 'id',
            fields: ['id', 'userid', 'subject', 'opened', 'sent', 'username']
        })
    });

    var inboxGrid = new Ext.grid.GridPanel({
        listeners: {
            rendered: function(){
                inboxStore.load();
            },
            rowclick: function(){

            }
        },
        title: 'Inbox',
        store: inboxStore,
        colModel: new Ext.grid.ColumnModel({
        defaults: {
            width: 550,
            sortable: true
        },
        columns:[
            {id: 'UserName', header: 'User', dataIndex: 'userid'},
            {id: 'Subject', header: 'Subject', dataIndex: 'subject'},
            {id: 'Sent', header: 'Date', dataIndex: 'sent', renderer: Ext.util.Format.dateRenderer('Y/m/d')}
        ]
        })
    });

//-------------------PANELS/VIEWPORT----------------------

    var messagesListPanel = new Ext.Panel ({
        region: 'center',
        layout: 'form',
        autoScroll: true,
        hideBorders: true,
        anchor: '100% 40%',
        items: [inboxGrid]
    });

    var messagePanel = new Ext.Panel ({
        region: 'south',
        layout: 'form',
        autoScroll: true,
        hideBorders: true,
        anchor: '100% 60%'
    });

    var clickMeToolbar = new Ext.Toolbar ({
        items: ['Location:',[typeCombo],['->', '-', receiveButton, '-', newButton, '-', replyButton, '-', deleteButton, '-']]
    });

    var centerPanel = new Ext.Panel ({
        layout: 'anchor',
        title: 'Messaging',
        iconCls: "email-icon",
        region: 'center',
        tbar: clickMeToolbar,
        items: [messagesListPanel, messagePanel]
    });

    var tabPanel = new Ext.TabPanel ({
        region: 'center',
        activeTab: 0,
        items: [centerPanel]
    });

    var mainViewport = new Ext.Viewport ({
        layout: 'border',
        items: [topPanel, tabPanel]
    });
});