<light9-timeline-audio id="audio"

                           graph="{{graph}}"

                           show="{{show}}"

                           song="{{song}}"></light9-timeline-audio>

    <light9-timeline-time-zoomed id="zoomed"

                                 graph="{{graph}}"

                                 dia="{{dia}}"

                                 set-adjuster="{{setAdjuster}}"

                                 song="{{song}}"

                                 show="{{show}}"

                                 zoom="{{viewState.zoomSpec}}"

                                 zoom-in-x="{{zoomInX}}">

    </light9-timeline-time-zoomed>

    <light9-adjusters-canvas id="adjustersCanvas" set-adjuster="{{setAdjuster}}">

    </light9-adjusters-canvas>

    <light9-cursor-canvas id="cursorCanvas"></light9-cursor-canvas>

  </template>

</dom-module>

                             show="{{show}}"

                             zoom="{{zoomFlattened}}">

      </light9-timeline-audio>

      <div id="rows">

        <template is="dom-repeat" items="{{rows}}">

          <light9-timeline-graph-row graph="{{graph}}"

                                     dia="{{dia}}"

                                     set-adjuster="{{setAdjuster}}"

                                     song="{{song}}"

                                     zoom-in-x="{{zoomInX}}"

                                     row-index="{{item}}"

          >

         background: green;

         /* outline: 2px solid red; */

     }

    </style>

    <light9-timeline-note-inline-attrs rect="{{inlineRect}}"

                                       graph="{{graph}}"

                                       song="{{song}}"

                                       uri="{{uri}}"

    >

    </light9-timeline-note-inline-attrs>

  </template>

</dom-module>

    show: {value: 'http://light9.bigasterisk.com/show/dance2017'}

    songTime: {type: Number, notify: true, observer: '_onSongTime'}

    songDuration: {type: Number, notify: true, observer: '_onSongDuration'}

    songPlaying: {type: Boolean, notify: true}

    fullZoomX: {type: Object, notify: true}

    zoomInX: {type: Object, notify: true}

  width: ko.observable(1)

  listeners:

    'iron-resize': '_onIronResize'

  observers: [

    'setSong(playerSong, followPlayerSong)'

    ]

    @viewState.zoomSpec.duration(d)

  setSong: (s) ->

    @song = @playerSong if @followPlayerSong

  ready: ->

    ko.options.deferUpdates = true;

    window.debug_zoomOrLayoutChangedCount = 0

    window.debug_adjUpdateDisplay = 0

    @viewState =

      zoomSpec:

    #  disconnect the graph, make many notes, drag a point over many steps, measure lag somewhere

  updateDebugSummary: ->

    elemCount = (tag) -> document.getElementsByTagName(tag).length

    @debug = "#{window.debug_zoomOrLayoutChangedCount} layout change,

     #{elemCount('light9-timeline-note')} notes,

     #{elemCount('light9-timeline-graph-row')} rows,

     #{window.debug_adjsCount} adjuster items registered,

     #{window.debug_adjUpdateDisplay} adjuster updateDisplay calls,

    "

  attached: ->

Polymer

  is: 'light9-timeline-time-zoomed'

  behaviors: [ Polymer.IronResizableBehavior ]

  properties:

    graph: { type: Object, notify: true }

    dia: { type: Object, notify: true }

    song: { type: String, notify: true }

    zoomInX: { type: Object, notify: true }

    rows: { value: [0...ROW_COUNT] }

    zoom: { type: Object, notify: true, observer: 'onZoom' }

    zoomFlattened: { type: Object, notify: true }

    graph: { type: Object, notify: true }

    dia: { type: Object, notify: true }

    song:  { type: String, notify: true }

    zoomInX: { type: Object, notify: true }

    noteUris: { type: Array, notify: true }

    rowIndex: { type: Object, notify: true }

  observers: [

    'onGraph(graph, dia, setAdjuster, song, zoomInX)'

    'update(song, rowIndex)'

    'onZoom(zoomInX)'

    ]

  onGraph: ->

        notesForThisRow.push(n)

      i++

    updateChildren @, notesForThisRow, (newUri) =>

      child = document.createElement('light9-timeline-note')

      child.graph = @graph

      child.dia = @dia

      child.uri = newUri

      child.setAdjuster = @setAdjuster

      child.song = @song # could change, but all the notes will be rebuilt

      child.zoomInX = @zoomInX # missing binding; see onZoom

      return child      

Polymer

  is: 'light9-timeline-note'

  behaviors: [ Polymer.IronResizableBehavior ]

  listeners: 'iron-resize': 'update'

  properties:

    graph: { type: Object, notify: true }

    dia: { type: Object, notify: true }

    uri: { type: String, notify: true }

    zoomInX: { type: Object, notify: true }

    setAdjuster: {type: Function, notify: true }

    inlineRect: { type: Object, notify: true }

  observers: [

    uri: { type: String, notify: true }  # the Note

    rect: { type: Object, notify: true }

    effect: { type: String, notify: true }

    effectLabel: { type: String, notify: true }

    colorScale: { type: String, notify: true }

    noteLabel: { type: String, notify: true }

  observers: [

    'addHandler(graph, uri)'

    'onColorScale(graph, uri, colorScale)'

    ]

  displayed: ->

    @querySelector('light9-color-picker').displayed()

  onColorScale: ->

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

    if @colorScale == @colorScaleFromGraph

      return

    quad = (s, p, o) => {subject: s, predicate: p, object: o, graph: @song}

    settingValue = @graph.Literal(@colorScale)

    if @existingColorScaleSetting

      @graph.patchObject(@existingColorScaleSetting, U(':value'), settingValue, @song)

    else

      setting = @graph.nextNumberedResource(@uri + 'set')

      patch = {delQuads: [], addQuads: [

    # connector

Polymer

  # note boxes. Page selection.

  is: 'light9-timeline-diagram-layer'

  ready: ->

    @elemById = {}

  attached: ->

    @querySelector('svg').add

  setTimeAxis: (width, yTop, scale) ->

    pxPerTick = 50

      sat = 40 + (hash % 20) # don't conceal colorscale too much

    attrs = {style: "fill:hsla(#{hue}, #{sat}%, 58%, 0.313);"}

    elem = @getOrCreateElem areaId, 'notes', 'path', attrs, (elem) =>

      elem.addEventListener 'mouseenter', =>

        @selection.hover(uri)

      elem.addEventListener 'mousedown', (ev) =>

        sel = @selection.selected()

        if ev.getModifierState('Control')

          if uri in sel

            sel = _.without(sel, uri)

          else

            sel.push(uri)

        else

          sel = [uri]

        @selection.selected(sel)

      elem.addEventListener 'mouseleave', =>

        @selection.hover(null)

    elem.setAttribute('d', svgPathFromPoints(curvePts))

    @updateNotePathClasses(uri, elem)

  updateNotePathClasses: (uri, elem) ->

    ko.computed =>