var map;
var icon0;
var newpoints = new Array();
var directions;
var side_bar_html = "";
var gmarkers = [];
var i = 0;      
 
function addLoadEvent(func) { 
	var oldonload = window.onload; 
	if (typeof window.onload != 'function'){ 
		window.onload = func
	} else { 
		window.onload = function() {
			oldonload();
			func();
		}
	}
}
 
 
addLoadEvent(loadMap);
addLoadEvent(addPoints);
 
function loadMap() {
	if (GBrowserIsCompatible()) { 

			map = new GMap2(document.getElementById("map"));
			map.addControl(new GLargeMapControl());
			map.addControl(new GMapTypeControl());
			map.addMapType(G_PHYSICAL_MAP);
			map.setMapType(G_PHYSICAL_MAP);
			map.setCenter(new GLatLng(44.55463764911723, 3.2906413078308105), 7);

			directions = new GDirections(map);
			GEvent.addListener(directions, "addoverlay", hideDirMarkers);
              
			var waypoints = [];
		  
		    var latlng = new GLatLng(45.54511702182435, 3.246481418609619);
		    waypoints.push(latlng);
		    var latlng = new GLatLng(43.461072891433204, 3.42299222946167);
		    waypoints.push(latlng);
        
			directions.loadFromWaypoints(waypoints);
			
			icon0 = new GIcon();
			icon0.image = "/Portals/0/maps/marker.png";
			icon0.iconSize = new GSize(16, 16);
			icon0.iconAnchor = new GPoint(8, 8);
			icon0.infoWindowAnchor = new GPoint(8, 2);
			icon0.infoShadowAnchor = new GPoint(16, 25);
			
		} else {
    	alert("Sorry, the Google Maps API is not compatible with this browser");
    }
}

// Not using the directions markers so hide them.
function hideDirMarkers() {
	var numMarkers = directions.getNumGeocodes();
	for (var i = 0; numMarkers > i; i++) {
		var marker = directions.getMarker(i);
		if (marker !== null) {
			marker.hide();
		} else {
			alert("Marker is null");
		}
	}
	var poly=directions.getPolyline(); 
	poly.color = "#2c4b0a"; 
	poly.redraw(true);
}
      
		
function addPoints() {
 
	newpoints[0] = new Array(45.54511702182435, 3.246481418609619, icon0, 'Issoire', '<img src="/Portals/0/maps/logoissoire.gif" width="100" height="100"><br /><a href="http://www.issoire.fr/" target="_blank">Ville d&prime;issoire</a>'); 
  newpoints[1] = new Array(45.03378220540749, 3.0955803394317627, icon0, 'Saint-Flour', '<img src="/Portals/0/maps/logostflour.gif" width="100" height="100"><br /><a href="http://www.saint-flour.fr/" target="_blank">Ville de Saint-Flour</a>'); 
  newpoints[2] = new Array(44.79902774994587, 3.2761359214782715, icon0, 'Saint-Ch&eacute;ly d&prime;Apcher', '<img src="/Portals/0/maps/logostchely.gif" width="100" height="100"><br /><a href="http://www.stchelydapcher.fr/" target="_blank">Ville de Saint-Ch&eacute;ly d&prime;Apcher</a>'); 
  newpoints[3] = new Array(44.55463764911723, 3.2906413078308105, icon0, 'Marvejols', '<img src="/Portals/0/maps/logomarvejols.gif" width="100" height="100"><br /><a href="http://www.ville-marvejols.fr/" target="_blank">Ville de Marvejols</a>'); 
  newpoints[4] = new Array(44.09791824290981, 3.0785000324249267, icon0, 'Millau', '<img src="/Portals/0/maps/logomillau.gif" width="100" height="100"><br /><a href="http://www.millau.fr/" target="_blank">Ville de Millau</a>'); 
  newpoints[5] = new Array(43.73290248118248, 3.3192121982574463, icon0, 'Lod&egrave;ve', '<img src="/Portals/0/maps/logolodeve.gif" width="100" height="100"><br /><a href="http://www.lodeve.com//" target="_blank">Ville de Lod&egrave;ve</a>'); 
  newpoints[6] = new Array(43.461991802191996, 3.4232497215270996, icon0, 'P&eacute;zenas', '<img src="/Portals/0/maps/logopezenas.gif" width="100" height="100"><br /><a href="http://www.ville-pezenas.fr/" target="_blank">Ville de P&eacute;zenas</a>');  
	
  for(var i = 0; i < newpoints.length; i++) {
		var point = new GPoint(newpoints[i][1],newpoints[i][0]);
		var popuphtml = newpoints[i][4] ;
		var marker = createMarker(point,newpoints[i][2],newpoints[i][3],popuphtml);
		map.addOverlay(marker);
	}

    // put the assembled side_bar_html contents into the side_bar div
    document.getElementById("side_bar").innerHTML = side_bar_html;

}
 
      // This function picks up the click and opens the corresponding info window
      function myclick(i) {
        GEvent.trigger(gmarkers[i], "click");
      }

      function createMarker(point,icon,name,html) {
		var popuphtml = "<div id=\"popup" + name + "\">" + html + "<\/div>";
        var marker = new GMarker(point,icon);
        GEvent.addListener(marker, "click", function() {
          marker.openInfoWindowHtml(popuphtml);
        });
        // save the info we need to use later for the side_bar
        gmarkers[i] = marker;
        // add a line to the side_bar html
        side_bar_html += '<a href="javascript:myclick(' + i + ')">' + name + '</a><br>';
        i++;
        return marker;
      }