function mostraPonto(coords,texto)
{
    var legenda       = document.getElementById("legenda");
    var arrCoords     = coords.split(","); 
    var left          = parseInt(arrCoords[0])+20;
    var top 	      = parseInt(arrCoords[1])+5;	
    legenda.style.left= left;
    legenda.style.top = top;

    
    legenda.innerHTML = texto;
    legenda.style.display = 'block';
}

function escondePonto()
{
	var legenda      = document.getElementById("legenda");
	legenda.style.display = 'none';
}

function mostraMapa()
{
	var mapa      = document.getElementById("mapa_pontos");
	var divPontos = document.getElementById("listaPontos");
	
	var htmlTemp  = '';
	var nomePonto = '';
	var nomeGrupo = '';
	var i=0;
		
	for(i=0;i<mapa.areas.length;i++)
	{
		nomePonto = mapa.areas[i].attributes.name.value;
		mouseOver = "javascript:mostraPonto('"+mapa.areas[i].coords+"','" + nomePonto + "')";
		if (nomeGrupo==mapa.areas[i].attributes.grupo.value)	
			htmlTemp=""
		else
			{
			htmlTemp="<h3>&raquo; "+ mapa.areas[i].attributes.grupo.value +"</h3>";
			nomeGrupo=mapa.areas[i].attributes.grupo.value;
			}
			
		htmlTemp += '<a href='                     +  mapa.areas[i].href + 
			    ' onmouseover="'               +  mouseOver          + 
			    '" onmouseout=escondePonto()>' + nomePonto           + 
			    '</a><br>';
		
		divPontos.innerHTML += htmlTemp;

	}
}