// Set the initialArea as below in the parent page.	
// var initialArea = '10000000000';		

		var areas = new Array();
		var previous = 0;
		var areaPickerRow;		
		var areaPickerInit = false;
		
		function ChooseAreaCallback( areas )
		{
			var areaIds = '';
			var areaHtml = '';									
			
			for( i = 0; i < areas.length; i++ )
			{
				areaIds += areas[i].areaId + ',';
				areaHtml += areas[i].areaName + '<br>';
			}
			
			document.getElementById(areaElementName).value = areaIds;
			document.getElementById('areaPreview').innerHTML = areaHtml;
		}
		
		function Pick( areaId, areaName )
		{
			var newArea = new Object();
			newArea.areaId = areaId;
			newArea.areaName = areaName;
			areas[ areas.length ] = newArea;
																
			CreatePreview();
		}
		
		function Remove( index )
		{
			areas.splice( index, 1 );
			CreatePreview();
		}
		
		function CreatePreview()
		{
			var html = "";
			var currentAreas = document.getElementById( areaElementName ).value;
			var areaIds = "";
			var areaHtml = "";
			
			if ( areas.length == 0 )
			{
				
				if ( regionName != "" )
					html = defaultText + " in " + regionName;
				else
					html = defaultText;
					
				document.getElementById( 'areaTip' ).style.display='none';				
				document.getElementById( 'selectedAreas' ).style.backgroundColor = "#d4e4f9";
			}
			else
			{
				document.getElementById( 'areaTip' ).style.display='block';				
				document.getElementById( 'selectedAreas' ).style.backgroundColor = "#FFE6E6";
				for ( i = 0; i < areas.length; i++ )
				{
					html += "<a href='#' onclick='Remove(" + i + "); return false;'><img src='/images/icons/11/delete.gif' alt='Remove' title='Click here to remove this from your search' border='0' style='margin:0' /></a>&nbsp;&nbsp;&nbsp;&nbsp;" + areas[i].areaName + "<br>";
					areaIds += areas[i].areaId + ',';
					areaHtml += areas[i].areaName + '<br>';
				}

			}
			
			document.getElementById(areaElementName).value = areaIds;
			document.getElementById('areaPreview').innerHTML = html;
		}
		
		function Browse( p, column )
		{
			areaPickerInit = true;
			// Make sure the other columns are removed.
			var cellCount = areaPickerRow.cells.length;
			for ( var x = column; x < cellCount; x++ )
			{
				areaPickerRow.deleteCell( column );
			}
						
			var areaPickerCell = areaPickerRow.insertCell( column );
			
			areaPickerCell.id = 'areaPickerCell' + column;
			
			if ( p == "00000000000" )
				p = "NULL";
			
			var url = '/ajax/browseAreas.php';
			var pars = 'p=' + p + '&c=' + ( column + 1 );
		
			var myAjax = new Ajax.Updater(
					areaPickerCell.id, 
					url,
					{				
						method: 'get', 
						parameters: pars,
						evalScripts: false				
					});				
		}
		
		function BrowsePostcode( postcode, column )
		{
			areaPickerInit = true;
			// Make sure the other columns are removed.
			var cellCount = areaPickerRow.cells.length;
			for ( var x = column; x < cellCount; x++ )
			{
				areaPickerRow.deleteCell( column );
			}
						
			var areaPickerCell = areaPickerRow.insertCell( column );
			
			areaPickerCell.id = 'areaPickerCell' + column;
						
			
			var url = '/ajax/browseAreas.php';
			var pars = 'pc=' + postcode + '&c=' + ( column + 1 );
		
			var myAjax = new Ajax.Updater(
					areaPickerCell.id, 
					url,
					{				
						method: 'get', 
						parameters: pars,
						evalScripts: false				
					});				
		}		
		
		function ChooseArea()
		{
			
			// Reset the table
			if ( !areaPickerInit )
			{
				document.getElementById( 'areaSelector' ).innerHTML = '';
				// Create the new table
				var newTable = document.createElement( 'TABLE' );
				newTable.cellPadding='5';
				document.getElementById( 'areaSelector' ).appendChild( newTable );
				areaPickerRow = newTable.insertRow(newTable.rows.length);		
				Browse( initialArea, 0 );			
			}			
		}	
		
		function ClearAreas()
		{
			areas = new Array();
			CreatePreview();
		}