<html>
<head> 
    <title> MOPS Web Interface - <% $m->notes('MODEL')  %></title> 
    <link rel="stylesheet" href="/css/default.css" type="text/css">
    <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 bandInfos = [
                Timeline.createBandInfo({
                    width:          "80%", 
                    intervalUnit:   Timeline.DateTime.WEEK, 
                    intervalPixels: 200,
                    eventSource:    eventSource,
                    date:           "Oct 01 2006 00:00:00 GMT",
                    theme:          theme
                }),
                Timeline.createBandInfo({
                    width:          "20%", 
                    intervalUnit:   Timeline.DateTime.YEAR, 
                    intervalPixels: 200,
                    showEventText:  false,
                    trackHeight:    0.5,
                    trackGap:       0.2,
                    eventSource:    eventSource,
                    date:           "Oct 01 2006 00:00:00 GMT",
                    theme:          theme
                })
            ];
            bandInfos[1].syncWith = 0;
            bandInfos[1].highlight = true;
            bandInfos[1].eventPainter.setLayout(bandInfos[0].eventPainter.getLayout());
            
            tl = Timeline.create(document.getElementById("ssm-timeline"), bandInfos, Timeline.HORIZONTAL);
            Timeline.loadJSON("/json/<% $model %>/dotimeline/<% $derivedobjectId %>", 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();">


<div class="H24">
MOPS Solar System Simulation
</div>

<div class="Hsmall">
<a href="/index.html">All Datasets</a>
</div>

<div id="headimg">
<& /rndimg &>
</div>

<div class="main">


<%args>
$model
$derivedobjectId
</%args>

<%init>
</%init>
