// ============ custom direction panel ===============
function customPanel(map, mapname, dirn, div) 
{
    var html = "";

    // ===== local functions =====
    // === waypoint banner ===
    function waypoint(point, type, address) {
        var target = '"' + mapname + ".showMapBlowup(new GLatLng(" + point.toUrlValue(6) + "))" + '"';
        html += '<table class="start">';
        html += '  <tr onclick="return false">';
        html += '    <td class="start-image">';
        html += '      <img src="http://www.google.com/intl/en_ALL/mapfiles/icon-dd-' + type + '-trans.png">'
        html += '    <\/td>';
        html += '    <td class="start-address">';
        html += address;
        html += '    <\/td>';
        html += '  <\/tr>';
        html += '<\/table>';
    }

    // === route distance ===
    function routeDistance(dist) {
        html += '<div class="total-dist">' + dist + '<\/div>';
    }

    // === step detail ===
    function detail(point, num, description, dist) {
        var target = '"' + mapname + ".showMapBlowup(new GLatLng(" + point.toUrlValue(6) + "))" + '"';
        html += '<table class="steps">';
        html += '  <tr class="step-row" onclick="return false">';
        html += '    <td class="step-num">' + num + '.<\/td>';
        html += '    <td class="step-desc">';
        html += description;
        html += '    <\/td>';
        html += '    <td class="step-dist">';
        html += dist;
        html += '    <\/td>';
        html += '  <\/tr>';
        html += '<\/table>';
    }

    // === Copyright tag ===
    function copyright(text) {
        html += '<div class="dirs-copy">' + text + "<\/div>";
    }


    // === read through the GRoutes and GSteps ===
    for (var i = 0; i < dirn.getNumRoutes(); i++) {
        if (i == 0) {
            var type = "play";
        } else {
            var type = "pause";
        }
        var route = dirn.getRoute(i);
        var geocode = route.getStartGeocode();
        var point = route.getStep(0).getLatLng();
        // === Waypoint at the start of each GRoute
        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 lines for each step ===
            detail(step.getLatLng(), j + 1, step.getDescriptionHtml(), step.getDistance().html);
        }
    }

	//do some work to set up the destination
	var destHTML = '<h3>' + destinationMarker.getTitle() + '</h3><p class="address">' + destinationMarker._address + '</p>';
	$("#destination-container").addClass(destinationMarker._markerCategory);
	$("#destination-container").html(destHTML);
	
    // === the final destination waypoint ===
    var geocode = route.getEndGeocode();
    var point = route.getEndLatLng();
    waypoint(point, "stop", geocode.address);

    // === the copyright text ===
    copyright(dirn.getCopyrightsHtml());

    // === drop the whole thing into the target div
    div.innerHTML = html;

}

function clearDirectionsPanel()
{
	$("#directions-panel").html("");
}