var tl;
function onLoad() {
	var eventSource = new Timeline.DefaultEventSource();

	var theme = Timeline.ClassicTheme.create(); //how big do we want our bubbles?
	theme.event.label.width = 300; // px
	theme.event.bubble.width = 450;
	theme.event.bubble.height = 380;

	var bandInfos = [
		Timeline.createBandInfo({ //Timeline.createBandInfo() fills in default settings, which can be overridden, for constructing a band in a timeline
			eventSource:    eventSource,
			date:           "Dec 01 2001 00:00:00 GMT+0100",
			width:          "70%", 
			intervalUnit:   Timeline.DateTime.MONTH, //MONTH timeline
			intervalPixels: 100,
			trackHeight:    2.0,
			trackGap:       0.5,
			timeZone:       +1,
			theme:			theme
	}),
		Timeline.createBandInfo({
			showEventText:  false,
			trackHeight:    0.5,
			trackGap:       0.5,
			eventSource:    eventSource,
			date:           "Dec 01 2001 00:00:00 GMT+0100",
			width:          "30%", 
			intervalUnit:   Timeline.DateTime.YEAR, //YEAR timeline
			intervalPixels: 200,
			timeZone:       +1,
			theme:			theme
	})
	];

	bandInfos[1].syncWith = 0;     //makes the two bands scroll in synchrony
	bandInfos[1].highlight = true; //makes the bottom band highlights the visible time span of the top band
	bandInfos[1].eventPainter.setLayout(bandInfos[0].eventPainter.getLayout()); //take layout from upper band and set it into lower band so that events are positioned on the same track in both bands

	for (var i = 0; i < bandInfos.length; i++) {
		bandInfos[i].decorators = [
			new Timeline.PointHighlightDecorator({ //nace Oink!
				date:       "Jul 28 2001 13:23:00 GMT+0100",
				color:      "#34A05D",
				opacity:    50,
				theme:      theme
			}),
			new Timeline.PointHighlightDecorator({ //cumple 1
				date:       "Aug 20 2002 00:00:00 GMT+0100",
				color:      "#34A05D",
				opacity:    50,
				theme:      theme
			}),
			new Timeline.PointHighlightDecorator({ //cumple 2
				date:       "Aug 20 2003 00:00:00 GMT+0100",
				color:      "#34A05D",
				opacity:    50,
				theme:      theme
			}),
			new Timeline.PointHighlightDecorator({ //cumple 3
				date:       "Aug 20 2004 00:00:00 GMT+0100",
				color:      "#34A05D",
				opacity:    50,
				theme:      theme
			}),
			new Timeline.PointHighlightDecorator({ //cumple 4
				date:       "Aug 20 2005 00:00:00 GMT+0100",
				color:      "#34A05D",
				opacity:    50,
				theme:      theme
			}),
			new Timeline.PointHighlightDecorator({ //cumple 5
				date:       "Aug 20 2006 00:00:00 GMT+0100",
				color:      "#34A05D",
				opacity:    50,
				theme:      theme
			}),
			new Timeline.PointHighlightDecorator({ //cumple 6
				date:       "Aug 20 2007 00:00:00 GMT+0100",
				color:      "#34A05D",
				opacity:    50,
				theme:      theme
			}),
			new Timeline.PointHighlightDecorator({ //cumple 7
				date:       "Aug 20 2008 00:00:00 GMT+0100",
				color:      "#34A05D",
				opacity:    50,
				theme:      theme
			}),
			new Timeline.PointHighlightDecorator({ //cumple 8
				date:       "Aug 20 2009 00:00:00 GMT+0100",
				color:      "#34A05D",
				opacity:    50,
				theme:      theme
			}),
			new Timeline.PointHighlightDecorator({ //cumple 9
				date:       "Aug 20 2010 00:00:00 GMT+0100",
				color:      "#34A05D",
				opacity:    50,
				theme:      theme
			}),
			new Timeline.PointHighlightDecorator({ //cumple 10
				date:       "Aug 20 2011 00:00:00 GMT+0100",
				color:      "#34A05D",
				opacity:    50,
				theme:      theme
			}),
			new Timeline.SpanHighlightDecorator({
				startDate:  "Jul 28 2001 13:23:00 GMT+0100",
				endDate:    "Aug 20 2002 00:00:00 GMT+0100",
				color:      "#FFC080",
				opacity:    35,
				startLabel: "",
				endLabel:   "aņo 1",
				theme:      theme
			}),
			new Timeline.SpanHighlightDecorator({
				startDate:  "Aug 20 2003 00:00:00 GMT+0100",
				endDate:    "Aug 20 2004 00:00:00 GMT+0100",
				color:      "#FFC080",
				opacity:    35,
				startLabel: "",
				endLabel:   "aņo 3",
				theme:      theme
			}),
			new Timeline.SpanHighlightDecorator({
				startDate:  "Aug 20 2005 00:00:00 GMT+0100",
				endDate:    "Aug 20 2006 00:00:00 GMT+0100",
				color:      "#FFC080",
				opacity:    35,
				startLabel: "",
				endLabel:   "aņo 5",
				theme:      theme
			}),
			new Timeline.SpanHighlightDecorator({
				startDate:  "Aug 20 2007 00:00:00 GMT+0100",
				endDate:    "Aug 20 2008 00:00:00 GMT+0100",
				color:      "#FFC080",
				opacity:    35,
				startLabel: "",
				endLabel:   "aņo 7",
				theme:      theme
			}),
			new Timeline.SpanHighlightDecorator({
				startDate:  "Aug 20 2009 00:00:00 GMT+0100",
				endDate:    "Aug 20 2010 00:00:00 GMT+0100",
				color:      "#FFC080",
				opacity:    35,
				startLabel: "",
				endLabel:   "aņo 9",
				theme:      theme
			}),
			new Timeline.SpanHighlightDecorator({
				startDate:  "Aug 20 2010 00:00:00 GMT+0100",
				endDate:    "Aug 20 2011 00:00:00 GMT+0100",
				color:      "#FFC080",
				opacity:    35,
				startLabel: "",
				endLabel:   "aņo 10",
				theme:      theme
			})
		];
	}


	tl = Timeline.create(document.getElementById("oink-timeline"), bandInfos);
	Timeline.loadXML("scripts/timeline002.xml", function(xml, url) { eventSource.loadXML(xml, url); });

}

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