var tl;
 function onLoad() {
   var eventSource = new Timeline.DefaultEventSource(0);
   
   var theme = Timeline.ClassicTheme.create(); //create the default theme then customize it
  		
			
		//theme.ether.backgroundColors[0] = "#fff6dc"; //top background color
		//theme.ether.backgroundColors[1] = "#ab5410"; //bottom background color
		
		//theme.ether.highlightColor = "#792711";
		theme.ether.highlightOpacity = "100";
		
		//theme.event.track.height = 20;
		
		//theme.event.instant.impreciseColor = "#792711";
		//theme.event.instant.impreciseOpacity = "80";
		
		theme.event.bubble.width = 350; 
		theme.event.bubble.height = 200;
		
		theme.ether.backgroundColors[1] = theme.ether.backgroundColors[0];

   		
   var d = Timeline.DateTime.parseGregorianDateTime("500")

   var bandInfos = [
     Timeline.createBandInfo({
         eventSource:    eventSource,
         date:           d,
		 width:          "87%", 
         intervalUnit:   Timeline.DateTime.DECADE, 
         intervalPixels: 30,
		 theme:			theme
     }),
     Timeline.createBandInfo({
         overview:       true,
		 showEventText:  false,
         trackHeight:    0.8,
         trackGap:       0.5,
		 eventSource:    eventSource,
         date:           d,
		 width:          "13%", 
         intervalUnit:   Timeline.DateTime.CENTURY, 
         intervalPixels: 40,
		 theme:			theme
     })
   ];
   
   
   
   
   bandInfos[1].syncWith = 0;
   bandInfos[1].highlight = true;
   //bandInfos[1].eventPainter.setLayout(bandInfos[0].eventPainter.getLayout());
  
   bandInfos[0].decorators = [
                new Timeline.SpanHighlightDecorator({
                    startDate:  "Jan 01 0622 00:00:00 GMT",
                    endDate:    "May 01 2009 00:00:00 GMT",
                    startLabel: "birth of Islam",
					endLabel:   "present-day",
                    color:      "#FFFFFF",
                    opacity:    40,
                    theme:      theme
                })
            ];


   
   tl = Timeline.create(document.getElementById("my-timeline"), bandInfos);
   Timeline.loadXML("xml/data.xml", function(xml, url) { eventSource.loadXML(xml, url); });

 }

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