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);

var map;

function createMarker(point, html, markertitle, index, color) {
	var letter = String.fromCharCode("A".charCodeAt(0) + index);
	var markericon = new GIcon(baseIcon);
	markericon.image = "http://madeinusa.elzz.org/wordpress/wp-content/themes/madeinusa/mapsdata/ballons/" + color + "/marker" + letter + ".png";
	var marker = new GMarker(point,{title:markertitle,icon:markericon});
	
    GEvent.addListener(marker, "click", function() { marker.openInfoWindowHtml(html); });

    return marker;
}

function onLoad(lat, lng, zoom) 
{
	map = new GMap(document.getElementById("map"));
	map.addControl(new GLargeMapControl());
	map.addControl(new GMapTypeControl());
	map.centerAndZoom(new GPoint(lat, lng), zoom);
}


var g2itemurl = "http://madeinusa.elzz.org/wordpress/wp-gallery2.php?g2_itemId=";
var g2imgurl  = "http://madeinusa.elzz.org/gallery/main.php?g2_view=core.DownloadItem&g2_itemId=";
var diaryurl  = "http://madeinusa.elzz.org/diary/";

function loadtrip(xmlfileloc,color,loadall)
{
	if(!loadall)
		map.clearOverlays();

	var request = GXmlHttp.create();
	var letter = 0;
	request.open("GET", xmlfileloc, true);
	request.onreadystatechange = function() 
	{
		if (request.readyState == 4) 
		{
			var xmlDoc = request.responseXML;
			var position = xmlDoc.documentElement.getElementsByTagName("marker");
			
			var arr	= new Array();
		
			for (var i = 0; i < position.length; i++) 
			{
				var lat		= parseFloat(position[i].getAttribute("lng"));
				var lng		= parseFloat(position[i].getAttribute("lat"));
				
  				var point	= new GPoint(lat, lng);
				
				arr.push(new GPoint(lat, lng));
				
				var title = position[i].getElementsByTagName("title")[0].childNodes[0].nodeValue;
				
				if(title != "notitle")
				{
					html  = "<div style=\"width: 200px; height: 200px;\">";
					html += "<h6 style=\"font-family: Arial; font-size: 12px; font-weight: bold; text-decoration: none; margin: 0;\">" + title + "</h6>";
					
					
					html += "<div style=\"color: #888; font-family: Arial; font-size: 10px; text-align:justify;\">";
					
					// image data
					var albumid		= position[i].getElementsByTagName("album")[0].childNodes[0].nodeValue;
					var highlightid	= position[i].getElementsByTagName("album")[0].getAttribute("highlight");
					var photoid		= position[i].getElementsByTagName("album")[0].getAttribute("photo");
					
					if(photoid != "0" && highlightid != "0") {
						html += "<a style=\"float:left;\" href=\"" + g2itemurl + photoid + "\">";
						html += "<img src=\"" + g2imgurl + highlightid + "\"width=\"100\" height=\"100\" style=\"margin: 0 2px 2px 0; border:1px solid #888;\" />";
						html += "</a>";
					}
					
					// diary data
					var diaryextract = position[i].getElementsByTagName("diary")[0].childNodes[0].nodeValue;
					var diarylink	 = position[i].getElementsByTagName("diary")[0].getAttribute("link");
					
					if(diaryextract != "nodiary")
						html += "&laquo;" + diaryextract + "&hellip;&raquo;&nbsp;";
					
					html += "</div>";
					
					
					// info data
					var wikiurl	= position[i].getElementsByTagName("wiki")[0].childNodes[0].nodeValue;
					var infourl	= position[i].getElementsByTagName("info")[0].childNodes[0].nodeValue;
					
					html += "<div style=\"font-family: Arial; font-size: 10px; text-align: justify; clear: both; margin-top: 2px; padding: 2px; border: 1px dashed #888;\">";
					html += "More info:<br />";
					html += "<ul style=\"margin: 0; padding; 0;\">";
					if(infourl != "noinfo")
						html += "<li><a href=\"" + infourl + "\">official site</a></li>"
					if(wikiurl != "nowiki")
						html += "<li><a href=\"http://en.wikipedia.org/wiki/" + wikiurl + "\">wikipedia entry</a></li>";
					if(albumid != "noalbum")
						html += "<li><a href=\"" + g2itemurl + albumid + "\">view the album</li>";
					if(diarylink != "void")
						html += "<li><a href=\"" + diaryurl + diarylink + "\" >read the diary</a></li>"
					html += "</ul>";
					html += "</div>";
					
					
					html += "</div>";
					
					var marker = new createMarker(point, html, title, letter, color);
					letter++;
					
					map.addOverlay(marker);
				}
			}
			
			var closePoint = arr[0];
			arr.push(closePoint);
			
			var col;
			if(color=='red')
				col = "#FF0000";
			else if(color=='green')
				col = "#00FF00";
			else if(color=='blue')
				col = "#0000FF";
			else if(color=='yellow')
				col = "#FFFF00";
			else if(color=='purple')
				col = "#AA00FF";
			
			var polyline = new GPolyline(arr, col, 4, 0.5);
			map.addOverlay(polyline);
		}
	}
	request.send(null);
}

function loadall()
{
	map.clearOverlays();
	loadtrip('2003-grand-canyon.xml','red',true);
	loadtrip('2003-highway-1.xml','purple',true);
	loadtrip('2004-bryce-canyon.xml','green',true);
	loadtrip('2005-eastern-sierra.xml','blue',true);
	loadtrip('2005-western-sierra.xml','yellow',true);
}