_getValue: () ->

    @config.observable()

  continueDrag: (pos) ->

    # pos is vec2 of pixels relative to the drag start.

    super(pos)

    epos = @_editorCoordinates()

    newValue = @config.getValueForPos(epos)

    @config.observable(newValue)

  subscribe: (onChange) ->

    ko.computed =>

      @config.observable()

      onChange()

class window.AdjustableFloatObject extends Adjustable

  constructor: (@config) ->

    # config also has:

    #   graph

    #   subj

    #   pred

    #   ctx

    #   getTargetPosForValue(value) -> getTarget result for value

# side effects if your attributes are changing before the detach

# call. This alternative to dom-repeat never reassigns

# attributes. But, it can't set up property bindings.

updateChildren = (parent, newUris, makeChild) ->

  childUris = []

  childByUri = {}

  for e in parent.children

    childUris.push(e.uri)

    childByUri[e.uri] = e

  for uri in _.difference(childUris, newUris)

    childByUri[uri].detached()

  for uri in _.difference(newUris, childUris)

    parent.appendChild(makeChild(uri))

Polymer

  is: 'light9-timeline-editor'

  behaviors: [ Polymer.IronResizableBehavior ]

  properties:

    viewState: { type: Object }

    debug: {type: String}

    graph: {type: Object, notify: true}

    setAdjuster: {type: Function, notify: true}

    @trackMouse()

    @bindKeys()

    @bindWheelZoom(@dia.querySelector('svg'))

    @forwardMouseEventsToAdjustersCanvas()

    @makeZoomAdjs()

    zoomed = @$.zoomed

    setupDrop(@$.dia.querySelector('svg'), zoomed.$.rows, @, zoomed.onDrop.bind(zoomed))

  zoomOrLayoutChanged: ->

    # not for cursor updates

    window.debug_zoomOrLayoutChangedCount++

    @fullZoomX.domain([0, @viewState.zoomSpec.duration()])

    @fullZoomX.range([0, @width()])

    # had trouble making notes update when this changes

    zoomInX = d3.scaleLinear()

    zoomInX.domain([@viewState.zoomSpec.t1(), @viewState.zoomSpec.t2()])

    zoomInX.range([0, @width()])

    @zoomInX = zoomInX

    @dia.setTimeAxis(@width(), @$.zoomed.$.audio.offsetTop, @zoomInX)

    @$.adjustersCanvas.updateAllCoords()

    # cursor needs update when layout changes, but I don't want

    # zoom/layout to depend on the playback time

    setTimeout(@songTimeChanged.bind(@), 1)

  songTimeChanged: ->

    @$.cursorCanvas.setCursor(@$.audio.offsetTop, @$.audio.offsetHeight,

                              @$.zoomed.$.time.offsetTop,

                              @$.zoomed.$.time.offsetHeight,

                              @fullZoomX, @zoomInX, @viewState.cursor)

      @animatedZoom(@songTime - 2, @viewState.zoomSpec.duration(), zoomAnimSec)

    shortcut.add "Escape", =>

      zs = @viewState.zoomSpec

      visSeconds = zs.t2() - zs.t1()

      margin = visSeconds * .4

      # buggy: really needs t1/t2 to limit their ranges

      if @songTime < zs.t1() or @songTime > zs.t2() - visSeconds * .6

        newCenter = @songTime + margin

        @animatedZoom(newCenter - visSeconds / 2,

                      newCenter + visSeconds / 2, zoomAnimSec)

    shortcut.add "L", =>

      @$.adjustersCanvas.updateAllCoords()

  makeZoomAdjs: ->

    yMid = => @$.audio.offsetTop + @$.audio.offsetHeight / 2

    dur = @viewState.zoomSpec.duration

    valForPos = (pos) =>

        x = pos.e(1)

        t = @fullZoomX.invert(x)

    @setAdjuster('zoom-left', => new AdjustableFloatObservable({

      observable: @viewState.zoomSpec.t1,

      getTarget: () =>

        $V([@fullZoomX(@viewState.zoomSpec.t1()), yMid()])

  behaviors: [ Polymer.IronResizableBehavior ]

  properties:

    graph: { type: Object, notify: true }

    selection: { 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 }

  onZoom: ->

    updateZoomFlattened = ->

      @zoomFlattened = ko.toJS(@zoom)

    ko.computed(updateZoomFlattened.bind(@))

  ready: ->

  attached: ->

    root = @closest('light9-timeline-editor')

  onDrop: (effect, pos) ->

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

    # we could probably accept some initial overrides right on the

    # effect uri, maybe as query params

      rightX = leftX + 120

    w = 430

    h = 80

    @inlineRect = {

      left: leftX,

      top: @offsetTop + @offsetHeight - h - 5,

      width: w,

      height: h,

      display: if rightX - leftX > w then 'block' else 'none'

      }

    if @inlineRect.display != 'none'

      @async =>

    if screenPts[screenPts.length - 1].e(1) - screenPts[0].e(1) < 100

      @clearAdjusters()

      # also kill their connectors

      return

    @makeCurveAdjusters(curveWidth, yForV, @worldPts)

  makeCurveAdjusters: (curveWidth, yForV, worldPts) ->

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

    if true

    noteLabel: { type: String, notify: true }

    selection: { type: Object, 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

    else

      patch = {delQuads: [], addQuads: [

        ]}

      @graph.applyAndSendPatch(patch)

  addHandler: ->

    @graph.runHandler(@update.bind(@))

  update: ->

    console.time('attrs update')

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

    @effect = @graph.uriValue(@uri, U(':effectClass'))

    @effectLabel = @graph.stringValue(@effect, U('rdfs:label')) or (@effect.replace(/.*\//, ''))

    @noteLabel = @uri.replace(/.*\//, '')

    for setting in @graph.objects(@uri, U(':setting'))

      ea = @graph.uriValue(setting, U(':effectAttr'))

      value = @graph.stringValue(setting, U(':value'))

      if ea == U(':colorScale')

        @colorScaleFromGraph = value

        @colorScale = value

      @colorScaleFromGraph = '#ffffff'

      @colorScale = '#ffffff'

    console.timeEnd('attrs update')

  onDel: ->

  patch = {delQuads: [{subject: song, predicate: graph.Uri(':note'), object: note, graph: song}], addQuads: []}

  graph.applyAndSendPatch(patch)

Polymer

  is: 'light9-cursor-canvas'

  behaviors: [ Polymer.IronResizableBehavior ]

  listeners: 'iron-resize': 'update'

  ready: ->

    @mouseX = 0

    @mouseY = 0

    @cursorPath = null

    @ctx = @$.canvas.getContext('2d')

    @ctx.font = "12px sans"

    @ctx.fillStyle = '#000'

    @ctx.fillText(label, x1 + 5, y2 - 5, x2 - x1 - 10)

    # coords from a center that's passed in

    # # special layout for the thaeter ones with middinh 

    # l/r arrows

    # mouse arrow cursor upon hover, and accent the hovered adjuster

    # connector

Polymer

  is: 'light9-timeline-diagram-layer'

  properties: {

    selection: {type: Object, notify: true}

  }

  ready: ->

    @elemById = {}

  attached: ->

  setTimeAxis: (width, yTop, scale) ->

    pxPerTick = 50

      @$[groupId].appendChild(elem)

      elem.setAttribute('id', uri)

      for k,v of attrs

        elem.setAttribute(k, v)

      if moreBuild

        moreBuild(elem)

    return elem

  clearElem: (uri, suffixes) -> # todo: caller shouldn't have to know suffixes!

    for suff in suffixes

      elem = @elemById[uri+suff]

      if elem

        delete @elemById[uri+suff]

  anyPointsInView: (pts) ->

    for pt in pts

      # wrong:

      if pt.e(1) > -100 && pt.e(1) < 2500

        return true

    return false

  setNote: (uri, curvePts, effect, classes) ->

    areaId = uri + '/area'

    labelId = uri + '/label'