
	function createIcon(EventManager, src,eventTrigger,mapTitle) {
		var newIcon = document.createElement('img');
		newIcon.setAttribute('src', src);
		newIcon.style.verticalAlign = 'middle';
		newIcon.onclick = function () {
			EventManager.triggerEvent(eventTrigger, mapTitle);
		}
		return newIcon;
	}
	

function VisibleLayers(EventManager) {
	var ListParent;
	var LayersList = document.createElement('ul');
	LayersList.className = 'VisibleLayers';

	var LayerIcons = new Array();
	var LayerIconObjs = new Array();


	this.clearActiveLayerSelection = function() {
		var radios = LayersList.getElementsByTagName('input');
		for(var i = 0; i < radios.length; i++) {
			radios[i].checked = false;
		/*	radios[i].parentNode.style.border = 'none';*/
			if(radios[i].parentNode.className == 'SelectedLayer') {
				radios[i].parentNode.className = 'ActiveLayer';
			}
		}
	}

	this.addLayer = function(mapXMLObj) {
		var title = mapXMLObj.getAttribute('title');

		var ListItem = document.createElement('li');
		ListItem.id = 'LayersList-'+title;

		var alreadyHere = document.getElementById(ListItem.id);
		if(alreadyHere) return false;

		var ActivateLayer = document.createElement('input');
		ActivateLayer.type = 'radio';
		ActivateLayer.name = 'activateLayer';
		ActivateLayer.disabled = true;
		ActivateLayer.id = 'DataLayer-'+title;
		ActivateLayer.onclick = function() {
			EventManager.triggerEvent('changetool', title);
			EventManager.triggerEvent('activatelayer', title);
			/** Old Selection is Cleared by the Event Manager **/
			if(!this.disabled) {
				this.checked = true;
				/*this.parentNode.style.border = 'solid 1px black';*/
				this.parentNode.className = 'SelectedLayer';
			}
		}

		var LegendImg = document.createElement('img');
		LegendImg.id = 'LayerLegend-'+title;
		//LegendImg.src = BLANK_IMAGE;
		LegendImg.style.visibility = 'hidden';

		var LayerIcon = document.createElement('img');
		if(mapXMLObj.getAttribute('icon')) {
			LayerIcons[title] = mapXMLObj.getAttribute('icon');
		} else {
			LayerIcons[title] = MAP_DEFAULT_ICON;
		}
		LayerIcon.src = LayerIcons[title];
		LayerIcon.id = 'LayerIcon-'+title;
		LayerIconObjs[title] = LayerIcon;

		ListItem.appendChild(ActivateLayer);
		ListItem.appendChild(LayerIcon);
		ListItem.appendChild(document.createTextNode(title));
		if(mapXMLObj.getElementsByTagName('meta')[0] && mapXMLObj.getElementsByTagName('meta')[0].firstChild.nodeValue) {
			var metaIcon = document.createElement('img');
			metaIcon.src = META_DEFAULT_ICON;
			metaIcon.onclick = function () {
				window.open(mapXMLObj.getElementsByTagName('meta')[0].firstChild.nodeValue);
			}
			ListItem.appendChild(metaIcon);
		}
		if(mapXMLObj.getElementsByTagName('help')[0] && mapXMLObj.getElementsByTagName('help')[0].firstChild.nodeValue) {
			var helpIcon = document.createElement('img');
			helpIcon.src = HELP_DEFAULT_ICON;
			helpIcon.onclick = function () {
				window.open(mapXMLObj.getElementsByTagName('help')[0].firstChild.nodeValue);
			}
			ListItem.appendChild(helpIcon);
		}

		ListItem.appendChild(document.createElement('br'));

		var upButton = createIcon(EventManager, UP_ICON,'movelayerup', title);
		var downButton = createIcon(EventManager, DOWN_ICON,'movelayerdown',title);
		var fadeButton = createIcon(EventManager, FADE_ICON,'fadelayer',title);
		var unfadeButton = createIcon(EventManager, UNFADE_ICON,'unfadelayer',title);
		var removeButton = createIcon(EventManager, REMOVE_ICON,'removelayer',title);
		var refreshButton = createIcon(EventManager, RELOAD_ICON,'refreshlayer', title);

		ListItem.appendChild(upButton);
		ListItem.appendChild(downButton);
		ListItem.appendChild(fadeButton);
		ListItem.appendChild(unfadeButton);
		ListItem.appendChild(refreshButton);
		if(!mapXMLObj.getAttribute('locked') || !mapXMLObj.getAttribute('locked').match(/true/i)) {
			ListItem.appendChild(removeButton);
		}
		ListItem.appendChild(document.createElement('br'));
		ListItem.appendChild(LegendImg);

		LayersList.appendChild(ListItem);	
		if(parseInt(mapXMLObj.getAttribute('zindex')) == -1 || !LayersList.firstChild) {
			LayersList.appendChild(ListItem);
		} else {
			LayersList.insertBefore(ListItem, LayersList.firstChild);
		}

	}

	this.activateLayer = function(mapTitle) {
		var opt = document.getElementById('DataLayer-'+mapTitle);
		if(opt) {
			opt.disabled = false;
			opt.parentNode.className = 'ActiveLayer';
		}
	}

	this.disableLayers = function() {
		var opts = LayersList.getElementsByTagName('input');
		for(var i = 0; i < opts.length; i++) {
			if(opts[i].type == 'radio') {
				opts[i].disabled = true;
				opts[i].checked = false;
				opts[i].parentNode.className = '';
			}
		}
	}

	this.removeLayer = function(mapTitle) {
		var ListItem = document.getElementById('LayersList-'+mapTitle);
		LayersList.removeChild(ListItem);
	}

	this.showLegend = function(xmlObj) {
		var title = xmlObj.getAttribute('id');
		var src = xmlObj.getAttribute('legend');
		

		// This is hack for IE, it does not properly resize the image upon
		// loading.
		var tempImage = new Image();
		tempImage.onload = function () {
			var LegendImg = document.getElementById('LayerLegend-'+title);
			if(!LegendImg) {
				return false;
			}
			LegendImg.style.visibility = 'visible';
			LegendImg.style.width = 'auto';
			LegendImg.style.height = 'auto';
			LegendImg.src = src;
			LegendImg.style.width = this.width+'px';
			LegendImg.style.height = this.height+'px';
		}
		tempImage.src=  src;
	}
	
	this.moveLayerUp = function(title) {
		var listItem = document.getElementById('LayersList-'+title);
		if(listItem && listItem.previousSibling) {
			LayersList.insertBefore(listItem, listItem.previousSibling);
		}
	}

	this.moveLayerDown = function(title) {
		var listItem = document.getElementById('LayersList-'+title);
		if(listItem && listItem.nextSibling) {
			LayersList.insertBefore(listItem.nextSibling, listItem);
		}
	}

	this.setAllRefreshIcon = function () {
		for(var title in LayerIcons) {
			LayerIconObjs[title].src = MAP_LOADING_ICON;
		}
	}
	
	this.setRefreshIcon = function(title) {
		var icon = document.getElementById('LayerIcon-'+title);
		if(icon) {
			icon.src = MAP_LOADING_ICON;
		}
	}
	
	this.setLoadedIcon = function(title) {
		var icon = document.getElementById('LayerIcon-'+title);
		if(icon) {
			icon.src = LayerIcons[title];
		}
	}



	
	this.setParent = function(parent) {
		ListParent = parent;
		ListParent.appendChild(LayersList);
	}
}
