var tl;
var date = "Mar 10 2008 13:00:00";
var theme = Timeline.ClassicTheme.create();
theme.event.label.width = 250; // px
theme.event.bubble.width = 250;
theme.event.bubble.height = 200;
Timeline.GregorianDateLabeller.prototype.labelPrecise = function(date) {
	return Timeline.DateTime.removeTimeZoneOffset(
			date, 
			0
		).toLocaleDateString();

};

window.onload=function() {
	var eventSource = new Timeline.DefaultEventSource();
	var bandInfos = [
		Timeline.createHotZoneBandInfo({
			zones: [
             {   start:    "Jun 01 2007 00:00:00 GMT+0800",
                 end:      "Dec 31 2009 00:00:00 GMT+0800",
                 magnify:  2,
                 unit:     Timeline.DateTime.WEEK
             },
             {   start:    "Mar 12 2008 06:00:00 GMT-0500",
                 end:      "Apr 01 2008 12:00:00 GMT-0500",
                 magnify:  5,
                 unit:     Timeline.DateTime.DAY
             },
             {   start:    "Jun 04 2008 00:00:00 GMT+0800",
                 end:      "Jul 22 2008 00:00:00 GMT+0800",
                 magnify:  5,
                 unit:     Timeline.DateTime.DAY
             }
         ],
			width:          "70%", 
			intervalUnit:   Timeline.DateTime.WEEK, 
			eventSource:    eventSource,
			date:           date,
			intervalPixels: 100,
			theme:	theme
		}),
		Timeline.createBandInfo({
			width:          "20%", 
			intervalUnit:   Timeline.DateTime.MONTH, 
			eventSource:    eventSource,
			date:           date,
			overview:		true,
			intervalPixels: 200,
			theme:	theme
		}),
		Timeline.createBandInfo({
			width:          "10%", 
			intervalUnit:   Timeline.DateTime.YEAR, 
			eventSource:    eventSource,
			date:           date,
			overview:		true,
			intervalPixels: 200,
			theme:	theme
		})
	];
	for (var i = 0; i < bandInfos.length-1; i++) {
		bandInfos[i].decorators = [
			new Timeline.SpanHighlightDecorator({
				startDate:  "Jul 1 2007 8:00:00 GMT+0800",
				endDate:    "Dec 30 2007 18:00:00 GMT+0800",
				color:      "#F1D5B8",
				opacity:    50,
				startLabel: "POP",
				endLabel:   "",
				cssClass: 't1highlight'
			}),
			new Timeline.SpanHighlightDecorator({
				startDate:  "Mar 1 2008 8:00:00 GMT+0800",
				endDate:    "Jul 30 2008 18:00:00 GMT+0800",
				color:      "#ECA965",
				opacity:    50,
				startLabel: "IOP",
				endLabel:   "",
				cssClass: 't2highlight'
			}),
			new Timeline.SpanHighlightDecorator({
				startDate:  "Aug 1 2008 8:00:00 GMT+0800",
				endDate:    "Dec 31 2009 18:00:00 GMT+0800",
				color:      "#C6B7A8",
				opacity:    50,
				startLabel: "Persistent observation period",
				endLabel:   "",
				cssClass: 't2highlight'
			})
                ];
            }
	
	bandInfos[1].syncWith = 0;
	bandInfos[1].highlight = true;
	bandInfos[2].syncWith = 0;
	bandInfos[2].highlight = true;


	tl = Timeline.create(document.getElementById("tl"), bandInfos);
	tl.loadXML("/watertime.xml", function(xml, url) {
		eventSource.loadXML(xml, url);
	});
}
var resizeTimerID = null;
window.onresize=function() {
	if (resizeTimerID == null) {
		resizeTimerID = window.setTimeout(function() {
			resizeTimerID = null;
			tl.layout();
			}, 500);
	}
}