var j=1.0;
var k=1;

var view = new ol.View({
    center: [30.0, 0.0],
    zoom: 3
  });

var map = new ol.Map({
  layers: [
    new ol.layer.Tile({
      source: new ol.source.MapQuest({layer: 'sat'})
    })
  ],
  renderer: exampleNS.getRendererFromQueryString(),
  target: 'map',
  view: view
});

console.log(view.getProjection());

map.on('postcompose', function(event) {
  var coordinates = [];
  var next = [];
  var photo = [];
  var caption = [];
  var trip_length = 10;
  var i = -1;
<?php
    $id=$_REQUEST['id'];
    /*Connect To Database*/
    $hostname='localhost';
    $username='traveler';
    $password='password';
    $dbname='travel';
    $con = mysqli_connect($hostname,$username, $password) OR DIE ('Unable to connect to database!');
    mysqli_select_db($con, $dbname);
    $sql1="SELECT lat, lon, next FROM trip_segment WHERE trip_id=".$id." ORDER BY datetime";
    $result = mysqli_query($con, $sql1);
    while($row = mysqli_fetch_array($result)) {
        echo "coordinates.push([".($row['lon']).", ".($row['lat'])."]);";
        echo "next.push(".$row['next'].");";
    }
    $sql2="SELECT filename, caption FROM trip_photo WHERE trip_id=".$id." ORDER BY id";
    $result = mysqli_query($con, $sql2);
    while($row = mysqli_fetch_array($result)) {
        echo "photo.push(\"".$row['filename']."\");";
        echo "caption.push(\"".$row['caption']."\");";
    }
    $sql3="SELECT DATEDIFF(end_date, start_date) AS length FROM trip WHERE id=".$id." LIMIT 1";
    $result = mysqli_query($con, $sql3);
    while($row = mysqli_fetch_array($result)) {
        echo "trip_length=".$row['length'].";";
    }
?>
  document.getElementById('trip_notes').innerHTML = "Trip length is " + trip_length + " days.";
  var vectorContext = event.vectorContext;
  for (i=1; i<k; i++) {
      var strokeStyle = new ol.style.Stroke({
            color: 'rgba(6,120,0,0.9)',
        	width: 3
      });        
      if (next[i] > -0.05) {
    	strokeStyle = new ol.style.Stroke({
            color: 'rgba(0,255,255,0.9)',
            width: 3
        });
      } else if (next[i] > -0.25) {
        strokeStyle = new ol.style.Stroke({
            color: 'rgba(0,255,0,0.9)',
            width: 3
        });
      } else if (next[i] > -0.5) {
        strokeStyle = new ol.style.Stroke({
            color: 'rgba(255,0,0,0.9)',
            width: 3
        });
      }
      var line = new ol.geom.LineString([ol.proj.transform(coordinates[i],"EPSG:4326","EPSG:3857"), ol.proj.transform(coordinates[i-1],"EPSG:4326","EPSG:3857")]);
      vectorContext.setFillStrokeStyle(null, strokeStyle);
      vectorContext.drawLineStringGeometry(line);
  }
  if(photo[k-1] != undefined) {
  	document.getElementById('thephoto').src = "images/" + photo[k-1];
  	document.getElementById('thecaption').innerHTML = caption[k-1];
  }
  map.getView().setCenter(ol.proj.transform(coordinates[k-1], 'EPSG:4326', 'EPSG:3857'));

  var e = document.getElementById("zoom");
  var zoom_level = e.options[e.selectedIndex].value;
  map.getView().setZoom(zoom_level);
  
  e = document.getElementById("speed");
  var divisor = e.options[e.selectedIndex].value;  
  j+=(coordinates.length-1)/divisor;
  k = Math.floor(j);
  
  if(j>=coordinates.length-1) {
  	j=1;
  	//j=coordinates.length-1;
  }
  map.render();
});
map.render();