<link rel=import href=updating-img.html>

<polymer-element name="catsite-status" attributes="switches">
  <template>
    <template repeat="{{switch in switches}}">
      <div class="switch">
        <div class="switch-name">{{switch.name}}</div>
        <paper-toggle-button
          data-switch={{switch.name}}
          on-change={{buttonChange}}
          checked="[[switch.status === 'on']]"
        ></paper-toggle-button>
        <div class="switch-status">{{switch.status}}</div>
      </div>
    </template>
    <updating-img src=/camera />
  </template>
  <style shim-shadowdom>
    catsite-app::shadow catsite-status::shadow .switch {
      clear: left;
      height: 35px;
      line-height: 35px;
    }
    catsite-app::shadow catsite-status::shadow .switch-name {
      width: 11em;
      float: left;
    }
    catsite-app::shadow catsite-status::shadow .switch-status {
      float: left;
      margin-left: 10px;
      font-size: 80%;
      color: #aaaaaa;
    }
    catsite-app::shadow catsite-status::shadow paper-toggle-button {
      float: left;
      margin-top: 11px;
    }
    catsite-app::shadow /deep/ updating-img /deep/ #progress {
      margin-top: 20px;
    }
    catsite-app::shadow /deep/ updating-img /deep/ img {
      width: 100%;
    }
  </style>
  <script>
    Polymer({
      buttonChange: function(event, detail, sender) {
        var name = sender.attributes['data-switch'].value
        var swtch = _.find(this.switches, 'name', name)
        var status = swtch.status = sender.checked ? 'on' : 'off'

        var xhr = new XMLHttpRequest
        xhr.open('POST', '/' + status + '/' + swtch.name)
        xhr.onload = function(e) {
          console.log('switched!')
        }
        xhr.onerror = function(e) {
          console.log('failed to switch :(')
        }
        xhr.send()
      }
    })
  </script>
</polymer-element>
