var tl;

function onLoad() {
  var eventSource = new Timeline.DefaultEventSource();
    
  var theme = Timeline.ClassicTheme.create();
             theme.event.bubble.width = 420;
             theme.event.bubble.height = 220;
             theme.event.track.height = 1.5;
             theme.event.track.gap = 0.1;
             theme.event.instant.lineColor = "#990000";
             theme.event.duration.color = "#990000";
             theme.event.instant.impreciseColor = "#990000";
             theme.event.instant.impreciseOpacity = 20; 
             theme.event.label.insideColor = "white";
             theme.event.label.outsideColor = "#666633";
             theme.event.instant.icon = "../images/star_gray.gif";
             theme.ether.interval.weekend.opacity = 0;
             theme.ether.highlightColor = "#FFFFF0";
             theme.ether.highlightOpacity = 100;
             theme.ether.backgroundColors = [
                 "#FFFFF0",
                 "#CCCC99"
              ];
 
  var bandInfos = [
    Timeline.createHotZoneBandInfo({
        zones: [
            {   start:    "Sep 04 1862 00:00:00 GMT",
                end:      "Sep 21 1862 00:00:00 GMT",
                magnify:  2,
                unit:     Timeline.DateTime.DAY,               
                
            },
            {   start:    "Sep 14 1862 00:00:00 GMT",
                end:      "Sep 18 1862 00:00:00 GMT",
                magnify:  5,
                unit:     Timeline.DateTime.DAY,               
                
            },
            {   start:    "Sep 17 1862 05:00:00 GMT",
                end:      "Sep 17 1862 19:00:00 GMT",
                magnify:  10,
                unit:     Timeline.DateTime.MINUTE,
                multiple: 60
            }
        ],
        trackHeight:    1.3,
        trackGap:       0.1,
        timeZone:       0,
        theme:          theme,
        eventSource:    eventSource,
        date:           "Sep 17 1862 06:00:00 GMT",
        width:          "90%", 
        intervalUnit:   Timeline.DateTime.DAY, 
        intervalPixels: 100
    }),
    Timeline.createHotZoneBandInfo({
        zones: [
            {   start:    "Sep 04 1862 00:00:00 GMT",
                end:      "Sep 21 1862 00:00:00 GMT",
                magnify:  5,
                unit:     Timeline.DateTime.DAY
            }
        ],
        showEventText:  false,
        trackHeight:    0.1,
        trackGap:       0.0,
        timeZone:       0,
        theme:          theme,
        eventSource:    eventSource,
        date:           "Sep 17 1862 06:00:00 GMT",
        width:          "10%", 
        intervalUnit:   Timeline.DateTime.WEEK, 
        intervalPixels: 70
    })
  ];
  bandInfos[1].syncWith = 0;
  bandInfos[1].highlight = true;
  bandInfos[1].eventPainter.setLayout(bandInfos[0].eventPainter.getLayout());
  bandInfos[1].decorators = [
                  new Timeline.SpanHighlightDecorator({
                      startDate:  "Sep 04 1862 05:00:00 GMT",
                      endDate:    "Sep 21 1862 18:00:00 GMT",
                      startLabel: "campaign start >",
                      endLabel:   "< campaign end",
                      color:      "white",
                      opacity:    30,
                      theme:      theme
                  })
            ];
  
  tl = Timeline.create(document.getElementById("campaign-timeline"), bandInfos);
  Timeline.loadXML("campaignEvents.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);
    }
}