var tl;
function onLoad() {
	//current Date
	var date = new Date();

	//month - array
	var month = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];

	//convert to GMT syntax
	var currentDate = (  month[date.getMonth()] + " "
			+ date.getDate() + " "
			+ date.getFullYear() + " "
			+ date.getHours() + ":"
			+ date.getMinutes() + ":"
			+ date.getSeconds() + " "
			+ "GMT");

	//eventSource for loading XML
	var eventSource = new Timeline.DefaultEventSource();

	//init TimelineBands
	//upper Band
  var upper = Timeline.ClassicTheme.create();

	upper.firstDayOfWeek = 0; // Sunday
	    
	upper.ether = {
	backgroundColors: [
	    "#000",
	    "#DDD",
	    "#CCC",
	    "#AAA"
	],
	highlightColor:     "white",
	highlightOpacity:   50,
	interval: {
	    line: {
		show:       true,
		color:      "#aaa",
		opacity:    25
	    },
	    weekend: {
		color:      "#FFFFE0",
		opacity:    30
	    },
	    marker: {
		hAlign:     "Bottom",
		hBottomStyler: function(elmt) {
		    elmt.className = "timeline-ether-marker-upper";
		},
		hBottomEmphasizedStyler: function(elmt) {
		    elmt.className = "timeline-ether-marker-bottom-emphasized";
		},
		hTopStyler: function(elmt) {
		    elmt.className = "timeline-ether-marker-top";
		},
		hTopEmphasizedStyler: function(elmt) {
		    elmt.className = "timeline-ether-marker-top-emphasized";
		},
		    
		vAlign:     "Right",
		vRightStyler: function(elmt) {
		    elmt.className = "timeline-ether-marker-right";
		},
		vRightEmphasizedStyler: function(elmt) {
		    elmt.className = "timeline-ether-marker-right-emphasized";
		},
		vLeftStyler: function(elmt) {
		    elmt.className = "timeline-ether-marker-left";
		},
		vLeftEmphasizedStyler:function(elmt) {
		    elmt.className = "timeline-ether-marker-left-emphasized";
		}
	    }
	}
	};

	upper.event = {
	track: {
	    offset:         0.5, // em
	    height:         1.5, // em
	    gap:            0.5  // em
	},
	instant: {
	    icon:           "images/timeline.gif",
	    lineColor:      "#58A0DC",
	    impreciseColor: "#58A0DC",
	    impreciseOpacity: 20,
	    showLineForNoText: true
	},
	duration: {
	    color:          "#58A0DC",
	    opacity:        100,
	    impreciseColor: "#58A0DC",
	    impreciseOpacity: 20
	},
	label: {
	    insideColor:    "white",
	    outsideColor:   "black",
	    width:          200 // px
	},
	highlightColors: [
	    "#FFFF00",
	    "#FFC000",
	    "#FF0000",
	    "#0000FF"
	],
	bubble: {
	    width:          195, // px
	    height:         60, // px
	    titleStyler: function(elmt) {
		elmt.className = "timeline-event-bubble-title";
	    },
	    bodyStyler: function(elmt) {
		elmt.className = "timeline-event-bubble-body";
	    },
	    imageStyler: function(elmt) {
		elmt.className = "timeline-event-bubble-image";
	    },
	    wikiStyler: function(elmt) {
		elmt.className = "timeline-event-bubble-wiki";
	    },
	    timeStyler: function(elmt) {
		elmt.className = "timeline-event-bubble-time";
	    }
	}
	    };


	//lower Band

  	var lower = Timeline.ClassicTheme.create();

	lower.firstDayOfWeek = 0; // Sunday
	    
	lower.ether = {
	backgroundColors: [
	    "#FFF",
	    "#000",
	    "#FFF",
	    "#FFF"
	],
	highlightColor:     "green",
	highlightOpacity:   50,
	interval: {
	    line: {
		show:       true,
		color:      "#000",
		opacity:    25
	    },
	    weekend: {
		color:      "#FFFFE0",
		opacity:    30
	    },
	    marker: {
		hAlign:     "Bottom",
		hBottomStyler: function(elmt) {
		    elmt.className = "timeline-ether-marker-lower";
		},
		hBottomEmphasizedStyler: function(elmt) {
		    elmt.className = "timeline-ether-marker-bottom-emphasized";
		},
		hTopStyler: function(elmt) {
		    elmt.className = "timeline-ether-marker-top";
		},
		hTopEmphasizedStyler: function(elmt) {
		    elmt.className = "timeline-ether-marker-top-emphasized";
		},
		    
		vAlign:     "Right",
		vRightStyler: function(elmt) {
		    elmt.className = "timeline-ether-marker-right";
		},
		vRightEmphasizedStyler: function(elmt) {
		    elmt.className = "timeline-ether-marker-right-emphasized";
		},
		vLeftStyler: function(elmt) {
		    elmt.className = "timeline-ether-marker-left";
		},
		vLeftEmphasizedStyler:function(elmt) {
		    elmt.className = "timeline-ether-marker-left-emphasized";
		}
	    }
	}
	};

	lower.event = {
	track: {
	    offset:         0.5, // em
	    height:         0.6, // em
	    gap:            0.5  // em
	},
	instant: {
	    icon:           Timeline.urlPrefix + "images/dull-blue-circle.png",
	    lineColor:      "#ff0000",
	    impreciseColor: "#ff0000",
	    impreciseOpacity: 20,
	    showLineForNoText: true
	},
	duration: {
	    color:          "#ff0000",
	    opacity:        100,
	    impreciseColor: "#ff0000",
	    impreciseOpacity: 20
	},
	label: {
	    insideColor:    "white",
	    outsideColor:   "black",
	    width:          200 // px
	},
	highlightColors: [
	    "#FFFF00",
	    "#FFC000",
	    "#FF0000",
	    "#0000FF"
	],
	bubble: {
	    width:          250, // px
	    height:         125, // px
	    titleStyler: function(elmt) {
		elmt.className = "timeline-event-bubble-title";
	    },
	    bodyStyler: function(elmt) {
		elmt.className = "timeline-event-bubble-body";
	    },
	    imageStyler: function(elmt) {
		elmt.className = "timeline-event-bubble-image";
	    },
	    wikiStyler: function(elmt) {
		elmt.className = "timeline-event-bubble-wiki";
	    },
	    timeStyler: function(elmt) {
		elmt.className = "timeline-event-bubble-time";
	    }
	}
	    };

	  var bandInfos = [
	    Timeline.createBandInfo({
		eventSource:    eventSource,
        	date:           currentDate,
		width:          "85%", 
		intervalUnit:   Timeline.DateTime.MONTH, 
		intervalPixels: 200,
		theme:		upper
	    }),
	    Timeline.createBandInfo({
		eventSource:    eventSource,
        	date:           currentDate,
		width:          "15%", 
		showEventText:  false,
		intervalUnit:   Timeline.DateTime.YEAR, 
		intervalPixels: 200,
		theme:		lower
	    })
	  ];

		bandInfos[1].syncWith = 0;
		bandInfos[1].highlight = true;
		tl = Timeline.create(document.getElementById("my-timeline"), bandInfos);
		Timeline.loadXML("flyer.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);
	    }
	}