var tl;
var resizeTimerID = null;

jQuery(function(){
   var eventSource = new Timeline.DefaultEventSource(0);
      
      var theme = Timeline.ClassicTheme.create();
      theme.event.bubble.width = 220;
      theme.event.bubble.height = 75;
      var d = Timeline.DateTime.parseGregorianDateTime("2006")
      var bandInfos = [
          Timeline.createBandInfo({
              width:          "80%", 
              intervalUnit:   Timeline.DateTime.MONTH, 
              intervalPixels: 30,
              eventSource:    eventSource,
              date:           d,
              theme:          theme
          }),   
          Timeline.createBandInfo({
              showEventText:  false,
              trackHeight:    0.5,
              trackGap:       0.2,
              width:          "20%", 
              intervalUnit:   Timeline.DateTime.YEAR, 
              intervalPixels: 65,
              eventSource:    eventSource,
              date:           d,
              theme:          theme
          })
      ];
      
      bandInfos[1].syncWith = 0;
      bandInfos[1].highlight = true;
      bandInfos[1].eventPainter.setLayout(bandInfos[0].eventPainter.getLayout());
      
      tl = Timeline.create(document.getElementById("tl"), bandInfos);
      tl.loadJSON("/timeline-data.js", function(json, url) {
          eventSource.loadJSON(json, url);
      });
});
     
jQuery(window).resize(function(){
  if (resizeTimerID == null) {
          resizeTimerID = window.setTimeout(function() {
              resizeTimerID = null;
              tl.layout();
          }, 500);
      }
});