// === ****************************************************************************************** ===
// === * Descrizione: Questo Javascript raccoglie alcune delle migliori funzioni per realizzare * ===				
// === * mappe di Google semplicemente togliendo il commento ad alcune righe, copiandone altre o* ===
// === * aggiundo url ad altre immagini è possibile aggiungere icone e marker personalizzati,   * ===  
// === * minimappe all'interno o all'esterno della mappa principale o un bordo rettangolare     * ===
// === * centrato con dimensione e colore a piacere.                                            * === 
// === ****************************************************************************************** ===
// === * Versione: 1.0                                                                          * ===
// === * Autore: Gabriele Rocca                                                                 * ===
// === * URI Autore: http://etech.top-ix.org                                                    * ===
// === * Mail Autore: gabriele.rocca@top-ix.org                                                 * ===
// === ****************************************************************************************** ===


if (GBrowserIsCompatible()) {
	var map;
	var mgr;
	var icons = {};

	// === Crea la struttura base delle icone ===
	var baseIcon = new GIcon();
	baseIcon.iconSize=new GSize(32,32);
	baseIcon.shadowSize=new GSize(76,35);
	baseIcon.iconAnchor=new GPoint(16,32);
	baseIcon.infoWindowAnchor=new GPoint(16,0);
          
	// === Crea un array di GIcons() ===
	var gicons = [];

	// === Crea l'icona home (TOPIX) ===
	gicons["home"] = new GIcon(baseIcon, "http://maps.google.com/mapfiles/kml/pal3/icon56.png", null, "http://maps.google.com/mapfiles/kml/pal3/icon56s.png");

	// === Crea l'icona conferenza (Usata per la conferenza) ===
	gicons["conferenza"] = new GIcon(baseIcon, "http://maps.google.com/mapfiles/kml/pal3/icon21.png", null, "http://maps.google.com/mapfiles/kml/pal3/icon21s.png");


	// Funzione che crea il Marker
	function createMarker(point, description , icontype) {
		var marker = new GMarker(point, gicons[icontype]);
		GEvent.addListener(marker, "click", function() {
			marker.openInfoWindowHtml(description);
			});
	            	return marker;
	}

	// Funzione che crea la mappa
	function load () {

		// Ottiene l'elemento della pagina chiamato "map" (il DIV) 
		// e crea la mappa utilizzandolo come contenitore.
		map = new GMap2(document.getElementById("map"));

		// === Crea un array di marker ===
		var vectormarker = [];
	
		// Aggiunge dei controlli per lo zoom e lo spostamento 
		map.addControl(new GLargeMapControl());
		map.addControl(new GMapTypeControl());
		// abilita lo zoom con il doppio click
		map.enableDoubleClickZoom();

		//Aggiunge la piccola mappa all'interno della grande
		map.addControl(new GOverviewMapControl());
	
		// Centra la mappa su Torino, con uno zoom di 17 
		map.setCenter(new GLatLng(45.068150,7.688050), 17,G_HYBRID_MAP);

		// Aggiunge il Marker Topix
		point=new GLatLng(45.068150,7.688050);
		icontype="home";
		//marker = new GMarker(point, gicons[icontype]);   
		//map.addOverlay(marker);
		description = "<div style=\"width: 200px; height: 180px;\"><div style=\"width:150px;\"><a href=\"http://www.top-ix.org\"><img src=\"http://wrap.top-ix.org/wp-content/uploads/2007/04/topix_logo.png\" align=\"left\" style=\"width:150px;\"></a></div><div style=\"width: 190px;\"><b>Consorzio Top-IX</b><br>Via Bogino 9, 10123 Torino, Italia</div></div>";
		vectormarker ['0'] = createMarker( point, description, icontype);
		map.addOverlay(vectormarker ['0']);    

		// Aggiunge il Marker della Conferenza
		point=new GLatLng(45.068500,7.687690);
		icontype="conferenza";
		description = "<b>Conferenza</b>";
		vectormarker ['1'] = createMarker( point, description, icontype);
		map.addOverlay(vectormarker [1]); 

 

		// Righe di comando che richiamano alcune funzioni al fondo di questo javascript 
		// per mostrare bordo rettangolare centrato con dimensione e colore a piacere 
		// Display a rectangle in the center of the map at about a quarter of
		// the size of the main map
		//var bounds = map.getBounds();
		//var southWest = bounds.getSouthWest();
		//var northEast = bounds.getNorthEast();
		//var lngDelta = (northEast.lng() - southWest.lng()) / 7;
		//var latDelta = (northEast.lat() - southWest.lat()) / 3;
		//var rectBounds = new GLatLngBounds(
		//new GLatLng(southWest.lat() + latDelta, southWest.lng() + lngDelta),
		//new GLatLng(northEast.lat() - latDelta, northEast.lng() - lngDelta));
		//map.addOverlay(new Rectangle(rectBounds));


		// Serie di funzioni per creare una minimappa (esterna) che è contenuta nel DIV "minimap"
		// ed è centrata rispetto quella piu grande con uno zoom minore 
		// 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/mirino.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(45.068994,7.599363), 4);
      
		// 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);
		//  Fine delle funzioni per creare una minimappa esterna
	}



	// Serie di funzioni per creare un bordo rettangolare centrato con dimensione e colore a piacere .
	function Rectangle(bounds, opt_weight, opt_color) {
		this.bounds_ = bounds;
		this.weight_ = opt_weight || 2;
		this.color_ = opt_color || "#888888";
	}

	Rectangle.prototype = new GOverlay();

	// Creates the DIV representing this rectangle.
	Rectangle.prototype.initialize = function(map) {
		// Create the DIV representing our rectangle
		var div = document.createElement("div");
		div.style.border = this.weight_ + "px solid " + this.color_;
		div.style.position = "absolute";

		// Our rectangle is flat against the map, so we add our selves to the
		// MAP_PANE pane, which is at the same z-index as the map itself (i.e.,
		// below the marker shadows)
		map.getPane(G_MAP_MAP_PANE).appendChild(div);

		this.map_ = map;
		this.div_ = div;
	}

	// Remove the main DIV from the map pane
	Rectangle.prototype.remove = function() {
		this.div_.parentNode.removeChild(this.div_);
	}

	// Copy our data to a new Rectangle
	Rectangle.prototype.copy = function() {
		return new Rectangle(this.bounds_, this.weight_, this.color_, this.backgroundColor_, this.opacity_);
	}

	// Redraw the rectangle based on the current projection and zoom level
	Rectangle.prototype.redraw = function(force) {
		// We only need to redraw if the coordinate system has changed
		if (!force) return;

		// Calculate the DIV coordinates of two opposite corners of our bounds to
		// get the size and position of our rectangle
		var c1 = this.map_.fromLatLngToDivPixel(this.bounds_.getSouthWest());
		var c2 = this.map_.fromLatLngToDivPixel(this.bounds_.getNorthEast());

		// Now position our DIV based on the DIV coordinates of our bounds
		this.div_.style.width = Math.abs(c2.x - c1.x) + "px";
		this.div_.style.height = Math.abs(c2.y - c1.y) + "px";
		this.div_.style.left = (Math.min(c2.x, c1.x) - this.weight_) + "px";
		this.div_.style.top = (Math.min(c2.y, c1.y) - this.weight_) + "px";
	}

} else {
	alert("Sorry, the Google Maps API is not compatible with this browser");
}