--- a/service/remoteSlideshow/www/index.jade	Sun Oct 04 04:14:27 2015 -0700
+++ b/service/remoteSlideshow/www/index.jade	Sun Oct 04 04:15:07 2015 -0700
@@ -4,18 +4,49 @@
       body { 
         background: black;
         color: white;
+        width: 1024px;
+        height: 600px;
+        overflow: hidden;
       }
+
+      h1, p {
+        background: hsla(0, 0%, 0%, 0.47);
+        display: inline-block;
+        font-size: 31px;
+        padding: 7px;
+      }
+      
       img#main {
         position: absolute;
         left: 0px;
         top: 0px;
-        width: 100%;
-        height: 100%;
+        width: 1024px;
+        height: 600px;
         z-index: -10;
       }
+      div#feeder {
+        box-shadow: 5px 5px 112px hsl(0, 0%, 0%);
+        position: absolute;
+        left: 180px;
+        top: 61px;
+        border: 2px solid white;
+      }
+      div#feeder img {
+ 
+      }
   body
-    img(id='main', src="#")
+    img(id='main', src="")
+    div(id='feeder')
     h1 Ari's bed cactus
+    div(style="position: absolute; right: 20px; top: 20px")
+      button(data-bind="click: toggleFeederCam")
+        | toggle feeder
+      button(data-bind="click: nextImage") next image
+    p(style="position:absolute; left: 20px; top:500px")
+      | Picture 
+      span(data-bind="text: imageIndex() + 1")
+
     script(src="../lib/jquery-1.9.1.min.js")
+    script(src="../lib/knockout-2.3.0.js")
     script(src='show.js')
-     
\ No newline at end of file
+

--- a/service/remoteSlideshow/www/show.coffee	Sun Oct 04 04:14:27 2015 -0700
+++ b/service/remoteSlideshow/www/show.coffee	Sun Oct 04 04:15:07 2015 -0700
@@ -1,5 +1,3 @@
-
-
 reconnectingWebSocket = (url, onMessage) ->
   connect = ->
     ws = new WebSocket(url)
@@ -23,6 +21,18 @@
   connect()
 
 
+model =
+  imageIndex: ko.observable(-1)
+  feederCam: ko.observable(false)
+
+model.toggleFeederCam = ->
+    if model.feederCam()
+      $("#feeder").empty().hide()
+      model.feederCam(false)
+    else
+      $("#feeder").append($("<img>").attr("src", "http://bang.bigasterisk.com/ipcam1/videostream.cgi?rate=6")).show()
+      model.feederCam(true)
+
 images = [
   '../images/3387331383_d5c530cd9e_z.jpg',
   '../images/1878786955_1356972060.jpg',
@@ -46,15 +56,17 @@
   '../images/f8.jpg',
   '../images/f9.jpg',
 ]
-imageIndex = -1
 
-nextImage = ->
-  imageIndex = (imageIndex + 1) % images.length
-  $("#main").attr('src', images[imageIndex])
-nextImage()  
+model.nextImage = ->
+  model.imageIndex((model.imageIndex() + 1) % images.length)
+  $("#main").attr('src', images[model.imageIndex()])
+model.nextImage()  
 
 reconnectingWebSocket("ws://bang:9071/events", (msg) ->
   console.log("got", msg)
   if msg.o == "http://bigasterisk.com/host/star/slideshow/advance"
-    nextImage()
-)
\ No newline at end of file
+    model.nextImage()
+  if msg.o == "http://bigasterisk.com/host/star/slideshow/toggleFeeder"
+    model.toggleFeederCam()
+)
+ko.applyBindings(model)