var tl;
function onLoad() {
var eventSource = new Timeline.DefaultEventSource();
var bandInfos = [

    Timeline.createBandInfo({
		showEventText:  true,
        trackGap:       0.2,
        eventSource:    eventSource,
        date:           "Oct 1 1997 00:00:00 GMT",
        width:          "70%",
        intervalUnit:   Timeline.DateTime.MONTH,
        intervalPixels: 50
    }),

    Timeline.createBandInfo({
		showEventText:  false,
        trackHeight:    0.3,
        trackGap:       0.3,
		eventSource:    eventSource,
        date:           "Oct 1 1997 00:00:00 GMT",
        width:          "30%",
        intervalUnit:   Timeline.DateTime.YEAR,
        intervalPixels: 80
    })

  ];

  bandInfos[1].syncWith = 0;

  bandInfos[1].highlight = true;
    bandInfos[1].eventPainter.setLayout(bandInfos[0].eventPainter.getLayout());

  tl = Timeline.create(document.getElementById("my-timeline"), bandInfos);

  Timeline.loadXML("timeline_files/timeline1.xml", function(xml, url) { eventSource.loadXML(xml, url); });
}
var resizeTimerID = null;
function onResize() {
    if (resizeTimerID == null) {
        resizeTimerID = window.setTimeout(function() {
            resizeTimerID = null;
            tl.layout();
        }, 500);
    }
}