setMouse: (pos) ->

    @mouseX = pos.e(1)

    @mouseY = pos.e(2)

    @redraw()

    @cursorPath = {

      top0: $V([xZoomedOut, y1])

      top1: $V([xZoomedOut, y1 + h1])

      mid0: $V([xZoomedIn + 2, y2 + h2])

      mid1: $V([xZoomedIn - 2, y2 + h2])

                                   project="{{project}}"

                                   selection="{{selection}}"

                                   dia="{{dia}}"

                                   set-adjuster="{{setAdjuster}}"

                                   song="{{song}}"

                                   show="{{show}}"

      </light9-timeline-time-zoomed>

      <light9-timeline-diagram-layer id="dia" selection="{{selection}}"></light9-timeline-diagram-layer>

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

      </light9-adjusters-canvas>

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

    </div>

  deleteNote: (song, note, selection) ->

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

    @graph.applyAndSendPatch(patch)

    if note in selection.selected()

      selection.selected(_.without(selection.selected(), note))

class TimelineEditor extends Polymer.Element

  @is: 'light9-timeline-editor'

  @behaviors: [ Polymer.IronResizableBehavior ]

  @properties:

    viewState: { type: Object }

    debug: {type: String}

    followPlayerSong: {type: Boolean, notify: true, value: true}

    song: {type: String, notify: true}

    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}

    selection: {type: Object, notify: true}

  width: ko.observable(1)

  @listeners:

    'iron-resize': '_onIronResize'

  @observers: [

    'setSong(playerSong, followPlayerSong)',

    @selection = {hover: ko.observable(null), selected: ko.observable([])}

    window.debug_zoomOrLayoutChangedCount = 0

    window.debug_adjUpdateDisplay = 0

    window.viewState = @viewState

    @setAdjuster = (adjId, makeAdjustable) =>

      ac = @$.adjustersCanvas

      setTimeout((()=>ac.setAdjuster(adjId, makeAdjustable)),10)

    setTimeout =>

      ko.computed(@zoomOrLayoutChanged.bind(@))

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

     #{window.debug_adjsCount} adjuster items registered,

     #{window.debug_adjUpdateDisplay} adjuster updateDisplay calls,

    "

  zoomOrLayoutChanged: ->

    vs = @viewState

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

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

      @$.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: ->

    return unless @$.zoomed?.$?.time?

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

                              @$.zoomed.$.time.offsetTop,

                              @$.zoomed.$.time.offsetHeight,

  trackMouse: ->

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

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

      @addEventListener evName, (ev) =>

        ev.preventDefault()

    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) =>

  forwardMouseEventsToAdjustersCanvas: ->

    ac = @$.adjustersCanvas

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

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

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

  @properties:

    graph: { type: Object, notify: true }

    project: { type: Object }

    selection: { type: Object, notify: true }

    dia: { type: Object, notify: true }

    song: { type: String, notify: true }

  @observers: [

  ]

  @listeners: {'iron-resize': 'update'}

  update: ->

    @renderer.resize(@clientWidth, @clientHeight)

    @renderer.render(@stage)

  onZoom: ->

    updateZoomFlattened = ->

      log('updateZoomFlattened')

    ko.computed(updateZoomFlattened.bind(@))

  constructor: ->

    super()

    @stage = new PIXI.Container()

    @renderer = PIXI.autoDetectRenderer({

         backgroundColor: 0xff6060,

    })

  connectedCallback: ->

    super.connectedCallback()

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

    log('assign rows',@song, 'graph has', @graph.quads().length)

    graphics = new PIXI.Graphics({nativeLines: true})

    for uri in _.sortBy(@graph.objects(@song, U(':note')), 'uri')

      #should only make new ones

      # 

      originTime = @graph.floatValue(uri, U(':originTime'))

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

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

        if @graph.uriValue(curve, U(':attr')).equals(U(':strength'))

          [@pointUris, @worldPts] = @project.getCurvePoints(curve, originTime)

          curveWidthCalc = () => @_curveWidth(@worldPts)

          h = 150 #@offsetHeight

          graphics.beginFill(0xFF3300);

          graphics.lineStyle(4, 0xffd900, 1)

          graphics.moveTo(screenPts[0].e(1), screenPts[0].e(2))

          for p in screenPts.slice(1)

            graphics.lineTo(p.e(1), p.e(2))

         graphics.endFill()

     @rows = []#(new NoteRow(@graph, @dia, @song, @zoomInX, @noteUris, i, @selection) for i in [0...ROW_COUNT])

     @stage.children.splice(0)

     @stage.addChild(graphics)

     @renderer.render(@stage)

  onDrop: (effect, pos) ->

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

    return unless effect and effect.match(/^http/)

    # we could probably accept some initial overrides right on the

      if @graph.contains(effect, RDF + 'type', U(':LightSample'))

        effect = @project.makeEffect(effect)

      else

        log("drop #{effect} is not an effect")

        return

    desiredWidthX = @offsetWidth * .3

    desiredWidthT = Math.min(desiredWidthT, @zoom.duration() - dropTime)

    @project.makeNewNote(effect, dropTime, desiredWidthT)

customElements.define(TimeZoomed.is, TimeZoomed)

class TimeAxis extends Polymer.Element