var tl; // The ID reference for the Timeline

object in the HTML page function onLoad() { var eventSource = new Timeline.DefaultEventSource(); // custom sections for upper time band var zones0 = [ {start: "Mon, Jan 1 1979 00:00:00 GMT+0000", end: "Mon, Jan 1 2001 00:00:00 GMT+0000", magnify: 0.4, unit: Timeline.DateTime.WEEK }, {start: "Sat, Sep 1 2001 00:00:00 GMT+0000", end: "Sun, Nov 11 2001 00:00:00 GMT+0000", magnify: 2, unit: Timeline.DateTime.DAY }, {start: "Sun, Nov 11 2001 00:00:00 GMT+0000", end: "Mon, Dec 31 2001 00:00:00 GMT+0000", magnify: 4, unit: Timeline.DateTime.DAY } ]; // custom sections for lower time band var zones1 = [ {start: "Mon, Jan 1 1979 00:00:00 GMT+0000", end: "Mon, Jan 1 2001 00:00:00 GMT+0000", magnify: 0.2, unit: Timeline.DateTime.MONTH }, {start: "Sat, Sep 1 2001 00:00:00 GMT+0000", end: "Mon, Dec 31 2001 00:00:00 GMT+0000", magnify: 2, unit: Timeline.DateTime.MONTH } ]; var leftDate = new Date(1979,1,1,0,0,0,0); var rightDate = new Date(2011,1,2,0,0,0,0); var theme = Timeline.ClassicTheme.create(); //create the actual Timeline object theme.timeline_start = leftDate; // set timeline left margin (variable created above) theme.timeline_stop = rightDate; // set timeline right margin (variable created above) //theme.event.bubble.width = 250; //seems hardwired to 250px in bundle's themes.js //theme.event.bubble.width = 0; // 0 = no max hight. Bubble windows s auto-size for height var initialDate = "Tue, 1 Jun 2010 00:00:00 GMT+0000"; // initialisation (centre) date for new Timeline // properties for Timeline bands (first= top, second = bottom band) // width: height [sic] as a % of height of the 'tl'

// intervalUnit: year, week, day, etc. // intervalPixels: widthin pixels of one of the above unit (modified by optional zones) // zones: optional varitions in band's base horizontal scale // eventSource: object with all event data // date: the date on which to centre the Timeline at first start // timeZone: 0 (default = 0 = GMT) // overview: lower band only - suppresses labels and icons, only duration markers shown // theme: theme object - allows for customisation of look and feel. var bandInfos = [ Timeline.createHotZoneBandInfo({ width: "80%", intervalUnit: Timeline.DateTime.WEEK, intervalPixels: 120, zones: zones0, eventSource: eventSource, date: initialDate, timeZone: 0, theme: theme }), Timeline.createHotZoneBandInfo({ width: "20%", intervalUnit: Timeline.DateTime.MONTH, intervalPixels: 50, zones: '', eventSource: eventSource, date: initialDate, timeZone: 0, overview: true, theme: theme }) ]; // This makes the bottom band move in synch with the top (#0) band bandInfos[1].syncWith = 0; // This makes band #1 highlight the current viewed area in the top band bandInfos[1].highlight = true; //create the actual Timleine object tl = Timeline.create(document.getElementById("tl"), bandInfos, Timeline.HORIZONTAL); // load the event data; tl.loadXML("events.xml", function(xml, url) { eventSource.loadXML(xml, url); }); // set up content filters (references examples.js) setupFilterHighlightControls(document.getElementById("controls"), tl, [0,1], theme); Timeline.writeVersion('tl_ver') } var resizeTimerID = null; function onResize() { if (resizeTimerID == null) { resizeTimerID = window.setTimeout(function() { resizeTimerID = null; tl.layout(); }, 500); } } // used by 'jump to' links function centerTimeline(year_,month_,day_,hour_,min_) { var theYear = (year_)? year_: new Date().getYear(); // ideally set this catch-all date inside project time range. var theMonth = (month_)? month_ : 0; var theDay = (day_)? day_ : 1; var theHour = (hour_)? hour_ : 0; var theMinute = (min_)? min_ : 0; tl.getBand(0).setCenterVisibleDate(new Date(theYear, theMonth, theDay, theHour, theMinute)); } window.onload = onLoad; window.onresize = onResize; // moved from in original example