]

  _onIronResize: ->

    @width(@offsetWidth)

  _onSongTime: (t) ->

    @viewState.cursor.t(t)

  _onSongDuration: (d) ->

    d = 700 if d < 1 # bug is that asco isn't giving duration, but 0 makes the scale corrupt

    @viewState.zoomSpec.duration(d)

  setSong: (s) ->

    @song = @playerSong if @followPlayerSong

  ready: ->

    window.debug_zoomOrLayoutChangedCount = 0

    window.debug_adjUpdateDisplay = 0

    @viewState =

      zoomSpec:

        duration: ko.observable(100)

        t1: ko.observable(0) # need validation to stay in bounds and not go too close

        t2: ko.observable(100)

      cursor:

        t: ko.observable(20)

      mouse:

        pos: ko.observable($V([0,0]))

  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: ->

    @dia = @$.dia

    ko.computed(@songTimeChanged.bind(@))

    @trackMouse()

    @bindKeys()

    @bindWheelZoom()

    @forwardMouseEventsToAdjustersCanvas()

    @makeZoomAdjs()

  zoomOrLayoutChanged: ->

    # not for cursor updates

      @ctx.stroke()

Polymer

  is: 'light9-adjusters-canvas'

  behaviors: [ Polymer.IronResizableBehavior ]

  properties:

    adjs: { type: Object, notify: true }, # adjId: Adjustable

  listeners: 'iron-resize': 'update'

  ready: ->

    @adjs = {}

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

    @redraw()

  onDown: (ev) ->

    if ev.buttons == 1

      ev.stopPropagation()

      start = $V([ev.x, ev.y])

      adj = @adjAtPoint(start)

      if adj

        @currentDrag = {start: start, adj: adj}

        adj.startDrag()

  onMove: (ev) ->

    # callers register/unregister the Adjustables they want us to make

    # adjuster elements for. Caller invents adjId.  makeAdjustable is

    # a function returning the Adjustable or it is null to clear any

    # adjusters with this id.

    if not @adjs[adjId] or not makeAdjustable?

      if not makeAdjustable?

        delete @adjs[adjId]

      else

        adj = makeAdjustable()

        @adjs[adjId] = adj

        adj.id = adjId

    window.debug_adjsCount = Object.keys(@adjs).length

  adjsChanged: ->

    @updateAllCoords()

  layoutCenters: ->

    # push Adjustable centers around to avoid overlaps

    # Todo: also don't overlap inlineattr boxes

    @qt = d3.quadtree([], ((d)->d.e(1)), ((d)->d.e(2)))

    @qt.extent([[0,0], [8000,8000]])

    for _, adj of @adjs

    if not nearest? or nearest.distanceFrom(pt) > 50

      return null

    return nearest?.adj

  updateAllCoords: ->

    @layoutCenters()

    @redraw()

  update: (ev) ->

    @$.canvas.width = ev.target.offsetWidth

    @$.canvas.height = ev.target.offsetHeight

    @redraw()

  redraw: (adjs) ->

    @ctx.clearRect(0, 0, @$.canvas.width, @$.canvas.height)

    for adjId, adj of @adjs

      ctr = adj.getCenter()

      target = adj.getTarget()

      @drawConnector(ctr, target)

      @drawAdjuster(adj.getDisplayValue(),

                    Math.floor(ctr.e(1)) - 20, Math.floor(ctr.e(2)) - 10,

                    Math.floor(ctr.e(1)) + 20, Math.floor(ctr.e(2)) + 10)

  drawConnector: (ctr, target) ->

    @ctx.strokeStyle = '#aaa'

    @ctx.lineWidth = 2

    @ctx.beginPath()

    _line(@ctx, ctr, target)

    @ctx.stroke()

  drawAdjuster: (label, x1, y1, x2, y2) ->

    radius = 8

    @ctx.fillStyle = 'rgba(255, 255, 0, 0.5)'

    @ctx.beginPath()

    _roundRect(@ctx, x1, y1, x2, y2, radius)

    @ctx.fill()

    @ctx.strokeStyle = 'yellow'

    @ctx.setLineDash([3, 3])

    @ctx.beginPath()

    _roundRect(@ctx, x1, y1, x2, y2, radius)

    @ctx.stroke()

    @ctx.setLineDash([])

    @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