var tl;

function onLoad() {
  var eventSource = new Timeline.DefaultEventSource();
  var dateEvent = new Date();
  dateEvent.setTime(dateEvent.getTime());
  var evt = new Timeline.DefaultEventSource.Event(
     dateEvent, //start
     dateEvent, //end
     dateEvent, //latestStart
     dateEvent, //earliestEnd
     true, //instant
     "Event ",
     "Description for Event "
  );
  eventSource.add(evt);
  //create the timeline
  var bandInfos = [
    Timeline.createBandInfo({
        trackGap:       0.2,
        width:          "70%", 
        intervalUnit:   Timeline.DateTime.DAY, 
        intervalPixels: 50,
        eventSource: eventSource
    }),
    Timeline.createBandInfo({
        showEventText:  false,
        trackHeight:    0.5,
        trackGap:       0.2,
        width:          "30%", 
        intervalUnit:   Timeline.DateTime.MONTH, 
        intervalPixels: 150,
        eventSource: eventSource
    })
  ];
  bandInfos[1].syncWith = 0;
  bandInfos[1].highlight = true;
  tl = Timeline.create(document.getElementById("my-timeline"), bandInfos);
}

var resizeTimerID = null;
function onResize() {
    if (resizeTimerID == null) {
        resizeTimerID = window.setTimeout(function() {
            resizeTimerID = null;
            tl.layout();
        }, 500);
    }
}