var tl;
var t2;
 function onLoad() {
  var eventSource = new Timeline.DefaultEventSource();
	var eventSource2 = new Timeline.DefaultEventSource();
   
	 var theme = Timeline.ClassicTheme.create(); // create the theme
            theme.event.bubble.width = 350;   // modify it
            theme.event.bubble.height = 500;
						theme.event.track.height = 10;
						theme.event.track.gap = 3;
						theme.event.tape.height = 8;
						
	var theme2 = Timeline.ClassicTheme.create(); // create the theme
            theme2.event.bubble.width = 400;   // modify it
            theme2.event.bubble.height = 500;
						theme2.event.track.height = 10;
						theme2.event.track.gap = 3;
						theme2.event.tape.height = 8;
	 
	 
	 var bandInfos = [
     Timeline.createHotZoneBandInfo({
         zones: [
             {   start:    "Jan 01 1800 00:00:00 GMT-0500",
                 end:      "Jan 01 1880 00:00:00 GMT-0500",
                 magnify:  0.1,
                 unit:     Timeline.DateTime.DECADE
             },
						 
						 {   start:    "Jan 01 1925 00:00:00 GMT-0500",
                 end:      "Jan 01 1962 00:00:00 GMT-0500",
                 magnify:  0.4,
                 unit:     Timeline.DateTime.YEAR
             },
						 
						 {   start:    "Jan 01 1972 00:00:00 GMT-0500",
                 end:      "Jan 01 2007 00:00:00 GMT-0500",
                 magnify:  2,
                 unit:     Timeline.DateTime.YEAR
             },
	     
	     {   start:    "Jan 01 1994 00:00:00 GMT-0500",
                 end:      "Jan 01 1998 00:00:00 GMT-0500",
                 magnify:  0.4,
                 unit:     Timeline.DateTime.YEAR
             }
						 
						 
						 
						 ],

		 		 eventSource:    eventSource,
         date:           "Jun 01 1858 00:00:00 GMT",
         width:          "75%", 
         intervalUnit:   Timeline.DateTime.YEAR, 
         intervalPixels: 125,
				 theme:					 theme,
				 layout:				 'original'
     }),
     Timeline.createBandInfo({
		 		 
		 		 eventSource:    eventSource,
				 overview: true,
         date:           "Jun 01 1858 00:00:00 GMT",
         width:          "15%", 
         intervalUnit:   Timeline.DateTime.DECADE, 
         intervalPixels: 125
				 /*theme:					 theme2,*/
				 /*layout:				 'original'*/
     }),
   Timeline.createBandInfo({
	 			 eventSource:		 eventSource,
		 		 overview:       true,
         date:           "Jun 01 1858 00:00:00 GMT",
         width:          "10%", 
         intervalUnit:   Timeline.DateTime.CENTURY, 
         intervalPixels: 125
     })
	 
	 
	 ];
	 
	 
	    bandInfos[1].syncWith = 0;
   bandInfos[1].highlight = true;
	   bandInfos[2].syncWith = 0;
   bandInfos[2].highlight = true;
	 
   tl = Timeline.create(document.getElementById("my-timeline"), bandInfos );
	 Timeline.loadXML("example01.xml", function(xml, url) { eventSource.loadXML(xml, url); })
	 Timeline.loadXML("lakeTimeline01.xml", function(xml, url) { eventSource2.loadXML(xml, url); })
 }

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