var xml_file = "mapa/xml.php";
var refresh = 300; // In seconds
var cpoint = new GPoint  (0.460938,-1.406109);
var contador=0;
var hqpoint;
var baseicon;
var map;
var map;
var latLngStr;
var lon_text=51;
var gmarkers = [];
var htmls = [];
var index1 = 0;
var sidebar_html = "| ";

function intDrawMap ()
{
  baseicon = new GIcon ();
  baseicon.shadow = "mapa/images/ombra.png";
  baseicon.iconSize = new GSize (18, 30);
  baseicon.shadowSize = new GSize (33, 30);
  baseicon.iconAnchor = new GPoint (9, 30);
  baseicon.infoWindowAnchor = new GPoint (5, 1);

  // Center the map
  map = new GMap (document.getElementById ("map"),[G_MAP_TYPE, G_SATELLITE_TYPE, G_HYBRID_TYPE]);
  map.addControl (new GLargeMapControl ());
  map.addControl (new GMapTypeControl ());
  map.centerAndZoom (cpoint, 15);

  intLoad ();
}

// Creates a marker whose info window displays the given number
function intCreateMarker (point, pais, id, msg)
{
  var icon = new GIcon (baseicon);
  icon.image = "mapa/images/icona.png";

  var marker = new GMarker (point, icon);
 
  // Show this marker's index in the info window when it is clicked

  gmarkers[index1] = marker;
  htmls[index1] = msg;
  // add a line to the sidebar html
  sidebar_html += '<a href="javascript:myclick(' + index1 +', '+id + ')">' + pais + '</a> | ';
  index1++;
  GEvent.addListener (marker, "click", function ()
		      {
		      marker.openInfoWindowHtml (msg);
		      }
  );

  return marker;
}

function intLoad ()
{
  // DownintLoad the data in map.xml and intLoad it on the map.
  var request = GXmlHttp.create ();
  var time;
  
  request.open ("GET", xml_file, true);
  request.onreadystatechange = function ()
  {
    if (request.readyState == 4)
      {
	//map.clearOverlays ();
	var xmlDoc = request.responseXML;
	var markers = xmlDoc.documentElement.getElementsByTagName ("marker");
	for (var i = 0; i < markers.length; i++)
	  {
		var pais = markers[i].getAttribute ("pais");
		
	        var point = new GPoint (parseFloat (markers[i].getAttribute ("lon")),
			  parseFloat (markers[i].getAttribute ("lat")));
		
		
	      	var msg = "<div class=\"int_mapa\" style=\"white-space:nowrap;\">";
		msg = msg + "<b>"+ pais +"</b> <br><hr /> ";
		msg = msg + "<ul>"
		var i0 = i;
		while((i0 < markers.length) && (markers[i].getAttribute("id")== markers[i0].getAttribute("id") ))
		{
  			msg = msg + "<li><a href=\""+ markers[i0].getAttribute("vincle") +"\" > " + markers[i0].getAttribute("coop") + "</a></li>";
			i0=i0+1;
		}
		msg = msg + "</ul><br/>"
  		msg = msg + "</div>";
	    	var marker = intCreateMarker (point, pais, markers[i].getAttribute("id"), msg);
	    	map.addOverlay (marker);	
	    	var topElement = marker.iconImage;
        	if (marker.transparentIcon) {topElement = marker.transparentIcon;}
        	if (marker.imageMap) {topElement = marker.imageMap;}
	        topElement.setAttribute( "title" , "Clicka per veure els productors de "+pais );
		i=i0 -1;
		
	  }
	document.getElementById("sidebar").innerHTML = sidebar_html;
      }
  }
  
  //hqmarker.openInfoWindowHtml(hqhtml);
//put the assembled sidebar_html contents into the sidebar div

  request.send (null);
}

function cz (p, z)
{
  map.centerAndZoom (p, z);
}

function myclick(i,id) {
        gmarkers[i].openInfoWindowHtml(htmls[i]);
	document.getElementById("pais2").value=id;
      }