var tl;
function initTimeline() {
  var eventSource = new Timeline.DefaultEventSource();
  var bandInfos = [
     Timeline.createHotZoneBandInfo({
         zones: [
             {   start:    "Jan 01 1870 09:00:00 GMT",
                 end:      "Dec 31 1987 00:00:00 GMT",
                 magnify:  0.3,
                 unit:     Timeline.DateTime.YEAR
             },
             {   start:    "Jan 01 1869 09:00:00 GMT",
                 end:      "Dec 31 1869 09:00:00 GMT",
                 magnify:  500,
                 unit:     Timeline.DateTime.YEAR
             }
         ],
        eventSource:    eventSource,
        date:           "Jun 28 2007 00:00:00 GMT",
		width:          "70%", 
        intervalUnit:   Timeline.DateTime.YEAR, 
        intervalPixels: 100
    }),
     Timeline.createHotZoneBandInfo({
         zones: [
             {   start:    "Jan 01 1870 09:00:00 GMT",
                 end:      "Dec 31 1987 00:00:00 GMT",
                 magnify:  0.3,
                 unit:     Timeline.DateTime.DECADE
             },
             {   start:    "Jan 01 1859 09:00:00 GMT",
                 end:      "Dec 31 1869 09:00:00 GMT",
                 magnify:  500,
                 unit:     Timeline.DateTime.DECADE
             }
         ],
        showEventText:  false,
        trackHeight:    0.9,
        trackGap:       0.2,
        eventSource:    eventSource,
		date:           "Jun 28 2007 00:00:00 GMT",
		width:          "30%", 
        intervalUnit:   Timeline.DateTime.DECADE, 
        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("XML/WeirGroupTimeline.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);
    }
}

$(document).ready(function(){
 initTimeline()
});