timeline editor: song <edit-choice graph="{{graph}}" uri="{{song}}"></edit-choice>

      <label><input type="checkbox" checked="{{followPlayerSong::change}}" > follow player song choice</label>

    </div>

    <div id="debug">[[debug]]</div>

    <iron-ajax id="vidrefTime" url="/vidref/time" method="PUT" content-type="application/json"></iron-ajax>

    <div id="coveredByDiagram">

      <light9-timeline-audio id="audio"

                             graph="{{graph}}"

                             show="{{show}}"

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

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

                                   graph="{{graph}}"

                                   selection="{{selection}}"

                                   dia="{{dia}}"

                                   set-adjuster="{{setAdjuster}}"

                                   song="{{song}}"

                                   show="{{show}}"

                                   zoom="{{viewState.zoomSpec}}"

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

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

log = console.log

RDF = 'http://www.w3.org/1999/02/22-rdf-syntax-ns#'

Drawing = window.Drawing

ROW_COUNT = 7

class TimelineEditor extends Polymer.Element

  @is: 'light9-timeline-editor'

  @behaviors: [ Polymer.IronResizableBehavior ]

  @properties:

    viewState: { type: Object }

    debug: {type: String}

    graph: {type: Object, notify: true}

    setAdjuster: {type: Function, notify: true}

    playerSong: {type: String, notify: true}

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

    song: {type: String, notify: true}

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

    @viewState =

      zoomSpec:

        duration: ko.observable(100) # current song duration

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

    @fullZoomX = d3.scaleLinear()

    @zoomInX = d3.scaleLinear()

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

    #if anchor == loadtest

    #  add note and delete it repeatedly

    #  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,

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

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

    shortcut.add 'Delete', =>

      for note in @selection.selected()

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

      }))

customElements.define(TimelineEditor.is, TimelineEditor)

# 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.

class TimeZoomed extends Polymer.Element

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

  @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 }

    zoom: { type: Object, notify: true, observer: 'onZoom' } # viewState.zoomSpec

    zoomFlattened: { type: Object, notify: true }

  @observers: [

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

  ]

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

  update: ->

    @renderer.resize(@clientWidth, @clientHeight)

  onZoom: ->

    updateZoomFlattened = ->

      log('updateZoomFlattened')

      @zoomFlattened = ko.toJS(@zoom)

    ko.computed(updateZoomFlattened.bind(@))

  connectedCallback: ->

     super.connectedCallback()

     @stage = new PIXI.Container()

     graphics.moveTo(50,50);

     graphics.lineTo(250, 50);

     graphics.lineTo(100, 100);

     graphics.lineTo(50, 50);

     graphics.endFill();

     @stage.addChild(graphics);

     @renderer.render(@stage);

     # iron-resize should be doing this but it never fires

     setInterval(@update.bind(@), 1000)

  onGraph: ->

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

    log('assign rows',@song)

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

      #should only make new ones

      child = new Note(@graph, @selection, @dia, uri, @setAdjuster, @song, @zoomInX)

      log('note ',uri)

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

  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

    # effect uri, maybe as query params

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

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

      else

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

        return

    dropTime = @zoomInX.invert(pos.e(1))

    desiredWidthX = @offsetWidth * .3

    desiredWidthT = @zoomInX.invert(desiredWidthX) - @zoomInX.invert(0)

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

customElements.define(TimeZoomed.is, TimeZoomed)

class TimeAxis extends Polymer.Element

  @is: "light9-timeline-time-axis",

  # for now since it's just one line calling dia,

  # light9-timeline-editor does our drawing work.

customElements.define(TimeAxis.is, TimeAxis)

class NoteRow

  constructor: (@graph, @dia, @song, @zoomInX, @noteUris, @rowIndex, @selection) ->

    @graph.runHandler(@update.bind(@), "row notes #{@rowIndex}")

    wasHidden = @inlineRect?.display == 'none'

    @inlineRect = {

      left: leftX,

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

      width: w,

      height: h,

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

      }

    if wasHidden and @inlineRect.display != 'none'

      @async =>

        @querySelector('light9-timeline-note-inline-attrs')?.displayed()

  _makeCurvePointAdjusters: (yForV, worldPts, ctx) ->

    for pointNum in [0...worldPts.length]

      @_makePointAdjuster(yForV, worldPts, pointNum, ctx)

  _makePointAdjuster: (yForV, worldPts, pointNum, ctx) ->

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

    adjId = @uri + '/p' + pointNum

    @adjusterIds[adjId] = true

    @setAdjuster adjId, =>

      adj = new AdjustableFloatObject({

        graph: @graph

    @_makeFadeAdjuster(yForV, ctx, @uri + '/fadeOut', n - 2, n - 1, $V([50, -10]))

  _makeFadeAdjuster: (yForV, ctx, adjId, i0, i1, offset) ->

    @adjusterIds[adjId] = true

    @setAdjuster adjId, => new AdjustableFade(yForV, i0, i1, @, offset, ctx)

  _suggestedOffset: (pt) ->

    if pt.e(2) > .5

      $V([0, 30])

    else

      $V([0, -30])

class DiagramLayer extends Polymer.Element

  # note boxes. 

  @is: 'light9-timeline-diagram-layer'

  @properties: {

    selection: {type: Object, notify: true}

  }

  connectedCallback: ->

    super.connectedCallback()

    @elemById = {}