var tl;
        
function onLoad() {
    var eventSource = new Timeline.DefaultEventSource(0);
          
    var theme = Timeline.ClassicTheme.create();
    theme.event.instant.iconWidth = 38; // Add padding and borders
    theme.event.instant.iconHeight = 38;
    theme.event.tape.height = 6;
    theme.event.track.height = theme.event.tape.height + 6;
    theme.event.track.impreciseOpacity = 50;
    theme.event.duration.impreciseOpacity = 50;
          
    var d = Timeline.DateTime.parseGregorianDateTime(TIMELINE_START_YEAR)
          var bandInfos = [
                           Timeline.createBandInfo({
                                   width:          "10%", 
                                   intervalUnit:   Timeline.DateTime.DECADE, 
                                   intervalPixels: 200,
                                   date:           d,
                                   theme:          theme,
                                   layout:         'overview',
                                   showEventText:  false
                               }),
                           Timeline.createBandInfo({
                                   width:          "80%", 
                                   intervalUnit:   Timeline.DateTime.MONTH, 
                                   intervalPixels: 25,
                                   eventSource:    eventSource,
                                   date:           TIMELINE_START_DATE,
                                   theme:          theme,
                                   eventPainter:   Timeline.CompactEventPainter,
                                   eventPainterParams: {
                                       iconWidth:      40,
                                       iconHeight:     45,
                                       iconLabelGap:   3,
                                       tapeBottomMargin: 0,
                                       labelBottomMargin: 25,
                                       iconBottomMargin: 5
                                   }
                               }),
                           Timeline.createBandInfo({
                                   width:          "10%", 
                                   intervalUnit:   Timeline.DateTime.YEAR, 
                                   intervalPixels: 100,
                                   eventSource:    eventSource,
                                   date:           d,
                                   theme:          theme,
                                   layout:         'overview'  // original, overview, detailed
                               })
                           ];
    bandInfos[0].etherPainter = new Timeline.YearCountEtherPainter({
            startDate:  TIMELINE_START_DATE,
            multiple:   5,
            theme:      theme
        });
    bandInfos[0].syncWith = 1;
	bandInfos[0].highlight = true;
	bandInfos[0].decorators = [
                               new Timeline.SpanHighlightDecorator({
                                       startDate:  "Sep 15 1890 00:00:00 GMT",
                                       endDate:    "Jan 12 1976 00:00:00 GMT",
                                       startLabel: "Agatha Christie's age",
                                       endLabel:   "Agatha Christie's age",
                                       color:      "#cdb0a3",
                                       opacity:    50,
                                       theme:      theme
                                   })
                               ];
    bandInfos[2].syncWith = 1;
    bandInfos[2].highlight = true;
    tl = Timeline.create(document.getElementById("ac-timeline"), bandInfos, Timeline.HORIZONTAL);
    setupFilterHighlightControls(document.getElementById("controls"), tl, [1], theme);
    tl.loadXML(TIMELINE_XML_URL, function(xml, url) { eventSource.loadXML(xml, url); });
}
        
var resizeTimerID = null;
function onResize() {
    if (resizeTimerID == null) {
        resizeTimerID = window.setTimeout(function() {
                resizeTimerID = null;
                tl.layout();
            }, 500);
    }
}