<html>
<head>
    <title>SIMILE | Timeline | Examples | Test Example</title>
    <link rel='stylesheet' href='../styles.css' type='text/css' />
    <script src="../../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 = 350;
            theme.event.bubble.height = 300;
            var d = Timeline.DateTime.parseGregorianDateTime("1900")
            var bandInfos = [
                Timeline.createBandInfo({
                    width:          "100%", 
                    intervalUnit:   Timeline.DateTime.DECADE, 
                    intervalPixels: 200,
                    eventSource:    eventSource,
                    date:           d,
                    theme:          theme,
                    layout:         'original'  // original, overview, detailed
                })
            ];
            
            tl = Timeline.create(document.getElementById("tl"), bandInfos, Timeline.HORIZONTAL);
            // Adding the date to the url stops browser caching of data during testing or if
            // the data source is a dynamic query...
            tl.loadJSON("test.js?"+ (new Date().getTime()), function(json, url) {
                eventSource.loadJSON(json, 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();">
<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>Event Attribute Tests</span></li>
</ul>
<div id="body">
    <h1>Event Attribute Tests</h1>
    
    <p>This test uses <a href="test.js">JSON data</a>.</p>
    <p>It demonstrates use of various event attributes <i>color</i>, <i>textColor</i>, <i>tapeImage</i>, and <i>tapeRepeat</i>. <a href='http://code.google.com/p/simile-widgets/wiki/Timeline_EventSources'>Details</a></p>
    <p>Test numbers:
        <ol>
            <li>Only start date</li>
            <li>Start and end dates. Combinations of isDuration</li>
            <li>Red tapes. Events without titles. Start and end dates. Combinations of isDuration</li>
            <li>Caption and tapeImage attributes. The striped tape. Hover over the label or tape to view the caption.</p>
        </ul>
    Remember to check that the bubbles look appropriate too.
    </p>
    <p>Stripe courtesy of <a href='http://www.stripegenerator.com/'>Stripe Generator</a>
    <div id="tl" class="timeline-default" style="height: 300px;">
    </div>
</div>
</body>
</html>
