coffeeElementSetup(class CursorCanvas extends Polymer.mixinBehaviors([Polymer.IronResizableBehavior], Polymer.Element)

  @is: 'light9-cursor-canvas'

  @getter_properties:

    viewState: { type: Object, notify: true, observer: "onViewState" }

  ready: ->

    super.ready()

    @cursorPath = null

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

    @onResize()

    @addEventListener('iron-resize', @onResize.bind(@))

  onViewState: ->

    ko.computed(@redrawCursor.bind(@))

  onResize: (ev) ->

    @$.canvas.width = @offsetWidth

    @$.canvas.height = @offsetHeight

    @redrawCursor()

  redrawCursor: ->

    vs = @viewState

    dependOn = [vs.zoomSpec.t1(), vs.zoomSpec.t2()]

    @cursorPath = {

      top0: $V([xZoomedOut, vs.audioY()])

      top1: $V([xZoomedOut, vs.audioY() + vs.audioH()])

      mid0: $V([xZoomedIn + 2, vs.zoomedTimeY() + vs.zoomedTimeH()])

      mid1: $V([xZoomedIn - 2, vs.zoomedTimeY() + vs.zoomedTimeH()])

      mid2: $V([xZoomedOut - 1, vs.audioY() + vs.audioH()])

      mid3: $V([xZoomedOut + 1, vs.audioY() + vs.audioH()])

      bot0: $V([xZoomedIn, vs.zoomedTimeY() + vs.zoomedTimeH()])

      bot1: $V([xZoomedIn, @offsetHeight])

    }

    @redraw()

  redraw: ->

    return unless @ctx

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

    @ctx.strokeStyle = '#fff'

    @ctx.lineWidth = 0.5

    @ctx.beginPath()

    @ctx.stroke()

    if @cursorPath

      @ctx.strokeStyle = '#ff0303'

      @ctx.lineWidth = 1.5

      @ctx.beginPath()

      Drawing.line(@ctx, @cursorPath.top0, @cursorPath.top1)

      @ctx.stroke()

      @ctx.fillStyle = '#9c0303'

      @ctx.beginPath()

      @ctx.moveTo(@cursorPath.mid0.e(1), @cursorPath.mid0.e(2))

      @ctx.lineTo(p.e(1), p.e(2)) for p in [

        @cursorPath.mid1, @cursorPath.mid2, @cursorPath.mid3]

      @ctx.fill()

      @ctx.strokeStyle = '#ff0303'

      @ctx.lineWidth = 3

      @ctx.beginPath()

      Drawing.line(@ctx, @cursorPath.bot0, @cursorPath.bot1, '#ff0303', '3px')

      @ctx.stroke()

)

      @bindKeys()

      @bindWheelZoom(@dia)

      setTimeout => # depends on child node being ready

          @forwardMouseEventsToAdjustersCanvas()

        , 400

      @makeZoomAdjs()

      zoomed = @$.zoomed

      setupDrop(@$.dia.shadowRoot.querySelector('svg'),

                zoomed.$.rows, @, zoomed.onDrop.bind(zoomed))

      setInterval(@updateDebugSummary.bind(@), 100)

    , 500

    @addEventListener('iron-resize', @_onIronResize.bind(@))

    setTimeout(@_onIronResize.bind(@), 1000) # when children are packed

    #if anchor == loadtest

    #  add note and delete it repeatedly

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

  _onIronResize: ->

    @viewState.setWidth(@offsetWidth)

    @viewState.audioY(@$.audio.offsetTop)

    @viewState.audioH(@$.audio.offsetHeight)

    @viewState.zoomedTimeY(@$.zoomed.$.time.offsetTop) if @$.zoomed?.$?.time?

    @viewState.zoomedTimeH(30) #@$.zoomed.$.time.offsetHeight)

    log('editor resized')

  _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

  onGraph: (graph) ->

    @project = new Project(graph)

  updateDebugSummary: ->

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

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

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

     #{@selection.selected().length} selected

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

     #{window.debug_adjsCount} adjuster items registered,

     #{window.debug_adjUpdateDisplay} adjuster updateDisplay calls,

    "

  zoomOrLayoutChanged: ->

    vs = @viewState

    vs.width()

    # todo: these run a lot of work purely for a time change

    if @$.zoomed?.$?.audio?

      vs.zoomSpec.t1()

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

      @$.adjustersCanvas.updateAllCoords()

  trackMouse: ->

    # not just for show- we use the mouse pos sometimes

    for evName in ['mousemove', 'touchmove']

      @addEventListener evName, (ev) =>

        ev.preventDefault()

        # todo: consolidate with _editorCoordinates version

        if ev.touches?.length

          ev = ev.touches[0]

        root = @$.cursorCanvas.getBoundingClientRect()

        @viewState.mouse.pos($V([ev.pageX - root.left, ev.pageY - root.top]))

        # should be controlled by a checkbox next to follow-player-song-choice

        @sendMouseToVidref() unless window.location.hash.match(/novidref/)

  sendMouseToVidref: ->

    now = Date.now()

    if (!@$.vidrefLastSent? || @$.vidrefLastSent < now - 200) && !@songPlaying

      @$.vidrefTime.body = {t: @latestMouseTime(), source: 'timeline'}

      @$.vidrefTime.generateRequest()

      @$.vidrefLastSent = now

  bindWheelZoom: (elem) ->

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

      @viewState.onMouseWheel(ev.deltaY)

  forwardMouseEventsToAdjustersCanvas: ->

    ac = @$.adjustersCanvas

    @addEventListener('mousedown', ac.onDown.bind(ac))

    @addEventListener('mousemove', ac.onMove.bind(ac))

    @addEventListener('mouseup', ac.onUp.bind(ac))

  bindKeys: ->

    shortcut.add "Ctrl+P", (ev) =>

    shortcut.add "Ctrl+Escape", => @viewState.frameAll()

    shortcut.add "Shift+Escape", => @viewState.frameToEnd()

    shortcut.add "Escape", => @viewState.frameCursor()

    shortcut.add "L", =>

      @$.adjustersCanvas.updateAllCoords()

    shortcut.add 'Delete', =>

      for note in @selection.selected()

        @project.deleteNote(@song, note, @selection)

  makeZoomAdjs: ->

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

    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()])

      getSuggestedTargetOffset: () => $V([50, 0])

      getValueForPos: valForPos

    }))

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

      observable: @viewState.zoomSpec.t2,

      getTarget: () =>

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

      getSuggestedTargetOffset: () => $V([-50, 0])

      getValueForPos: valForPos

    }))

    panObs = ko.pureComputed({

        read: () =>

          (@viewState.zoomSpec.t1() + @viewState.zoomSpec.t2()) / 2

        write: (value) =>

          zs = @viewState.zoomSpec

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

          zs.t1(value - span / 2)

          zs.t2(value + span / 2)

      })

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

      observable: panObs

      emptyBox: true

      # fullzoom is not right- the sides shouldn't be able to go

      # offscreen

      getTarget: () => $V([@fullZoomX(panObs()), yMid()])

      getSuggestedTargetOffset: () => $V([0, 0])

      getValueForPos: valForPos

      }))

)

# plan: in here, turn all the notes into simple js objects with all

# their timing data and whatever's needed for adjusters. From that, do

# the brick layout. update only changing adjusters.

coffeeElementSetup(class TimeZoomed extends Polymer.mixinBehaviors([Polymer.IronResizableBehavior], Polymer.Element)

  @is: 'light9-timeline-time-zoomed'

  @getter_properties:

    graph: { type: Object, notify: true }

    project: { type: Object }

    selection: { type: Object, notify: true }

    dia: { type: Object, notify: true }

    song: { type: String, notify: true }

    viewState: { type: Object, notify: true }

  @getter_observers: [

    'onGraph(graph, setAdjuster, song, viewState, project)',

    'onZoom(viewState)',

  ]

  constructor: ->

    super()

    @stage = new PIXI.Container()

    @renderer = PIXI.autoDetectRenderer({

         backgroundColor: 0xff6060,

    })

  ready: ->

    super.ready()

    @addEventListener('iron-resize', @update.bind(@))

    @update()

    @$.rows.appendChild(@renderer.view);

  update: ->

    @renderer.resize(@clientWidth, @clientHeight)

    @renderer.render(@stage)

  onZoom: ->

    updateZoomFlattened = ->

      log('updateZoomFlattened')

      @zoomFlattened = ko.toJS(@viewState.zoomSpec)

    ko.computed(updateZoomFlattened.bind(@))

  onGraph: ->