[#73,app][s]: integrate timeline into multiview and app.

app/index.html

@@ -15,6 +15,7 @@
   <!--[if lte IE 8]>
   <link rel="stylesheet" href="../vendor/leaflet/0.3.1/leaflet.ie.css" />
   <![endif]-->
+  <link rel="stylesheet" href="../vendor/timeline/20120520/css/timeline.css">
 
   <!-- Recline CSS components -->
   <link rel="stylesheet" href="../css/data-explorer.css">
@@ -37,6 +38,7 @@
   <script type="text/javascript" src="../vendor/jquery.mustache.js"></script>
   <script type="text/javascript" src="../vendor/bootstrap/2.0.2/bootstrap.js"></script>
   <script type="text/javascript" src="../vendor/leaflet/0.3.1/leaflet.js"></script>
+  <script type="text/javascript" src="../vendor/timeline/20120520/js/timeline.js"></script>
 
   <!-- recline library -->
   <!-- in normal use would just the single recline.js library file. However, for testing it
@@ -55,6 +57,7 @@
   <script type="text/javascript" src="../src/view-graph.js"></script>
   <script type="text/javascript" src="../src/view-map.js"></script>
   <script type="text/javascript" src="../src/view-transform-dialog.js"></script>
+  <script type="text/javascript" src="../src/view-timeline.js"></script>
 
   <!-- non-library javascript specific to this demo -->
   <script type="text/javascript" src="js/app.js"></script>

app/style/demo.css

@@ -11,3 +11,7 @@ body {
   height: 550px;
 }
 
+.recline-timeline .vmm-timeline {
+  height: 550px;
+}
+

src/view.js

@@ -205,6 +205,13 @@ my.DataExplorer = Backbone.View.extend({
           model: this.model,
           state: this.state.get('view-map')
         }),
+      }, {
+        id: 'timeline',
+        label: 'Timeline',
+        view: new my.Timeline({
+          model: this.model,
+          state: this.state.get('view-timeline')
+        }),
       }];
     }
     // these must be called after pageViews are created