<!DOCTYPE HTML>
<html>
<head>
  <title>Timeline | Edit items</title>

  <style type="text/css">
    body, html {
      font-family: sans-serif;
    }
  </style>

  <script src="../../dist/vis.js"></script>
  <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
</head>
<body>
  <div id="visualization"></div>
  <p></p>
  <div id="log"></div>

  <script type="text/javascript">
    var items = new vis.DataSet();
    items.add([
      {id: 1, content: 'item 1', start: new Date(2013, 3, 20)},
      {id: 2, content: 'item 2', start: new Date(2013, 3, 14)},
      {id: 3, content: 'item 3', start: new Date(2013, 3, 18)},
      {id: 4, content: 'item 4', start: new Date(2013, 3, 16), end: new Date(2013, 3, 19)},
      {id: 5, content: 'item 5', start: new Date(2013, 3, 25)},
      {id: 6, content: 'item 6', start: new Date(2013, 3, 27)}
    ]);

    var container = document.getElementById('visualization');
    var options = {
      editable: true,

      onAdd: function (item, callback) {
        item.content = prompt('Enter text content for new item:', item.content);
        if (item.content != null) {
          callback(item); // send back adjusted new item
        }
        else {
          callback(null); // cancel item creation
        }
      },

      onMove: function (item, callback) {
        if (confirm('Do you really want to move the item to\n' +
            'start: ' + item.start + '\n' +
            'end: ' + item.end + '?')) {
          callback(item); // send back item as confirmation (can be changed
        }
        else {
          callback(null); // cancel editing item
        }
      },

      onUpdate: function (item, callback) {
        item.content = prompt('Edit items text:', item.content);
        if (item.content != null) {
          callback(item); // send back adjusted item
        }
        else {
          callback(null); // cancel updating the item
        }
      },

      onRemove: function (item, callback) {
        if (confirm('Remove item ' + item.content + '?')) {
          callback(item); // confirm deletion
        }
        else {
          callback(null); // cancel deletion
        }
      }
    };
    var timeline = new vis.Timeline(container, items, options);

    items.on('*', function (event, properties) {
      logEvent(event, properties);
    });

    function logEvent(event, properties) {
      var log = document.getElementById('log');
      var msg = document.createElement('div');
      msg.innerHTML = 'event=' + JSON.stringify(event) + ', ' +
          'properties=' + JSON.stringify(properties);
      log.firstChild ? log.insertBefore(msg, log.firstChild) : log.appendChild(msg);
    }

  </script>
</body>
</html>