function loadTimeline(tl_el, centerYear, autoWidth, baseUrl, culture) {

    SimileAjax.History.historyFile = baseUrl + "/js/lib/timeline_2.3.0/timeline_ajax/content/history.html";

    var eventSource1 = new Timeline.DefaultEventSource();

    var theme1 = Timeline.ClassicTheme.create();
    var theme2 = Timeline.ClassicTheme.create();

    theme1.firstDayOfWeek = 1;
    theme2.firstDayOfWeek = 1;

    // Disable mouse wheel scrolling of the timeline
    theme1.mouseWheel = "default";
    theme2.mouseWheel = "default";

    theme1.ether.interval.line.show = false;
    theme2.ether.interval.line.show = true;

    theme1.ether.highlightOpacity = 25;

    // Set bounds for timeline scrolling
    var today = new Date();
    theme1.timeline_start  = new Date(Date.UTC(-53000, 0, 1)); // First story of 1001
//    theme1.timeline_stop  = today.setFullYear(today.getFullYear()+50); // Fifty years from now
    theme1.timeline_stop  = today.setFullYear(today.getFullYear()); // This year

    theme1.autoWidth = autoWidth;

    theme1.event.overviewTrack.offset = 50;

    theme2.event.instant.icon = baseUrl + "/images/timeline-story.png";
    theme2.event.instant.iconWidth = 21;  // These are for the default stand-alone icon
    theme2.event.instant.iconHeight = 20;

    theme2.event.track.offset = 10;
    theme2.event.track.height = 20;
    theme2.event.track.gap = 10;
    theme2.event.track.autoWidthMargin = 0;

    theme2.event.overviewTrack.offset = 25;

    // HTML encode event titles in bubbles
    theme2.event.bubble.titleStyler = function(elmt) {
        elmt.className = "timeline-event-bubble-title";

        $(elmt).html($(elmt).text());
    };

    var d = Timeline.DateTime.parseGregorianDateTime(centerYear);

    
    var zones = [
        {   start:    "-100000",
            end:      "-4000",
            unit:     Timeline.DateTime.CENTURY,
            multiple: 1,
            magnify:  0.1
        },
        {   start:    "-4000",
            end:      "1500",
            magnify:  1,
            unit:     Timeline.DateTime.DECADE,
            multiple: 1
        },
        {   start:    "1500",
            end:      "2100",
            magnify:  10,
            unit:     Timeline.DateTime.YEAR,
            multiple: 1
        }
    ];

    var bandInfos = [
    Timeline.createBandInfo({
        width: 50,
        intervalUnit: Timeline.DateTime.CENTURY,
        intervalPixels: 75,
        date: d,
        theme: theme1,
        align: 'center',
        layout: 'overview'  // original, overview, detailed
    }),
    Timeline.createHotZoneBandInfo({
        width: 25,
        intervalUnit: Timeline.DateTime.YEAR,
        intervalPixels: 5,
        zones: zones,
        date: d,
        theme: theme2,
                            showEventText:  false,
                    trackHeight:    0.25,
                    trackGap:       0.05,

        align: 'center',
        layout: 'overview'  // original, overview, detailed
    }),
    Timeline.createHotZoneBandInfo({
        width: 415,
        zones: zones,
        intervalUnit: Timeline.DateTime.YEAR,
        intervalPixels: 5,
        eventSource: eventSource1,
        eventPainter: Timeline.OriginalEventPainter,
        date: d,
        theme: theme2,
        trackHeight:    1.9,
        layout: 'original'  // original, overview, detailed
    })         
    ];

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

    // Create custom popup. Built-in bubble is not XHTML DOCTYPE compliant
    Timeline.OriginalEventPainter.prototype._showBubble = function(x, y, evt) {

        var elmt = this._eventIdToElmt[evt.getID()];
        
        $(elmt).qtip({
            content: {
                // Set the text to an image HTML string with the correct src URL to the loading image you want to use
                text: '<img src="' + baseUrl + '/images/ajax-loader-big-white.gif" style="padding:75px 0 75px 0" />',
                url: baseUrl + "/" + culture + "/timeline/story-info-bubble/" + evt.getEventID(),
                title: {
                   text: evt.getText(),
                   button: '<img src="' + baseUrl + '/images/btn-close.gif" alt="Close" />'
                }
            },
            position: {
                corner: {
                    tooltip: "bottomLeft",
                    target: "topMiddle"
                  },
                adjust: {
                  screen: true
                }
            },
            show: {
                  when: false, // Don't specify a show event
                  ready: true // Show the tooltip when ready
               },
            hide: { when: { event: 'unfocus' } },
            style: {
                width: 300,
                padding: '0 7px',
                color: 'black',
                textAlign: 'left',
                border: {
                    width: 5,
                    radius: 5,
                    color: '#AAA'
                },
                title: {
                    background: '#FFF',
                    textAlign: 'left',
                    padding: '7px'
                },
                tip: true,
                name: 'light'
            }
        });
    }

    // create the Timeline
    var tl = Timeline.create(tl_el, bandInfos, Timeline.HORIZONTAL);

    return {
        load: function(data) {
            var url = '/'; // The base url for image, icon and background image
            // references in the data
            eventSource1.loadJSON(data, url);
            
            //tl.layout(); // display the Timeline

            tl.finishedEventLoading(); // Automatically set new size of the div
        },
        scroll: function(direction) {
            var band = tl.getBand(1);
            band._autoScroll(direction ? tl.getPixelLength() : -tl.getPixelLength());
        },
        moveToDate: function(date) {
            tl.getBand(1).setCenterVisibleDate(Timeline.DateTime.parseGregorianDateTime(date));
        }
    }

}

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