// JavaScript Document
	document.getElementById("map").innerText = "Caricamento...";
	document.getElementById("side_bar").innerHTML = "<font color='#FFFFFF'>Caricamento...</font>";
	document.getElementById("loading").style.background = "#FF0000";
	document.getElementById("loading").innerText = "Caricamento...";
    if (GBrowserIsCompatible()) {
      // this variable will collect the html which will eventualkly be placed in the side_bar
      var side_bar_html = "";
      var gmarkers = [];
      var htmls = [];
	  var canali = [];
	  var showCin = true;
	  var showMus = true;
	  var showTea = true;
	  var showAlt = true;
      var i = 0;

      // A function to create the marker and set up the event window
      function createMarker(point,name,html,idEv,canale) {
		   //Create iconvar 
		icon = new GIcon();
		var cssClass
		
		switch ( canale )
        {
          case "CINEMA":
            icon.image = "http://eventi.ozo.it/images/gcin.gif";
            cssClass = "elencodxCin";
            break;
          case "MUSICA":
            icon.image = "http://eventi.ozo.it/images/gmus.gif";
            cssClass = "elencodxMus";
            break;
	      case "TEATRO":
            icon.image = "http://eventi.ozo.it/images/gtea.gif";
            cssClass = "elencodxTea";
            break;
	      case "ALTRO":
            icon.image = "http://eventi.ozo.it/images/galt.gif";
            cssClass = "elencodxAlt";
            break;

          default:
           //
        }

		//icon.shadow = "http://labs.google.com/ridefinder/images/mm_20_shadow.png";
		icon.iconSize = new GSize(24, 32);
		//icon.shadowSize = new GSize(22, 20);
		icon.iconAnchor = new GPoint(24, 32);
		icon.infoWindowAnchor = new GPoint(10, 1);
        var marker = new GMarker(point,icon);
        GEvent.addListener(marker, "click", function() {
          marker.openInfoWindowHtml(html);
        });
        // save the info we need to use later for the side_bar
        gmarkers[i] = marker;
        htmls[i] = html;
		canali[i] = canale;
        
        side_bar_html += "<div id='" + i + "' onclick=javascript:myclick(" + i + ");"
        side_bar_html += "Carica('CARICA','id=" + idEv + "'); "
        side_bar_html += "class='" + cssClass + "'>" + name.substr(0,60) + "</div>";

        i++;
        return marker;
      }

	
      // This function picks up the click and opens the corresponding info window
      function myclick(i) {
	  	document.getElementById("scheda").innerText = "Caricamento..."
        gmarkers[i].openInfoWindowHtml(htmls[i]);
      }


      // create the map
      var map = new GMap2(document.getElementById("map"));
      map.addControl(new GLargeMapControl());
      map.addControl(new GMapTypeControl());
      map.setCenter(new GLatLng(42.27387,12.700000), 6);
      map.setMapType(G_HYBRID_MAP);


      // Read the data from example.xml
      var request = GXmlHttp.create();
      request.open("GET", "genxmlmaponfly.aspx", true);
      request.onreadystatechange = function() {
        if (request.readyState == 4) {
          var xmlDoc = request.responseXML;
          // obtain the array of markers and loop through it
          var markers = xmlDoc.documentElement.getElementsByTagName("EV_eventi");
          
         
          for (var i = 0; i < markers.length; i++) {
            // obtain the attribues of each marker
            var lat = parseFloat(markers[i].getElementsByTagName("Lat")[0].firstChild.nodeValue);
            var lng = parseFloat(markers[i].getElementsByTagName("Long")[0].firstChild.nodeValue);  
              
            var point = new GLatLng(lat,lng);
			
			var label = markers[i].getElementsByTagName("data_evento1")[0].firstChild.nodeValue + " - ";		
			label += markers[i].getElementsByTagName("citta")[0].firstChild.nodeValue
			label += " - " + markers[i].getElementsByTagName("titolo")[0].firstChild.nodeValue;
			
			var fonte = markers[i].getElementsByTagName("fonte")[0].firstChild.nodeValue;
			var idEv = markers[i].getElementsByTagName("id")[0].firstChild.nodeValue;
			var canale = markers[i].getElementsByTagName("canale")[0].firstChild.nodeValue;
			var citta = markers[i].getElementsByTagName("citta")[0].firstChild.nodeValue;
			var data = markers[i].getElementsByTagName("data_evento1")[0].firstChild.nodeValue;
			var titolo = markers[i].getElementsByTagName("titolo")[0].firstChild.nodeValue;
			var descrizione = markers[i].getElementsByTagName("descrizione")[0].firstChild.nodeValue;
			
			if(descrizione.length > 69) {
			    descrizione += "..."
			}
			
			var fontStyle = "<font style='font-family:Verdana, Arial, Helvetica, sans-serif;font-size:10px'>"        
			var fontStyleDett = "<font style='font-family:Verdana, Arial, Helvetica, sans-serif;"
			fontStyleDett += "font-size:10px;color:#038BE3'>" 			
			
			var html = "<div style='width: 270px' >" + fontStyle + citta + ", " + data + " - [" + canale + "]"
			html += "<br><b>" + titolo + "</b><br><br>" + descrizione + "<br><br>";
            html += "Fonte: " + fonte + "</font></div>"
            html += "<div style='cursor: hand' onClick=Carica('CARICA','id=" + idEv + "') align='right'><br>"
			html += fontStyleDett + "<b>Dettagli Evento</b></font></div>"
			
			if(markers[i].getElementsByTagName("Lat")[0].firstChild.nodeValue!=0&&markers[i].getElementsByTagName("Long")[0].firstChild.nodeValue!=0) {
		        var marker = createMarker(point,label,html,idEv,canale);
                map.addOverlay(marker);     
			}
          }

          document.getElementById("side_bar").innerHTML = side_bar_html;
          document.getElementById("loading").style.background = "#FFFFFF";
	      document.getElementById("loading").innerText = ""
        }
      }
      request.send(null);
 
// create the crosshair icon, which will indicate where we are on the minimap
      // Lets not bother with a shadow
      var Icon = new GIcon();
      Icon.image = "../images/xhair.png";
      Icon.iconSize = new GSize(21, 21);
      Icon.shadowSize = new GSize(0,0);
      Icon.iconAnchor = new GPoint(11, 11);
      Icon.infoWindowAnchor = new GPoint(11, 11);
      Icon.infoShadowAnchor = new GPoint(11, 11);

      // Create the minimap
      var minimap = new GMap2(document.getElementById("minimap"));
      minimap.setCenter(new GLatLng(42.27387,12.700000), 5);
      
      // Add the crosshair marker at the centre of teh minimap and keep a reference to it
      
      var xhair = new GMarker(minimap.getCenter(), Icon);            
      minimap.addOverlay(xhair);
      
      
      // ====== Handle the Map movements ======
      
      // Variables that log whether we are currently causing the maps to be moved
    
      var map_moving = 0;
      var minimap_moving = 0;

    // This function handles what happens when the main map moves
      // If we arent moving it (i.e. if the user is moving it) move the minimap to match
      // and reposition the crosshair back to the centre
      function Move(){
        minimap_moving = true;
	if (map_moving == false) {
	  minimap.setCenter(map.getCenter());
	  xhair.setPoint(map.getCenter());
	  xhair.redraw(true);
	}
	minimap_moving = false;
      }
      // This function handles what happens when the mini map moves
      // If we arent moving it (i.e. if the user is moving it) move the main map to match
      // and reposition the crosshair back to the centre
      function MMove(){
        map_moving = true;
	if (minimap_moving == false) {
	  map.setCenter(minimap.getCenter());
	  xhair.setPoint(minimap.getCenter());
	  xhair.redraw(true);
	}
	map_moving = false;
      }
      
      // Listen for when the user moves either map
      GEvent.addListener(map, 'move', Move);
      GEvent.addListener(minimap, 'moveend', MMove);
}
    else {
      alert("Sorry, the Google Maps API is not compatible with this browser");
    }


function SelCanali(pFiltro) {
	var hidemark = true;
	
	switch ( pFiltro )
	{
	  case "CINEMA":
		if(showCin) {
			hidemark = true;
			showCin = false;
		}
		else {
			hidemark = false;
			showCin = true;
		}
		break;
	  case "MUSICA":
		if(showMus) {
			hidemark = true;
			showMus = false;
		}
		else {
			hidemark = false;
			showMus = true;
		}
		break;
	  case "TEATRO":
		if(showTea) {
			hidemark = true;
			showTea = false;
		}
		else {
			hidemark = false;
			showTea = true;
		}
		break;
	  case "ALTRO":
		if(showAlt) {
			hidemark = true;
			showAlt = false;
		}
		else {
			hidemark = false;
			showAlt = true;
		}
		break;

	  default:
	   //
	}


	for(c=0;c < canali.length;c++) {
		if(canali[c]==pFiltro) {
			if(hidemark){
				//map.removeOverlay(gmarkers[c]);
				gmarkers[c].hide();
			}
			else {
				gmarkers[c].show();
			}
		}
	}
}

function Carica (pAzione,e) {
	
	var strUrl
	
	strUrl = "http://eventi.ozo.it/map/gendettmap.aspx?" + e
	
	objHTTP = getXMLHttp();
	
	objHTTP.open("GET", strUrl, true);

	objHTTP.onreadystatechange = function() {elaboraRisposta(pAzione,objHTTP)}

	objHTTP.send(null)
	
}

function elaboraRisposta(pAzione,pobjHTTP) {
	if (pobjHTTP.readyState == 4) {
		var strResponse = pobjHTTP.responseText;
		switch (pAzione) { 
	
			case "CARICA": 
				document.getElementById("scheda").innerHTML = strResponse
			break; 
			
			default: 
			//
	
	   }
	}
}

function getXMLHttp() {
var xmlhttp = null;
if (window.ActiveXObject) {
  if (navigator.userAgent.toLowerCase().indexOf("msie 5") != -1) {
  xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
  } else {
    xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
  }
}
if (!xmlhttp && typeof(XMLHttpRequest) != 'undefined') {
  xmlhttp = new XMLHttpRequest()
}
return xmlhttp
}