<!doctype html>
<html lang="en">
<head>
<title>three.js - Jotunheimen</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<style>
    body { margin: 0; overflow: hidden; }
</style>
</head>
<body>
<div id="webgl"></div>

<script type="text/javascript" src="../../../endofyear/three.js"></script>
<script type="text/javascript" src="../../../d3.v3.min.js"></script>
<script type="text/javascript">
  var posPoints = []
  var width  = window.innerWidth,
        height = window.innerHeight,
        terrainSize = 1, // 60 x 60 km
        heightFactor = terrainSize / 12;

var scene = new THREE.Scene();
    scene.add(new THREE.AmbientLight(0xffffff));

 var camera = new THREE.PerspectiveCamera(45, width / height, 0.1, 100);
    camera.position.set(0, -terrainSize / 2, terrainSize / 2);


var renderer = new THREE.WebGLRenderer();
    renderer.setSize(width, height);


        renderer.render(scene, camera);

var projection = d3.geo.transverseMercator()
        .translate([terrainSize / 2, terrainSize / 2])
        .scale(terrainSize * 106.4)
        .rotate([-9, 0, 0])


function translate(point) {
        return [point[0] - (terrainSize / 2), (terrainSize / 2) - point[1]];
    }

 document.getElementById('webgl').appendChild(renderer.domElement);

    // render();

    function render() {
        // controls.update();
        requestAnimationFrame(render);
        renderer.render(scene, camera);
    }


  var isCentered = false;

  d3.xml("steve.tcx", "application/xml", function(xml) {
    var geometry = new THREE.Geometry();
    var activity = xml.firstChild.getElementsByTagName('Activities')[0]
    var run = activity.getElementsByTagName('Activity')[0]
    var laps = run.getElementsByTagName("Lap")

    for(var i = 0, len = laps.length; i < len; i++){
      var lap = laps[i];
      var track = lap.getElementsByTagName('Track')[0]
      var points = track.getElementsByTagName("Trackpoint")

      for(var n = 0, lenN = points.length; n < lenN; n++){
        var point = points[n]

        var time = point.getElementsByTagName('Time')
        var elev = point.getElementsByTagName('AltitudeMeters')
        var distance = point.getElementsByTagName('DistanceMeters')
        var position = point.getElementsByTagName('Position')

        var hash = {}
        if (time.length == 1){
          hash.time = time[0].textContent
        }
        if (elev.length == 1){
          hash.elev = parseFloat(elev[0].textContent)
        }
        if(distance.length == 1){
          hash.distance = parseFloat(distance[0].textContent)
        }
        if(position.length > 0){
          lat = position[0].getElementsByTagName("LatitudeDegrees")[0].textContent
          lng = position[0].getElementsByTagName("LongitudeDegrees")[0].textContent
          hash.lat = parseFloat(lat)
          hash.lng = parseFloat(lng)

if (isCentered === false){
            projection.center([hash.lng, hash.lat])
            isCentered = true
          }

          coord = translate(projection([hash.lng, hash.lat]));



        }
          console.log(coord)

         geometry.vertices.push(new THREE.Vector3(coord[0], coord[1], 2));

        posPoints.push(hash)
      }

        var material = new THREE.LineBasicMaterial({
            color: 0x909090,
            linewidth: 5
        });

        var line = new THREE.Line(geometry, material);
        scene.add(line);


    }


  // d3.select("#chart")
  //   .selectAll("div")
  //   .data(xml.documentElement.getElementsByTagName("value"))
  //   .enter().append("div")
  //     .style("width", function(d) { return d.textContent * 10 + "px"; })
  //     .text(function(d) { return d.textContent; });
});
</script>

</body>
</html>
