// This Javascript is based on code provided by the
// Blackpool Community Church Javascript Team
// http://www.commchurch.freeserve.co.uk/
// http://econym.googlepages.com/index.htm
// ============ custom direction panel ===============
function customDirectionPanel(map,mapname,dirn,div,places,tripname) {
  var html = "<hr/>";

  // ===== local functions =====

  // === waypoint banner ===
  function waypoint(point, type, address, place) {
    var target = '"' + mapname+".showMapBlowup(new GLatLng("+point.toUrlValue(6)+"))"  +'"';
    html += '<table class="waypoint" style="border: 1px solid silver; margin: 10px 0px; background-color: rgb(238, 238, 238); border-collapse: collapse; color: rgb(0, 0, 0);">';
    html += '  <tr>';
    html += '    <td style="padding: 4px 15px 0px 5px; vertical-align: middle; width: 20px; cursor: pointer;" onclick='+target+'>';
    html += '      <img src="http://www.google.com/intl/en_ALL/mapfiles/icon_' +type+ '_graybg.png">'
    html += '    </td>';
    html += '    <td style="vertical-align: middle;cursor: pointer;" onclick='+target+'>';
    html += '      ' + address + '<a href="#mapTop" class="skiplink" title="Click to return to map">Back to map</a>';
//    if (place && place.directions && place.directions!="")
//      html += '      <div class="printonly"><br/><strong>RA Directions:</strong> ' + place.directions + '</div>';
    html += '    </td>';
    html += '  </tr>';
    html += '</table>';
  }

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

  // === step detail ===
  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;">';
    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 += '      <strong> '+num+'. </strong>';
    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>';
  }

  // === Copyright tag ===
  function copyright(text) {
    html += '<div style="font-size: 0.86em;">' + text + "</div>";
  }

  function getPlaceAddress(place) {
    var loc = place;
    if (place && typeof place=="object") {
      loc = place.addrString;
    }
    return loc;
  }

  function getImageType(i) {
    return "green" + String.fromCharCode(65+i);
  }

  function summary(dirn,tripname) {
    html += "<div class='tripSummary'><strong>" + tripname + "</strong> - " + dirn.getSummaryHtml() + "</div>";
  }

  // === read through the GRoutes and GSteps ===

  var route, address, point;
  summary(dirn,tripname);
  for (var i=0; i<dirn.getNumRoutes(); i++) {
    var type=getImageType(i);
    route = dirn.getRoute(i);
    address = (places && places[i])?getPlaceAddress(places[i]):route.getStartGeocode().address;
    point = route.getStep(0).getLatLng();
    // === Waypoint at the start of each GRoute
    waypoint(point, type, address, places[i]);
    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);
    }
  }

  // === the final destination waypoint ===
  address = (places && places[i])?getPlaceAddress(places[i]):route.getEndGeocode().address;
  point = route.getEndLatLng();
  waypoint(point, getImageType(i), address, places[i]);

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

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

} // ============ end of customPanel function ===========