var tl;
function onLoad(center) {
	document.getElementById('my-timeline').className = 'timeline';
  var eventSource = new Timeline.DefaultEventSource();
  var bandInfos = [
    Timeline.createBandInfo({
        eventSource:    eventSource,
        date:           center,
        width:          "75%",
	    showEventText:  true, 
        intervalUnit:   Timeline.DateTime.YEAR, 
        intervalPixels: 75
    }),
    Timeline.createBandInfo({
        eventSource:    eventSource,
        date:           center,
        width:          "25%",
	    showEventText:  false,
                    trackHeight:    0.75,
                    trackGap:       0.25,
        intervalUnit:   Timeline.DateTime.DECADE, 
        intervalPixels: 150
    })
  ];
  bandInfos[1].syncWith = 0;
  bandInfos[1].highlight = true;
  
  var tl = Timeline.create(document.getElementById("my-timeline"), bandInfos);
  Timeline.loadXML("JG.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);
    }
}

/** customization **/