function(item) { item.blur(); });

                       this.value = undefined;

                   }.bind(this));

               },

           });

       });

      </script>

    </dom-module>

    <dom-module id="light9-live-control">

      <template>

        <style>

         #colorControls {

             display: flex;

             align-items: center;

         }

         #colorControls > * {

             margin: 0 3px;

         }

         #colorControls paper-slider {

         }

         paper-slider { width: 100%; height: 25px; }

        </style>

        <style is="custom-style">

         paper-slider {

             --paper-slider-knob-color: var(--paper-red-500);

             --paper-slider-active-color: var(--paper-red-500);

             --paper-slider-font-color: white;

             --paper-slider-input: {

                 width: 75px;

                 background: black;

             }

         }

        </style>

        <template is="dom-if" if="{{deviceAttr.useSlider}}">

          <paper-slider min="0"

                        max="{{deviceAttr.max}}"

                        step=".001"

                        editable

                        content-type="application/json"

                        immediate-value="{{immediateSlider}}"></paper-slider>

        </template>

        <template is="dom-if" if="{{deviceAttr.useColor}}">

        <div id="colorControls">

          <button on-click="goBlack">0.0</button>

          <light9-color-picker color="{{value}}"></light9-color-picker>

        </div>

        </template>

        <template is="dom-if" if="{{deviceAttr.useChoice}}">

          <light9-listbox choices="{{deviceAttr.choices}}" value="{{value}}">

          </light9-listbox>

        </template>

      </template>

    </dom-module>

    <dom-module id="light9-live-device-control">

      <template>

        <style>

         .device {

             border: 2px solid #151e2d;

             margin: 4px;

             padding: 1px;

             background: #171717;  /* deviceClass gradient added later */

             break-inside: avoid-column;

         }

         .deviceAttr {

             border-top: 1px solid #272727;

             padding-bottom: 2px;

             display: flex;

         }

         .deviceAttr > span {

         }

         .deviceAttr > light9-live-control {

             flex-grow: 1;

         }

         h2 {

             font-size: 110%;

             padding: 4px;

         }

         .device, h2 {

         border-top-right-radius: 15px;

}

log = console.log

Polymer

  is: 'light9-live-control'

  properties:

    device: { type: String }

    deviceAttr: { type: Object }

    max: { type: Number, value: 1 }

    value: { type: Object, notify: true }

    immediateSlider: { notify: true, observer: 'onSlider' }

    pickedChoice: { observer: 'onChange' }

  observers: [

    'onChange(value)'

    ]

  ready: ->

  onSlider: -> @value = @immediateSlider

  goBlack: -> @value = "#000000"

  onChange: (value) ->

    @lastSent = [[@device, @deviceAttr.uri, value]]

    @resend()

  resend: ->

    window.gather(@lastSent)

  clear: ->

    if @deviceAttr.useColor

      @value = '#000000'

    else

      @value = @immediateSlider = 0

Polymer

  is: "light9-live-device-control"

  properties:

    graph: { type: Object, notify: true }

    uri: { type: String, notify: true }

    deviceClass: { type: String, notify: true }

    deviceAttrs: { type: Array, notify: true }

    bgStyle: { type: String, computed: '_bgStyle(deviceClass)' }

  observers: [

    'onGraph(graph)'

    ]

  _bgStyle: (deviceClass) ->

    hash = 0

    for i in [(deviceClass.length-10)...deviceClass.length]

        hash += deviceClass.charCodeAt(i)

    hue = (hash * 8) % 360

    accent = "hsl(#{hue}, 49%, 22%)"

    "background: linear-gradient(to right, rgba(31,31,31,0) 50%, #{accent} 100%);"

  onGraph: ->

    @graph.runHandler(@update.bind(@), "#{@uri} update")

  update: ->

    U = (x) => @graph.Uri(x)

    @deviceClass = @graph.uriValue(@uri, U('rdf:type'))

    @deviceAttrs = []

    for da in _.unique(_.sortBy(@graph.objects(@deviceClass, U(':deviceAttr'))))

      dataType = @graph.uriValue(da, U(':dataType'))

      daRow = {

        uri: da

        dataType: dataType

        showColorPicker: dataType == U(':color')

        }

      if dataType == 'http://light9.bigasterisk.com/color'

        daRow.useColor = true

      else if dataType == U(':choice')

        daRow.useChoice = true

        choiceUris = _.sortBy(@graph.objects(da, U(':choice')))

        daRow.choices = ({uri: x, label: @graph.labelOrTail(x)} for x in choiceUris)

        daRow.choiceSize = Math.min(choiceUris.length + 1, 10)

      else

        daRow.useSlider = true