var tl;
function onLoad() {
  var eventSource = new Timeline.DefaultEventSource();
  var date = "Sep 01 1997 00:00:00 GMT-0800";
  var bandInfos = [
    Timeline.createBandInfo({
      eventSource:    eventSource,	  date:           date,      width:          "90%",       intervalUnit:   Timeline.DateTime.MONTH,       intervalPixels: 200	      }),
    Timeline.createBandInfo({      showEventText:  false,	  trackHeight:    0.2,	  trackGap:       0.2,	  eventSource:    eventSource,	  date:           date,      width:          "10%",       intervalUnit:   Timeline.DateTime.YEAR,       intervalPixels: 50    })
  ];
  bandInfos[1].syncWith = 0;
  bandInfos[1].highlight = true;
  bandInfos[1].eventPainter.setLayout(bandInfos[0].eventPainter.getLayout());

  tl = Timeline.create(document.getElementById("tl"), bandInfos, Timeline.HORIZONTAL);
  Timeline.loadXML("http://www.shmula.com/blog/timelines/google-microsoft-yahoo/g-y-m.xml", function(xml, url) { eventSource.loadXML(xml, url); });
}
var resizeTimerID = null;
function onResize() {
    if (resizeTimerID == null) {
        resizeTimerID = window.setTimeout(function() {
            resizeTimerID = null;
            tl.layout();
        }, 800);
    }
}