<html>
<head>
    <title>SIMILE | Timeline | Examples | Dinosaurs 2</title>
    <link rel='stylesheet' href='../styles.css' type='text/css' />

    <script src="../../api/timeline-api.js" type="text/javascript"></script>
    <script src="../../api/ext/geochrono/geochrono-api.js" type="text/javascript"></script>
    <script src="../examples.js" type="text/javascript"></script>
    <script src="layouts.js" type="text/javascript"></script>
    <script src="painters.js" type="text/javascript"></script>
    <script>
        var tl;
        function onLoad() {
            var theme = Timeline.ClassicTheme.create();
            theme.event.label.width = 150; // px
            theme.event.bubble.width = 250;
            theme.event.bubble.height = 200;
            theme.ether.backgroundColors.unshift("white");
            
            var eventSource = new Timeline.DefaultEventSource(new SimileAjax.EventIndex(Timeline.GeochronoUnit));
            
            var d = Timeline.GeochronoUnit.wrapMA(80);
            var bandInfos = [
                Timeline.Geochrono.createBandInfo({
                    eventSource:    eventSource,
                    date:           d,
                    width:          "86%", 
                    intervalUnit:   Timeline.GeochronoUnit.MA, 
                    intervalPixels: 100,
                    trackGap:       0.2,
                    trackHeight:    1.3,
                    theme:          theme
                }),
                Timeline.Geochrono.createBandInfo({
                    date:           d,
                    width:          "6%", 
                    intervalUnit:   Timeline.GeochronoUnit.EPOCH, 
                    intervalPixels: 15,
                    showEventText:  false,
                    align:          "Top",
                    theme:          theme
                }),
                Timeline.Geochrono.createBandInfo({
                    date:           d,
                    width:          "4%", 
                    intervalUnit:   Timeline.GeochronoUnit.PERIOD, 
                    intervalPixels: 8,
                    showEventText:  false,
                    theme:          theme
                }),
                Timeline.Geochrono.createBandInfo({
                    date:           d,
                    width:          "4%", 
                    intervalUnit:   Timeline.GeochronoUnit.ERA, 
                    intervalPixels: 2,
                    showEventText:  false,
                    theme:          theme
                })
            ];
            bandInfos[0].eventPainter = new Timeline.ThumbnailEventPainter({
                theme:              theme,
                trackHeight:        15,
                trackOffset:        10,
                labelWidth:         100,
                thumbnailWidth:     80,
                thumbnailHeight:    26
            });
            bandInfos[1].syncWith = 0;
            bandInfos[1].highlight = true;
            bandInfos[2].syncWith = 0;
            bandInfos[2].highlight = true;
            bandInfos[3].syncWith = 0;
            bandInfos[3].highlight = true;
            bandInfos[0].decorators = [
                new Timeline.SpanHighlightDecorator({
                    unit:       Timeline.GeochronoUnit,
                    startDate:  Timeline.GeochronoUnit.wrapMA(65.1),
                    endDate:    Timeline.GeochronoUnit.wrapMA(64.9),
                    startLabel: "",
                    endLabel:   "K/T Extinction",
                    color:      "#FFC080",
                    opacity:    50,
                    theme:      theme
                })
            ];
            for (var i = 1; i < bandInfos.length; i++) {
                bandInfos[i].decorators = [
                    new Timeline.PointHighlightDecorator({
                        unit:       Timeline.GeochronoUnit,
                        date:       Timeline.GeochronoUnit.wrapMA(65),
                        color:      "#FFC080",
                        opacity:    50,
                        theme:      theme
                    })
                ];
            }
            
            tl = Timeline.create(document.getElementById("tl"), bandInfos, Timeline.HORIZONTAL, Timeline.GeochronoUnit);
            tl.loadXML("dinosaurs.xml", function(xml, url) {
                eventSource.loadXML(xml, url);
            });
            
            setupFilterHighlightControls(document.getElementById("controls"), tl, [0,1], theme);
        }
        var resizeTimerID = null;
        function onResize() {
            if (resizeTimerID == null) {
                resizeTimerID = window.setTimeout(function() {
                    resizeTimerID = null;
                    tl.layout();
                }, 500);
            }
        }
    </script>
</head>
<body onload="onLoad();" onresize="onResize();">
<ul id="path">

  <li><a href="http://simile.mit.edu/" title="Home">SIMILE</a></li>

  <li><a href="../../" title="Timeline">Timeline</a></li>

  <li><a href="../" title="Examples">Examples</a></li>

  <li><span>Dinosaurs 2</span></li>

</ul>

<div id="body">
    <h1>Dinosaurs 2</h1>
    
    <p>Sources: <a href="http://internt.nhm.ac.uk/jdsml/nature-online/dino-directory/timeline.dsml?disp=gall&per_id=&sort=Genus">the Natural History Museum, Dino Directory</a>.
    </p>
    
    <div id="tl" class="timeline-default" style="height: 730px;">
    </div>
    
    <div class="controls" id="controls">
    </div>
</div>
</body>
</html>