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>

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 }