detail view
diff --git a/planetstack/core/xoslib/static/js/test.js b/planetstack/core/xoslib/static/js/test.js
index bc7f955..7a1106c 100644
--- a/planetstack/core/xoslib/static/js/test.js
+++ b/planetstack/core/xoslib/static/js/test.js
@@ -10,7 +10,8 @@
     siteList: "#siteList",
     sliceList: "#sliceList",
     sliverList: "#sliverList",
-    userList: "#userList"
+    userList: "#userList",
+    detail: "#detail"
 });
 
 // ---- Deployment ----
@@ -38,13 +39,52 @@
          name = objs[index];
          tr_template = '#test-' + name + '-listitem-template';
          table_template = '#test-' + name + '-list-template';
+         detail_template = '#test-' + name + '-detail-template';
          collection_name = name + "s";
          region_name = name + "List";
 
+         detailClass = Marionette.ItemView.extend({
+            template: detail_template,

+            tagName: 'div',

+

+            events: {"click button.js-submit": "submitClicked",

+                     "change input": "inputChanged"},

+

+            /* inputChanged is watching the onChange events of the input controls. We

+               do this to track when this view is 'dirty', so we can throw up a warning

+               if the user tries to change his slices without saving first.

+            */

+

+            inputChanged: function(e) {

+                this.dirty = true;

+            },

+

+            submitClicked: function(e) {

+                e.preventDefault();

+                var data = Backbone.Syphon.serialize(this);

+                this.model.save(data);

+                this.dirty = false;

+            },

+         });
+
          itemViewClass = Marionette.ItemView.extend({
+             detailClass: detailClass,
              template: tr_template,
              tagName: 'tr',
              className: 'test-tablerow',
+
+             events: {"click": "changeItem"},
+

+             changeItem: function(e) {

+                    e.preventDefault();

+                    e.stopPropagation();

+

+                    var detailView = new this.detailClass({

+                        model: this.model,

+                    });

+                    $('#detailBox').show();

+                    TestApp.detail.show(detailView);

+              },
          });
 
          listViewClass = Marionette.CompositeView.extend({
@@ -63,6 +103,12 @@
          TestApp[region_name].show(listView);
          xos[collection_name].startPolling();
      }
+
+     $('#close-detail-view').bind('click', function() {
+         $('#detailBox').hide();
+     });
+
+     $('#detailBox').hide();
 });
 
 $(document).ready(function(){