var map;
var MapListContent = '<p>Click name to find on map.</p>';
var MarkerInfo = new Array();

// Create a base icon for all of our markers that specifies the shadow, icon, dimensions, etc.
var baseIcon = new GIcon();
baseIcon.shadow = "http://www.google.com/mapfiles/shadow50.png";
baseIcon.iconSize = new GSize(20, 34);
baseIcon.shadowSize = new GSize(37, 34);
baseIcon.iconAnchor = new GPoint(9, 34);
baseIcon.infoWindowAnchor = new GPoint(9, 2);
baseIcon.infoShadowAnchor = new GPoint(18, 25);

if (GBrowserIsCompatible()) {
	function onLoad() {

		map = new GMap2(document.getElementById("MapWindow"));
		map.addControl(new GLargeMapControl());
		//map.addControl(new GOverviewMapControl());
		map.setCenter(new GLatLng(36.084621, -117.740723), 5);
		map.enableDoubleClickZoom();
		map.enableContinuousZoom();
		
		var arrnum = 0
		MarkerInfo[arrnum++] = [33.334974, -111.858845, '<div class="MapDiv"><div class="MapHeader">Day 1</div><div class="MapContent"><a href="#home">Chandler, AZ</a> - home</div></div>', 'Home base'];
		MarkerInfo[arrnum++] = [33.682122, -116.239836, '<div class="MapDiv"><div class="MapHeader">Days 1 - 2</div><div class="MapContent"><a href="#Indio">Indio, CA</a> - Coachella</div></div>', 'Coachella'];
		MarkerInfo[arrnum++] = [34.136544, -118.132086, '<div class="MapDiv"><div class="MapHeader">Day 2</div><div class="MapContent"><a href="#Pasadena">Pasadena, CA</a> - feed stop</div></div>', 'feed stop'];
		MarkerInfo[arrnum++] = [37.099345, -121.012151, '<div class="MapDiv"><div class="MapHeader">Day 2</div><div class="MapContent"><a href="#SantaNella">Santa Nella, CA</a> - rest stop</div></div>', 'rest stop'];
		MarkerInfo[arrnum++] = [38.501812, -123.004813, '<div class="MapDiv"><div class="MapHeader">Days 3 - 5, 7 - 8</div><div class="MapContent"><a href="#Sonoma">Sonoma</a> - Anderson Valley, Dry Creek Valley, Healdsburg, Russian River Valley</div></div>', 'Sonoma'];
		MarkerInfo[arrnum++] = [38.305025, -122.283572, '<div class="MapDiv"><div class="MapHeader">Days 5 - 7</div><div class="MapContent"><a href="#Napa">Napa</a> - Napa, St. Helena</div></div>', 'Napa'];


		for (var i = 0; i < MarkerInfo.length; i++) {
			var marker = createMarker(i, MarkerInfo[i][0], MarkerInfo[i][1], MarkerInfo[i][2], MarkerInfo[i][3]);
			map.addOverlay(marker);
			
			if (i > 0) {
				var l = i - 1
				var polyline = new GPolyline([
					new GLatLng(MarkerInfo[l][0], MarkerInfo[l][1]),
					new GLatLng(MarkerInfo[i][0], MarkerInfo[i][1])
				], "#0000FF", 4);
				map.addOverlay(polyline);
			}
		}
	}
}

function createMarker(index, lat, lng, InfoText, ToolTip) {

	// Create a lettered icon for this point using our icon class
	var letter = String.fromCharCode("A".charCodeAt(0) + index);
	var icon = new GIcon(baseIcon);
	
	icon.image = "http://www.google.com/mapfiles/marker" + letter + ".png";
	var Options = {title:ToolTip, icon:icon}

	var marker = new GMarker(new GLatLng(lat, lng), Options);
		
	GEvent.addListener(marker, "click", function() {
		marker.openInfoWindowHtml(InfoText);
	});

	return marker;
}