var tl;

 function onLoad() {
		 
   //Tweets shown in overview and detail bands
   var eventSource = new Timeline.DefaultEventSource();
   var tweetTheme = Timeline.ClassicTheme.create(); // create the theme
   tweetTheme.event.bubble.width = 300;   
   tweetTheme.event.bubble.height = 300;
 
   //For schedule band
   var eventSource2 = new Timeline.DefaultEventSource(); 
   var scheduleTheme = Timeline.ClassicTheme.create(); // create the theme
   scheduleTheme.event.track.height = 5;
   scheduleTheme.event.tape.height = 15;
   
   //define the bands
   var bandInfos = [
		Timeline.createBandInfo({
		overview:       true,
	    width:          "5%",
	    date:           "Dec 01 2009 09:45:00 GMT",          
	    intervalUnit:   Timeline.DateTime.DAY, 
	    eventSource:    eventSource, 
	    intervalPixels: 800
	}),   
	Timeline.createBandInfo({
	    width:          "20%",
	    date:           "Dec 01 2009 09:45:00 GMT",          
	    intervalUnit:   Timeline.DateTime.HOUR, 
	    eventSource:    eventSource2, 
	    theme: scheduleTheme,
	    intervalPixels: 400
		}),  
     Timeline.createBandInfo({
         width:          "75%", 
         date:           "Dec 01 2009 09:45:00 GMT",         
         intervalUnit:   Timeline.DateTime.HOUR, 
         eventSource:    eventSource, 
         theme: tweetTheme,
         intervalPixels: 400
     })
     
   ];
   bandInfos[0].syncWith = 1;
   bandInfos[0].syncWith = 2;
   bandInfos[1].syncWith = 2;
   bandInfos[0].highlight = true;
   
 
   
   tl = Timeline.create(document.getElementById("tweetline"), bandInfos);   
   tl.loadXML("online09.xml", function(xml, url) { eventSource.loadXML(xml, url); });
   tl.loadXML("online09schedule.xml", function(xml, url) { eventSource2.loadXML(xml, url); });
  
   //add nav & filter functions
   document.getElementById("d2").onclick = function(){return movetoDay("Tue, 01 Dec 2009 09:45:00 +0000");};
   document.getElementById("d3").onclick = function(){return movetoDay("Wed, 02 Dec 2009 09:30:00 +0000");};
   document.getElementById("d4").onclick = function(){return movetoDay("Thu, 03 Dec 2009 09:35:00 +0000");};
   document.getElementById("fb").onclick = function(){return performFilter();};
   document.getElementById("cl").onclick = function(){return clearFilter();};

 }

 var resizeTimerID = null;
 
 function movetoDay(theDate){
	 tl.getBand(0).setCenterVisibleDate(Timeline.DateTime.parseGregorianDateTime(theDate));	 
	 tl.getBand(1).setCenterVisibleDate(Timeline.DateTime.parseGregorianDateTime(theDate));	 
	 tl.getBand(2).setCenterVisibleDate(Timeline.DateTime.parseGregorianDateTime(theDate));	 
	 return false;
 }
 
 function performFilter(){
	 var filterText = document.getElementById("ft").value;
	 var filterMatcher = null;
	 if (filterText.length > 0) {
	     var regex = new RegExp(filterText, "i");
	     filterMatcher = function(evt) {
	        return regex.test(evt.getDescription());
	     };
		 tl.getBand(2).getEventPainter().setFilterMatcher(filterMatcher);	
		 tl.paint();
	 }
	 return false;
 }
 
 function clearFilter(){
	 tl.getBand(2).getEventPainter().setFilterMatcher(null);
	 tl.paint();
	 return false;
 }

 
 function onResize() {
     if (resizeTimerID == null) {
         resizeTimerID = window.setTimeout(function() {
             resizeTimerID = null;
             tl.layout();
         }, 500);
     }
 }