var tl;
function setupTimeLine() {
    var eventSource = new Timeline.DefaultEventSource();
    var myTheme = Timeline.ClassicTheme.create();

    //myTheme.event.bubble.height = 700;
    //myTheme.event.bubble.width = 700;
    //myTheme.event.instant.iconWidth = 40;
    //myTheme.event.instant.iconHeight = 1; 

    var startDate = new Date("Jan 01 1972 00:00:00 GMT");
    var endDate = new Date("Dec 31 2009 00:00:00 GMT");
    var midDate = "Jan 01 1983 00:00:00 GMT";

    var zones = [
                {   start:    "Jan 1 1900",
                    end:      "Dec 31 1971",
                    magnify:  1,
                    unit:     Timeline.DateTime.CENTURY
                },
                {   start:    "Jan 1 1972",
                    end:      "Dec 31 1979",
                    magnify:  2,
                    unit:     Timeline.DateTime.DECADE
                },
                {   start:    "Jan 1 1980",
                    end:      "Dec 31 1982", 
                    magnify:  10,
                    unit:     Timeline.DateTime.YEAR
               },
                {   start:    "Jan 1 1983",
                    end:      "Dec 31 2001", 
                    magnify:  6,
                    unit:     Timeline.DateTime.YEAR
                },
                {   start:    "Jan 1 2002",
                    end:      "Dec 31 2010", 
                    magnify:  30,
                    unit:     Timeline.DateTime.YEAR
                },
                {   start:    "Jan 1 2011",
                    end:      "Jan 1 2030",
                    magnify:  1,
                    unit:     Timeline.DateTime.CENTURY
                }
    ];

    var bandInfos = [
        Timeline.createHotZoneBandInfo({
            eventSource:    eventSource,
            date:           midDate, 
            width:          "100%", 
            intervalUnit:   Timeline.DateTime.DECADE,
            zones: zones,
            intervalPixels: 80,
            theme: myTheme,
            timeZone: -6 
        })
   ];

    bandInfos[0].decorators = [
        new Timeline.SpanHighlightDecorator({
            startDate:  "Jan 1 1972",
                endDate:    "Dec 31 210",
                color:      "#FFC080",
                opacity:    50,
                startLabel: "1972",
                endLabel:   "2010",
                theme:      myTheme
            })
    ];

   tl = Timeline.create(document.getElementById("my-timeline"), bandInfos);

//   eventSource.loadJSON(timeline_data, '.');

   Timeline.OriginalEventPainter.prototype._showBubble = function(x, y, evt) {
        var node = evt; // [0];

       var img = document.getElementById('photoTarget');
       img.src= node.getImage();

        var headline = document.getElementById('headlineTarget');
        if (headline)
        {
            var d = node.getStart();
            if (d && d.getYear)
            {
                var y = d.getYear();
                if (y < 200)
                    y = y + 1900;
                headline.innerHTML = y;
            } 
        }

        var textout  = document.getElementById('textTarget');
        if (textout)
        {
            textout.innerHTML = node.getDescription();
        }
        console.log (typeof node.getStart());
        return false;
   }
   Timeline.loadXML("furnaces.xml", function(xml, url) { eventSource.loadXML(xml, url); });
   // Timeline.loadJSON("local_data.js", function(xml, url) { eventSource.loadJSON(xml, url); });
    tl.layout();
}

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