var barr = new Array() ;
var lastI;
var map;
function initialize() {
  var myOptions = {
    zoom: 5,
    center: new google.maps.LatLng(47, 2),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  map = new google.maps.Map(document.getElementById("map_canvas"),
                                myOptions);

  setMarkers(map);
  
}

function getXhr(){
	var xhr = null; 
	if(window.XMLHttpRequest) // Firefox et autres
	   xhr = new XMLHttpRequest(); 
	else if(window.ActiveXObject){ // Internet Explorer 
	   try {
				xhr = new ActiveXObject("Msxml2.XMLHTTP");
			} catch (e) {
				xhr = new ActiveXObject("Microsoft.XMLHTTP");
			}
	}
	else { // XMLHttpRequest non supporté par le navigateur 
	   alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); 
	   xhr = false; 
	} 
	return xhr;
}

/**
 * Data for the markers consisting of a name, a LatLng and a zIndex for
 * the order in which these markers should display on top of each
 * other.
 */
 


function setMarkers(map) {
  // Add markers to the map

  // Marker sizes are expressed as a Size of X,Y
  // where the origin of the image (0,0) is located
  // in the top left of the image.

  // Origins, anchor positions and coordinates of the marker
  // increase in the X direction to the right and in
  // the Y direction down.
  var image = new google.maps.MarkerImage('http://www.solaren.fr/images/google_map/installation_solaire.gif',
      // This marker is 20 pixels wide by 32 pixels tall.
      new google.maps.Size(25, 14),
      // The origin for this image is 0,0.
      new google.maps.Point(0,0),
      // The anchor for this image is the base of the flagpole at 0,32.
      new google.maps.Point(0, 14));
  var shadow = new google.maps.MarkerImage('http://www.solaren.fr/images/google_map/installation_solaire.gif',
      // The shadow image is larger in the horizontal dimension
      // while the position and offset are the same as for the main image.
      new google.maps.Size(0, 24),
      new google.maps.Point(0,0),
      new google.maps.Point(0, 24));
      // Shapes define the clickable region of the icon.
      // The type defines an HTML <area> element 'poly' which
      // traces out a polygon as a series of X,Y points. The final
      // coordinate closes the poly by connecting to the first
      // coordinate.
  var shape = {
      coord: [1, 1, 1, 20, 18, 20, 18 , 1],
      type: 'poly'
  };
  
  var xhr = getXhr();
	xhr.onreadystatechange = function(){
		if(xhr.readyState == 4 ){
			leselect = xhr.responseText;
			var installations = eval(leselect);		
			

			for (var i = 0; i < installations.length; i++) 
			{
				var agence = installations[i];
				
				var myLatLng = new google.maps.LatLng(agence[1], agence[2]);
				
				
				
				var marker = new google.maps.Marker({
     				position: myLatLng,
					map: map,
					shadow: shadow,
					icon: image,
					shape: shape,
					title: agence[0],
					zIndex: agence[3]
					
				});
				barr[i] = new Object ;
				
				barr[i].marker = marker ;
				barr[i].html = agence[4];
				
				barr[i].infoWindow = new google.maps.InfoWindow({
					content: barr[i].html
				});

				barr[i].listener = makeClosure(i, barr[i].marker) ;
				
							
			}
			
			
		}
	}
	
	xhr.open("POST","includes/installation_solaire/listeInstallations.php",true);
	xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
	xhr.send("");
  
  
  
  
  
}

function makeClosure( i, marker )
  {
   var listener = google.maps.event.addListener(marker, 'click', function() {
    openInfoWindow(i) ;		// <-- this is the key to making it work
   });
   return listener ;
  }

 function openInfoWindow(i)
  {
   if ( typeof(lastI) == 'number' && typeof(barr[lastI].infoWindow) == 'object' )
   { 
    barr[lastI].infoWindow.close() ;
   }
   lastI = i ;    
   barr[i].infoWindow.open(map,barr[i].marker) ;    
  }