Ext.onReady(function()
{
	var mainDisplay = new Ext.Viewport(
	{
		layout: 'border',
		border: false,
		items:
		[
		{
			region: 'north',
			height: 30,
			xtype: 'panel',
			border: false,
			layout: 'border',
			items:
			[ 
			{
				region: 'center',
				border: false,
				html: '<div id="header"><p>&nbsp;Molamini Software</p></div>'
			} ]
		},
		{
			region: 'west',
			width: 50,
			border: false
			//html: "I'm in the west"
		},
		{
			region: 'east',
			//html: "here in the east"
			width: 50,
			border: false
		},
		{
			region: 'center',
			xtype: 'tabpanel',
			activeTab: 0,
			items:
			[
				{
					title: "Home",
					autoLoad: "home.html",
					xtype: "panel"
				},
				{
					title: "Samples",
					html: "coming soon...."
				},
				{
					id: 'topOfForm',	
					labelAlign: 'top',
					frame:true,
					title: 'Contact Us',
					bodyStyle:'padding:5px 5px 0',
					width: 600,
					items: [{
						layout:'column',
						items:[{
							id: 'form',
							columnWidth:.5,
							xtype: 'form',
							layout: 'form',
							items: [{
								xtype:'textfield',
								fieldLabel: 'First Name',
								name: 'first',
								anchor:'95%'
							}, {
								xtype:'textfield',
								fieldLabel: 'Last Name',
								name: 'last',
								anchor:'95%'
							}]
						},{
							columnWidth:.5,
							layout: 'form',
							items: [{
								xtype:'textfield',
								fieldLabel: 'Company',
								name: 'company',
								itemId: 'company',
								anchor:'95%'
							},{
								xtype:'textfield',
								fieldLabel: 'Email',
								name: 'email',
								itemId: 'email',
								vtype:'email',
								anchor:'95%'
							}]
						}]
					},{
						xtype:'htmleditor',
						id:'bio',
						name: 'message',
						itemId: 'message',
						fieldLabel:'Message',
						height:200,
						anchor:'98%'
					}],
					
					buttons: [{
						text: 'send',
						handler: function () {
							// when this button clicked, sumbit this form
							var simpleForm = Ext.getCmp('form');
							simpleForm.getForm().submit({
								url: '/process/ContactUsForm.cgi',
								method: 'post',
								params: 
								{
									email: Ext.getCmp('topOfForm').find('itemId', 'email')[0].getValue(),
									company: Ext.getCmp('topOfForm').find('itemId', 'company')[0].getValue(),
									message: Ext.getCmp('topOfForm').find('itemId', 'message')[0].getValue()
								},
								waitMsg: 'Saving...',		// Wait Message
								success: function () {		// When saving data success
									//Ext.MessageBox.alert ('Message','Data has been saved');
									//form.getEl().dom.innerHTML="all done!" ;
									// clear the form
									//simpleForm.getForm().reset();
									var simpleForm = Ext.getCmp('topOfForm');
									simpleForm.load({
										url: '/process/thankyou.jsp',
										params: {param1: 'foo', param2: 'bar'}, // or a URL encoded string
										//callback: function(,
										//scope: yourObject, // optional scope for the callback
										//discardUrl: false,
										nocache: false,
										text: 'Loading...',
										timeout: 30,
										scripts: false
									});
								},
								failure: function () {		// when saving data failed
									Ext.MessageBox.alert ('Message','Saving data failed');
								}
							});
						}



					},{
						text: 'Cancel'
					}]
				}
			]

		},
		{
			region: 'south',
			html: '<p class="header">Molamini Software<br/>Contact: James Moliere<br/>5093 Conrad Ave., San Diego, CA 92117<br/>858-277-1760</p>'
		}
		]
	});
});