anchor.diff:      <script type="application/javascript">
         function _t(t) { return document.getElementsByTagName(t)[0]; }
         function _c(c) { return document.getElementsByClassName(c)[0]; }
  +      function round(number) { return Math.round(number * 100) / 100; }
  +      function format_duration(seconds) {
  +        var result = "";
  +        var hours   = Math.floor(seconds / 3600);
  +        var minutes = Math.floor((seconds - (hours * 3600)) / 60);
  +
  +        if (hours == 1) { result += hours + " hour"; }
  +        else if (hours > 0) { result += hours + " hours";}
  +
  +        if (hours > 0 && minutes > 0) { result += " and "; }
  +
  +        if (minutes == 1) { result += hours + " minute"; }
  +        if (minutes > 0) {result += minutes + " minutes"; }
  +
  +        return result;
  +      }
   
         var map = new L.Map('demo-map');
   
         var url = 'http://otile{s}.mqcdn.com/tiles/1.0.0/map/{z}/{x}/{y}.jpeg';
  -      var attribution = 'Tiles Courtesy of <a href="http://www.mapquest.com/">MapQuest</a> &mdash; Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>';
  +      var attribution = '<a href="http://www.mapquest.com/">MapQuest</a> &mdash; Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors</a>';
         var tileLayer = new L.TileLayer(url, {subdomains:"1234",attribution: attribution});
   
         var geojson = <%= @geo_json %>;
  
positive.code:   </head>
    <body>
      <section id="demo" class="gpx" data-gpx-source="http://localhost:8081/mckerrow.gpx" data-map-target="demo-map">
        <header>
          <h3>Loading...</h3>
          <span class="start"></span>
        </header>
  
        <article>
          <div class="map" id="demo-map"></div>
        </article>
  
        <footer>
          <ul class="info">
            <li>Distance:&nbsp;<span class="distance"></span>&nbsp;m</li>
            &mdash; <li>Duration:&nbsp;<span class="duration"></span></li>
            &mdash; <li>Pace:&nbsp;<span class="pace"></span>/km</li>
            &mdash; <li>Elevation:&nbsp;+<span class="elevation-gain"></span>&nbsp;m,
              -<span class="elevation-loss"></span>&nbsp;m
              (net:&nbsp;<span class="elevation-net"></span>&nbsp;m)</li>
          </ul>
        </footer>
      </section>
  
negative.code:       });
        elevation.addTo(map);
  
        var gjl = L.geoJson(geojson,{ onEachFeature: function(feature, layer) { elevation.addData.bind(elevation)(feature, layer); } }).addTo(map);
  
        map.addLayer(tileLayer).fitBounds(gjl.getBounds());
  
        _c('distance').textContent = round(geojson.properties.distance / 1000);
        _c('duration').textContent = format_duration(geojson.properties.moving_duration);
        _c('average-speed').textContent = round(geojson.properties.average_moving_speed);
        _c('elevation-gain').textContent = round(geojson.properties.uphill_elevation);
        _c('elevation-loss').textContent = -1 * round(geojson.properties.downhill_elevation);
      </script>
    </body>
  </html>
  