#else

    #  console.trace('read outside runHandler')

class window.SyncedGraph

  # Main graph object for a browser to use. Syncs both ways with

  # rdfdb. Meant to hide the choice of RDF lib, so we can change it

  # later.

  # 

  # Note that _applyPatch is the only method to write to the graph, so

  # it can fire subscriptions.

  constructor: (@patchSenderUrl, @prefixes, @setStatus) ->

    # patchSenderUrl is the /syncedGraph path of an rdfdb server.

    # prefixes can be used in Uri(curie) calls.

    @_autoDeps = new AutoDependencies() # replaces GraphWatchers

    @clearGraph()

    if @patchSenderUrl

      @_client = new RdfDbClient(@patchSenderUrl,

                                 @_clearGraphOnNewConnection.bind(@),

                                 @_applyPatch.bind(@),

                                 @setStatus)

  clearGraph: ->

    # just deletes the statements; watchers are unaffected.

    if @graph?

      @_applyPatch({addQuads: [], delQuads: @graph.getQuads()})

    # if we had a Store already, this lets N3.Store free all its indices/etc

    @graph = N3.Store()

    @_addPrefixes(@prefixes)

    @cachedFloatValues = new Map();

  _clearGraphOnNewConnection: -> # must not send a patch to the server!

    log('graph: clearGraphOnNewConnection')

    @clearGraph()

    log('graph: clearGraphOnNewConnection done')

  _addPrefixes: (prefixes) ->

    for k in (prefixes or {})

      @prefixes[k] = prefixes[k]

    @prefixFuncs = N3.Util.prefixes(@prefixes)

  Uri: (curie) ->

    if not curie?

      throw new Error("no uri")

    if curie.match(/^http/)

      return N3.DataFactory.namedNode(curie)

    part = curie.split(':')

    return @prefixFuncs(part[0])(part[1])

  Literal: (jsValue) ->

    N3.DataFactory.literal(jsValue)

  LiteralRoundedFloat: (f) ->

    N3.DataFactory.literal(d3.format(".3f")(f),

                          @Uri("http://www.w3.org/2001/XMLSchema#double"))

  Quad: (s, p, o, g) -> N3.DataFactory.quad(s, p, o, g)

  toJs: (literal) ->

    # incomplete

    parseFloat(literal.value)

  loadTrig: (trig, cb) -> # for debugging

    patch = {delQuads: [], addQuads: []}

    parser = N3.Parser()

    parser.parse trig, (error, quad, prefixes) =>

                  if error

                    throw new Error(error)

                  if (quad)

                    patch.addQuads.push(quad)

                  else

                    @_applyPatch(patch)

                    @_addPrefixes(prefixes)

                    cb() if cb

  quads: () -> # for debugging

    [q.subject, q.predicate, q.object, q.graph] for q in @graph.getQuads()

  applyAndSendPatch: (patch) ->

    console.time('applyAndSendPatch')

    if !Array.isArray(patch.addQuads) || !Array.isArray(patch.delQuads)

      throw new Error("corrupt patch: #{JSON.stringify(patch)}")

    @_validatePatch(patch)

    @_applyPatch(patch)

    @_client.sendPatch(patch) if @_client

    console.timeEnd('applyAndSendPatch')

  _validatePatch: (patch) ->

    for qs in [patch.addQuads, patch.delQuads]

      for q in qs

        if not q.equals

          throw new Error("doesn't look like a proper Quad")

          throw new Error("corrupt patch: #{JSON.stringify(q)}")

  _applyPatch: (patch) ->

    # In most cases you want applyAndSendPatch.

    # 

    # This is the only method that writes to @graph!

    @cachedFloatValues.clear()

    for quad in patch.delQuads

      #log("remove #{JSON.stringify(quad)}")      

      did = @graph.removeQuad(quad)

      #log("removed: #{did}")

    for quad in patch.addQuads

      @graph.addQuad(quad)

    #log('applied patch locally', patchSizeSummary(patch))

    @_autoDeps.graphChanged(patch)

  getObjectPatch: (s, p, newObject, g) ->

    # make a patch which removes existing values for (s,p,*,c) and

    # adds (s,p,newObject,c). Values in other graphs are not affected.

    existing = @graph.getQuads(s, p, null, g)

    return {

      delQuads: existing,

      addQuads: [@Quad(s, p, newObject, g)]

    }

  patchObject: (s, p, newObject, g) ->

    @applyAndSendPatch(@getObjectPatch(s, p, newObject, g))

  runHandler: (func, label) ->

    # runs your func once, tracking graph calls. if a future patch

    # matches what you queried, we runHandler your func again (and

    # forget your queries from the first time).

    # helps with memleak? not sure yet. The point was if two matching

    # labels get puushed on, we should run only one. So maybe

    # appending a serial number is backwards.

    @serial = 1 if not @serial

    @serial += 1

    #label = label + @serial

    @_autoDeps.runHandler(func, label)

  _singleValue: (s, p) ->

    @_autoDeps.askedFor(s, p, null, null)

    quads = @graph.getQuads(s, p)

    objs = new Set(q.object for q in quads)

    switch objs.size

      when 0

        throw new Error("no value for "+s.value+" "+p.value)

      when 1

        obj = objs.values().next().value

        return obj

      else

        throw new Error("too many different values: " + JSON.stringify(quads))

  floatValue: (s, p) ->

    key = s.value + '|' + p.value

    hit = @cachedFloatValues.get(key)

    return hit if hit != undefined

    #log('float miss', s, p)

    ret = parseFloat(@_singleValue(s, p).value)

    @cachedFloatValues.set(key, ret)

    return ret

  stringValue: (s, p) ->

    @_singleValue(s, p).value

  uriValue: (s, p) ->

    @_singleValue(s, p)

  labelOrTail: (uri) ->

    try

      ret = @stringValue(uri, @Uri('rdfs:label'))

    catch

      words = uri.value.split('/')

      ret = words[words.length-1]

    if not ret

      ret = uri.value

    return ret

  objects: (s, p) ->

    @_autoDeps.askedFor(s, p, null, null)

    quads = @graph.getQuads(s, p)

    return (q.object for q in quads)

  subjects: (p, o) ->

    @_autoDeps.askedFor(null, p, o, null)

    quads = @graph.getQuads(null, p, o)

    return (q.subject for q in quads)

  items: (list) ->

    out = []

    current = list

    while true

log = console.log

Drawing = window.Drawing

ROW_COUNT = 7

class Project

  constructor: (@graph) ->

  makeEffect: (uri) ->

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

    effect = U(uri + '/effect')

    quad = (s, p, o) => {subject: s, predicate: p, object: o, graph: effect}

    quads = [

      quad(effect, U('rdf:type'), U(':Effect')),

      quad(effect, U(':copiedFrom'), uri),

      quad(effect, U('rdfs:label'), @graph.Literal(uri.replace(/.*capture\//, ''))),

      quad(effect, U(':publishAttr'), U(':strength')),

      ]

    fromSettings = @graph.objects(uri, U(':setting'))

    toSettings = @graph.nextNumberedResources(effect + '_set', fromSettings.length)

    for fs in fromSettings

      ts = toSettings.pop()

      # full copies of these since I may have to delete captures

      quads.push(quad(effect, U(':setting'), ts))

      quads.push(quad(ts, U(':device'), @graph.uriValue(fs, U(':device'))))

      quads.push(quad(ts, U(':deviceAttr'), @graph.uriValue(fs, U(':deviceAttr'))))

      try

        quads.push(quad(ts, U(':value'), @graph.uriValue(fs, U(':value'))))

      catch

        quads.push(quad(ts, U(':scaledValue'), @graph.uriValue(fs, U(':scaledValue'))))

    @graph.applyAndSendPatch({delQuads: [], addQuads: quads})

    return effect

  makeNewNote: (song, effect, dropTime, desiredWidthT) ->

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

    newCurve = @graph.nextNumberedResource("#{newNote.value}c")

    points = @graph.nextNumberedResources("#{newCurve.value}p", 4)

    curveQuads = [

        quad(song, U(':note'), newNote)

        quad(newNote, U(':originTime'), @graph.LiteralRoundedFloat(dropTime))

        quad(newNote, U(':effectClass'), effect)

        quad(newNote, U(':curve'), newCurve)

        quad(newCurve, U(':attr'), U(':strength'))

      ]        

    pointQuads = []

    for i in [0...4]

      pt = points[i]

      pointQuads.push(quad(newCurve, U(':point'), pt))

      pointQuads.push(quad(pt, U(':time'), @graph.LiteralRoundedFloat(i/3 * desiredWidthT)))

      pointQuads.push(quad(pt, U(':value'), @graph.LiteralRoundedFloat(i == 1 or i == 2)))

    patch = {

      delQuads: []

      addQuads: curveQuads.concat(pointQuads)

      }

    @graph.applyAndSendPatch(patch)

  getCurvePoints: (curve, xOffset) ->

    worldPts = []

    uris = @graph.objects(curve, @graph.Uri(':point'))

    for pt in uris

      tm = @graph.floatValue(pt, @graph.Uri(':time'))

      val = @graph.floatValue(pt, @graph.Uri(':value'))

      v = $V([xOffset + tm, val])

      v.uri = pt

      worldPts.push(v)

    worldPts.sort((a,b) -> a.e(1) > b.e(1))

    return [uris, worldPts]

  curveWidth: (worldPts) ->

    tMin = @graph.floatValue(worldPts[0].uri, @graph.Uri(':time'))

    tMax = @graph.floatValue(worldPts[3].uri, @graph.Uri(':time'))

    tMax - tMin

  deleteNote: (song, note, selection) ->

    patch = {delQuads: [@graph.Quad(song, graph.Uri(':note'), note, song)], addQuads: []}

    @graph.applyAndSendPatch(patch)

    if note in selection.selected()

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

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

  @is: 'light9-timeline-editor'

  @getter_properties:

    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: {type: String, notify: true}

    songTime: {type: Number, notify: true}

    songDuration: {type: Number, notify: true}

    songPlaying: {type: Boolean, notify: true}

    selection: {type: Object, notify: true}

  @getter_observers: [

    '_onSong(playerSong, followPlayerSong)',

    '_onGraph(graph)',

    '_onSongDuration(songDuration, viewState)',

    '_onSongTime(songTime, viewState)',

    '_onSetAdjuster(setAdjuster)',

  ]

  constructor: ->

    super()

    @viewState = new ViewState()

    window.viewState = @viewState

  ready: ->

    super.ready()

    @addEventListener 'mousedown', (ev) => @$.adjustersCanvas.onDown(ev)

    @addEventListener 'mousemove', (ev) => @$.adjustersCanvas.onMove(ev)

    @addEventListener 'mouseup', (ev) => @$.adjustersCanvas.onUp(ev)

    ko.options.deferUpdates = true

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

    window.debug_zoomOrLayoutChangedCount = 0

    window.debug_adjUpdateDisplay = 0

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

    @trackMouse()

    @bindKeys()

    @bindWheelZoom(@)

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

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

    Polymer.RenderStatus.afterNextRender(this, @_onIronResize.bind(@))

  _onIronResize: ->

    @viewState.setWidth(@offsetWidth)

    @viewState.coveredByDiagramTop(@$.coveredByDiagram.offsetTop)

    @viewState.rowsY(@$.zoomed.$.rows.offsetTop) if @$.zoomed?.$?.rows?

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

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

    if @$.zoomed?.$?.time?

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

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

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

  _onSong: (s) ->

    @song = @playerSong if @followPlayerSong

  _onGraph: (graph) ->

    @project = new Project(graph)

    @show = 'http://light9.bigasterisk.com/show/dance2017'

  _onSetAdjuster: () ->

    @makeZoomAdjs()

  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

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

    # shouldn't need this- deps should get it

    @$.zoomed.gatherNotes() if @$.zoomed?.gatherNotes?

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

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

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

  bindKeys: ->

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

      @$.music.seekPlayOrPause(@viewState.latestMouseTime())

    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(@graph.Uri(@song), note, @selection)

  makeZoomAdjs: ->

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

    valForPos = (pos) =>

        x = pos.e(1)

        t = @viewState.fullZoomX.invert(x)

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

      }))

)

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

    song: { type: String, notify: true }

    viewState: { type: Object, notify: true }

    inlineAttrConfigs: { type: Array, value: [] } # only for inlineattrs that should be displayed

  @getter_observers: [

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

    'onZoom(viewState)',

  ]

  constructor: ->

    super()

    @notes = []

    @stage = new PIXI.Container()

    @stage.interactive=true

    @renderer = PIXI.autoDetectRenderer({

        backgroundColor: 0x606060,

        antialias: true,

        forceCanvas: true,

    })

  ready: ->

    super.ready()

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

    Polymer.RenderStatus.afterNextRender(this, @_onResize.bind(@))

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

    # This works for display, but pixi hit events didn't correctly

    # move with the objects, so as a workaround, I extended the top of

    # the canvas in _onResize.

    # 

    #ko.computed =>

    #  @stage.setTransform(0, -(@viewState.rowsY()), 1, 1, 0, 0, 0, 0, 0)

  _onResize: ->

    @$.rows.firstChild.style.position = 'relative'

    @$.rows.firstChild.style.top = -@viewState.rowsY() + 'px'

    @renderer.resize(@clientWidth, @clientHeight + @viewState.rowsY())

    @renderer.render(@stage)

  _onGraph: (graph, setAdjuster, song, viewState, project)->

    return unless @song # polymer will call again

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

  onZoom: ->

    updateZoomFlattened = ->

      log('updateZoomFlattened')

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

    ko.computed(updateZoomFlattened.bind(@))

  gatherNotes: ->

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

    return unless @song?

    songNotes = @graph.objects(U(@song), U(':note'))

    @stage.removeChildren()

    n.destroy() for n in @notes

    @notes = []

    noteNum = 0

    for uri in _.sortBy(songNotes, 'id')

      con = new PIXI.Container()

      con.interactive=true

      @stage.addChild(con)

      row = noteNum % 6

      rowTop = @viewState.rowsY() + 20 + 150 * row

      note = new Note(@, con, @project, @graph, @selection, uri, @setAdjuster, U(@song), @viewState, rowTop, rowTop + 140)

      @notes.push(note)

      noteNum = noteNum + 1

    @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

    # effect uri, maybe as query params

        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)

  updateInlineAttrs: (note, config) ->

    if not config?

      index = 0

      for c in @inlineAttrConfigs

        if c.uri.equals(note)

          @splice('inlineAttrConfigs', index)

          return

        index += 1

    else

      index = 0

      for c in @inlineAttrConfigs

        if c.uri.equals(note)

          @splice('inlineAttrConfigs', index, 1, config)

          return

        index += 1

      @push('inlineAttrConfigs', config)

)

coffeeElementSetup(class TimeAxis extends Polymer.Element

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

  @getter_properties:

    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)

)

# Maintains a pixi object, some adjusters, and inlineattrs corresponding to a note

# in the graph.

class Note

  constructor: (@parentElem, @container, @project, @graph, @selection, @uri, @setAdjuster, @song, @viewState, @rowTopY, @rowBotY) ->

    @adjusterIds = {} # id : true

    @graph.runHandler(@draw.bind(@), 'note draw')

  destroy: ->

    log('destroy', @uri.value)

    @isDetached = true

    @clearAdjusters()

    @parentElem.updateInlineAttrs(@uri, null)

  clearAdjusters: ->

    for i in Object.keys(@adjusterIds)

      @setAdjuster(i, null)

  getCurvePoints: (subj, curveAttr) ->

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

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

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

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

        return @project.getCurvePoints(curve, originTime)

    throw new Error("curve #{@uri.value} has no attr #{curveAttr.value}")

  draw: ->

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

    [pointUris, worldPts] = @getCurvePoints(@uri, U(':strength'))

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

    yForV = (v) => @rowBotY + (@rowTopY - @rowBotY) * v

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

    screenPts = (new PIXI.Point(@viewState.zoomInX(pt.e(1)), yForV(pt.e(2))) for pt in worldPts)

    @container.removeChildren()    

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

    graphics.interactive = true

    @container.addChild(graphics)

    shape = new PIXI.Polygon(screenPts)

    graphics.beginFill(@_noteColor(effect), .313)

    graphics.drawShape(shape)

    graphics.endFill()

    # stroke should vary with @selection.hover() == @uri and with @uri in @selection.selected()

    # 

    # #notes > path.hover {stroke-width: 1.5; stroke: #888;}

    # #notes > path.selected {stroke-width: 5; stroke: red;}

    graphics.lineStyle(2, 0xffd900, 1)

    graphics.moveTo(screenPts[0].x, screenPts[0].y)

    for p in screenPts.slice(1)

      graphics.lineTo(p.x, p.y)

    graphics.on 'mousedown', (ev) =>

      log('down gfx', @uri.value)

      @_onMouseDown(ev)

    graphics.on 'mouseover', =>

      log('hover', @uri.value)

      @selection.hover(@uri)

    graphics.on 'mouseout', =>