<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Timeline</title>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=ISO-8859-1">
<script src="http://simile.mit.edu/timeline/api/timeline-api.js" type="text/javascript"></script>
<script>
var tl;

function onLoad() {
  var eventSource = new Timeline.DefaultEventSource(0);
  var theme = Timeline.ClassicTheme.create();
  theme.event.bubble.width = 320;
  theme.event.bubble.height = 220;
  var d = Timeline.DateTime.parseGregorianDateTime("<tmpl_var name=earliest_date>");
  var bandInfos = [
    Timeline.createBandInfo({
    width:          "100%", 
    intervalUnit:   Timeline.DateTime.DECADE, 
    intervalPixels: 70,
    eventSource:    eventSource,
    date:           d,
    theme:          theme
  })
  ];
  tl = Timeline.create(document.getElementById("my-timeline"), bandInfos);
  Timeline.loadXML("<tmpl_var name=xml_file_name>", function(xml, url) { eventSource.loadXML(xml,
  url); });
}

var resizeTimerID = null;
  function onResize() {
  if (resizeTimerID == null) {
    resizeTimerID = window.setTimeout(function() {
    resizeTimerID = null;
    tl.layout();
    }, 500);
  }
}
</script>
</head>
<body onload="onLoad();" onresize="onResize();">
  <h1>Timeline</h1>
  <div id="my-timeline" style="height: <tmpl_var name=timeline_height>px; border: 1px solid #aaa"></div>
  <tmpl_if name=missing_as_table>
  <p>
	<tmpl_var name=missing>
  </p>
  <table>
	<tr>
	  <th>Name</th><td>Death date</td>
	</tr>
	<tmpl_loop name=missing_loop>
	  <tr><th><tmpl_var name=name></th><td><tmpl_var name=death_date></td>
	</tmpl_loop>
  </table>
  <tmpl_else>
  <p>
	People excluded because of missing birth dates have been given a birthdate of <tmpl_var name=todays_date>.
  </p>
  </tmpl_if>
  <hr />
  <p>Note: You should see 2 timescales at the bottom of the timeline. You can click-and-drag
on each separately, for slow or quick movement through time.</p>
</body>
</html>