var tl;
function onLoad(person1,person2,start) {

  var theme = Timeline.ClassicTheme.create();
  theme.event.label.width = 400; // px
  theme.event.bubble.width = 400;
  theme.event.bubble.height = 500;

  var eventSource1 = new Timeline.DefaultEventSource();
 var eventSource2 = new Timeline.DefaultEventSource();


  var bandInfos = [
    Timeline.createBandInfo({
        eventSource:    eventSource1,
        theme:          theme,
        date:           start,
        width:          "45%", 
        intervalUnit:   Timeline.DateTime.YEAR, 
        intervalPixels: 40
    }),
    Timeline.createBandInfo({
        eventSource:    eventSource2,
        theme:          theme,
        date:           start,
        width:          "45%", 
        intervalUnit:   Timeline.DateTime.YEAR, 
        intervalPixels: 40
    }),

    Timeline.createBandInfo({
        date:           start,
        width:          "10%", 
        intervalUnit:   Timeline.DateTime.DECADE, 
        intervalPixels: 40
    })

  ];
  bandInfos[1].syncWith = 0;
  bandInfos[1].highlight = true;
  bandInfos[2].syncWith = 0;
  bandInfos[2].highlight = true;
 
  tl = Timeline.create(document.getElementById("my-timeline"), bandInfos);
  Timeline.loadXML("personeventxml.xql?person="+person1, function(xml, url) { eventSource1.loadXML(xml, url); });
  t2 = Timeline.create(document.getElementById("my-timeline"), bandInfos);
  Timeline.loadXML("personeventxml.xql?person="+person2, function(xml, url) { eventSource2.loadXML(xml, url); });

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