var tl;
function loadTimeline() {

    var eventSource = new Timeline.DefaultEventSource();

    var theme = Timeline.ClassicTheme.create();

	var bandInfos = createBandInfos(eventSource, date, theme)
	
	for (var i = 0; i < bandInfos.length; i++) {
           bandInfos[i].decorators = [
               new Timeline.SpanHighlightDecorator({
                   startDate:  "Apr 19 1775",
                   endDate:    "Jan 14 1784",
                   color:      "#FFC080",
                   opacity:    50,
                   startLabel: "Revolutionary War",
                   endLabel:   "",
                   theme:      theme
               }),
               new Timeline.SpanHighlightDecorator({
                   startDate:  "Jun 18  1812",
                   endDate:    "Feb 17  1815",
                   color:      "#FFC080",
                   opacity:    50,
                   startLabel: "War of 1812",
                   endLabel:   "",
                   theme:      theme
               }),
               new Timeline.SpanHighlightDecorator({
                   startDate:  "Apr 12, 1861",
                   endDate:    "Apr 9, 1865",
                   color:      "#FFC080",
                   opacity:    50,
                   startLabel: "Civil War",
                   endLabel:   "",
                   theme:      theme
               }),
               new Timeline.SpanHighlightDecorator({
                   startDate:  "Jan 1, 1898",
                   endDate:    "Dec 31, 1898",
                   color:      "#FFC080",
                   opacity:    50,
                   startLabel: "Spanish-American War",
                   endLabel:   "",
                   theme:      theme
               }),
               new Timeline.SpanHighlightDecorator({
                   startDate:  "Jul 28, 1914",
                   endDate:    "Apr  6, 1917",
                   color:      "#FFC080",
                   opacity:    25,
                   startLabel: "WWI",
                   endLabel:   "",
                   theme:      theme
               }),
               new Timeline.SpanHighlightDecorator({
                   startDate:  "Apr  6, 1917",
                   endDate:    "Jan 10, 1920",
                   color:      "#FFC080",
                   opacity:    50,
                   startLabel: "",
                   endLabel:   "",
                   theme:      theme
               }),
               new Timeline.SpanHighlightDecorator({
                   startDate:  "Sep  3, 1939",
                   endDate:    "Dec  7, 1941",
                   color:      "#FFC080",
                   opacity:    25,
                   startLabel: "WWII",
                   endLabel:   "",
                   theme:      theme
               }),
               new Timeline.SpanHighlightDecorator({
                   startDate:  "Dec  7, 1941",
                   endDate:    "May  7, 1945",
                   color:      "#FFC080",
                   opacity:    50,
                   startLabel: "",
                   endLabel:   "",
                   theme:      theme
               }),
               new Timeline.SpanHighlightDecorator({
                   startDate:  "May  7, 1945",
                   endDate:    "Sep 2,  1945",
                   color:      "#FFC080",
                   opacity:    40,
                   startLabel: "",
                   endLabel:   "",
                   theme:      theme
               }),
               new Timeline.SpanHighlightDecorator({
                   startDate:  "Jun 25, 1950",
                   endDate:    "Jul 5,  1950",
                   color:      "#FFC080",
                   opacity:    25,
                   startLabel: "Korean War",
                   endLabel:   "",
                   theme:      theme
               }),
               new Timeline.SpanHighlightDecorator({
                   startDate:  "Jul 5,  1950",
                   endDate:    "July 27, 1953",
                   color:      "#FFC080",
                   opacity:    50,
                   startLabel: "",
                   endLabel:   "",
                   theme:      theme
               }),
               new Timeline.SpanHighlightDecorator({
                   startDate:  "Dec 28, 1964",
                   endDate:    "Jan 31, 1965",
                   color:      "#FFC080",
                   opacity:    25,
                   startLabel: "Vietnam War",
                   endLabel:   "",
                   theme:      theme
               }),
               new Timeline.SpanHighlightDecorator({
                   startDate:  "Jan 31, 1965",
                   endDate:    "Apr 30, 1975",
                   color:      "#FFC080",
                   opacity:    50,
                   startLabel: "",
                   endLabel:   "",
                   theme:      theme
               }),
               new Timeline.SpanHighlightDecorator({
                   startDate:  "Aug 2,  1990",
                   endDate:    "Jan 17, 1991",
                   color:      "#FFC080",
                   opacity:    25,
                   startLabel: "Persian Gulf War",
                   endLabel:   "",
                   theme:      theme
               }),
               new Timeline.SpanHighlightDecorator({
                   startDate:  "Jan 17, 1991",
                   endDate:    "Feb 28, 1991",
                   color:      "#FFC080",
                   opacity:    50,
                   startLabel: "",
                   endLabel:   "",
                   theme:      theme
               }),
               new Timeline.SpanHighlightDecorator({
                   startDate:  "Oct 7,  2001",
                   endDate:    "Mar 20, 2003",
                   color:      "#FFC080",
                   opacity:    50,
                   startLabel: "War in Afghanistan",
                   endLabel:   "",
                   theme:      theme
               }),
               new Timeline.SpanHighlightDecorator({
                   startDate:  "Mar 20, 2003",
                   endDate:    "Dec 31, 2053",
                   color:      "#FFC080",
                   opacity:    75,
                   startLabel: "Iraq War",
                   endLabel:   "",
                   theme:      theme
               })
           ];
       }


       tl = Timeline.create(document.getElementById("tl"), bandInfos, Timeline.HORIZONTAL);
       tl.loadXML("us-wars.xml", function(xml, url) { eventSource.loadXML(xml, url); });

       var evt = new Timeline.DefaultEventSource.Event(
           new Date(),
           null,
           null,
           null,
           false,
           'Today',
           null,
           null,
           null,
           null,
           null,
           null
       );
       eventSource.add(evt);
   }