var map;
var points = [];
var gmarkers = [];
var to_htmls = [];
var from_htmls = [];
////////////////////////////////////////////////////////////////////////////////////////////////
	//
	//
	//
	// location data
	//
	//
var data = [
 { name: "Renaissance Plastic Surgery", address: "145 St. Peters Centre Blvd.<br/>St. Peters, Missouri 63376<br/>", phone: "636.896.0600", lat:"38.794918", lng:"-90.595493" }
];
//////////////////////////////////////////////////////////////////////////////////////////////// 
	//
	//
	//
	// addIcon(icon)
	//
	//
	//
function addIcon(icon) {
	icon.shadow = "http://www.google.com/mapfiles/shadow50.png";
	icon.iconSize = new GSize(32, 32);
	icon.shadowSize = new GSize(37, 34);
	icon.iconAnchor = new GPoint(15, 34);
	icon.infoWindowAnchor = new GPoint(19, 2);
	icon.infoShadowAnchor = new GPoint(18, 25);
}
////////////////////////////////////////////////////////////////////////////////////////////////
	//
	//
	//
	// addClickevent(marker)
	//
	//
	//
function addClickevent(marker) {
	GEvent.addListener(marker, "click", function() {
	 	marker.openInfoWindowHtml(marker.content);
	});
	return marker;
}
////////////////////////////////////////////////////////////////////////////////////////////////
	//
	//
	//
	// buildMap()
	//
	//
	//
function buildMap() {
	if(!$('gmap')) return false;
	if(GBrowserIsCompatible()) {
  		map = new GMap2(document.getElementById("gmap"));
  		map.setCenter(new GLatLng(data[0].lat, data[0].lng), 13);
  		map.addControl(new GLargeMapControl());
  		map.addControl(new GMapTypeControl());
		//map.setMapType(G_HYBRID_MAP);
  	
  		// Light blue marker icons
  		var icon = new GIcon();
  		icon.image = "http://www.google.com/intl/en_de/mapfiles/ms/icons/ltblue-dot.png";
  		addIcon(icon);
  	
  		for(var i = 0; i < data.length; i++) {
  	 		points[i] = new GLatLng(parseFloat(data[i].lat), parseFloat(data[i].lng));
  	 		gmarkers[i] = new GMarker(points[i], icon);
  	
  	 		// Store data attributes as property of gmarkers
  	 		var html = "<div class='infowindow'>" +
  	 				   "<strong>"+ data[i].name + "<\/strong><p>" +
  	 					data[i].address + data[i].phone + "<\/p><\/div>";
			
			to_htmls[i] = html + '<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="' + data[i].lat + ',' + data[i].lng + 
			   '"/>';
			
			from_htmls[i] = html + '<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="' + data[i].lat + ',' + data[i].lng +
			   '"/>';
			
			html = html + '<b>Get directions:</b> <a href="javascript:tohere('+i+')">To here</a> - <a href="javascript:fromhere('+i+')">From here</a>';
			
  	 		gmarkers[i].content = html;
  	 		addClickevent(gmarkers[i]);
  	 		map.addOverlay(gmarkers[i]);
  		}
  		// Open infowindow of first marker
  		gmarkers[0].openInfoWindowHtml( gmarkers[0].content);
 	}
} 
////////////////////////////////////////////////////////////////////////////////////////////////
	//
	// tohere();
	//
function tohere(i) {
  gmarkers[i].openInfoWindowHtml(to_htmls[i]);
}
////////////////////////////////////////////////////////////////////////////////////////////////
	//
	// fromhere
	//
function fromhere(i) {
  gmarkers[i].openInfoWindowHtml(from_htmls[i]);
}
////////////////////////////////////////////////////////////////////////////////////////////////
	//
	// start it up
	//
addLoadEvent(function() {
	buildMap();
});