var tl;
function onLoad()
{
    var theme = Timeline.cheneelTheme.create();

    theme.event.bubble.width  = 320;
    theme.event.bubble.height = 220;
    var eventSource = new Timeline.DefaultEventSource();

    var bandInfos = [
        Timeline.createBandInfo( {
            eventSource:    eventSource,
            width:          "75%",
            intervalUnit:   Timeline.DateTime.DAY,
            intervalPixels: 135,
//            timeZone:       +8,
            theme:          theme
        } ),
        Timeline.createBandInfo( {
            eventSource:    eventSource,
            width:          "15%",
            intervalUnit:   Timeline.DateTime.MONTH,
            intervalPixels: 80,
            showEventText:  false,
            trackHeight:    0.5,
            trackGap:       0.2,
//            timeZone:       +8,
            theme:          theme
        } ),
        Timeline.createBandInfo( {
            eventSource:    eventSource,
            width:          "10%",
            intervalUnit:   Timeline.DateTime.YEAR,
            intervalPixels: 250,
            showEventText:  false,
            trackHeight:    0.5,
            trackGap:       0.2,
//            timeZone:       +8,
            theme:          theme
        } )
    ];
    
//     bandInfos[0].eventPainter = new Timeline.ThumbnailEventPainter({
//         theme:              theme,
//         trackHeight:        15,
//         trackOffset:        10,
//         labelWidth:         100,
//         thumbnailWidth:     25,
//         thumbnailHeight:    25
//     });
    
    bandInfos[ 1 ].syncWith  = 0;
    bandInfos[ 1 ].highlight = true;
    bandInfos[ 2 ].syncWith  = 1;
    bandInfos[ 2 ].highlight = true;
    bandInfos[ 1 ].eventPainter.setLayout(bandInfos[0].eventPainter.getLayout());
    bandInfos[ 2 ].eventPainter.setLayout(bandInfos[1].eventPainter.getLayout());
    
    // Mark the "here be dragons" region before I started keeping records.
    for ( var i = 0; i < bandInfos.length; i++ )
    {
        bandInfos[ i ].decorators = [ 
            new Timeline.SpanHighlightDecorator(
            {
                startDate:  "Jan 01 1000 00:00:00 GMT+0800",
                endDate:    "Jan 01 1001 00:00:00 GMT+0800",
                startLabel: "start",
                endLabel:   "end",
                opacity:    50,
                color:      "#DEE3E7",
                theme:      theme
            } ) 
        ];
    }
  
    tl = Timeline.create(document.getElementById("cheneel-timeline"), bandInfos, Timeline.HORIZONTAL);

    Timeline.loadXML( "templates/cheneel/timeline.xml", function( xml, url ) { eventSource.loadXML( xml, url ); } );
//     Timeline.DurationEventPainter.prototype._showBubble = function(x, y, evt) {
//         window.location = evt.getLink();
//     }
//     Timeline.ThumbnailEventPainter.prototype._showBubble = function(x, y, evt) {
//         window.location = evt.getLink();
//     }
}        

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