// JavaScript Document

function IToc()
{
	this.plusNodeImage;
	this.minusNodeImage;
	this.childNodeImage;
	this.endChildNodeImage;
	this.noNode;
	
	this.legendImagePath; // each legend image must match the layerId (ie: 22.gif);
	this.cssClass;
	this.addGroup = addGroup;
	this.addMultiImage = addMultiImage;
	this.multiImage = new Array();
	this.drawLegend = drawLegend;
	this.drawLegendUpdateButton = drawLegendUpdateButton
	
	this.doGrouping = doGrouping;
	this.groups = new Array()
	this.tocHTML = ''; 
	this.clear = clear;
	this.map;
	

}


//clear everything from the legend.
// Usually used for ITheme
function clear(legendLayer)
{
	this.tocHTML ='';
	document.getElementById(legendLayer).innerHTML = '';
	
}


//****************************************************
// Function  build and design the legend.
//****************************************************
function addGroup()
{
	
	this.groups.push(arguments);
	
	var groupName 	= arguments[0]
	var displayMode = arguments[1]
	var displayHTML = 'display:none';
	var nodeImage = this.plusNodeImage;
	var buildHTML= '';
	
	//determin the prefered display mode.
	if (displayMode)
	{ 
		displayHTML = 'display:block';	
		nodeImage = this.minusNodeImage;
	}
	
	buildHTML +='<table class='+ this.cssClass +' width="250" border="0" cellspacing="0" cellpadding="0" style="padding-left:9px">\n';
	buildHTML +='<tr><tb style="height:8px"></tb></tr>\n';
	buildHTML +='<tr>\n';
	buildHTML +='<td width="15">';
	if (groupName == null)
	{
		displayHTML = '';
	}
	if (groupName != null)
	{
	buildHTML +='<img id="'+this.groups.length+'" src="'+nodeImage+'" onClick="doGrouping(this,\''+this.plusNodeImage+'\',\''+this.minusNodeImage+'\')" />';
	}
	buildHTML +='</td>\n';
	
	buildHTML +='<td width="255"><b>';
	if (groupName != null)
	{
		buildHTML +=groupName;
	}
	buildHTML +='</b></td></tr>\n';
	buildHTML +='<tr><td colspan="2">\n';	
	buildHTML +='<table id="'+this.groups.length+'_table" class='+ this.cssClass +' width="240" border="0" cellspacing="0" cellpadding="" style="'+displayHTML+'">\n';
	
	//ignors the first 2 elements
	for (var i =2; i <= arguments.length - 1; i++)
	{
		layerObject = findLayerObjectById(groupName,arguments[i])
		layerName 	= layerObject.name
		layerVisible= layerObject.visible;
		
		checkedHTML = '';
		if (layerVisible == "true") { checkedHTML = ' checked="checked" ';  }
		
		//add the proper image to the nodes.
		if ( i == arguments.length - 1) { childNodeImage = this.endChildNodeImage; }
		else { childNodeImage = this.childNodeImage; }
		
		buildHTML +='<tr>\n';
		buildHTML +='<td width="10"><img src="'+childNodeImage+'" /></td>\n';
		
		buildHTML +='<td width="20"><input id="'+layerObject.id+'" type="checkbox"  value="checkbox"' +checkedHTML+ ' onClick="autoToggleLayers(this)"/></td>\n';
		buildHTML +='<td width="25"><div align="center">';
		
		isMultiImage = false;
		multiImageHTML ='';
		for (var j in this.multiImage)
		{
			if (parseInt(this.multiImage[j].layerId) ==parseInt(layerObject.id))
			{
				isMultiImage = true;
				for (var t in this.multiImage[j].imageUrl)
				{
				multiImageHTML +='<tr><td style="background-image:url('+iconPath+'/noNode.gif); background-repeat:repeat-y"></td><td></td><td></td><td><img src="'+this.multiImage[j].imageUrl[t]+'"></td></tr>';
				}
			}	
		}
	
		if (!isMultiImage)
		{
			buildHTML +='<img src="images/legendImages/'+layerObject.id+'.gif" />';
		}
		
		buildHTML +='</div></td>\n';
		buildHTML +='<td width="175">';
		buildHTML +='<span id="TOC_LayerId_'+layerObject.id+'">'+layerName+'</span>';
		buildHTML +='</td>\n';
		buildHTML +='</tr>\n';
		
		
		
		//add a milti Image.
		if (multiImageHTML != '')
		{
			buildHTML +=multiImageHTML;
				
		}
		
		
		
		
		//add a renderer.
		var renderHTML = '';
		for (var ii  in this.map.renderers)
		{
			
			if (this.map.renderers[ii].layerId == layerObject.id)
			{
				var name = this.map.renderers[ii].name;
				var id = this.map.renderers[ii].layerId;
				if (renderHTML == '')
				{	var cc = this.map.renderers[ii].layerId;
					renderHTML +='<select name="select" style="width:130px" class="renderMenu" onChange="doRender(this.value,\''+id+'\')">';
				}
 			 	renderHTML +='<option value="'+ii+'" >'+name+'</option>';
			}
			
		}
		if (renderHTML != '')
			{
				renderHTML +='<option value="default" selected>--Default--</option>';
				renderHTML +='</select>';
			}
		
		if (renderHTML != '')
		{
			buildHTML +='<tr><td style="background-image:url('+iconPath+'/noNode.gif); background-repeat:repeat-y"></td><td colspan="3">';
			buildHTML += renderHTML;
			buildHTML +='<br><span id="renderLegend_'+layerObject.id+'"></span>';
			buildHTML +='</td></tr>\n';
		}
		

	}
	
	buildHTML +='</table>\n';
	buildHTML +='</td></tr>\n';
	buildHTML +='</table>\n';
	

	
	this.tocHTML += buildHTML;
	
}




function addMultiImage()
{
	var tocMultiImage = new IMultiImage();
	tocMultiImage.layerId = arguments[0];
	for (var i =1; i <= arguments.length - 1; i++)
	{
		var row = arguments[i].split('|');
		tocMultiImage.imageUrl.push(legendImagePath+"/"+row[0])
		tocMultiImage.imageLabel.push(row[1])
	}
	this.multiImage.push(tocMultiImage);
}

function IMultiImage()
{
	this.layerId;
	this.imageUrl = new Array();
	this.imageLabel = new Array();
}



function doRender(value,id)
{
	if (value !="default")
	{
		checkTheBox(id); 
		myMap.falseAllRendering(id,false); 
		myMap.renderers[value].changeRenderer(id);  
		myBuilder.build(id)
	}
	else
	{
		document.getElementById("renderLegend_"+id).innerHTML = "";
		myMap.falseAllRendering(id); 
		myMap.getMap();
	}
		
		
}


function drawLegend(drawingLayer) 
{
	var theLegendDiv = document.getElementById(drawingLayer);
	theLegendDiv.innerHTML += this.tocHTML;
}


function drawLegendUpdateButton(drawingLayer)
{
	var theButtonDiv = document.getElementById(drawingLayer);
	var buttonHTML = '<center><input id="layerUpdateButton" type=button onClick="toggleLayers();" value="Update Map"></center>';
	theButtonDiv.innerHTML += buttonHTML;
}



//function that will turn on and off layers as the user clicks on the checkboxes.
function autoToggleLayers(checkbox) 
{
	
	layerArrayIndex = findLayerIndexById(checkbox.id)
	
	//Add the layers to the RESPONSE.LAYER Object 
	if (checkbox.checked == true)
	{
		RESPONSE.LAYER[layerArrayIndex].visible = "true";
	}
	if (checkbox.checked == false)
	{ 
		RESPONSE.LAYER[layerArrayIndex].visible = "false";	
	}
	
	updateButton = document.getElementById("layerUpdateButton");
	if (updateButton.disabled) { toggleLayers(); }
}

function checkTheBox(id)
{
	var chkbox =document.getElementById(id);
	chkbox.checked = true;
}


function toggleLayers() 
{
	//(to be on the safe side I added this in);
	myMap.fullextent = false;
	//get a new map
	myMap.getMap();	
}



//****************************************************
// Function that will show or hide the grouping .
//****************************************************
function doGrouping(that,pImage,mImage)
{
	groupTable = document.getElementById(that.id+"_table");
	currentDisplay = groupTable.style.display;
	nowDisplay = null;
	
	if (currentDisplay == "none")  
	{ 
		nowDisplay = ""; 
		that.src= mImage;
	}
	else 
	{ 
		nowDisplay = "none"; 
		that.src= pImage;
	}
		
	//set the display.
	groupTable.style.display = nowDisplay;
}



function toggelLayerNameColor(sf)
{
	
	for (x in RESPONSE.LAYER)
	{
		//alert('TOC_LayerId_'+RESPONSE.LAYER[x].id);
		var layer = document.getElementById('TOC_LayerId_'+RESPONSE.LAYER[x].id);
		
		if (layer != null)
		{
			if (RESPONSE.LAYER[x].maxscale !=undefined)
			{
			if (parseFloat(sf) > parseFloat(RESPONSE.LAYER[x].maxscale))
				layer.style.color="#999";
			}
			if (RESPONSE.LAYER[x].maxscale !=undefined)
			{
			if (parseFloat(sf) < parseFloat(RESPONSE.LAYER[x].maxscale))
				layer.style.color="#000"; 
			}
		}
	}
	
	return null;
}


//****************************************************
// Small Function that will find the layer BY Id
//returns a layer Object.
//****************************************************
function findLayerObjectById(groupName,layerId)
{
	var layerObject = null
	for (x in RESPONSE.LAYER)
	{
		if (RESPONSE.LAYER[x].id == layerId) 
		{
			layerObject = RESPONSE.LAYER[x]
			return layerObject;
		}
	}
	
	if (layerObject == null) 
	{
		alert("Cant find layer ID " +layerId+ " in the Group " + groupName);
	}
	return null;
}







//****************************************************
// Small Function that will find the layer BY Id
//returns a layer Object.
//****************************************************
function findLayerIndexById(layerId)
{
	layerId = layerId;
	
	var layerObject = null
	for (x in RESPONSE.LAYER)
	{
		if (RESPONSE.LAYER[x].id == layerId) 
		{
			return x;
		}
	}
	
	if (layerObject == null) 
	{
		alert("Cant find layer ID " +layerId);
	}
	return null;
}