$V([event.pageX - root.left, event.pageY - root.top])

      else

        null

    try

      onDrop(uri, pos)

    catch e

      console.log(e)

    unhighlight()

    @is: "edit-choice",

        graph: {type: Object, notify: true},

        uri: {type: String, notify: true},

    connectedCallback: ->

      super.connectedCallback()

      @uri = null

      setupDrop @$.box, @$.box, null, (uri) =>

        @uri=uri

        @updateLabel()

    unlink: ->

      @uri = null

         color: #8e8eff;

         padding: 3px;

         display: inline-block;

         font-size: 145%;

     }

    </style>

    <div id="box">

      <resource-display graph="{{graph}}" uri="{{uri}}" rename></resource-display>

      <button on-click="unlink">Unlink</button>

    </div>

  </template>

  <script src="edit-choice.js"></script>

</dom-module>

log = console.log

# port of light9/curvecalc/musicaccess.py

    status: { type: String, notify: true }

    statusTitle: { type: String, notify: true }

    turboSign: { type: String, notify: true }

    duration: { type: Number, notify: true }

    song: { type: String, notify: true }

    # It does not yet work to write back to the playing/t

    # properties. See seekPlayOrPause.

    playing: { type: Boolean, notify: true }

    t: { type: Number, notify: true }

  ready: ->

    @turboUntil = 0

    @poll()

    setInterval(@estimateTimeLoop.bind(@), 30)

  estimateTimeLoop: ->

    if @playing

      @t = @remoteT + (Date.now() - @remoteAsOfMs) / 1000

    else

      @t = @remoteT

  poll: ->

    clearTimeout(@nextPoll) if @nextPoll

    @$.getTime.generateRequest()

    @status = "♫"

  onResponse: ->

    @status = " "

    @lastResponse = @$.getTime.lastResponse

    now = Date.now()

    if !@lastResponse.playing && @lastResponse.t != @remoteT

      # likely seeking in another tool

      @turboUntil = now + 1000

    if now < @turboUntil

    @playing = @lastResponse.playing

    @song = @lastResponse.song

    @remoteT = @lastResponse.t

    @remoteAsOfMs = now

  seekPlayOrPause: (t) ->

    @$.seek.body = {t: t}

    @$.seek.generateRequest()

    @turboUntil = Date.now() + 1000

    @poll()

<link rel="import" href="/lib/iron-ajax/iron-ajax.html">

<!-- remote control of ascoltami -->

<dom-module id="light9-music">

  <template>

    <style>

     span {

         font-family: monospace;

         white-space: pre;

         background: black;

         color: white;

         border: 1px solid #2782ad;

         font-size: 12px;

     }

    </style>

    <iron-ajax id="seek"

               method="POST"

               url="/ascoltami/seekPlayOrPause"

               content-type="application/json"></iron-ajax>

    <span>[[status]][[turboSign]]</span>

  </template>

  <script src="light9-music.js"></script>

</dom-module>

log = console.log

Drawing = window.Drawing

  @is: 'light9-adjusters-canvas'

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

    'updateAllCoords(adjs)'

  ]

    'iron-resize': 'resizeUpdate'

  connectedCallback: ->

    super.connectedCallback()

    @adjs = {}

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

    @redraw()

  onDown: (ev) ->

    if ev.buttons == 1

      ev.stopPropagation()

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

    @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 

    # l/r arrows

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

    # connector

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

    @mouseX = 0

    @mouseY = 0

    @cursorPath = null

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

  onViewState: ->

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

  update: (ev) ->

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

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

    @redraw()

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

log = console.log

  @is: "light9-timeline-note-inline-attrs"

    graph: { type: Object, notify: true }

    song: { type: String, notify: true }

    uri: { type: String, notify: true }  # the Note

    rect: { type: Object, notify: true }

    effect: { type: String, notify: true }

    colorScale: { type: String, notify: true }

    noteLabel: { type: String, notify: true }

    selection: { type: Object, notify: true }

    'addHandler(graph, uri)'

    'onColorScale(graph, uri, colorScale)'

    ]

  displayed: ->

    @querySelector('light9-color-picker').displayed()

  onColorScale: ->

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

    if @colorScale == @colorScaleFromGraph

      return

    @editAttr(@song, @uri, U(':colorScale'), @graph.Literal(@colorScale))

  editAttr: (song, note, attr, value) ->

      if ea == U(':colorScale')

        @colorScaleFromGraph = value

        @colorScale = value

        existingColorScaleSetting = setting

    if existingColorScaleSetting == null

      @colorScaleFromGraph = '#ffffff'

      @colorScale = '#ffffff'

    #console.timeEnd('attrs update')

  onDel: ->

    deleteNote(@graph, @song, @uri, @selection)

</dom-module>

<script src="/lib/async/dist/async.js"></script>

<script src="/lib/knockout/dist/knockout.js"></script>

<script src="/lib/shortcut/index.js"></script>

<script src="/lib/sylvester/sylvester.js"></script>

<script src="/lib/underscore/underscore-min.js"></script>

<script src="/node_modules/d3/dist/d3.min.js"></script>

<script src="/node_modules/n3/n3-browser.js"></script> 

<script src="/node_modules/pixi.js/dist/pixi.min.js"></script>

<script src="adjustable.js"></script>

<script src="adjusters.js"></script>

<script src="drawing.js"></script>

<script src="timeline.js"></script>

<script src="cursor_canvas.js"></script>

      frac = step / (secs * fps)

      do (frac) =>

        gotoStep = =>

          @zoomSpec.t1((1 - frac) * oldT1 + frac * newT1)

          @zoomSpec.t2((1 - frac) * oldT2 + frac * newT2)

        delay = frac * secs * 1000

        setTimeout(gotoStep, delay)

        lastTime = delay

    setTimeout(=>

        @zoomSpec.t1(newT1)

        @zoomSpec.t2(newT2)

      , lastTime + 10)  

  @is: 'light9-timeline-editor'

    viewState: { type: Object }

    debug: {type: String}

    graph: {type: Object, notify: true}

    project: {type: Object}

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

    songPlaying: {type: Boolean, notify: true}

    selection: {type: Object, notify: true}

    'setSong(playerSong, followPlayerSong)',

    'onGraph(graph)',

  connectedCallback: ->

    super.connectedCallback()

    ko.options.deferUpdates = true;

    @dia = @$.dia

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

    window.debug_zoomOrLayoutChangedCount = 0

    window.debug_adjUpdateDisplay = 0

    @viewState = new ViewState()

    window.viewState = @viewState

    @setAdjuster = (adjId, makeAdjustable) =>

      ac = @$.adjustersCanvas

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

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

          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.

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

    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 }

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

    'onZoom(viewState)',

  ]

  constructor: ->

    super()

    @stage = new PIXI.Container()

    @renderer = PIXI.autoDetectRenderer({

         backgroundColor: 0xff6060,

    })

  connectedCallback: ->

    super.connectedCallback()

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

    @update()

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

  onGraph: ->

    @graph.runHandler(@gatherNotes.bind(@), 'zoom notes')

  gatherNotes: ->

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

    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

      # 

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

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

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

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

        effect = @project.makeEffect(effect)

      else

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

        return

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

    desiredWidthX = @offsetWidth * .3

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

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

    @project.makeNewNote(effect, dropTime, desiredWidthT)

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

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

  onViewState: ->

    ko.computed =>

      dependOn = [@viewState.zoomSpec.t1(), @viewState.zoomSpec.t2()]

      pxPerTick = 50

      axis = d3.axisTop(@viewState.zoomInX).ticks(@viewState.width() / pxPerTick)

      d3.select(@$.axis).call(axis)

class NoteRow

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

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

  observers: [

    'observedUpdate(graph, song, rowIndex)'

    'onZoom(zoomInX)'

    ]

  observedUpdate: (graph, song, rowIndex) ->

    @update() # old behavior

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

  update: (patch) ->

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

    notesForThisRow = []

    i = 0

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

      if (i % ROW_COUNT) == @rowIndex

        notesForThisRow.push(n)

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

  # note boxes. 

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

    selection: {type: Object, notify: true}

  }

  connectedCallback: ->

    super.connectedCallback()

    @elemById = {}

  getOrCreateElem: (uri, groupId, tag, attrs, moreBuild) ->

    elem = @elemById[uri]

    if !elem

      elem = @elemById[uri] = document.createElementNS("http://www.w3.org/2000/svg", tag)

      @$[groupId].appendChild(elem)

    return !!@elemById[uri + '/area']

  _updateNotePathClasses: (uri, elem) ->

    ko.computed =>

      return if not @_noteInDiagram(uri)

      classes = 'light9-timeline-diagram-layer ' + (if @selection.hover() == uri then 'hover' else '') + ' '  + (if uri in @selection.selected() then 'selected' else '')

      elem.setAttribute('class', classes)

    #elem = @getOrCreateElem(uri+'/label', 'noteLabels', 'text', {style: "font-size:13px;line-height:125%;font-family:'Verana Sans';text-align:start;text-anchor:start;fill:#000000;"})

    #elem.setAttribute('x', curvePts[0].e(1)+20)

    #elem.setAttribute('y', curvePts[0].e(2)-10)

    #elem.innerHTML = effectLabel;