diff --git a/www/public_html/css/dist/styles.min.css b/www/public_html/css/dist/styles.min.css
index 9305996..7e1b41e 100644
--- a/www/public_html/css/dist/styles.min.css
+++ b/www/public_html/css/dist/styles.min.css
@@ -1 +1 @@
-#pictures,body,html{position:relative;overflow:hidden}#pictures,#pictures video,#root,body,html{width:100%;height:100%}#map,#timeline{position:absolute;z-index:9;bottom:0;left:0;background-color:rgba(255,255,255,.6);border-radius:2px}body,html{margin:0;padding:0;background-color:#000}#root{position:relative}#header{position:absolute;z-index:10;top:0;left:0}#pictures{z-index:5}#pictures video source:not(.1080p){display:none}#timeline{width:67%;margin:1% 0 1% 32%;height:3em}#map{width:30%;margin:1%;height:40%}
\ No newline at end of file
+#timelaps,body,html{position:relative;overflow:hidden}#root,#timelaps,body,html{width:100%;height:100%}#map,#timeline{z-index:9;bottom:0}#header,#map,#timeline{position:absolute;left:0}body,html{margin:0;padding:0;background-color:#000}#root{position:relative}#header{z-index:10;top:0}#timelaps{z-index:5}#timelaps video#timelapsvid{position:absolute;top:0;left:0;width:100%;height:100%}@media (min-aspect-ratio:16 / 9){#timelaps video#timelapsvid{height:300%;top:-100%}}@media (max-aspect-ratio:16 / 9){#timelaps video#timelapsvid{width:300%;left:-100%}}#timeline{width:67%;margin:1% 0 1% 32%;padding:7px;background-color:rgba(0,0,0,.8);border-radius:2px}#timeline .vis-background,#timeline .vis-background.vis-horizontal,#timeline .vis-background.vis-vertical,#timeline .vis-panel.vis-bottom,#timeline .vis-panel.vis-center,#timeline .vis-panel.vis-top,#timeline .vis-time-axis,#timeline .vis-timeline{border:none}#timeline .vis-text{color:#fff}#timeline .vis-custom-time.videotime{background-color:red}#map{width:30%;margin:1%;height:40%;background-color:rgba(255,255,255,.6);border-radius:2px;display:none}
\ No newline at end of file
diff --git a/www/public_html/css/styles.css b/www/public_html/css/styles.css
index 0cc3087..d55d349 100644
--- a/www/public_html/css/styles.css
+++ b/www/public_html/css/styles.css
@@ -18,17 +18,26 @@ html, body {
   top: 0;
   left: 0; }
 
-#pictures {
+#timelaps {
   position: relative;
   z-index: 5;
   width: 100%;
   height: 100%;
   overflow: hidden; }
-  #pictures video {
+  #timelaps video#timelapsvid {
+    position: absolute;
+    top: 0;
+    left: 0;
     width: 100%;
     height: 100%; }
-    #pictures video source:not(.1080p) {
-      display: none; }
+    @media (min-aspect-ratio: 16 / 9) {
+      #timelaps video#timelapsvid {
+        height: 300%;
+        top: -100%; } }
+    @media (max-aspect-ratio: 16 / 9) {
+      #timelaps video#timelapsvid {
+        width: 300%;
+        left: -100%; } }
 
 #timeline {
   position: absolute;
@@ -37,9 +46,19 @@ html, body {
   left: 0;
   width: 67%;
   margin: 1% 0 1% 32%;
-  height: 3em;
-  background-color: rgba(255, 255, 255, 0.6);
+  padding: 7px;
+  background-color: rgba(0, 0, 0, 0.8);
   border-radius: 2px; }
+  #timeline .vis-timeline {
+    border: none; }
+  #timeline .vis-time-axis,
+  #timeline .vis-background, #timeline .vis-background.vis-horizontal, #timeline .vis-background.vis-vertical,
+  #timeline .vis-panel.vis-center, #timeline .vis-panel.vis-top, #timeline .vis-panel.vis-bottom {
+    border: none; }
+  #timeline .vis-text {
+    color: white; }
+  #timeline .vis-custom-time.videotime {
+    background-color: red; }
 
 #map {
   position: absolute;
@@ -50,4 +69,5 @@ html, body {
   margin: 1%;
   height: 40%;
   background-color: rgba(255, 255, 255, 0.6);
-  border-radius: 2px; }
+  border-radius: 2px;
+  display: none; }
diff --git a/www/public_html/index.php b/www/public_html/index.php
index f5413fd..95c4d32 100644
--- a/www/public_html/index.php
+++ b/www/public_html/index.php
@@ -1,3 +1,8 @@
+<?php
+header("Cache-Control: no-store, no-cache, must-revalidate, max-age=0");
+header("Cache-Control: post-check=0, pre-check=0", false);
+header("Pragma: no-cache");
+?>
 <!DOCTYPE html>
 <html>
   <head>
@@ -13,13 +18,13 @@
       <header id="header">
         <h1>Lot Explorer</h1>
       </header>
-      <section id="pictures">
-        <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">
-          <source class="720p" src="videos/timelaps-720p.mp4" type="video/mp4"> -->
-          <source class="1080p" src="videos/timelaps-1080p.mp4" type="video/mp4">
+      <section id="timelaps">
+        <video id="timelapsvid" loop preload autoplay>
+          <!-- <source class="240p" src="videos/timelaps-240p.mp4?nocache=<?php echo time(); ?>" type="video/mp4">
+          <source class="360p" src="videos/timelaps-360p.mp4?nocache=<?php echo time(); ?>" type="video/mp4">
+          <source class="480p" src="videos/timelaps-480p.mp4?nocache=<?php echo time(); ?>" type="video/mp4">
+          <source class="720p" src="videos/timelaps-720p.mp4?nocache=<?php echo time(); ?>" type="video/mp4"> -->
+          <source class="1080p" src="videos/timelaps-1080p.mp4?nocache=<?php echo time(); ?>" type="video/mp4">
         </video>
       </section>
       <!-- // pictures -->
diff --git a/www/public_html/js/dist/script.min.js b/www/public_html/js/dist/script.min.js
index 45fd495..ad77120 100644
--- a/www/public_html/js/dist/script.min.js
+++ b/www/public_html/js/dist/script.min.js
@@ -1,5 +1,7 @@
 
-$(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);}
+$(document).ready(function(){var _frames,_frames_length;var _$timelaps=$('#timelaps'),_$video=$("#timelapsvid"),_video=document.getElementById('timelapsvid'),_fps=12,_vid_current_time;var _timeline,_timeline_container=document.getElementById('timeline'),_tl_data_ar=[],_tl_items,_tl_start,_tl_end;function init(){console.log("Init");loadData();};function loadData(){console.log('loadData');$.ajax({dataType:"json",url:'metadata/frames.json',cache:false,success:setUpData});console.log('getMetaData END');};function setUpData(d){console.log("setUpData");_frames=d.frames;_tl_start=new Date(_frames[0].datetime);_tl_end=new Date(_frames[_frames.length-1].datetime);initDataReady();};function initDataReady(){console.log("initDataReady");setupTimeline();setupVideoEvents();play();}
+function setupTimeline(){_timeline=new vis.Timeline(_timeline_container,[],{height:'50px',showCurrentTime:false,start:_tl_start,end:_tl_end,stack:false});_timeline.addCustomTime(_tl_start,"videotime");_timeline.on('click',onClickTimeline)}
+function onClickTimeline(props){console.log("onClickTimeline",props.time);};function moveTimelineCursor(date){_timeline.setCustomTime(date,"videotime",{animation:false});_timeline.moveTo(date,{animation:false});}
+function setupVideoEvents(){_$video.on("click",onClickVid);};function onClickVid(e){console.log("onClickVid",e);if(_video.paused){_video.play();}else{_video.pause();}};function play(millis){requestAnimationFrame(play);if(!_video.paused){moveTimelineCursor(_frames[vt2f(_video.currentTime)].datetime);}}
+function vt2f(ct){return Math.round(ct/(1/_fps));}
 init();});
\ No newline at end of file
diff --git a/www/public_html/js/script.js b/www/public_html/js/script.js
index 6247828..0060b77 100644
--- a/www/public_html/js/script.js
+++ b/www/public_html/js/script.js
@@ -1,76 +1,119 @@
 $(document).ready(function() {
 
-  var _video = document.getElementById('video'), _fps = 24;
-  var _timeline, _timeline_container = document.getElementById('timeline'), _tl_data_ar=[], _tl_items;
+  var _frames, _frames_length;
+  var _$timelaps = $('#timelaps'), _$video = $("#timelapsvid"), _video = document.getElementById('timelapsvid'), _fps = 12, _vid_current_time;
+  var _timeline, _timeline_container = document.getElementById('timeline'),
+      _tl_data_ar = [], _tl_items, _tl_start, _tl_end;
 
   function init(){
     console.log("Init");
-    // preload all pictures before launching
 
-    // setTimeout(function(){
-    //   play();
-    // }, 5000);
-    getMetaData();
-    // setupTimeline();
+    loadData();
   };
 
-  function getMetaData(){
-    console.log('getMetaData');
+  function loadData(){
+    console.log('loadData');
     // $.getJSON('metadata/frame.json',function(data){
     //   setUpData(data.frames)
     // });
     $.ajax({
       dataType:"json",
       url:'metadata/frames.json',
+      cache: false,
       success:setUpData
     });
     console.log('getMetaData END');
   };
 
-  function setUpData(data){
+  function setUpData(d){
     console.log("setUpData");
-    // console.log("data", data);
+    _frames = d.frames;
+    // console.log(_frames);
 
-    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
-      });
-    }
+    // for (var i in _frames) {
+    //   // console.log(data.frames[i]);
+    //   _tl_data_ar.push({
+    //     start:new Date(_frames[i].datetime),
+    //     id:_frames[i].id
+    //   });
+    // }
 
-    setupTimeline();
+    // console.log("_frames[_frames.length]",_frames[_frames.length-1]);
+
+    _tl_start= new Date(_frames[0].datetime);
+    _tl_end= new Date(_frames[_frames.length-1].datetime);
+    // console.log('_tl_start : '+_tl_start+" | _tl_end"+_tl_end);
+
+    initDataReady();
   };
 
+  function initDataReady(){
+    console.log("initDataReady");
+    setupTimeline();
+    setupVideoEvents();
+
+    play();
+  }
+
   function setupTimeline(){
 
     // Create a DataSet (allows two way data-binding)
-    _tl_items = new vis.DataSet(_tl_data_ar);
+    // _tl_items = new vis.DataSet(_tl_data_ar);
 
     // Configuration for the Timeline
     // var options = {};
 
     // Create a Timeline
-    _timeline = new vis.Timeline(_timeline_container, _tl_items, {});
+    _timeline = new vis.Timeline(_timeline_container, [], {
+      height:'50px',
+      showCurrentTime:false,
+      start:_tl_start,
+      end:_tl_end,
+      stack:false
+    });
 
-    _timeline.on('select', onSelectTimelineItem)
+    _timeline.addCustomTime(_tl_start, "videotime");
+
+    _timeline.on('click', onClickTimeline)
   }
 
-  function onSelectTimelineItem(props){
-    console.log("onSelectTimelineItem", props);
-    seekVideoTo(props.items[0]);
+  function onClickTimeline(props){
+    console.log("onClickTimeline", props.time);
+    // seekVideoTo(props.items[0]);
   };
 
-  function seekVideoTo(f){
-    console.log("seekVideoTo frame", f);
-    _video.pause();
-    _video.currentTime = f/_fps;
+  function moveTimelineCursor(date){
+    _timeline.setCustomTime(date, "videotime", {animation:false});
+    _timeline.moveTo(date, {animation:false});
+  }
+
+  function setupVideoEvents(){
+    // console.log("setupVideoEvents");
+    _$video.on("click", onClickVid);
   };
 
+  function onClickVid(e){
+    console.log("onClickVid",e);
+    if(_video.paused){
+      _video.play();
+    }else{
+      _video.pause();
+    }
+  };
+
+  // function seekVideoTo(f){
+  //   console.log("seekVideoTo frame", f);
+  //   _video.pause();
+  //   _video.currentTime = f/_fps;
+  // };
+
   function play(millis){
     requestAnimationFrame(play);
+    // console.log("_video.playing",_video.paused);
 
+    if (!_video.paused) {
+      moveTimelineCursor(_frames[vt2f(_video.currentTime)].datetime);
+    }
     // now = Date.now();
     // delta = now - then;
     //
@@ -81,6 +124,14 @@ $(document).ready(function() {
 
 
 
+  /* helpers */
+
+  function vt2f(ct){
+    // console.log("Video Time 2 frame");
+    return Math.round(ct/(1/_fps));
+    // console.log("frame", frame);
+  }
+
 
   init();
 
diff --git a/www/public_html/scss/styles.scss b/www/public_html/scss/styles.scss
index b3eeea2..38b425d 100644
--- a/www/public_html/scss/styles.scss
+++ b/www/public_html/scss/styles.scss
@@ -16,26 +16,56 @@ html, body{
   top:0; left:0;
 }
 
-#pictures{
+#timelaps{
   position: relative; z-index: 5;
   width:100%; height:100%;
   overflow: hidden;
   // border: 1px solid blue;
 
-  video {
+  video#timelapsvid {
+    position: absolute;
+    top: 0; left: 0;
     width:100%; height:100%;
-    source:not(.1080p){
-      display:none;
+    // source:not(.1080p){
+    //   display:none;
+    // }
+
+    @media (min-aspect-ratio: 16/9) {
+      height: 300%;
+      top: -100%;
     }
+
+    @media (max-aspect-ratio: 16/9) {
+      width: 300%;
+      left: -100%;
+    }
+
+
   }
 
 }
 
 #timeline{
   position: absolute; z-index: 9;
-  bottom:0; left:0; width:67%; margin:1% 0 1% 32%; height:3em;
-  background-color: rgba(255, 255, 255, 0.6);
+  bottom:0; left:0; width:67%; margin:1% 0 1% 32%; padding:7px;
+  background-color: rgba(0, 0, 0, 0.8);
   border-radius: 2px;
+
+  .vis-timeline{
+    border:none;
+  }
+  .vis-time-axis,
+  .vis-background, .vis-background.vis-horizontal, .vis-background.vis-vertical,
+  .vis-panel.vis-center, .vis-panel.vis-top, .vis-panel.vis-bottom{
+    border:none;
+  }
+  .vis-text{
+    color:white;
+  }
+
+  .vis-custom-time.videotime{
+    background-color: red;
+  }
 }
 
 
@@ -44,4 +74,5 @@ html, body{
   bottom:0; left:0; width:30%; margin:1%; height:40%;
   background-color: rgba(255, 255, 255, 0.6);
   border-radius: 2px;
+  display: none;
 }
