diff --git a/www/pict-converter.sh b/www/pict-converter.sh
index 6cdaa8e..d0f92c0 100755
--- a/www/pict-converter.sh
+++ b/www/pict-converter.sh
@@ -53,9 +53,9 @@ function convert {
     # SRC
     src="${pict/public_html\/pictures\//}"
     # TIME
-    time="${pict/public_html\/pictures\/hehe-/}"
-    time="${time/.jpg/}"
-    # time=`exiftool 2>/dev/null -S --DateTimeOriginal -p '$DateTimeOriginal' -d %Y/%m/%d-%T "$pict"`
+    # time="${pict/public_html\/pictures\/hehe-/}"
+    # time="${time/.jpg/}"
+    time=`exiftool 2>/dev/null -S --DateTimeOriginal -p '$DateTimeOriginal' -d %Y-%m-%dT%T "$pict"`
     # GPS
     gps=`exiftool 2>/dev/null -n -p '$GPSLatitude,$GPSLongitude' $pict`
 
diff --git a/www/public_html/index.php b/www/public_html/index.php
index b0d9b89..f5413fd 100644
--- a/www/public_html/index.php
+++ b/www/public_html/index.php
@@ -14,7 +14,7 @@
         <h1>Lot Explorer</h1>
       </header>
       <section id="pictures">
-        <video autoplay poster="">
+        <video id="video" autoplay poster="">
           <!-- <source class="240p" src="videos/timelaps-240p.mp4" type="video/mp4">
           <source class="360p" src="videos/timelaps-360p.mp4" type="video/mp4">
           <source class="480p" src="videos/timelaps-480p.mp4" type="video/mp4">
diff --git a/www/public_html/js/dist/script.min.js b/www/public_html/js/dist/script.min.js
index 1f4537e..45fd495 100644
--- a/www/public_html/js/dist/script.min.js
+++ b/www/public_html/js/dist/script.min.js
@@ -1,4 +1,5 @@
 
-$(document).ready(function(){var _timeline,_timeline_container=document.getElementById('timeline'),_tl_data_ar;function init(){console.log("Init");getMetaData();setupTimeline();};function getMetaData(){console.log('getMetaData');$.ajax({dataType:"json",url:'metadata/frames.json',success:setUpData});console.log('getMetaData END');};function setUpData(data){console.log("setUpData");console.log("data",data);var frame;for(var i in data.frames){console.log(data.frames[i]);_tl_data_ar.push({start:data.frames[i],end:,});}};function setupTimeline(){var items=new vis.DataSet([{id:1,content:'item 1',start:'2016-06-20'},{id:2,content:'item 2',start:'2016-06-14'},{id:3,content:'item 3',start:'2016-06-18'},{id:4,content:'item 4',start:'2016-06-16',end:'2015-06-19'},{id:5,content:'item 5',start:'2016-06-25'},{id:6,content:'item 6',start:'2016-06-27',type:'point'}]);_timeline=new vis.Timeline(_timeline_container,items,{});}
-function play(millis){requestAnimationFrame(play);}
+$(document).ready(function(){var _video=document.getElementById('video'),_fps=24;var _timeline,_timeline_container=document.getElementById('timeline'),_tl_data_ar=[],_tl_items;function init(){console.log("Init");getMetaData();};function getMetaData(){console.log('getMetaData');$.ajax({dataType:"json",url:'metadata/frames.json',success:setUpData});console.log('getMetaData END');};function setUpData(data){console.log("setUpData");var frame;for(var i in data.frames){console.log(data.frames[i]);_tl_data_ar.push({start:new Date(data.frames[i].time),id:data.frames[i].frame});}
+setupTimeline();};function setupTimeline(){_tl_items=new vis.DataSet(_tl_data_ar);_timeline=new vis.Timeline(_timeline_container,_tl_items,{});_timeline.on('select',onSelectTimelineItem)}
+function onSelectTimelineItem(props){console.log("onSelectTimelineItem",props);seekVideoTo(props.items[0]);};function seekVideoTo(f){console.log("seekVideoTo frame",f);_video.pause();_video.currentTime=f/_fps;};function play(millis){requestAnimationFrame(play);}
 init();});
\ No newline at end of file
diff --git a/www/public_html/js/script.js b/www/public_html/js/script.js
index dc30b59..6247828 100644
--- a/www/public_html/js/script.js
+++ b/www/public_html/js/script.js
@@ -1,6 +1,7 @@
 $(document).ready(function() {
 
-  var _timeline, _timeline_container = document.getElementById('timeline'), _tl_data_ar;
+  var _video = document.getElementById('video'), _fps = 24;
+  var _timeline, _timeline_container = document.getElementById('timeline'), _tl_data_ar=[], _tl_items;
 
   function init(){
     console.log("Init");
@@ -10,7 +11,7 @@ $(document).ready(function() {
     //   play();
     // }, 5000);
     getMetaData();
-    setupTimeline();
+    // setupTimeline();
   };
 
   function getMetaData(){
@@ -28,37 +29,45 @@ $(document).ready(function() {
 
   function setUpData(data){
     console.log("setUpData");
-    console.log("data", data);
+    // console.log("data", data);
 
     var frame;
     for (var i in data.frames) {
       console.log(data.frames[i]);
       _tl_data_ar.push({
-        start:data.frames[i],
-        end:,
+        start:new Date(data.frames[i].time),
+        id:data.frames[i].frame
       });
     }
+
+    setupTimeline();
   };
 
   function setupTimeline(){
 
     // Create a DataSet (allows two way data-binding)
-    var items = new vis.DataSet([
-      {id: 1, content: 'item 1', start: '2016-06-20'},
-      {id: 2, content: 'item 2', start: '2016-06-14'},
-      {id: 3, content: 'item 3', start: '2016-06-18'},
-      {id: 4, content: 'item 4', start: '2016-06-16', end: '2015-06-19'},
-      {id: 5, content: 'item 5', start: '2016-06-25'},
-      {id: 6, content: 'item 6', start: '2016-06-27', type: 'point'}
-    ]);
+    _tl_items = new vis.DataSet(_tl_data_ar);
 
     // Configuration for the Timeline
     // var options = {};
 
     // Create a Timeline
-    _timeline = new vis.Timeline(_timeline_container, items, {});
+    _timeline = new vis.Timeline(_timeline_container, _tl_items, {});
+
+    _timeline.on('select', onSelectTimelineItem)
   }
 
+  function onSelectTimelineItem(props){
+    console.log("onSelectTimelineItem", props);
+    seekVideoTo(props.items[0]);
+  };
+
+  function seekVideoTo(f){
+    console.log("seekVideoTo frame", f);
+    _video.pause();
+    _video.currentTime = f/_fps;
+  };
+
   function play(millis){
     requestAnimationFrame(play);