var guestbookContent = {
	id: 'guestbookContent',
    xtype: 'panel',
    frame: false,
    border: false,
    autoScroll: true,
    defaults: {
        bodyStyle: 'background-color:lightgrey; border: none',
        bodyClass: 'text-normal'
    },
    buttonAlign: 'left',
    bodyStyle: 'border-bottom: 1px solid black',
    fbar: [{
    	xtype: 'button',
    	id: 'signGbButton',
        text:'Sign our Guestbook',
        cls: 'x-icon-btn',
        handler: function(){
        	SignGuestbook();
        }
    }],
    items: [{
    	id: 'guestbookDisplay',
		data: guestbook,
		tpl: new Ext.XTemplate([
			'<br/>',
			'<tpl for=".">',
			'<span class="text-bold">{comments}</span><br/><br/>',
			'<span class="text-normal">{name}<br/>',
			'<tpl if="website"><a target="_ExtraCamdenUrl" href="{website}">{website}</a><br/></tpl>',
			'{city}, {state}<br/>',
			'{date}',
			'<tpl if="pending"><br/>(Your entry is awaiting administrator approval.)</tpl>',
			'</span><hr/>',
			'</tpl><br/>'
        ])
    }]
};

function SignGuestbook()
{
    var win = new Ext.Window({
		renderTo: 'guestbookContent',
		autoScroll: true,
		title: 'Sign Guestbook',
        width: 450,
        autoHeight: true,
        maximizable: true,
        closeAction: 'close',
        plain: true,
		modal: true,
		border: false,
		items: [{
			xtype: 'form',
			id: 'guestbookForm',
			url:'/SubmitGuest',
			labelWidth: 115,
			bodyStyle: 'padding:5px 5px 5px 5px',
		    items: [{
		        xtype: 'textfield',
		        name: 'name',
		        fieldLabel: 'Name',
		        emptyText: '',
		        width: 200
		    },{
		        xtype: 'textfield',
		        name: 'email',
		        fieldLabel: 'Email',
		        emptyText: '',
		        width: 200
		    },{
		        xtype: 'textfield',
		        name: 'city',
		        fieldLabel: 'City',
		        emptyText: '',
		        width: 200
		    },{
		        xtype: 'textfield',
		        name: 'state',
		        fieldLabel: 'State',
		        emptyText: '',
		        width: 50,
		        maxLength: 2
		    },{
		        xtype: 'textfield',
		        name: 'website',
		        fieldLabel: 'Your Website',
		        emptyText: '',
		        width: 200
		    },{
		        xtype: 'textarea',
		        name: 'comments',
		        fieldLabel: 'Comments',
		        emptyText: '',
		        width: 300
		    }]
		}],
		buttonAlign: 'left',
        fbar: [{
	    	xtype: 'button',
	        text:'Submit Comments',
	        cls: 'x-icon-btn',
	        handler: function(){
	        	var guestbookForm = Ext.getCmp("guestbookForm");
	        	guestbookForm.getForm().submit({
					url:'/SubmitGuest',
					waitMsg: 'Submitting...',
				    success: function(form, action) {
				    	
						// Add to local guestbook, and re-apply template.
						formValues = form.getValues();
						guestbook.unshift({
							name: formValues.name,
							comments: formValues.comments,
							website: (formValues.website ? formValues.website : null),
							city: formValues.city,
							state: formValues.state,
							date: (new Date().format('Y-m-d')),
							pending: true
				    	});
				    	
				    	guestbookDisplay = Ext.getCmp('guestbookDisplay');
				    	guestbookDisplay.data = guestbook;
				    	guestbookDisplay.tpl.overwrite(guestbookDisplay.body, guestbookDisplay.data);
				    	
		                win.hide();
		                win.destroy();
				    	
				    	Ext.getCmp('signGbButton').disable();
				    	
						Ext.MessageBox.alert('Comments Submitted',
							'Your comments have been submitted to be added to our guestbook. Thank you for your feedback');
				    },
				    failure: function(form, action) {
				        switch (action.failureType) {
				            case Ext.form.Action.CLIENT_INVALID:
				                Ext.Msg.alert('Failure', 'Form fields may not be submitted with invalid values');
				                break;
				            case Ext.form.Action.CONNECT_FAILURE:
				                Ext.Msg.alert('Failure', 'Server or connection failure');
				                break;
				            case Ext.form.Action.SERVER_INVALID:
				               Ext.Msg.alert('Failure', action.result.msg);
				       }
				    }
	        	});
	    	}
        },{
        	xtype: 'tbfill'
        },{
        	xtype: "button",
            text: 'Close',
            handler: function(){
                win.hide();
                win.destroy();
            }
        }]
    });
        
    win.show();
}