Ext.onReady(function(){

	var tl;
	var eventSource = new Timeline.DefaultEventSource();
	var bandInfos = [
	 Timeline.createBandInfo({
			 width:          "70%", 
			 intervalUnit:   Timeline.DateTime.MONTH, 
			 eventSource:	eventSource,
			 intervalPixels: 100
	 }),
	 Timeline.createBandInfo({
			 width:          "30%", 
			 intervalUnit:	Timeline.DateTime.YEAR, 
			 eventSource:	eventSource,
			 overview: true,
			 intervalPixels: 200
	 })
	];
	bandInfos[1].syncWith = 0;
	bandInfos[1].highlight = true;	
	tl = Timeline.create(document.getElementById("my-timeline"), bandInfos);
	Timeline.loadJSON("timeline.txt", function(json, url) { eventSource.loadJSON(json, url); });
	
	var resizeTimerID = null;
	function onResize() {
		 if (resizeTimerID == null) {
				 resizeTimerID = window.setTimeout(function() {
						 resizeTimerID = null;
						 tl.layout();
				 }, 500);
		 }
	}
										 
});