var map;
var dir;

function initialize() 
{      
	if (GBrowserIsCompatible()) 
	{        
		map = new GMap2(document.getElementById("map_canvas"));  
		map.setCenter(new GLatLng(39.774771,  -101.955875), 3);   
		map.addControl(new GSmallMapControl());
		map.addControl(new GMapTypeControl());
	}    
}

function AddMarker(latitude, longitude, name, address, city_state, phone)
{
	if (GBrowserIsCompatible()) 
		{
		if(map==null)
			initialize();
			
		var point = new GLatLng(latitude, longitude);
		map.setCenter(point, 14); 
		var marker = new GMarker(point);
		GEvent.addListener(marker, "click", function() {
			marker.openInfoWindowHtml("<p style='FONT-SIZE: 11px; FONT-FAMILY: Arial;'><b>" + name + "</b><br>" + address + "<br>" + city_state + "<br>" + phone + "</p>");
		});
		
		map.addOverlay(marker);
	}
}
			
function GetDirections(destination)
{
	var query = "from: " + document.getElementById("txtDirectionsFrom").value + " to: " + destination;
	
	//disabling the button
	document.getElementById("btnGetDirections").disabled = true;
	document.getElementById("btnGetDirections").value = "Processing...";
	
    if (GBrowserIsCompatible()) 
	{
		if(map==null)
			initialize();
		if(dir==null)
		    dir = new GDirections(map,document.getElementById("mapDir"));
		
		dir.clear();
		dir.load(query);
		GEvent.addListener(dir,"load", function() {setTimeout('customPanel(map,"map",dir,document.getElementById("mapDir"))', 1); });
	}
	document.getElementById("btnGetDirections").disabled = false;
	document.getElementById("btnGetDirections").value = "Get Directions";
}

function customPanel(map,mapname,gdir,div) 
{
	var html = "";

	function waypoint(point, type, address) {
		var target = '"' + mapname+".showMapBlowup(new GLatLng("+point.toUrlValue(6)+"))"  +'"';
		html += '<table style="border: 1px solid silver; margin: 10px 0px; background-color: rgb(223, 219, 220); border-collapse: collapse; color: rgb(0, 51, 102); font-family: verdana; font-size: 12px;">';
		html += '  <tr style="cursor: pointer;" onclick='+target +'>';
		html += '    <td style="padding: 4px 15px 0px 5px; vertical-align: middle; width: 20px;">';
		html += '      <img src="http://www.google.com/intl/en_ALL/mapfiles/icon-dd-' +type+ '-trans.png">'
		html += '    </td>';
		html += '    <td style="vertical-align: middle; width: 100%;">';
		html +=        address;
		html += '    </td>';
		html += '  </tr>';
		html += '</table>';
	}


	function routeDistance(dist) {
		html += '<div style="text-align: right; padding-bottom: 0.3em;">' + dist + '</div>';
	}


	function detail(point, num, description, dist) {
		var target = '"' + mapname+".showMapBlowup(new GLatLng("+point.toUrlValue(6)+"))"  +'"';
		html += '<table style="margin: 0px; padding: 0px; border-collapse: collapse; color: rgb(0, 0, 0); font-family: verdana; font-size: 12px;">';
		html += '  <tr style="cursor: pointer;" onclick='+target +'>';
		html += '    <td style="border-top: 1px solid rgb(205, 205, 205); margin: 0px; padding: 0.3em 3px; vertical-align: top; text-align: right;">';
		html += '      <a href="javascript:void(0)"> '+num+'. </a>';
		html += '    </td>';
		html += '    <td style="border-top: 1px solid rgb(205, 205, 205); margin: 0px; padding: 0.3em 3px; vertical-align: top; width: 100%;">';
		html +=        description;
		html += '    </td>';
		html += '    <td style="border-top: 1px solid rgb(205, 205, 205); margin: 0px; padding: 0.3em 3px 0.3em 0.5em; vertical-align: top; text-align: right;">';
		html +=        dist;
		html += '    </td>';
		html += '  </tr>';
		html += '</table>';
	}
	function copyright(text) {
		html += '<div style="font-size: 0.86em;">' + text + "</div>";
	}


	for (var i=0; i<gdir.getNumRoutes(); i++)
	{
		if (i==0) {
		var type="play";
		} else {
		var type="pause";
		}
		var route = gdir.getRoute(i);
		var geocode = route.getStartGeocode();
		var point = route.getStep(0).getLatLng();
		waypoint(point, type, geocode.address);
		routeDistance(route.getDistance().html+" (about "+route.getDuration().html+")");
		for (var j=0; j<route.getNumSteps(); j++) {
		var step = route.getStep(j);
		detail(step.getLatLng(), j+1, step.getDescriptionHtml(), step.getDistance().html);
		}
	}


	var geocode = route.getEndGeocode();
	var point = route.getEndLatLng();
	waypoint(point, "stop", geocode.address);


	copyright(gdir.getCopyrightsHtml());
	div.innerHTML = html;
	div.style.width = "400px";
}