function renderForm() {
	Ext.QuickTips.init();
	Ext.form.Field.prototype.msgTarget = 'under';
	
	var stateStore = new Ext.data.SimpleStore({
        fields: ['abbr', 'state', 'nick'],
        data : Ext.combodata.states
    });

	var colorStore = new Ext.data.SimpleStore({
		fields: ['val', 'label'],
		data: Ext.combodata.colors
	});
	
	var colorSpaceStore = new Ext.data.SimpleStore({
		fields: ['val', 'label'],
		data: Ext.combodata.colorSpaces
	});
	
	var imageFormatStore = new Ext.data.SimpleStore({
		fields: ['val', 'label'],
		data: Ext.combodata.imageFormats
	});
	
	var mediaStore = new Ext.data.SimpleStore({
		fields: ['val', 'label'],
		data: Ext.combodata.media
	});
	
	var totalHeight = new Ext.form.TextField({
		fieldLabel: 'Total Height',
		id: 'totalHeightInput'
	});
	
	var totalWidth = new Ext.form.TextField({
		fieldLabel: 'Total Width',
		id: 'totalWidthInput'
	});
	
	var uploader = new Ext.ux.FileUploader({
		storageURL: 'http://dittoeditions.com/upload.php',
		pollURL: 'http://dittoeditions.com/upload.php'
	});
	
	var fileField = new Ext.form.TextField({
		autoCreate: {tag: "input", type: "file", size: "20", autocomplete: "off"},
        fieldLabel: 'Select Your File',
        name: 'imageFile',
		id: 'imageFile',
		width: 200,
		allowBlank: false
    });
	
	var form = new Ext.form.FormPanel({
		border: false,
		bodyBorder: false,
		header: false,
	    hideBorders: true,
		url: '/upload',
		method: 'POST',
		items: [{
			layout:'column',
			title: 'Personal Information',
			items:[{
			    columnWidth:.5,
			    layout: 'form',
			    items: [{
			        xtype:'textfield',
			        fieldLabel: 'First Name',
			        name: 'first',
					width: 200,
					allowBlank: false
			    }, {
			        xtype:'textfield',
			        fieldLabel: 'Address',
			        name: 'address',
					width: 200
			    }, {
			      	xtype:'textfield',
				    fieldLabel: 'City',
				    name: 'city',
					width: 200
			    },
				new Ext.form.ComboBox({
					name: 'state',
					fieldLabel: 'State',
			        store: stateStore,
			        displayField:'state',
			        typeAhead: true,
					forceSelection: true,
			        mode: 'local',
			        triggerAction: 'all',
			        emptyText:'Select a state...',
			        selectOnFocus:true,
					width: 200
				}), {
				  	xtype:'textfield',
				    fieldLabel: 'Zip',
				    name: 'zip',
					width: 90	
				}
			]
			},{
			    columnWidth:.5,
			    layout: 'form',
			    items: [{
			        xtype:'textfield',
			        fieldLabel: 'Last Name',
			        name: 'last',
					width: 200,
					allowBlank: false
			    },{
			        xtype:'textfield',
			        fieldLabel: 'Email',
			        name: 'email',
			        vtype:'email',
					width: 200
			    },{
			        xtype:'textfield',
			        fieldLabel: 'Phone',
			        name: 'phone',
					width: 200
			    }
			]
			}]
		},
		{
			layout:'column',	
			title: 'Digital File Information',
			items:[{
				columnWidth:.5,
			    layout: 'form',
			    items: [{
				    xtype:'textfield',
			        fieldLabel: 'Title',
			        name: 'title',
					width: 200,
					allowBlank: false
				},
				new Ext.form.NumberField({
					fieldLabel: 'Resolution (DPI)',
					name: 'resolution',
					width: 100,
					allowBlank: false,
					allowNegative: false,
					decimalPrecision: 0
				}),
				new Ext.form.NumberField({
					fieldLabel: 'Number of Prints',
					name: 'numberOfPrints',
					width: 100,
					allowBlank: false,
					allowNegative: false,
					decimalPrecision: 0
				}),
				new Ext.form.ComboBox({
					name: 'colorMode',
					fieldLabel: 'Color Mode',
			        store: colorStore,
			        displayField:'label',
			        typeAhead: true,
					forceSelection: true,
			        mode: 'local',
			        triggerAction: 'all',
			        emptyText:'Select a color mode...',
			        selectOnFocus:true,
					width: 200
				}),
				new Ext.form.ComboBox({
					name: 'colorSpace',
					fieldLabel: 'Color Space',
			        store: colorSpaceStore,
			        displayField:'label',
			        typeAhead: true,
					forceSelection: true,
			        mode: 'local',
			        triggerAction: 'all',
			        emptyText:'Select a color space...',
			        selectOnFocus:true,
					width: 200
				}),
				new Ext.form.ComboBox({
					name: 'imageFormat',
					fieldLabel: 'Image Format',
			        store: imageFormatStore,
			        displayField:'label',
			        typeAhead: true,
					forceSelection: true,
			        mode: 'local',
			        triggerAction: 'all',
			        emptyText:'Select an image format...',
			        selectOnFocus:true,
					width: 200
				}),
				new Ext.form.ComboBox({
					name: 'media',
					fieldLabel: 'Media',
			        store: mediaStore,
			        displayField:'label',
			        typeAhead: true,
					forceSelection: true,
			        mode: 'local',
			        triggerAction: 'all',
			        emptyText:'Select a media type...',
			        selectOnFocus:true,
					width: 200
				})
			]
			}, {
				columnWidth:.5,
			    layout: 'form',
			    items: [
					new Ext.form.NumberField({
						fieldLabel: 'Image Height',
						id: 'height',
						name: 'height',
						width: 100,
						allowBlank: true,
						allowNegative: false,
						decimalPrecision: 2
					}),
					new Ext.form.NumberField({
						fieldLabel: 'Image Width',
						id: 'width',
						name: 'width',
						width: 100,
						allowBlank: true,
						allowNegative: false,
						decimalPrecision: 2
					}),
					new Ext.form.NumberField({
						fieldLabel: 'Margin (Top)',
						id: 'marginTop',
						name: 'marginTop',
						width: 100,
						allowBlank: true,
						allowNegative: false,
						decimalPrecision: 2
					}),
					new Ext.form.NumberField({
						fieldLabel: 'Margin (Sides)',
						id: 'marginSides',
						name: 'marginSides',
						width: 100,
						allowBlank: true,
						allowNegative: false,
						decimalPrecision: 2
					}),
					new Ext.form.NumberField({
						fieldLabel: 'Margin (Bottom)',
						id: 'marginBottom',
						name: 'marginBottom',
						width: 100,
						allowBlank: true,
						allowNegative: false,
						decimalPrecision: 2
					}),
					totalHeight,
					totalWidth
				]
			}]
		}, {
			layout: 'form',
		    items: [
				new Ext.form.TextArea({
					fieldLabel: 'Other Instructions',
					name: 'other',
					width: 570,
					grow: true
				})
		    ]
		}]
	});	
	
	 //, {
	// 			layout:'column',
	// 			title: 'Your File',
	// 			items:[{
	// 			    columnWidth:.5,
	// 			    layout: 'form',
	// 			    items: [fileField]
	// 			}]
	// 		}
	

	totalHeight.on('render',function() {
		var heightInput = Ext.get('totalHeightInput');
		var heightSpan = Ext.get('totalHeight');
		heightSpan.setTop(heightInput.getTop());
		heightSpan.setLeft(heightInput.getLeft());
		heightInput.remove();
		heightSpan.dom.innerHTML = 'N/A';	
	});
	
	totalWidth.on('render',function() {
		var widthInput = Ext.get('totalWidthInput');
		var widthSpan = Ext.get('totalWidth');
		widthSpan.setTop(widthInput.getTop());
		widthSpan.setLeft(widthInput.getLeft());
		widthInput.remove();
		widthSpan.dom.innerHTML = 'N/A';		
	});
	
	var recalcTotalFields = function() {
		// Height
		var height = form.getForm().findField('height').getValue();
		var marginTop = form.getForm().findField('marginTop').getValue();
		var marginBottom = form.getForm().findField('marginBottom').getValue();
		if (!marginTop || marginTop == '') { marginTop = 0; }
		if (!height || height == '') { height = 0; }
		if (!marginBottom || marginBottom == '') { marginBotton = 0; }
		Ext.get('totalHeight').dom.innerHTML = height + marginTop + marginBottom;
		
		// Width
		var width = form.getForm().findField('width').getValue();
		var marginSides = form.getForm().findField('marginSides').getValue();
		if (!width || width == '') { width = 0; }
		if (!marginSides || marginSides == '') { marginSides = 0; }
		Ext.get('totalWidth').dom.innerHTML = width + (marginSides * 2);
		
	};
	
	form.on('render',function() {
		// Setup the listeners for the onChange event for the various fields
		var fields = new Array('height','width','marginTop','marginSides','marginBottom');
		for (var i=0;i<fields.length;i++) {
			var f = form.getForm().findField(fields[i]);
			if (f) {
				f.on('change',recalcTotalFields);
			}
		}	
	});
	
	form.addButton({
		text: 'Reset',
		id: 'reset',
		type: 'reset',
		handler: function(btn) {
			form.getForm().reset();
			recalcTotalFields();
		}
	});
	
	form.getForm().on('actioncomplete',function() {
		document.location = 'http://dropbox.yousendit.com/usi-ditto';
	});
	
	fileField.on('render',function() {
		uploader.addFile(Ext.get('imageFile').dom,'imageFile');
	});
	
	function startUpload() {
		uploader.upload();
		//form.getForm().submit();
	}
	
	form.addButton({
		text: 'Submit',
		id: 'submit',
		type: 'submit',
		handler: function(btn) {
		//	if (form.getForm().isValid()) {				
		//		startUpload();
		//	} else {
		//		form.getForm().submit();
		//	}
			form.getForm().submit();
		}
	});

	form.render(Ext.get('form'));
	form.getForm().clearInvalid();

}

Ext.onReady(renderForm);