var tl;
function onLoad() {
    var fedeventSource = new Timeline.DefaultEventSource();
    var disteventSource = new Timeline.DefaultEventSource();
    var geneventSource = new Timeline.DefaultEventSource();
    var combeventSource = new Timeline.DefaultEventSource();
    var theme = Timeline.ClassicTheme.create();
    theme.event.bubble.width = 360;
    theme.event.bubble.height = 250;
    var bandInfos = [
            Timeline.createHotZoneBandInfo({
                zones:  [
                    {   start:   "Aug 1 2007 00:00:00 GMT-0800",
                        end:     "Oct 20 2008 00:00:00 GMT-0800",
                        magnify: 7,
                        unit:    Timeline.DateTime.WEEK
                    },
                        { start: "Jun 1 2009 00:00:00 GMT-0800",
                            end: "Oct 20 2009 00:00:00 GMT-0800",
                            magnify: 4,
                            unit: Timeline.DateTime.WEEK
                        },
                        { start: "Jan 1 2010 00:00:00 GMT-0800",
                            end: "Mar 30 2010 00:00:00 GMT-0800",
                            magnify: 3,
                            unit: Timeline.DateTime.MONTH
                        },
                        { start: "May 1 2010 00:00:00 GMT-0800",
                            end: "Oct 20 2010 00:00:00 GMT-0800",
                            magnify: 2,
                            unit: Timeline.DateTime.MONTH
                        }
                        ],
                eventSource:    disteventSource,
               timeZone:       -8,
                width:          "37%", 
                intervalUnit:   Timeline.DateTime.MONTH, 
                intervalPixels: 50,
                theme:          theme
        }),
        Timeline.createHotZoneBandInfo({
                zones:  [
                    {   start:   "Aug 1 2007 00:00:00 GMT-0800",
                        end:     "Oct 20 2008 00:00:00 GMT-0800",
                        magnify: 7,
                        unit:    Timeline.DateTime.WEEK
                    },
                        { start: "Jun 1 2009 00:00:00 GMT-0800",
                            end: "Oct 20 2009 00:00:00 GMT-0800",
                            magnify: 4,
                            unit: Timeline.DateTime.WEEK
                        },
                         { start: "Jan 1 2010 00:00:00 GMT-0800",
                             end: "Mar 30 2010 00:00:00 GMT-0800",
                             magnify: 3,
                             unit: Timeline.DateTime.MONTH
                         },
                          { start: "May 1 2010 00:00:00 GMT-0800",
                              end: "Oct 20 2010 00:00:00 GMT-0800",
                              magnify: 2,
                              unit: Timeline.DateTime.MONTH
                          }
                        ],
                eventSource:    fedeventSource,
                timeZone:       -8,
                width:          "22.5%", 
                intervalUnit:   Timeline.DateTime.MONTH, 
                intervalPixels: 50,
                theme:          theme
        }),
        Timeline.createHotZoneBandInfo({
                zones:  [
                    {   start:   "Aug 1 2007 00:00:00 GMT-0800",
                        end:     "Oct 20 2008 00:00:00 GMT-0800",
                        magnify: 7,
                        unit:    Timeline.DateTime.WEEK
                    },
                        { start: "Jun 1 2009 00:00:00 GMT-0800",
                            end: "Oct 20 2009 00:00:00 GMT-0800",
                            magnify: 4,
                            unit: Timeline.DateTime.WEEK
                        },
                         { start: "Jan 1 2010 00:00:00 GMT-0800",
                             end: "Mar 30 2010 00:00:00 GMT-0800",
                             magnify: 3,
                             unit: Timeline.DateTime.MONTH
                         },
                         { start: "May 1 2010 00:00:00 GMT-0800",
                             end: "Oct 20 2010 00:00:00 GMT-0800",
                             magnify: 2,
                             unit: Timeline.DateTime.MONTH
                         }
                        ],
                eventSource:    geneventSource,
                timeZone:       -8,
                width:          "25.5%", 
                intervalUnit:   Timeline.DateTime.MONTH, 
                intervalPixels: 50,
                theme:          theme
        }),
    
        Timeline.createHotZoneBandInfo ({
                zones:  [
                    {   start:   "Aug 1 2007 00:00:00 GMT-0800",
                        end:     "Oct 20 2008 00:00:00 GMT-0800",
                        magnify: 12,
                        unit:    Timeline.DateTime.MONTH
                        }
                        ],
            showEventText:  false,
            trackHeight:    0.5,
            trackGap:       -.4,
            eventSource:    combeventSource,
            width:          "15%", 
            intervalUnit:   Timeline.DateTime.YEAR, 
            intervalPixels: 60,
            theme:          theme
    })
  ];

 bandInfos[1].syncWith = 0;
 bandInfos[2].syncWith = 0;
 bandInfos[3].syncWith = 0;
 bandInfos[3].highlight = true; 

  tl = Timeline.create(document.getElementById("my-timeline"), bandInfos);
  Timeline.loadXML("hspd12circuit.xml", function(xml, url) { fedeventSource.loadXML(xml, url); });
  Timeline.loadXML("hspd12district.xml", function(xml, url) { disteventSource.loadXML(xml, url); });
  Timeline.loadXML("hspd12events.xml", function(xml, url) { geneventSource.loadXML(xml, url); });
  Timeline.loadXML("hspd12district.xml", function(xml, url) { combeventSource.loadXML(xml, url); });
  Timeline.loadXML("hspd12circuit.xml", function(xml, url) { combeventSource.loadXML(xml, url); });
  Timeline.loadXML("hspd12events.xml", function(xml, url) { combeventSource.loadXML(xml, url); });
}

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