var buildTheSearch;
var whatYouWant;
var findHomesBoxes=1;
var helpdlg;
var loginClicked;

Ext.onReady(function() {
	configureForm();
});

function configureForm() {
	createForms();
	
	
	whatYouWant = new Ext.form.FieldSet({
		layout: 'form',
		renderTo: 'searchForm',
		border: false,
		vertical: true,
		autoHeight: true,
		columnWidth: 1,
		items: [buildTheSearch]
	});
	var searchForm = new Ext.FormPanel({
		layout: 'form',
		autoHeight: true,
		items: [whatYouWant]
	});
	
};

function addFindhomesBox() {
	var expandable = whatYouWant.findById('expandable');
	var plusButtonColumn = whatYouWant.findById('plusButtonColumn');
	//Stop once there's 10 boxes
	if (findHomesBoxes < 10) {
		existingEntries = "findhomes" + findHomesBoxes + 1;
		//moveThePlusBtn();
		newBox = new Ext.ux.LocationCombo({
			name: 'location',
			fieldLabel: 'or',
			hiddenName: 'location',
			//vertical: true,
			anchor: '95%',
			listWidth: 250,
			maxHeight: 200
		});
		newSpacer = new Ext.ux.form.Spacer({
			height: 26
		});
		expandable.insert(findHomesBoxes, newBox);
		plusButtonColumn.insert(findHomesBoxes, newSpacer);
		//When there's 10 boxes, hide the extra box and the + button
		if (findHomesBoxes == 9) {
			var extrafield = whatYouWant.findById('extrafield');
			expandable.remove(extrafield);
			var plusbutton = whatYouWant.findById('plusButton');
			plusbutton.hide();
		}
	}
	findHomesBoxes++;
	expandable.doLayout();
	plusButtonColumn.doLayout();
};

function createForms() {
	theInputBoxAndLabel = {
		layout: 'form',
		defaultType: 'label',
		id: 'expandable',
		//columnWidth: .35,
		width: 330,
		border: false,
		vertical: true,
		items: [
			new Ext.ux.LocationCombo({
				id: 'thelocation',
				cls: 'inputLabel',
				name: 'location',
				anchor: '95%',
				fieldLabel: 'Find homes in',
				hiddenName: 'location',
				listWidth: 250,
				maxHeight: 200
			}),{
				cls: 'inputDisabled',
				name: 'extrafield',
				anchor: '95%',
				labelSeparator: '',
				xtype: 'textfield',
				emptyText: 'Add Multiple Locations',
				disabled: true
			},{
				cls: 'searchHint',
				text: 'e.g. `Plymouth`, `PL3`, `PL9 7LN` or `Devon`'
			}]
	};
	thePlusButton = {
		layout: 'form',
		width: 40,
		border: false,
		vertical: true,
		id: 'plusButtonColumn',
		cls: 'x-form-item thePlusButtonDiv', 
		items: [ 
		    new Ext.ux.form.Spacer({
		    		height: 26
		    }),{
				html: '<img class="thePlusBtn" onclick="addFindhomesBox()" src="images/common/add.gif" />',
				id: 'plusButton',
				border: false,
				hideMode: 'visibility'
		}]
	};
	theSearchButton = {
		layout: 'column',
		columnWidth: 1,
		//width: 150,
		autoWidth: true,
		border: false,
		vertical: true,
		cls: 'x-form-item', 
		items: [{
			columnWidth: .5,
			html: '<div id="forsale" class="greenbtns left"><input class="greenrollover" name="forsale" value="For Sale" type="submit" /></div>',
			id: 'forSaleButton',
			border: false,
			hideMode: 'visibility'
		},{
			columnWidth: .5,
			html: '<div id="torent" class="greenbtns left"><input class="greenrollover" name="torent" value="To Rent" type="submit" /></div>',
			id: 'forSaleButton',
			border: false,
			hideMode: 'visibility'
		}]
	};

	
	buildTheSearch = {
		layout: 'column',
		border: false,
		items: [theInputBoxAndLabel, thePlusButton]
	};
	
};

/*function searchAll() {
	var searchForm = document.forms.propertysearch;
	searchForm.includeWithoutDesires.value = true;
	var hiddenSort = document.createElement("input");
	hiddenSort.setAttribute("type", "hidden");
	hiddenSort.setAttribute("name", "sort");
	hiddenSort.setAttribute("value", "pPrice,desc");
	searchForm.appendChild(hiddenSort);
	searchForm.submit();
};*/