From c2f5debf1f1c4d3c58889cb8a25db05afd7222e1 Mon Sep 17 00:00:00 2001
From: Rufus Pollock <rufus.pollock@okfn.org>
Date: Wed, 27 Jun 2012 10:10:45 +0100
Subject: [PATCH] [docs,app,demos/multiview][m]: convert app back to being a
 demo of multiview (app proper is now in dataexplorer repo).

---
 _includes/recline-deps.html    |  41 +++--
 _layouts/default.html          |   8 +-
 app/built.html                 | 170 ---------------------
 app/images/bg_gradient.gif     | Bin 87 -> 0 bytes
 app/images/couch.png           | Bin 2536 -> 0 bytes
 app/images/large-spinner.gif   | Bin 3208 -> 0 bytes
 app/index.html                 | 265 ---------------------------------
 app/js/app.js                  | 246 ------------------------------
 app/style/demo.css             |  21 ---
 demos.html => demos/index.html |   5 +-
 demos/multiview/app.js         |  84 +++++++++++
 demos/multiview/index.html     |  24 +++
 index.html                     |   2 +-
 13 files changed, 133 insertions(+), 733 deletions(-)
 delete mode 100644 app/built.html
 delete mode 100755 app/images/bg_gradient.gif
 delete mode 100755 app/images/couch.png
 delete mode 100755 app/images/large-spinner.gif
 delete mode 100644 app/index.html
 delete mode 100755 app/js/app.js
 delete mode 100644 app/style/demo.css
 rename demos.html => demos/index.html (71%)
 create mode 100755 demos/multiview/app.js
 create mode 100644 demos/multiview/index.html

diff --git a/_includes/recline-deps.html b/_includes/recline-deps.html
index 71b9c45a..7ffe11d8 100644
--- a/_includes/recline-deps.html
+++ b/_includes/recline-deps.html
@@ -1,33 +1,26 @@
-  <link rel="stylesheet" href="vendor/leaflet/0.3.1/leaflet.css">
+  <link rel="stylesheet" href="{{page.root}}vendor/leaflet/0.3.1/leaflet.css">
   <!--[if lte IE 8]>
-  <link rel="stylesheet" href="vendor/leaflet/0.3.1/leaflet.ie.css" />
+  <link rel="stylesheet" href="{{page.root}}vendor/leaflet/0.3.1/leaflet.ie.css" />
   <![endif]-->
-  <link rel="stylesheet" href="vendor/slickgrid/2.0.1/slick.grid.css">
+  <link rel="stylesheet" href="{{page.root}}vendor/slickgrid/2.0.1/slick.grid.css">
 
   <!-- Recline CSS components -->
-  <link rel="stylesheet" href="css/grid.css">
-  <link rel="stylesheet" href="css/graph.css">
-  <link rel="stylesheet" href="css/map.css">
-  <link rel="stylesheet" href="css/multiview.css">
+  <link rel="stylesheet" href="{{page.root}}dist/recline.css">
   <!-- /Recline CSS components -->
 
   <!-- 3rd party JS libraries -->
-  <script type="text/javascript" src="vendor/jquery/1.7.1/jquery.js"></script>
-  <script type="text/javascript" src="vendor/underscore/1.1.6/underscore.js"></script>
-  <script type="text/javascript" src="vendor/backbone/0.5.1/backbone.js"></script>
-  <script type="text/javascript" src="vendor/mustache/0.5.0-dev/mustache.js"></script>
-  <script type="text/javascript" src="vendor/bootstrap/2.0.2/bootstrap.js"></script>
-  <script type="text/javascript" src="vendor/jquery.flot/0.7/jquery.flot.js"></script>
-  <script type="text/javascript" src="vendor/leaflet/0.3.1/leaflet.js"></script>
+  <script type="text/javascript" src="{{page.root}}vendor/jquery/1.7.1/jquery.js"></script>
+  <script type="text/javascript" src="{{page.root}}vendor/underscore/1.1.6/underscore.js"></script>
+  <script type="text/javascript" src="{{page.root}}vendor/backbone/0.5.1/backbone.js"></script>
+  <script type="text/javascript" src="{{page.root}}vendor/mustache/0.5.0-dev/mustache.js"></script>
+  <script type="text/javascript" src="{{page.root}}vendor/bootstrap/2.0.2/bootstrap.js"></script>
+  <script type="text/javascript" src="{{page.root}}vendor/jquery.flot/0.7/jquery.flot.js"></script>
+  <script type="text/javascript" src="{{page.root}}vendor/leaflet/0.3.1/leaflet.js"></script>
+  <script type="text/javascript" src="{{page.root}}vendor/slickgrid/2.0.1/jquery-ui-1.8.16.custom.min.js"></script>
+  <script type="text/javascript" src="{{page.root}}vendor/slickgrid/2.0.1/jquery.event.drag-2.0.min.js"></script>
+  <script type="text/javascript" src="{{page.root}}vendor/slickgrid/2.0.1/slick.grid.min.js"></script>
+  <script type="text/javascript" src="{{page.root}}vendor/moment/1.6.2/moment.js"></script>
+  <script type="text/javascript" src="{{page.root}}vendor/timeline/20120520/js/timeline.js"></script>
 
-  <!--
-  The recline library itself - this includes all components at once.
-
-  You can include just the components you need e.g.
-
-  <script type="text/javascript" src="src/model.js"></script>
-  <script type="text/javascript" src="src/backend/base.js"></script>
-  <script type="text/javascript" src="src/backend/memory.js"></script>
-  -->
-  <script type="text/javascript" src="dist/recline.js"></script>
+  <script type="text/javascript" src="{{page.root}}dist/recline.js"></script>
 
diff --git a/_layouts/default.html b/_layouts/default.html
index 16d91ddc..d4573674 100644
--- a/_layouts/default.html
+++ b/_layouts/default.html
@@ -27,17 +27,17 @@
       <a class="logo-icon pull-left" href="/">
         <img src="http://assets.okfn.org/p/recline/img/chair.png" />
       </a>
-      <a class="brand" href="/"><strong>Recline.js</strong> &ndash; relax with your data</a>
+      <a class="brand" href="{{page.root}}"><strong>Recline.js</strong> &ndash; relax with your data</a>
       <ul class="nav">
         <li>
-          <a href="/docs/">
+          <a href="{{page.root}}docs/">
             <i class="icon-book icon-white"></i>
             Documentation
           </a>
         </li>
         <li class="divider-vertical"></li>
         <li>
-          <a href="demos.html">
+          <a href="{{page.root}}demos/">
             <i class="icon-pencil icon-white"></i>
             Demos
           </a>
@@ -75,7 +75,7 @@
 	<div class="container">
     <div class="row">
       <div class="span4">
-        <p class="getit-btn"><a href="library.html" class="btn">Use the Library &raquo;</a></p>
+        <p class="getit-btn"><a href="{{page.root}}docs/" class="btn">Use the Library &raquo;</a></p>
         <p>Recline.js is freely redistributable under the terms of the MIT license.</p>
       </div>
       <div class="span3">
diff --git a/app/built.html b/app/built.html
deleted file mode 100644
index 6fb0ed16..00000000
--- a/app/built.html
+++ /dev/null
@@ -1,170 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-  <meta charset="utf-8" />
-  <title>Recline Data Explorer (Built Sources)</title>
-  <meta name="description" content="A demo of the Recline Data Explorer">
-  <meta name="author" content="Rufus Pollock and Max Ogden">
-
-  <!-- Le HTML5 shim, for IE6-8 support of HTML elements -->
-  <!--[if lt IE 9]>
-    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
-  <![endif]-->
-  <link rel="stylesheet" href="../vendor/bootstrap/2.0.2/css/bootstrap.css">
-  <link rel="stylesheet" href="../vendor/leaflet/0.3.1/leaflet.css">
-  <!--[if lte IE 8]>
-  <link rel="stylesheet" href="../vendor/leaflet/0.3.1/leaflet.ie.css" />
-  <![endif]-->
-
-  <!-- Recline CSS components -->
-  <link rel="stylesheet" href="../css/data-explorer.css">
-  <link rel="stylesheet" href="../css/grid.css">
-  <link rel="stylesheet" href="../css/graph.css">
-  <link rel="stylesheet" href="../css/map.css">
-  <!-- /Recline CSS components -->
-
-  <!-- Custom CSS for the Data Explorer Online App -->
-  <link rel="stylesheet" href="style/demo.css">
-
-  <link rel="stylesheet" href="../vendor/bootstrap/2.0.2/css/bootstrap-responsive.css">
-
-  <!-- 3rd party JS libraries -->
-  <script type="text/javascript" src="../vendor/jquery/1.7.1/jquery.js"></script>
-  <script type="text/javascript" src="../vendor/underscore/1.1.6/underscore.js"></script>
-  <script type="text/javascript" src="../vendor/backbone/0.5.1/backbone.js"></script>
-  <script type="text/javascript" src="../vendor/jquery.flot/0.7/jquery.flot.js"></script>
-  <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>
-
-  <!-- recline library -->
-  <script type="text/javascript" src="../recline.js"></script>
-
-  <!-- non-library javascript specific to this demo -->
-  <script type="text/javascript" src="js/app.js"></script>
-</head>
-<body>
-<div class="recline-app">
-  <div class="navbar navbar-fixed-top">
-    <div class="navbar-inner">
-      <div class="container-fluid">
-        <a class="brand" href="../">Recline Data Explorer</a>
-        <ul class="nav">
-          <li><a href="../#docs">Documentation</a></li>
-        </ul>
-        <ul class="nav pull-right">
-          <li class="dropdown">
-            <a data-toggle="dropdown" class="dropdown-toggle">
-              Import <b class="caret"></b></a>
-            <ul class="dropdown-menu js-import">
-              <li>
-                <a data-toggle="modal" href=".js-import-dialog-url">Import from URL</a>
-              </li>
-              <li>
-                <a data-toggle="modal" href=".js-import-dialog-file">Import from File</a>
-              </li>
-            </ul>
-          </li>
-          <li>
-          <a href=".js-share-and-embed-dialog" data-toggle="modal">
-              Share and Embed
-              <i class="icon-share icon-white"></i>
-            </a>
-          </li>
-        </ul>
-      </div>
-    </div>
-  </div>
-
-  <div class="modal fade in js-import-dialog-url" style="display: none;">
-    <div class="modal-header">
-      <a class="close" data-dismiss="modal">×</a>
-      <h3>Import from URL</h3> 
-    </div>
-    <div class="modal-body">
-      <form class="js-import-url form-horizontal">
-        <div class="control-group">
-          <label class="control-label">URL</label>
-          <div class="controls">
-            <input type="text" name="source" class="input-xlarge" />
-          </div>
-        </div>
-        <div class="control-group">
-          <label class="control-label">Type of data</label>
-          <div class="controls">
-            <select name="backend_type">
-              <option value="elasticsearch">ElasticSearch</option>
-              <option value="dataproxy">CSV or Excel</option>
-              <option value="gdocs">Google Spreadsheet</option>
-            </select>
-          </div>
-        </div>
-        <div class="form-actions">
-          <button type="submit" class="btn btn-primary">Import &raquo;</button>
-        </div>
-      </form>
-    </div>
-  </div>
-
-  <div class="modal fade in js-import-dialog-file" style="display: none;">
-    <div class="modal-header">
-      <a class="close" data-dismiss="modal">×</a>
-      <h3>Import from File</h3> 
-    </div>
-    <div class="modal-body">
-      <form class="form-horizontal">
-        <div class="control-group">
-          <label class="control-label">File</label>
-          <div class="controls">
-            <input type="file" name="source" />
-          </div>
-        </div>
-        <div class="control-group">
-          <label class="control-label">Separator</label>
-          <div class="controls">
-            <input type="text" name="separator" value="," class="spam1"/>
-          </div>
-        </div>
-        <div class="control-group">
-          <label class="control-label">Text delimiter</label>
-          <div class="controls">
-            <input type="text" name="delimiter" value='"' />
-          </div>
-        </div>
-
-        <div class="control-group">
-          <label class="control-label">Encoding</label>
-          <div class="controls">
-            <input type="text" name="encoding" value="UTF-8" />
-          </div>
-        </div>
-        <div class="form-actions">
-          <button type="submit" class="btn btn-primary">Import &raquo;</button>
-        </div>
-      </form>
-    </div>
-  </div>
-
-  <div class="modal fade in js-share-and-embed-dialog" style="display: none;">
-    <div class="modal-header">
-      <a class="close" data-dismiss="modal">×</a>
-      <h3>Share and Embed</h3> 
-    </div>
-    <div class="modal-body">
-      <h4>Sharable Link to current View</h4>
-      <textarea class="view-link" style="width: 100%; height: 100px;"></textarea>
-      <h4>Embed this View</h4>
-      <textarea class="view-embed" style="width: 100%; height: 200px;"></textarea>
-    </div>
-  </div>
-
-  <div class="container-fluid">
-    <div class="content">
-      <div class="data-explorer-here"></div>
-    </div>
-  </div>
-</div>
-
-</body>
-</html>
-
diff --git a/app/images/bg_gradient.gif b/app/images/bg_gradient.gif
deleted file mode 100755
index c413136779e05b60bdbaf9d5a63c693c6bb5766c..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 87
zcmZ?wbhEHbWMPnGSj52a`1R*!@4meH^!4f6FVEk9dGhA-iw|F3e*CKVlZ62UbU*}1
oEd#TR#;&S=2B*?j?Y%MK>~FpV4!)GkNv^Bb<uLAXU}CTa0BgS|t^fc4

diff --git a/app/images/couch.png b/app/images/couch.png
deleted file mode 100755
index fc37062776621c36ad7304293c5603726a405701..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 2536
zcmaJ@YdDna8WwWObU<a|%4b*$WoEuH7^WF9W}GsXkf9`VVkUEH4h)){X+k0AEv2H;
zNry#L4x2@EKA|ELX;CYu9ZJz2t+e-#-TtoY``-6?ulv5A=Y5|0$0zsoafj%v(@{}T
zfp~fl{gmql<!h*=s{E?yf2>k2P%$Y;?9UGuM^lAN6&D7d#soaM)Ci^@lgfzM)4{|k
zp)htpkT{6!jivLs2<id`A>|5`Y!wyUW~qQmk7SAg8Z&~;!^6g|H^Klm0}rFvkwLP+
zmC0gz#0r`Iu|5Ix*hsn~1Gd=-z)7)60WMQa1*BXKPlT1?Vc&GI%KgGI5(a#Oh$Hc^
zzl#bY`vR_fArr7efN(l!4+8cm1PX17!C<Tb8xRE|K^r8>29CmD(Kc8R1in8oWi}xr
z9P3AP`<_b~;bAPXSb#+$qobn{(P#u;7=c7NIyx?B*x1082)HPQC#Fi_JdxR=0+A`A
z3)uoOo6iFl6sa`6M2v?iEB*TlT)_`np6Gj<lnp~lsRASl0WMr=5lANge<+vx11%E!
zG5=HV{}dJl#0Z#3Kc<K;5z>`|3pZOxCBV80nN%@f7{KRq7Q5)n;*0qr7GD6k`r83y
zDxJ++h`-^<WUMDoB&PD{Oiv;nrc^+%*$gZiWsi1oAi6oaVn7s%1iHAnIS|pVC|5TW
z+TPyIevwP$(<NLcPrS%w{NR$npK=$hz!fMn6PZGG6qDg5<a2><SH`k`UJLQ3df&N>
zpVmSo{gjJT7K2<E?0*e<@kr^Oh3ya9DuW-!XY!P87b<Pt7Qp*WMMWdTljss4eV!K>
z!wDc69xa}kzS$?c{vxBsm%t`@u|W@7vV}Z5j7S?uoY>#JSz(f7KD8n%NiP8OIR3=L
zJcsDvd<KwjU8TQee1ortSsFkoH(=Fja%=l!?Z*4iWACS%)|B4h{rUdh-bQ}I;Ea)V
ziZkfYSU-1#wT(QVl*(%Lu*2+p{=ug?c|{>^YVYZ4Ei#xg%>7bFZ?73Xx2_qd9*81z
zMuE**?@Vjo9}f=Q8d|H7P8iQ9>)ZG!!iSw%{&3v#Nb&S!XY27l92mN4br&ATmd(tx
z*k7qnYo*<L7SEzkW>1-nk35cwJR5I*E}MD~m6oqpHjJ}VFl>?@ZXE{+ftfY6+HKX9
zLk*dIwPCL}>K1rOZhU^DKx#Idy5I+=gS)=OUBK*3g+3kl6h3d>YUsYiyp1Txfg}SZ
z_bf@3#aG;f=+PKi|EOdKGE?0snH*RDf`Txa9i*H;UG#b_>yHZCXV1E;Gg8PLQk^0*
zHWO{`plPAV--;+&2^L<Q^q(t18<wsw&FX&nkJBY53iC1xLwFI-3mO%rn=HDUUY)dK
zZo$a&!3`VHa0{^e5>(XywDbp(6Vfb%M%p?wa~$j>Yh<u!WnEaQi!S=BJfhxdex<)o
zhng-?aC&d-t1HOu(S2k+`G*NQWmo*_w+D%EXpCv%(&_RXuY_4uUo9vk-nI1WvZDsp
zanG-d8~D4DLql?BdM>vP{1VHy(oUblX7n{4+Z)l6U!QONOnb^Qaofll`L6VF0WH{9
ze~IN4u6<E1*>1kBJ+Dl5`Io)zA$Jc9Ek{*3<#t5Ad+CM2P&c~SLTpAYD0TanN`l!B
zpJ2LDPf=*(_M2InaZ&NXpB@In*QfV5tlg2t9t!HV;7!P7L&e@RUGVP4m)gNVefhmZ
z$NT~?yAkBUl!~F%g4-}(!nITBhL_K${<$;sCQWg_1tV{|J3xfx3~ZAe?rylxr8wB9
zXw6sLbZN6{?s;NXnI(v`AV)b*6y3QL9Dg)(M|7d+)tygvXUlIr{0a@_AL@RA?{wXH
zf5#+iXjJBQx3syu?1}TEii5gN1?A)Ka*1^HuEez+kauYZ?I7!&POkNytj8YimnElM
zTOBt1e!j9L9$z>7S5;x@MlL;x5fI?>S-gWZ7Zu5a7jVq8`=vo)je4ICed(Hiu7fTK
zE4I}prIbT-#j(8bmxtW%b};oRD(}Z4&-VA+jK|pPdX%oopu{({SCz=<QR)@4^yN_v
zwSg9C2@S3({)Im9sV$TQLj}uV#Cc8cfz@g9Jr(;-2#)M2$B)g9Wwo0WAML%aW>on=
zY_R-sz}wfN6}w(cr9O_ii<CBY=gaV8iK*K|ouZF~ba$wndEBUXaJBPJ^)JVqV!|!w
zA3Vz4CaI3#L{3fBa6|k5H5b|k%Aqb*7v<RpRPX$z`B@(BeLijz?#gy4uSsf{=ruLk
zi{KdPLvBCbboHF=S!u4R0U0)AWG!#ioE}@{Q^}dDL^T`lcG_*?knQ2!<@~#P`+=S$
zPP&$kg|ky^4JWY5UG+rCuau%+4GVUyET<(+0UyJXKlh!>gBBS_wJ!VXO?Wm1M>r8i
ztO|G6@w#RpfzZjZqsyv#&z?)s-CvXaDCud(wRq=M<4%F|s&BxN*(aG+5A+_W8d!EU
zo90g3V5FnCvmVm0USEl%a>zkP`^+h){4Is1dLdzrW(<*4L1DZx3S9s2L`itUheUmX
zWY?O|J?JGd8Uu7_wbgC?z@F)*e)wUx7PYg-UTn}fWJ@dOP)$M+_d^9=Zf8xp+-*Wb
zBFC#VyR#M8TsR@;sXEj&NtSMIHjt=K#t0J}>6N#QJ8>GvZ&ws7gGS}Z@@^&6c>1>@
ztqo2F9((29yang$;%xwSd{TP`m_jbZS)&Wo2cx^vCYL2=<aJhhtzXk)@~o_-;YdiD
z?6XScsx#LW>neIhiRy;9vi38lu9m{2r!^-;&ykh)%htusS}|WuLT~*}g}xE)sm`df
zs8)EI8Fy-P2t}3=2-~GMgliK*Mj2wyAb&61#(R#1BZOWeX&)`+D8UUGf0^2*Ic4U#
zlC{C<V%NL3K+f>TbCwSTfI%TJ(9y8wz^v6}nxeivEzK<|if3Oc@ba|vx-)LMO~OGq
kru5d^$S?g<{&jVjN>W=UcK=n4*oA*DPm&Mu0wFBv-vBx=Hvj+t

diff --git a/app/images/large-spinner.gif b/app/images/large-spinner.gif
deleted file mode 100755
index 3288d1035d70bb86517e2c233f1a904e41f06b29..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 3208
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
Bt<?Yk

diff --git a/app/index.html b/app/index.html
deleted file mode 100644
index 5777d132..00000000
--- a/app/index.html
+++ /dev/null
@@ -1,265 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-  <meta charset="utf-8" />
-  <title>Recline Data Explorer</title>
-  <meta name="description" content="The Recline Data Explorer">
-  <meta name="author" content="Rufus Pollock and Max Ogden">
-
-  <!-- Le HTML5 shim, for IE6-8 support of HTML elements -->
-  <!--[if lt IE 9]>
-    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
-  <![endif]-->
-  <link rel="stylesheet" href="../vendor/bootstrap/2.0.2/css/bootstrap.css">
-  <link rel="stylesheet" href="../vendor/leaflet/0.3.1/leaflet.css">
-  <!--[if lte IE 8]>
-  <link rel="stylesheet" href="../vendor/leaflet/0.3.1/leaflet.ie.css" />
-  <![endif]-->
-  <link rel="stylesheet" href="../vendor/slickgrid/2.0.1/slick.grid.css">
-  <link rel="stylesheet" href="../vendor/timeline/20120520/css/timeline.css">
-
-  <!-- Recline CSS components -->
-  <link rel="stylesheet" href="../css/grid.css">
-  <link rel="stylesheet" href="../css/slickgrid.css">
-  <link rel="stylesheet" href="../css/graph.css">
-  <link rel="stylesheet" href="../css/map.css">
-  <link rel="stylesheet" href="../css/multiview.css">
-  <!-- /Recline CSS components -->
-
-  <!-- Custom CSS for the Data Explorer Online App -->
-  <link rel="stylesheet" href="../css/site/site.css">
-  <link rel="stylesheet" href="style/demo.css">
-
-  <link rel="stylesheet" href="../vendor/bootstrap/2.0.2/css/bootstrap-responsive.css">
-
-  <!-- 3rd party JS libraries -->
-  <script type="text/javascript" src="../vendor/jquery/1.7.1/jquery.js"></script>
-  <script type="text/javascript" src="../vendor/underscore/1.1.6/underscore.js"></script>
-  <script type="text/javascript" src="../vendor/backbone/0.5.1/backbone.js"></script>
-  <script type="text/javascript" src="../vendor/moment/1.6.2/moment.js"></script>
-  <script type="text/javascript" src="../vendor/jquery.flot/0.7/jquery.flot.js"></script>
-  <script type="text/javascript" src="../vendor/mustache/0.5.0-dev/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/slickgrid/2.0.1/jquery-ui-1.8.16.custom.min.js"></script>
-  <script type="text/javascript" src="../vendor/slickgrid/2.0.1/jquery.event.drag-2.0.min.js"></script>
-  <script type="text/javascript" src="../vendor/slickgrid/2.0.1/slick.grid.min.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
-  is easier to reference individual files. See built.html for example using just recline.js -->
-  <script type="text/javascript" src="../src/costco.js"></script>
-  <script type="text/javascript" src="../src/model.js"></script>
-  <script type="text/javascript" src="../src/backend/base.js"></script>
-  <script type="text/javascript" src="../src/backend/memory.js"></script>
-  <script type="text/javascript" src="../src/backend/dataproxy.js"></script>
-  <script type="text/javascript" src="../src/backend/elasticsearch.js"></script>
-  <script type="text/javascript" src="../src/backend/gdocs.js"></script>
-  <script type="text/javascript" src="../src/backend/csv.js"></script>
-
-  <script type="text/javascript" src="../src/view.grid.js"></script>
-  <script type="text/javascript" src="../src/view.slickgrid.js"></script>
-  <script type="text/javascript" src="../src/view.transform.js"></script>
-  <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.timeline.js"></script>
-  <script type="text/javascript" src="../src/widget.pager.js"></script>
-  <script type="text/javascript" src="../src/widget.queryeditor.js"></script>
-  <script type="text/javascript" src="../src/widget.filtereditor.js"></script>
-  <script type="text/javascript" src="../src/widget.fields.js"></script>
-  <script type="text/javascript" src="../src/view.multiview.js"></script>
-
-  <!-- non-library javascript specific to this demo -->
-  <script type="text/javascript" src="js/app.js"></script>
-  <!-- for demo dataset -->
-  <script type="text/javascript" src="../test/base.js"></script>
-</head>
-<body>
-<div class="recline-app">
-  <div class="navbar navbar-fixed-top">
-    <div class="navbar-inner">
-      <div class="container-fluid">
-        <a class="brand" href="#">Recline Data Explorer</a>
-        <ul class="nav pull-right">
-          <li class="dropdown">
-            <a data-toggle="dropdown" class="dropdown-toggle">
-              Load Data <b class="caret"></b></a>
-            <ul class="dropdown-menu js-load">
-              <li>
-                <a href="#" class="js-load-dialog-url" data-type="gdocs" data-help="You must have published your spreadsheet to load it here (File Menu - Publish to the Web)">Load from Google Docs Spreadsheet</a>
-              </li>
-              <li>
-                <a href="#" class="js-load-dialog-url" data-type="datahub" data-help="The link to the Dataset Data Resource on the DataHub to load from - note that the resource must have its Data API enabled">Load from the DataHub</a>
-              </li>
-              <li>
-                <a href="#" class="js-load-dialog-url" data-type="csv" data-help="Provide the link to the CSV file online">Load from CSV online</a>
-              </li>
-              <li>
-                <a href="#" class="js-load-dialog-url" data-type="excel" data-help="Provide the link to the Excel file online">Load from Excel online</a>
-              </li>
-              <li>
-                <a href="#" class="js-load-dialog-url" data-type="elasticsearch" data-help="Provide the link to the ElasticSearch endpoint (either an index or a type/table">Load from ElasticSearch</a>
-              </li>
-              <li class="divider"></li>
-              <li>
-                <a data-toggle="modal" href=".js-load-dialog-file">Load from CSV on disk</a>
-              </li>
-            </ul>
-          </li>
-          <li>
-            <a href=".js-share-and-embed-dialog" data-toggle="modal">
-              Share and Embed
-              <i class="icon-share icon-white"></i>
-            </a>
-          </li>
-          <li>
-            <a href=".js-settings" data-toggle="modal">
-              Settings
-              <i class="icon-cog icon-white" style="margin-top: 1px;"></i>
-            </a>
-          </li>
-        </ul>
-      </div>
-    </div>
-  </div>
-
-  <div class="container-fluid">
-    <div class="content">
-      <div class="page-home backbone-page">
-        <div class="hero-unit">
-          <h1>Welcome to the Recline Data Explorer</h1>
-          <p>Recline allows you to explore and work with data in your browser and then share with others</p>
-        </div>
-        <div class="row-fluid">
-          <div class="span4">
-            <div class="well">
-              <h3>View the demo</h3>
-              <p>Try out the demo using a local example dataset.</p>
-              <p><a class="btn btn-primary" href="?url=demo#explorer">View the demo dataset &raquo;</a></p>
-            </div>
-          </div>
-          <div class="span4">
-            <div class="well">
-              <h3>Features</h3>
-              <ul>
-                <li>Data grid</li>
-                <li>Data editing including programmatic data transformation in javascript</li>
-                <li>Visualizations includes graphs and maps</li>
-                <li>Load and export from a variety of sources including online sources such as online Excel and CSV files, Google docs and
-                the <a href="http://datahub.io/">DataHub</a> and offline sources like CSV files on your local machine.</li>
-                <li>Use online or offline - because the app is built in pure javascript and html you can use it anywhere there's a modern web browser. Using offline is as easy and downloading this web page to your local machine.</li>
-              </ul>
-            </div>
-          </div>
-          <div class="span4">
-            <div class="well">
-              <h3>Get started</h3>
-              <p>Get started straight away for example by importing some data from an external source <strong>using the menu at the top right</strong> of this page.</p>
-            </div>
-          </div>
-        </div>
-      </div>
-      </div>
-
-      <div class="page-explorer backbone-page">
-        <div class="data-explorer-here"></div>
-      </div>
-    </div>
-
-  <!-- modals for menus -->
-  <div class="modal fade in js-load-dialog-url" style="display: none;">
-    <div class="modal-header">
-      <a class="close" data-dismiss="modal">×</a>
-      <h3>Load from URL</h3>
-    </div>
-    <div class="modal-body">
-      <form class="js-load-url">
-        <div class="control-group">
-          <div class="controls">
-            <input type="text" name="source" class="span5" placeholder="URL to data source" />
-            <p class="help-block"></p>
-            <input name="backend_type" style="display: none;" />
-          </div>
-        </div>
-        <button type="submit" class="btn btn-primary">Load &raquo;</button>
-      </form>
-    </div>
-  </div>
-
-  <div class="modal fade in js-load-dialog-file" style="display: none;">
-    <div class="modal-header">
-      <a class="close" data-dismiss="modal">×</a>
-      <h3>Load from File</h3>
-    </div>
-    <div class="modal-body">
-      <form class="form-horizontal">
-        <div class="control-group">
-          <label class="control-label">File</label>
-          <div class="controls">
-            <input type="file" name="source" />
-          </div>
-        </div>
-        <div class="control-group">
-          <label class="control-label">Separator</label>
-          <div class="controls">
-            <input type="text" name="separator" value="," class="spam1"/>
-          </div>
-        </div>
-        <div class="control-group">
-          <label class="control-label">Text delimiter</label>
-          <div class="controls">
-            <input type="text" name="delimiter" value='"' />
-          </div>
-        </div>
-
-        <div class="control-group">
-          <label class="control-label">Encoding</label>
-          <div class="controls">
-            <input type="text" name="encoding" value="UTF-8" />
-          </div>
-        </div>
-        <div class="form-actions">
-          <button type="submit" class="btn btn-primary">Load &raquo;</button>
-        </div>
-      </form>
-    </div>
-  </div>
-
-  <div class="modal fade in js-share-and-embed-dialog" style="display: none;">
-    <div class="modal-header">
-      <a class="close" data-dismiss="modal">×</a>
-      <h3>Share and Embed</h3>
-    </div>
-    <div class="modal-body">
-      <h4>Sharable Link to current View</h4>
-      <textarea class="view-link" style="width: 100%; height: 100px;"></textarea>
-      <h4>Embed this View</h4>
-      <textarea class="view-embed" style="width: 100%; height: 200px;"></textarea>
-    </div>
-  </div>
-
-  <div class="modal fade in js-settings" style="display: none;">
-    <div class="modal-header">
-      <a class="close" data-dismiss="modal">×</a>
-      <h3>Settings</h3>
-    </div>
-    <div class="modal-body">
-      <form class="form-horizontal">
-        <div class="control-group">
-          <label class="control-label">DataHub API Key</label>
-          <div class="controls">
-            <input type="text" name="datahub_api_key" value="" />
-            <p class="help-block"><strong>Getting your API key:</strong> Register/Login to <a href="http://datahub.io/">http://datahub.io/</a> and then visit your user home page (click on the link at the top right). On your home page your API key is located at the top of the page in the section showing your main user details.</p>
-          </div>
-        </div>
-        <div class="form-actions">
-          <button type="submit" class="btn btn-primary">Save &raquo;</button>
-        </div>
-      </form>
-    </div>
-  </div>
-</div>
-</body>
-</html>
-
diff --git a/app/js/app.js b/app/js/app.js
deleted file mode 100755
index b849f5cc..00000000
--- a/app/js/app.js
+++ /dev/null
@@ -1,246 +0,0 @@
-jQuery(function($) {
-  window.ReclineDataExplorer = new ExplorerApp({
-    el: $('.recline-app')
-  })
-});
-
-var ExplorerApp = Backbone.View.extend({
-  events: {
-    'click .nav .js-load-dialog-url': '_onLoadURLDialog',
-    'submit form.js-load-url': '_onLoadURL',
-    'submit .js-load-dialog-file form': '_onLoadFile',
-    'submit .js-settings form': '_onSettingsSave'
-  },
-
-  initialize: function() {
-    this.el = $(this.el);
-    this.dataExplorer = null;
-    this.explorerDiv = $('.data-explorer-here');
-    _.bindAll(this, 'viewExplorer', 'viewHome');
-
-    this.router = new Backbone.Router();
-    this.router.route('', 'home', this.viewHome);
-    this.router.route(/explorer/, 'explorer', this.viewExplorer);
-    Backbone.history.start();
-
-    var state = recline.View.parseQueryString(decodeURIComponent(window.location.search));
-    if (state) {
-      _.each(state, function(value, key) {
-        try {
-          value = JSON.parse(value);
-        } catch(e) {}
-        state[key] = value;
-      });
-      if (state.embed) {
-        $('.navbar').hide();
-        $('body').attr('style', 'padding-top: 0px');
-      }
-    }
-    var dataset = null;
-    // special cases for demo / memory dataset
-    if (state.url === 'demo' || state.backend === 'memory') {
-      dataset = localDataset();
-    }
-    else if (state.dataset || state.url) {
-      dataset = recline.Model.Dataset.restore(state);
-    }
-    if (dataset) {
-      this.createExplorer(dataset, state);
-    }
-    this._initializeSettings();
-  },
-
-  viewHome: function() {
-    this.switchView('home');
-  },
-
-  viewExplorer: function() {
-    this.router.navigate('explorer');
-    this.switchView('explorer');
-  },
-
-  switchView: function(path) {
-    $('.backbone-page').hide(); 
-    var cssClass = path.replace('/', '-');
-    $('.page-' + cssClass).show();
-  },
-
-
-  // make Explorer creation / initialization in a function so we can call it
-  // again and again
-  createExplorer: function(dataset, state) {
-    var self = this;
-    // remove existing data explorer view
-    var reload = false;
-    if (this.dataExplorer) {
-      this.dataExplorer.remove();
-      reload = true;
-    }
-    this.dataExplorer = null;
-    var $el = $('<div />');
-    $el.appendTo(this.explorerDiv);
-    var views = [
-       {
-         id: 'grid',
-         label: 'Grid', 
-         view: new recline.View.SlickGrid({
-           model: dataset
-         })
-       },
-
-       {
-         id: 'graph',
-         label: 'Graph',
-         view: new recline.View.Graph({
-           model: dataset
-         })
-       },
-       {
-         id: 'map',
-         label: 'Map',
-         view: new recline.View.Map({
-           model: dataset
-         })
-       },
-       {
-         id: 'timeline',
-         label: 'Timeline',
-         view: new recline.View.Timeline({
-           model: dataset
-         })
-       }
-    ];
-
-    this.dataExplorer = new recline.View.MultiView({
-      model: dataset,
-      el: $el,
-      state: state,
-      views: views
-    });
-    this._setupPermaLink(this.dataExplorer);
-    this._setupEmbed(this.dataExplorer);
-
-    this.viewExplorer();
-  },
-
-  _setupPermaLink: function(explorer) {
-    var self = this;
-    var $viewLink = this.el.find('.js-share-and-embed-dialog .view-link');
-    explorer.state.bind('change', function() {
-      $viewLink.val(self.makePermaLink(explorer.state));
-    });
-    $viewLink.val(self.makePermaLink(explorer.state));
-  },
-
-  _setupEmbed: function(explorer) {
-    var self = this;
-    var $embedLink = this.el.find('.js-share-and-embed-dialog .view-embed');
-    function makeEmbedLink(state) {
-      var link = self.makePermaLink(state);
-      link = link + '&amp;embed=true';
-      var out = Mustache.render('<iframe src="{{link}}" width="100%" min-height="500px;"></iframe>', {link: link});
-      return out;
-    }
-    explorer.state.bind('change', function() {
-      $embedLink.val(makeEmbedLink(explorer.state));
-    });
-    $embedLink.val(makeEmbedLink(explorer.state));
-  },
-
-  makePermaLink: function(state) {
-    var qs = recline.View.composeQueryString(state.toJSON());
-    return window.location.origin + window.location.pathname + qs;
-  },
-
-  // setup the loader menu in top bar
-  setupLoader: function(callback) {
-    // pre-populate webstore load form with an example url
-    var demoUrl = 'http://thedatahub.org/api/data/b9aae52b-b082-4159-b46f-7bb9c158d013';
-    $('form.js-load-url input[name="source"]').val(demoUrl);
-  },
-
-  _onLoadURLDialog: function(e) {
-    e.preventDefault();
-    var $link = $(e.target);
-    var $modal = $('.modal.js-load-dialog-url');
-    $modal.find('h3').text($link.text());
-    $modal.modal('show');
-    $modal.find('input[name="source"]').val('');
-    $modal.find('input[name="backend_type"]').val($link.attr('data-type'));
-    $modal.find('.help-block').text($link.attr('data-help'));
-  },
-
-  _onLoadURL: function(e) {
-    e.preventDefault();
-    $('.modal.js-load-dialog-url').modal('hide');
-    var $form = $(e.target);
-    var source = $form.find('input[name="source"]').val();
-    var datasetInfo = {
-      id: 'my-dataset',
-      url: source
-    };
-    var type = $form.find('input[name="backend_type"]').val();
-    if (type === 'csv' || type === 'excel') {
-      datasetInfo.format = type;
-      type = 'dataproxy';
-    }
-    if (type === 'datahub') {
-      // have a full resource url so convert to data API
-      if (source.indexOf('dataset') != -1) {
-        var parts = source.split('/');
-        datasetInfo.url = parts[0] + '/' + parts[1] + '/' + parts[2] + '/api/data/' + parts[parts.length-1];
-      }
-      type = 'elasticsearch';
-    }
-    datasetInfo.backend = type;
-    var dataset = new recline.Model.Dataset(datasetInfo);
-    this.createExplorer(dataset);
-  },
-
-  _onLoadFile: function(e) {
-    var self = this;
-    e.preventDefault();
-    var $form = $(e.target);
-    $('.modal.js-load-dialog-file').modal('hide');
-    var $file = $form.find('input[type="file"]')[0];
-    var dataset = new recline.Model.Dataset({
-      file: $file.files[0],
-      separator : $form.find('input[name="separator"]').val(),
-      delimiter : $form.find('input[name="delimiter"]').val(),
-      encoding : $form.find('input[name="encoding"]').val(),
-      backend: 'csv'
-    });
-    dataset.fetch().done(function() {
-      self.createExplorer(dataset)
-    });
-  },
-
-  _getSettings: function() {
-    var settings = localStorage.getItem('dataexplorer.settings');
-    settings = JSON.parse(settings) || {};
-    return settings;
-  },
-
-  _initializeSettings: function() {
-    var settings = this._getSettings();
-    $('.modal.js-settings form input[name="datahub_api_key"]').val(settings.datahubApiKey);
-  },
-
-  _onSettingsSave: function(e) {
-    var self = this;
-    e.preventDefault();
-    var $form = $(e.target);
-    $('.modal.js-settings').modal('hide');
-    var datahubKey = $form.find('input[name="datahub_api_key"]').val();
-    var settings = this._getSettings();
-    settings.datahubApiKey = datahubKey;
-    localStorage.setItem('dataexplorer.settings', JSON.stringify(settings));
-  }
-});
-
-// provide a demonstration in memory dataset
-function localDataset() {
-  var dataset = Fixture.getDataset();
-  return dataset;
-}
-
diff --git a/app/style/demo.css b/app/style/demo.css
deleted file mode 100644
index ad690766..00000000
--- a/app/style/demo.css
+++ /dev/null
@@ -1,21 +0,0 @@
-body {
-  padding-top: 60px;
-}
-
-/* we do not have a LH sidebar */
-.container-fluid > .content {
-  margin-left: 0;
-}
-
-.recline-grid-container {
-  height: 550px;
-}
-
-.recline-slickgrid {
-  height: 550px;
-}
-
-.recline-timeline .vmm-timeline {
-  height: 550px;
-}
-
diff --git a/demos.html b/demos/index.html
similarity index 71%
rename from demos.html
rename to demos/index.html
index 724ce580..b788daf9 100644
--- a/demos.html
+++ b/demos/index.html
@@ -1,6 +1,7 @@
 ---
 layout: container
 title: Demos
+root: ../
 ---
 
 <div class="page-header">
@@ -12,8 +13,8 @@ title: Demos
 <div class="row">
   <div class="span4">
     <div class="well">
-      <h3>Explorer Demo</h3>
-      <p>View the full Data Explorer in action on a sample dataset <a href="app/?url=demo">Demo &raquo;</a></p>
+      <h3>Multiview Demo</h3>
+      <p>See the integrated multiview "Data Explorer" in action on a sample dataset <a href="multiview/">Demo &raquo;</a></p>
     </div>
   </div>
   <div class="span4">
diff --git a/demos/multiview/app.js b/demos/multiview/app.js
new file mode 100755
index 00000000..30063c3f
--- /dev/null
+++ b/demos/multiview/app.js
@@ -0,0 +1,84 @@
+jQuery(function($) {
+  window.dataExplorer = null;
+  window.explorerDiv = $('.data-explorer-here');
+
+  // see if we have any configuration from query string
+  var state = recline.View.parseQueryString(decodeURIComponent(window.location.search));
+  if (state) {
+    _.each(state, function(value, key) {
+      try {
+        value = JSON.parse(value);
+      } catch(e) {}
+      state[key] = value;
+    });
+  } else {
+    state.url = 'demo';
+  }
+  var dataset = null;
+  if (state.dataset || state.url) {
+    dataset = recline.Model.Dataset.restore(state);
+  } else {
+    dataset = localDataset();
+  }
+  createExplorer(dataset, state);
+});
+
+
+// make Explorer creation / initialization in a function so we can call it
+// again and again
+var createExplorer = function(dataset, state) {
+  // remove existing data explorer view
+  var reload = false;
+  if (window.dataExplorer) {
+    window.dataExplorer.remove();
+    reload = true;
+  }
+  window.dataExplorer = null;
+  var $el = $('<div />');
+  $el.appendTo(window.explorerDiv);
+  var views = [
+     {
+       id: 'grid',
+       label: 'Grid', 
+       view: new recline.View.SlickGrid({
+         model: dataset
+       })
+     },
+
+     {
+       id: 'graph',
+       label: 'Graph',
+       view: new recline.View.Graph({
+         model: dataset
+       })
+     },
+     {
+       id: 'map',
+       label: 'Map',
+       view: new recline.View.Map({
+         model: dataset
+       })
+     },
+     {
+       id: 'timeline',
+       label: 'Timeline',
+       view: new recline.View.Timeline({
+         model: dataset
+       })
+     }
+  ];
+
+  window.dataExplorer = new recline.View.MultiView({
+    model: dataset,
+    el: $el,
+    state: state,
+    views: views
+  });
+}
+
+// provide a demonstration in memory dataset
+function localDataset() {
+  var dataset = Fixture.getDataset();
+  return dataset;
+}
+
diff --git a/demos/multiview/index.html b/demos/multiview/index.html
new file mode 100644
index 00000000..6252703c
--- /dev/null
+++ b/demos/multiview/index.html
@@ -0,0 +1,24 @@
+---
+layout: container
+title: Demos - Multiview
+recline-deps: true
+root: ../../
+---
+
+<style type="text/css">
+.recline-slickgrid {
+  height: 450px;
+}
+
+.recline-timeline .vmm-timeline {
+  height: 450px;
+}
+</style>
+
+<div class="data-explorer-here"></div>
+
+<div style="clear: both;"></div>
+
+<script type="text/javascript" src="{{page.root}}/test/base.js"></script>
+<script type="text/javascript" src="app.js"></script>
+
diff --git a/index.html b/index.html
index 520e0c09..ed709413 100644
--- a/index.html
+++ b/index.html
@@ -8,7 +8,7 @@ title: Home
     <div class="row">
       <div class="span8 offset4">
         <h1>
-          <img src="images/logo.png" width="455" height="190" alt="Recline Data Explorer and Library">
+          <a href="docs/"><img src="images/logo.png" width="455" height="190" alt="Recline Data Explorer and Library"></a>
         </h1>
         <div class="inner">
           A simple but powerful library for building data applications in