Ext.setup({
    glossOnIcon: false,
    onReady: function() {

        var tpl = Ext.XTemplate.from('guests');
		
		Ext.regModel('User', {
            fields: [
                { name: 'id',       type: 'string' },
                { name: 'name',     type: 'string' },
                { name: 'email',    type: 'string' },
                { name: 'url',      type: 'string' },
                { name: 'message',  type: 'string' }
            ]
        });
		
		var formBase =  new Ext.form.FormPanel({
            scroll: 'vertical',
            url   : 'http://www.zolosports.com/server.php',
            standardSubmit : false,
            title: 'Guestbook',
            items: [{
                xtype: 'fieldset',
                title: '',
                instructions: 'Please complete the information.',
                defaults: {
                    labelAlign: 'left',
                    labelWidth: '40%'
                },
                items: [
                    {
                    xtype: 'textfield',
                    name : 'name',
                    label: 'Name',
                    useClearIcon: true,
                    autoCapitalize : false
                }, {
                    xtype: 'emailfield',
                    name : 'email',
                    label: 'Email',
                    placeHolder: 'me@yurl.com',
                    useClearIcon: true
                }, {
                    xtype: 'urlfield',
                    name : 'url',
                    label: 'Url',
                    placeHolder: 'http://yurl.com',
                    useClearIcon: true
                }, {
                    xtype: 'textareafield',
                    name : 'message',
                    label: 'Message',
                    maxLength: 50,
                    maxRows: 5,
                    height: 120
                }]
            }],
        
            dockedItems: [{
                xtype: 'toolbar',
                dock: 'bottom',
                items: [{
                    xtype: 'spacer'
                }, {
                    text: 'Reset',
                    handler: function() {
                        formBase.reset();
                    }
                }, {
                    text: 'Save',
                    ui: 'confirm',
                    handler: function() {
                        formBase.submit({
                            waitMsg: {
                                message:'Submitting',
                                cls : 'demos-loading'
                            },
                            success: function(e) {
                                showCenteredOverlay();
                                formBase.reset();
                            }
                        });
                    }
                }]
            }]
        });

        var overlayTb = new Ext.Toolbar({
            dock: 'top'
        });

        var overlay = new Ext.Panel({
            floating: true,
            modal: true,
            centered: true,
            width: Ext.is.Phone ? 260 : 400,
            height: 60,
            dockedItems: overlayTb
        });

        var showCenteredOverlay = function() {
            overlayTb.setTitle('Data Inserted');
            overlay.show();
        };

        function showRecent() {
            Ext.Ajax.request({
                url: 'http://www.zolosports.com/server.php?action=get',
                success: function(e) {
                    var obj = Ext.util.JSON.decode(e.responseText);
                    var guests = obj.guests;
                    if (guests) {
                        var html = tpl.applyTemplate(guests);
                        Ext.getCmp('recentTab').update(html);
                    }
                }
            });
        }
		
        new Ext.TabPanel({
            fullscreen: true,
            type: 'dark',
            sortable: true,
            items: [formBase, {
                id: 'recentTab',
                title: 'Recent Guests',
                html: '2',
                scroll: 'vertical',
                cls: 'recent',
                listeners: {
                    'beforeshow': showRecent
                }
            }]
        });
    }
});