function QueryBuilder(htmlElement)
{
	var self = this;
	//this.attributeRowCount = 0;
	this.attributeRowIdCount = 0;
	this.conditionRowIdCount = 0;
	//this.conditionRowCount = 0;
	this.queryLayerName = "";
	this.layer = new Layer();
	this.fillFieldList = fillFieldList;
	this.addAttributeRow = addAttributeRow;
	this.deleteAttributeRow = deleteAttributeRow;
	this.addCondition = addCondition;
	this.deleteCondition = deleteCondition;
	this.makeQuery = makeQuery;
	this.makeString = makeString;
	document.getElementById(htmlElement).innerHTML = 
		"<div id=\"queryBuilderStartPage\">" +
			"<table id=\"tblqueryBuilderStartPage\" cellpadding=\"4\" cellspacing=\"0\" border=\"0\" width=\"320px\">" + 
				"<tr class=\"searchExample\">" + 
					"<td>Welcome to the query builder.  This will allow you to create custom queries.  Click the next button to continue</td>" + 
				"</tr>" + 
				"<tr>" +
					"<table id=\"tblQueryBuilderButtons1\" cellpadding=\"2\" cellspacing=\"0\" border=\"0\" width=\"100%\">" + 
						"<tr class=\"trInfo\">" +
							"<td align=\"center\">" + 
								"<input type=\"button\" class=\"buttonNormal\" value=\"Next >\" onmouseover=\"this.className='buttonActive';\" onmouseout=\"this.className='buttonNormal';\" onclick=\"queryBuilderStartPage.style.display='none';queryBuilderLayerPage.style.display='block';\">" + 
							"</td>" + 
						"</tr>" + 
					"</table>" + 
				"</tr>" + 
			"</table>" + 
		"</div>" + 
		"<div id=\"queryBuilderLayerPage\" style=\"display:none;\">" + 
			"<table id=\"tblQueryBuilderLayerPage\" cellpadding=\"2\" cellspacing=\"0\" border=\"0\" width=\"100%\">" + 
				"<tr class=\"searchHeader\">" + 
					"<td align=\"center\">Select the layer to query on</td>" + 
				"</tr>" + 
				"<tr>" + 
					"<td align=\"center\">" + 
						"<select id=\"queryBuilderLayerPageDrop\">" + 
						"</select>" + 
					"</td>" + 
				"</tr>" + 
				"<tr>" + 
					"<table id=\"tblQueryBuilderButton2\" cellpadding=\"2\" cellspacing=\"0\" border=\"0\" width=\"100%\">" + 
						"<tr class=\"trInfo\">" + 
							"<td align=\"center\">" + 
								"<input type=\"button\" class=\"buttonNormal\" value=\"< Previous\" onmouseover=\"this.className='buttonActive';\" onmouseout=\"this.className='buttonNormal';\"onclick=\"queryBuilderStartPage.style.display='block';queryBuilderLayerPage.style.display='none';\">" + 
							"</td>" + 
							"<td align=\"center\">" + 
								"<input type=\"button\" class=\"buttonNormal\" value=\"Next >\" onmouseover=\"this.className='buttonActive';\" onmouseout=\"this.className='buttonNormal';\" onclick=\"queryBuilderLayerPage.style.display='none';queryBuilderAttributePage.style.display='block';queryBuilder.fillFieldList(queryBuilderLayerPageDrop.options[queryBuilderLayerPageDrop.selectedIndex].value,'queryBuilderAttributePageDrop');\">" + 
							"</td>" + 
						"</tr>" + 
					"</table>" + 
				"</tr>" + 
			"</table>" + 
		"</div>" + 
		"<div id=\"queryBuilderAttributePage\" style=\"display:none;\">" + 
			"<table id=\"tblQueryBuilderAttributePage\" cellpadding=\"2\" cellspacing=\"0\" border=\"0\" width=\"100%\">" + 
				"<tr class=\"searchHeader\">" + 
					"<td align=\"center\" colspan = \"3\">Select the attributes to display</td>" + 
				"</tr>" + 
				"<tr>" + 
					"<td align=\"center\">" + 
						"<select id=\"queryBuilderAttributePageDrop\">" + 
						"</select>" + 
					"</td>" + 
				"</tr>" +
				"<tr>" + 
					"<table id=\"tblQueryBuilderButton3\" cellpadding=\"2\" cellspacing=\"0\" border=\"0\" width=\"100%\">" + 
						"<tr class=\"trInfo\">" + 
							"<td align=\"center\" colspan=\"3\">" + 
								"<input type=\"button\" align = \"center\" class=\"buttonNormal\" value=\"Add Attribute\" onmouseover=\"this.className='buttonActive';\" onmouseout=\"this.className='buttonNormal';\"onclick = \"queryBuilder.addAttributeRow('tblQueryBuilderAttributePage');\"/>" + 
							"</td>" + 
						"</tr>" +					
						"<tr class=\"trInfo\">" + 
							"<td align=\"center\">" + 
								"<input type=\"button\" class=\"buttonNormal\" value=\"< Previous\" onmouseover=\"this.className='buttonActive';\" onmouseout=\"this.className='buttonNormal';\"onclick=\"queryBuilderLayerPage.style.display='block';queryBuilderAttributePage.style.display='none';\">" + 
							"</td>" + 
							"<td align=\"center\">" + 
								"<input type=\"button\" class=\"buttonNormal\" value=\"Next >\" onmouseover=\"this.className='buttonActive';\" onmouseout=\"this.className='buttonNormal';\" onclick=\"queryBuilderAttributePage.style.display='none';queryBuilderConditionPage.style.display='block';queryBuilder.fillFieldList(queryBuilderLayerPageDrop.options[queryBuilderLayerPageDrop.selectedIndex].value,'queryBuilderConditionPageAttributeDrop');\">" + 
							"</td>" + 
						"</tr>" + 
					"</table>" + 
				"</tr>" + 
			"</table>" + 
		"</div>" + 
		"<div id=\"queryBuilderConditionPage\" style=\"display:none;\">" + 
			"<table id=\"tblQueryBuilderConditionPage\" cellpadding=\"2\" cellspacing=\"0\" border=\"0\" width=\"100%\">" + 
				"<tr class=\"searchHeader\">" + 
					"<td align=\"center\" colspan=\"4\">Select the conditions to match</td>" + 
				"</tr>" + 
				"<tr>" + 
					"<td align=\"right\">" + 
						"<select id=\"queryBuilderConditionPageAttributeDrop\"></select>" + 
					"</td>" +  
					"<td align=\"right\">" + 
						"<select id=\"queryBuilderConditionPageConditionDrop\">" + 
							"<option id=\"equalTo\" value=\"equalTo\">=</option>" + 
							"<option id=\"lessThan\" value=\"lessThan\"><</option>" + 
							"<option id=\"lessThanEqualTo\" value=\"lessThanEqualTo\"><=</option>" + 
							"<option id=\"greaterThan\" value=\"greaterThan\">></option>" + 
							"<option id=\"greaterThanEqualTo\" value=\"greaterThanEqualTo\">>=</option>" + 
							"<option id=\"notEqual\" value=\"notEqual\">!=</option>" + 
							"<option id=\"like\" value=\"like\">LIKE</option>" +
						"</select>" + 
					"</td>" + 
					"<td align=\"center\">" + 
						"<input class=\"searchBox\" type=\"text\" id=\"queryBuilderConditionPageValue\" size=\"6\"/>" + 
					"</td>" + 
				"</tr>" + 
				"<tr>" + 
					"<table id=\"tblQueryBuilderButton4\" cellpadding=\"2\" cellspacing=\"0\" border=\"0\" width=\"100%\">" + 
						"<tr class=\"trInfo\">" + 
							"<td align=\"center\" colspan=\"3\">" + 
								"<input type=\"button\" align = \"center\" class=\"buttonNormal\" value=\"Add Condition\" onmouseover=\"this.className='buttonActive';\" onmouseout=\"this.className='buttonNormal';\"onclick = \"queryBuilder.addCondition('tblQueryBuilderConditionPage');\"/>" + 
							"</td>" + 
						"</tr>" +	
						"<tr class=\"trInfo\">" + 
							"<td align=\"center\">" + 
								"<input type=\"button\" class=\"buttonNormal\" value=\"< Previous\" onmouseover=\"this.className='buttonActive';\" onmouseout=\"this.className='buttonNormal';\"onclick=\"queryBuilderAttributePage.style.display='block';queryBuilderConditionPage.style.display='none';\">" + 
							"</td>" + 
							"<td align=\"center\">" + 
								"<input type=\"button\" class=\"buttonNormal\" value=\"Next >\" onmouseover=\"this.className='buttonActive';\" onmouseout=\"this.className='buttonNormal';\" onclick=\"queryBuilderConditionPage.style.display='none';queryBuilderConfirmPage.style.display='block';queryBuilder.makeString()\">" + 
							"</td>" + 
						"</tr>" + 
					"</table>" + 
				"</tr>" + 
			"</table>" + 
		"</div>" + 
		"<div id=\"queryBuilderConfirmPage\" style=\"display:none;\">" + 
			"<table id=\"tblQueryBuilderConfirmPage\" cellpadding=\"2\" cellspacing=\"0\" border=\"0\" width=\"100%\">" + 
				"<tr class=\"searchHeader\">" + 
					"<td align=\"center\">This is the query you have selected.  Click continue to run or back to modify</td>" + 
				"</tr>" + 
				"<tr>" + 
					"<td id=\"queryDisplay\" align=\"center\">Query here</td>" + 
				"</tr>" + 
				"<tr>" + 
					"<table id=\"tblQueryBuilderButton5\" cellpadding=\"2\" cellspacing=\"0\" border=\"0\" width=\"100%\">" + 
						"<tr class=\"trInfo\">" + 
							"<td align=\"center\">" + 
								"<input type=\"button\" class=\"buttonNormal\" value=\"< Previous\" onmouseover=\"this.className='buttonActive';\" onmouseout=\"this.className='buttonNormal';\"onclick=\"queryBuilderConditionPage.style.display='block';queryBuilderConfirmPage.style.display='none';\">" + 
							"</td>" + 
							"<td align=\"center\">" + 
								"<input type=\"button\" id = \"continueButton\" class=\"buttonNormal\" value=\"Continue >\" onmouseover=\"this.className='buttonActive';\" onmouseout=\"this.className='buttonNormal';\"onclick=\"queryBuilder.makeQuery();\" >" + 
							"</td>" + 
						"</tr>" + 
					"</table>" + 
				"</tr>" + 
			"</table>" + 
		"</div>";
	function fillFieldList(layerName, elementToFill)
	{	
		var dropDown = document.getElementById(elementToFill);
		while( dropDown.length > 0 )
		{
			dropDown.remove(0);
		}
		var layer = new Layer();
		var fieldOptions = layer.getSearchableFields(layerName);
		if( !browser.isInternetExplorer() )
			dropDown.add( new Option("","",false,false),null );
		for( var i = 0; i < fieldOptions.length; i++ )
		{
			if( !browser.isInternetExplorer() )
				dropDown.add(fieldOptions[i],null);
			else
				dropDown.options[ i + 1 ] = fieldOptions[i];
		}
		//kill rows if layer changes
		if( this.queryLayerName != layerName && this.queryLayerName != null )
		{
			this.queryLayerName = layerName;
			var largerCount = 0;
			if( this.conditionRowIdCount > this.attributeRowIdCount )
				largerCount = this.conditionRowIdCount;
			else
				largerCount = this.attributeRowIdCount;
			for( var i = 0; i <= largerCount; i++ )
			{
				var attRow = document.getElementById("attRow"+i);
				var conRow = document.getElementById("conRow"+i);
				if( attRow != null )
					this.deleteAttributeRow("tblQueryBuilderAttributePage",i);
				if( conRow != null )
					this.deleteCondition("tblQueryBuilderConditionPage",i);
			}
		}
	}
	function addAttributeRow(table)
	{
		this.attributeRowIdCount = this.attributeRowIdCount + 1;
		var addToTable = document.getElementById(table);
		var row = addToTable.insertRow(addToTable.rows.length);
		row.setAttribute("id", "attRow" + this.attributeRowIdCount);
		var cellLeft = row.insertCell(0);
		var cellRight = row.insertCell(1);
		cellLeft.align = "center";
		cellRight.align = "right";
		cellRight.width = "16";
		var el = document.createElement("select");
		el.setAttribute("id", "queryBuilderAttributePageDrop" + this.attributeRowIdCount);
		var p2 = document.createElement("p");
		var p2text = "<img src = \"images\\minus_row.gif\" onclick = \"queryBuilder.deleteAttributeRow('tblQueryBuilderAttributePage'," + "'"  + this.attributeRowIdCount + "'" + ");\"/>"
		p2.innerHTML = p2text;
		cellLeft.appendChild(el);
		cellRight.appendChild(p2);
		this.fillFieldList(queryBuilder.queryLayerName, el.id);
	}
	function deleteAttributeRow(table, row)
	{
		var rowToDelete = document.getElementById("attRow" + row);
		var tableToChange = document.getElementById(table);
		var rowCount = tableToChange.rows.length;
		if( rowToDelete != null && tableToChange != null )
		{
			for( var i = 0; i < tableToChange.rows.length; i++ )
			{
				if( tableToChange.rows[i].id == rowToDelete.id )
					tableToChange.deleteRow(i);
			}
		}
	}
	function addCondition(table)
	{
		this.conditionRowIdCount = this.conditionRowIdCount + 1;
		var addToTable = document.getElementById(table);
		var row1 = addToTable.insertRow(addToTable.rows.length);
		row1.setAttribute("id" , "conRow" + this.conditionRowIdCount);
		var cellLeft = row1.insertCell(0);
		var cellCenter = row1.insertCell(1);
		var cellRight = row1.insertCell(2);
		var minusCell = row1.insertCell(3);
		cellLeft.align = "center";
		cellCenter.align = "center";
		cellRight.align = "center";
		minusCell.align = "right";
		minusCell.width = "16";
		var el = document.createElement("select");
		el.setAttribute("id", "queryBuilderConditionPageAttributeDrop" + this.conditionRowIdCount);
		cellLeft.appendChild(el);
		var conditionDrop = document.createElement("select");
		conditionDrop[0] = new Option( "=" , "equalTo" , false , false );
		conditionDrop[1] = new Option( "<" , "lessThan" , false , false );
		conditionDrop[2] = new Option( "<=" , "lessThanEqual" , false , false );
		conditionDrop[3] = new Option( ">" , "greaterThan" , false , false );
		conditionDrop[4] = new Option( ">=" , "greaterThanEqual", false , false );
		conditionDrop[5] = new Option( "!=" , "notEqual" , false , false );
		conditionDrop[6] = new Option( "LIKE" , "like" , false , false );
		conditionDrop.setAttribute("id","queryBuilderConditionPageConditionDrop"+this.conditionRowIdCount);
		cellCenter.appendChild(conditionDrop);
		var value = document.createElement("input");
		value.size = 6;
		value.type = "text";
		value.className = "searchBox";
		value.setAttribute("id","queryBuilderConditionPageValue"+this.conditionRowIdCount);
		cellRight.appendChild(value);
		var p = document.createElement("p");
		var ptext = "<img src = \"images\\minus_row.gif\" onclick = \"queryBuilder.deleteCondition('tblQueryBuilderConditionPage'," + "'"  + this.conditionRowIdCount + "'" + ");\"/>";
		p.innerHTML = ptext;
		minusCell.appendChild(p);
		this.fillFieldList(queryBuilder.queryLayerName, el.id);
	}
	function deleteCondition(table, row)
	{	
		var rowToDelete = document.getElementById("conRow" + row);
		var tableToChange = document.getElementById(table);
		if( rowToDelete != null && tableToChange != null )
		{
			for( var i = 0; i < tableToChange.rows.length; i++ )
			{
				if(tableToChange.rows[i].id == rowToDelete.id)
					tableToChange.deleteRow(i);
			}
		}
	}
	function makeString()
	{
		var attributeTable = document.getElementById("tblQueryBuilderAttributePage");
		var attributeDrop = document.getElementById("queryBuilderAttributePageDrop");
		var display = new String();
		if( attributeDrop.value != null && attributeDrop.value != "" )
		{
			display = "<p class = \"searchExample\"> SELECT " + attributeDrop.value;
			for(var i = 0; i <= this.attributeRowIdCount; i++)
			{
				attributeDrop = document.getElementById("queryBuilderAttributePageDrop" + i);
				if(attributeDrop != null)
				{	
					if( attributeDrop.value != null && attributeDrop.value != "" )
						display = display  + ", " + attributeDrop.value;
				}
			}	
			display = display + " FROM " + this.queryLayerName;	
		}
		var conditionAttributeDrop = document.getElementById("queryBuilderConditionPageAttributeDrop");
		var conditionConditionDrop = document.getElementById("queryBuilderConditionPageConditionDrop");
		var conditionValue = document.getElementById("queryBuilderConditionPageValue");
		if( ( conditionAttributeDrop.value != "" && conditionAttributeDrop.value != null ) && ( conditionConditionDrop.value != "" && conditionConditionDrop.value != null ) && ( conditionValue.value != "" && conditionValue.value != null ) ) 
		{
			display = display + " WHERE " + conditionAttributeDrop.value + " " + conditionConditionDrop.options[conditionConditionDrop.selectedIndex].text + " " + conditionValue.value;
			for(var i = 0; i <= this.conditionRowIdCount; i++)
			{
					conditionAttributeDrop = document.getElementById("queryBuilderConditionPageAttributeDrop"+i);
					conditionConditionDrop = document.getElementById("queryBuilderConditionPageConditionDrop"+i);
					conditionValue = document.getElementById("queryBuilderConditionPageValue"+i);
		
					if( ( conditionAttributeDrop != null ) && ( conditionConditionDrop != null ) && ( conditionValue != null ) )
					{
						if( (conditionAttributeDrop.value != null && conditionAttributeDrop.value != "" ) && (conditionConditionDrop.value != null && conditionConditionDrop.value != "" ) 	&& ( conditionValue.value != null && conditionValue.value != "" ) )
							display = display + " AND " + conditionAttributeDrop.value + " " + conditionConditionDrop.options[conditionConditionDrop.selectedIndex].text  + " " + conditionValue.value;
					}
			}
			display = display + "</p>";
		}
		if( display.indexOf("FROM",0) != -1 && display.indexOf("WHERE",0) != -1 )
		{
			var displayItem = document.getElementById("queryDisplay");
			displayItem.className = "searchExample";
			displayItem.innerHTML = display;
			var continueButt = document.getElementById("continueButton");
			continueButt.disabled = false;
		}
		else
		{
			display = "<p class = \"searchExample\">There was an error with your input.  Please make sure that at least the first value is filled in on each page</p>";
			var displayItem = document.getElementById("queryDisplay");
			displayItem.innerHTML = display;
			var continueButt = document.getElementById("continueButton");
			continueButt.disabled = true;
		}
	}
	function makeQuery()
	{
		var attributeTable = document.getElementById("tblQueryBuilderAttributePage");
		var attributeDrop = document.getElementById("queryBuilderAttributePageDrop");
		if( attributeDrop.value != "" && attributeDrop.value != null ) 
		{
			var attributes = attributeDrop.value+",";
			for(var i = 0; i <= this.attributeRowIdCount; i++)
			{		
				attributeDrop = document.getElementById("queryBuilderAttributePageDrop" + i);
				if(attributeDrop != null)
				{
					if( attributeDrop.value != null && attributeDrop.value != "" )
						attributes = attributes + attributeDrop.value + ",";
				}
			}
			attributes = attributes.substr(0, attributes.lastIndexOf(','));
		}
		var conditionTable = document.getElementById("tbleQueryBuilderConditionPage");
		var conditionAttributeDrop = document.getElementById("queryBuilderConditionPageAttributeDrop");
		var conditionConditionDrop = document.getElementById("queryBuilderConditionPageConditionDrop");
		var conditionValue = document.getElementById("queryBuilderConditionPageValue");
		if( ( conditionAttributeDrop.value != "" && conditionAttributeDrop.value != null ) && ( conditionConditionDrop.value != "" && conditionConditionDrop.value != null ) && ( conditionValue.value != "" && conditionValue.value != null ) ) 
		{
			var condition = conditionAttributeDrop.value + "," + conditionConditionDrop.value + "," + conditionValue.value + "|";
			for(var i = 0; i <= this.conditionRowIdCount; i++)
			{
				conditionAttributeDrop = document.getElementById("queryBuilderConditionPageAttributeDrop"+i);
				conditionConditionDrop = document.getElementById("queryBuilderConditionPageConditionDrop"+i);
				conditionValue = document.getElementById("queryBuilderConditionPageValue"+i);
				if( conditionAttributeDrop != null && conditionConditionDrop != null && conditionValue != null )
				{
					if( (conditionAttributeDrop.value != "" && conditionAttributeDrop.value != null ) && ( conditionConditionDrop.value != null && conditionConditionDrop.value != "" ) && ( conditionValue.value != null && conditionValue.value != "" ) )
						condition = condition + conditionAttributeDrop.value + "," + conditionConditionDrop.value + "," + conditionValue.value + "|";
				}
			}
			condition = condition.substr(0, condition.lastIndexOf('|'));
		}
		if( condition != null && attributes != null )
			spatialFilter.getQueryBuilderResults( this.queryLayerName, attributes, condition );
	}
}