window.onload = onLoad;
window.onresize = onResize;

var tl;
function onLoad() {
    var eventSource = new Timeline.DefaultEventSource();
    var bandInfos = [
        Timeline.createBandInfo({
            eventSource:    eventSource,
            date:           "Oct 14 2006",
            width:          "70%", 
            intervalUnit:   Timeline.DateTime.MONTH, 
            intervalPixels: 100,
            timeZone:       +9
        }),
        Timeline.createBandInfo({
            showEventText:  false,
            trackHeight:    0.5,
            trackGap:       0.2,
            eventSource:    eventSource,
            date:           "Oct 14 2006",
            width:          "30%", 
            intervalUnit:   Timeline.DateTime.YEAR, 
            intervalPixels: 200,
            timeZone:       +9
        })
    ];
    bandInfos[1].syncWith = 0;
    bandInfos[1].highlight = true;
    tl = Timeline.create(document.getElementById("my-timeline"), bandInfos);
//    Timeline.loadXML("opera.xml", function(xml, url) { eventSource.loadXML(xml, url); });
    Timeline.loadJSON("opera.json", function(json, url) { eventSource.loadJSON(json, url); });
}

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