/**
    @function displayContactWindow
    @description Creates a popup window form for users to contact the webmaster.
*/
function displayContactWindow() {
    var fnameField = new Ext.form.TextField({
        allowBlank: false,
        fieldLabel: 'First Name',
        name: 'Firstname',
        inputType: 'text',
        width: 200
    });

    var lnameField = new Ext.form.TextField({
        allowBlank: false,
        fieldLabel: 'Last Name',
        name: 'Lastname',
        inputType: 'text',
        width: 200
    });

    var phoneField = new Ext.form.TextField({
        allowBlank: false,
        fieldLabel: 'Phone',
        name: 'Phone',
        inputType: 'text',
        width: 200
    });

    var emailField = new Ext.form.TextField({
        allowBlank: false,
        fieldLabel: 'Email',
        name: 'Email',
        inputType: 'text',
        width: 200
    });

    var msgField = new Ext.form.TextArea({
        allowBlank: false,
        fieldLabel: 'Message',
        name: 'Comments',
        inputType: 'text',
        height: 100,
        width: 400
    });

    var contactForm = new Ext.form.FormPanel({
        autoHeight: true,
        width: 600,
        labelWidth: 100,
        frame: true,
        shadow: true,
        items: [ 
            fnameField,
            lnameField,
            phoneField,
            emailField,
            msgField
        ],
        buttons: [
            {
                text: 'Send',
                type: 'submit',
                handler: function() {
                    var connection = new Ext.data.Connection({
                        url: 'forms/contact.aspx'
                    });

                    connection.request({
                        params: {
                            Firstname: fnameField.getValue(),
                            Lastname: lnameField.getValue(),
                            Email: emailField.getValue(),
                            Phone: phoneField.getValue(),
                            Comments: msgField.getValue()
                        }
                    });

                    //hide the window and clear the form
                    contactWindow.hide();
                    contactForm.getForm().reset();

                    Ext.Msg.alert(
                        'Contact Us',
                        'Your message has been sent!'
                    );
                }
            },//end SAVE button
            {
                text: 'Cancel',
                handler: function() {
                    //hide the window and clear the form
                    contactWindow.close();
                    contactForm.getForm().reset();
                }
            }//end CANCEL button
        ]
    });

    var contactWindow = new Ext.Window({
        animCollapse: true,
        animateTarget: CAD.Content.getId(),
        autoHeight: true,
        autoScroll: true,
        closeAction: 'close',
        layout: 'fit',
        items: [ contactForm ],
        modal: true,
        plain: true,
        title: 'Contact NW Chicago ExtJS User Group',
        width: 600
    });

    contactWindow.show();
};

Ext.onReady(function() {
    Ext.namespace('CAD', 'CAD.Content');
    
    CAD.Content = new Ext.TabPanel({
        activeTab: 0,
        renderTo: 'content',
        autoScroll: true,
        frame: true,
        height: 640,
        items: [
            {
                xtype: 'panel',
                contentEl: 'HomeTab',
                title: 'Home'
            },
            {
                xtype: 'panel',
                contentEl: 'NewsTab',
                title: 'News'
            }
        ]
    });
    CAD.Content.on(
        'render',
        function(thisComponent) {

        }
    );
    
});