var now = new Date();
var tl;

function onLoad() {
	var eventSource = new Timeline.DefaultEventSource();
	
	var backgroundColors = [ "#f4f4eb", "#e3d0ba", "#e3c39f"];
	var bubbleWidth = 320;
	var bubbleHeight = 220;
	
	var theme = Timeline.ClassicTheme.create();
	theme.event.bubble.width = bubbleWidth;
	theme.event.bubble.height = bubbleHeight;
	theme.event.track.height = 1.25;
	theme.ether.backgroundColors = backgroundColors;
	theme.ether.interval.line.color = "#333",
	theme.event.label.outsideColor = "#555",
	theme.event.label.insideColor = "#fff"
		
  var bandInfos = [
    Timeline.createBandInfo({
				eventSource:    eventSource,
    		date:           now,
    		trackHeight:    1.25,
    		trackGap:       0.25,
        width:          "55%", 
        intervalUnit:   Timeline.DateTime.WEEK, 
        intervalPixels: 100,
        theme:          theme
    }),
    Timeline.createBandInfo({
        showEventText:  false,
        trackHeight:    0.5,
        trackGap:       0.2,
        eventSource:    eventSource,
        date:           now,
        width:          "30%", 
        intervalUnit:   Timeline.DateTime.MONTH, 
        intervalPixels: 200,
        theme:          theme
    }),
    Timeline.createBandInfo({
    	showEventText:  false	,
    	trackHeight:    0.2,
    	trackGap:       0.1,
    	eventSource:    eventSource,
    	date:           now,
    	width:          "15%",
    	intervalUnit:   Timeline.DateTime.YEAR,
    	intervalPixels: 400,
    	theme:          theme
    })
  ];
  bandInfos[1].syncWith = 0;
  bandInfos[2].syncWith = 0;
  bandInfos[2].highlight = false;
  bandInfos[1].highlight = true;
  bandInfos[1].eventPainter.setLayout(bandInfos[0].eventPainter.getLayout());
  
  tl = Timeline.create(document.getElementById("timeline"), bandInfos);
  Timeline.loadXML("generateTimelineXML.cfm?"+Math.random()*1000, function(xml, url) {   	
  	eventSource.loadXML(xml, url); 
  }); 
}

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

var events = Class.create();
events.prototype = {
	initialize: function(xml) {
		this._list = [];
		new Ajax.Request(xml, {
			method: 'get',
			onComplete: this.createList.bind(this),
			onFailure: function() {
				return false;
			}
		});
	},
	createList: function(xhr) {
		var doc = xhr.responseXML;
	  var node = doc.documentElement.firstChild;
	  while (node != null) {
	    if (node.nodeType == 1) {
	      var evt = {};
	      evt.start = node.getAttribute('start');
	      evt.end = node.getAttribute('end');
	      this._list.push(evt);
	    }
	    node = node.nextSibling;
	  }
	  count();
	},
	list: function() {
		return this._list;
	}
}

function count() {
	var c = [];
	$A(e.list()).each ( function(evt) {
		var l = $A(e.list()).select ( function(subevt) {
			return (new Date(subevt.start) >= new Date(evt.start) && 
			        new Date(subevt.start) <= new Date(evt.end)) ||
			       (new Date(subevt.end)   >= new Date(evt.start) && 
			        new Date(subevt.end)   <= new Date(evt.end));
		}).length;
		c.push(l);
	});
	if (c.max() > 4) {
		var i = c.max() - 4;
		var tlHeight = 15;
		while (i != 0) {
			tlHeight += 3.25;
			i--;
		}
		$('timeline').style.height = tlHeight + "em";
	}
	onLoad();
}

Event.observe(window, 'load', function(event) {
//start up the timeline
	e = new events("generateTimelineXML.cfm?"+Math.random()*1000);
//watch for window resize	
	Event.observe(window, 'resize', function(event) {
		onResize();
	});
});