var tl;
  function loadGTTStimeline() {
    var eventSource = new Timeline.DefaultEventSource(0);
    var periodsource = new Timeline.DefaultEventSource(0);
    var theme = Timeline.ClassicTheme.create();
    var zones = [
       {"start": "Thu Apr 23 1896 12:00:00 GMT-0600", 
        "end": "Fri Apr 23 1926 12:00:00 GMT-0600",
        "magnify": 3,
        "unit": Timeline.DateTime.YEAR
       },
       {"start": "Mon Jan 01 1906 00:00:00 GMT-0600", 
        "end": "Fri Jan 01 1909 00:00:00 GMT-0600",
        "magnify": 6,
        "unit": Timeline.DateTime.MONTH
       }
    ];
    var zonesBottom = [
       {"start": "Thu Apr 23 1896 12:00:00 GMT-0600",
        "end": "Fri Apr 23 1926 12:00:00 GMT-0600",
        "magnify": 5,
        "unit": Timeline.DateTime.DECADE
       },
       {"start": "Mon Jan 01 1906 00:00:00 GMT-0600",
        "end": "Fri Jan 01 1909 00:00:00 GMT-0600",
        "magnify": 5,
        "unit": Timeline.DateTime.YEAR
       }
    ];
    //theme.event.highlightLabelBackground = true;
    theme.event.bubble.width = 350;
    theme.event.bubble.height = 300;
    theme.event.tape.height = 8;
    var d = Timeline.DateTime.parseGregorianDateTime("Sat Dec 22 1906 12:00:00 GMT-0600")
      var bandInfos = [
        Timeline.createHotZoneBandInfo({
          width:          "75%",
          intervalUnit:   Timeline.DateTime.DECADE,
          intervalPixels: 200,
          zones:          zones,
          eventSource:    eventSource,
          date:           d,
          theme:          theme,
          layout:         'original'  // original, overview, detailed
        }),
        Timeline.createHotZoneBandInfo({
          width:          "25%",
          intervalUnit:   Timeline.DateTime.CENTURY,
          intervalPixels: 200,
          zones:          zonesBottom,
          //eventSource:    periodsource,
          eventSource:    eventSource,
          date:           d,
          overview:       true,
          theme:          theme,
          layout:         'original'   // original, overview, detailed
        })
      ];

      for (var i = 0; i < bandInfos.length; i++) {
        bandInfos[i].decorators = [
                    new Timeline.SpanHighlightDecorator({
                        startDate:  "Thu Apr 23 1896 12:00:00 GMT-0600", // Film screenings in Wilmington before the advent of movie theaters
                        endDate:    "Sat Dec 22 1906 12:00:00 GMT-0600",
                        color:      "#f8e8ac", // set color explicitly
                        opacity:    100,
                        //startLabel: "Early Film",
                        startLabel: "",
                        endLabel:   "",
                        theme:      theme
                    }),
                    new Timeline.SpanHighlightDecorator({
                        startDate:  "Sat Dec 22 1906 12:00:00 GMT-0600", // Store-front movie theater period
                        endDate:    "Thu May 30 1912 12:00:00 GMT-0600",
                        color:      "#efb893", // set color explicitly
                        opacity:    100,
                        //startLabel: "Storefront Period",
                        startLabel: "",
                        endLabel:   "",
                        theme:      theme
                    }),
                    new Timeline.SpanHighlightDecorator({
                        startDate:  "Sat Jan 01 1927 12:00:00 GMT-0600", // transition to sound
                        endDate:    "Fri Jan 01 1932 12:00:00 GMT-0600",
                        //color:      "#f2bf94", // set color explicitly
                        color:      "#76B0C0", // set color explicitly
                        opacity:    100,
                        //startLabel: "Trans. to Sound",
                        startLabel: "",
                        endLabel:   "",
                        theme:      theme
                    })
        ];
      }

      bandInfos[1].syncWith = 0;
      bandInfos[1].highlight = true;

      tl = Timeline.create(document.getElementById("tl"), bandInfos, Timeline.HORIZONTAL);
      // stop browser caching of data during testing...
      //tl.loadJSON("gtts01-6.js?"+ (new Date().getTime()), function(json, url) {
      mediaURLVal = document.getElementById("lomedia").value;
      tl.loadJSON(mediaURLVal+"js/gtts_commented_venues.js?"+ (new Date().getTime()), function(json, url) {
        eventSource.loadJSON(json, url);
      });
      //tl.loadJSON(mediaURLVal+"js/gtts_commented_venues.js?"+ (new Date().getTime()), function(json, url) {
        //periodsource.loadJSON(json, url);
      //});
    }
    function addLoadEvent(func) {
    var oldonload = window.onload;
    if (typeof window.onload != 'function') {
      window.onload = func;
    } else {
      window.onload = function() {
        if (oldonload) {
          oldonload();
        }
        func();
      }
    }
  }

  addLoadEvent(loadGTTStimeline);