//------------------- Image Picker ------------------------//

// function to build the image Picklist
function buildImagePicker(parentDiv)
{
	// set up the array of images (this could be loaded from an XML file)
	areaFillSymbols = ["empty", 
						'blackdiagonal.gif',	'bluediagonal1.gif','mauvediagonal.gif',
						'blackdiagonalrev.png',	'bluediagonalrev.gif',
						'blackchecked.gif', 'bluechecked.gif', 'orangechecked.gif',
						'blackhorizontal.gif',
						'blackvertical.gif','magvertical.gif',
						'blackweave.gif','orangeweave.gif',
						'blackstar.gif',
						'bluecircle.gif',
						'bluediagonalblackcross.gif',	
						'bluezigzag.gif',
						'brownhorizontal.gif',
						'brownvertical.gif',
						'brownwash.gif',
						'bluetadpolesolid.gif',
						//'bluediagonalsolid.gif',
						//'bluehorizontalsolid.gif',
						'blueswampsolid.gif',
						
						//'brownwashsolid.gif',
						//'icefillsolid.gif',
						//'lakefillsolid.gif',
						//'rapidssolid.gif',
						//'reservoirfillsolid.gif',
						//'waterfallsolid.gif',
						//'waterstoragesolid.gif',
						

						//"blackcross.png", 
	                   //"blackdiagonal.png", 
	                  // "blackstar.png", 
	                  // "blackvertical.png", 
	                  // "bluecircle.png", 
					  //'bluefill.gif',
					  "wash.png", 
	                   "bluediagonal.png", 
	                  
	                   "bluehorizontal.png", 
	                  // "brownhorizontal.png", 
	                   //"brownvertical.png", 
	                   "filtrationcircle.png", 
	                   "filtrationfill.png", 
	                   "icefill.png",
						"bluefill.png", 
	                   "perenniallakefill.png", 
	                   "reservoirfill.png", 
	                   //"sewagefill.png", 
	                   //"sinkrise.png", 
	                   "spillway.png", 
	                   //"spring.png",
						   
	                   //"swamp.png", 
	                   
	                   "waterstorage.png"];
	
	
	// create the image picker floating Div
	checkRemoveObject('imagePicker');
	var imagePicker = document.createElement('div');
	imagePicker.style.position='absolute';
	imagePicker.style.top='20px';
	imagePicker.style.left='170px';
	imagePicker.style.width='300px'; 
	imagePicker.style.height='auto'; 
	//imagePicker.style.backgroundColor='#ECE9D8'; 
	//imagePicker.style.border='2px solid #0055E5'; 
	imagePicker.style.zIndex='6000'; 
	imagePicker.style.cursor='move';
	imagePicker.id = 'imagePicker';
	imagePicker.setAttribute("id", 'imagePicker');
	
	// create the banner div
	var pickerBanner = document.createElement('div');
	pickerBanner.className = 'popupDDrapeHeader';
	pickerBanner.style.backgroundImage='url(images/banner_300.gif)';
	pickerBanner.style.zIndex='5220';
	pickerBanner.id = 'appHolder2';
	pickerBanner.setAttribute("id", 'appHolder2');
	
	// create the numaps logo symbol image tag
		var symbolImg = document.createElement('img');
		symbolImg.src='images/logo_symbol_small.gif';
		symbolImg.style.position='absolute';
		symbolImg.style.top='7px'; 
		symbolImg.style.left='8px';
		pickerBanner.appendChild(symbolImg);
		
		// now add the title in the Banner
		var spanTag = document.createElement('span');
		spanTag.style.position='absolute';
		spanTag.style.top='4px';
		spanTag.style.left='34px';
		var bannerText = document.createTextNode('Image Picker');	
		spanTag.appendChild(bannerText);
		pickerBanner.appendChild(spanTag);
		
		// add the close button
		var symbolImg = document.createElement('img');
		symbolImg.src='images/close.gif';
		symbolImg.style.width='15px';
		symbolImg.style.cursor='pointer';
		symbolImg.style.position='absolute';
		symbolImg.style.top='4px'; 
		symbolImg.style.right='6px';
		bindEvent(symbolImg, 'click', shutDownIP, 'false');
		pickerBanner.appendChild(symbolImg);
	imagePicker.appendChild(pickerBanner);

	// create the pickerBody div
	var pickerBody = document.createElement('div');
	pickerBody.style.backgroundColor='#ECE9D8'; 
	pickerBody.style.border='2px solid #0000D6';
	pickerBody.style.top='22px';
	pickerBody.style.width='296px';
	pickerBody.style.height='auto'; 

		// create the image display table row
		var imageTable = document.createElement('table');
		imageTable.style.width = "100%";
		imageTable.setAttribute('border','1');
		var tableBody = document.createElement('tbody');
		
			// Build the image display table row and cell
			var tableHeadRow = document.createElement('tr');
				var imageSelect = document.createElement('td');
				imageSelect.id='imageDisp';
				imageSelect.setAttribute('id','imageDisp');
				imageSelect.style.margin = '5px';
				imageSelect.style.height = '30px';
				imageSelect.style.textAlign='center';
				imageSelect.style.fontSize='14px';
				imageSelect.style.fontWeight='bold';
				imageSelect.style.color='#000'; 
				imageSelect.style.backgroundColor='transparent';
				var cellText = document.createTextNode('Empty');
				imageSelect.appendChild(cellText);
			tableHeadRow.appendChild(imageSelect);
		tableBody.appendChild(tableHeadRow)
		imageTable.appendChild(tableBody);
		pickerBody.appendChild(imageTable);

		// create the new image grid table
		var gridTable = document.createElement('table');
		gridTable.id='imageGrid';
		gridTable.setAttribute('id','imageGrid');
		gridTable.style.width = "100%";
		gridTable.style.height = "auto";
		gridTable.setAttribute('border','1');
		var tableBody = document.createElement('tbody');
		
			var cols = 5;
			var num = areaFillSymbols.length; 
			var rows = parseInt(num/cols)+1;
			//alert('rows = '+rows+' cols = '+cols);
			//areaFillBase = "http://www.numaps.com.au/images/symbol_images/"; // set in gKey
			//alert (areaFillBase)
			
			// Build the image display grid
			var k = 0;
			for (var i=0; i<rows ; i++ )
			{
				var gridRow = document.createElement('tr');
				for (var j=0; j<cols ; j++ )
				{
					var gridCell = document.createElement('td');
					gridCell.style.height='30px';
						
						// insert an inner Div
						var gridDiv = document.createElement('div')
						var cellId = "img:"+k;
						gridDiv.id = cellId;
						gridDiv.setAttribute('id',cellId);
						gridDiv.style.border='1px solid gray';
						gridDiv.style.height='26px';
						
						gridDiv.style.margin='2px';
						if(areaFillSymbols[k] != '' || areaFillSymbols[k] != 'empty')
						{	gridDiv.style.backgroundImage ="url('"+areaFillBase+areaFillSymbols[k]+"')";	}
						
						bindEvent(gridDiv, 'click', updateEditor, 'false')
						bindEvent(gridDiv, 'mouseover', showImage, 'false')
						
						gridCell.appendChild(gridDiv)
					gridRow.appendChild(gridCell)
					
					if (k == num-1) 
					{
						break; break;
					}
					k++;
				}
				tableBody.appendChild(gridRow)
			}
			gridTable.appendChild(tableBody);
			pickerBody.appendChild(gridTable)
		imagePicker.appendChild(pickerBody);
		parentDiv.appendChild(imagePicker);
		//alert('appending now')
		Drag.init(pickerBanner, imagePicker);
		return;
		
}
function shutDownIP(evt)
{
	//var e_out = getThisId(evt)
	document.getElementById('imagePicker').style.display="none";
	Event.stop(evt);
}
function shutDownCP(evt)
{
	//var e_out = getThisId(evt)
	document.getElementById('colorPicker').style.display="none";
	Event.stop(evt);
}
function showImage(evt)
{
	var e_out = getThisId(evt);
	var elNo = e_out.split(":");
	var no = elNo[1]
		
	// change the image of the display cell
	//alert(areaFillBase+areaFillSymbols[no])
	document.getElementById('imageDisp').style.backgroundImage = "url('"+areaFillBase+areaFillSymbols[no]+"')";
	document.getElementById('imageDisp').firstChild.nodeValue = areaFillSymbols[no];

	Event.stop(evt);
}
function updateEditor(evt)
{
	var e_out = getThisId(evt);
	var elNo = e_out.split(":");
	var no = elNo[1];
	              	
	// change the image of the display cell
	document.getElementById('editPattern').style.backgroundImage = "url('"+areaFillBase+areaFillSymbols[no]+"')";
	fillPattern[currentRow] = areaFillBase+areaFillSymbols[no];

	// build the new edit legend symbol and rule name cells
	var Cell = "tdBox:"+currentRow;
	var Div = "div:"+currentRow;
	var Rule = "rule:"+currentRow;
	var Bord = "outDivId:"+currentRow;
	var parentObj = document.getElementById("row:"+currentRow);
	checkRemoveObject(Cell);
	checkRemoveObject(Rule);
	buildSymbolBox(parentObj, Cell, Div, Bord, Rule, currentRow)
	document.getElementById(Cell).className='selectedItem';
	document.getElementById(Rule).className='selectedItem';
	//document.getElementById(Cell).style.border='3px solid #FF0000';
	//document.getElementById(Rule).style.border='3px solid #FF0000';

	// close down the image selector Div
	document.getElementById('imagePicker').style.display='none';
	Event.stop(evt);
	
	return;
}
function getThisId(evt)
{
	var e_out;
	var ie_var = "srcElement";
	var moz_var = "target";
	var prop_id = "id";
	// "target" for Mozilla, Netscape, Firefox et al. ; "srcElement" for IE
	evt[moz_var] ? e_out = evt[moz_var][prop_id] : e_out = evt[ie_var][prop_id];
	Event.stop(evt);
	return e_out;
}
//------------------- color swatch manager ----------------------//
function buildColorPalette(parentDiv)
{
	// set up the color rows arrays
	//alert('opening color picker')
	var colorRow = new Array(17);
	colorRow[0] = "Title,Squential Classification Schemes";
	colorRow[1] = "67000D,A50F15,CB181D,EF3B2C,FB6A4A,FC9272,FCBBA1,FEE0D2,FFF5F0,7F2704,A63603,D94801,F16913,FD8D3C,FDAE6B,FDD0A2,FEE6CE,FFF5EB" ;
	colorRow[2] = "00441B,006D2C,238B45,41AB5D,74C476,A1D99B,C7E9C0,E5F5E0,F7FCF5,08306B,08519C,2171B5,4292C6,6BAED6,9ECAE1,C6DBEF,DEEBF7,F7FBFF";
	colorRow[3] = "3F007D,54278F,6A51A3,807DBA,9E9AC8,BBBDDC,DADAEB,EFEDF5,FCFBFD,000000,252525,525252,737373,969696,BDBDBD,D9D9D9,F0F0F0,FFFFFF";
	colorRow[4] = "00441B,006D2C,238B45,41AE76,66C2A4,99D8C9,CCECE6,E5F5F9,F7FCFD,084081,0868AC,2B8CBE,4EB3D3,7BCCC4,A8DDB5,CCEBC5,E0F3DB,F7FCF0";
	colorRow[5] = "023858,045A8D,0570B0,3690C0,74A9CF,A6BDDB,D0D1E6,ECE7F2,FFF7FB,4D004B,810F7C,88419D,8C6BB1,8C96C9,9EBCDA,BFD3E6,E0ECF4,F7FCFD";
	colorRow[6] = "49006A,7A0177,B0017E,DD3497,F768A1,FA9FB5,FCC5C0,FDE0DD,FFF7F3,67001F,980043,CE1256,E7298A,DF65B0,C994C7,DAB9DA,E7E1EF,F7F4F9";
	colorRow[7] = "004529,006837,238443,41AB5D,78C679,ADDD8E,D9F0A3,F7FCB9,FFFFE5,662506,993404,CC4C02,EC7014,FE9929,FEC44F,FEE391,FFF7BC,FFFFE5";
	colorRow[8] = "081D58,253494,225EA8,1D91C0,41B6C3,7FCDBB,C7E9B4,EDF8B0,FFFFD9,B00026,BD0026,E31A1C,FC4E2A,FD8D3C,FEB24C,FED976,FFEDA0,FFFFCC";
	colorRow[9]	= "Title,Qualitative Classification Schemes";
	colorRow[10] = "A6CEE3,1F77B4,B2DF8A,33A02C,FB9A99,E31A1C,FDBF6F,FF7F00,CAB2D6,E31A1C,377DB8,4DAF4A,984EA3,FF7F00,FFFF33,A65628,F781BF,999999"; 
	colorRow[11] = "FBB3AD,B2CCE2,CCEBC5,DECBE4,FED9A5,FFFFCC,E4D7BC,FDDAEC,F2F2F2,8DD3C7,FFFFBC,BEBADA,FB8072,80B1D3,FDB462,B3DE69,FCCDE4,D9D9D9";
	colorRow[12] = "Title,Diverging Classification Schemes";
	colorRow[13] = "D73027,F46D43,FDAE61,FEE08B,FFFFDF,D9EF8B,A6D96A,66DB63,1A9850,D73027,F46D43,FDAE61,FEE090,FFFFBF,E0F3F8,ABD9E9,74ADD1,4575B4";
	colorRow[14] = "B2182B,D6604D,F4A582,FDDBC7,FFFFFF,E0E0E0,BABABA,878787,4D4D4D,B35806,E08214,FDB863,F6E8C3,F7F7F7,D8DAEB,B2ADB2,8073AC,542788";
	colorRow[15] = "8C510A,BF812D,DFC27D,F6E8C3,F5F5F5,C7EAE5,80CDC1,35978F,01665E,762A83,9970AB,C2A5CF,E7D4E8,F7F7F7,D9F0D3,A8D8B7,5AAE61,1B7837";
	colorRow[16] = "B2182B,D6604D,F4A582,FDDBC7,F7F7F7,D1E5F0,92C5DE,4393C3,2166AC,C51B7D,DE77AE,F1B6DA,FDE0EF,F7F7F7,E6F5D0,B8E186,7FBC41,4D9221";
	colorRow[17] = "transparent,transparent,transparent,transparent,transparent,transparent,transparent,transparent,transparent,transparent,transparent,transparent,transparent,transparent,transparent,transparent,transparent,transparent";
/*	colorRow[17] = "Title,Random Classification Schemes";
	colorRow[18] = "330000,333300,336600,339900,33CC00,33FF00,66FF00,66CC00,669900,666600,663300,660000,FF0000,FF3300,FF6600,FF9900,FFCC00,FFFF00";
	colorRow[19] = "330033,333333,336633,339933,33CC33,33FF33,66FF33,66CC33,669933,666633,663333,660033,FF0033,FF3333,FF6633,FF9933,FFCC33,FFFF33"; 
	colorRow[20] = "330066,333366,336666,339966,33CC66,33FF66,66FF66,66CC66,669966,666666,663366,660066,FF0066,FF3366,FF6666,FF9966,FFCC66,FFFF66" ;
	colorRow[21] = "330099,333399,336699,339999,33CC99,33FF99,66FF99,66CC99,669999,666699,663399,660099,FF0099,FF3399,FF6699,FF9999,FFCC99,FFFF99";
	colorRow[22] = "3300CC,3333CC,3366CC,3399CC,33CCCC,33FFCC,66FFCC,66CCCC,6699CC,6666CC,6633CC,6600CC,FF00CC,FF33CC,FF66CC,FF99CC,FFCCCC,FFFFCC" ;
	colorRow[23] = "3300FF,3333FF,3366FF,3399FF,33CCFF,33FFFF,66FFFF,66CCFF,6699FF,6666FF,6633FF,6600FF,FF00FF,FF33FF,FF66FF,FF99FF,FFCCFF,FFFFFF" ;
	colorRow[24] = "0000FF,0033FF,0066FF,0099FF,00CCFF,00FFFF,99FFFF,99CCFF,9999FF,9966FF,9933FF,9900FF,CC00FF,CC33FF,CC66FF,CC99FF,CCCCFF,CCFFFF" ;
	colorRow[25] = "0000CC,0033CC,0066CC,0099CC,00CCCC,00FFCC,99FFCC,99CCCC,9999CC,9966CC,9933CC,9900CC,CC00CC,CC33CC,CC66CC,CC99CC,CCCCCC,CCFFCC" ;
	colorRow[26] = "000099,003399,006699,009999,00CC99,00FF99,99FF99,99CC99,999999,996699,993399,990099,CC0099,CC3399,CC6699,CC9999,CCCC99,CCFF99" ;
	colorRow[27] = "000066,003366,006666,009966,00CC66,00FF66,99FF66,99CC66,999966,996666,993366,990066,CC0066,CC3366,CC6666,CC9966,CCCC66,CCFF66" ;
	colorRow[28] = "000033,003333,006633,009933,00CC33,00FF33,99FF33,99CC33,999933,996633,993333,990033,CC0033,CC3333,CC6633,CC9933,CCCC33,CCFF33" ;
	colorRow[29] = "000000,003300,006600,009900,00CC00,00FF00,99FF00,99CC00,999900,996600,993300,990000,CC0000,CC3300,CC6600,CC9900,CCCC00,CCFF00" ;
	colorRow[30] = "Title,Grayscales Classification Schemes";
	colorRow[31] = "A1A1A1,B1B1B1,C1C1C1,D1D1D1,E1E1E1,F1F1F1,A3A3A3,B3B3B3,C3C3C3,D3D3D3,E3E3E3,F3F3F3,A5A5A5,B5B5B5,C5C5C5,D5D5D5,E5E5E5,F5F5F5" ;
	colorRow[32] = "A7A7A7,B7B7B7,C7C7C7,D7D7D7,E7E7E7,F7F7F7,A9A9A9,B9B9B9,C9C9C9,D9D9D9,E9E9E9,F9F9F9,AAAAAA,BABABA,CACACA,DADADA,EAEAEA,FAFAFA" ;
	colorRow[33] = "000000,111111,222222,333333,444444,555555,666666,777777,888888,999999,AAAAAA,BBBBBB,CCCCCC,DDDDDD,EEEEEE,FFFFFF,transparent,transparent"; 
*/	

	
	// build the dragging Color Picker Div
	checkRemoveObject('colorPicker');
	colorPicker = document.createElement('div');
	colorPicker.style.position='absolute';
	colorPicker.style.top='0px';
	colorPicker.style.left='220px';
	colorPicker.style.width='300px'; 
	colorPicker.style.height='auto'; 
	colorPicker.style.zIndex='6000'; 
	colorPicker.style.cursor='move';
	colorPicker.id = 'colorPicker';
	colorPicker.setAttribute("id", 'colorPicker');

	// create the banner div
	var pickerBanner = document.createElement('div');
	pickerBanner.className = 'popupDDrapeHeader';
	pickerBanner.style.backgroundImage='url(images/banner_300.gif)';
	pickerBanner.style.zIndex='5220';
	pickerBanner.id = 'appHolder3';
	pickerBanner.setAttribute("id", 'appHolder3');
	
	// create the numaps logo symbol image tag
		var symbolImg = document.createElement('img');
		symbolImg.src='images/logo_symbol_small.gif';
		symbolImg.style.position='absolute';
		symbolImg.style.top='7px'; 
		symbolImg.style.left='8px';
		pickerBanner.appendChild(symbolImg);
		
		// now add the title in the Banner
		var spanTag = document.createElement('span');
		spanTag.style.position='absolute';
		spanTag.style.top='4px';
		spanTag.style.left='34px';
		var bannerText = document.createTextNode('Colour Picker');	
		spanTag.appendChild(bannerText);
		pickerBanner.appendChild(spanTag);
		
		// add the close button
		var symbolImg = document.createElement('img');
		symbolImg.src='images/close.gif';
		symbolImg.style.width='15px';
		symbolImg.style.height='16px';
		symbolImg.style.cursor='pointer';
		symbolImg.style.position='absolute';
		symbolImg.style.top='4px'; 
		symbolImg.style.right='6px';
		bindEvent(symbolImg, 'click', shutDownCP, 'false');
		pickerBanner.appendChild(symbolImg);
	colorPicker.appendChild(pickerBanner);

	// create the pickerBody div
	var pickerBody = document.createElement('div');
	pickerBody.style.backgroundColor='#ECE9D8'; 
	pickerBody.style.border='2px solid #0000D6';
	pickerBody.style.top='22px';
	pickerBody.style.width='296px';
	pickerBody.style.height='auto';
    	
		// create the color display table
		var colorTable = document.createElement('table');
		colorTable.style.width = "100%";
		colorTable.setAttribute('border','1');
		var tableBody = document.createElement('tbody');
		
		// Build the color display table holding currently selected color
		var tableHeadRow = document.createElement('tr');
			var currentSelect = document.createElement('td');
			currentSelect.id='colorDisp';
			currentSelect.setAttribute('id','colorDisp');
			currentSelect.style.margin = '5px';
			currentSelect.style.height = '30px';
			currentSelect.style.width = '100%';
			currentSelect.style.textAlign='center';
			currentSelect.style.fontSize='14px';
			currentSelect.style.fontWeight='bold';
			currentSelect.style.color='#000'; 
			currentSelect.style.backgroundColor='transparent';
			var cellText = document.createTextNode('Empty');
			currentSelect.appendChild(cellText);
		tableHeadRow.appendChild(currentSelect);
		tableBody.appendChild(tableHeadRow)
		colorTable.appendChild(tableBody);
		pickerBody.appendChild(colorTable);
		colorPicker.appendChild(pickerBody);
					
		// create the new image grid table
		var gridTable = document.createElement('table');
		gridTable.id='colorGrid';
		gridTable.setAttribute('id','colorGrid');
		gridTable.style.width = "100%";
		gridTable.style.height = "auto";
		gridTable.style.borderCollapse = "collapse";
		gridTable.setAttribute('border','1');
		var tableBody = document.createElement('tbody');
		//tableBody.setAttribute('border','1');
		
		// Build the image display table
		for(var i=0; i<colorRow.length; i++)
		{
			// split the colors into array
			var rowOfColors = colorRow[i].split(",");
				//alert(rowOfColors[0])
			
			// Check for  title row
			if(rowOfColors[0] == 'Title')
			{
				if(i>0)
				{
					var tableRow = document.createElement('tr');
					//var colorSelect = document.createElement('td');
					//colorSelect.setAttribute('colspan','18');
					//colorSelect.colspan='18';
					tableRow.style.height='5px';
					tableRow.style.width='100%';
					tableRow.backgroundColor='transparent';
					//var cellText = document.createTextNode(rowOfColors[1]);
					//tableRow.appendChild(cellText);
					tableRow.style.color='#000';
					tableRow.style.fontSize='10px';
					tableRow.style.textAlign='center';
					tableRow.style.cursor='default';
					//tableRow.appendChild(colorSelect);
					tableBody.appendChild(tableRow);
				}
			}
			else
			{
				var tableRow = document.createElement('tr');
				for (var j=0; j<rowOfColors.length; j++)
				{
					var colorSelect = document.createElement('td');
					//if(i>13){alert("color = #"+rowOfColors[j])}
					colorSelect.style.width = '20px';
					colorSelect.style.height = '15px';
					colorSelect.style.borderCollapse = 'collapse';
					colorSelect.style.cursor ='pointer';
					//colorSelect.style.border='1px solid gray';
					colorSelect.id='color:'+i+':'+j;
					colorSelect.setAttribute('id','color:'+i+':'+j);
					colorSelect.title = rowOfColors[j];
					if(rowOfColors[j] == 'transparent')
					{ 
						colorSelect.style.borderTop='1px solid gray';
						colorSelect.style.borderleft='1px solid #ECE9D8';
						colorSelect.style.borderRight='1px solid #ECE9D8';
					}
					else
					{
						colorSelect.style.backgroundColor = "#"+rowOfColors[j]; // assume a hex number
						colorSelect.style.border='1px solid gray';
					} 				
					bindEvent(colorSelect, 'click', getColor, 'false');
					bindEvent(colorSelect, 'mouseover', colorsShow, 'false');
					tableRow.appendChild(colorSelect)
				}   
				//alert('row ' +i+ ' done')
				tableRow.style.border='1px solid gray';
				tableBody.appendChild(tableRow)
			}
		}
		gridTable.appendChild(tableBody);
		pickerBody.appendChild(gridTable)
	

	// now add the global check boxes if appropriate
	if (fillTargetId == 'fillTheme')
	{
		// create the new checkbox controls table
		var checkTable = document.createElement('table');
		checkTable.id='colorGrid';
		checkTable.setAttribute('id','colorGrid');
		checkTable.style.width = "100%";
		checkTable.style.height = "auto";
		checkTable.style.borderCollapse = "collapse";
		checkTable.setAttribute('border','0');
		checkTable.style.cursor='pointer';
		var tableBody = document.createElement('tbody');

			// create the row for the Line Style defaults
			var tableRow = document.createElement('tr');
				
				// create text table cell				
				var bordersOnOff = document.createElement('td');
				bordersOnOff.style.width = '250px';
				bordersOnOff.style.height = '15px';
				bordersOnOff.style.fontSize='10px';
				bordersOnOff.style.color='#000';
				//bordersOnOff.style.border='1px solid gray';

					// create input table cell
					var borderChkBox = document.createElement('input');
					borderChkBox.type='checkbox';
					borderChkBox.checked=false;
					borderChkBox.id='bordersOnOff';
					borderChkBox.style.backgroundColor='transparent';
					borderChkBox.setAttribute('id','bordersOnOff');
					bordersOnOff.appendChild(borderChkBox);
				
					var cellText = document.createTextNode('Default Borders (1px solid black)');
					bordersOnOff.appendChild(cellText);
				tableRow.appendChild(bordersOnOff);

			tableBody.appendChild(tableRow);

			// create the row for the minscale/maxscale defaults
			var tableRow = document.createElement('tr');
				
				// create text table cell				
				var minmaxOnOff = document.createElement('td');
				minmaxOnOff.style.width = '250px';
				minmaxOnOff.style.height = '15px';
				minmaxOnOff.style.fontSize='10px';
				minmaxOnOff.style.color='#000';

					// create checkbox element
					var ChkBox = document.createElement('input');
					ChkBox.type='checkbox';
					ChkBox.checked=false;
					ChkBox.style.backgroundColor='transparent';
					ChkBox.id='defaultScales';
					ChkBox.setAttribute('id','defaultScales');
					minmaxOnOff.appendChild(ChkBox);
				
					var cellText = document.createTextNode('Visibility Scale Range (up to 1:32M)');
					minmaxOnOff.appendChild(cellText);
				tableRow.appendChild(minmaxOnOff);
				
			tableBody.appendChild(tableRow);
			
		checkTable.appendChild(tableBody);
	pickerBody.appendChild(checkTable);
	}
	colorPicker.appendChild(pickerBody);
	parentDiv.appendChild(colorPicker);
	Drag.init(pickerBanner, colorPicker);
}

function colorsShow (evt)
{
	// first find out which cell is triggering this event
	var e_out = getThisId(evt);
	var hexCode = document.getElementById(e_out).title
	var colorDiv = document.getElementById('colorDisp');
	if (hexCode != 'null' && hexCode != 'transparent')
	{
		colorDiv.style.backgroundColor="#"+hexCode;
		colorDiv.firstChild.nodeValue="#"+hexCode+" "+e_out;
	}
	else
	{
		colorDiv.style.backgroundColor="transparent";
		colorDiv.firstChild.nodeValue=hexCode;
	}
	Event.stop(evt);
}


function getColor(evt)
{
	// first find out which cell is triggering this event
	var e_out = getThisId(evt);
	//alert(e_out)
	var hexCode = document.getElementById(e_out).title
	//alert ('hexCode = '+hexCode)	
	// set the appropriate id for that being updated
	var targetId=null;
	var terrColor = false;

	// set the new color as supplied from user for the rendering rule
	if (hexCode != 'null' && hexCode != 'transparent' && hexCode !='')
	{	var newHexColor = "#"+hexCode;	}
	else
	{	var newHexColor = 'transparent';	}
	//alert ('selected color = '+newHexColor)
	
	//alert('target id = '+fillTargetId)
	if (fillTargetId == 'fillPalette')	{ var targetId = 'editFill'}
	else if (fillTargetId == 'linePalette')	{var targetId = 'editLine'}
	// this is for Theme colour selection
	else if (fillTargetId == 'fillTheme')	
	{
		//alert ('determine Color Range');
		setThemeColours(e_out);
		// reset the color for next visit to the Palette
		document.getElementById('colorDisp').style.backgroundColor='#FFFFFF';
		document.getElementById('colorDisp').firstChild.nodeValue='#FFFFFF';
		document.getElementById('colorPicker').style.display='none';
		Event.stop(evt);
		return;	
	}
	// handle the territory cases
	else if(fillTargetId == 'terrFillColor')
	{
		document.getElementById(fillTargetId).style.backgroundColor = newHexColor;
		if(newHexColor != 'transparent'){territoryFillColor = newHexColor.replace(/#/,'');}
		else {territoryFillColor = newHexColor;}
		return;
	}
	else if (fillTargetId == 'terrLineColor')
	{	
		document.getElementById(fillTargetId).style.borderTopColor = newHexColor;
		if(newHexColor != 'transparent'){territoryStrokeColor = newHexColor.replace(/#/,'');}
		else {territoryStrokeColor = newHexColor;}
		return;
	}


	
	// update the Editing legend cell for fill color
	if (targetId == 'editFill')
	{	
		if(fillColor[currentRow] != newHexColor)
		{
			fillColor[currentRow] = newHexColor;	
			document.getElementById(targetId).style.backgroundColor = newHexColor;
			document.getElementById(targetId).value = hexCode;
			if (newHexColor != 'transparent' )
			{	
				// if fill colour selected and no opacity, force opacity to 1
				if(fillOpacity[currentRow] == 'null' || fillOpacity[currentRow] == ' ' || fillOpacity[currentRow] == '' || fillOpacity[currentRow] == null)
				{	fillOpacity[currentRow] = 1;	
					document.getElementById('fillOp').selectedIndex = 0;
				}
			}
			else // if fill color and pattern are null then make sure fill opacity is set to 0
			{
				fillOpacity[currentRow] = newHexColor;
				document.getElementById('fillOp').selectedIndex = 10;
				document.getElementById(targetId).style.backgroundColor='transparent';
			}
		}
	}
	
	// update the Editing legend cell for line colour
	if (targetId == 'editLine')
	{	
		if(lineColor[currentRow] != newHexColor)
		{
			document.getElementById(targetId).style.backgroundColor=newHexColor;
			document.getElementById(targetId).value = hexCode;
			lineColor[currentRow] = newHexColor;
			if (newHexColor != 'transparent')
			{	
				// if line colour selected and no line weight, force line weight to 1
				if(lineWeight[currentRow] == 'null' || lineWeight[currentRow] == ' ' || lineWeight[currentRow] == '' || lineWeight[currentRow] == null)
				{	lineWeight[currentRow] = 1;
					lineOpacity[currentRow] = 1;	
					document.getElementById('bordThick').selectedIndex = 1;
					document.getElementById('bordOp').selectedIndex = 0;
				}
			}
			else // if line color null then make sure line weight is set to 0
			{
				lineWeight[currentRow] = newHexColor;
				lineOpacity[currentRow] = 0
				document.getElementById('bordThick').selectedIndex = 0;
				document.getElementById('bordOp').selectedIndex = 10;
				document.getElementById(targetId).style.backgroundColor='transparent';
			}
		}
	}

	// build the new edit legend symbol and rule name cells	
	var Cell = "tdBox:"+currentRow;
	var Div = "div:"+currentRow;
	var Rule = "rule:"+currentRow;
	var Bord = "outDivId:"+currentRow;
	checkRemoveObject(Cell);
	checkRemoveObject(Rule);
	var parentObject = document.getElementById("row:"+currentRow);
	buildSymbolBox(parentObject, Cell, Div, Bord, Rule, currentRow);
	
	// highlight the new current Row 
	document.getElementById(Cell).className='selectedItem';
	document.getElementById(Rule).className='selectedItem';
	//document.getElementById(Cell).style.border='3px solid #FF0000';
	//document.getElementById(Rule).style.border='3px solid #FF0000';
	
	// reset the color for next visit to the Palette
	document.getElementById('colorDisp').style.backgroundColor='#FFFFFF';
	document.getElementById('colorDisp').firstChild.nodeValue='#FFFFFF';
	document.getElementById('colorPicker').style.display='none';

	Event.stop(evt);
}
function setThemeColours(colorId)
{
	//alert(sqlExp.length);
	var numRules = sqlExp.length;
	if (numRules > 9) 
	{	alert('Standard colour themes available for up to 9 classifications only'); return;}
	var parts = colorId.split(':');

	// --------- determine if the selected colour is in a Sequential scheme
	if (parts[1] >=1 && parts[1] <= 8)
	{
		var temp = parseInt(parts[2])+parseInt(numRules);
		// now check which half of the row was selected
		if (parts[2] >= 0 && parts[2] <= 8) 
		{
			
			// check to see if they want to start at back or front of range
			if(parts[2] >=0 && parts[2] <=4)
			{	
				var inc = 1;
				//  check to see if there is enough colours to start from this point
				if(temp > 8) {var ptr = 0;}
				else {var ptr = parts[2];}
			}
			else
			{	
				var inc = -1;
				//  check to see if there is enough colours to start from this point
				if(temp < 0) {var ptr = 0;}
				else {var ptr = parts[2];}
			}
			
		}
		else if(parts[2] >= 9 && parts[2] <= 17) 
		{
			// check to see if they want to start at back or front
			if(parts[2] >=9 && parts[2] <=13)
			{	
				var inc = 1;
				//  check to see if there is enough colours to start from this point
				if(temp > 17) {var ptr = 9;}
				else {var ptr = parts[2];}
			}
			else
			{	
				var inc = -1;
				//  check to see if there is enough colours to start from this point
				if(temp < 8) {var ptr = 17;}
				else {var ptr = parts[2];}
			}
		}
	}

	// --------- determine if the selected colour is in a Qualitative schemes
	else if (parts[1] >=10 && parts[1] <= 11) 
	{
		var inc=1;		
		// now check which half of the row was selected
		if (parts[2] >= 0 && parts[2] <= 8)
		{	
			var temp = parseInt(parts[2])+parseInt(numRules);

			//  check to see if there is enough colours to start from this point
			if(temp > 8) {var ptr = 0;}
			else {var ptr = parts[2];}
		}		
		else if (parts[2] >= 9 && parts[2] <= 17)	
		{	
		//  check to see if there is enough colours to start from this point
			if(temp > 17) {var ptr = 9;}
			else {var ptr = parts[2];}
		}
	}

	// ---------- determine if the selected colour is in a Diverging schemes
	else if (parts[1] >=13 && parts[1] <= 16)
	{
		var inc=1;
		// find out how many either side of centre
		var span = Math.floor(numRules*0.5);
		// now check which half of the row was selected
		if (parts[2] >= 0 && parts[2] <= 8)			{var ptr = parseInt(4-span);}
		else if (parts[2] >= 9 && parts[2] <= 17)	{var ptr = parseInt(13-span);}
	}
	
	// ----------- determine if the selected colour is outside themes selections
	else if(parts[1] >= 18) { alert('must pick from top three sections only'); return;}
		
	//alert('ptr = '+ptr);
		var borders = document.getElementById('bordersOnOff').checked;
		var minmax = document.getElementById('defaultScales').checked;
		// now update fillColor array with the selected range
		for (var i=currentRow ; i<numRules ; i++)
		{
			// construct a color ID
			var id = 'color:'+parts[1]+':'+ptr;
			ptr = parseInt(ptr)+parseInt(inc);
			//alert('color Id = '+id);
			var hexCode = document.getElementById(id).title;		
			fillColor[i] = "#"+hexCode;
			fillOpacity[i] = 1; 
			//fillPattern[i] = '';

			// if standard lines checked update borders to default
			if(borders)
			{
				lineWeight[i] = 1;
				lineColor[i] = '#000000';
				lineOpacity[i] = 1;
				lineDash[i] = null;
			}
			else
			{
				lineWeight[i] = 0;
				lineColor[i] = 'transparent';
				lineOpacity[i] = 0;
				lineDash[i] = null;
			}
			// if default min/max scales selected update
			if(minmax)
			{
				ruleMinScale[i] = 1;
				ruleMaxScale[i] = 30000000;
			}

			// build the new edit legend symbol and rule name cells	
			var Cell = "tdBox:"+i;
			var Div = "div:"+i;
			var Rule = "rule:"+i;
			var Bord = "outDivId:"+i;
			checkRemoveObject(Cell);
			checkRemoveObject(Rule);
			var parentObject = document.getElementById("row:"+i);
			buildSymbolBox(parentObject, Cell, Div, Bord, Rule, i)
			//alert('row ' +i+ ' done')
		}
		// make current row active again
		var Cell = "tdBox:"+currentRow;
		var Rule = "rule:"+currentRow;
		document.getElementById(Cell).className='selectedItem';
		document.getElementById(Rule).className='selectedItem';
		//document.getElementById(Cell).style.border='3px solid #FF0000';
		//document.getElementById(Rule).style.border='3px solid #FF0000';

		// now finish off by updating render rules for selected row
		updateRenderRules(currentRow);
		
		
}