<!-- roadmap.vm --->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<!-- See http://developer.yahoo.com/yui/grids/ for info on the grid layout -->
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<!-- See http://developer.yahoo.com/yui/ for info on the reset, font and base css -->
<link rel="stylesheet" href="http://yui.yahooapis.com/2.7.0/build/reset-fonts-grids/reset-fonts-grids.css" type="text/css">
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.7.0/build/base/base-min.css">
<!-- Load the Timeline library after reseting the fonts, etc -->
<script src="../timeline_2.3.0/timeline_js/timeline-api.js?bundle=true&defaultLocale=$localeLang&forceLocale=$localeLang" type="text/javascript"></script>
<script>
// To change .ToUTCString() to .ToLocaleDateString() so the date time would be in locale convention.
Timeline.GregorianDateLabeller.prototype.labelPrecise = function(date) {
return SimileAjax.DateTime.removeTimeZoneOffset(
date,
this._timeZone + (new Date().getTimezoneOffset() / 60)).toLocaleDateString();
};
</script>
<link rel="stylesheet" href="local_example.css" type="text/css">
<!-- Since we don't have our own server, we do something tricky and load our data here as if it were a library file -->
<script type="text/javascript">
var timeline_data = { // save as a global variable
'dateTimeFormat': 'iso8601',
//'wikiURL': "http://simile.mit.edu/shelf/",
//'wikiSection': "Simile Cubism Timeline",
'events' : $events }
</script>
<script>
var tl;
function onLoad() {
var tl_el = document.getElementById("tl");
var eventSource1 = new Timeline.DefaultEventSource();
var theme1 = Timeline.ClassicTheme.create();
theme1.autoWidth = true; // Set the Timeline's "width" automatically.
// Set autoWidth on the Timeline's first band's theme,
// will affect all bands.
theme1.timeline_start = new Date(Date.UTC( $startDateYear, $startDateMonth, $startDateDate));
theme1.timeline_stop = new Date(Date.UTC( $endDateYear, $endDateMonth, $endDateDate));
var d = new Date(Date.UTC( $startDateYear, $startDateMonth, 0));
//var d = Timeline.DateTime.parseGregorianDateTime("$year")
var bandInfos = [
Timeline.createBandInfo({
width: 45, // set to a minimum, autoWidth will then adjust
intervalUnit: Timeline.DateTime.WEEK,
intervalPixels: 50,
eventSource: eventSource1,
date: d,
theme: theme1,
layout: 'original' // original, overview, detailed
}),
Timeline.createBandInfo({
width: 45, // set to a minimum, autoWidth will then adjust
intervalUnit: Timeline.DateTime.MONTH,
intervalPixels: 80,
eventSource: eventSource1,
date: d,
theme: theme1,
layout: 'overview' // original, overview, detailed
})
];
bandInfos[1].syncWith = 0;
bandInfos[1].highlight = true;
// create the Timeline
tl = Timeline.create(tl_el, bandInfos, Timeline.HORIZONTAL);
var url = '.'; // The base url for image, icon and background image
// references in the data
eventSource1.loadJSON(timeline_data, url); // The data was stored into the
// timeline_data variable.
tl.layout(); // display the Timeline
}
var resizeTimerID = null;
function onResize() {
if (resizeTimerID == null) {
resizeTimerID = window.setTimeout(function() {
resizeTimerID = null;
tl.layout();
}, 500);
}
}
</script>
</head>
<body onload="onLoad();" onresize="onResize();">
<div id="doc3" class="yui-t7">
<div id="bd" role="main">
<div class="yui-g">
<div id='tl'></div>
<p>$instruct</p>
</div>
</div>
</div>
</body>
</html>