sub timeline :Local {
    my ($self, $c) = @_;
    my $pit = time()-(24*60*60)-1;
    $pit = 1258469400 - (24*60*60)-1;

    $c->stash->{template} = 'timeline.tt';
    $c->stash->{pit} = $pit; 
    $c->stash->{builds} = [$c->model('DB::Builds')->search(
        {finished => 1, stoptime => { '>' => $pit } }
      , { join => 'resultInfo'
        , order_by => ["starttime"]
        , '+select' => [ 'resultInfo.starttime', 'resultInfo.stoptime', 'resultInfo.buildstatus' ]   
        , '+as' => [ 'starttime', 'stoptime', 'buildstatus' ]   
        })];
}

[% USE date %]
[% WRAPPER layout.tt title="Timeline" %]
[% PROCESS common.tt %]
<h1>Hydra timeline of last 24 hours</h1>
<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; 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 %]