html
  head
    style
      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: 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="")
    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')