constructor: ->

    @handlersSp = {} # {s: {p: [handlers]}}

  subscribe: (s, p, o, onChange) -> # return subscription handle

    if o? then throw Error('not implemented')

    if not @handlersSp[s]

      @handlersSp[s] = {}

    if not @handlersSp[s][p]

      @handlersSp[s][p] = []

    @handlersSp[s][p].push(onChange)

  unsubscribe: (subscription) ->

    throw Error('not implemented')

  graphChanged: (patch) ->

    for quad in patch.delQuads

        # currently calls multiple times, which is ok, but we might

        # group things into fewer patches

        cb({delQuads: [quad], addQuads: []})

    for quad in patch.addQuads

        cb({delQuads: [], addQuads: [quad]})

class window.SyncedGraph

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

  # it can fire subscriptions.

  constructor: (patchSenderUrl, prefixes) ->

    @graph = N3.Store()

    @_addPrefixes(prefixes)

    @_watchers = new GraphWatchers()

    <div>

      <rdfdb-synced-graph graph="{{graph}}"></rdfdb-synced-graph>

      timeline editor: song [uri] <button>unlink</button>

      <label><input type="checkbox"> follow player song choice</label>

    </div>

    <!--

         Old zoom menu:

         See current time .. esc

         See from current time -> end .. shift+esc

         Zoom all .. ctrl+esc

       -->

    <light9-timeline-audio id="audio"></light9-timeline-audio>

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

    <light9-timeline-adjusters id="adjusters" dia="{{dia}}" adjs="{{adjs}}"></light9-timeline-adjusters>

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

  </template>

</dom-module>

<!-- the whole section that pans/zooms in time (most of the editor) -->

<dom-module id="light9-timeline-time-zoomed">

  <template>

    <style>

     light9-timeline-audio {

         width: 100%;

         height: 90px;

     }

     light9-timeline-graph-row {

         flex-grow: 1;

     }

    </style>

    <div>

      <light9-timeline-time-axis id="time"></light9-timeline-time-axis>

      <light9-timeline-audio id="audio" zoom="{{zoomFlattened}}"></light9-timeline-audio>

      <template is="dom-repeat" items="{{rows}}">

      </template>

    </div>

  </template>

  <script>

   Polymer({

       is: "light9-timeline-time-zoomed",

       behaviors: [

           Polymer.IronResizableBehavior

       ],

       properties: {

           zoom: {type: Object, notify: true, observer: 'onZoom'},

           zoomFlattened: {type: Object, notify: true}

       },

       onZoom: function() {

           ko.computed(function() {

               this.zoomFlattened = ko.toJS(this.zoom);

           }.bind(this));

       }

   });

  </script>

</dom-module>

  </template>

</dom-module>

<!-- one row of notes -->

<dom-module id="light9-timeline-graph-row">

  <template>

    <style>

     :host {

         border-top: 1px solid black;

         display: flex;

     }

    </style>

    </template>

  </template>

</dom-module>

<!-- One trapezoid note shape in a row.

     This element has the right Y coords.

     We compute X coords from the zoom setting.

     diagram-layer draws the note body. -->

<dom-module id="light9-timeline-note">

  <template>

    <style>

     :host {

         display: block;

         background: green;

     }

    </style>

    <light9-timeline-note-inline-attrs></light9-timeline-note-inline-attrs>

  </template>

</dom-module>

<!-- All the adjusters you can edit or select.

     This element manages their layout and suppresion.

     Owns the selection.

     Maybe includes selecting things that don't even have adjusters.

     Maybe manages the layout of other labels and text too, to avoid overlaps.

   -->

<!-- Yellow dotted handle that you can adjust to edit something.

     Knows an attribute to edit and the true screen location, even if

     parent <light9-timeline-adjusters> has offset us a bit to avoid a

     text overlap.

     Draws affordance arrows and a connector line if we're far

     away from the point that we edit.

     May grow to a bigger editor when you click or drag.

   -->

<dom-module id="light9-timeline-adjuster">

  <template>

    <style>

     #top {

         position: absolute;

         display: inline-block;

     }

     table {

         position: relative;

         left: -50%;

         top: -40px; /* percent had no effect */

         z-index: 2;

         border-collapse: collapse;

     }

     td {

         text-align: center;

         font-size: 20px;

     }

     span {

         font-size: 16px;

         background: rgba(255, 255, 0, 0.5);

         border: 3px yellow dotted;

         border-radius: 8px;

  persistDemo: ->

    ctx = @graph.Uri('http://example.com/')

    adjs = []

    for n in [0..7]

      subj = @graph.Uri(':demoResource'+n)

      adjs.push(new AdjustableFloatObject({

        graph: @graph

        subj: subj

        pred: @graph.Uri(':startTime')

        ctx: ctx

        getValueForPos: (pos) => @zoomInX.invert(pos.e(1))

      }))

      adjs.push(new AdjustableFloatObject({

        graph: @graph

        subj: subj

        pred: @graph.Uri(':endTime')

        ctx: ctx

        getValueForPos: (pos) => @zoomInX.invert(pos.e(1))

      }))

    return adjs

  makeZoomAdjs: ->

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

    dur = @viewState.zoomSpec.duration

    valForPos = (pos) =>

        x = pos.e(1)

        t = @fullZoomX.invert(x)

    left = new AdjustableFloatObservable({

      observable: @viewState.zoomSpec.t1,

      })

    return [left, right, pan]

Polymer

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

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

  # light9-timeline-editor does our drawing work.

Polymer

  is: 'light9-timeline-graph-row'

  behaviors: [ Polymer.IronResizableBehavior ]

window.xserial = 0

Polymer

  is: 'light9-timeline-note'

  behaviors: [ Polymer.IronResizableBehavior ]

  listeners: 'iron-resize': '_onIronResize'

  _onIronResize: ->

Polymer

  is: "light9-timeline-adjusters"

  properties:

    adjs: { type: Array },

    dia: { type: Object }

  updateAllCoords: ->

    for elem in @querySelectorAll('light9-timeline-adjuster')

      elem.updateDisplay()

_adjusterSerial = 0