var centerLatitude = 45.486555;
var centerLongitude = -73.588737;
var startZoom = 13;

var icon = new GIcon();
icon.image = "/images/icon-map.png";
icon.iconSize = new GSize(37, 37);
icon.iconAnchor = new GPoint(20, 20);
icon.infoWindowAnchor = new GPoint(20, 20);

var side_bar_html = "";
var gmarkers = [];
var htmls = [];


// Routine si le visiteur a choisi «Voir sur la carte»

var query = location.pathname;
var pairs = query.split("/");

if (pairs[2] !== undefined) {
	var centerLatitude = pairs[3];
	var centerLongitude = pairs[4];
	var startZoom = 18;
}


function init() {
	var map = new GMap2(document.getElementById("map"));
	map.addControl(new GLargeMapControl());
	map.addControl(new GMapTypeControl());
	map.setCenter(new GLatLng(centerLatitude, centerLongitude), startZoom);
   
    for (var i = 0; i < markers.length; i++) {
	
	  var mls_code = markers[i].mls_code;
      
	  description = '<img src="/photos/' + mls_code + '/' + markers[i].photo + '-icon.jpg" width=85 height=64 />' 
			+ '<p>' + markers[i].addressInfoWindow + '</p>' 
			+ '<p>' + markers[i].price + '</p>'
			+ '<p><a href="' + markers[i].url + '">' + btnDescription + '</a></p>';

      var point = new GLatLng(markers[i].latitude, markers[i].longitude);

      var marker = createMarker(point, mls_code, markers[i].photo, markers[i].address, markers[i].price, markers[i].url, description);

      map.addOverlay(marker);
    }
	
	
	
    // put the assembled side_bar_html contents into the side_bar div
    document.getElementById("side_bar").innerHTML = side_bar_html;
  	
	// On ouvre le phylactère 
	if (pairs[2] !== undefined) {
		var currentMarker = pairs[2];
		gmarkers[currentMarker].openInfoWindowHtml(htmls[currentMarker]);
	}
}


function createMarker(point, mls_code, photo, address, price, url, html) {
	
  var marker = new GMarker(point, icon);

  GEvent.addListener(marker, "click", function() { marker.openInfoWindowHtml(html); });

  // Permet le rollover sur les icônes dans la carte
  GEvent.addListener(marker, "mouseover", function() { marker.setImage("/images/icon-map-on.png"); });
  GEvent.addListener(marker, "mouseout", function() { marker.setImage("/images/icon-map.png"); });


  gmarkers[mls_code] = marker;
  htmls[mls_code] = html;

  // add a line to the side_bar html, with click, mouseover and mouseout event handlers
  side_bar_html += 
	  '<div id="' + mls_code + '" class="propertyListMap">'
	+ '<a href="javascript:myclick(' + mls_code + ')" onmouseover="gmarkers['+mls_code+'].setImage(\'/images/icon-map-on.png\')" onmouseout="gmarkers['+mls_code+'].setImage(\'/images/icon-map.png\')"><img src="/photos/' + mls_code + '/' + photo + '-thumbnail.jpg" /><\/a>'
	+ '<h3>' + address + '<\/h3>'
	+ '<p class="lineForm">&nbsp;<\/p>'
	+ '<h4>' + price + '<\/h4>'
	+ '<p class="lineForm">&nbsp;<\/p>'
	+ '<h5>MLS: ' + mls_code + '<\/h5>'
	+ '<p class="btnFiche"><a href="' + url + '">' + btnDetails + '</a></p>'
	+ '<\/div>'
	+ '<br>';

  i++;
  return marker;
}



// This function picks up the click and opens the corresponding info window
function myclick(i) {
  gmarkers[i].openInfoWindowHtml(htmls[i]);
}




	
					
					
					
			
					
					
				









window.onload = init;