$(document).ready(function() {

  var _timeline, _timeline_container = document.getElementById('timeline'), _tl_data_ar;

  function init(){
    console.log("Init");
    // preload all pictures before launching

    // setTimeout(function(){
    //   play();
    // }, 5000);
    getMetaData();
    setupTimeline();
  };

  function getMetaData(){
    console.log('getMetaData');
    // $.getJSON('metadata/frame.json',function(data){
    //   setUpData(data.frames)
    // });
    $.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(){

    // 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'}
    ]);

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

    // Create a Timeline
    _timeline = new vis.Timeline(_timeline_container, items, {});
  }

  function play(millis){
    requestAnimationFrame(play);

    // now = Date.now();
    // delta = now - then;
    //
    // if(delta > interval){
    //   then = now -(delta % interval);
    // }
  }




  init();

});