var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
var destination = new google.maps.LatLng(45.296085, -79.015068);
var map;

function initGMap() {
	//if(!document.getElementById("bondiMap")) return;
	//replaceStaticMap("bondiMap");
	directionsDisplay = new google.maps.DirectionsRenderer();
	var myOptions = {
		zoom:15,
		mapTypeId: google.maps.MapTypeId.HYBRID,
		center: destination
	}
	map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
	marker = new google.maps.Marker({
		map: map,
		position: destination,
		draggable: false
	});
	directionsDisplay.setMap(map);
	directionsDisplay.setPanel(document.getElementById("directionsPanel"));
}

function calcRoute() {
	var start = document.getElementById("start").value;
	var end = destination;
	var request = {
		origin:start,
		destination:end,
		travelMode: google.maps.TravelMode.DRIVING
	};
	directionsService.route(request, function(response, status) {
		if (status == google.maps.DirectionsStatus.OK) {
			directionsDisplay.setDirections(response);
		}
	});
}

function replaceStaticMap(theID) {
	var theHTML = '<div class="imageborder"><p><strong>Departure</strong> (From): <input type="text" id="start" /> <input type="button" onclick="calcRoute();" value="show Directions" /></p><div id="map_canvas" class="mapHeight" style="float:left;width:50%;"><p>... map loading</p></div><div id="directionsPanel" class="mapHeight" style="float:right;width:45%;overflow:auto;"><p style="color:red">Enter your current location in the <strong>Departure</strong> box above and click on &quot;show Directions&quot;</p></div><div class="clearallfloats"></div></div>';
	document.getElementById(theID).innerHTML = theHTML;
	initGMap();
}

function clickGMap() { 
	if(!document.getElementById("bondiMap")) return;
	var b=document.createElement('span');
	b.id = 'clickMe';
	b.innerHTML = '<strong onclick="replaceStaticMap(\'bondiMap\')">CLICK HERE</strong> for Google Driving Directions';
	document.getElementById("bondiMap").appendChild(b);	
}