$(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');
    // $.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(d){
    console.log("setUpData");
    _frames = d.frames;
    // console.log(_frames);

    // for (var i in _frames) {
    //   // console.log(data.frames[i]);
    //   _tl_data_ar.push({
    //     start:new Date(_frames[i].datetime),
    //     id:_frames[i].id
    //   });
    // }

    // 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);

    // Configuration for the Timeline
    // var options = {};

    // Create a Timeline
    _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);
    // seekVideoTo(props.items[0]);
  };

  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;
    //
    // if(delta > interval){
    //   then = now -(delta % interval);
    // }
  }



  /* helpers */

  function vt2f(ct){
    // console.log("Video Time 2 frame");
    return Math.round(ct/(1/_fps));
    // console.log("frame", frame);
  }


  init();

});