/***********************************************/
	  /*Esta função é chamada quando a página é carregada*/
	  /***********************************************/
      function iniciaMapa() {
	    if (GBrowserIsCompatible()) {
			handleResize();
			var centerLatitude = 40.358025, centerLongitude = -8.449614, nivelZoom= 12;//Nível de zoom inicial (vai de 0 a 17);
			var centroMealhada=new google.maps.LatLng(centerLatitude,centerLongitude);//Coordenadas para o centro do Concelho de Mealhada.coordenadas do centro da janela
			var tipoMapa=G_NORMAL_MAP;//Exibe o mapa em modo normal. Tipos de Mapa: G_NORMAL_MAP, G_SATELITE_MAP e G_HYBRID_MAP
        
			mapObj = new google.maps.Map2(document.getElementById("mapa"));
			mapObj.setCenter(centroMealhada, nivelZoom);
			mapObj.setMapType(tipoMapa);
			mapObj.addControl(new GLargeMapControl())//adiciona o control de zoom e pan;
			mapObj.addControl(new GMapTypeControl());//adiciona os controlos de selecção do tipo de mapa
			mapObj.enableScrollWheelZoom();
			
			var ovsize = new GSize(100,100);//adiciona mapa pequeno de enquadramento
			var ov = new GOverviewMapControl(ovsize);
			mapObj.addControl(ov);
			
			
			//carrega o xml
			GDownloadUrl("dados/4maravilhas.xml", 
			  function(data, responseCode) {
				var xml = GXml.parse(data);
				var markers = xml.documentElement.getElementsByTagName("marker"); //Ler lista de pontos
				
				var markerIcon = new GIcon();// Create a base icon for all of our markers that specifies the// shadow, icon dimensions, etc.
				//markerIcon.shadow = "http://www.google.com/mapfiles/shadow50.png";
				markerIcon.iconSize = new GSize(20, 30);//imagem 600*920
				//markerIcon.shadowSize = new GSize(37, 56);
				markerIcon.iconAnchor = new GPoint(10, 34);
				markerIcon.infoWindowAnchor = new GPoint(8, 2);
				//markerIcon.infoShadowAnchor = new GPoint(50, 25);		  
				for (var i = 0; i <markers.length; i++) {
					var point = new GLatLng(
								parseFloat(markers[i].getAttribute("Lat")),
								parseFloat(markers[i].getAttribute("Long")));
					
					//markerIcon.image = "img/icon4.png";
					var htmlimg=getHttmlImg(markers[i]);
					var dados = { title: markers[i].getAttribute("Nome"), icon: markerIcon}; //Dados
					var html= createHTML(markers[i],htmlimg);
					
					//document.getElementById('count').innerHTML = "<b>Concorrentes aos Selos das 4 marvilhas: "+markers.length+"</b>"; //Publicar contagem
					//"<b>"+markers[i].getAttribute("tit")+" - \t\tDistância: "+ Math.round(point.distanceFrom(centroMealhada)/1000)+ "km";
					
					
					
					
					var marker = new GMarker(point,dados);
					
					var handler = MarkerClickHandler(mapObj,marker,point,html);
					createEventMarker(mapObj,marker,handler,markerIcon);
					
					var listItem = document.createElement('li');
					listItem.innerHTML = '<a href="">' + markers[i].getAttribute("Nome") + '</a>';
					listItem.getElementsByTagName('a')[0].onclick = handler;
			
					switch (markers[i].getAttribute("Actividade")){
						case "assador":
							document.getElementById('assador').appendChild(listItem);
							break;
						case "bares":
							document.getElementById('bares').appendChild(listItem);
							break;
						case "hiper":
							document.getElementById('hiper').appendChild(listItem);
							break;
						case "padaria":
							document.getElementById('padaria').appendChild(listItem);
							break;
						case "prodagua":
							document.getElementById('prodagua').appendChild(listItem);
							break;
						case "prodvinho":
							document.getElementById('prodvinho').appendChild(listItem);
							break;
						case "restaurantes":
							document.getElementById('restaurantes').appendChild(listItem);
							break;
						default:
							document.getElementById('sidebar-list').appendChild(listItem);
					}
					
					
					mapObj.addOverlay(marker); //Criar marker*/
					marker.setImage('img/icon4.png');

				}
			});
		}
	  }
	
	  /***********************************************/
	  /*Esta função é chamada para registar os eventos*/
	  /***********************************************/	
	  function createEventMarker(mapObj,marker,handler,markerIcon) {

		GEvent.addListener(marker,'click',handler);
		
		GEvent.addListener(marker, "mouseover", function() {
			marker.setImage('img/icon4s.png');
		});

		GEvent.addListener(marker, "mouseout", function() {
			marker.setImage('img/icon4.png');
		});

		GEvent.addListener(mapObj, "extinfowindowbeforeclose", function() {
			//mapObj.returnToSavedPosition();
			marker.setImage('img/icon4.png');

		});
		
        return marker;
      }
	  /***************************************************************/
	  /*Esta função é chamada para tratar o evento do click nos icons*/
	  /***************************************************************/	
	  function MarkerClickHandler(mapObj,marker,point,html){ 
		return function() {
				mapObj.closeExtInfoWindow();
				mapObj.savePosition()
				var zoomactual=mapObj.getZoom();
				if (zoomactual<15)			
				    mapObj.setCenter(point,15);
				else
				   mapObj.setCenter(point,zoomactual);
				marker.openExtInfoWindow(
					mapObj,
					"maravilhas",
					html,
					{
						beakOffset: 3
					}
				);
			return false;
		};
	  }
	  
	  /************************************************************************/
	  /*  Esta função é chamada para criar o Htm necessário para a  janela de informação	*/
	  /************************************************************************/	
	  function createHTML(markers,htmlimg)
	  {
		var html="<br /><div class=\"titulo\"><b>"+ markers.getAttribute("Nome")+"</b></div><div class=\"descr\"><br />"+markers.getAttribute("Descr")+"<br />";
		if (markers.getAttribute("Folgas")!="" && markers.getAttribute("Folgas")!="NULL")
			html=html+"<br /><b>Encerramento: </b>"+markers.getAttribute("Folgas");
		html=html+"<br /><b>Contactos:</b>";
		html=html+"<div class=\"contacto\"><b>Morada:</b> "+markers.getAttribute("MoradaNome")+"<div class=\"morada\">"+markers.getAttribute("MoradaRua")+"<br />"+markers.getAttribute("CodPostal")+" "+markers.getAttribute("Localidade")+"</div>";
		if (markers.getAttribute("Telefone")!="" && markers.getAttribute("Telefone")!="NULL")
			html=html+"<b>Telefone:</b> "+markers.getAttribute("Telefone")+"&nbsp&nbsp&nbsp&nbsp";	
		if (markers.getAttribute("Telemovel")!="" && markers.getAttribute("Telemovel")!="NULL")
			html=html+"<b>Telemovel</b>: "+markers.getAttribute("Telemovel");
		if (markers.getAttribute("Fax")!="" && markers.getAttribute("Fax")!="NULL")
			html=html+"<br /><b>Fax:</b> "+markers.getAttribute("Fax");
		if (markers.getAttribute("Email")!="" && markers.getAttribute("Email")!="NULL")
			html=html+'<br /><b>Email: </b><a href="mailto:'+markers.getAttribute("Email")+'">'+markers.getAttribute("Email")+'</a>';		
		if (markers.getAttribute("Web")!="" && markers.getAttribute("Web")!="NULL")
			html=html+'<br /><b>Web: </b><a href="http://'+markers.getAttribute("Web")+'"target="_blank">'+markers.getAttribute("Web")+'</a>';
		html=html+"</div>";
		html=html+"<br /><b>GPS [WGS84]:</b><br /><div class=\"gps\"><b>Lat: </b>"+markers.getAttribute("Lat")+"<br /><b>Long: </b>"+markers.getAttribute("Long")+"</div>";
		html=html+"<br /><br /><b>Selos:</b> "+htmlimg+"</div>";
		return html;
	  }
	  /*****************************************************************/
	  /*Esta função é chamada para criar o Htm necessário para carregar os selos*/
	  /*****************************************************************/		  
	  function getHttmlImg(markers)
	  {
		var htmlimg="";
		if (markers.getAttribute("Agua")==1)
		{
			agua="img/iconagua.png";
			htmlimg=htmlimg+"<img src=\""+agua+"\" title=\"Água\" align=\"top\">";
		}
		if (markers.getAttribute("Pao")==1)
		{
			pao="img/iconpao.png";
			htmlimg=htmlimg+"<img src=\""+pao+"\" title=\"Pão\" align=\"top\">";
		}
		if (markers.getAttribute("Vinho")==1)
		{
			vinho="img/iconvinho.png";
			htmlimg=htmlimg+"<img src=\""+vinho+"\" title=\"Vinho\" align=\"top\">";
		}
		if (markers.getAttribute("Leitao")==1)
		{
			leitao="img/iconleitao.png";
			htmlimg=htmlimg+"<img src=\""+leitao+"\" title=\"Leitão\" align=\"top\">";
		}	  
		return htmlimg;
	  }
	  
	  function windowHeight() {
		// Standard browsers (Mozilla, Safari, etc.)
		if (self.innerHeight) {
			return self.innerHeight;
		}
		// IE 6
		if (document.documentElement && document.documentElement.clientHeight) {
			return document.documentElement.clientHeight;
		}
		// IE 5
		if (document.body) {
			return document.body.clientHeight;
		}
		// Just in case. 
		return 0;
	  };
	  
	  function handleResize() {
	    //alert("Altura da janela =" + windowHeight());
		var height = windowHeight()-120;
		//alert("Altura da janela -220 =" + height);
	    document.getElementById('sidebar').style.height = height + 'px';
		document.getElementById('content').style.height = height + 'px'; 
	  };