var tl;
        function onLoad() {
            var eventSourceShip = new Timeline.DefaultEventSource(0);
            //Settings for 1 and 2 bands
            var zones = [
                {   start:    "1000 BC",
                    end:      "1000 BC",
                    magnify:  0.50,
                    unit:     Timeline.DateTime.MILLENNIUM
                }
            ];
            
            var theme = Timeline.nadlTheme.create();
            theme.event.bubble.width = 320;
            theme.event.bubble.height = 120;
            theme.event.track.height = 0.0;
            theme.event.track.gap = 1.0;
            theme.ether.backgroundColors = [
                "#E8E8F4",
                "#D0D0E8"
            ];
            
            var bandInfos = [
                Timeline.createBandInfo({
                    zones:          zones,
                    eventSource:    eventSourceShip,
                    trackHeight:    1.5,
                    trackGap:       0.3,
                    theme:          theme,
                    date:           "1750 AD",
                    width:          "80%",
                    intervalUnit:   Timeline.DateTime.DECADE,
                    intervalPixels: 200
                }),
                Timeline.createBandInfo({
                    zones:          zones,
                    showEventText:  false,
                    trackHeight:    0.4,
                    trackGap:       0.1,
                    theme:          theme,
                    eventSource:    eventSourceShip,
                    date:           "1750 AD",
                    width:          "20%",
                    intervalUnit:   Timeline.DateTime.CENTURY,
                    intervalPixels: 200
                })
            ];
            bandInfos[1].syncWith = 0;
            bandInfos[1].highlight = true;
            bandInfos[1].eventPainter.setLayout(bandInfos[0].eventPainter.getLayout());

            tl = Timeline.create(document.getElementById("tl"), bandInfos, Timeline.HORIZONTAL);
            //tl.loadXML("tm-date-built.xml", function(xml, url) {
            tl.loadXML("http://nadl.tamu.edu/treatises/SelectShipList", function(xml, url) {
                eventSourceShip.loadXML(xml, url);
                document.getElementById("ship-event-count").innerHTML = eventSourceShip.getCount();
            });
            setupFilterHighlightControls(document.getElementById("ship-controls"), tl, [0,1], theme);
        }
        var resizeTimerID = null;
        function onResize() {
            if (resizeTimerID == null) {
                resizeTimerID = window.setTimeout(function() {
                    resizeTimerID = null;
                    tl.layout();
                }, 500);
            }
        }