//window.onload = load();
//window.onunload = GUnload();

var points = [];
var map;

function myclick(i) 
{
	GEvent.trigger(points[i], "click");
}

function load () 
{
	map = new GMap2(document.getElementById("map"));
	
	var west_sidebar = "";
	var gulf_sidebar = "";
	var east_sidebar = "";
	var euro_sidebar = "";
	
	if (GBrowserIsCompatible()) 
	{	
		function parseJson(doc) 
		{
			var jsonData = eval("(" + doc + ")");
		
			for(var i = 0; i < jsonData.markers.length; i++) 
			{
				var marker = createTabbedMarker(jsonData.markers[i]);
				points.push(marker)
				
				if(jsonData.markers[i].region == "westcoast")
				{
					west_sidebar += '<a href="javascript:myclick('+i+')">' + formatTitle(jsonData.markers[i]) + '</a><br>';	
				}
				else if(jsonData.markers[i].region == "gulfcoast")
				{
					gulf_sidebar += '<a href="javascript:myclick('+i+')">' + formatTitle(jsonData.markers[i]) + '</a><br>';	
				}
				else if(jsonData.markers[i].region == "eastcoast")
				{
					east_sidebar += '<a href="javascript:myclick('+i+')">' + formatTitle(jsonData.markers[i]) + '</a><br>';	
				}
				else
				{
				    euro_sidebar += '<a href="javascript:myclick('+i+')">' + formatTitle(jsonData.markers[i]) + '</a><br>';
				}
				map.addOverlay(marker);
			}			
			
			document.getElementById("west").innerHTML += west_sidebar;
			document.getElementById("gulf").innerHTML += gulf_sidebar;
			document.getElementById("east").innerHTML += east_sidebar;
			document.getElementById("euro").innerHTML += euro_sidebar;
		}
	
		// Create the map and load the data
		map.addControl(new GLargeMapControl());
		map.addControl(new GMapTypeControl());
		map.setCenter(new GLatLng(40, -94), 4);
		map.setMapType(G_SATELLITE_MAP);
		GDownloadUrl("boats.json", function(data, responseCode){ parseJson(data); });
		
 		function createTabbedMarker(input)
		{
			var boaticon = new GIcon(G_DEFAULT_ICON);
			if(input.btype == "Proto")
			{
	        	boaticon.image = "http://gmaps-samples.googlecode.com/svn/trunk/markers/red/blank.png";
			}
			else
			{
				boaticon.image = "http://gmaps-samples.googlecode.com/svn/trunk/markers/green/blank.png";
			}
			
        	var marker = new GMarker(input.point, {icon:boaticon});
			marker.color = "blue"
        	GEvent.addListener(marker, "click", function() { marker.openInfoWindowTabsHtml([new GInfoWindowTab("Boat Info",formatWindow(input)), new GInfoWindowTab("Image",formatImageWindow(input))]);});
        	return marker;
      	}

		function formatTitle(input)
		{
			var link = input.country + " " + input.number;
			if(input.bname)
			{
				link += " - " + input.bname;
			}
			return link;
		}
		
		
		function createMarker(input) 
		{
			var marker = new GMarker(input.point);
			GEvent.addListener(marker, "click", function() { marker.openInfoWindowHtml(formatWindow(input)); });
			return marker;
		}
		
		function formatWindow(input) 
		{
			var html = "<div class=\"bubble\">";
			html += "<b>" + formatTitle(input) + "</b><hr>";
			html += "<div class=info_left>Skipper<br>Type<br>Designer<br>Year<br>Website</div>";
			html += "<div class=info_right>" + input.skipper + "<br>" + input.btype + "<br>" + input.designer + "<br>" + input.year + "<br>";

			if(input.website)
			{
				html += "<a href=\"" + input.website + "\" target=blank>Link</a>";			
			}
			else
			{
				html += "None";
			}

			html += "</div></div>";
			return html;
		}

		function formatImageWindow(input) 
		{
			var html = "<div class=\"bubble\">";
			// html += "<b>" + input.bname + " USA " + input.number + "</b><hr>";
			html += "<b>" + formatTitle(input) + "</b><hr>";
			
			if(input.image)
			{
				html += "<img src=" + input.image + ">"; 
			}
			else
			{
				html += "No image available.";
			}
			
			html += "</div>";
			return html;
		}
	}
 	else 
	{
		alert("Sorry, your browser does not support Google Maps");
	}
}