var calNow = new Date()

var calDate=new Date()
calDate.setDate(calDate.getDate()+7) //today now is set to be 3 days into the future

var calDay=new Date()
calDay.setDate(calDay.getDate()+3) //today now is set to be 3 days into the future

var theme = Timeline.ClassicTheme.create();

function onLoad() {

  var eventSource1 = new Timeline.DefaultEventSource();
  var eventSource2 = new Timeline.DefaultEventSource();
  

  var zone0 = [
                  
                  {   start:    "-50000",
                      end:      "5000",
                      magnify:  4,
                      unit:     Timeline.DateTime.MILLENNIUM
                  }
            ];
  
  var zone1 = [
                  
                  {   start:    "1700",
                      end:      "2100",
                      magnify:  4,
                      unit:     Timeline.DateTime.CENTURY
                  }
            ];

  var zone2 = [
                  
                  {   start:    "1990",
		              end:      "2050",
		              magnify:  4,
		              unit:     Timeline.DateTime.DECADE
                  }
            ];

             
  var bandInfos = [           
            Timeline.createHotZoneBandInfo({
                date:           calDay,
                width:          "3%", 
                align:		    "Top",
                zones:          zone1,
                showEventText:  false,
                trackHeight:    0.4,
                trackGap:       0.2,
                intervalUnit:   Timeline.DateTime.CENTURY,
                intervalPixels: 100
            }),            
             Timeline.createHotZoneBandInfo({
                date:           calDay,
                width:          "5%", 
                align:	   "Bottom",
                zones:         zone2,
                showEventText:  false,
                trackHeight:   0.4,
                trackGap:       0.2,
                intervalUnit:   Timeline.DateTime.DECADE,
                intervalPixels: 50
            }),            
            Timeline.createHotZoneBandInfo({
                eventSource:    eventSource1,
                date:           calDay,
                width:          "47%", 
                align:	    "Bottom",
                border:	    true,
                zones:          zone2,
                intervalUnit:   Timeline.DateTime.DECADE,
                intervalPixels: 50
            }),            
            Timeline.createHotZoneBandInfo({
                eventSource:    eventSource2,
                date:           calDay,
                width:          "40%", 
                align:		    "Bottom",
                zones:          zone2,
                intervalUnit:   Timeline.DateTime.DECADE,
                intervalPixels: 50
            }),            
            Timeline.createHotZoneBandInfo({
                date:           calDay,
                width:          "5%",
                align:		    "Top",
                zones:          zone1,
                showEventText:  false,
                trackHeight:    0.4,
                trackGap:       0.2,
                intervalUnit:   Timeline.DateTime.CENTURY, 
                intervalPixels: 100
            })
     
  ];

  bandInfos[1].syncWith = 0;
  bandInfos[2].syncWith = 1;
  bandInfos[3].syncWith = 2;
  bandInfos[4].syncWith = 3;
  bandInfos[4].highlight = true;
  
   for (var i = 0; i < 3; i++) {
                  bandInfos[i].decorators = [
                      new Timeline.SpanHighlightDecorator({
                          startDate:  "-50000",
                          endDate:    "5000",
                          color:      "#ffffff",
                          opacity:    30,
                          startLabel: "",
                          endLabel:   "",
                          theme:      theme
                      }),
                      new Timeline.SpanHighlightDecorator({
                          startDate:  "1300",
                          endDate:    "2100",
                          color:      "#cccccc",
                          opacity:    30,
                          startLabel: "",
                          endLabel:   "",
                          theme:      theme
                      }),
                      new Timeline.SpanHighlightDecorator({
                          startDate:  "1750",
                          endDate:    "2100",
                          color:      "#aaaaaa",
                          opacity:    30,
                          startLabel: "",
                          endLabel:   "",
                          theme:      theme
                      }),
                      new Timeline.SpanHighlightDecorator({
                          startDate:  "1990",
                          endDate:    "2050",
                          color:      "#999900",
                          opacity:    30,
                          startLabel: "",
                          endLabel:   "",
                          theme:      theme
                      }),
                      new Timeline.PointHighlightDecorator({
		                  date:       calDay,
		                  color:      "#FF0000",
		                  opacity:    100,
		                  theme:      theme
                      })		      
                      
                  ];
            }
  
   for (var i = 3; i < bandInfos.length; i++) {
                  bandInfos[i].decorators = [
                      new Timeline.SpanHighlightDecorator({
                          startDate:  "-50000",
                          endDate:    "5000",
                          color:      "#99ff99",
                          opacity:    60,
                          startLabel: "",
                          endLabel:   "",
                          theme:      theme
                      }),
                      new Timeline.SpanHighlightDecorator({
                          startDate:  "1300",
                          endDate:    "2100",
                          color:      "#cccccc",
                          opacity:    30,
                          startLabel: "",
                          endLabel:   "",
                          theme:      theme
                      }),
                      new Timeline.SpanHighlightDecorator({
                          startDate:  "1750",
                          endDate:    "2100",
                          color:      "#cccccc",
                          opacity:    30,
                          startLabel: "",
                          endLabel:   "",
                          theme:      theme
                      }),
                      new Timeline.SpanHighlightDecorator({
                          startDate:  "1770",
                          endDate:    "2100",
                          color:      "#aaee33",
                          opacity:    30,
                          startLabel: "",
                          endLabel:   "",
                          theme:      theme
                      }),
                      new Timeline.SpanHighlightDecorator({
                          startDate:  "1902",
                          endDate:    "1988",
                          color:      "#dddd00",
                          opacity:    30,
                          startLabel: "",
                          endLabel:   "",
                          theme:      theme
                      }),
                      new Timeline.SpanHighlightDecorator({
                          startDate:  "1990",
                          endDate:    "2050",
                          color:      "#999999",
                          opacity:    30,
                          startLabel: "",
                          endLabel:   "",
                          theme:      theme
                      }),
                      new Timeline.PointHighlightDecorator({
		                  date:       calDay,
		                  color:      "#FF0000",
		                  opacity:    100,
		                  theme:      theme
                      })		      
                      
                  ];
            }
              
  tl = Timeline.create(document.getElementById("austimeline"), bandInfos, 0);
  Timeline.loadXML("Climate_Timeline.xml",   function(xml, url) { eventSource1.loadXML(xml, url); }); 
  Timeline.loadXML("Australia_Timeline.xml", function(xml, url) { eventSource2.loadXML(xml, url); }); 

  //setupFilterHighlightControls(document.getElementById("climate-controls"), tl, [1,2], theme);
  //setupFilterHighlightControls(document.getElementById("australian-controls"), tl, [3,4], theme);


}