// window level vars
var timeline;
var resizeTimerID = null;

jQuery(document).ready(function() {
  setupTimeline();
  
  // create tabs (thanks, jQuery!)
  jQuery('#tabs > ul').tabs();
});

jQuery(window).resize(function() {
  if (resizeTimerID == null) {
    resizeTimerID = window.setTimeout(function() {
      resizeTimerID = null;
      window.timeline.layout();
    }, 500);
  }
});

function setupTimeline() {
  var eventSource = new Timeline.DefaultEventSource();
  var bandInfos = [
    Timeline.createBandInfo({
        eventSource:    eventSource,
        date:           Date(), // this should probably be the latest date in the eventSource
        width:          "90%", 
        intervalUnit:   Timeline.DateTime.MONTH, 
        intervalPixels: 100,
        theme: SNAMP.SIMILE.SNAMPTheme.create()
    }),
    Timeline.createBandInfo({
        eventSource:    eventSource,
        date:           Date(), // this should probably be the latest date in the eventSource
        showEventText:  false,
        trackHeight:    0.5,
        trackGap:       0,
        width:          "10%", 
        intervalUnit:   Timeline.DateTime.YEAR, 
        intervalPixels: 200
    })
  ];
  bandInfos[1].syncWith = 0;
  bandInfos[1].highlight = true;
  
  timeline = Timeline.create(jQuery("#timelinediv")[0], bandInfos);
  Timeline.loadXML(TIMELINE_XML_URL, function(xml, url) { 
    eventSource.loadXML(xml, url); 
  });
  
  // bind the timeline nav buttons
  jQuery('#next-button').click(function() {
    timeline.getBand(0)._autoScroll(-500);
  });
  jQuery('#prev-button').click(function() {
    timeline.getBand(0)._autoScroll(500);
  });
  
  // Minor setup for the legend
  var default_icon = timeline.getBand(0).getEtherPainter()._theme.event.instant.icon;
  var default_color = timeline.getBand(0).getEtherPainter()._theme.event.duration.color;
  jQuery('#timeline-legend img.default').attr('src', default_icon);
  jQuery('#timeline-legend li span.default').css('background-color', default_color);
}