// -------------------- 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)
		{		
		//	loadThemeArrayOptions();
		//	swapTheme(evt, 0);
			level=0; layer=0; theme=0;
			loadAnalysisOptions();
			//loadThemeOptions(level, layer, theme)
		}
	}
	//--------------------------- 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();
		currentXmlRow = -1;
		//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();
		//buildTerritoryFolderPanel();
		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
	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;
		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;}
		if(direction=='vertical') {buttonPanelHt = buttonPanelHt + vertInc + 10;}
		var panelHeight = buttonPanelHt +30;
		homeTop = 5; homeLeft = 5;
		//alert(panelHeight)
		
		// 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("<div id='sidebar:20' style='position:absolute; top:5px; left:5px; width:235px; height:175px;'>");

		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:0px; left:0px; width:231px; height:"+buttonPanelHt+"px; border:2px solid #0000D6; background-color:#ECE9D8; cursor:move'>");
	}

	//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:1px; line-height:18px; left:40px;  width:'+searchBox+'px; height:12px;" type="text" onKeyPress="checkEnter(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:1px; 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(print)
		{	
			document.write("<div id='printerButt'  style='position:absolute; top:1px; 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)
		}
		document.write("<div id='loadStatus' style='position:absolute; top:"+startTop+"px;	left:"+loadMess+"px; width:200px; height:16px; display:none; '	>");
			document.write("<img id='loadWheel' src='images/loader.gif' 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("</div>"); // sidebar:20
		Drag.init(document.getElementById("sidebar:20"));
	}
}

function toggleDDrapeModes(thisId)
{
	var title = document.getElementById(thisId).title;
	var thisFunction = thisId.split("Mode")[0];
		
	// if either button set to 'enter' something 
	if(title == 'enter library mode' || title == 'enter analysis mode')
	{
		if(thisFunction == 'library') 
		{	
			mousedown('libraryMode');
			document.getElementById(thisId).title = 'exit library mode';
			document.getElementById('libraryModeSection').style.display='block';
			//alert(configMode)
			if(configFlag)
			{	
				mouseup('configMode');
				document.getElementById('configMode').title = 'enter analysis mode';
				document.getElementById('configModeSection').style.display='none';
			}
			if(editorFlag)
			{	//document.getElementById('opacityControls').style.left='15px';
				//if(document.getElementById('killCache')){document.getElementById('killCache').style.display='block';}
			}
			else
			{	//document.getElementById('opacityControls').style.left='45px';
				//if(document.getElementById('killCache')){document.getElementById('killCache').style.display='none';}
			}
			// now set the title for the function
			updateTitle('Library');
		}
		else if(thisFunction == 'config' ) 
		{
			mousedown('configMode');
			document.getElementById(thisId).title = 'exit analysis mode';
			mouseup('libraryMode');
			document.getElementById('libraryMode').title = 'enter library mode';
			document.getElementById('libraryModeSection').style.display='none';
			document.getElementById('configModeSection').style.display='block';
			//document.getElementById('opacityControls').style.left='45px';
			//if(document.getElementById('killCache')){document.getElementById('killCache').style.display='none';}
			//editorFlag = false;
			updateTitle('Configure');
		}
	}
	else // when a button set to Exit was hit
	{
		if(thisFunction == 'library') 
		{	
			if(configFlag)
			{
				mouseup('libraryMode');
				document.getElementById(thisId).title = 'enter library mode';
				document.getElementById('libraryModeSection').style.display='none';
				mousedown('configMode');
				document.getElementById('configMode').title = 'exit analysis mode';
				document.getElementById('configModeSection').style.display='block';
			}
			//document.getElementById('opacityControls').style.left='45px';
			//if(document.getElementById('killCache')){document.getElementById('killCache').style.display='none';}
			//editorFlag = false;
			updateTitle('Library');
		}
		else if(thisFunction == 'config' ) 
		{
			mouseup('configMode');
			document.getElementById(thisId).title = 'enter analysis mode';
			mousedown('libraryMode');
			document.getElementById('libraryMode').title = 'exit library mode';
			document.getElementById('libraryModeSection').style.display='block';
			document.getElementById('configModeSection').style.display='none';
			if(editorFlag)
			{	//document.getElementById('opacityControls').style.left='15px';
				//if(document.getElementById('killCache')){document.getElementById('killCache').style.display='block';}
			}
			else
			{	//document.getElementById('opacityControls').style.left='45px';
				//if(document.getElementById('killCache')){document.getElementById('killCache').style.display='none';}
			}
			updateTitle('Configure');
		}
	}
	removeAllDrapeLayers();
}

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> ");
			
	//-- 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>");

	//-- 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"));
}

function buildBasemapControl(baseMapsList, baseMapsIds, baseMapsLayers)	
{
	
	// 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++)
	{
		//alert('ids = '+baseMapsIds)
		document.write ("<tr><td>");
		document.write ("<input  name='base' type='radio' id='"+baseMapsIds[i*2]+"' class='radio'	checked value='"+baseMapsLayers[i*2]+"' onclick='swapBase(this.value);' title='Select "+baseMapsList[i*2]+" as your base map'>"+baseMapsList[i*2]+"</input>");
		document.write ("</td><td>");
		document.write ("<input  name='base' type='radio' id='"+baseMapsIds[(i*2)+1]+"'  class='radio'  value='"+baseMapsLayers[(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 

	
	// --------- build the geocoder selector box for multiple returns -------- //
	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 displaye 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)
	document.getElementById(buttonId).style.backgroundColor='transparent';
	normalDiv(buttonId);
}
function mousedown(buttonId)
{
	//alert('mousedown = '+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);

}

function makePopupHeader(holdingId, headid, buttonStyle, headText, className, headImage, leftImage, rightImage)
{
	// create the header holding div
	//alert(holdingId)
	//alert(document.getElementById(holdingId))
	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(rightImage != '')
		{
			// insert the minimise me image
			var shrinkImg = document.createElement('img');
			shrinkImg.src = 'images/min_20.gif';;
			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
			var minId = 'minmax_'+headid;
			shrinkImg.id = minId;
			shrinkImg.setAttribute('id',minId);
			bindEvent(shrinkImg, 'click', minmaxPanel, 'false');
			header.appendChild(shrinkImg);
			
			// insert the closeme image
			if(rightImage == 'images/close_20.gif')
			{
				var rightImg = document.createElement('img');
				rightImg.src = 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(rightImage = 'images/home.png')
			{
				var rightImg = document.createElement('img');
				rightImg.src = 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);
			}
		}
		document.getElementById(holdingId).appendChild(header);
	}

}
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';

}
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)
{
	document.write("<div id='sidebar:1'	style='position:absolute; top:"+panelX+"px; left:"+panelY+"px; width:235px; height:342px; 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:320px; width:231px;'>");	
		
		//----------------- Base maps ----------------//
		document.write("<div id='baseMaps' class='functionBox' style='width:220px; height:90px; 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, baseMapsLayers);
		document.write("</div>");

		//--------------- Additional layers Section ----------//
		document.write("<div id='additionalLayers' class='functionBox' style='position:absolute; top:103px; 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 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:485px; 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:425px; width:231px; border:2px solid #0000D6; background-color:#ECE9D8;'>");
			document.write("<div id='uploadSection' class='functionBox' style='position:absolute; top:10px; left:5px; height:410px; 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 controls ------//
					document.write("<table border=0 style='position:absolute; top:20px; left:5px; 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>");
						
						// 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
						
						// 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','changeSource("lrad1");', '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();', 'SaveAs XML file - Click here to permanently save and make available to others the current XML file of plotted points', 'images/save.jpg', false, true) ;
							document.write("</center></div></td>");//-- saveDiv
						
						// List of uploaded csv file and xml file
						document.write("<td style='width:22px;'>");
							document.write("<div id='amlOD'  style='background-color:transparent; display:none;'><center> ");
								buttonHandler('markerVisOnOff','toggleButton(this.id);', 'Show geocoded file in the selected format (csv or xml)', 'images/report.jpg', true, 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:199; 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; 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_new.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("<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;'>*Header Rows:</label>");
								document.write("<input class='box' style='position: absolute; top:0px; left:100px; width:100px; ' title='Enter the number of Rows in file used as header/metadata rows' id='header' value='' name='headRows' onchange='checkComplete();'/>");

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

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

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

							document.write("<div id='chartColEntry' style='position:absolute; top:158px; 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 Columns:</label>");
								document.write("<input class='box' style='position: absolute; top:0px; left:100px; width:100px;' 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='width:217px; height:18px;' 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:185px; left:4px; width:200px; height:20px; display:block;'>");
								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' />");
								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:235px; 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:70px;'>Chart Type:</label>");
							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' onclick='showUserPoints(geocodedFile);' />");
							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' onclick='showUserPoints(geocodedFile); '	/>");
							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' onclick='showUserPoints(geocodedFile); '	/>");
							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:280px; 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:340px; 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:365px; left:9px; height: 15px; 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='editButtons5' class='buttup' style='position:absolute; top:21px; 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:21px; 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 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);', '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', 'resetTerritory();', '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>");
		
					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' 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','removeTerritory(); 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("<div id='selectedTerr' style='position:absolute; top:12px; left:0px; width:205px; 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:400px; 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');
	
		document.write("<div id='content:2' style='position:absolute; top:22px; left:0px; height:380px; width:231px; border:2px solid #0000D6; background-color:#ECE9D8;' >");
		
			document.write("<div id='DDrapes' class='functionBox' style='position:absolute; top:10px; left:5px; width:220px; height:320px;' >");		
				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\");' />");
				
				// two Standard Mode buttons go here
				document.write("<table border=0 style='position:absolute; top:15px; left:1px; width:"+ctlWidth+"px;  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){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>");
			
					// 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>");


					document.write("</tr>");
					
				document.write("</table>");
//-------------------------------------------------------------------------------------------------------					
// this is the DDrape configuration section
				document.write("<div id='configModeSection' style='width:210px; position:absolute; top:40px; left:1px; height:320px; display:none;' >");		
	/*			
				document.write("<table id='confButts' border='0'  style='position:relative; left:0px; width:"+ctlWidth+"px;  font-size:10px; border-collapse:collapse; font-weight:bold; '>");
					//document.write("<tr><td class='underline' ></td></tr>");
			
					document.write("<tr>");
						document.write("<div id='configButts' >")
							document.write("<td ><center>");
								buttonHandler('deleteDD2', 'removeAllDrapeLayers();', 'remove current DemographicDrape', 'images/closeit.gif', false, true);	
							document.write("</center></td>");
			
						document.write("</div>");
					document.write("</tr>");
				document.write("</table>");
	*/	
			document.write("<table id='qDrapesContainer' border='0'  style=' width:100%;'>");
					//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:45px;'><td style='width:100%; '>");
						document.write("<div id='drapeType' style='vertical-align:top; height:100%; width:100%;' >");
							document.write("<form action='' name='classificationType' title='specify Low Value and High Value between which thre will be a classification breakdown' >");
								document.write("Low: <input name='classificationType' id='loValue' type='text' style='height:13px;vertical-align:bottom; margin:5px 12px 0px 2px; width:45px;' value='0'  />");
								document.write("High: <input name='classificationType' id='hiValue' type='text' style='height:13px;vertical-align:bottom; margin:0px 2px 0px 2px; vertical-align:bottom; width:70px;' value='"+numaMax+"' />");
								document.write("<br/>Method of Division: <select name='classificationType' id='classOpt' style='width:75px; height:20px;  margin:10px 0px 0px 25px; vertical-align:bottom;' 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><br/>");
						document.write("</div>");
					document.write("</td></tr>");

					document.write("<tr style='height:20px;'><td style='width:100%;'>");
						//document.write("<label>DemographicDrape Styling:</label>");
						document.write("<div id='drapeColor' style='vertical-align:top; height:18px; width:100%;'>");
							document.write("<form action='' name='themeColors'  >");
								document.write("Styles Red:<input name='themeColors' style='height:12px; vertical-align:bottom; margin:0px 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:0px 5px 0px 5px; background-color:transparent;' type='radio'  value='blue' />");
								document.write("Green:<input name='themeColors' style='height:12px; vertical-align:bottom; margin:0px 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 style='height:20px;'><td style='width:100%;'>");
						document.write("<center><input id='newDrapeButt' class='buttup' style='width:200px;' onclick='makeNewDDrape();' value='Refresh DemographicDrape' type='button' 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
					
					// adjust width of table to support requested buttons
					var ctlWidth = 73;
					if(!infoFlag) {ctlWidth = 37;}
					
					document.write("<table border=0 style='position:absolute; top:20px; left:1px; width:"+ctlWidth+"px;  font-size:10px; border-collapse:collapse; font-weight:bold; '>");
						document.write("<tr style='height:25px;'> ");
							
					/*		document.write("<td ><center>");
								buttonHandler('deleteDD', '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>");
			
					// -- Build DDrapes Editing Buttons --
					//alert(editorFlag)
					if(editorFlag) // only if requested...
					{
						document.write("<table border=0 id='earsButtons' style='position:absolute; top:20px; left:142px; 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:217px; 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:320px; 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:60001; 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 buildTerritoryReportPanel()
{
	document.write("<div id='territoriesReportHolder'  style='position:absolute; top:50px; left:315px; width:600px; height:320px; z-index:60001; cursor:pointer; display: none; background-image:transparent;'> ");	

		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='download'></span>");

				document.write("<div id='terrList' style='position:absolute; top:5px; right:6px; cursor:pointer;' onclick='showHideTerritoriesReport(document.getElementById(\"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"));
}

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.value);' title='Enter keywords for searching. Multiple keywords are separated with a hyphan. 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:130px; left:400px; height:140px; 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:480px; 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:430px;  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:420px;'>");	

			// 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='Crosses' value='Crosses' title='Fetch features that cross the search polygon boundary'>Crosses Polygon Boundary</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' >Overlaps Polygon</option>");
									document.write("<option name='includeType' id='Contains' value='Contains' title='Fetch features that are completely inside 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:530px;	background-color:#ECE9D8;'>");
				document.write("<div id='reportingInner' class='functionBox' style='position:absolute; top:10px; left:5px; width:220px; height:490px;' >");
			}
			else
			{	document.write("<div id='bodyRepts' style='position:absolute; top:22px; left:0px; border:2px solid #0000D6; width:231px;  height:520px;  background-color:#ECE9D8;'>");
				document.write("<div id='reportingInner' class='functionBox' style='position:absolute; top:10px; left:5px; width:220px; height:480px;' >");
			}
				document.write("<div id='reptsColl' style='display:block; position:absolute; top:10px; 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' >");
									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;' >Geometry</input>");
									document.write("<input  name='geomkey' type='radio' disabled id='keygeom' class='radio'	value='LGA key' 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='Crosses' value='Crosses' title='Fetch features that cross the search polygon boundary'>Crosses Polygon Boundary</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' >Overlaps Polygon</option>");
										document.write("<option name='includeType' id='Contains' value='Contains' title='Fetch features that are completely inside 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='if(validated()) {document.getElementById(\"gfiDD\").title=\"Re-enter Polypika Mode\"; 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, false);
	
	// 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"
		//alert(bboxDesc);
		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(",");
			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, 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.destroy();	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;
}