[% USE date %]

[% WRAPPER layout.tt title="Timeline" %]

[% PROCESS common.tt %]

<div class="page-header"><h1>Hydra timeline of last 24 hours</h1></div>

<script type="text/javascript">
Timeline_urlPrefix="http://simile.mit.edu/timeline/api/";
</script>
<script src="http://simile.mit.edu/timeline/api/timeline-api.js" type="text/javascript"></script> 


<script type="text/javascript">  
  $(function() {
    doItNow()
  });  
       
 var tl;
 function doItNow() {
   var eventSource = new Timeline.DefaultEventSource();
   var bandInfos = [
     Timeline.createBandInfo({
         eventSource:    eventSource,
         width:          "100%", 
         intervalUnit:   Timeline.DateTime.HOUR, 
         intervalPixels: 200
     })
   ];

   tl = Timeline.create(document.getElementById("my-timeline"), bandInfos);

   var centerd = Timeline.DateTime.parseIso8601DateTime("[% date.format(pit, '%Y-%m-%dT%H:%M:%S') %]");
   tl.getBand(0).setCenterVisibleDate( centerd );

   var event_data =
       { "dateTimeFormat": "iso8601", "events":[
          { "start": "[% date.format(pit, '%Y-%m-%dT%H:%M:%S') %]",
            "end": "[% date.format(pit, '%Y-%m-%dT%H:%M:%S') %]", 
            "title": "Now"
          } 

     [% FOREACH build IN builds -%]
          , { "start": "[% date.format(build.get_column("starttime"), '%Y-%m-%dT%H:%M:%S')  %]",
              "end": "[% date.format(build.get_column("stoptime"), '%Y-%m-%dT%H:%M:%S') %]", 
              "isDuration": "true",
              "title": "[% build.id %]",
              "link": "[% c.uri_for('/build' build.id) %]",
              "color": "[% IF build.get_column("buildstatus") == 0 %]green[%ELSE%]red[% END%]"
            } 
     [% END %]
    ]}; 

   eventSource.loadJSON(event_data, document.location.href); 


 }
</script>

<div id="my-timeline" style="height: 700px; width: 100%;border: 1px solid #aaa"></div>
<noscript>
This page uses Javascript to show you a Timeline. Please enable Javascript in your browser to see the full page. Thank you.
</noscript>

[% END %]