var tl;

function handleLoad()
{
  var eventSource = new Timeline.DefaultEventSource();

  var bandInfos = [];

  var threeBand = false;

  bandInfos.push(Timeline.createBandInfo({
    width: threeBand ? "80%" : "90%",
    intervalUnit: Timeline.DateTime.SECOND,
    intervalPixels: 100,
    date: event_data.events[0].start,
    eventSource: eventSource
  }));

  bandInfos.push(Timeline.createBandInfo({
    width: "10%",
    intervalUnit: Timeline.DateTime.MINUTE,
    intervalPixels: 200,
    date: event_data.events[0].start,
    eventSource: eventSource,
    overview: true
  }));

  bandInfos[bandInfos.length-1].syncWith = 0;
  bandInfos[bandInfos.length-1].highlight = true;

  if (threeBand) {
    bandInfos.push(Timeline.createBandInfo({
      width: "10%",
      intervalUnit: Timeline.DateTime.HOUR,
      intervalPixels: 200,
      date: event_data.events[0].start,
      eventSource: eventSource,
      overview: true
    }));
    bandInfos[bandInfos.length-1].syncWith = 1;
    bandInfos[bandInfos.length-1].highlight = true;
  }

  tl = Timeline.create(document.getElementById("startup-tl"), bandInfos);
  eventSource.loadJSON(event_data, document.location.href);
}

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

window.addEventListener("load", handleLoad, false);
window.addEventListener("resize", handleResize, false);