var tl;

function onLoad() {
  var eventSource = new Timeline.DefaultEventSource();
  var bandInfos = [
    Timeline.createHotZoneBandInfo({
       zones: [
            {   start:    "Sep 18 2006 00:00:00 GMT-0500",
                end:      "Dec 13 2006 00:00:00 GMT-0500",
                magnify:  10,
                unit:     Timeline.DateTime.WEEK
            },
            //{   start:    "Sep 18 2006 00:00:00 GMT-0500-000",
             //   end:      "Dec 13 2006 00:00:00 GMT-0500-000",
              //  magnify:  7,
              //  unit:     Timeline.DateTime.DAY
            //}
        ],
        timeZone:       -5,
        eventSource:    eventSource,
        date:           "Nov 08 2006 00:00:00 GMT-0500",
        width:          "70%", 
        intervalUnit:   Timeline.DateTime.MONTH, 
        intervalPixels: 100
    }),
    Timeline.createHotZoneBandInfo({
        zones: [
            {   start:    "Sep 18 2006 00:00:00 GMT-0500",
                end:      "Dec 13 2006 00:00:00 GMT-0500",
                magnify:  20,
                unit:     Timeline.DateTime.WEEK
            }
        ],

        timeZone:       -5,
        showEventText:  false,
        trackHeight:    0.5,
        trackGap:       0.2,
        eventSource:    eventSource,
        date:           "Nov 08 2006 00:00:00 GMT-0500",
        width:          "30%", 
        intervalUnit:   Timeline.DateTime.YEAR, 
        intervalPixels: 200
    })
  ];

  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("/assets/data/project.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);
    }
}