// -------------------- standard viewer format -------------------------//
function standardViewer()
{
	mainMenu(browser, layersFlag, ddrapesFlag, goToFlag, upLoadFlag, aboutId, territoryFlag, myElectFlag, direction);
	//alert('main menu - done')
	// set the starting and increments for floating panels
	startPanelX = 195; startPanelY = 195; 
	panelX = 0; panelY = 0;
	panelId = [];
	panelOffset = 30
	numberOfPanels = 0
	
	// ------------------------- Layer Control Panel section --------------------	
	if(layersFlag)
	{	
		if(panelX == 0 && panelY == 0){panelX=startPanelX; panelY = startPanelY;}
		panelX = panelX + panelOffset;
		panelY = panelY + panelOffset;
		panelId[numberOfPanels] = '1';
		numberOfPanels ++;
		//alert('building layers panel')
		buildAdditionalLayersPanel(panelX, panelY);
	}
	
	//----------------- Demographic Drapes Section ----------------
	if(ddrapesFlag) 
	{ 
		if(panelX == 0 && panelY == 0){panelX=startPanelX; panelY = startPanelY;}
		panelX = panelX + panelOffset;
		panelY = panelY + panelOffset;
		panelId[numberOfPanels] = '2';
		numberOfPanels ++;
		
		//-- Build search Panel 
		buildSearchPanel();
		//editorFlag = true;
		if (editorFlag)	
		{	//-- Get file name panel 
			buildSaveFilePanel();			
		}
		if (infoFlag)
		{	//-- Build Query-Report Control Panel 
			buildReportPanel();
			//-- Build Report Attribute Selection panel
			buildAttributePickerPanel()
			//-- Build GFI popup report panel
			buildGFIReportPanel();
		}
		//-- Build main DDrape Panel
		buildDemoDrapesPanel(editorFlag, infoFlag, panelX, panelY);
		
		//-- pre-build the Configurer tool
		toggleDDrapeModes('libraryMode');
		if(configFlag)
		{		
			level=0; layer=0; theme=0;
			loadAnalysisOptions();
		}
		if(filterFlag)
		{
			level=0; layer=0; theme=0;
			loadFilterOptions();
		}
	}
	//--------------------------- Go To Area Section ---------------------------	
	if(goToFlag)
	{	
		if(panelX == 0 && panelY == 0){panelX=startPanelX; panelY = startPanelY;}
		panelX = panelX + panelOffset;
		panelY = panelY + panelOffset;
		panelId[numberOfPanels] = '3';
		numberOfPanels ++;
		buildGoToNavigationPanel(panelX, panelY);
		 
		
	}

	//----------- This section is for users with 'upload' account privilleges --------------
	if(upLoadFlag) 
	{ 
		if(panelX == 0 && panelY == 0){panelX=startPanelX; panelY = startPanelY;}
		panelX = panelX + panelOffset;
		panelY = panelY + panelOffset;
		panelId[numberOfPanels] = '4';
		numberOfPanels ++;
		//-- Build the main upload file panel
		buildFileUploadPanel(panelX, panelY);
		//-- Build marker Filter control Panel 
		buildMarkerFilterPanel();
		buildPointThematicsPanel();
		buildHeatmapControlPanel();
		currentXmlRow = -1;
		buildAttributeEditor();
		makeTableSelectControl('useroverlays/preGeocoded/', 'publishedList', 'Addresses', 'name', '', 'upload');
		if(currentXmlRow >0 ){ resetMenuSelection(filePrefix+'_rowNo:'+currentXmlRow);	}
	}
	
	//----------------- territory manager --------------
	if(territoryFlag) 
	{ 
		territoryFolder = 'territories/'+account+'/';
		if(panelX == 0 && panelY == 0){panelX=startPanelX; panelY = startPanelY;}
		panelX = panelX + panelOffset;
		panelY = panelY + panelOffset;
		panelId[numberOfPanels] = '6';
		numberOfPanels ++;
		buildTerritoryManagerPanel(panelX, panelY); 
		buildTerritoryReportPanel();
		buildTerritoryReportPanel2();
		buildPolypikaPanel();
		makeFolderPanel();
		makeRenderPanel();
		setupTerrSymbols();
		currentTerrRow = -1
		makeTableSelectControl(territoryFolder, 'territoriesList', 'Territory', 'territoryName', '', 'terr');
		if(currentTerrRow >0 ){ resetMenuSelection(filePrefix+'_rowNo:'+currentTerrRow);	}
		changeMode('newTerr');
		//resetTerritory();
	}
	//----------------- Demo description----------------
	if(myElectFlag)
	{ 
		if(panelX == 0 && panelY == 0){panelX=startPanelX; panelY = startPanelY;}
		panelId[numberOfPanels] = '7';
		panelX = panelX + panelOffset;
		panelY = panelY + panelOffset;
		numberOfPanels ++;
		myElectorate(panelX, panelY);
		printLegend = false;
	}

	//----------------- Demo description----------------
	if(aboutId != '')
	{ 
		if(panelX == 0 && panelY == 0){panelX=startPanelX; panelY = startPanelY;}
		panelX = panelX + panelOffset;
		panelY = panelY + panelOffset;
		panelId[numberOfPanels] = aboutId.split(':')[1];
		numberOfPanels ++;
		buildDemoDescriptionPanel(panelX, panelY);	
	}

}

function mainMenu(browser, layers, ddrapes, goTo, upLoad, aboutId, territoryMngr, myElect, direction)
{
	// setup fopr horizontal orientation
	if(direction == 'horizontal')
	{
		var startLeft = 220;
		var startTop = 2;
		var horizInc = 180;
		var horizLeftInc = 10;
		var horizRightInc = 4;
		var vertInc = 0;
		var sepWdHt = 16;
		var searchBox = 145;
		var onoffbutt = 190;
		var sepAspect = 'vertical';
		homeTop = 0; homeLeft = 0;
		document.write("<div id='menuObj' class='menuBar' style='position:absolute; top:"+homeTop+"px; left:"+homeLeft+"px; width:100%; height:21px; '>");
	}
	// setup for vertical direction
	else if(direction == 'vertical')
	{
		var startLeft = 20;
		var startTop = 15;
		var horizInc = 0;
		var horizLeftInc = 5;
		var horizRightInc = 7;
		var vertInc = 20;
		var sepWdHt = 180;
		var sepAspect = 'horizontal';
		var buttonPanelHt = 20;
		var searchBox = 145;
		var onoffbutt = 190;
		
		// calculate height of panel from functions requested
		if(layers){			buttonPanelHt = buttonPanelHt + vertInc;}
		if(ddrapes){		buttonPanelHt = buttonPanelHt + vertInc;}
		if(goTo){			buttonPanelHt = buttonPanelHt + vertInc;}
		if(upLoad){			buttonPanelHt = buttonPanelHt + vertInc;}
		if(territoryMngr){	buttonPanelHt = buttonPanelHt + vertInc;}
		if(myElect){		buttonPanelHt = buttonPanelHt + vertInc;}
		if(aboutId != ''){	buttonPanelHt = buttonPanelHt + vertInc;}
		buttonPanelHt = buttonPanelHt + vertInc + 10;
		var panelHeight = buttonPanelHt +30;
		
		homeTop = 5; homeLeft = 5;
		
		// create the main menu object
		//document.write("<div id='sidebar:0'	style='position:absolute; top:5px; left:5px; width:235px; height:175px; z-index:6000; display: block; '>");
		//alert('halt')
		//alert(document.getElementById('sidebar:0'))
		document.write("<img id='vertPanelSmall' src='images/add.png' onclick='activateMenu(this);' title='Maximize the control panel' style='position:absolute; top:1px; left:1px; display:none; z-index:1000; cursor:pointer;'  />");
		document.write("<div id='sidebar:0' style='position:absolute; top:5px; left:5px; width:235px; height:175px; z-index:1000;'>");
	
			//makePopupHeader('sidebar:20',  'panelHeader:20', 'standardButton',  'Functions' ,  'popupHeader',  blueBanner2.src,  'images/logo_symbol_small.gif',  'images/home.png');
		
			document.write("<div id='content:0' class='menuBar' style='position:absolute; top:20px; left:0px; width:231px; height:"+buttonPanelHt+"px; border:2px solid #0000D6; background-color:#ECE9D8; cursor:move'>");
			//document.write("<img id='vertPanelBig' src='images/delete.png' title='click here to minimise this panel' onclick='toggleThisPanel(this);' style='float: right; cursor:pointer;'/>");
	}

	//alert('panel built')	
	// geocoding section - mandatory
	document.write("<div id='geocode' style='display:block; left:0px; top:"+startTop+"px; position:absolute; width:200px; height:15px;'>");	
		document.write("<label 	style='width:40px; height:18px;	position:absolute; top:2px; left:0px; height:18px; text-transform:capitalize;'>Go To:</label>");		
			
		// geocoding search entry box
		//if(browser == 'safari')
		//{	document.write("<span class='menuInputBox' style='position:absolute; top:1px; left:40px; width:"+searchBox+"px; //height:14px; '>");	}
			
		document.write('<input id="search" class="menuInputBox" style="position:absolute; top:0px; line-height:17px; left:40px;  width:'+searchBox+'px; height:12px;" type="text" onKeyPress="addrKeyboard(event, this.id); return;" value=""  title="Enter an Australian Address (part or complete)" onclick="lastAccuracy = -1; this.value=\'\';" />');

		
	
		
		//if(browser == 'safari')
		//{	document.write('</span>');}	

		// target control button		
		document.write("<div id='targetButt' class='standardButton' style='position:absolute; top:0px; left:"+onoffbutt+"px;	width:15px; height:15px;'>");
			document.write("<img src='images/target_icon.gif' id='targetControl' style='display:block; cursor:pointer; vertical-align:middle;' title='show targets at locations' onclick='selectTargets(this.id);'/>");
		document.write("</div>");

		// printer control button
		var printerbutt = onoffbutt+20;
		if(printIT)
		{	
			document.write("<div id='printerButt'  style='position:absolute; top:0px; left:"+printerbutt+"px; width:15px; height:15px;'>");
				document.write("<img src='images/printer.png' id='printerControl' style='display:block; cursor:pointer; vertical-align:middle;' title='click here to print these layers' onclick='mapTemplatePopup();'/>");
			document.write("</div>");
		}

	document.write("</div>"); // geocode 

		// optional panel Buttons secton
		if(layers)
		{
			if(direction == 'horizontal'){startLeft = parseInt(startLeft)+horizLeftInc;	}
			if(direction=='vertical') {startTop = parseInt(startTop)+vertInc;}
			if(direction == 'horizontal'){separator(startLeft+'px',startTop+'px', sepWdHt+'px', sepAspect);}
			if(direction == 'horizontal'){startLeft = parseInt(startLeft)+horizRightInc;	}
			panelButton(startLeft+'px', startTop+'px','expand:1', 'Expand Panel', 'toggleControl(this.id)', 'Layer Control Panel');
			if(direction == 'horizontal'){startLeft = parseInt(startLeft) +horizInc; }
		}
		if(ddrapes)
		{
			if(direction == 'horizontal'){startLeft = parseInt(startLeft)+horizLeftInc;	}
			if(direction=='vertical') {startTop = parseInt(startTop)+vertInc;}
			if(direction == 'horizontal'){separator(startLeft+'px',startTop+'px', sepWdHt+'px', sepAspect);}
			if(direction == 'horizontal'){startLeft = parseInt(startLeft)+horizRightInc;	}
			panelButton(startLeft+'px', startTop+'px','expand:2', 'Expand Panel', 'toggleControl(this.id)', 'DemographicDrape Panel');
			if(direction == 'horizontal'){startLeft = parseInt(startLeft) +horizInc; }
		}
		//var startLeft = 600;	
		if(goTo)
		{	
			if(direction == 'horizontal'){startLeft = parseInt(startLeft)+horizLeftInc;	}
			if(direction=='vertical') {startTop = parseInt(startTop)+vertInc;}
			if(direction == 'horizontal'){separator(startLeft+'px',startTop+'px', sepWdHt+'px', sepAspect);}
			if(direction == 'horizontal'){startLeft = parseInt(startLeft)+horizRightInc;	}
			panelButton(startLeft+'px', startTop+'px','expand:3', 'Expand Panel', 'toggleControl(this.id)', 'Go To Navigation Panel');
			if(direction == 'horizontal'){startLeft = parseInt(startLeft) +horizInc; }
		}	
		if(upLoad)
		{
			if(direction == 'horizontal'){startLeft = parseInt(startLeft)+horizLeftInc;	}
			if(direction=='vertical') {startTop = parseInt(startTop)+vertInc;}
			if(direction == 'horizontal'){separator(startLeft+'px',startTop+'px', sepWdHt+'px', sepAspect);}
			if(direction == 'horizontal'){startLeft = parseInt(startLeft)+horizRightInc;	}
			panelButton(startLeft+'px', startTop+'px','expand:4', 'Expand Panel', 'toggleControl(this.id)', 'Upload User Points Panel');
			if(direction == 'horizontal'){startLeft = parseInt(startLeft) +horizInc; }
		}
		if(territoryMngr)
		{
			if(direction == 'horizontal'){startLeft = parseInt(startLeft)+horizLeftInc;	}
			if(direction=='vertical') {startTop = parseInt(startTop)+vertInc;}
			if(direction == 'horizontal'){separator(startLeft+'px',startTop+'px', sepWdHt+'px', sepAspect);}
			if(direction == 'horizontal'){startLeft = parseInt(startLeft)+horizRightInc;	}
			panelButton(startLeft+'px', startTop+'px','expand:6', 'Expand Panel', 'toggleControl(this.id)', 'Territory Manager Panel');
			if(direction == 'horizontal'){startLeft = parseInt(startLeft) +horizInc; }
		}
		if(myElect)
		{
			if(direction == 'horizontal'){startLeft = parseInt(startLeft)+horizLeftInc;	}
			if(direction=='vertical') {startTop = parseInt(startTop)+vertInc;}
			if(direction == 'horizontal'){separator(startLeft+'px',startTop+'px', sepWdHt+'px', sepAspect);}
			if(direction == 'horizontal'){startLeft = parseInt(startLeft)+horizRightInc;	}
			panelButton(startLeft+'px', startTop+'px','expand:7', 'Expand Panel', 'toggleControl(this.id)', 'My Eelectorate');
			if(direction == 'horizontal'){startLeft = parseInt(startLeft) +horizInc; }
		}

		if(aboutId != '')
		{
			//var parts = aboutLink.split(":");
			//var popupId = 'expand:'+parts[1];
			if(direction == 'horizontal'){startLeft = parseInt(startLeft)+horizLeftInc;	}
			if(direction=='vertical') {startTop = parseInt(startTop)+vertInc;}
			if(direction == 'horizontal'){separator(startLeft+'px',startTop+'px', sepWdHt+'px', sepAspect);}
			if(direction == 'horizontal'){startLeft = parseInt(startLeft)+horizRightInc;	}
			panelButton(startLeft+'px', startTop+'px','expand:5', 'Expand Panel', 'toggleControl(this.id)', 'About This Application');
			if(direction == 'horizontal'){startLeft = parseInt(startLeft) +horizInc; }
			
		}		
		if(direction == 'horizontal')
		{
			startLeft = parseInt(startLeft)+horizLeftInc;
			var loadMess = parseInt(startLeft)+5;
			separator(startLeft+'px',startTop+'px', sepWdHt+'px', sepAspect);
		}
		
		// loading status section
		else if(direction == 'vertical') 
		{
			startTop = parseInt(startTop)+vertInc;
			var loadMess = parseInt(startLeft)
		}
		
		//---------- complete Bar --------------//
		document.write("<div id='completeBarHolder' class='whiteSunkenBox' style='padding:0px; display:none; position:absolute; top:"+startTop+"px; left:"+loadMess+"px; width:200px; height:14px; display:none; z-index:1000;' >");

		document.write("<div id='completeBar' style=' width:200px; height:14px; z-index:1101; background-color:#ece9d8;' ></div>");
				
		document.write("</div>");
		//Drag.init(document.getElementById("completeBarHolder"));

		// write out load ststus messages
		document.write("<div id='loadStatus'  style='position:absolute; top:"+startTop+"px;	left:"+loadMess+"px; width:200px; height:16px; display:none;  z-index:1100; text-shadow:#fff 1px 1px 1px;'	>");
			document.write("<img id='loadWheel' src='images/loader.gif' height=14 width=14 style='float:left;' />");
		document.write("</div>"); // loadStatus
		genLoadStatus('Application Loading ....', true, '');
	
	// close off div for inner content
	document.write("</div>"); // menuObj or content:0
	
	// setup dragging for vertical orientation
	if(direction == 'vertical')
	{
		
		//document.write("<img id='vertPanelBig' src='images/add.png' title='click here to minimise this panel' onclick='toggleThisPanel(this);' style='position:relative; bottom:2px; right:2px;'/>");
		document.write("</div>"); // sidebar:0
		makePopupHeader('sidebar:0',  'panelHeader:0', 'standardButton',  'Functions' ,  'popupHeader',  blueBanner2.src,  'images/logo_symbol_small.gif',  'images/home.png', 'images/delete.png');
		Drag.init(document.getElementById("panelHeader:0"), document.getElementById("sidebar:0"));
		
	}
	

}



function updateTitle(titlePart)
{
	checkRemoveObject('ddrapesFunction');
	var textHolder = document.createElement('center');
	textHolder.id = 'ddrapesFunction';
	textHolder.setAttribute('id','ddrapesFunction');
	textHolder.className='sectionHeader';
	var text = document.createTextNode(titlePart+" Mode")
	textHolder.appendChild(text);
	document.getElementById('DDrapes').appendChild(textHolder);
}


function toggleControl(thisId)
{
	//alert(thisId)
	// get the object of the control being activated
	var button = document.getElementById(thisId);
	
	// find out which control - assumes 'expand:1,  expand:2,  expand:3,  expand:4', etc
	var cNum = thisId.split(':')

	// now get the applicable Divs
	var sidebar = document.getElementById("sidebar:"+cNum[1]);		// holding Div
	var header = document.getElementById("panelHeader:"+cNum[1]);	// banner Div
	var control = document.getElementById("content:"+cNum[1]);		// content Div
	var image = document.getElementById("expComp"+cNum[1]);
	
	// now set the appropriate Div attributes
	//alert(button.title)
	if (button.title == 'Expand Panel')
	{
		// panel button used to open Panel so open where is
		sidebar.style.display="block";  
		//sidebar.style.height= height;
		//control.style.border='2px solid #0000D6';
		//button.style.color = 'black';
		button.className='selectedButton';
		header.style.borderStyle='none';
		button.title = 'Compress Panel';

		// make sure this panel is on top
		shuffleAllPanels('sidebar:'+cNum[1]) ;
		
		// set focus on the search input element when launching the go to panel
		//if(cNum[1] == 3 && document.getElementById('search1') ) {document.getElementById('search1').focus();}
	}
	else
	{
		//alert(startPanelX+" , "+startPanelY)
		// the Panel button was used to close Panel so reset panel as at start
		for (var i=0; i<panelId.length ; i++)
		{
			if(cNum[1] == panelId[i])
			{
				var left = parseInt(startPanelX) + (i*parseInt(panelOffset));	
				var top = parseInt(startPanelY) + (i*parseInt(panelOffset));
				break;
			}
		}
		//sidebar.style.height = '0px';
		sidebar.style.top = top+'px';
		sidebar.style.left = left+'px';
		sidebar.style.display = "none";  
		button.className='standardButton';
		header.style.border='2px solid #0055E5';
		button.title = 'Expand Panel';	
	}
	
}
function shuffleAllPanels(panelId)
{
	// panelId is assumed to be 'sidebar:n'
	// push all panels back to z-index 50000 
	for (var i=1; i<=8; i++)
	{	
		var id = 'sidebar:'+i;
		if (id != panelId)
		{
			if(document.getElementById('sidebar:'+i)) {document.getElementById('sidebar:'+i).style.zIndex = 50000;}
		}
		else
		{
			if(document.getElementById('sidebar:'+i)) {document.getElementById('sidebar:'+i).style.zIndex = 60000; }
		}
	}

}



function minimizeMe(id,  buttId)
{
	document.getElementById(id).style.display="none"; 
	document.getElementById(buttId).className="legUp";
	refresh = false;
}
/*function uploadFile()
{
	killit('uploads/',  'temp.xml');
	popUp("uploader.html"); 
	document.getElementById("fetchit").style.display="block";
	document.getElementById("viewit").style.display="block";
}
*/
function plotFile()
{
	map.setCenter(bounds.getCenterLonLat(), map.getZoomForExtent(bounds)); // this will zoom appropriately for collection
	document.getElementById('deleteit').style.display='block';
}



function toggleMap(id)
{
	var valueArray=id.split('Tab');
	var value=valueArray[0];
	document.getElementById(value).style.display='block';
	document.getElementById(value).style.zIndex='40';
	document.getElementById(value+'Tab').style.zIndex='50';
	document.getElementById(value+'Tab').style.backgroundColor='white';
	document.getElementById(value+'Tab').style.borderBottom='1px solid white';

	// now change appearance of the non selected div and tab
	if (value == 'map'){var other='aboutUs'}
	else {var other = 'map'}
	document.getElementById(other).style.display='none';
	document.getElementById(other+'Tab').style.zIndex='0';
	document.getElementById(other+'Tab').style.backgroundColor='#e1e1e1';
	document.getElementById(other+'Tab').style.borderBottom='black';
}

//------------- this will load data into the metadata div ----------------//
function showData(name,  data)
{
	//alert(name+"\n"+data)
	// kill off any exiting metadata 
	var metaDiv = document.getElementById('metadata');
	checkRemoveObject('metadataHolder');
	
	// create the new internmal metadata div
	var metadataHolder = document.createElement('div');
	metadataHolder.id = 'metadataHolder';
	metadataHolder.setAttribute('id', 'metadataHolder');

	// load up the metadata passed in
	metadataHolder.innerHTML = name+" : <br/><br/><span style='font-weight:normal;'>"+data+"</span>";
	metadataHolder.className = "metadata";
	metaDiv.appendChild(metadataHolder);
	
	// make the metadata div visible
	document.getElementById('metaHolder').style.display='block';
}
function hideData()
{
	document.getElementById('metaHolder').style.display='none';
}
function launchInstructions()
{
	var button = document.getElementById('expand:10');
	var left = '532px';	var height = '160px';
	// now get the applicable Divs
	var sidebar = document.getElementById("sidebar:10");		// holding Div
	var header = document.getElementById("panelHeader:10");	// banner Div
	var control = document.getElementById("content:10");		// content Div
	
	sidebar.style.display="block";  
	sidebar.style.height= height;
	sidebar.style.top = '20px';
	sidebar.style.left = left;
	
	control.style.border='2px solid #0000D6';
	button.className='selectedButton';
	header.style.borderStyle='none';
	button.title = 'Compress Panel';


	// make sure this panel is on top
	shuffleAllPanels('sidebar:10') ;
}
/*
// checks to see if the LGA polygon select radio button is checked and loads the new batch of LGAs
function processReq(radioControl, selectElementId, selHolderId, id, group)
{
	//alert('radio control flag = '+document.getElementById(radioControl).checked)
	if(document.getElementById(radioControl).checked)
	{
		loadLgas(selHolderId, id,  group); 
		document.getElementById(selectElementId).disabled=false;
	}
}
*/
function mapControls(direction)
{
	// set up the top value for wtaermarks
	if(direction == 'horizontal')
	{	var topMark = 25;
		var leftMark = 10;}
	else 
	{	var topMark = 5;
		var leftMark = 245;}

	//-- Numaps/owner's watermark stuff	
		document.write("<div id='numapsLogo' style='position:absolute; top:"+topMark.toString()+"px; right:5px; z-index:10000;' >");
		document.write("<span class='imagelink' title='"+linkAddr+"''>");
		document.write("<a  href='"+linkAddr+"'><img border=0  src='"+logoImg+"'  /></a>");
		document.write("</span></div> ");
			
	//-- North Point
		npTop = topMark+30;
		document.write("<div id='nortPoint' style='position:absolute; top:"+npTop.toString()+"px; right:30px; z-index:10000;' >");
		document.write("<img border=0  src='"+npImg+"'  />");
		document.write("</div> ");
	
	//-- Koalas watermark stuff --//
		document.write("<div  id='akf' style='display:none; position: absolute; top:"+topMark.toString()+"px; left:10px; width:300px; z-index:4000; height:20px;' >");
		document.write("<img src='images/koala.gif' style='float:left;'/>");
		document.write("<a href='https://www.savethekoala.com' style='text-decoration:none;'>");
		document.write("<span class='watermark' style='position:absolute; top:3px; left:20px;' title='The Koala Habitat layer has been derived from government data sources and is a guide only. Click here to go to the Save the Koala website.'>Australian Koala Foundation Copyright</span>");
		document.write("</a>");	
		document.write("</div>")
	
	//-- Terrapages Watermark stuff --//
		var thisTopMark = topMark+25;
		document.write("<div id='TerraPages' style='display:none; position: absolute; top:"+thisTopMark.toString()+"px; left:10px; width:300px; z-index:50000; height:20px;'>");
		document.write("<img src='images/tplogo.gif' height='20' />");
		document.write("<a href='http://www.terrapages.com' target='_blank'>");		
		document.write("<span class='watermark' style='position:absolute; top:3px; left:20px;' title='TerraPages provides online access to PSMA data'>TerraPages Pty Ltd</span>");
		document.write("</a>");
		document.write("</div>");

	//-- OpenStreetMap Watermark stuff --//
		//var thisTopMark = topMark+25;
/*		document.write("<div id='openStreetmapAttrib' style='display:none; position: absolute; bottom:20px; right:10px; width:350px; z-index:50000; height:20px;'>");
		document.write("<img src='images/osm_logo.png' height='20' />");
		document.write("<a href='http://www.openstreetmap.org' target='_blank'>");		
		document.write("<span class='watermark' title='OpenStreetMap provides the basemap as an option'>(c) OpenStreetMap (and) contributors, CC-BY-SA</span>");
		document.write("</a>");
		document.write("</div>");
*/
	//-- Mapping controls --//
		var thisTopMark = topMark+180;
		document.write("<div id='navControls'  style='position:absolute; top:"+thisTopMark.toString()+"px; left:5px; height:480px; cursor:move; background-color:white; border-style:ridge; filter:alpha(opacity=80); z-index:1000;	opacity: 0.8;' title='you can reposition this control anywhere on the map'  >");
			document.write("<div id='zoomControl' style='cursor:pointer; z-index:1010;' title='Standard Zoom control' ></div>");
			document.write("<div id='mouseControl' class='olControlNavToolbar' style='cursor:pointer; background-color:transparent;  z-index:1010;' title='Panning and Mouse Zooming MODE controls' ></div>");
			document.write("<div id='panel' style='cursor:pointer; z-index:1010;' title='Navigation view history controls'></div> ");
		document.write("</div>") //-- navControls 
		Drag.init(document.getElementById("navControls"));
		
	//-- mouse position & scale --//
		document.write("<div id='viewStatus'  style='position: absolute; top:"+topMark.toString()+"px; left:"+leftMark.toString()+"px; z-index:1000; height:30px; width:300px; cursor:move; background-color:white; border-style:ridge; filter:alpha(opacity=80);	opacity: 0.8; color:gray; font-weight:bold; font-size:10px;' title='you can reposition this control anywhere on the map'  >");
			document.write("<span style='position:relative; top:2px; left:5px; '>");
				document.write("<span>Mouse Position = </span>");
				document.write("<div id='mousePos' style='top:0px; left:105px;'></div>");
				document.write("<div id='scale' style='top:10px; left:5px;'></div>"); 
			document.write("</span>");
		document.write("</div>");
		Drag.init(document.getElementById("viewStatus"));

	//---------- geocoder off the front Go To input -----------//
		document.write("<div id='selectit' style='padding:10px; display:none; position:absolute; top:21px; left:0px; width:auto; height:auto; z-index:1100; background-color:white; border-style:ridge; filter:alpha(opacity=100);opacity: 1.0; color:black; font-weight:bold; font-size:10px;' >");
			document.write("<label class='label'>Select from Possible Matches:</label><br />");

			//-- this is a holder form for the generated list of address candidates --//
			document.write("<form id='selForm2' name='selForm2' action=''></form>");	

		document.write("</div>");
		Drag.init(document.getElementById("selectit"));
/*
	//---------- complete Bar --------------//
	document.write("<div id='completeBarHolder' style='padding:0px; display:none; position:absolute; top:100px; left:100px; width:200px; height:20px; z-index:1100; background-color:white; border-style:ridge; filter:alpha(opacity=100);opacity: 1.0; color:black; font-weight:none; font-size:10px; cursor:move;' >");

	document.write("<div id='completeBar' style=' width:200px; height:20px; z-index:1101; background-color:#d2d2d2;' ></div>");
	document.write("<span  style='position:relative; top:-35px; width:200px; height:20px; z-index:1102;' ><center>Prograss Bar</center></span>");

			
	document.write("</div>");
	Drag.init(document.getElementById("completeBarHolder"));
*/
}

function buildBasemapControl(baseMapsList, baseMapsIds)	
{
	// this builds a table of two radio buttons per row for BaseMaps
	document.write ("<table class='baseMapRadio'> ");
	document.write ("<form  action='' id='radioButtons'>");
	
	// determine number of rows of radio buttons
	var numrows = Math.ceil(baseMapsList.length/2	);
	
	// build each two button row
	for (var i=0; i<numrows ; i++)
	{
		// set the radio button to the default or selected basemap				
		var selectedFlag = '';
		if(baseMapsList[i*2] == startBasemap){slectedFlag = 'selected';}
		//alert(i+" basemap = "+baseMapsList[i*2]);
		// set up left side of radio bank
		document.write ("<tr><td>");
		document.write ("<input  name='base' type='radio' id='"+baseMapsIds[i*2]+"' class='radio'	"+selectedFlag+"  value='"+baseMapsList[i*2]+"' onclick='swapBase(this.value);' title='Select "+baseMapsList[i*2]+" as your base map'>"+baseMapsList[i*2]+"</input>");
		document.write ("</td><td>");

		// set the radio button to the default or selected basemap				
		var selectedFlag = '';
		if(baseMapsList[(i*2)+1] == startBasemap){selectedFlag = 'selected';}
		//alert(i+" basemap = "+baseMapsList[(i*2)+1]);
		// set up right side of radio bank
		document.write ("<input  name='base' type='radio' id='"+baseMapsIds[(i*2)+1]+"'  class='radio' "+selectedFlag+" value='"+baseMapsList[(i*2)+1]+"' onclick='swapBase(this.value);' title='Select "+baseMapsList[(i*2)+1]+" as your base map'>"+baseMapsList[(i*2)+1]+"</input>");
		document.write ("</td></tr>");
	}	
	document.write("</form></table>");
}

function gotoAddressProcess()
{
	document.getElementById('search').value = document.getElementById('search01').value;
	document.getElementById('propertyButt').className='standardButton'	;
	document.getElementById('propertyControl').title='show boundary at address';
	lastAccuracy = -1;
	//alert(country)
	showAddress(country, 'geocoder', 'search01', 'selector', 'selForm', 'selBox', 'messHolder', srs);
}

function gotoAddressLocality(polygonList)	
{
	var va11='selector'; var val2='geocoder'; var val3='search01'; var val4='messHolder'; var none='none'; var processing='processing address';
	
	// -------- set up the geocoder gui -------- //
	document.write("<div id='geocoder' style='display:block;' >");	
		document.write("<label class='label'>Go To Address/Locality:</label><br />");
		
		document.write("<input id='search01' class='box' style='position:absolute; top:15px; left:0px; width:190px; height:13px; background-color:#FFFFFF;' type='text'	onKeyPress='checkEnter(event, this.id); return;' value='' onclick='document.getElementById(this.id).value=empty;' title='Enter an Australian Address (part or complete)' />");

		
		document.write("<div id='geocodeButt' style='position:absolute; top:15px; left:192px; width:15px;height:16px;' class='standardButton' title='Go To Address'  onclick='gotoAddressProcess();' >");
		
		//document.write("<div id='geocodeButt' style='position:absolute; top:16px; left:195px;' title='Go To Address'  onclick='gotoAddressProcess();'>"); 
			document.write("<img src='images/forward_new.gif' />");
		document.write("</div>");	//-- geocodeButt 
	document.write("</div>");	//-- geocoder 	
	
	document.write("<div id='selector' style='display:none;' >");
		document.write("<label class='label'>Select Location from List:</label><br />");
		document.write("<form id='selForm' name='selForm'>");
				// ---- the select object is created here ---- //
		document.write("</form>");	//-- selForm 
	
		document.write("<div id='geocodeButt2' style='position:absolute; top:15px; left:192px; width:15px;height:16px;' class='standardButton' title='Back to Address entry'  onclick='javascript:searchon(\""+va11+"\",\""+val2+"\",\""+val3+"\",\""+val4+"\");' >");
		//document.write("<div id='geocodeButt2' style='position:absolute; top:16px; left:195px;' title='Back to Address entry'  onclick='javascript:searchon(\""+va11+"\",\""+val2+"\",\""+val3+"\",\""+val4+"\");' >");
			document.write("<img src='images/back_new.gif' />");
		document.write("</div>");	//-- geocodeButt2
	document.write("</div>");	//-- selector
	
	

	
	
// -------- build the polygon select list -------- //
	document.write("<div id='polySel' style='position:absolute; top:58px; left:5px;' >");
		document.write("<label class='label' style='position:absolute; top:5px;'>Select Polygon Layer:</label>");
		
		 document.write("<select name='polyLayers' id='polyLayers' style='width:170px; position:absolute; top:18px; left:0px; height:18px; border:1px solid gray;' title='Select the layer of polygons you wish this point in polygon feature will use'  size='1'>");
		
		// build the select list of polygon options	
		for (var i=0; i < polygonList.length; i++)
		{
			//alert(polygonList[i])
			//alert('id = polyLayer:'+i)
			var selected = ''
			if(i==0){var selected = "selected='selected'";}
			document.write("<option name='polyLayer' id='polyLayer:"+i+"' "+selected+" value='"+polygonList[i]+"' title='click here for "+polygonList[i]+" point-in-polygon processing'>"+polygonList[i]+"</option>");
		}
		document.write("</Select>");	//-- polyLayers			
	document.write("</div>");	//-- polySel
	
	// build the polygon visibility button
	document.write("<div id='propertyButt' style='position:absolute; top:76px; left:178px; 	width:15px;height:16px;' class='standardButton' >");
		document.write("<img src='images/cad_butt.gif'	id='propertyControl' style='top:1px; position:relative; height:14px; width:13px; cursor:pointer;' title='show boundary at address' onclick='toggleBoundaryLayer(this.title);' />");
	document.write("</div>");	//-- propertytButt 
	
	// build the remove layer button
	document.write("<div id='propertyButtKill' style='position:absolute; top:76px; left:198px; 	width:15px;height:16px; display:none;' class='standardButton' >");
		document.write("<img src='images/closeit.gif'	id='propertyDestroy' style='top:1px; position:relative; height:14px; width:13px; cursor:pointer;' title='remove boundary layer' onclick='removeBoundaryLayer(\"propertyButtKill\");' />");
	document.write("</div>");	//-- propertytButt 
	
	
// -------Geocoder message Div ------ //
	document.write("<div id='messHolder'  style='position:absolute; top:20px; left:200px; width:180px; height:160px; z-index:5001; display: none; ' title='you can drag this form around the window'  >");
		
		// message header section
		document.write("<div id='messHeader' style='position:absolute; top:0px; left:0px; height:22px; width:100%; background-image:url(images/banner_180.gif);' class='popupHeader'>");
			document.write("<img src='images/logo_symbol_small.gif' style='position:absolute; top:7px; left:4px;' /> ");
			document.write("<span style='position:absolute; top:4px; left:30px;'>Geocoding Results</span>");
			document.write("<span style='position:absolute; top:4px; right:4px; cursor:pointer;' onclick='document.getElementById(\""+val4+"\").style.display=\"none\";' title='close me' >");
				document.write("<img src='images/close.gif' style='height:15px; width:15px;'/>");
			document.write("</span>");
		document.write("</div>")	//-- messHeader 
		
		// message info popup				
		document.write("<div  style='position:absolute;  top:22px; left:0px; width:176px; height:180px; border:2px solid #1531e3; z-index:3001; background-color:#ECE9D8; color:gray; font-size:10px;'>");
			document.write("<p style='background-color:transparent; padding:5px;';>Only 10 candidate addresses can be returned at a time. If the address you are looking for is not in the list displayed in the geocoder entry window, please enter additional information such as street number or state to refine your geocode request.</p>");
		document.write("</div>")	//-- mess 
	document.write("</div>")	//-- messHolder

	// apply dragging
	Drag.init(document.getElementById("messHeader"), document.getElementById("messHolder"));
//alert ('done')
}

function getAdminArea()
{
	document.write("<div id='lgaEnter' style='position:absolute; top:100px; left:0px; width:200px; height:35px;' >");
		separator('2px','2px', '205px', 'horizontal');
		document.write("<label class='label' style='position:absolute; top:5px;'>Go To Local Government:</label><br />");
		
		// setup the alphabet buttons 
		document.write("<table id='lgaAlphaButtons' style='position:absolute; top:13px; width:100%; height:20px; left:-3px; font-size:8px; cursor:pointer; text-align:center; '>");
		document.write("<tr><td>");
				alphabetButtons('AB:1', 'Local Governments starting with letters A to B', 'loadLgas("lgaSelBox:1", this.id,  "A to B");', 'A-B');
			document.write("</td><td>");
				alphabetButtons('CD:1', 'Local Governments starting with letters C to D', 'loadLgas("lgaSelBox:1", this.id,  "C to D");', 'C-D');
			document.write("</td><td>");
				alphabetButtons('EI:1', 'Local Governments starting with letters E to I', 'loadLgas("lgaSelBox:1", this.id,  "E to I");', 'E-I');
			document.write("</td><td>");
				alphabetButtons('JM:1', 'Local Governments starting with letters J to M', 'loadLgas("lgaSelBox:1", this.id,  "J to M");', 'J-M');
			document.write("</td><td>");
				alphabetButtons('NR:1', 'Local Governments starting with letters N to R', 'loadLgas("lgaSelBox:1", this.id,  "N to R");', 'N-R');
			document.write("</td><td>");
				alphabetButtons('SU:1', 'Local Governments starting with letters S to U', 'loadLgas("lgaSelBox:1", this.id,  "S to U");', 'S-U');
			document.write("</td><td>");
				alphabetButtons('VZ:1', 'Local Governments starting with letters V to Z', 'loadLgas("lgaSelBox:1", this.id,  "V to Z");', 'V-Z');
		document.write("</td></tr>");
		document.write("</table>");
		
		// -- form created on fly for the dropdown list -- //
		document.write("<div id='lgaSelBox:1'  style='display:block; width:190px; position:absolute; top:30px; left:0px;'>");
		document.write("</div>"); //-- lgaSelBox:1
		
		// -- button to cancel process and remove any polygon

// build the remove layer button
	document.write("<div id='lgaButt' style='position:absolute; top:30px; left:193px; 	width:15px;height:16px; display:none;' class='standardButton'>");
		document.write("<img src='images/closeit.gif' style='top:1px; position:relative; height:14px; width:13px; cursor:pointer;'  title='remove the filter' onclick='javascript:removeFilter(\"lgaButt\");' />");
	document.write("</div>");	//-- lgaButt

//	document.write("<div id='lgaButt' style='position:absolute; top:31px; left:193px; display:none;' title='remove the filter' onclick='javascript:removeFilter(this.id);' >");
//			document.write("<img src='images/close3_15.gif' />");
//		document.write("</div>"); //-- lgaButt
						
		// -- force the first group of LGAs into Select Box --
		loadLgas("lgaSelBox:1", "AB:1",  "A to B");
	document.write("</div>"); //-- lgaEnter
}


// -------------- button control functions ----------------------
function buttonHandler(buttonId, functionName, titleText, imageName, sticky, visible)
{
	// this will create a button within the parent object
	// inputs:
	// buttonId = unique ID of the button being created
	// functionName = the onclick function that is to be launched
	// titleText = the title for the button shown as a tool tip
	// imageName = the image that is displayed at the top of the button 19px x 18px
	// sticky = logical flag set to true if this button sticks down & releases on a subsequent click
	// visible = this initiates the visible state of the original button
		
	// set the appropriate flags
	var onmouseup = '';
	if(!sticky){onmouseup = "onmouseUp=mouseup('"+buttonId+"');"}
	var display = 'display:none;';
	if(visible) {display = 'display:block;';}
		
	// create the button
	document.write("<div id='"+buttonId+"'  style='position:relative; top:1px; left:1px; height:18px; width:20px; border-right:1px solid gray; border-bottom:1px solid gray; border-top:1px solid #c3c3c3;	border-left:1px solid #c3c3c3;	color:gray;	cursor:pointer;	background-color:transparent; z-index:5000; "+display+"' onclick='"+functionName+"' title='"+titleText+"' onmouseDown=mousedown('"+buttonId+"');  " +onmouseup+" >"	);
	document.write("<img  src='"+imageName+"' style='cursor:pointer; vertical-align:middle;' />");
	document.write("</div>");
}

function mouseup(buttonId)
{
	//alert('mouseup = '+buttonId)
	if(document.getElementById(buttonId))
	{	document.getElementById(buttonId).style.backgroundColor='transparent';
		normalDiv(buttonId);
	}
}
function mousedown(buttonId)
{
	if(document.getElementById(buttonId))
	{	document.getElementById(buttonId).style.backgroundColor='white';
		depressedDiv(buttonId);
	}
}
function highlightDiv(id)
{
	document.getElementById(id).style.borderLeft="1px solid gray";
	document.getElementById(id).style.borderTop="1px solid gray";
	document.getElementById(id).style.borderBottom="1px solid #c3c3c3";
	document.getElementById(id).style.borderRight="1px solid #c3c3c3";	
}
function normalDiv(id)
{
	//document.getElementById(id).style.border="1px solid #ECE9D8";
	document.getElementById(id).style.borderRight="1px solid gray";
	document.getElementById(id).style.borderBottom="1px solid gray";
	document.getElementById(id).style.borderTop="1px solid #c3c3c3";
	document.getElementById(id).style.borderLeft="1px solid #c3c3c3";	
	document.getElementById(id).style.backgroundColor="transparent";
	document.getElementById(id).style.color='gray';
}

function depressedDiv(id)
{
	document.getElementById(id).style.borderLeft="1px solid gray";
	document.getElementById(id).style.borderTop="1px solid gray";
	document.getElementById(id).style.borderBottom="1px solid #c3c3c3";
	document.getElementById(id).style.borderRight="1px solid #c3c3c3";	
	document.getElementById(id).style.backgroundColor="white";
	document.getElementById(id).style.color='black';
}

function separator(left,top, length, orientation)
{		
		var width = length; var height = '0px'; var borders = "border-bottom:1px solid white; border-top:1px solid gray;"
		if(orientation == 'vertical') {width = '0px'; height = length; borders = 'border-left:1px solid gray; border-right:1px solid white;'  }
		document.write("<div style='position:absolute; 	left:"+left+"; top:"+top+";	width:"+width+"; height:"+height+";	"+borders+"' ></div>");
}

function panelButton(left, top, id, title, functionName, label)
{
	document.write("<div id='"+id+"' class='standardButton'	style='position:absolute; top:"+top+";	left:"+left+";'	title='"+title+"' onclick='if(loaded){"+functionName+"}'>"+label+"</div>");
}

function alphabetButtons(id, title, functionName, label)
{	 
	document.write("<div style='width:20px' class='lettersNormal' id="+id+" title="+title+" onclick='"+functionName+"' onmousedown='this.className=\"lettersDepressed\";' onmouseup='this.className=\"lettersNormal\";' onmouseover='this.className=\"lettersHighlight\";' onmouseout='this.className=\"lettersNormal\";'>"+label+"</div>");
}

function minmaxPanel(evt)
{
	// get the objects id used to trigger event
	var thisId = getThisId(evt);
	var intId = thisId.split(':');
	//alert('content:'+intId[1])
	
	// check to see if minimise or maximise
	var minmaxTitle = document.getElementById(thisId).title;
	if(minmaxTitle == 'Minimise')
	{
		document.getElementById('content:'+intId[1]).style.display='none';
		document.getElementById(thisId).title = 'Maximise';
		document.getElementById(thisId).src='images/max_20.gif';
	}
	else
	{
		document.getElementById('content:'+intId[1]).style.display='block';
		document.getElementById(thisId).title = 'Minimise';
		document.getElementById(thisId).src='images/min_20.gif';
	}
	Event.stop(evt);

}
//'sidebar:20',  'panelHeader:20', 'standardButton',  'Functions' ,  'popupHeader',  blueBanner2.src,  'images/logo_symbol_small.gif',  'images/home.png', 'images/min_20.gif'
// generic GUI function to build the popup panel's header
function makePopupHeader(holdingId, headid, buttonStyle, headText, className, headImage, leftImage, closeImage, minimizeImage)
{
	// create the header holding div
	if(document.getElementById(holdingId))
	{
		checkRemoveObject(headid);
		var header = document.createElement('div');
		header.id = headid;
		header.setAttribute('id',headid);
		header.className = className;
		header.style.position = 'absolute';
		header.style.top = '0px';
		header.style.left = '0px';
		header.style.backgroundImage = 'url('+headImage+')';
		header.title = 'Hold left mouse down to drag this control around';

		// insert the left image
		var leftImg = document.createElement('img');
		leftImg.src = leftImage;
		leftImg.style.position = 'absolute';
		leftImg.style.top = '7px';
		leftImg.style.left = '4px';
		//leftImg.style.width = '15px';
		header.appendChild(leftImg);

		// insert the text 
		var textHolder = document.createElement('span');
		textHolder.style.position = 'absolute';
		textHolder.style.top = '4px';
		textHolder.style.left = '30px';
		//textHolder.style.fontStyle='italic';
		var textNode = document.createTextNode(headText);
		textHolder.appendChild(textNode);
		header.appendChild(textHolder);

		if(minimizeImage == '' || minimizeImage == null){minimizeImage = 'images/min_20.gif';}
		
		// insert the minimise me image
		var shrinkImg = document.createElement('img');
		shrinkImg.src = minimizeImage;		
		shrinkImg.style.position = 'absolute';
		shrinkImg.style.top = '5px';
		shrinkImg.style.right = '23px';
		shrinkImg.style.cursor = 'pointer';
		shrinkImg.title = 'Minimise';
		shrinkImg.style.height = '15px';
		shrinkImg.style.width = '15px';
		//var test = holdingId.split(':'); // get the panel number from holding id
		// make a unique minimise me Id
		
		// setup the appropriate event
		if(minimizeImage == 'images/delete.png')
		{	
			shrinkImg.id = 'vertPanelBig';
			shrinkImg.setAttribute('id','vertPanelBig');
			bindEvent(shrinkImg, 'click', toggleThisPanel, 'false');
		}
		else 
		{ 
			var minId = 'minmax_'+headid;
			shrinkImg.id = minId;
			shrinkImg.setAttribute('id',minId);
			bindEvent(shrinkImg, 'click', minmaxPanel, 'false');
		}
		header.appendChild(shrinkImg);
		
		
		// insert the closeme image or home image
		if(closeImage == 'images/close_20.gif')
		{
			var rightImg = document.createElement('img');
			rightImg.src = closeImage;			//the close popup uses rightImage
			rightImg.style.position = 'absolute';
			rightImg.style.top = '5px';
			rightImg.style.right = '5px';
			rightImg.style.cursor = 'pointer';
			rightImg.title = 'Close';
			rightImg.style.height = '15px';
			rightImg.style.width = '15px';
			var test = holdingId.split(':'); // get the panel number from holding id
			// make a unique close Id
			var closeId = 'close_'+headid;			
			if (test.length > 1){	closeId = buttonStyle+'_close_'+headid;	} // this passes the calling button thru
			//alert(closeId)
			rightImg.id = closeId;
			rightImg.setAttribute('id',closeId);
			bindEvent(rightImg, 'click', closePanel, 'false');
			header.appendChild(rightImg);
		}
		else if(closeImage = 'images/home.png')
		{
			var rightImg = document.createElement('img');
			rightImg.src = closeImage;			//the home button uses rightImage
			rightImg.style.position = 'absolute';
			rightImg.style.top = '5px';
			rightImg.style.right = '5px';
			rightImg.style.cursor = 'pointer';
			rightImg.title = 'Home';
			rightImg.style.height = '15px';
			rightImg.style.width = '15px';			
			rightImg.id = 'home:0';
			rightImg.setAttribute('id','home:0');
			bindEvent(rightImg, 'click', dockPanel, 'false');
			header.appendChild(rightImg);
		}
		// add header to holder
		document.getElementById(holdingId).appendChild(header);
	}

}
function toggleThisPanel(evt)
{
	document.getElementById('sidebar:0').style.display='none';
	document.getElementById('vertPanelSmall').style.display='block';
	Event.stop(evt);
}
function activateMenu(thisObj)
{
	thisObj.style.display='none'; 
	document.getElementById('sidebar:0').style.display='block';
}

function dockPanel(evt)
{
	var thisId = getThisId(evt);
	var panelId = 'sidebar:'+thisId.split(":")[1];
	document.getElementById(panelId).style.top = homeTop.toString()+'px';
	document.getElementById(panelId).style.left = homeLeft.toString()+'px';
	Event.stop(evt);

}
function closePanel(evt)
{
	// get the objects id used to trigger event
	var thisId = getThisId(evt);
	var intId = thisId.split(':');
	
	// change appearance of the trigger button 
	if(intId.length > 1)	
	{
		var headStuff = thisId.split('_close_')
		var parentObj = document.getElementById(headStuff[1]).parentNode
		parentObj.style.display="none";
		
		// now get the ID for the expand button and adjust the button
		var expandId = 'expand:'+intId[1];
		document.getElementById(expandId).title="Expand Panel"; 
		document.getElementById(expandId).className=headStuff[0];
	}
	else
	{
		var headId = thisId.split('_')
		// simply close down the parent div only
		var parentObj = document.getElementById(headId[1]).parentNode;
		parentObj.style.display="none";
	}
	
	Event.stop(evt);

}

// function to build the additional Layers user interface panel
function buildAdditionalLayersPanel(panelX, panelY)
{
	// determine variable heights and positions of basemap section
	var bmRows = parseInt(baseMapsList.length / 2 );
	var basemapHeight = 32 + (bmRows)*20;
	var layersTop = basemapHeight + 13;
	var totalHeight = layersTop + 208 +30;
	var insertHeight = totalHeight - 22;
	
	document.write("<div id='sidebar:1'	style='position:absolute; top:"+panelX+"px; left:"+panelY+"px; width:235px;			height:"+totalHeight+"px;		z-index:5000; display: none; ' onclick='shuffleAllPanels(this.id);'>");	
		makePopupHeader('sidebar:1',  'panelHeader:1', 'standardButton',  'Layer Control Panel' ,  'popupHeader',  blueBanner2.src,  'images/logo_symbol_small.gif',  'images/close_20.gif');		
		
		document.write("<div id='content:1' class='panelsBorder' style='position:absolute; top:22px; left:0px;		height:"+insertHeight+"px;	width:231px;'>");	
		
		//----------------- Base maps ----------------//
		document.write("<div id='baseMaps' class='functionBox' style='width:220px;		height:"+basemapHeight+"px;		position:absolute; top:10px; left:5px; '>");
			document.write("<center class='sectionHeader'>Base Map Selection</center>");
			document.write("<div id='baseLoadWheel' style='position:absolute; top:3px; right:20px; width:20px; height:16px; display:none; '>");
				document.write("<img src='images/loader.gif' style='float:left;' />");
			document.write("</div>");
			document.write("<img src='images/help.png' style='position:absolute; top:3px; right:2px; cursor:pointer;' title='Help' 			onclick=\"makePopup('basemap_help.html',  '600',  '800',  'both');\" />");
			
			// -- load the basemap control table --//
			genLoadStatus('BaseMaps Control Loading ....', true, '');
			buildBasemapControl(baseMapsList, baseMapsIds);
		document.write("</div>");

		//--------------- Additional layers Section ----------//
		document.write("<div id='additionalLayers' class='functionBox' style='position:absolute;	top:"+layersTop+"px;	left:5px; height:208px; width:220px;' >");
			document.write("<center class='sectionHeader' title='Single click the name to make a layer active. Then single click a map feature to get its attribute data.'>Additional Layers Selection</center>");
			document.write("<img src='images/help.png' style='position:absolute; top:3px; right:2px; cursor:pointer;' title='Help' onclick=\"makePopup('additionallayers_help.html',  '600',  '800',  'both');\" />");
			document.write("<br/>");
			document.write("<table border=0  style='position:absolute; top:16px; left: 6px;  color:#494949; font-size:10px; font-weight:bold; '>");
				document.write("<tr class='label' style='height:12px;'>");
					document.write("<td style='width:20px;'	title='check these boxes to activate and deactivate a layer'>");
						document.write("<div><img src='images/layers.png'  /></div>");
					document.write("</td>");
					document.write("<td style='width:20px;'	title='check these boxes to activate and deactivate the Labels of a layer'>");
						document.write("<div><img src='images/tag_blue.png' /></div>");
					document.write("</td>");
					document.write("<td style='width:140px; text-align:center'	title='these are the available layers'>Layer Style & Name</td>");
				document.write("</tr>");
			document.write("</table>");
				
			document.write("<div id='layers' style='display:block; width:208px; height:160px; position:absolute; top:37px; left:5px; background-color:white;'  >");	
				
				//-- load the other layers control table --//
				genLoadStatus('Layer Control Loading ....', true, '');
				buildLayers(layersFile,  'layers');
			document.write("</div>");

		document.write("</div>");
	document.write("</div>");
	document.write("</div>");
	Drag.init(document.getElementById("panelHeader:1"),  document.getElementById("sidebar:1"));
}

// function to build the GoTo Navigation user interface panel
function buildGoToNavigationPanel(panelX, panelY)
{
	document.write("<div id='sidebar:3'	style='position:absolute; top:"+panelX+"px; left:"+panelY+"px; width:235px; height:185px; display: none;' 	onclick='shuffleAllPanels(this.id);'>");	
		makePopupHeader('sidebar:3',  'panelHeader:3',  'standardButton',  'Go To Navigation' ,  'popupHeader',   blueBanner2.src,  'images/logo_symbol_small.gif',   'images/close_20.gif');
		document.write("<div id='content:3' style='position:absolute; top:22px; left:0px; height:175px; width:231px; border:2px solid #0000D6; background-color:#ECE9D8;'>");
	
			 // ----------------- Go To Area Section ---------------- //
			document.write("<div id='gotoArea' class='functionBox' style='position:absolute; top:10px; left:5px; width:220px; height:155px;' >");
				document.write("<center class='sectionHeader'>Go To Area Selection</center>");
				document.write("<img src='images/help.png' style='position:absolute; top:3px; right:2px; cursor:pointer;' title='Help' onclick=\"makePopup('gotoarea_help.html',  '600',  '800',  'both');\" />");
				document.write("<br/>");
				// --------- Go To Polygon via Address ---------- //
				gotoAddressLocality(polygonList);
				// --------- Local Governemnet Filter ---------//
				getAdminArea(1);

			document.write("</div>");
		document.write("</div>");
	document.write("</div>");
	Drag.init(document.getElementById("panelHeader:3"), document.getElementById("sidebar:3"));
}
/*
function manageFilterClose(id, holder)
{
	toggleMarkersVisibility(id, holder); 
	document.getElementById(id).title == 'show marker filter control';
	normalDiv(id);
}
*/

function buildHeatmapControlPanel()
{
	document.write("<div id='heatmapHolder' style='position:absolute; top:230px; left:500px; width:235px; height:100px; z-index:60001; cursor:pointer; display: none; '  >");	
		
		document.write("<div id='heatmapHeader' class='popupHeader' style='position:absolute; top:0px; left:0px; width:100%; background-image:url(images/banner_235.gif); cursor:move;' title='Hold left mouse down to drag this control around' >");
			document.write("<img src='images/logo_symbol_small.gif' style='position:absolute; top:7px; left:4px;' />");
			document.write("<span style='position:absolute; top:4px; left:30px;'>Attribute Selector</span>");		
			
			document.write("<div id='heatmapExit' style='position:absolute; top:5px; right:4px; cursor:pointer;' onclick='document.getElementById(\"heatmapHolder\").style.display=\"none\"; normalDiv(\"heatmap\"); document.getElementById(\"heatmap\").title=\"Turn on heatmap viewing\";' title='close me' >");
				
				document.write("<img src='images/close.gif' style='height:15px; width:15px;'/>");
			document.write("</div>"); //-- heatmapExit
		document.write("</div>"); //-- heatmapHeader 

		document.write("<div id='heatmapBody' style='position:absolute; top:22px; left:0px; border:2px solid #0000D6; width:231px;  height:100px;  background-color:#ECE9D8;'>");
			document.write("<span class='sectionHeader' style='position:absolute; top:5px; left:10px; font-size:11px;'>Heatmap Options:</span>");
				document.write("<div id='heatmapControlElements' style='position:relative; top:25px; left:0px; height:20px; width:100%;'>");
					
					document.write("<span class='label' style='position:absolute; top:5px; left:10px;'>Intensity (0-10):</span>");
					document.write("<input id='heatIntensity' class='functionBox2' type='text' value='"+defaultIntensity+"' size=2 style='position:absolute; left:100px; top:3px; font-size=8px; width:35px;' title='enter Intensity value 0-10'  />");
					
					document.write("<span class='label' style='position:absolute; top:25px; left:10px;'>Radius (0-50):</span>");
					document.write("<input id='heatRadius' class='functionBox2' type='text' value='"+defaultRadius+"' size=2 style='position:absolute; left:100px; top:23px; font-size=8px; width:35px;' title='enter radius of hotspot (0-50 pixels)'  />");

					document.write("<span class='label' style='position:absolute; top:45px; left:10px;'>Opacity (0-1):</span>");
					document.write("<input id='heatOpacity' class='functionBox2' type='text' value='"+defaultOpacity+"' size=2 style='position:absolute; left:100px; top:43px; font-size=8px; width:35px;' title='enter radius of hotspot (0-50 pixels)' />");

					document.write("<input id='refreshheatmap' style='position:absolute; top:40px; left:160px; width:60px; height:15px; z-index:1002; color:black;' value='Refresh' class='buttup' onmousedown=\"this.className='buttdown';\" onmouseover=\"this.style.fontWeight='bold';\" onmouseup=\"this.className='buttup';\" onmouseout=\"this.style.fontWeight='normal';\" title='After changing any of the Heatmap controls this will refresh the Heatmap' onclick='adjustHeatmap()' /> ");
							

				document.write("</div>"); //heatmapControlElements			
		document.write("</div>"); //-- heatmapBody 	

	document.write("</div>"); //-- heatmapHolder 
	Drag.init(document.getElementById("heatmapHeader"), document.getElementById("heatmapHolder"));

}



// function to allow the user to modify the uploaded xml file to highlight a user slected Attribute
function buildPointThematicsPanel()
{
	
	document.write("<div id='pointThematics' style='position:absolute; top:50px; left:420px; width:235px; height:250px; z-index:60001; display: none;'>");

		document.write("<div id='pointThemeHeader' class='popupHeader' style='position:absolute; top:0px; left:0px; width:100%; background-image:url(images/banner_235.gif); cursor:move;' title='Hold left mouse down to drag this control around' >");
			document.write("<img src='images/logo_symbol_small.gif' style='position:absolute; top:7px; left:4px;' />");
			document.write("<span style='position:absolute; top:4px; left:30px;'>Attribute Selector</span>");		
			
			document.write("<div id='pointThemeExit' style='position:absolute; top:5px; right:4px; cursor:pointer;' onclick='document.getElementById(\"pointThematics\").style.display=\"none\"; normalDiv(\"markersTH\"); document.getElementById(\"markersTH\").title=\"show point thematics editor control\";' title='close me' >");
				
				document.write("<img src='images/close.gif' style='height:15px; width:15px;'/>");
			document.write("</div>"); //-- pointThemeExit
		document.write("</div>"); //-- pointThemeHeader 
				
		document.write("<div id='pointThematicsContent' style='position:absolute; top:22px; left:0px; height:260px; width:231px; border:2px solid #0000D6; background-color:#ECE9D8;' >");
			
			// build the Renderer section
			document.write("<div id='pointThematicsEditor' class='functionBox' style='position:absolute; top:15px; left:10px; display:block; height:200px; width:210px; overflow-x:scroll;  overflow-y:scroll;'>");
			
				// ---- this is the holding Div ---- //
			
			document.write("</div>"); //-- pointThematicsEditor
			
			// build the symbology override
			document.write("<div id='attribColor' style='position:absolute; font-size:9px; font-family:verdana; top:220px; left:10px; height:18px; width:100%;'>");
				document.write("<label>Colour Override Options:</label>");
				document.write("<div style='position:relative; top:0px; left:0px; height:20px; width:100%;'>");
					//document.write("<form action='' name='attribColors' onchange='changeColor();'  >");
						document.write("Red:<input id='redOpt' name='attribColors' type='radio' value='red' onclick='changeColor(this.id);' style='background-color:transparent;' />")
						document.write("Blue:<input id='blueOpt' name='attribColors' type='radio'  value='blue' onclick='changeColor(this.id);' style='background-color:transparent;' />");
						document.write("Green:<input id='greenOpt' name='attribColors' type='radio'  value='green' onclick='changeColor(this.id);' style='background-color:transparent;' />");
						document.write("Yellow:<input id='yellowOpt' name='attribColors' type='radio'  value='yellow' onclick='changeColor(this.id);' style='background-color:transparent;' />");
					//document.write("</form>");
				document.write('</div>');
			document.write("</div>");//-- attribColor
		document.write("</div>"); //-- pointThematicsContent
		
	document.write("</div>");//-- pointThematics

	Drag.init(document.getElementById("pointThemeHeader"), document.getElementById("pointThematics"));
}




// function to build the file uploads user interface panel
function buildFileUploadPanel(panelX, panelY)
{
	document.write("<div id='sidebar:4'	style='position:absolute; top:"+panelX+"px; left:"+panelY+"px; width:235px; height:525px; z-index:60001; display: none;' onclick='shuffleAllPanels(this.id);'>");	
		makePopupHeader('sidebar:4',  'panelHeader:4',  'standardButton',  'Upload User Data' ,  'popupHeader',   blueBanner2.src,  'images/logo_symbol_small.gif',  'images/close_20.gif');				
		document.write("<div id='content:4' style='position:absolute; top:22px; left:0px; height:485px; width:231px; border:2px solid #0000D6; background-color:#ECE9D8;'>");
			document.write("<div id='uploadSection' class='functionBox' style='position:absolute; top:10px; left:5px; height:470px; width:220px;' >");		
				document.write("<center class='sectionHeader'>Upload User Data</center>");
				document.write("<img src='images/help.png' style='position:absolute; top:3px; right:2px; cursor:pointer;' title='Help' onclick=\"makePopup('uploader_new_help.html',  '650',  '800',  'both');\" />");		
					
					// -------- creates the row of control buttons ------//
					document.write("<table border=0 style='position:absolute; top:20px; left:0px; width:144px; font-size:10px; border-collapse:collapse; font-weight:bold;'><tr>");
						
						// New csv file for upload
						document.write("<td style='width:22px;'><center>");
							buttonHandler('lrad1','fileUploaded=false; xmlFileActive=false; changeSource(this.id);', 'New CSV File Upload', 'images/new.gif', true, true) ;
							mousedown('lrad1');
						document.write("</center></td>");
						
						// open published xml files
						document.write("<td style='width:22px;'><center>");
							buttonHandler('lrad2','changeSource(this.id);', 'Open Folder of Existing Saved XML Files', 'images/open.gif', true, true) ;
						document.write("</center></td>");

						document.write("<td style='width:22px;'><center>");
						document.write("<div id='infoThemeDiv'  style='background-color:transparent; display:none;'><center>");
								buttonHandler('infoTheme','if(userMarkers){bringToTop(userMarkers);}', 'bring points to top to click them', 'images/info.gif', false, true) ;
						document.write("</center></div></td>");//-- infoThemeDiv
						
						// filter plotted points
						document.write("<td style='width:22px;'><center>");
							document.write("<div id='filterDiv'  style='background-color:transparent; display:none;'><center>");
								buttonHandler('markersVC', 'toggleMarkersVisibility(this.id, "markersHolder");', 'show marker filter control', 'images/filter.gif', true, true) ;
							document.write("</center></div></td>");//-- filterDiv

						// modify point Thematics
						document.write("<td style='width:22px;'><center>");
							document.write("<div id='pointTheme'  style='background-color:transparent; display:none;'><center>");
								buttonHandler('markersTH', 'toggleMarkersVisibility(this.id, "pointThematics");', 'show point thematics editor control', 'images/markv.gif', true, true) ;
							document.write("</center></div></td>");//-- pointTheme

						// turn heqatmap on for plotted points
						document.write("<td style='width:22px;'>");	
							document.write("<div id='heatDiv'  style='background-color:transparent; display:none;'><center>");
								buttonHandler('heatmap', 'toggleHeatmap(this.id);', 'Turn on heatmap viewing', 'images/heatmap_dark.gif', true, true) ;
							document.write("</center></div></td>");//-- dragDiv
						
						// turn dragging on for plotted points
						//document.write("<td style='width:22px;'>");	
							//document.write("<div id='dragDiv'  style='background-color:transparent; display:none;'><center>");
								//buttonHandler('dragMarker', 'toggleDragging(this.id);', 'Turn on Dragging', 'images/dragging.gif', true, true) ;
							//document.write("</center></div></td>");//-- dragDiv

						// remove these plotted points and return to start mode
						document.write("<td style='width:22px;'><center>");
							document.write("<div id='killDiv'  style='background-color:transparent; display:none;'><center>");
								buttonHandler('deleteOD','killAllMarkers(); deleteAllUploadedFiles("killDiv");', 'Remove User overlayed Markers from Map and delete uploaded data from server', 'images/closeit.gif', false, true) ;
							document.write("</center></div></td>");//-- killDiv
						
						// Save an XML file that has been temporarily uploaded
						document.write("<td style='width:22px;'>");
							document.write("<div id='saveDiv'  style='background-color:transparent; display:none;'><center>");
								buttonHandler('saveXML', 'publishXml();', 'Publish file on Server - Click here to permanently save and make available to others the current set of plotted points', 'images/save.jpg', false, true) ;
							document.write("</center></div></td>");//-- saveDiv
						
						// List the uploaded/edited csv file and xml file
						document.write("<td style='width:22px;'>");
							document.write("<div id='amlOD'  style='background-color:transparent; display:none;'><center> ");
								buttonHandler('markerDownload','downloadCsv(this.id);', 'Open edited points file and allow user to download', 'images/report.jpg', false, true) ;
							document.write("</center></div></td>");//-- amlOD
					document.write("</tr></table>");
					
				//loadXmlFiles(xmlValuesList, xmlTitlesList);




				// setup the xml file pick list and progress bar - initially this is invisible and activated via ChangeSource function
				document.write("<div id='xmlEnter'  style='position:absolute; top:47px; left:5px; display:none; height:190px; width:100%;'>");
					document.write("<label  class='label' >*Select from Published Files:</label>");
						
						// build the List of Published Files section
						document.write("<div id='publishedList' class='whiteSunkenBox' style='position:absolute; overflow-y:scroll; top:15px; left:0px; display:block; height:140px; width:210px;'>");
							//document.write("<table border=0 id='publishedTable' style='border-collapse:collapse; width:100%;  margin:1px;'></table>"); 
						document.write("</div>"); //-- publishedList

						// set up the div for the progress bar
						document.write("<div id='progBarHolder2' class='progressBar2'  style='display:block; position:absolute; top:160px; left:5px; height:17px; width:200px;' >");
							document.write("<div id='progBar2'	style='display:none; position:absolute; top:0px; left:1px; height:17px; z-index:200; width:198px;' >");
							document.write("</div>");//-- progBar2
						document.write("</div>"); //-- progBarHolder2 
				document.write("</div>"); //-- xmlEnter
				//alert('hello ' +document.getElementById('xmlEnter'));

				//-- This hidden iFrame is used to redirect the geocoding output --//	
				document.write("<iframe id='RSIFrame' name='RSIFrame' style='position:absolute; top:0px; left:250px; width:0px; height:0px; background-color:white; opacity:1.0; border:0px;'></iframe>");

				//-- file uploading form --// 
				document.write("<div id='fileEnter' style='display:block;'>");	
					
					document.write("<form  name='form1' onsubmit='return fileCheck1(); ' action='inc/geocodeCsvFile_backup.php' enctype='multipart/form-data' target='RSIFrame' method='POST' onclick='javascript:if(userdata){killAllMarkers();}'>");
							
							document.write("<label  class='label' style='position:absolute; top:19px; left:0px;' >*Select a Local File:</label>");
							document.write("<input type='hidden' name='MAX_FILE_SIZE' value='1000000'  />");
							document.write("<input id='return' type='hidden' name='var' value='return' />");
							document.write("<input id='uploadControl' type='hidden' name='cond' value='sidebar:4' />");
							document.write("<input id='uploadDir' type='hidden' name='dir' value='useroverlays/' />");
							document.write("<input id='stamp' type='hidden' name='stamp' value='' />");
							document.write("<input id='gtype' type='hidden' name='gtype' value='Address' />");
							document.write("<input id='userAbstract' type='hidden' name='userAbstract' value='' />");
							document.write("<input id='srs' type='hidden' name='srs' value='"+srs+"' />");
							document.write("<input id='url' type='hidden' name='url' value='"+numapsService+"' />");

												
							document.write("<div id='formButtons' style='position:absolute; top:58px; left:0px; height:80px; width:160px; '>");
								document.write("<label class='label' style='position:absolute; top:0px; left:0px;'>*File Description:</label>");
								document.write("<input id='userAbs' class='box' style='position: absolute; top:0px; left:110px; width:90px; ' title='Enter a Description/Title of this uploaded points file' value='' name='userAbs' onchange='checkComplete();' onclick='this.value=\"\"; document.getElementById(\"attributeEditor\").style.display=\"none\";' />");
								
								document.write("<label class='label' style='position:absolute; top:20px; left:0px;'>*Header Rows:</label>");
								document.write("<input id='header' class='box' style='position: absolute; top:20px; left:110px; width:90px; ' title='Enter the number of Rows in file used as header/metadata rows' value='' name='headRows' onchange='checkComplete();' onclick='this.value=\"\"; document.getElementById(\"attributeEditor\").style.display=\"none\";' />");

								

								document.write("<label class='label' style='position:absolute; top:40px; left:0px;'>*Geocode Type:</label>");
								//document.write("<input class='box' style='position: absolute; top:20px; left:160px; width:40px;' title='Slect the type of souce data for the Geocoding process' id='geocodeType' value=''	name='geocodeType' onchange='checkComplete();'	/>");
/*
	var selectObject = document.getElementById(id);
	var bboxDesc = selectObject.options[selectObject.selectedIndex].value;
	currentElectorate = selectObject.options[selectObject.selectedIndex].text;
*/								
								
								
								
								document.write("<select id='geocodeOptions' name='geocodeOptions'  size='1' style='position: absolute; top:40px; left:110px; width:91px;' title='Slect the type of souce data for the Geocoding process' onchange='changeGeocodeType(this.id);' >");
									document.write("<option name='geocodeOptions' id='addrGeocode' selected value='Address' title='Geocode from Address - default'>Address</option>");
									document.write("<option name='geocodeOptions' id='meshblocksGeocode' disabled  value='MB_CODE:MESHBLOCKS:ABS' title='Geocode the centroid of the Meshblock boundary'>MeshBlocks</option>");
									document.write("<option name='geocodeOptions' id='CollectionDistrictsGeocode' disabled  value='CD_CODE:CENSUS_DISTRICTS:ABS' title='Geocode the centroid of the Census District boundary'>CCDs</option>");
									document.write("<option name='geocodeOptions' id='suburbsGeocode' value='SSC_NAME:SUBURBS:ABS' title='Geocode the centroid of the Suburb boundary'>Suburb</option>");
									document.write("<option name='geocodeOptions' id='suburbsStateGeocode'   value='SSC_NAME:STE_NAME:SUBURBS:ABS' title='Geocode the centroid of the Suburb boundary - must have Subub and state to be unique'>Suburb & State</option>");
									document.write("<option name='geocodeOptions' id='postalAreasGeocode' value='POA_CODE:POSTAL_AREAS:POA' title='Geocode the centroid of the Poscode boundary'>Postcodes</option>");
									document.write("<option name='geocodeOptions' id='LocalGovernmentsGeocode'  value='LGA_NAME:LOCAL_GOVT:ABS' title='Geocode the centroid of the Local Government Area boundary'>LGAs</option>");
								document.write("</select>");

								document.write("<label id='addrInstruct' class='label' style='position:absolute; top:60px; left:0px;'>*Address Cols:</label>");
								document.write("<input id='addressCols' class='box' style='position: absolute; top:60px; left:110px; width:90px;' title='Enter column numbers separated by a dash and used for the complete address (e.g. start-end).'  value=''	name='addressCols' onchange='checkComplete();' onclick='this.value=\"\";'	/>");
								

								document.write("<label class='label' style='position:absolute; top:80px; left:0px;'>*Lat/Long Cols:</label>");
								document.write("<input class='box' style='position: absolute; top:80px; left:110px; width:90px;' title='Enter columns used to store lat and long values (e.g. latCol-LonCol)' id='latlongCols' value='' name='latlongCols' onchange='checkComplete();' onclick='this.value=\"\";' />");

								document.write("<label class='label' style='position:absolute; top:100px; left:0px;'>Value Col:</label>");
								document.write("<input class='box' style='position: absolute; top:100px; left:110px; width:90px;' title='Enter column numbers separated by dash reserved for the Latitude and Longitude values (e.g. start-end)' id='symbolCols' value='' name='symbolCols' onclick='this.value=\"\";'/>");
							
								document.write("<label class='label' style='position:absolute; top:120px; left:0px;'>Class Cols:</label>");
								document.write("<input class='box' style='position: absolute; top:120px; left:110px; width:90px;' title='Enter columns used to define classificatrions and control some rendering attributes of circle symbol.' id='classCols' value='' name='classCols' onclick='this.value=\"\";'/>");
							document.write("</div>");//-- formButtons

							document.write("<div id='chartColEntry' style='position:absolute; top:198px; left:0px; width:205px; height:17px; z-index:1000; font-size:10px; font-weight:bold; '>");
								document.write("<label class='label' style='position: relative; top:0px; left:0px;'>Chart Cols:</label>");
								document.write("<input class='box' style='position: absolute; top:0px; left:110px; width:90px;' title='Enter columns used to produce an info chart (e.g. start-end)' id='graphCols' value='' name='graphCols' onKeyPress='checkEntry(event);' />");
							document.write("</div>");//-- chartColEntry
													
							//-- setup the input boxes as per different browsers --//
							document.write("<div id='geocodeControls' style='position:absolute; top:30px; left:0px; height:20px;'>");
								if (browser == "firefox")
								{	document.write("<input id='file1'  name='file' style='height:18px;' size='25' class='box' type='file' title='click Browse to select a local file for overlaying on map'/>");	}
								else if (browser == "msie")
								{	document.write("<input id='file1'  name='file' style='height:18px;' size='23' class='box' type='file' title='click Browse to select a local file for for overlaying on map'/>");		}
								else if (browser == "safari")
								{	document.write("<input id='file1'  name='file' style='width:207px; height:17px;' class='box' type='file' title='click Choose File to select a local file for for overlaying on map'/>");	}
							document.write("</div>"); //-- geocodeControls

							//-- setup the form submit button and progress bar
							document.write("<div id = 'loadButton' style='position:absolute; top:225px; left:4px; width:200px; height:20px; display:block;'>");
								
								// Geocoder Submit button
								document.write("<input id='upButt1' style='position:absolute; top:0px; left:0px; width:95px; height:19px; vertical-align:middle; color:gray;' type='submit' value='Geocode Data' class='buttup' onmousedown='this.className=\"buttdown\";' onmouseup='this.className=\"buttup\";' onmouseover='this.style.fontWeight=\"bold\";' onmouseout='this.style.fontWeight=\"normal\";' title='click here to geocode the collection of addresses' />");
								
								// uploading progress bar
								document.write("<div id='progBarHolder' style='display:block; border-top:1px solid gray; border-left:1px solid gray; border-right:1px solid white; border-bottom:1px solid white; position:absolute; top:0px; left:103px; height:17px; width:95px;	z-index:199; background-color:#d2d2d2;' >");
									document.write("<div id='progBar' style='display:none; position:absolute; top:0px; left:0px; height:17px; z-index:199; width:100%;' >");
									document.write("</div>");//-- progBar
								document.write("</div>");//-- progBarHolder
							document.write("</div>");//-- loadButton

					document.write("</form>");
				document.write("</div>");//-- fileEnter
											
				// -- Charting contols --//
				document.write("<div id='graphControls' style='position:absolute; top:275px; left:5px; width: 200px; height:40px;  '>");

					document.write("<div id='graphRadio' style='position: absolute; top:0px; left:0px; height:20px; z-index:1000; display: none;'>");
						document.write("<label class='label' style='position: absolute; top:0px; left:0px; width:45px;'>Type:</label>");
							
							document.write("<label  style='position:absolute; top:0px; left:30px; height:15px; '>MapPie </label>");
							document.write("<input  name='piebarlineRad' type='radio' id='mapPieRadio' checked value='mapPie' style='position: absolute; left:65px; height:15px; background-color:transparent; vertical-align:middle;' title='select a PIE Chart for these data Columns and to be displayed on the map' onclick='showUserPoints(geocodedFile, overrideAttribute);' />");			
							document.write("<label  style='position:absolute; top:0px; left:90px; height:15px; '>Pie </label>");
							document.write("<input  name='piebarlineRad' type='radio' id='pieRadio' checked value='pie' style='position: absolute; left:105px; height:15px; background-color:transparent; vertical-align:middle;' title='select a PIE Chart for these data Columns and to be displayed in the info popup bubble' onclick='showUserPoints(geocodedFile, overrideAttribute);' />");
							document.write("<label  style='position: absolute; top:0px; left:130px; height:15px; '>Bar </label>	");
							document.write("<input  name='piebarlineRad' type='radio' id='barRadio' value='bar' style='position:absolute; left:145px;  height:15px; background-color:transparent; vertical-align:middle;' title='select a BAR Chart for these data Columns and to be displayed in the info popup bubble' onclick='showUserPoints(geocodedFile, overrideAttribute); '	/>");
							document.write("<label  style='position: absolute; top:0px; left:170px; height:15px; '>Line </label>");
							document.write("<input  name='piebarlineRad' type='radio' id='lineRadio' value='line' style='position:absolute; left:185px;  height:15px; background-color:transparent; vertical-align:middle;' title='select a LINE Chart for these data Columns and to be displayed in the info popup bubble' onclick='showUserPoints(geocodedFile, overrideAttribute); '	/>");
							document.write("<label class='label' style='position: absolute; top:25px; left:0px;'>Title:</label>");
							document.write("<input class='box' style='position: absolute; top:25px; left:30px; width:175px;' title='Enter Title of the Chart' id='chartTitle' value='User Defined Chart' 	name='chartTitle' onKeyPress='checkEntry(event); ' />");
					document.write("</div>");//-- graphRadio
				
				document.write("</div>");//-- graphControls
			
				// -- area filter controls -- //
				document.write("<div id='winControls' style='position:absolute; top:320px; left:5px; width: 200px; height:20px;  '>");
					
					document.write("<div id='winRadio' style='position: absolute; top:0px; left:0px; height:20px; z-index:1000; display:block;'>");
						document.write("<label class='label' style='position: absolute; top:0px; left:0px; width:100px;'>Points to Load :</label>");
							document.write("<label  style='position:absolute; top:0px; left:90px; height:15px; '>All</label>");
							document.write("<input  name='winRad' type='radio' id='allRadio' checked value='All' style='position: absolute; left:105px; height:15px; background-color:transparent; vertical-align:middle;' title='Display all points in collection' onclick='zoom = true; polly = false; document.getElementById(\"lgaEnter:3\").style.display=\"none\";' />");
							document.write("<label  style='position: absolute; top:0px; left:130px; height:15px; '>Win</label> ");
							document.write("<input  name='winRad' type='radio' id='winRadio' value='Win' style='position:absolute; left:145px;  height:15px; background-color:transparent; vertical-align:middle;' title='Display points inside current window only' onclick='zoom = false; polly = false; document.getElementById(\"lgaEnter:3\").style.display=\"none\";' />");
							document.write("<label  style='position: absolute; top:0px; left:170px; height:15px; '>LGA</label>");
							document.write("<input  name='winRad' type='radio' id='lgaRadio' value='LGA' style='position:absolute; left:185px;  height:15px; background-color:transparent; vertical-align:middle;' title='Display points inside a selected LGA only' onclick='zoom = false; polly = true; document.getElementById(\"lgaEnter:3\").style.display=\"block\";' />");
					document.write("</div>");//-- winRadio
						
					//-- Local Governemnet Filter --//
					//makeLgaSelectControl(3);
					document.write("<div id='lgaEnter:3'  style='position:absolute; width:210px; height:40px; top:10px; left:0px; display: none;'>");						
						document.write("<table id='lgaAlphaButtons1' style='font-size:8px; cursor:pointer; text-align:center; position:absolute; top:6px; width:100%; height:20px; left:0px;'>");
							document.write("<tr><td>");
								alphabetButtons('AB:3', 'Local Governments starting with letters A to B', 'loadLgas("lgaSelBox:3", this.id,  "A to B");', 'A-B');
							document.write("</td><td>");
								alphabetButtons('CD:3', 'Local Governments starting with letters C to D', 'loadLgas("lgaSelBox:3", this.id,  "C to D");', 'C-D');
							document.write("</td><td>");
								alphabetButtons('EI:3', 'Local Governments starting with letters E to I', 'loadLgas("lgaSelBox:3", this.id,  "E to I");', 'E-I');
							document.write("</td><td>");
								alphabetButtons('JM:3', 'Local Governments starting with letters J to M', 'loadLgas("lgaSelBox:3", this.id,  "J to M");', 'J-M');
							document.write("</td><td>");
								alphabetButtons('NR:3', 'Local Governments starting with letters N to R', 'loadLgas("lgaSelBox:3", this.id,  "N to R");', 'N-R');
							document.write("</td><td>");
								alphabetButtons('SU:3', 'Local Governments starting with letters S to U', 'loadLgas("lgaSelBox:3", this.id,  "S to U");', 'S-U');
							document.write("</td><td>");
								alphabetButtons('VZ:3', 'Local Governments starting with letters V to Z', 'loadLgas("lgaSelBox:3", this.id,  "V to Z");', 'V-Z');
							document.write("</td></tr>");
						document.write("</table>");
														
						// -- form created on fly for the dropdown list -- //
						document.write("<div id='lgaSelBox:3'  style='display:block; position: relative; top:22px; left:0px; width:100%; '>");
						document.write("</div>");//-- lgaSelBox:3
						// -- force the first group of LGAs into Select Box -- //
						loadLgas("lgaSelBox:3", "AB:3",  "A to B");

					document.write("</div>");//-- lgaEnter:3
				document.write("</div>");//-- winControls
			
				
				

				// -- the main Refresh points button -- //
				document.write("<div id='refreshTitle' style='display:block'>");	
					document.write("<input id='refreshButton' style='position:absolute; top:380px; left:9px; width:200px; height:15px; z-index:1002; color:gray;' value='Refresh From Uploaded Points' class='buttup' onmousedown=\"this.className='buttdown';\" onmouseover=\"this.style.fontWeight='bold';\" onmouseup=\"this.className='buttup';\" onmouseout=\"this.style.fontWeight='normal';\" title='After changing any of the rendering filters this will refresh points on map' onclick='if(userdata){showUserPoints(geocodedFile, \"\", \"\");}else {alert(\"No points Uploaded yet?\");}' /> ");
				document.write("</div>");//-- refreshTitle
							
				// -- point navigation controls -- //	
				document.write("<div id='editButtons0' style='position:absolute; top:405px; left:9px; height:50px; width:200px; display:none; font-weight:normal;'>");
					
					
					document.write("<div id='editButtons1' class='buttup' style='position:absolute; top:0px; left:0px; height: 15px; width:47px; display:block; ' onmousedown=\"this.className='buttdown';\"	onmouseover=\"this.style.fontWeight='bold';\" onmouseup=\"this.className='buttup';\" onmouseout=\"this.style.fontWeight='normal';\" onclick='stepThruMarkers(\"START\");' title='click here to Jump to the Start of the Markers uploaded source file'>");
					document.write("Start");
					document.write("</div>");
						
					document.write("<div id='editButtons2' class='buttup' style='position:absolute; top:0px; left:52px; height: 15px; width:46px; display:block; '	onmousedown=\"this.className='buttdown';\"	onmouseover=\"this.style.fontWeight='bold';\" onmouseup=\"this.className='buttup';\" onmouseout=\"this.style.fontWeight='normal';\" onclick='stepThruMarkers(\"NEXT\");' title='click here to Advance to the Next Markers in the uploaded source file'>");
					document.write("Next");
					document.write("</div>");

					document.write("<div id='editButtons3' class='buttup' style='position:absolute; top:0px; left:102px; height: 15px; width:46px; display:block; ' onmousedown=\"this.className='buttdown';\"	onmouseover=\"this.style.fontWeight='bold';\" onmouseup=\"this.className='buttup';\" onmouseout=\"this.style.fontWeight='normal';\" onclick='stepThruMarkers(\"END\");'	title='click here to Jump to the last Marker in the source file'>");
					document.write("End");
					document.write("</div>");

					document.write("<div id='editButtons4' class='buttup' style='position:absolute; top:0px; left:153px; height: 15px; width:47px; display:block; ' onmousedown=\"this.className='buttdown';\" onmouseover=\"this.style.fontWeight='bold';\" onmouseup=\"this.className='buttup';\" onmouseout=\"this.style.fontWeight='normal';\" onclick='stepThruMarkers(\"BACK\");' title='click here to go Back to the previous Markers in the uploaded source file'>");
					document.write("Back");
					document.write("</div>");



					document.write("<div id='editButtons11' class='buttup' style='position:absolute; top:21px; left:0px; height: 15px; width:47px; display:block; 'onmouseover=\"this.style.fontWeight='bold';\"  onmouseout=\"this.style.fontWeight='normal';\" onclick='crudTransaction(\"CREATE\");' title='click here to insert a new marker into the uploaded file'>");
					document.write("Create");
					document.write("</div>");
						
					document.write("<div id='editButtons12' class='buttup' style='position:absolute; top:21px; left:52px; height: 15px; width:46px; display:block; ' onmouseover=\"this.style.fontWeight='bold';\" onmouseout=\"this.style.fontWeight='normal';\" onclick='crudTransaction(\"READ\");' title='click here to inspect a marker from its unique key'>");
					document.write("Read");
					document.write("</div>");

					document.write("<div id='editButtons13' class='buttup' style='position:absolute; top:21px; left:102px; height: 15px; width:46px; display:block; ' onmouseover=\"this.style.fontWeight='bold';\" onmouseout=\"this.style.fontWeight='normal';\" onclick='crudTransaction(\"UPDATE\");'	title='click here to modify the attributes of any uploaded marker'>");
					document.write("Update");
					document.write("</div>");

					document.write("<div id='editButtons14' class='buttup' style='position:absolute; top:21px; left:153px; height: 15px; width:47px; display:block; ' onmouseover=\"this.style.fontWeight='bold';\" onmouseout=\"this.style.fontWeight='normal';\" onclick='crudTransaction(\"DELETE\");' title='click here to delete or remove a marker from the uploaded file'>");
					document.write("Delete");
					document.write("</div>");	
				
					
					
					document.write("<div id='editButtons5' class='buttup' style='position:absolute; top:42px; left:0px; height: 15px; width:98px; display:none; ' onmousedown=\"this.className='buttdown';\" onmouseover=\"this.style.fontWeight='bold';\" onmouseup=\"this.className='buttup';\" onmouseout=\"this.style.fontWeight='normal';\" onclick='saveAndQuit();' title='Click here to Quit and Save the moved Markers into the uploaded source file'>");
					document.write("Save & Quit");
					document.write("</div>");	

					document.write("<div id='editButtons6' class='buttup' style='position:absolute; top:42px; left:102px; height:15px; width:98px; display:none;'	onmousedown=\"this.className='buttdown';\" onmouseover=\"this.style.fontWeight='bold';\" onmouseup=\"this.className='buttup';\" onmouseout=\"this.style.fontWeight='normal';\" onclick='quitNoSave();' title='click here to Quit and not Save the moved Markers into the uploaded source file.'>");
					document.write("Quit Only");
					document.write("</div>");

				document.write("</div>");//-- editButtons0
					
			document.write("</div>");//-- uploadSection
		document.write("</div>");//-- content:4
	document.write("</div>");//-- sidebar:4
	
	Drag.init(document.getElementById("panelHeader:4"), document.getElementById("sidebar:4"));
}


// function to build an attribute editor for uploaded points
function buildAttributeEditor()
{
	document.write("<div id='attributeEditor' style='position:absolute; top:50px; left:420px; width:235px; height:470px; z-index:60001; display: none;'>");

		document.write("<div id='attEditorHeader' class='popupHeader' style='position:absolute; top:0px; left:0px; width:100%; background-image:url("+blueBanner2.src+"); cursor:move;' title='Hold left mouse down to drag this control around' >");
			document.write("<img src='images/logo_symbol_small.gif' style='position:absolute; top:7px; left:4px;' />");
			document.write("<span style='position:absolute; top:4px; left:30px;'>Attribute Editor</span>");

			document.write("<div id='editorExit' style='position:absolute; top:5px; right:4px; cursor:pointer;' onclick='document.getElementById(\"attributeEditor\").style.display=\"none\";' title='Close me' >");
				document.write("<img src='images/close.gif' style='height:15px; width:15px;'/>");
			document.write("</div>"); //-- editorExit
		document.write("</div>"); //-- attEditorHeader
				
		document.write("<div id='editorContent' style='position:absolute; top:22px; left:0px; height:450px; width:231px; border:2px solid #0000D6; background-color:#ECE9D8;' >");

		document.write("<label class='label' style='position:absolute; top:5px; left:10px;'>File Abstract:</label>");
		document.write("<input id='fileAbstract' type='text' style='position:absolute; top:20px; left:10px; width:185px;' title='You can edit this field at anytime' value=''></input>");
		document.write("<img src='images/world_edit.png' id='fileAbsEditorImage' onclick='popupFileAbstractEditor(\"fileAbstract\");' style='position:absolute; top:20px; left:205px;' title='Click here to open the text Edititor tool'/>"); 
		
		// build the data dependent section
			document.write("<div id='editorEntryDiv' class='functionBox' style='position:absolute; top:40px; left:10px; display:block; width:205px; overflow-y:auto; overflow-x:hidden; height:350px; maxHeight:370px; margin:5px;'>");

				document.write("<form  id='editorEntryForm' action='' enctype='multipart/form-data' target='RSIFrame' method='POST' >");
				document.write("</form>");

			document.write("</div>"); //-- editorEntryDiv
		document.write("</div>"); //-- editorContent 

		// -- the main commit transaction button -- //
		document.write("<div id='commitAttChange' style='display:block'>");	
			document.write("<input id='commitChanges' style='position:absolute; top:435px; left:15px; width:205px; height:15px; z-index:1002; color:black;' value='Commit Changes' class='buttup' onmousedown=\"this.className='buttdown';\" onmouseover=\"this.style.fontWeight='bold';\" onmouseup=\"this.className='buttup';\" onmouseout=\"this.style.fontWeight='normal';\" title='After changing any of the attribute values this will save all changes to uploaded file' onclick='commitAttributeChanges(); ' /> ");
		document.write("</div>");//-- commitAttChange
	document.write("</div>");//-- attributeEditor

	Drag.init(document.getElementById("attEditorHeader"), document.getElementById("attributeEditor"));
}







// function to build the Territory Manager interface panel
function buildTerritoryManagerPanel(panelX, panelY)
{
	document.write("<div id='sidebar:6'	style='position:absolute; top:"+panelX+"px; left:"+panelY+"px; width:235px; height:620px; z-index:60001; display: none;' onclick='shuffleAllPanels(this.id);'>");
	
	makePopupHeader('sidebar:6',  'panelHeader:6',  'standardButton',  'Territory Manager' ,  'popupHeader',   blueBanner2.src,  'images/logo_symbol_small.gif', 'images/close_20.gif');
				
		document.write("<div id='content:6' style='position:absolute; top:22px; left:0px; height:590px; width:231px; border:2px solid #0000D6; background-color:#ECE9D8;' >");
			
			document.write("<div id='territories' class='functionBox' style='position:absolute; top:10px; left:5px; width:220px; height:570px;' >");		
				document.write("<center class='sectionHeader'>Territories Manager</center>");
				document.write("<img src='images/help.png' style='position:absolute; top:1px; right:2px; cursor:pointer;' title='Help' onclick='makePopup(\"territoryManager_help.html\",  \"650\",  \"800\",  \"both\");' />");
				
				// ---------- build the command buttons -----------//
				document.write("<table border=0 style='position:absolute; top:20px; left:5px; width:auto;  font-size:10px; border-collapse:collapse; font-weight:bold; '>");
					document.write("<tr>");
						
						// build the NEW button
						document.write("<td style='width:22px;'><center>");
							buttonHandler('newTerr','changeMode(this.id); ', 'New Territory Create', 'images/new.gif', true, true) ;
							mousedown('newTerr');
						document.write("</center></td>");
						
						// build the OPEN button
						document.write("<td style='width:22px;'><center>");
							buttonHandler('openTerr','changeMode(this.id);', 'Open Folder of Existing Territories', 'images/open.gif', true, true) ;
						document.write("</center></td>");

						// build the report button
						document.write("<td style='width:22px;'><center>");
							buttonHandler('listTerr','showHideTerritoriesReport(this.id, "territoriesReportHolder2");', 'Show Report', 'images/report.jpg', true, true) ;
						document.write("</center></td>");

						// build the search territory button
						document.write("<td style='width:22px;'><center>");
							buttonHandler('searchTerr','searchButtId=\"searchTerr\", toggleSearch(\"searchTerr\");', 'Launch search panel', 'images/search.gif', true, true) ;
						document.write("</center></td>");
						
						// build the Reset Territory Form button
						document.write("<td style='width:22px;'><center>");
							buttonHandler('resetTerr', 'unload(); javascript:location.reload(true);', 'Reset Territory Manager- Click here to set territory Manage to start configuration', 'images/reset.gif', false, true) ;
						document.write("</center></td>");
						
						// build the homebase toggle button
						document.write("<td style='width:22px;'><center>");
							buttonHandler('homeTerr','toggleHome(\"homeTerr\");', 'show home base', 'images/home.png', true, false) ;
						document.write("</center></td>");

						// build the territory Labels toggle button
						document.write("<td style='width:22px;'><center>");
							buttonHandler('labelTerr','toggleLabels(\"labelTerr\");', 'show Territory labels', 'images/labels_letter.gif', true, false) ;
						document.write("</center></td>");

						// build the territory Labels toggle button
						//document.write("<td style='width:22px;'><center>");
						//	buttonHandler('allTerrsList','buildCompositeReport(\"allTerrsList\");', 'Show Report', 'images/report.jpg', true, true) ;
						//document.write("</center></td>");
		
					document.write("</tr>");
		
				document.write("</table>");
				

				// build the Territory Input Section
				document.write("<div id='territoriesForm'  style='position:absolute; top:40px; left:5px; display:block; height:207px; width:207px;'>");
					
					// ---- Current Active Layer Name from a picklist
					document.write("<div id='activeLayerSelect' style='position:absolute; top:10px; left:0px; width:210px;'>");
						document.write("<label class='label' >*Current Active Layer:</label>")
							

							document.write("<label class='label' style='position:absolute; top:2px; left:145px;' >View All:</label>");
							document.write("<input id='showAllTerr' type='checkbox' checked style='position:absolute; top:-4px; left:190px; background-color:transparent;' onclick='showHideAllTerritories(this.id);' title='check this box to show all Territories in your folder' />")
						document.write("<select id='actLayOptions' name='actLayOptions'  size='1' style='width:210px;' title='Select a Layer as the Active Layer for building Territories' onchange='swapActiveLayer();' >");
							
							// make first option instructional
							document.write("<option name='actLayOptions' id='actLayOpt:0' value='No Active Layer' title='click from optiond below to select an Active Layer'  >--- Please select from below ---</option>");
							
							// build a list of candidate active layers
							for (var i=0; i<Name.length; i++ )
							{
								var layNameShort = Name[i].split(":")[0];// strip off :ABS
								if(layNameShort !== '')
								{
									//if(i == 1) {var selected = "selected='selected'"; }
									//else {selected = '';}
									document.write("<option name='actLayOptions' id='actLayOpt:"+i+"' value='"+layNameShort+"' title='click to make "+layNameShort+" the Current Active layer'  >"+layNameShort+"</option>");
								}
							}
						document.write("</select>");
					document.write("</div>"); //-- activeLayerSelect
					
					document.write("<div id='enterTerritoryDetails' style='position:absolute; top:45px; left:0px; width:210px; height:220px; '>");
						document.write("<label  class='label' style='position:absolute; top:0px; left:10px; ' >Enter/Edit Territory Details:</label>");
						
						//-- Territory Input Form --//
						document.write("<form  name='territoryInputForm' onsubmit='return fileCheckForm(); ' action='inc/buildTerritoryXml.php' enctype='multipart/form-data' target='RSIFrame' method='POST' onclick='javascript:if(territoryMarkers){killTerritoryMarkers();}' >");
							document.write("<div id='territoryInputs'  style='position:absolute; top:5px; left:10px; height:190px; width:100%; '>");
								// ---- Territory Name
								document.write("<label class='label' style='position:absolute; top:10px; left:0px;'>*Territory Name:</label>");
								document.write("<input class='box' style='position: absolute; top:22px; left:0px; width:100%;' title='Enter the Name of this Territory' id='nameOfTerritory' value='' />");

								// ---- Territory Contact Name
								document.write("<label class='label' style='position:absolute; top:40px; left:0px;'>*Contact Name:</label>");
								document.write("<input class='box' style='position: absolute; top:52px; left:0px; width:100%;' title='Enter the Name of Contact person for this Territory' id='contactOfTerritory' value='' />");

								// ---- Territory Home base address
								document.write("<label class='label' style='position:absolute; top:70px; left:0px;'>*Territory Address:</label>");
								document.write("<input class='box' style='position: absolute; top:82px; left:0px; width:100%;' title='Enter the full address of the home base for this Territory. Hit enter after changing the address to see the location on map' id='addressOfTerritory' value=''  onkeypress='return checkEnterAddress(event,  this.value);'/>");

								// ---- Territory remote link to Enterprise databse
								document.write("<label class='label' style='position:absolute; top:100px; left:0px;'>Unique ID of Territory:</label>");
								document.write("<input class='box' style='position: absolute; top:112px; left:0px; width:100%;' title='Enter the enterprise database code for this Territory' id='dbCodeOfTerritory' value='' />");

								// ---- Territory Abstract
								document.write("<label class='label' style='position:absolute; top:130px; left:0px;'>Territory Abstract:</label>");
								document.write("<textarea class='box' style='position: absolute; top:142px; overflow-y:auto; left:0px; width:100%; height:60px;' title='Enter Abstract or description for this Territory' id='abstractOfTerritory' value='' ></textarea>");
								
								// ****** main progress buttons ******
								document.write("<input id='enterDigitMode' type='button' value='Enter Polypika Mode' class='buttup' style='position:absolute; top:212px; left:0px; cursor:pointer; height:20px; width:190px; color:gray;' title='Enter Polypika Mode' onclick='showHidePolypikaPanel(this.id);'  onmousedown='this.className=\"buttdown\";' onmouseup='this.className=\"buttup\";' ></input>");
								
							document.write("</div>"); //-- territoryInputs	
						document.write("</Form>"); //-- territoryInputForm
						document.write("</div>"); //-- enterTerritoryDetails

						
						
						// Current Territory panel part
						document.write("<div id='currentTerritoryData' style='position:absolute; top:295px; left:0px; height:160px; width:210px; '>");
						
						separator('2px','-5px', '208px', 'horizontal');
						
						document.write("<span style='position:absolute; top:0px; width:100%'><center class='sectionHeader' >Territory Editor</center></span>");
						document.write("<img src='images/help.png' style='position:absolute; top:1px; right:2px; cursor:pointer;' title='Help' onclick='makePopup(\"territoryManager_help.html\",  \"650\",  \"800\",  \"both\");' />");

							// build the row of Territory file editing buttons
							// ---------- build the command buttons -----------//
							document.write("<table border=0 style='position:absolute; top:25px; left:0px; width:auto;  font-size:10px; border-collapse:collapse; font-weight:bold; '>");
								document.write("<tr>");
									
									// build the remove Territory from the map button
									document.write("<td style='width:22px;'><center>");
										buttonHandler('removeTerr','deletePolypikaSelection(); currentTerrRow=-1;', 'Remove User selected Territory from Map', 'images/closeit.gif', false, true) ;
									document.write("</center></td>");
																		
									// build the zoomTo territory button
									document.write("<td style='width:22px;'><center>");
										buttonHandler('zoomToTerr', 'zoomToTerritory(territoryBounds);', 'Zoom To territory - Click here to zoom to whole Territory', 'images/zoomTo.gif', false, true) ;
									document.write("</center></td>");
																		
									// build the show composite polygons button
									document.write("<td style='width:22px;'><center>");
										buttonHandler('innerTerr','showInnerTerritory();', 'Show Inner Boundaries', 'images/layers.png', true,true) ;
									document.write("</center></td>");

									// build the concentric circles button
									document.write("<td style='width:22px;'><center>");
									//alert(ccNo+" : "+ccInc)
										buttonHandler('circlesTerr','showConcentricCircles(ccNo, ccInc);', 'Show 10Km Radial Distances', 'images/concent.gif', true,true) ;
									document.write("</center></td>");

									// build the Polygon grab button
									//document.write("<td style='width:22px;'><center>");
									//	buttonHandler('grabPoly','showHidePolypikaPanel(this.id);', 'Enter Polypika Mode', 'images/group.gif', true, true) ;
									//document.write("</center></td>");
									
									// build the theme editor button
									document.write("<td style='width:22px;'><center>");
										buttonHandler('themeTerr','editTerritoryTheme();', 'enter theme editor mode', 'images/themes.gif', true, true) ;
									document.write("</center></td>");
									
									// build the report button
									document.write("<td style='width:22px;'><center>");
										buttonHandler('reportTerr','aggregateTerritoryStats(\"reportTerr\");', 'Show Report', 'images/report.jpg', true, true) ;
									document.write("</center></td>");

									// build the save territory button
									document.write("<td style='width:22px;'><center>");
										buttonHandler('saveTerr', 'saveTerritory("save");', 'Save territory - Click here to permanently save this Territory', 'images/save.jpg', false, true) ;
									document.write("</center></td>");

								document.write("</tr>");
							document.write("</table>");

							// build the current Territory display window
							document.write("<div id='terrDetails' style='position:absolute; top:55px; left:0px; width:205px; height:80px;'>");
								document.write("<label class='label' id='currentTerritoryLabel'  style='position: absolute; top:0px; left:0px; ' >Current Territory:</label>");
								document.write("<label class='label' id='currentTerritoryArea'  style='position: absolute; top:0px; left:150px; ' >Area(Sq Km):</label>");
								document.write("<div id='selectedTerr' style='position:absolute; top:12px; left:0px; width:145px; height:17px; font-size:11px; background-color:#FFF; border-top:1px solid gray; border-left:1px solid gray;	border-right:1px solid white; border-bottom:1px solid white;' >");
								document.write("</div>") //-- selectedTerr
								document.write("<div id='selectedTerrArea' style='position:absolute; top:12px; left:150px; width:55px; height:17px; font-size:11px; background-color:#FFF; border-top:1px solid gray; border-left:1px solid gray;	border-right:1px solid white; border-bottom:1px solid white;' >");
								document.write("</div>") //-- selectedTerr

								// build Areas Included in Territory window
								document.write("<div id='inclusions' style='position: absolute; top:32px; left:0px; display:block;'>");
									document.write("<label class='label' id='inclusionsLabel'  >Territory Includes:</label>");
									document.write("<div id='areasHolder' style='position: absolute; top:15px; left:0px; width:207px; height:80px; overflow-y:scroll; background-color:#FFF; border-top:1px solid gray; border-left:1px solid gray; border-right:1px solid white; border-bottom:1px solid white;' >"); 
										document.write("<table border=0 id='areasTable' style='width:100%; font-size:10px; border-collapse:collapse; font-weight:normal; background-color:white; height:auto;'></table>"); 
									document.write("</div>"); //-- areasHolder
								document.write("</div>"); //-- inclusions
							
								// -- build opacity control
								document.write("<div id='terrOpacityControls' style='position:absolute; top:135px; left:50px; width:110px; height:30px;' title='drag bar to change opacity on the selected Territory only'>");
									document.write("<span class='label' style='position:relative; top:0px; left:0px;'>Transparency Control</span>");
										var top = '0'; var left = '50'; opacityValue2=1.0;
										displayTerritorySlider(top, left,  true,  sliderHoriz);
										
								document.write("</div>"); //-- TerrOpacityControl 
							document.write("</div>"); //-- terrDetails
												
						document.write("</div>"); //-- currentTerritoryData
				

				document.write("</div>"); //-- territoriesForm

			document.write("</div>"); //-- Territories

		document.write("</div>"); //-- content:6 
	document.write("</div>");//-- sidebar:6
	
	Drag.init(document.getElementById("panelHeader:6"), document.getElementById("sidebar:6"));
	
}

function makeRenderPanel()
{
	document.write("<div id='renderPanel' style='position:absolute; top:50px; left:420px; width:235px; height:250px; z-index:60001; display: none;'>");


		document.write("<div id='renderHeader' class='popupHeader' style='position:absolute; top:0px; left:0px; width:100%; background-image:url("+blueBanner2.src+"); cursor:move;' title='Hold left mouse down to drag this control around' >");
			document.write("<img src='images/logo_symbol_small.gif' style='position:absolute; top:7px; left:4px;' />");
			document.write("<span style='position:absolute; top:4px; left:30px;'>Colour Theme Editor</span>");

			document.write("<div id='renderExit' style='position:absolute; top:5px; right:4px; cursor:pointer;' onclick='mouseup(\"themeTerr\");document.getElementById(\"renderPanel\").style.display=\"none\"; document.getElementById(\"themeTerr\").title=\"enter theme editor mode\";' title='Close me' >");
				document.write("<img src='images/close.gif' style='height:15px; width:15px;'/>");
			document.write("</div>"); //-- renderExit
		document.write("</div>"); //-- renderHeader 
				
		document.write("<div id='renderContent' style='position:absolute; top:22px; left:0px; height:230px; width:231px; border:2px solid #0000D6; background-color:#ECE9D8;' >");
		// build the Renderer section
			document.write("<div id='renderEditor' class='functionBox' style='position:absolute; top:15px; left:10px; display:block; height:200px; width:210px;'>");
			document.write("</div>"); //-- renderEditor
		document.write("</div>"); //-- renderContent 

		// -- the main Refresh Territories button -- //
		document.write("<div id='refreshTerritory' style='display:block'>");	
			document.write("<input id='refreshTerr' style='position:absolute; top:210px; left:15px; width:200px; height:15px; z-index:1002; color:gray;' value='Refresh Territory' class='buttup' onmousedown=\"this.className='buttdown';\" onmouseover=\"this.style.fontWeight='bold';\" onmouseup=\"this.className='buttup';\" onmouseout=\"this.style.fontWeight='normal';\" title='After changing any of the rendering styles this will refresh the Territory on the map' onclick='highlightTerritory(sqlString, \"\"); document.getElementById(\"renderPanel\").style.display=\"none\"; mouseup(\"themeTerr\"); document.getElementById(\"themeTerr\").title = \"enter theme editor mode\";' /> ");
		document.write("</div>");//-- refreshTitle
	document.write("</div>");//-- renderPanel

	Drag.init(document.getElementById("renderHeader"), document.getElementById("renderPanel"));
}

function makeFolderPanel()
{
	document.write("<div id='folderPanel' style='position:absolute; top:50px; left:420px; width:235px; height:260px; z-index:60001; display: none;'>");

		document.write("<div id='folderHeader' class='popupHeader' style='position:absolute; top:0px; left:0px; width:100%; background-image:url("+blueBanner2.src+"); cursor:move;' title='Hold left mouse down to drag this control around' >");
			document.write("<img src='images/logo_symbol_small.gif' style='position:absolute; top:7px; left:4px;' />");
			document.write("<span style='position:absolute; top:4px; left:30px;'>Territories Folder</span>");

			document.write("<div id='folderExit' style='position:absolute; top:5px; right:4px; cursor:pointer;' onclick='document.getElementById(\"folderPanel\").style.display=\"none\";' title='Close me' >");
				document.write("<img src='images/close.gif' style='height:15px; width:15px;'/>");
			document.write("</div>"); //-- terrList
		document.write("</div>"); //-- territoriesReportHeader 
				
		document.write("<div id='folderContent' style='position:absolute; top:22px; left:0px; height:230px; width:231px; border:2px solid #0000D6; background-color:#ECE9D8;' >");


		document.write("<div id='folderInner' class='functionBox' style='position:absolute; top:10px; left:5px; height:210px; width:221px;' >");

		document.write("<label  class='label' style='position:absolute; top:5px; left:10px;' >Select Territory:</label>");
	
			// build the Territory Folders section
			document.write("<div id='territoriesList' class='whiteSunkenBox' style='position:absolute; overflow-y:scroll; top:20px; left:5px; display:block; height:180px; width:210px;'>");
				//document.write("<table border=0 id='territoriesTable' style='width:210px;'></table>"); 
			document.write("</div>"); //-- territoriesList
		
		document.write("</div>"); //-- folderInner 

		document.write("</div>"); //-- folderContent 
	document.write("</div>");//-- folderPanel

	Drag.init(document.getElementById("folderHeader"), document.getElementById("folderPanel"));
}

// function to build the DDrapes user interface panel
function buildDemoDrapesPanel(editorFlag, infoFlag, panelX, panelY)
{
	document.write("<div id='sidebar:2'	style='position:absolute; top:"+panelX+"px; left:"+panelY+"px; width:235px; height:420px; z-index:60001; display: none;' onclick='shuffleAllPanels(this.id);'>");

		makePopupHeader('sidebar:2',  'panelHeader:2',  'standardButton',  'DemographicDrapes' ,  'popupHeader',   blueBanner2.src,  'images/logo_symbol_small.gif', 'images/close_20.gif');
	
		// this is the grey background 
		document.write("<div id='content:2' style='position:absolute; top:22px; left:0px; height:420px; width:231px; border:2px solid #0000D6; background-color:#ECE9D8;' >");
		
			// this is the internal function panel
			document.write("<div id='DDrapes' class='functionBox' style='position:absolute; top:10px; left:5px; width:220px; height:365px;' >");		
				document.write("<center id='ddrapesFunction' class='sectionHeader' >Library Mode</center>");
				document.write("<img src='images/help.png' style='position:absolute; top:1px; right:2px; cursor:pointer;' title='Help' onclick='makePopup(\"demographicdrapes_help.html\",  \"650\",  \"800\",  \"both\");' />");
				
				// Standard Mode buttons go here
				document.write("<table border=0 style='position:absolute; top:15px; left:1px; width:100px;  font-size:10px; border-collapse:collapse; font-weight:bold; '>");
					document.write("<tr style='height:25px;'> ");
						
						// library mode button
						document.write("<td ><center>");
							buttonHandler('libraryMode', 'if(configFlag || filterFlag){toggleDDrapeModes("libraryMode");}', 'enter library mode', 'images/tree.gif', true, true);			
						document.write("</center></td>");
				
						// configure mode button
						if(configFlag)
						{
							document.write("<td style='width:22px;'><center>");
								buttonHandler('configMode','toggleDDrapeModes("configMode");', 'enter analysis mode', 'images/tools.gif', true, true) ;
						}
						document.write("</center></td>");
						
						// Filter mode button
						if(filterFlag)
						{
							document.write("<td style='width:22px;'><center>");
								buttonHandler('filterMode','toggleDDrapeModes("filterMode");', 'enter filter mode', 'images/filter.gif', true, true) ;
							document.write("</center></td>");
						}
						
			
					// legend control button
						document.write("<td style='width:22px;'><center>");
							buttonHandler('legendDD','if (DemoDrape != null){ showHideLegend(this.id);}', 'show legend', 'images/legend.jpg', false, true) ;
						document.write("</center></td>");

						// delete the DDrape layer
						document.write("<td ><center>");
							buttonHandler('deleteDD2', 'removeAllDrapeLayers();', 'remove current DemographicDrape', 'images/closeit.gif', false, true);	
						document.write("</center></td>");

						
						
						
						// only do this if requested
						if(infoFlag)
						{	document.write("<td style='width:22px;'><center>");
								buttonHandler('gfiDD','if (DemoDrape != null){ showHideInfoPanel(\"gfiDD\");}', 'enter polygon pick mode', 'images/info.gif', true, true) ;
							document.write("</center></td>");
							
							document.write("<td style='width:22px;'><center>");
								buttonHandler('reportopen','if (DemoDrape != null){toggleReport(this);}', 'Show Report', 'images/report.jpg', true, false) ;
							document.write("</center></td>");
						}							
						
						document.write("<td style='width:22px;'>");
							document.write("<div id='loadWheelDrape' style='display:none;'>");
								document.write("<img src='images/loader.gif' style='vertical-align:middle; float:left;' /> ");
							document.write("</div>");//-- loadWheelDrape 
						document.write("</td>");


					document.write("</tr>");
					
				document.write("</table>");

//-------------------------------------------------------------------------------------------------------					
// this is the DDrape filtering section
		var tabWidth = 215;
		//if(browser == 'msie'){tabWidth=190;}
		document.write("<div id='filterModeSection' style='width:"+tabWidth+"px; position:absolute; top:40px; left:1px; height:302px; display:none; ' >");		
	
			document.write("<table id='qDrapesContainer2' border='0'  style=' width:100%; border-collapse:collapse;'>");
					//document.write("<tr><td class='underline' ></td></tr>");		
					
					document.write("<tr><td style='height:32px; width:100%;'>");
						document.write("<label>Select Statistical Level:</label>");
							document.write("<div id='filterDrapeLevel' style='vertical-align:top; height:16px; width:100%;' ></div>");		
					document.write("</td></tr>");
					
					document.write("<tr><td style='height:32px; width:100%;'>");
						document.write("<div id='quickDrapes2' ><label>Select Thematic Level:</label>");
							document.write("<div id='filterDrapeTheme' style='vertical-align:top; height:16px; width:100%;' ></div>");		
						document.write("</div>");
					document.write("</td></tr>");
					
					
					document.write("<tr><td style='width:100%; '>");
						document.write("<div id='radioClass' style='height:25px;' >");
							document.write("<form action='' name='classType' id='classType'  >");
								document.write("Class Level:<input name='classType' id='classIt' style='background-color:transparent;' type='radio' value='classes'  onclick='swapClassLevels(this.value);'/>");
								document.write("Attribute Level:<input name='classType' id='attribsIt' style='background-color:transparent;' type='radio' value='attributes' checked='checked' onclick='swapClassLevels(this.value);' />");
							document.write("</form>");
						document.write("</div>");
					document.write("</td></tr>");
					
					
					document.write("<tr style='height:22px;'><td style='width:100%;'>");
						document.write("<div id='ddrapeKeywords' style='padding-top:2px; height:20px; width:100%;'>");
							document.write("<div id='filterByKeyword' style='height:20px;' >");
								document.write("<label>Keywords: </label><input id='ddrapeWords' type=input  style='width:145px;' onkeypress='return checkEnterKeyword(event, this);' value='' onclick=this.value='' title='Enter Keywords followed by ENTER - Multiple keywords are separated with a comma. e.g coastal,forest,etc.' ></input>");

							document.write("</div>");		
						document.write("</div>");
					document.write("</td></tr>");

				
					document.write("<tr><td style='height:175px; width:100%;'>");
						
						document.write("<div style='top:0px; left:0px; height:100%;'>")
							document.write("<span style='width:auto; float:left;'>Select Values / Edit Colours:</span><input id='defaultButton' class='buttup' style='width:auto; float:right; text-align:center;' onclick='applyDefaultColours();' value='Defaults' type='button' title='Click to reload the original defaults colours.' onmousedown='this.className=\"buttdown\";' onmouseover='this.style.fontWeight=\"bold\";' 	onmouseup='this.className=\"buttup\";' 	onmouseout='this.style.fontWeight=\"normal\"; this.blur();' ></input>");
						
							document.write("<div style='width:100%;  padding-left:2px;'>");
								document.write("<input id='allAttsToggleControl' style='background-color:transparent;' type='checkbox' unchecked onclick='toggleAllTicks(this.checked);' title='check/uncheck this to globally change layer checkboxes' /><label>All Classes/Attributes</label>");
							document.write("</div>");
					
							document.write("<div id='drapeAtts2' class='whiteSunkenBox' style='position:absolute; overflow-y:scroll; display:block; vertical-align:top; height:140px; width:210px;' ></div>");
						document.write("</div>");
					
					document.write("</td></tr>");

							
					document.write("<tr><td style='height:20px; width:100%;'>");
						
						document.write("<center><input id='goButton' class='buttup' style='width:100%; position:relative; top:5px;' onclick='makeNewFilteredDDrape();' value='Refresh DemographicDrape' type='button' title='Click here to build and apply the new filter.' onmousedown='this.className=\"buttdown\";' onmouseover='this.style.fontWeight=\"bold\";' 	onmouseup='this.className=\"buttup\";' 	onmouseout='this.style.fontWeight=\"normal\"; this.blur();' ></input></center>");

					document.write("</td></tr>");

		
			document.write("</table>");
		document.write("</div>"); // filterModeSection
					


//-------------------------------------------------------------------------------------------------------					
// this is the DDrape configuration/analysis section
		document.write("<div id='configModeSection' style='width:215px; position:absolute; top:40px; left:1px; height:350px; display:none;' >");		
			document.write("<table id='qDrapesContainer' border='0'  style=' width:100%; border-collapse:collapse;'>");
					//document.write("<tr><td class='underline' ></td></tr>");		
					
					document.write("<tr style='height:35px;'><td style='width:100%;'>");
						document.write("<label>Select Statistical Level:</label>");
							document.write("<div id='configDrapeLevel' style='vertical-align:top; height:16px; width:100%;' ></div>");		
					document.write("</td></tr>");
					
					document.write("<tr style='height:35px;'><td style='width:100%;'>");
						document.write("<div id='quickDrapes' ><label>Select Thematic Level:</label>");
							document.write("<div id='configDrapeTheme' style='vertical-align:top; height:16px; width:100%;' ></div>");		
						document.write("</div>");
					document.write("</td></tr>");
				
					document.write("<tr style='height:40px;'><td style='width:100%;'>");
						document.write("<label>Select Analysis Attribute:</label>");
						document.write("<div id='drapeAtts' style='vertical-align:top; height:20px; width:100%;' ></div>");
					document.write("</td></tr>");	
					
					document.write("<tr style='height:18px;'><td style='width:100%; '>");
						//document.write("<label>Configure DemographicDrape:</label>");
						document.write("<div id='drapeType' style='vertical-align:top; height:18px; width:100%;' >");
							document.write("<form action='' name='themeType' id='themeType' >");
								document.write("Total:<input name='themeType' id='totalIt' style='height:12px; vertical-align:bottom; margin:5px 5px 0px 5px; background-color:transparent;' type='radio' value='totals' checked='checked' onclick='populateRanges(this.value);'/>");
								document.write("Percent:<input name='themeType' id='percentIt' style='height:12px; vertical-align:bottom; margin:0px 5px 0px 5px;  background-color:transparent;' type='radio' value='percentages' onclick='populateRanges(this.value);' />");
								document.write("Density:<input name='themeType' id='densityIt' style='height:12px; vertical-align:bottom; margin:0px 5px 0px 5px;  background-color:transparent;' type='radio' value='densities' onclick='populateRanges(this.value);' />");
							document.write("</form><br/>");
						document.write("</div>");
					document.write("</td></tr>");

					document.write("<tr id='percentagesRow' style='height:18px; display:none; width:100%;'><td style='width:100%;  '>");
						document.write("<label>Select a Total for Percentages:</label>");
						document.write("<div id='percentTotals' style='vertical-align:top; height:18px; width:100%;' >");
						document.write("</div>");
					document.write("</td></tr>");

					document.write("<tr style='height:50px;'><td style='width:100%; '>");
						document.write("<div id='drapeType' >");
							document.write("<form action='' name='classificationRange' title='specify Low Value and High Value between which thre will be a classification breakdown' >");		
								document.write("<div id='doubleSlider'>");
								//alert(numaMin+" - "+numaMax);
									document.write("Low: <input name='classificationType' id='loValue' type='text' style='height:13px; vertical-align:bottom;  width:55px;' value='"+numaMin+"'  />");
									document.write(" High: <input name='classificationType' id='hiValue' type='text' style='height:13px; vertical-align:bottom; margin-left:0px; vertical-align:bottom; width:70px;' value='"+numaMax+"' />");
									document.write("<div style='margin:10px 0px 0px 23px;'>");
										//displayDoubleSlider();
									document.write("</div>");
								document.write("</div>");
							document.write("</form>");
						document.write("</div>");
					document.write("</td></tr>");
					document.write("<tr><td style='width:100%; height:20px;'>");
						document.write("<div style='height:20px; width:100%;'>");
							document.write("<form action='' name='classificationType' title='the type of classification method preferred' >");
								document.write("<label>Method of Division:</label>");
								document.write("<select name='classificationType' id='classOpt' style='position:absolute; height:20px; vertical-align:top; right:20px; width:80px;' action=''>")
									document.write("<option value='5-Equal' selected='selected' >5-Equal</option>");
									document.write("<option value='9-Equal'  >9-Equal</option>");
								document.write("</select>");
							document.write("</form>");
						document.write("</div>");
					document.write("</td></tr>");

					document.write("<tr><td style='width:100%; height:20px;'>");
						document.write("<div id='drapeColor' style='width:100%;height:20px;'>");
							document.write("<form action='' name='themeColors'  >");
								document.write("Styles Red:<input name='themeColors'  style='height:12px; vertical-align:bottom; margin:5px 5px 0px 5px;  background-color:transparent;' type='radio' value='red' checked='checked' />")
								document.write("Blue:<input name='themeColors' style='height:12px; vertical-align:bottom; margin:5px 5px 0px 5px;  background-color:transparent;' type='radio'  value='blue' />");
								document.write("Green:<input name='themeColors' style='height:12px; vertical-align:bottom; margin:5px 5px 0px 5px;  background-color:transparent;' type='radio'  value='green' />");
							document.write("</form>");
						document.write("</div>");
					document.write("</td></tr>");
				
					document.write("<tr style='height:20px;'><td style='width:100%;'>");
						document.write("<div id='drapeBorder' style='vertical-align:top; height:18px; width:100%; color:'>");
							document.write("<form action='' name='themeBorder' >");
								document.write("Add Borders:<input name='themeBorder' style='height:12px; vertical-align:bottom; margin:5px 5px 0px 5px;  background-color:transparent;' type='radio' value='addBorders' checked='checked' />");
								document.write("No Borders:<input name='themeBorder' style='height:12px; vertical-align:bottom; margin:0px 5px 0px 5px;  background-color:transparent;' type='radio'  value='noBorders' />");
							document.write("</form>");
						document.write("</div>");
					document.write("</td></tr>");

					document.write("<tr><td style='width:100%; height:70px; vertical-align:bottom;'>");
						document.write("<center><input id='newDrapeButt' class='buttup' style='width:210px;' onclick='makeNewDDrape();' value='Refresh DemographicDrape' type='button'  title='Click this button to build and apply a new filter' onmousedown='this.className=\"buttdown\";' onmouseover='this.style.fontWeight=\"bold\";' 	onmouseup='this.className=\"buttup\";' 	onmouseout='this.style.fontWeight=\"normal\"; this.blur();'></input></center>");
					document.write("</td></tr>");

					//document.write("<tr><td class='underline' ></td></tr>");
				document.write("</table>");
		document.write("</div>"); // configModeSection

//-------------------------------------------------------------------------------------------------------						
// this is the Libray DDrapes section			
		document.write("<div id='libraryModeSection' style='width:100%; position:absolute; top:39px; height:320px; display:none;' >");	
			document.write("<div id='selectedDrape' style='position:absolute; top:1px; left:5px; width:182px; height:17px; font-size:11px; background-color:#FFF; border-top:1px solid gray; border-left:1px solid gray;	border-right:1px solid white; border-bottom:1px solid white;' >");
				document.write("</div>") //-- selectedDrape
					
					document.write("<div id='searchItButt' style='position:absolute; top:0px; width:20px;  font-size:10px; left:191px; font-weight:bold;'>");
						document.write("<center>");
							buttonHandler('searchDD','searchButtId=\"searchDD\", toggleSearch(\"searchDD\");', 'Launch search panel', 'images/search.gif', true, true) ;
						document.write("</center>");
					document.write("</div>") //-- searchItButt
					
						// -- Build DDrapes Editing Buttons --
					//alert(editorFlag)
					if(editorFlag) // only if requested...
					{
						document.write("<table border=0 id='earsButtons' style='position:absolute; top:20px; left:5px; width:50px;  font-size:10px; border-collapse:collapse; font-weight:bold; display:none;' >");
							document.write("<tr style='height:25px;'>");			
								
								document.write("<td style='width:22px;'><center>");
									buttonHandler('editDDIn','if (DemoDrape != null){drapeBuilderLaunch();}', 'SHOW StyleBuilder', 'images/open.gif', true, true) ;
								document.write("</center></td>");
			
								document.write("<td style='width:22px;'><center>")
									buttonHandler('replaceDD','if (DemoDrape != null){swapNewSld(newFileName, currentSld);}', 'Save DDrape - Click here to REPLACE the old DemographicDrape with the newly edited one', 'images/save.jpg', false, true) ;
								document.write("</center></td>");
								
								document.write("<td style='width:22px;'><center>");
									buttonHandler('saveDD', 'if (DemoDrape != null){saveAs(currentSld);}', 'SaveAs DDrape - Click here to CREATE a new DemographicDrape', 'images/saveas.gif', false, true) ;
								document.write("</center></td>");
							
							document.write("</tr>");
						document.write("</table>");
					}

					// -- build the DDrapes Tree Container
					document.write("<div id='drapeEnter' style='display:block;'>");
						document.write("<div id='treeContainer' class='tree' style='width:200px; height:270px; position:absolute; top:0px; left:0px; '>");				
						document.write("</div>"); //-- treeContainer 
					document.write("</div >");//-- drapeEnter 

				document.write("</div>") //-- DDrapes	
					
					
					// build the opacity slider control
					document.write("<table border='0' id='ddrapeControls' style='position:absolute; top:365px; left:20px; width:190px; height:40px; border-collapse:collapse;' >"); 

					// -- build opacity controls
					document.write("<tr>");
					document.write("<td style='width:70%; height:15px;'><center>");
						//document.write("<div id='opacityControls' style='position:absolute; top:290px;  width:210px; height:30px;' title='drag bar to change opacity on DemopgraphicDrape layers only'>");
							document.write("<label class='label'>Transparency Control</label>");
							document.write("</center></td><td></td></tr>");
							document.write("<td style='width:70%; height:15px;'><center>");
								displayDrapeSlider('0',  '15',  true,  sliderHoriz);
							document.write("</center></td><td style='width:30%; height:15px;'>");
								
								document.write("<div id='killCache'>");
										document.write("<input id='purgeCacheButton' type='button' class='buttup' 		style='cursor:pointer; width:100%; height:20px; font-size:9px; text-decoration:none;' 	value='Redraw' title='click this to delete all the Cache for this DDrape and redraw it' onmousedown='this.className=\"buttdown\";' onmouseover='this.style.fontWeight=\"bold\";' onmouseup='this.className=\"buttup\";'	onmouseout='this.style.fontWeight=\"normal\";' onclick='if(currentSld != null){redraw(currentSld); }'>");
									document.write("</input>");
								document.write("</div>"); // killCache

							document.write("</td></tr>");

						//document.write("</div>"); //-- OpacityControl 
						
					document.write("</Table>");
				

					// build the metadata holder object
					document.write("<div id='metaHolder' style='position:absolute; top:50px; left:290px; width:400px; z-index:8001; display: none; '>");

						document.write("<div id='metaHeader' style='position:absolute; top:20px; left:0px; height:22px; width:400px; background-image:url(images/banner_400.gif); z-index:8002' class='popupHeader'>");
							document.write("<img src='images/logo_symbol_small.gif' style='position:absolute; top:7px; left:4px;' />");
							document.write("<span style='position:absolute; top:4px; left:30px;'>DemographicDrapes MetaData</span>");			
						document.write("</div>") //-- metaHeader 
						
						document.write("<div id='metadata' class='metadata' style='position:absolute; padding:5px 5px 20px 5px; top:42px; left:0px; height:auto; width:386px; border:2px solid #0000D6; background-color:#ECE9D8;'>");
						document.write("</div>"); //-- metadata 
					document.write("</div>"); //-- metaHolder 
				document.write("</div>"); //-- libraryMode

				


			
		document.write("</div>"); //-- content:2 
	document.write("</div>");//-- sidebar:2
	
	Drag.init(document.getElementById("panelHeader:2"), document.getElementById("sidebar:2"));
	
	//force panel to load
	//toggleDDrapeModes("libraryMode");
}

// function to build the Demo Description user interface Panel
function buildDemoDescriptionPanel(panelX, panelY)
{
	document.write("<div id='sidebar:5'	style='position:absolute; top:"+panelX+"px; left:"+panelY+"px; width:600px; height:500px; z-index:5000; display: none;' onclick='shuffleAllPanels(this.id);'>");
		makePopupHeader('sidebar:5',  'panelHeader:5',  'standardButton',  'About This Demo' ,  'popupHeader',   blueBanner6.src,  'images/logo_symbol_small.gif',   'images/close_20.gif');
		document.write("<div id='content:5' style='position:absolute; top:22px; left:0px; height:480px; width:596px; border:2px solid #0000D6; background-color:#ECE9D8;'>"); //-- content:5
		
			document.write("<div id='DemoDesription' class='functionBox' style='position:absolute; top:5px; left:5px; width:582px; height:470px;' >");		
				document.write("<span style='position:absolute; top:5px; left:5px; width:552px; height:440px;font-weight:normal; margin:10px; overflow-x:hidden; overflow-y:auto; text-align:left; font-family: Verdana,  Geneva,  Arial,  Helvetica,  sans-serif; font-size:11px;'>");
					
					// load the text from a html text file here
					document.write(instructions)
		
				document.write("</span>");

			document.write("</div>") //-- DemoDescription 
		document.write("</div>") //-- content:5
	document.write("</div>") //-- sidebar:5
	Drag.init(document.getElementById("panelHeader:5"),  document.getElementById("sidebar:5"));	
}


function buildGFIReportPanel()
{
	document.write("<div id='reportHolder'  style='position:absolute; top:50px; left:315px; width:600px; height:320px; z-index:60002; cursor:pointer; display:none; background-image:transparent;'> ");	

		document.write("<div id='reportHeader' class='popupHeader' style='position:absolute; top:0px; left:0px; width:100%; background-image:url(images/banner_600.gif); cursor:move; ' title='Hold left mouse down to drag this control around' >");
			document.write("<img src='images/logo_symbol_small.gif' style='position:absolute; top:7px; left:4px;' />");
			document.write("<span style='position:absolute; top:4px; left:30px;'>Feature Information Report</span>");
			document.write("<span style='position:absolute; top:4px; left:300px;' id='download'></span>");
 
			document.write("<div style='position:absolute; top:4px; right:25px; cursor:pointer;' onclick='exitPolygonAggregation();' title='Delete collection and exit polygon aggregation mode' >");
				document.write("<img src='images/delete.gif' style='height:18px;'/>");
			document.write("</div>");

			document.write("<div id='gfiRept' style='position:absolute; top:5px; right:6px; cursor:pointer;' onclick='toggleReport(document.getElementById(\"reportopen\"));' title='Close me' >");
				document.write("<img src='images/close.gif' style='height:15px; width:15px;'/>");
			document.write("</div>"); //-- gfiRept
		document.write("</div>"); //-- reportHeader 

		document.write("<div id='bodyRept' style='position:absolute; top:22px; left:0px; height:300px; width:596px; border:2px solid #0000D6; background-color:#ECE9D8; z-index:6100'>");	
		
			document.write("<div id='downloadLink' style='position:absolute; top:5px; left:10px; width:400px; height:30px; '>");
			document.write("</div>");//-- downloadLink
			
			document.write("<div id='featureInfo'  >");
				//document.write("<table id='tableId' border=0 style='border:1px solid gray;  min-width:100%; width:auto; height:auto; text-align:center; background-color:#fff; '>");
				//document.write("</table>");
			document.write("</div>"); //-- featureInfo 
		document.write("</div>"); //-- bodyRept 

	document.write("</div>"); //-- reportHolder 
	Drag.init(document.getElementById("reportHeader"),  document.getElementById("reportHolder"));
}

function toggleReports(id)
{
	document.getElementById(id).style.zIndex=60002; 
	if(id== 'territoriesReportHolder'){document.getElementById('territoriesReportHolder2').style.zIndex='60001';}
	else{document.getElementById('territoriesReportHolder').style.zIndex='60001';}

}



// use this for the individual territory
function buildTerritoryReportPanel()
{
	document.write("<div id='territoriesReportHolder'  style='position:absolute; top:90px; left:355px; width:600px; height:320px; z-index:60001; cursor:pointer; display: none; background-image:transparent;' onclick='toggleReports(this.id); '> ");	

		document.write("<div id='territoriesReportHeader' class='popupHeader' style='position:absolute; top:0px; left:0px; width:100%; background-image:url(images/banner_600.gif); cursor:move;' title='Hold left mouse down to drag this control around' >");
			document.write("<img src='images/logo_symbol_small.gif' style='position:absolute; top:7px; left:4px;' />");
			document.write("<span style='position:absolute; top:4px; left:30px;'>Territory Report</span>");
			//document.write("<span style='position:absolute; top:4px; left:300px;' id='download2'></span>");

				document.write("<div id='terrList' style='position:absolute; top:5px; right:6px; cursor:pointer;' onclick='showHideTerritoriesReport(\"reportTerr\",\"territoriesReportHolder\"); ' title='Close me' >");
				document.write("<img src='images/close.gif' style='height:15px; width:15px;'/>");
			document.write("</div>"); //-- terrList
		document.write("</div>"); //-- territoriesReportHeader 

		
		
		document.write("<div id='territoriesBodyRept' style='position:absolute; top:22px; left:0px; height:300px; width:596px; border:2px solid #0000D6; background-color:#ECE9D8; z-index:6100;'>");	
		
			document.write("<div id='downloadLink2' style='position:absolute; top:5px; left:10px; width:400px; height:30px; '>");
			document.write("</div>");//-- downloadLink2
			
			document.write("<div id='territoriesInfo' style='color:#000000;	width:575px; height:265px; font-size:10px; background-color: white; border:1px solid gray;	position:absolute;	left: 10px; top:25px; overflow-x:scroll;  overflow-y:scroll;'>");
				//document.write("<table id='territoriesTableId' border=0 style='border:1px solid gray; min-width:100%; width:auto; height:auto; text-align:center; background-color:#fff;'>");
				//document.write("</table>");
			document.write("</div>"); //-- territoriesInfo 

		document.write("</div>"); //-- territoriesBodyRept 

	document.write("</div>"); //-- territoriesReportHolder 
	Drag.init(document.getElementById("territoriesReportHeader"),  document.getElementById("territoriesReportHolder"));
}
// use this for a list of all territories
function buildTerritoryReportPanel2()
{
	document.write("<div id='territoriesReportHolder2'  style='position:absolute; top:50px; left:315px; width:600px; height:320px; z-index:60001; cursor:pointer; display: none; background-image:transparent;' onclick='toggleReports(this.id); '> ");	

		document.write("<div id='territoriesReportHeader2' class='popupHeader' style='position:absolute; top:0px; left:0px; width:100%; background-image:url(images/banner_600.gif); cursor:move;' title='Hold left mouse down to drag this control around' >");
			document.write("<img src='images/logo_symbol_small.gif' style='position:absolute; top:7px; left:4px;' />");
			document.write("<span style='position:absolute; top:4px; left:30px;'>All Territories Report</span>");
			
				

				document.write("<div id='terrList2' style='position:absolute; top:5px; right:6px; cursor:pointer;' onclick='showHideTerritoriesReport(\"listTerr\",\"territoriesReportHolder2\"); ' title='Close me' >");
				document.write("<img src='images/close.gif' style='height:15px; width:15px;'/>");
			document.write("</div>"); //-- terrList2
		document.write("</div>"); //-- territoriesReportHeader2 

		
		
		document.write("<div id='territoriesBodyRept2' style='position:absolute; top:22px; left:0px; height:300px; width:596px; border:2px solid #0000D6; background-color:#ECE9D8; z-index:6100;'>");
		
		document.write("<div style='position:absolute; top:5px; left:10px;' ><input type='checkbox'  id='fullList' onclick='buildCompositeReport(this.id);' title='check this box to see the full details of all territories and uncheck it to revert back to the default summary report'></input><span class='label' style='position:absolute; top:3px; left:20px;'>Detailed Report</span></div>");

		document.write("<div id='downloadLink3' style='position:absolute; top:5px; left:30px; width:400px; height:20px;'>");
		document.write("</div>");//-- downloadLink3
				
		document.write("<div id='territoriesInfo2' style='color:#000000;	width:575px; height:265px; font-size:10px; background-color: white; border:1px solid gray;	position:absolute;	left: 10px; top:25px; overflow-x:scroll;  overflow-y:scroll;'>");
			
		document.write("</div>"); //-- territoriesInfo2 

		document.write("</div>"); //-- territoriesBodyRept2 

	document.write("</div>"); //-- territoriesReportHolder2 
	Drag.init(document.getElementById("territoriesReportHeader2"),  document.getElementById("territoriesReportHolder2"));
}

function buildSaveFilePanel()
{
	document.write("<div id='formHolder'  style='position:absolute; top:30px; left:400px; width:400px; height:100px; z-index:60002; cursor:pointer; display: none;'  >");	
		makePopupHeader('formHolder',  'saveHeader',  'standardButton',  'Save As' ,  'popupHeader',   blueBanner4.src,  'images/logo_symbol_small.gif',   'images/close_20.gif');
		document.write("<div id='bodySave' style='position:absolute; top:22px; left:0px; height:100px; width:396px; border:2px solid #0000D6; background-color:#ECE9D8;'> ");
			document.write("<div id='saveColl' style='display:block; position:absolute; top:20px; left:20px;'>");	
				document.write("<label class='label' style='position:absolute; top:0px; left:0px;'>Enter New Name of Object (File/DDrape):</label><br />");
				document.write("<Form id='getColl'  >");
					document.write("<input id='collName' class='saveBox' type='text' value='' style='position:absolute; top:16px; left:0px; width: 290px; height:15px;' onclick='javascript:document.getElementById(this.id).value=\"\";' onkeypress='return checkEnterFile(event,  newFileName);'	title='Enter a description that can be used to identify this demographicDrape (max 50 chars)' />");
				document.write("</Form>");

				document.write("<input id='sendButt' type='button' style='position:absolute; top:16px; left:320px; cursor:pointer; width:auto; height:20px;' value='Save' title='Save Collection now' onclick='javascript:saveNewDrapeFile(newFileName);'>Save</input>");
				
				document.write("<div id='pleaseWait' style='display:none; position:absolute; top:36px; left:0px; font-size:10px; width:300px;'>");
					document.write("<span>Please Wait while I save your File/DDrape definition ...</span>");
				document.write("</div>"); //-- pleaseWait 

			document.write("</div>") //-- saveColl 
		document.write("</div>") //-- bodySave			
	document.write("</div>") //-- formHolder 
	Drag.init(document.getElementById("saveHeader"), document.getElementById("formHolder"));
}

//------------------------------ search panel -----------------------------
function buildSearchPanel()
{
	document.write("<div id='searchHolder' style='position:absolute; top:30px; left:400px; width:400px; height:100px; z-index:60002; cursor:pointer; display: none;'  >");	

	document.write("<div id='searchHeader' class='popupHeader' style='position:absolute; top:0px; left:0px; width:400px; background-image:url(images/banner_400.gif);' title='Hold left mouse down to drag this control around' >");
			document.write("<img src='images/logo_symbol_small.gif' style='position:absolute; top:7px; left:4px;' />");
			document.write("<span style='position:absolute; top:4px; left:25px; font-weight:bold;'>Search Engine</span>");
			document.write("<div id='searchHeaderClose' style='position:absolute; top:5px; right:6px; cursor:pointer;' 		onclick='document.getElementById(\"searchHolder\").style.display=\"none\";  document.getElementById(searchButtId).title=\"Launch search panel\"; mouseup(searchButtId);'	title='close me' >");
				document.write("<img src='images/close.gif' style='height:15px; width:15px;'/>");
			document.write("</div>"); //-- markerHeaderClose
		document.write("</div>") //-- markersHeader 

	//	makePopupHeader('searchHolder',  'searchHeader',  'standardButton',  'Search Engine' ,  'popupHeader',   blueBanner4.src,  'images/logo_symbol_small.gif',   'images/close_20.gif');

		document.write("<div id='bodySearch' style='position:absolute; top:22px; left:0px; height:80px; width:396px; border:2px solid #0000D6; background-color:#ECE9D8;'>");
			
			document.write("<div id='saveColl2' style='display:block; position:absolute; top:20px; left:20px;'>");	
				document.write("<label class='label' style='position:absolute; top:0px; left:0px;'>Enter Keyword Search:</label><br />");
				
				document.write("<Form id='getKeyword'  >");
					document.write("<input id='keyword' class='saveBox' type='text' value='' style='position:absolute; top:16px; left:0px; width: 290px; height:15px;' onclick='this.value=\"\"; document.getElementById(\"details\").style.display=\"none\";' onkeypress='return checkEnterKeyword(event, this);' title='Enter keywords for searching. Multiple keywords are separated with a comma. e.g male,female' ></input>");
				document.write("</Form>");
				
				document.write("<input id='sendButt2' type='button' style='position:absolute; top:16px; left:320px; cursor:pointer; width:auto; height:20px;' value='Find' title='Save Collection now' onclick='findIt(document.getElementById(\"keyword\").value, \"searchResults\");'>Find</input>");
				document.write("<label class='label' style='position:absolute; top:40px; left:0px;'>Case Sensitive:</label>");
				document.write("<input id='caseSens' type='checkbox' style='position:absolute; top:38px; left:80px;'></input>");
 				//document.write("<div id='pleaseWait2' style='display:none; position:absolute; top:36px; left:0px; font-size:10px; width:300px;'>");								document.write("<span>Searching - Please Wait ...</span>");
				//document.write("</div>") //-- pleaseWait2 
			document.write("</div>") //-- saveColl2 
			
			document.write("<div id='details' style='position:relative; top:78px; left:-2px; height:400px; width:396px; border-left:2px solid #0000D6;border-right:2px solid #0000D6;border-bottom:2px solid #0000D6; background-color:#ECE9D8; display:none;'>");
				separator('2px','2px', '390px', 'horizontal');
				document.write("<label class='label' style='position:relative; top:10px; left:10px;'>Search Results:</label>");
				document.write("<div id='searchResults' class='tree' style='width:365px; height:345px; position:relative; top:20px; left:10px; '>");			
				document.write("</div>") //-- searchResults 
			document.write("</div>") //-- details
		
		document.write("</div>") //-- bodySearch 			
	document.write("</div>") //-- searchHolder 
	Drag.init(document.getElementById("searchHeader"), document.getElementById("searchHolder"));
}


//------------------------------ Polypika Control popup -----------------------------//
function buildPolypikaPanel()
{
	document.write("<div id='polypikaHolder'  style='position:absolute; top:150px; left:420px; height:160px; z-index:60001; cursor:pointer; display: none;'  >");	
		
		// panel header
		document.write("<div id='polypikaHeader' class='popupHeader' style='position:absolute; top:0px; left:0px; width:235px; background-image:url(images/banner_235.gif);' title='Hold left mouse down to drag this control around' >");
			document.write("<img src='images/logo_symbol_small.gif' style='position:absolute; top:7px; left:4px;' />");
			document.write("<span id='polypikaHeaderName' style='position:absolute; top:4px; left:25px;' >Polypika Section</span>");

			 document.write("<div id='pprept' style='position:absolute; top:4px; right:25px; cursor:pointer;' onclick='exitPolypika();' title='Delete collection and exit Polypika mode' >");
				document.write("<img src='images/delete.gif' style='height:18px;'/>");
			document.write("</div>"); //-- pprept

			document.write("<div style='position:absolute; top:5px; right:6px; cursor:pointer;  color=black;' onclick='resetPolypikaButton();' title='close me' >");
				document.write("<img src='images/close.gif' style='height:15px; width:15px;'/>");
			document.write("</div>");
		document.write("</div>"); //-- polypikaHeader 	


		// Body of the Panel
		if(browser == 'msie')
		{	
			document.write("<div id='polypikaBodyRepts' style='position:absolute; top:22px; left:0px; border:2px solid #0000D6; width:231px; height:500px; background-color:#ECE9D8;'>");
			document.write("<div id='polypikaInner' class='functionBox' style='position:absolute; top:10px; left:5px; width:220px; height:445px;' >");
		}
		else
		{	
			document.write("<div id='polypikaBodyRepts' style='position:absolute; top:22px; left:0px; border:2px solid #0000D6; width:231px;  height:450px;  background-color:#ECE9D8;'>");
			document.write("<div id='polypikaInner' class='functionBox' style='position:absolute; top:10px; left:5px; width:220px; height:415px;' >");
		}

		document.write("<div id='polypikaReptsColl' style='display:block; position:absolute; top:0px; left:2px; width:215px; height:460px;'>");	

			// build the activelayer display window
			//document.write("<div id='activeLayerTerr' style='position:absolute; top:5px; left:5px; width:182px; height:17px; font-size:11px; background-color:#FFF; border-top:1px solid gray; border-left:1px solid gray; border-right:1px solid white; border-bottom:1px solid white;' >");
			//document.write("</div>") //-- activeLayerTerr




			document.write("<span id='polypikaSelectMethod' class='label' style='position:absolute; top:7px; left:5px; font-weight:bold; font-size:11px; text-transform:capitalize'>Selection Methods:</span><br />");
				
				document.write("<img src='images/help.png' style='position:absolute; top:7px; right:0px; cursor:pointer;' title='Help' onclick='makePopup(\"polypika_help.html\",  \"650\",  \"800\",  \"both\");' />");
					
				document.write("<div style='position:absolute; top:20px;'>");
				document.write("<form name='functs' action='' id='polypikaReptRadioButts'> ");
					document.write("<table class='radio' border=0  style='font-size:10px; width:190px; top:30px;'>");
						document.write("<tr><td>");
							document.write("<input name='functs' type='radio' id='ppsp' class='radio' checked value='point' onclick='resetPolypikaForm();' title='Select the a feature with a single mouse click. If in Territory the Polygon will be deleted.'>Single Point [Add/Remove]</input>");
						document.write("</td></tr>");
							
						document.write("<tr ><td><div class='underline' /></td></tr>");// ---------------------
						
						document.write("<tr><td>");
							document.write("<input name='functs' type='radio' id='ppsd' class='radio' value='shiftDrag' onclick='resetPolypikaForm();' title='Select the Shft-Drag-Box selector method (Dragable). This allows the user to drag a select box with the mouse while the shift key is held down'>Shift-Drag-Box (Drag)</input>");
						document.write("</td></tr>");
							
						document.write("<tr ><td><div class='underline' /></td></tr>");// ---------------------
						
						document.write("<tr><td>");
							document.write("<input name='functs' type='radio' id='pppt'  class='radio' value='PointRectangle' onclick='resetPolypikaForm(); document.getElementById(\"polypikaRectWidth\").style.backgroundColor=\"#ffffff\"; document.getElementById(\"polypikaRectWidth\").disabled=false; document.getElementById(\"polypikaRectHeight\").style.backgroundColor=\"#ffffff\"; document.getElementById(\"polypikaRectHeight\").disabled=false;' title='Select the Point Digitzing method (Dragable). This allows the user to digitise a point on the map and automatically generate the select box'>Rectangle About Point (Drag)</input>");
						document.write("</td></tr>");
						
						document.write("<tr><td>");
							document.write("<label class='label' style='position:relative; top:0px; left:30px; height:10px; width:40px; '>Width (m):</label>");
							document.write("<label class='label' style='position:relative; top:0px; left:60px; height:10px; width:40px;'>Height (m):</label>");
						document.write("</td></tr>");
						
						document.write("<tr><td>");
							document.write("<input name='functs' id='polypikaRectWidth' class='saveBox' disabled type='text' value='1000' style='position:relative; top:0px; left:30px; width:60px; height:15px; background-color: #c3c3c3;' onclick='document.getElementById(\"polypikaRectWidth\").value=\"\";' title='Enter the width of the rectangle in Meters' />");															 									
							document.write("<input name='functs' id='polypikaRectHeight' class='saveBox' disabled type='text' value='1000' style='position:relative; top:0px; left:45px; width:60px; height:15px; background-color: #c3c3c3;' onclick='document.getElementById(\"polypikaRectHeight\").value=\"\";' title='Enter the Height of the rectangle in Meters' />");
						document.write("</td></tr>");
							
						document.write("<tr ><td><div class='underline' /></td></tr>");// ----------------------
						
						document.write("<tr><td>");
							document.write("<input name='functs' type='radio' id='ppci'  class='radio' value='PointCircle' onclick='resetPolypikaForm(); document.getElementById(\"polypikaCircleRad\").disabled=false; document.getElementById(\"polypikaCircleRad\").style.backgroundColor=\"#ffffff\";' title='Select the Point Digitzing method (Dragable). This allows the user to digitise a point on the map and automatically generate the select circle of the entered radius'>Circle About Point (Drag)</input>");
						document.write("</td></tr>");
						
						document.write("<tr><td>");
							document.write("<label class='label' style='position:relative; top:0px; left:30px; height:10px; width:40px;'>Radius (m):</label>");
						document.write("</td></tr>");
						
						document.write("<tr><td>");
							document.write("<input name='functs' id='polypikaCircleRad' class='saveBox' disabled type='text' value='1000' style='position:relative; top:0px; left:30px; width:60px; height:15px; background-color:#c3c3c3;' onclick='document.getElementById(\"polypikaCircleRad\").value=\"\";' title='Enter the Radius of the circle in Meters' />");
						document.write("</td></tr>");
							
						document.write("<tr ><td><div class='underline' /></td></tr>");// ---------------------
						
						document.write("<tr><td>");
							document.write("<input name='functs' type='radio' id='ppfp'  class='radio'	value='FreehandPolygon' onclick='resetPolypikaForm();' title='Digitize a polygon in clockwise order and close with doubleclick. This allows you to digitize a freehand polygon that is used for feature reporting.'>Freehand Polygon	(Drag)</input>");
						document.write("</td></tr>");
							
						document.write("<tr ><td><div class='underline' /></td></tr>"); // ---------------------
						
						document.write("<tr><td>");
							document.write("<input name='functs' type='radio' id='ppdb'  class='radio' value='featurePolygon' onclick='resetPolypikaForm(); document.getElementById(\"lgaList:4\").disabled=false; document.getElementById(\"polypikaGeomkey\").disabled=false; document.getElementById(\"polypikaKeygeom\").disabled=false; ' title='select a logal Government Area from the list as your search polygon.'>LGA Feature</input>");
						document.write("</td></tr>");
						
						// -- Local Governemnet Filter --//
						document.write("<tr><td>");
							document.write("<div id='lgaEnter:4' style='position:relative; width:210px; height:12px; top:0px; left:0px;'>");
								document.write("<table id='lgaAlphaButtons4' style='font-size:8px; cursor:pointer; text-align:center; position:absolute; top:0px; width:210px; height:20px; left:0px;'>");
								document.write("<tr><td>");
									alphabetButtons('AB:4', 'Local Governments starting with letters A to B', 'if(document.getElementById("ppdb").checked) { loadLgas("lgaSelBox:4", this.id,  "A to B"); document.getElementById("lgaList:4").disabled=false;}', 'A-B');
								document.write("</td><td>");
									alphabetButtons('CD:4', 'Local Governments starting with letters C to D', 'if(document.getElementById("ppdb").checked) { loadLgas("lgaSelBox:4", this.id,  "C to D"); document.getElementById("lgaList:4").disabled=false;}', 'C-D');
								document.write("</td><td>");
									alphabetButtons('EI:4', 'Local Governments starting with letters E to I', 'if(document.getElementById("ppdb").checked) { loadLgas("lgaSelBox:4", this.id,  "E to I"); document.getElementById("lgaList:4").disabled=false;}', 'E-I');
								document.write("</td><td>");
									alphabetButtons('JM:4', 'Local Governments starting with letters J to M', 'if(document.getElementById("ppdb").checked) { loadLgas("lgaSelBox:4", this.id,  "J to M"); document.getElementById("lgaList:4").disabled=false;}', 'J-M');
								document.write("</td><td>");
									alphabetButtons('NR:4', 'Local Governments starting with letters N to R', 'if(document.getElementById("ppdb").checked) { loadLgas("lgaSelBox:4", this.id,  "N to R"); document.getElementById("lgaList:4").disabled=false;}', 'N-R');
								document.write("</td><td>");
									alphabetButtons('SU:4', 'Local Governments starting with letters S to U', 'if(document.getElementById("ppdb").checked) { loadLgas("lgaSelBox:4", this.id,  "S to U"); document.getElementById("lgaList:4").disabled=false;}', 'S-U');
								document.write("</td><td>");
									alphabetButtons('VZ:4', 'Local Governments starting with letters V to Z', 'if(document.getElementById("ppdb").checked) { loadLgas("lgaSelBox:4", this.id,  "V to Z"); document.getElementById("lgaList:4").disabled=false;}', 'V-Z');
								document.write("</td></tr></table>");															
							document.write("</div>"); //-- lgaEnter:4
						document.write("</td></tr>");
						
						//-- form created on fly for the dropdown list --//
						document.write("<tr><td>");
							document.write("<div id='lgaSelBox:4'  style='display:block; position: relative; top:0px; left:0px; height:20px; width:100%;' >");				
							document.write("</div>");  //-- lgaSelBox:4
							loadLgas("lgaSelBox:4", "AB:4",  "A to B"); // force the loading of A-B
						document.write("</td></tr>");
						
						document.write("<tr><td>");
							document.write("<div id='polypikaGeomkeyHolder' style='display:block; position:relative; top:0px; left:25px; width:180px; '>");
								document.write("<input  name='geomkey' type='radio' disabled id='polypikaGeomkey' class='radio'	checked value='geometry' title='Use the feature geometry to search for included polygons'> Geometry</input>");
								document.write("<input  name='geomkey' type='radio' disabled id='polypikaKeygeom' class='radio'	value='LGA key' title='Use LGA Code to search for included polygons' >LGA key</input> ");
							document.write("</div>"); //-- geomkeyHolder
						document.write("</td></tr>");
							
						document.write("<tr ><td><div class='underline' /></td></tr>"); // ---------------------
						
						document.write("<tr><td>");
							document.write("<span id='polypikaInclusion' class='label' style='position:relative; top:5px; left:5px; width:40px; font-weight:bold; font-size:11px; text-transform:capitalize'>Inclusion Options:</span>");
						document.write("</td></tr>");
						
						document.write("<tr><td>");
							document.write("<div id='polypikaIncludeModel' style='position:relative; top:5px; left:0px; height:30px;'>");
								document.write("<select style='width:100%;'  title='Select the type of spatial filter/query you would like' id='polypikaIncludeType' name='includeType' size='1'>");
									//-- Equals, Touches, Within, Overlaps, Crosses, Intersects, Contains --//
									document.write("<option name='includeType' id='Intersects' selected='selected' value='Intersects' title='Fetch features that intersect in anyway with the search polygon in any way'>Intersects with Polygon</option>");		
									document.write("<option name='includeType' id='Within' value='Within' title='Fetch features wholly within the search polygon' >Within Polygon</option>");
									document.write("<option name='includeType' id='Overlaps' value='Overlaps' title='Fetch features that overlap the search polygon in anyway' >Overlaps Polygon</option>");
									document.write("<option name='includeType' id='Crosses' value='Crosses' title='Fetch features that cross the search polygon boundary' >Crosses Polygon Boundary</option>");
									document.write("<option name='includeType' id='Contains' value='Contains' title='Fetch the features that contain the search polygon' >Contains Polygon</option>");
									document.write("<option name='includeType' id='Touches' value='Touches' title='Fetch features that touch the search polygon boundary' >Touches Polygon</option>");
									document.write("<option name='includeType' id='Equals' value='Equals' title='Fetch features that are exactly Equal to the search polygon?'>Equals Polygon</option>");
								document.write("</select>");
							document.write("</div>"); //-- polypikaIncludeModel 
						document.write("</td></tr>");
							
						document.write("<tr ><td><div class='underline' /></td></tr>"); // ---------------------

						document.write("<tr><td>");
							document.write("<center><input id='sendButt4'  type='button' value='Select Polygons By Method' class='buttup' style='position:relative; top:5px; cursor:pointer; height:20px; width:200px;' title='Click here to set to pick mode' onclick='document.getElementById(\"polypikaHolder\").style.display=\"none\"; document.getElementById(\"enterDigitMode\").title=\"Re-enter Polypika Mode\";			document.getElementById(\"enterDigitMode\").value=\"Re-enter Polypika Mode\";  document.getElementById(\"enterDigitMode\").className = \"buttdown\";  getPolypikaObjects();'   onmousedown='this.className=\"buttdown\";' onmouseup='this.className=\"buttup\";' ></input></center>");
						document.write("</td></tr>");
				
					document.write("</table>");
					document.write("</form>");
					document.write("</div>");
				document.write("</div>"); //-- polypikaReptsColl 
			
			document.write("</div>"); //-- reportingInner 
		document.write("</div>"); //-- bodyRepts 	
	
	document.write("</div>"); //-- reptContHolder 
	Drag.init(document.getElementById("polypikaHeader"), document.getElementById("polypikaHolder"));	
//	alert('done')
}

//------------------------------ Report Control popup -----------------------------//
function buildReportPanel()
{
	document.write("<div id='reptContHolder'  style='position:absolute; top:130px; left:400px; width:235px; height:140px; z-index:60001; cursor:pointer; display: none;'  >");	
		
		// ----- Header
		document.write("<div id='reptHeader' class='popupHeader' style='position:absolute; top:0px; left:0px; width:235px; background-image:url(images/banner_235.gif);' title='Hold left mouse down to drag this control around' >");
			document.write("<img src='images/logo_symbol_small.gif' style='position:absolute; top:7px; left:4px;' />");
			document.write("<span style='position:absolute; top:4px; left:25px;'>Polygon Aggregation</span>");

			 document.write("<div id='remrept' style='position:absolute; top:4px; right:25px; cursor:pointer;' onclick='exitPolygonAggregation();'	title='Delete collection and exit polygon aggregation mode' >");
				document.write("<img src='images/delete.gif' style='height:18px;'/>");
			document.write("</div>"); //-- remrept

			document.write("<div style='position:absolute; top:5px; right:6px; cursor:pointer;' onclick='document.getElementById(\"reptContHolder\").style.display=\"none\"; document.getElementById(\"gfiDD\").title=\"Re-enter Polypika Mode\";' title='close me' >");
				document.write("<img src='images/close.gif' style='height:15px; width:15px;'/>");
			document.write("</div>");
		document.write("</div>"); //-- reptHeader 	
			
			if(browser == 'msie')
			{	document.write("<div id='bodyRepts' style='position:absolute; top:22px; left:0px; border:2px solid #0000D6; width:231px;  height:550px;	background-color:#ECE9D8;'>");
				document.write("<div id='reportingInner' class='functionBox' style='position:absolute; top:5px; left:5px; width:220px; height:505px;' >");
			}
			else
			{	document.write("<div id='bodyRepts' style='position:absolute; top:22px; left:0px; border:2px solid #0000D6; width:231px;  height:540px;  background-color:#ECE9D8;'>");
				document.write("<div id='reportingInner' class='functionBox' style='position:absolute; top:10px; left:5px; width:220px; height:495px;' >");
			}
				document.write("<div id='reptsColl' style='display:block; position:absolute; top:5px; left:5px; width:215px; height:530px;'>");	
					document.write("<label class='label' style='position:absolute; top:0px; left:2px; font-weight:bold; font-size:11px;'>Feature Select Method:</label><br />");
					document.write("<img src='images/help.png' style='position:absolute; top:0px; right:0px; cursor:pointer;' title='Help' onclick='makePopup(\"aggregator_help.html\",  \"650\",  \"800\",  \"both\");' />");
					
					document.write("<form  action='' id='reptRadioButts'> ");
						document.write("<table class='baseMapRadio' border=0  style='font-size:10px; width:200px; '>");
							document.write("<tr><td>");
								document.write("<input  name='meth' type='radio' id='sp' class='radio'	checked value='point' onclick='deleteSelection(); pointSelect();' title='Select the a feature with a single mouse click.'>Single Point</input>");
							
							document.write("</td></tr>");
								document.write("<tr ><td><div class='underline' /></td></tr>");
							document.write("<tr><td>");
							/*	
								document.write("<input  name='meth' type='radio' id='sd' class='radio' value='shiftDrag' onclick='deleteSelection(); shiftDragSelect();' title='Select the Shft-Drag-Box selector method (Dragable). This allows the user to drag a select box with the mouse while the shift key is held down'>Shift-Drag-Box (Drag)</input>");
							*/




						document.write("<tr><td>");
							document.write("<input name='meth' type='radio' id='sd' class='radio' value='shiftDrag' onclick='deleteSelection(); shiftDragSelect(); document.getElementById(\"shapesOptionsList\").disabled=false;' title='Select the Variable Sized Shape tool (Dragable). This allows the user to drag a select a variable sized standard shape with the mouse (Drag)'>Geometric Shapes (Drag)</input>");
						document.write("</td></tr>");

						document.write("<tr><td>");
								document.write("<label class='label' style='position:relative; top:0px; left:30px; height:10px; width:40px;'>Shape:</label>");
							document.write("</td></tr>");
						
				
						document.write("<tr><td>");
							document.write("<div id='polypikaShapeOptions'  style='position:relative; top:0px; left:0px; height:20px;'>");
								document.write("<select id='shapesOptionsList' style='position:relative; top:0px; left:30px; width:100px; height:20px;' class='saveBox' disabled title='Select the type of Standard Shape you would like to use' name='includeType' size='1' onchange='removeCreateVectors(true);' >");
									document.write("<option value='3'>triangle</option>");
									document.write("<option value='4' selected='selected'>square</option>");
									document.write("<option value='5'>pentagon</option>");
									document.write("<option value='6'>hexagon</option>");
									document.write("<option value='40'>circle</option>");

								document.write("</select>");
							document.write("</div>"); //-- polypikaShapeOptions 
						document.write("</td></tr>");

							document.write("</td></tr>");
								document.write("<tr ><td><div class='underline' /></td></tr>");// ---------------------
							document.write("<tr><td>");
								
								document.write("<input  name='meth' type='radio' id='pt'  class='radio' value='PointRectangle' onclick='deleteSelection(); pointBoxSelect();' title='Select the Point Digitzing method (Dragable). This allows the user to digitise a point on the map and automatically generate the select box'>Rectangle About Point (Drag)</input>");
							document.write("</td></tr>");
							document.write("<tr><td>");
								document.write("<label class='label' style='position:relative; top:0px; left:30px; height:10px; width:40px; '>Width (m):</label>");
								document.write("<label class='label' style='position:relative; top:0px; left:60px; height:10px; width:40px;'>Height (m):</label>");
							document.write("</td></tr>");
							document.write("<tr><td>");
								document.write("<input id='rectWidth' class='saveBox' disabled type='text' value='1000'	style='position:relative; top:0px; left:30px; width:60px; height:15px; background-color: #c3c3c3;' onclick='document.getElementById(\"rectWidth\").value=\"\";' title='Enter the width of the rectangle in Meters' />");															 									
								document.write("<input id='rectHeight' class='saveBox' disabled type='text' value='1000' style='position:relative; top:0px; left:45px; width:60px; height:15px; background-color: #c3c3c3;' onclick='document.getElementById(\"rectHeight\").value=\"\";' title='Enter the Height of the rectangle in Meters' />");
							
							document.write("</td></tr>");
								document.write("<tr ><td><div class='underline' /></td></tr>");// ----------------------
							document.write("<tr><td>");
								
								document.write("<input  name='meth' type='radio' id='ci'  class='radio' value='PointCircle' onclick='deleteSelection(); pointCircleSelect();' title='Select the Point Digitzing method (Dragable). This allows the user to digitise a point on the map and automatically generate the select circle of the entered radius'>Circle About Point (Drag)</input>");
							document.write("</td></tr>");
							document.write("<tr><td>");
								document.write("<label class='label' style='position:relative; top:0px; left:30px; height:10px; width:40px;'>Radius (m):</label>");
							document.write("</td></tr>");
							document.write("<tr><td>");
								document.write("<input id='circleRad' class='saveBox' disabled type='text' value='1000' style='position:relative; top:0px; left:30px; width:60px; height:15px; background-color:#c3c3c3;' onclick='document.getElementById(\"circleRad\").value=\"\";' title='Enter the Radius of the circle in Meters' />");
							document.write("</td></tr>");
								document.write("<tr ><td><div class='underline' /></td></tr>");
							document.write("<tr><td>");
								document.write("<input  name='meth' type='radio' id='fp'  class='radio'	value='FreehandPolygon' onclick='deleteSelection(); freehandPolygonSelect();' title='Digitize a polygon in clockwise order and close with doubleclick. This allows you to digitize a freehand polygon that is used for feature reporting.'>Freehand Polygon (Drag)</input>");
							
							document.write("</td></tr>");
								document.write("<tr ><td><div class='underline' /></td></tr>"); // ---------------------
							document.write("<tr><td>");
								
								document.write("<input  name='meth' type='radio' id='db'  class='radio' value='featurePolygon' onclick='deleteSelection(); featureSelect();' title='select a logal Government Area from the list as your search polygon.'>LGA Feature</input>");
							document.write("</td></tr>");
							document.write("<tr><td>");
									
								// -- Local Governemnet Filter --//
								document.write("<div id='lgaEnter:2'  style='position:relative; width:200px; height:12px; top:0px; left:0px;'>");
									document.write("<table id='lgaAlphaButtons1' style='font-size:8px; cursor:pointer; text-align:center; position:absolute; top:0px; width:100%; height:20px; left:0px;'>");
									document.write("<tr><td>");
										alphabetButtons('AB:2', 'Local Governments starting with letters A to B', 'if(document.getElementById("db").checked) { loadLgas("lgaSelBox:2", this.id,  "A to B"); document.getElementById("lgaList:2").disabled=false;}', 'A-B');
									document.write("</td><td>");
										alphabetButtons('CD:2', 'Local Governments starting with letters C to D', 'if(document.getElementById("db").checked) { loadLgas("lgaSelBox:2", this.id,  "C to D"); document.getElementById("lgaList:2").disabled=false;}', 'C-D');
									document.write("</td><td>");
										alphabetButtons('EI:2', 'Local Governments starting with letters E to I', 'if(document.getElementById("db").checked) { loadLgas("lgaSelBox:2", this.id,  "E to I"); document.getElementById("lgaList:2").disabled=false;}', 'E-I');
									document.write("</td><td>");
										alphabetButtons('JM:2', 'Local Governments starting with letters J to M', 'if(document.getElementById("db").checked) { loadLgas("lgaSelBox:2", this.id,  "J to M"); document.getElementById("lgaList:2").disabled=false;}', 'J-M');
									document.write("</td><td>");
										alphabetButtons('NR:2', 'Local Governments starting with letters N to R', 'if(document.getElementById("db").checked) { loadLgas("lgaSelBox:2", this.id,  "N to R"); document.getElementById("lgaList:2").disabled=false;}', 'N-R');
									document.write("</td><td>");
										alphabetButtons('SU:2', 'Local Governments starting with letters S to U', 'if(document.getElementById("db").checked) { loadLgas("lgaSelBox:2", this.id,  "S to U"); document.getElementById("lgaList:2").disabled=false;}', 'S-U');
									document.write("</td><td>");
										alphabetButtons('VZ:2', 'Local Governments starting with letters V to Z', 'if(document.getElementById("db").checked) { loadLgas("lgaSelBox:2", this.id,  "V to Z"); document.getElementById("lgaList:2").disabled=false;}', 'V-Z');
									document.write("</td></tr></table>");															
								document.write("</div>"); //-- lgaEnter:2
							
							document.write("</td></tr>");
							document.write("<tr><td>");
							
								//-- form created on fly for the dropdown list --//
								document.write("<div id='lgaSelBox:2'  style='display:block; position: relative; top:0px; left:0px; height:20px; width:100%;' >");				
								document.write("</div>");  //-- lgaSelBox:2
								loadLgas("lgaSelBox:2", "AB:2",  "A to B"); // force the loading of A-B

							document.write("</td></tr>");
							document.write("<tr><td>");
								document.write("<div id='geomkeyHolder' style='display:block; position:relative; top:0px; left:25px; width:180px; '>");
									document.write("<input  name='geomkey' type='radio' disabled id='geomkey' class='radio'	checked value='geometry' title='Use the feature geometry to search for included polygons' onclick = 'document.getElementById(\"includeType\").disabled=false;' value='geomKey'>Geometry</input>");
									document.write("<input  name='geomkey' type='radio' disabled id='keygeom' class='radio'	value='lgaKey' title='Use LGA Code to search for included polygons' onclick = 'document.getElementById(\"includeType\").disabled=\"disabled\";' >LGA key</input> ");
								document.write("</div>"); //-- geomkeyHolder
							
							document.write("</td></tr>");
								document.write("<tr ><td><div class='underline' /></td></tr>"); // ---------------------
							document.write("<tr><td>");
								
								document.write("<label class='label' style='position:relative; top:5px; left:2px; width:40px; font-weight:bold; font-size:11px;'>Feature Inclusion Options:</label>");

							document.write("</td></tr>");
							document.write("<tr><td>");
								document.write("<div id='includeModel' style='position:relative; top:5px; left:0px; height:30px;'>");
									document.write("<select disabled='disabled' style='width:100%;'  title='Select the type of spatial filter/query you would like' id='includeType' name='includeType' size='1'>");
										//-- Equals, Touches, Within, Overlaps, Crosses, Intersects, Contains --//
									document.write("<option name='includeType' id='Intersects' selected='selected' value='Intersects' title='Fetch features that intersect in anyway with the search polygon in any way'>Intersects with Polygon</option>");		
									document.write("<option name='includeType' id='Within' value='Within' title='Fetch features wholly within the search polygon' >Within Polygon</option>");
									document.write("<option name='includeType' id='Overlaps' value='Overlaps' title='Fetch features that overlap the search polygon in anyway' >Overlaps Polygon</option>");
									document.write("<option name='includeType' id='Crosses' value='Crosses' title='Fetch features that cross the search polygon boundary' >Crosses Polygon Boundary</option>");
									document.write("<option name='includeType' id='Contains' value='Contains' title='Fetch the features that contain the search polygon' >Contains Polygon</option>");
									document.write("<option name='includeType' id='Touches' value='Touches' title='Fetch features that touch the search polygon boundary' >Touches Polygon</option>");
									document.write("<option name='includeType' id='Equals' value='Equals' title='Fetch features that are exactly Equal to the search polygon?'>Equals Polygon</option>");
									document.write("</select>");
								document.write("</div>"); //-- includeModel 

							document.write("</td></tr>");
								document.write("<tr ><td><div class='underline' /></td></tr>"); // ---------------------
							document.write("<tr><td>");
								
								document.write("<div id='reptAttInc' style='position:relative; top:5px; left:2px;  width:190px; '>");
									document.write("<label class='label' style='left:0px; width:40px; font-weight:bold; font-size:11px;'>Report Attributes Inclusion:</label>");
								document.write("</div>"); //-- reptAccInc
							
							document.write("</td></tr>");
							document.write("<tr><td>");
								document.write("<div id='mapbaseradio' class='baseMapRadio' style='position:relative; font-size:10px; top:5px; width:180px; height:30px; left:25px;'>");
									document.write("<input  name='ats' type='radio' id='all' class='radio' checked value='all' onclick='if(!allAtts){loadAllAttributes();}' title='Select all the attributes for this layer to be included in the output report.'>All Items</input>");
									document.write("<input  name='ats' type='radio' id='selit' class='radio' value='select'  onclick='populateAttribList();' title='Enter the Attribute Picker Panel'>Item Selector</input>");
								document.write("</div>"); //-- mapbaseradio
							
							//document.write("</td></tr>");
							//	document.write("<tr ><td><div class='underline' /></td></tr>"); // ---------------------
							//document.write("<tr><td>");

								document.write("<input id='sendButt2' type='button' value='Get Features By Method' class='buttup' style='position:relative; top:5px; left:0px; cursor:pointer; height:20px; width:200px;' title='Click here to set to pick mode' onclick='getFeatureOptionsReport();' onmousedown='this.className=\"buttdown\";'	onmouseup='this.className=\"buttup\";'></input>");

						document.write("</td></tr>");
					document.write("</table>");
					document.write("</form>");
				document.write("</div>"); //-- reptsColl 
			document.write("</div>"); //-- reportingInner 
		document.write("</div>"); //-- bodyRepts 	
	document.write("</div>"); //-- reptContHolder 
	Drag.init(document.getElementById("reptHeader"), document.getElementById("reptContHolder"));	
}

//------------------------------ Report Attribute selection Panel ---------------------
function buildAttributePickerPanel()
{
	
	document.write("<div id='attribHolder' style='position:absolute; top:230px; left:500px; width:235px; height:160px; z-index:60001; cursor:pointer; display: none; '  >");	
		makePopupHeader('attribHolder',  'attHeader',  'standardButton',  'Attribute Selector' ,  'popupHeader',   blueBanner2.src,  'images/logo_symbol_small.gif',   'images/close_20.gif');
		
		document.write("<div id='bodyAttribs' style='position:absolute; top:22px; left:0px; border:2px solid #0000D6; width:231px;  height:380px;  background-color:#ECE9D8;'>");
	
			document.write("<div id='attribsInner' class='functionBox' style='position:absolute; top:10px; left:5px; width:221px;  height:360px; '>");
				document.write("<span class='label' style='position:absolute; top:5px; left:10px; font-size:11px;'>Available Items list:</span>");
					
					document.write("<div id='fromList' class='tree' style='position:absolute; width:200px; height:140px;  top:20px; left:5px;'>");
					document.write("</div>"); //-- fromList 
					
					document.write("<span class='label' style='position:absolute; top:170px; left:10px; font-size:11px;'>Include in Report list:</span>");
					
					document.write("<div id='docco' style='position:absolute; top:185px; left:5px; height:18px; width:50px; '>");
						document.write("<img src='images/sum.png' style='position:absolute; top:0px; left:5px;' title='check any attribute if a summation is required'  />");
						document.write("<span style='position:absolute; top:0px; left:50px; width:150px; font-size:10px; text-align:center;'>Attribute Name</span>");
					document.write("</div>"); //-- docco 
					
					document.write("<div id='toList' class='tree' style='position:absolute; width:200px; height:140px; top:205px; left:5px;'>");
					document.write("</div>"); //-- toList
			
			document.write("</div>"); //-- attribsInner 

		document.write("</div>"); //-- bodyAttribs 	
	document.write("</div>"); //-- attribHolder 
	Drag.init(document.getElementById("attHeader"), document.getElementById("attribHolder"));
}


function buildMarkerFilterPanel()
{
	document.write("<div id='markersHolder' style='position:absolute; top:230px; left:550px; width:235px; height:160px; z-index:60001; cursor:pointer; display: none; '  >");	


		document.write("<div id='markersHeader' class='popupHeader' style='position:absolute; top:0px; left:0px; width:235px; background-image:url(images/banner_235.gif);' title='Hold left mouse down to drag this control around' >");
			document.write("<img src='images/logo_symbol_small.gif' style='position:absolute; top:7px; left:4px;' />");
			document.write("<span style='position:absolute; top:4px; left:25px; font-weight:bold;'>Marker Filter Control</span>");
			document.write("<div id='markerHeaderClose' style='position:absolute; top:5px; right:6px; cursor:pointer;' 		onclick='document.getElementById(\"markersHolder\").style.display=\"none\"; normalDiv(\"markersVC\"); document.getElementById(\"markersVC\").title=\"show markers filter control\";'	title='close me' >");
				document.write("<img src='images/close.gif' style='height:15px; width:15px;'/>");
			document.write("</div>"); //-- markerHeaderClose
		document.write("</div>") //-- markersHeader 

	//	makePopupHeader('markersHolder',  'markersHeader',  'standardButton',  'Marker Filter Control' ,  'popupHeader',   blueBanner2.src,  'images/logo_symbol_small.gif',   'images/close_20.gif'); // this does not work properly


		document.write("<div id='bodyMarkerControl' style='position:absolute; top:22px; left:0px; border:2px solid #0000D6; width:231px;  height:280px;  background-color:#ECE9D8;'>");
	
			// filter by classification tab
			document.write("<div id='classificationTab' style='display:block; height:250px;'>");
				document.write("<div id='byClass' style='position:absolute; top:16px; left:10px; width:50px; height:14px; border-bottom-style:none; z-index:10001; text-align:center; font-size:11px; font-weight:bold; background-color:#ECE9D8;'   class='functionBox'	title='click to select Filter By Classifications' onmouseOver='this.style.fontWeight=\"bold\";'	onmouseOut='this.style.fontWeight=\"normal\";'	onclick='switchFilter(this);'>");
					document.write("<span>By Class</span>");
				document.write("</div>"); //-- byClass

				document.write("<div id='markersInner' class='functionBox' style='position:absolute; top:30px; left:5px; width:221px;  height:220px; z-index:10000; display:block;'>");
					document.write("<span class='label' style='position:absolute; top:5px; left:10px; font-size:11px;'>Marker Classifications:</span>");
					document.write("<input type='checkbox' checked = 'checked' id='allClassesCheckbox' style='background-color:transparent; position:absolute; top:20px; left:10px;' onclick='if(markerClass.length > 0){toggleAllClasses(this);}' 	title='hide all classes' />");
					document.write("<span style='position:absolute; top:22px; left:30px;'>Change All</span>");
					document.write("<div id='markersList' class='tree' style='position:absolute; width:200px; height:160px;  top:40px; left:5px;'>");
					document.write("</div>"); //-- markersList 
				document.write("</div>"); //-- markersInner
			document.write("</div>"); //-- classificationTab
			
			// filter by value tab
			document.write("<div id='valueTab' style='display:block; height:250px;'>");		
				document.write("<div id='byValue' style='position:absolute; top:16px; left:65px; width:50px; height:14px; border-bottom-style:none; z-index:9999; text-align:center; font-size:11px; font-weight:normal; background-color:#ffffff' class='functionBox'	title='click to select Filter By Classifications' onmouseOver='this.style.fontWeight=\"bold\";' onmouseOut='this.style.fontWeight=\"normal\";'	onclick='switchFilter(this);'>");
					document.write("<span>By Value</span>");
				document.write("</div>"); //-- byValue

				document.write("<div id='markersValuesInner' class='functionBox' style='position:absolute; top:30px; left:5px; width:221px;  height:220px; z-index:10000; display:none;'>");
					document.write("<span class='label' style='position:absolute; top:5px; left:10px; font-size:11px;'>Marker Values:</span>");
					document.write("<input type='checkbox' checked = 'checked' id='allClassesCheckbox2' style='background-color:transparent; position:absolute; top:20px; left:10px;' onclick='if(valuesPresent){toggleAllClasses(this);}' title='hide all classes' />");
					document.write("<span style='position:absolute; top:22px; left:30px;'>Change All</span>");
					document.write("<div id='markersList2' class='tree' style='position:absolute; width:200px; height:160px;  top:40px; left:5px;'>");
					document.write("</div>"); //-- markersList2
				document.write("</div>"); //-- markersValuesInner
			document.write("</div>"); //-- valueTab 

			document.write("<input id='sendButt3' type='button' class='buttup' value='Replot Filtered Markers' style='position:absolute; top:255px; left:15px; cursor:pointer; height:20px; width:200px; z-index:10000;' title='replot checked feature classes'  onclick='filterMarkers(getFilterList());'	onmousedown='this.className=\"buttdown\";'	onmouseup='this.className=\"buttup\";'></input>");

		document.write("</div>");//-- bodyMarkerControl 	
	document.write("</div>"); //-- markersHolder 
	Drag.init(document.getElementById("markersHeader"), document.getElementById("markersHolder"));
}
//------------------------ My Electorate -----------------
function myElectorate(panelX, panelY)
{
	//if(area != '')	{currentElectorate=area; gotoPolygonalArea('');}
	//else
	//{
		
		document.write("<div id='sidebar:7'	style='position:absolute; top:"+panelX+"px; left:"+panelY+"px;  width:235px; height:100px; z-index:5000; display: none;' onclick='shuffleAllPanels(this.id);'>");
		
		//document.write("<div id='myElect' style='position:absolute; top:200px; left:200px; width:235px; height:185px; z-index:60001; display: block;'>");	
			makePopupHeader('sidebar:7',  'panelHeader:7',  'standardButton',  'My Electorate' ,  'popupHeader',   blueBanner2.src,  'images/logo_symbol_small.gif',  'images/close_20.gif');				
			document.write("<div id='content:7' style='position:absolute; top:22px; left:0px; height:125px; width:231px; border:2px solid #0000D6; background-color:#ECE9D8;'>");
				document.write("<div id='myElectSection' class='functionBox' style='position:absolute; top:10px; left:5px; height:110px; width:220px;' >");		
					document.write("<center class='sectionHeader'>Select Federal Electorate</center>");
					document.write("<img src='images/help.png' style='position:absolute; top:3px; right:2px; cursor:pointer;' title='Help' onclick=\"makePopup('myElect_help.html',  '650',  '800',  'both');\" />");
					
					// build the select Input section
					document.write("<div id='myElectList'  style='display:block; width:190px;  position:absolute; top:30px; left:15px;'>");
					document.write("</div>"); //-- myElectList

					// build the checkbox for turning on and off the mask
					document.write("<div id='myElectMask' style='display:block; width:200px; height:30px; position:absolute; top:60px; left:15px;'>");
						document.write("<span class='label' style='position:absolute; top:0px; left:0px; font-size:11px; font-weight:normal;'>Mask Layer:</span>");
						document.write("<input id='maskControl' checked type='checkbox' style='position:absolute; top:0px; left:60px; background-color:transparent;' onclick='toggleMask();' title='check this box to turn the Masking layer on or off' />");
					

					document.write("<form  action='' name='maskCol' id='maskCol' style='position:absolute; top:0px; left:90px; '>");
						document.write("<span class='label' style='font-size:11px; top:2px; font-weight:normal;'>Black</span>");
						document.write ("<input  name='maskCol' type='radio' id='blackMask' class='radio' checked  value='#000000' onclick='rebuildMaskLayers(this.value);', title='Pick this for a Black mask of other areas'/>");
						document.write("<span class='label' style='font-size:11px; top:2px; font-weight:normal;'>White</span>");
						document.write ("<input  name='maskCol' type='radio' id='whiteMask' class='radio'  value='#FFFFFF' onclick='rebuildMaskLayers(this.value);' title='Pick this for a White mask of other areas'/>");
					document.write("</form>");	
						
					document.write("</div>"); //-- myElectMask

					// build the checkbox for launching TallyRoom
					document.write("<div id='tallyRoom' style='display:block; width:100px; height:30px; position:absolute; top:80px; left:15px;'>");
						document.write("<span class='label' style='position:absolute; top:0px; left:0px; font-size:11px; font-weight:normal;'>TallyRoom:</span>");
						document.write("<input id='tallyRoomControl' type='checkbox' style='position:absolute; top:0px; left:60px; background-color:transparent;' onclick='toggleTallyRoom(this.id);' title='check this box to turn link to TallyRoom.com.au' />");
					document.write("</div>"); //-- tallyRoom
					
					// build the checkbox for activating Booth layer
					document.write("<div id='booths' style='display:block; width:100px; height:30px; position:absolute; top:80px; left:105px;'>");
						document.write("<span class='label' style='position:absolute; top:0px; left:0px; font-size:11px; font-weight:normal;'>Booths:</span>");
						document.write("<input id='boothsControl' type='checkbox' unchecked style='position:absolute; top:0px; left:60px; background-color:transparent;' onclick='toggleBooths(this.id);' title='check this box to show the Election Booth locations' />");
					document.write("</div>"); //-- booths
				
				document.write("</div>"); //-- myElectSection 
			document.write("</div>"); //-- content:7 
		document.write("</div>"); //-- sidebar:7 

		Drag.init(document.getElementById("panelHeader:7"), document.getElementById("sidebar:7"));
	//}

// load the commonwealth electorates
// if area preset go to the area
loadPolygonNames('myElectList', commListFile);

}


function toggleMask()
{
	if(document.getElementById('maskControl').checked && maskLayer)
	{	maskLayer.setVisibility(true);	}
	else if(!document.getElementById('maskControl').checked && maskLayer)
	{	maskLayer.setVisibility(false);	}

	// make sure the others are always on
	if(polygonLayer) {	polygonLayer.setVisibility(true);	}
	if(labelLayer)	 {	labelLayer.setVisibility(true);	}

	// now return focus to electorate selection
	document.getElementById('commElectOption').focus();
}

function rebuildMaskLayers(maskColor)
{	
	//var dataStore= "ABS";
	//var typeName = "COMM_ELECT_BDYS";
	var attName = "ELECT_DIV";
	maskOtherPolygons(mainMaskLayer, attName, currentElectorate, maskColor, '0.7', '#FF0000', '5')
	if(document.getElementById("maskControl").checked)
	{
		maskLayer.setVisibility(true);	
	}
	polygonLayer.setVisibility(true);
	labelLayer.setVisibility(true);
}

function toggleTallyRoom(id)
{
	if(document.getElementById(id).checked && currentElectorate != '')
	{	var link = 'http://www.tallyroom.com.au/election-2010/'+currentElectorate;
		tallyRoomWin = makePopup(link,  '700',  '800',  'both');
	}
	else if(!document.getElementById(id).checked && tallyRoomWin){tallyRoomWin.close();}
	document.getElementById('commElectOption').focus();
}
function toggleBooths(id)
{
	// look for the booth layer number
	layNum = -1;
	for (var i=0; i<Name.length; i++)
	{	if(Name[i] == 'CED_BOOTHS:ABS')	{	layNum = i; break;	}	}
	
	// now activate/deactivate Booths layer
	if(layNum >= 0)
	{
		if(document.getElementById(id).checked && currentElectorate != '')
		{	document.getElementById('layers:'+layNum).checked = true;		}
		else
		{	
			document.getElementById('layers:'+layNum).checked = false;	
			document.getElementById('label:'+layNum).checked = false;	
		}
		manipulateLayer(layNum);
		manipulateLabels(layNum);
	}
}

function loadPolygonNames(target, xmlFile)
{
	// get the appropriate XML file from server	to load as options
	//alert('target = '+target); 
	//alert(areaName)
	sourceXmlFile = "inc/"+xmlFile;
	//var query="?"+new Date().getTime();
	var query="";

	// now go and fetch the data from the various list of options on the server
	//alert(sourceXmlFile+query)
	ajaxRequest = loadXml(sourceXmlFile, query);
	if (ajaxRequest == null) {alert ("No points available");  return false; }
	var selOption = ajaxRequest.responseXML.getElementsByTagName("Options");
	if (selOption.length == 0){return false;}

	//alert(selOption[0].getAttribute("name"));
	selBx = 'commElectOption';
	
	// all OK so now get the target element for the new select box
	selectDiv = document.getElementById(target);
	checkRemoveObject(selBx);
	
	// create a new Select element
	var select = document.createElement('select');
	select.id = selBx;  select.setAttribute('id',selBx);
	select.style.maxWidth='210px';
	select.style.minWidth='190px';
	select.style.position='relative';
	if(browser == 'msie') {select.style.top='0px';}
	else {select.style.top='0px'};
	//select.style.Width='200px';
	//select.style.margin="5px 0 5px 0;";
	//"onfocus="javascript: this.style.width='auto';" onblur="javascript: this.style.width=125;"
	select.style.fontSize="10px";
	select.style.height='19px';
	select.style.fontSize='10px';
	select.style.backgroundColor='#FFFFFF';
	//select.style.border='1px solid gray';
	select.setAttribute('title','Select your Electorate');
	select.title='Select your Electorate';
	
	// this binds the 'go-to' LGA function to this element
	bindEvent(select, 'change', gotoPolygonalArea, 'false'); 

	// create the first Option tag as instructional info
	var option01 = document.createElement('option');
	option01.setAttribute('selected', 'selected');	
	var data="... select from list below ...";
	var text = document.createTextNode(data);
	option01.appendChild(text);

	select.appendChild(option01);
		
	// build up the options list for the select
	var selOptions = ajaxRequest.responseXML.getElementsByTagName("Option");
	for (var i=0; i<selOptions.length ; i++)
	{
		var value = selOptions[i].getAttribute('value');
		var text = selOptions[i].firstChild.nodeValue;
		select.options[select.options.length] = new Option(text, value);
	}
	selectDiv.appendChild(select); 
}

//----------------------- function to jump to an selected polygon ----------------------//
function gotoPolygonalArea(evt)
{
	// get the electorate name for this option
	var id = getThisId(evt);

	var selectObject = document.getElementById(id);
	var bboxDesc = selectObject.options[selectObject.selectedIndex].value;
	currentElectorate = selectObject.options[selectObject.selectedIndex].text;
	//alert(bboxDesc)
	//alert('elect = >'+currentElectorate+'<')
	genLoadStatus('Getting '+currentElectorate, true, '');
	
	// reset the maxextents
	//originalBounds =  new OpenLayers.Bounds(ozBox[0],  ozBox[1],  ozBox[2],  ozBox[3]);
	//map.setOptions({restrictedExtent: originalBounds})
	
	// remove any DDrape from screen
	if(DemoDrape){DemoDrape.setVisibility(false);}

	// set up the parameters
	var uri = meshBlocksBase;
	var dataStore= "ABS";
	var typeName = "COMM_ELECT_BDYS";
	var attName = "ELECT_DIV";
	//var typeName = "COMM_ELECTORATES";
	//var attName =  "ELECT_NAME";
	mainMaskLayer = typeName+":"+dataStore;

	// look thru layers array for 'Commonwealth Electorates 2009-2010' layer
	var layerNumber = -1;
	for (var i=0; i<LayerObj.length ; i++)
	{	//alert('titleText = '+TitleText[i])
		if(TitleText[i] == 'Commonwealth Electorates 2009-2010') {var layerNumber = i; break;}		}

	if(layerNumber >= 0)
	{
		// make sure that any apostrophie in att value is converted to double apostrophie
		currentElectorate = currentElectorate.replace(/\'/g, "''");	
		
		// set up the filter for the getfeature request
		polyfilter = "<Filter><PropertyIsEqualTo><PropertyName>"+attName+"</PropertyName><Literal>"+currentElectorate+"</Literal></PropertyIsEqualTo></Filter>";

		
		// call function to load GML into the DOM
		var ajaxRequest = getFeatureRequest (uri, 'GetFeature','WFS', srs, dataStore, typeName, polyfilter, 'BXFS');
		
		// get the BBox for this electorate eg "Adeliade:145.223,-35.998,146.998,-34.889"
		var bbox = bboxDesc.split(":");
		if(bbox[1] == 'bbox') 
		{
			// no BBox so get it from geometry 
			bounds = getPolySelectionBbox(ajaxRequest);
			
			// save the bbox to the value element of the select object
			var bboxVals = bounds.toBBOX(); 
			var bboxVals = bboxVals.split(",");
			//alert(currentElectorate+":"+bboxVals[0]+","+bboxVals[1]+","+bboxVals[2]+","+bboxVals[3])
			selectObject.options[selectObject.selectedIndex].value = currentElectorate+":"+bboxVals[0]+","+bboxVals[1]+","+bboxVals[2]+","+bboxVals[3];
		}
		else
		{
			//split string into array
			var ords = bbox[1].split(",");
			bounds = new OpenLayers.Bounds(ords[0],ords[1],ords[2],ords[3]);
		}

		if(bounds)
		{	
			var center = bounds.getCenterLonLat();
			var zoomLevel = map.getZoomForExtent(bounds)-2;	
			//map.moveTo(center, zoomLevel)
			map.setCenter(center, zoomLevel+1);
			
			// drawBboxFromBounds(bounds, 'magenta',false) // debug
			
			// apply a mask over map here if needed	
			maskOtherPolygons(mainMaskLayer, attName, currentElectorate, maskColor, "0.7", "#FF0000", "5")			
			if(document.getElementById("maskControl").checked)
			{
				maskLayer.setVisibility(true);
				polygonLayer.setVisibility(true);
				labelLayer.setVisibility(true);
			}

		
			//map.updateSize();
			
			if(DemoDrape){DemoDrape.setVisibility(true);}
			resetZlevels();
		}

		// add the popup of information about the electorate
		if(document.getElementById('tallyRoomControl').checked)
		{
			var link = 'http://www.tallyroom.com.au/election-2010/'+document.getElementById(id).value;
			tallyRoomWin = makePopup(link,  '700',  '800',  'both');
		}

		// toggle booths if required
		//toggleBooths('boothsControl')
		
		
		genLoadStatus('', false, '')
		Event.stop(evt);
	}
}
function updateMyElectorateList()
{
	// now update the original source xml file with the BBox
			//alert(sourceXmlFile)
			//	$file = $_GET["file"];			
			//	$name = $_GET["name"];
			//	$bbox = $_GET["bbox"];
			//var url = applicationBase+"inc/updateOptionsList.php?";
			//var params = "file="+applicationBase+"inc/"+sourceXmlFile+"&name="+currentElectorate+"&bbox="+bboxVals[0]+","+bboxVals[1]+","+bboxVals[2]+","+bboxVals[3];
			//alert(url+params);
			//loadXml(url+params);
}

function drawBboxFromBounds(bounds, bboxColor, overwrite)
{
	// get the bounds geometry
	var pointList = new Array();
	var bboxVals = bounds.toBBOX(); 
	var bboxVals = bboxVals.split(",");
		
	// initialise a new vector layer
	bounding_box = OpenLayers.Util.extend({},  layer_style); 
	bounding_box.fillOpacity = 0;
	bounding_box.strokeWidth = 2.0;
	bounding_box.strokeOpacity = 0.5;
	bounding_box.strokeColor = bboxColor;

	// create the vector layer to show the BBox
	if(vectorLayer3 != null && overwrite){	vectorLayer3.destroyFeatures();	vectorLayer3 = null}
	vectorLayer3 = new OpenLayers.Layer.Vector("Bounding Box", {style: bounding_box});
	vectorLayer3.addOptions({'displayInLayerSwitcher': true, reproject: true, visibility:true, reaspect: false});
	map.addLayer(vectorLayer3);
	resetZlevels();

	// get the vertices of the polygon into real world arrays
	// loLeftCoords and hiRightCoords defines the BBox of territory as on file
	allX = new Array();
	allY = new Array();
	allX[0] = bboxVals[0];
	allY[0] = bboxVals[1];
	
	allX[1] = bboxVals[0];
	allY[1] = bboxVals[3];
	
	allX[2] = bboxVals[2];
	allY[2] = bboxVals[3];
	
	allX[3] = bboxVals[2];
	allY[3] = bboxVals[1];
	
	allX[4] = bboxVals[0];
	allY[4] = bboxVals[1];

	// get all the points of the polygon from input arrays
	for(var i=0; i<allX.length ; i++)
	{	pointList.push(new OpenLayers.Geometry.Point(allX[i], allY[i]));	}

	// build up and plot the BBox shape
	var bboxVectors = new OpenLayers.Geometry.LinearRing(pointList);
	bboxFeature = new OpenLayers.Feature.Vector( new OpenLayers.Geometry.Polygon([bboxVectors]));
	vectorLayer3.addFeatures(bboxFeature);	
	resetZlevels();	
}

function drawPoint2(x, y, delme)
{
	pointList = [];
	//if(vectorLayer3 && delme) {	map.removeLayer(vectorLayer3); }

	// get the vertices of the polygon into real world arrays
	pointList.push(new OpenLayers.Geometry.Point(x-20, y-20));
	pointList.push(new OpenLayers.Geometry.Point(x-20, y+20));
	pointList.push(new OpenLayers.Geometry.Point(x+20, y+20));
	pointList.push(new OpenLayers.Geometry.Point(x+20, y-20));
	pointList.push(new OpenLayers.Geometry.Point(x-20, y-20));
	
	// commit the search polygon to the vector layer
	var bboxVectors = new OpenLayers.Geometry.LinearRing(pointList);
	bboxFeature = new OpenLayers.Feature.Vector( new OpenLayers.Geometry.Polygon([bboxVectors]));
	vectorLayer3.addFeatures(bboxFeature);	
	
}
//--------------- gets the bounding box of all DOM features by scanning through the geometry-----------------------
function getPolySelectionBbox(ajaxRequest)
{
	var features = ajaxRequest.responseXML.getElementsByTagName("Feature");
	//alert("number of features = "+features.length);
	// Now scan through all features adding every Coordinate to bounds
	//var prefix = 'gml:';											// for IE
	//if (navigator.appName == 'Netscape') {var prefix=''}	// for Mozilla


	//alert('prefix = '+prefix)

	var pt = []; 
	bound =null;
	var loLat=999999999; var hiLat=-999999999; var loLng=99999999; var hiLng=-99999999;
	var points = '';
	
	var len1 = features.length;
	for (var b = 0; b < len1; b++)
	{
		// get the exterior elements only
		var element0 = prefix+'exterior';
		var exterior = features[b].getElementsByTagName(element0);
		//alert("Number of exterior elements = "+exterior.length);
		var len2 = exterior.length ;
		for (var b1=0; b1 < len2 ; b1++)
		{
			// get geometry within exterior elements only
			var element1 = prefix+'LinearRing'
			var linearRing = exterior[b1].getElementsByTagName(element1);
			//alert("feature No = "+b+" exterior No = "+b1)
			//alert("Number of geometry objects in exterior element = "+linearRing.length)
			for (c = 0; c < linearRing.length; c++)
			{
				// get each linearRing from gml object
				var element2 = prefix+'posList'
				var posList = features[b].getElementsByTagName(element2);
				//alert("number of PosList = "+posList.length)
				var len3 = posList.length;
				for (var dd = 0; dd < len3; dd++)
				{
					//if(navigator.appName == "Netscape")
					if (browserName == 'firefox') {var points = posList[dd].textContent;}
					else {	var points = posList[dd].firstChild.nodeValue;}
					var pt = points.split(" ");
					//alert('No of ordinates = '+pt.length)
					var len4 = pt.length ;
					for (var e = 0; e < len4 ; e=e+2)
					{
						var lat = pt[e+1]; 
						var lng = pt[e];
						//alert(lat+", "+lng);
							// calculate bounding box of coords	
							if (lat < loLat) {loLat=lat;}
							if (lat > hiLat) {hiLat=lat;}
							if (lng < loLng) {loLng=lng;}
							if (lng > hiLng) {hiLng=lng;}

							//alert(" e = "+e+" coords = "+lat+", "+lon)
					}
				}
			}
		}
	}
	//alert (loLng+", "+loLat+" "+hiLng+", "+hiLat)
	
	// centre the map over the collection of parcels
	bounds = new OpenLayers.Bounds(loLng,loLat,hiLng,hiLat);
	return bounds;
}