var zoom = 19;
MapDisplayer = {};

//Maps displayer
MapDisplayer.Map = function(markerJson, maphtmlContainer, sideBarhtmlContainer) {
	/*if (!markerJson || !htmlContainer) {
		console.error("Map needs parameters : markerJson and htmlContainer");
		return undefined;
	}*/
	
	if (!this._initialized) {
		//JSON.parse(markerJson);		
		this._initialized = true;
		this.markers = markerJson;
		  // Create the map 
	    // No need to specify zoom and center as we fit the map further down.
		this.map = new google.maps.Map(document.getElementById(maphtmlContainer), {
			mapTypeId: google.maps.MapTypeId.ROADMAP,
			streetViewControl: false
	    });
		this.sideBarhtmlContainer = sideBarhtmlContainer;
		this.sideBarhtml = document.getElementById(this.sideBarhtmlContainer);
	}
	return this;
}

MapDisplayer.Map.prototype.draw = function() {
	markers = this.markers;
	var localizationElement = document.createElement("table");

	// Create the markers ad infowindows.
    for (index in markers) {
    	var tr = document.createElement("tr");
    	var td = document.createElement("td");
    	td.appendChild(this._createMarker(markers[index]));
    	tr.appendChild(td);
    	localizationElement.appendChild(tr);	
    }
	this.sideBarhtml.appendChild(localizationElement);
    // Zoom and center the map to fit the markers
    // This logic could be conbined with the marker creation.
    // Just keeping it separate for code clarity.
    var bounds = new google.maps.LatLngBounds();
    for (index in markers) {
      var data = markers[index];
      bounds.extend(new google.maps.LatLng(data.lat, data.lng));
    }
    this.map.fitBounds(bounds);
}

MapDisplayer.Map.prototype._createMarker = function(data) {
	 // Create the marker
    var marker = new google.maps.Marker({
      position: new google.maps.LatLng(data.lat, data.lng),
      map: this.map,
      title: data.name
    });
  
    // Create the infowindow with two DIV placeholders
    // One for a text string, the other for the StreetView panorama.
    var content = document.createElement("DIV");
    var title = document.createElement("DIV");
    title.innerHTML = data.html;
    content.appendChild(title);
    var streetview = document.createElement("DIV");
    streetview.style.width = "200px";
    streetview.style.height = "200px";
    content.appendChild(streetview);
    var infowindow = new google.maps.InfoWindow({
      content: content
    });

    // Open the infowindow on marker click
    google.maps.event.addListener(marker, "click", function() {
      infowindow.open(this.map, marker);
    });
  
    // Handle the DOM ready event to create the StreetView panorama
    // as it can only be created once the DIV inside the infowindow is loaded in the DOM.
    google.maps.event.addListenerOnce(infowindow, "domready", function() {
      var panorama = new google.maps.StreetViewPanorama(streetview, {
          navigationControl: false,
          enableCloseButton: false,
          addressControl: false,
          linksControl: false,
          visible: true,
          position: marker.getPosition()
      });
    });
    
    var a = document.createElement("a");
	a.href = "#";
	a.marker = marker;
	a.onclick = function() {
		infowindow.setContent(content); 
		infowindow.open(marker.map, marker); 
	};
	
	a.appendChild(document.createTextNode(data.label));
	return a;
}