var tl;
function onLoad() {
  var eventSource = new Timeline.DefaultEventSource();
  var bandInfos = [
    Timeline.createHotZoneBandInfo({
        zones: [
            {   start:    "Jan 1 1800 00:00:00 EST",
                end:      "Jan 1 2008 00:00:00 EST",
                magnify:  0.001,
                unit:     Timeline.DateTime.YEAR
            },
            {   start:    "Jan 24 2008 00:00:00 EST",
                end:      "Feb 11 2008 00:00:00 EST",
                magnify:  10,
                unit:     Timeline.DateTime.HOUR
            }
        ],
        timeZone:       -5,
        eventSource:    eventSource,
        date:           "Jan 16 2008 00:00:00 GMT",
        width:          "70%", 
        intervalUnit:   Timeline.DateTime.DAY,
        intervalPixels: 100
    }),
    Timeline.createHotZoneBandInfo({
        zones: [
            {   start:    "Jan 1 1800 00:00:00 EST",
                end:      "Jan 1 2008 00:00:00 EST",
                magnify:  0.01,
                unit:     Timeline.DateTime.DECADE
            },
            {   start:    "Jan 24 2008 00:00:00 EST",
                end:      "Feb 11 2008 00:00:00 EST",
                magnify:  20,
                unit:     Timeline.DateTime.DAY
            }
        ],
        timeZone:       -5,
        showEventText:  false,
        trackHeight:    0.5,
        trackGap:       0.2,
        eventSource:    eventSource,
        date:           "Jan 16 2008 00:00:00 GMT",
        width:          "30%", 
        intervalUnit:   Timeline.DateTime.MONTH, 
        intervalPixels: 100
    })
  ];
  bandInfos[1].syncWith = 0;
  bandInfos[1].highlight = true;

  for (var i = 0; i < 1; i++) {
      bandInfos[i].decorators = [
          new Timeline.SpanHighlightDecorator({
              startDate:  "Jan 15 2008 23:11:00 GMT",
              endDate:    "Jan 19 2008 18:00:00 EST",
              color:      "#FFC080",
              opacity:    50,
              startLabel: "1st wave",
              endLabel:   ""
//              endLabel:   "raids"
//              theme:      theme
          }),
          new Timeline.SpanHighlightDecorator({
              startDate:  "Jan 21 2008 18:00:00 EST",
              endDate:    "Jan 22 2008 18:00:00 EST",
              color:      "#FFC080",
              opacity:    50,
              startLabel: "2nd wave",
              endLabel:   ""
//              endLabel:   "raids"
//              theme:      theme
          }),
          new Timeline.SpanHighlightDecorator({
              startDate:  "Jan 24 2008 18:00:00 EST",
              endDate:    "Jan 25 2008 18:00:00 EST",
              color:      "#FFC080",
              opacity:    50,
              startLabel: "3rd wave",
              endLabel:   ""
//              endLabel:   "raids"
//              theme:      theme
          }),
          new Timeline.SpanHighlightDecorator({
              startDate:  "Jan 30 2008 18:00:00 EST",
              endDate:    "Jan 31 2008 18:00:00 EST",
              color:      "#FFC080",
              opacity:    50,
              startLabel: "4th wave",
              endLabel:   ""
//              endLabel:   "raids"
//              theme:      theme
          }),
          new Timeline.SpanHighlightDecorator({
              startDate:  "Feb 10 2008 11:00:00 GMT+1200",
              endDate:    "Feb 10 2008 11:00:00 GMT-1200",
              color:      "#FFC080",
              opacity:    50,
              startLabel: "day of protest",
              endLabel:   ""
//              endLabel:   "raids"
//              theme:      theme
          }),
      ];
  }
  
  tl = Timeline.create(document.getElementById("scieno-timeline"), bandInfos);
  Timeline.loadXML("anon_v_scieno.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);
    }
}