var gmarkers = [];
var htmls = [];
var to_htmls = [];
var from_htmls = [];
var i=0;
var fullHtml;

var mapLat    = 38.967644;
var mapLng    = -92.362967;
var mapZoom   = 14;
var mapElemId = 'google-map';
var mapName   = 'Parkside Skateshop';
var mapHtml   = '<img src="images/map_logo.png" /><br />';

////////////////////////////////////////////////////////////////////////////////////////////////
	//
	//
	//
	// chooseLocation
	//
	//
	//
function chooseLocation() {
	if(!document.getElementById(mapElemId)) return false;
	var lat = mapLat;
	var lng = mapLng;
	var name = mapName;
	var initHtml = mapHtml;
	prepareMap(lat, lng, mapZoom, name, initHtml);
}


////////////////////////////////////////////////////////////////////////////////////////////////
	//
	//
	//
	// prepareMap()
	//
	//
	//
function prepareMap(lat, lon, zoom, name, initHtml) {
    if (GBrowserIsCompatible()) {
		var map = new GMap2(document.getElementById(mapElemId));
		map.addControl(new GLargeMapControl());
		map.addControl(new GMapTypeControl());
		map.setCenter(new GLatLng(lat, lon), zoom); 
		
		var point = new GLatLng(lat, lon);
		
		var icon = new GIcon();
		icon.image = "images/map_logo.png";
		icon.iconAnchor =  new GPoint(25,36);
		icon.infoWindowAnchor = new GPoint(25,6);

		var marker = new GMarker(point , {"icon":icon});
		map.addOverlay(marker);
		
		
		// Create marker for skate park
		var parkPoint = new GLatLng(38.978398, -92.363412);
		var parkIcon  = new GIcon();
		parkIcon.image = "images/map_parkMarker.png";
		parkIcon.iconAnchor =  new GPoint(25,36);
		parkIcon.infoWindowAnchor = new GPoint(25,6);

		var parkMark = new GMarker(parkPoint , {"icon":parkIcon});
		map.addOverlay(parkMark);
	}
}


////////////////////////////////////////////////////////////////////////////////////////////////
	//
	//
	//
	// createMarker()
	//
	//
	//
function createMarker(point, name, html) {
	var marker = new GMarker(point);

	// The info window version with the "to here" form open
	to_htmls[i] = html + '<br><b>Get directions:</b> <b>To here</b> - <a href="javascript:fromhere(' + i + ')">From here</a>' +
	   '<br>Start address:<form action="http://maps.google.com/maps" method="get" target="_blank">' +
	   '<input type="text" SIZE=40 MAXLENGTH=80 name="saddr" id="saddr" value="" /><br>' +
	   '<INPUT value="Get Directions" TYPE="SUBMIT">' +
	   '<input type="hidden" name="daddr" value="' + point.lat() + ',' + point.lng() + 
	   '"/>';
	
	// The info window version with the "to here" form open
	from_htmls[i] = html + '<br><b>Get directions:</b> <a href="javascript:tohere(' + i + ')">To here</a> - <b>From here</b>' +
	   '<br>End address:<form action="http://maps.google.com/maps" method="get"" target="_blank">' +
	   '<input type="text" SIZE=40 MAXLENGTH=80 name="daddr" id="daddr" value="" /><br>' +
	   '<INPUT value="Get Directions" TYPE="SUBMIT">' +
	   '<input type="hidden" name="saddr" value="' + point.lat() + ',' + point.lng() +
	   '"/>';
	
	// The inactive version of the direction info
	html = html + '<br><b>Get directions:</b> <a href="javascript:tohere('+i+')">To here</a> - <a href="javascript:fromhere('+i+')">From here</a>';
	
	GEvent.addListener(marker, "click", function() { marker.openInfoWindowHtml(html);});
	gmarkers[i] = marker;
	htmls[i] = html;
	i++;
	fullHtml = html;
	return marker;
}


////////////////////////////////////////////////////////////////////////////////////////////////
	//
	//
	//
	// tohere();
	//
	//
	//
function tohere(i) {
  gmarkers[i].openInfoWindowHtml(to_htmls[i]);
}


////////////////////////////////////////////////////////////////////////////////////////////////
	//
	//
	//
	// fromhere
	//
	//
	//
function fromhere(i) {
  gmarkers[i].openInfoWindowHtml(from_htmls[i]);
}


$(function() 
{
	chooseLocation();
});