function createMarker(venue) {
	var pt = new GPoint(venue.lng, venue.lat);
	var marker = new GMarker(pt, markerIcon);
	var html = "<h4 style=\"margin-bottom:1em\">"+venue.name+"</h4>"
		+"<img align=\"left\" src=\""+venue.thumbnail+"\" style=\"height: 100px; margin: 0px 10px 10px 0px;\">"
		+"Scale: "+venue.scale
		+"<br>Contours: "+venue.contours
		+((venue.fee)?"<br>Park Entrance Fee":"")
		+"<br clear=\"all\"/>"
		+"<a href=\"javascript:zoomIn("+venue.lng+","+venue.lat+")\">Zoom in</a> ... "
		+"<a href=\"/cgi-bin/order.cgi?action=add&prid=map:"+venue.abbr+"&quantity=1\">Buy Map</a> ... "
		+"<a href=\"/results.shtml?mode=map&map="+venue.abbr+"\">Results</a>"
		+"<br><a href=\"/venue.shtml?id="+venue.id+"\">More information and directions.</a>"
		+"</div>";
	GEvent.addListener(marker, "click", function() { marker.openInfoWindowHtml(html); });
	return marker;
}

function createMap() {
	var icon = new GIcon();
	icon.image = "http://www.mnoc.org/images/miniflag.png";
	icon.iconSize = new GSize(12, 12);
	icon.shadowSize = new GSize(0, 0);
	icon.iconAnchor = new GPoint(6, 6);
	icon.infoWindowAnchor = new GPoint(5, 1);
	window.markerIcon = icon;
	
	var map = new GMap(document.getElementById("map"));
	map.addControl(new GSmallMapControl());
	map.addControl(new GMapTypeControl());
	map.centerAndZoom(new GPoint(-93.25, 45.00), 8);
	for (var i = 0; i < maps.length; i++) {
		var marker = createMarker(maps[i]);
		map.addOverlay(marker);
	}

	GEvent.addListener(map, "move", function() { checkBorders(map.getBoundsLatLng()); });
	checkBorders(map.getBoundsLatLng());
	window.map = map;
}


function checkBorders(r) {
	var n = 0, s = 0, e = 0, w = 0;
	for (var i = 0; i < maps.length; i++) {
		if (maps[i].lat < r.minY) s++;
		if (maps[i].lat > r.maxY) n++;
		if (maps[i].lng < r.minX) w++;
		if (maps[i].lng > r.maxX) e++;
	}
	setBorder("south", s, false); setBorder("north", n, false);
	setBorder("west", w, true); setBorder("east", e, true);
}


function setBorder(id, num, vertical) {
	var elem = document.getElementById(id);
	if (num > 0) {
		if (num != elem.number) {
			var text = num + " more ";
			if (vertical) {
				text = num + "<br><br>";
			}
			text = text + "<img src=\"/images/"+id+".png\" align=\"absmiddle\">";
			elem.innerHTML = text;
			elem.number = num;
		}
		elem.style.visibility = "visible";		
	}
	else {
		elem.style.visibility = "hidden";
	}
}

function zoomIn(lng, lat) {
	map.centerAndZoom(new GPoint(lng, lat), 3);
	map.closeInfoWindow();
}