var tl;

function onLoad() {
	var eventSource = new Timeline.DefaultEventSource();
	
	var bandInfos = [
    Timeline.createBandInfo({
		eventSource:    eventSource,
        width:          "70%", 
        intervalUnit:   Timeline.DateTime.YEAR,
        intervalPixels: 40
	}),
    Timeline.createBandInfo({
    	showEventText:  false,
    	trackHeight:    0.4,
    	trackGap:       0.1,
    	eventSource:    eventSource,
        width:          "30%", 
        intervalUnit:   Timeline.DateTime.DECADE, 
        intervalPixels: 100
    })
	];
	
	bandInfos[1].syncWith = 0;
	bandInfos[1].highlight = true;
	
	var sd = new Date(); // today
	var ed = new Date();
	ed.setDate(ed.getDate()+20);
	var ed2 = new Date();
	ed2.setDate(ed2.getDate()+80);
	var start = Timeline.DateTime.parseGregorianDateTime(sd.toUTCString());
	var end = Timeline.DateTime.parseGregorianDateTime(ed.toUTCString());
	var end2 = Timeline.DateTime.parseGregorianDateTime(ed2.toUTCString());
	
  	bandInfos[0].decorators = [
  		new Timeline.SpanHighlightDecorator({
  			startDate: 	start,
  			endDate:	end,
  			startLabel: "",
  			endLabel:   "",
  			color:		"#FFC080",
  			opacity:	100
  		})
  	];
  	bandInfos[1].decorators = [
  		new Timeline.SpanHighlightDecorator({
  			startDate: 	start,
  			endDate:	end2,
  			startLabel: "",
  			endLabel:   "",
  			color:		"#FF9900",
  			opacity:	100
  		})
  	];
	tl = Timeline.create(document.getElementById("my-timeline"), bandInfos);
	Timeline.loadXML("/xml/teams.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);
    }
}