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

Polymer
  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/dance2016'}
    songTime: {type: Number, notify: true, observer: '_onSongTime'}
    songDuration: {type: Number, notify: true, observer: '_onSongDuration'}
    songPlaying: {type: Boolean, notify: true}
    fullZoomX: {type: Object, notify: true}
    zoomInX: {type: Object, notify: true}
  width: ko.observable(1)
  listeners:
    'iron-resize': '_onIronResize'
  observers: [
    'setSong(playerSong, followPlayerSong)'
    ]
  _onIronResize: ->
    @width(@offsetWidth)
  _onSongTime: (t) ->
    @viewState.cursor.t(t)
  _onSongDuration: (d) ->
    @viewState.zoomSpec.duration(d)
  setSong: (s) ->
    @song = @playerSong if @followPlayerSong

  ready: ->
    @viewState =
      zoomSpec:
        duration: ko.observable(100)
        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()
    @setAdjuster = @$.adjusters.setAdjuster.bind(@$.adjusters)
    
  attached: ->
    @dia = @$.dia
    ko.computed(@zoomOrLayoutChanged.bind(@)).extend({rateLimit: 5})
    ko.computed(@songTimeChanged.bind(@))

    @trackMouse()
    @bindKeys()
    @bindWheelZoom()

    @makeZoomAdjs()

  zoomOrLayoutChanged: ->
    @fullZoomX.domain([0, @viewState.zoomSpec.duration()])
    @fullZoomX.range([0, @width()])

    # had trouble making notes update when this changes
    zoomInX = d3.scaleLinear()
    zoomInX.domain([@viewState.zoomSpec.t1(), @viewState.zoomSpec.t2()])
    zoomInX.range([0, @width()])
    @zoomInX = zoomInX

    # todo: these run a lot of work purely for a time change    
    @dia.setTimeAxis(@width(), @$.zoomed.$.audio.offsetTop, @zoomInX)
    @$.adjusters.updateAllCoords()

    @songTimeChanged()

  songTimeChanged: ->
    @dia.setCursor(@$.audio.offsetTop, @$.audio.offsetHeight,
                     @$.zoomed.$.time.offsetTop,
                     @$.zoomed.$.time.offsetHeight,
                     @fullZoomX, @zoomInX, @viewState.cursor)
    
  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 = @getBoundingClientRect()
        @viewState.mouse.pos($V([ev.pageX - @root.left, ev.pageY - @root.top]))

        @dia.setMouse(@viewState.mouse.pos())
        @sendMouseToVidref()

  sendMouseToVidref: ->
    now = Date.now()
    if (!@$.vidrefLastSent? || @$.vidrefLastSent < now - 200) && !@songPlaying
      @$.vidrefTime.body = {t: @latestMouseTime(), source: 'timeline'}
      @$.vidrefTime.generateRequest()
      @$.vidrefLastSent = now

  latestMouseTime: ->
    @zoomInX.invert(@viewState.mouse.pos().e(1))

  bindWheelZoom: ->
    @$.zoomed.addEventListener 'mousewheel', (ev) =>
      zs = @viewState.zoomSpec

      center = @latestMouseTime()
      left = center - zs.t1()
      right = zs.t2() - center
      scale = Math.pow(1.005, ev.deltaY)

      zs.t1(center - left * scale)
      zs.t2(center + right * scale)

  animatedZoom: (newT1, newT2, secs) ->
    fps = 30
    oldT1 = @viewState.zoomSpec.t1()
    oldT2 = @viewState.zoomSpec.t2()
    lastTime = 0
    for step in [0..secs * fps]
      frac = step / (secs * fps)
      do (frac) =>
        gotoStep = =>
          @viewState.zoomSpec.t1((1 - frac) * oldT1 + frac * newT1)
          @viewState.zoomSpec.t2((1 - frac) * oldT2 + frac * newT2)
        delay = frac * secs * 1000
        setTimeout(gotoStep, delay)
        lastTime = delay
    setTimeout(=>
        @viewState.zoomSpec.t1(newT1)
        @viewState.zoomSpec.t2(newT2)
      , lastTime + 10)  
    
  bindKeys: ->
    shortcut.add "Ctrl+P", (ev) =>
      @$.music.seekPlayOrPause(@latestMouseTime())

    zoomAnimSec = .1
    shortcut.add "Ctrl+Escape", =>
      @animatedZoom(0, @viewState.zoomSpec.duration(), zoomAnimSec)
    shortcut.add "Shift+Escape", =>
      @animatedZoom(@songTime - 2, @viewState.zoomSpec.duration(), zoomAnimSec)
    shortcut.add "Escape", =>
      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)

  makeZoomAdjs: ->
    log('makeZoomAdjs', @adjs)
    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])
      getSuggestedTargetOffset: () => $V([-50, 0])
      getValueForPos: valForPos
    }))

    @setAdjuster('zoom-right', new AdjustableFloatObservable({
      observable: @viewState.zoomSpec.t2,
      getTarget: () =>
        $V([@fullZoomX(@viewState.zoomSpec.t2()), yMid])
      getSuggestedTargetOffset: () => $V([50, 0])
      getValueForPos: valForPos
    }))

    panObs = ko.pureComputed({
        read: () =>
          (@viewState.zoomSpec.t1() + @viewState.zoomSpec.t2()) / 2
        write: (value) =>
          zs = @viewState.zoomSpec
          span = zs.t2() - zs.t1()
          zs.t1(value - span / 2)
          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
      }))
      

Polymer
  is: 'light9-timeline-time-zoomed'
  behaviors: [ Polymer.IronResizableBehavior ]
  properties:
    graph: { type: Object, notify: true }
    dia: { type: Object, notify: true }
    song: { type: String, notify: true }
    zoomInX: { type: Object, notify: true }
    rows: { value: [0] }
    zoom: { type: Object, notify: true, observer: 'onZoom' }
    zoomFlattened: { type: Object, notify: true }
  onZoom: ->
    updateZoomFlattened = ->
      @zoomFlattened = ko.toJS(@zoom)
    ko.computed(updateZoomFlattened.bind(@))
  ready: ->

  attached: ->
    root = @closest('light9-timeline-editor')
    setupDrop @, @$.rows, root, (effect, pos) =>
      U = (x) -> @graph.Uri(x)

      # 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'))
        log("drop #{effect} is not an effect")
        return
      
      dropTime = @zoomInX.invert(pos.e(1))
      @makeNewNote(effect, dropTime)
      
  makeNewNote: (effect, dropTime) ->
    U = (x) -> @graph.Uri(x)
    quad = (s, p, o) => {subject: s, predicate: p, object: o, graph: @song}
      
    newNote = @graph.nextNumberedResource("#{@song}/n")
    newCurve = @graph.nextNumberedResource("#{newNote}c")
    points = @graph.nextNumberedResources("#{newCurve}p", 4)

    curveQuads = [
        quad(@song, U(':note'), newNote)
        quad(newNote, RDF + 'type', U(':Note'))
        quad(newNote, U(':originTime'), @graph.LiteralRoundedFloat(dropTime))
        quad(newNote, U(':effectClass'), effect)
        quad(newNote, U(':curve'), newCurve)
        quad(newCurve, RDF + 'type', U(':Curve'))
        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)))
      pointQuads.push(quad(pt, U(':value'), @graph.LiteralRoundedFloat(i == 1 or i == 2)))

    patch = {
      delQuads: []
      addQuads: curveQuads.concat(pointQuads)
      }
    @graph.applyAndSendPatch(patch)

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 ]
  properties:
    graph: { type: Object, notify: true }
    dia: { type: Object, notify: true }
    song:  { type: String, notify: true }
    zoomInX: { type: Object, notify: true }
    noteUris: { type: Array, notify: true }
    rowIndex: { type: Object, notify: true }
  observers: [
    'onGraph(graph)'
    'update(song)'
    ]
  onGraph: ->
    @graph.runHandler(@update.bind(@), "row notes #{@rowIndex}")
  update: ->
    U = (x) -> @graph.Uri(x)
    log("row #{@rowIndex} updating")
    @noteUris = []
    for note in @graph.objects(@song, U(':note'))
      @push('noteUris', note)


getCurvePoints = (graph, curve, xOffset) ->
  worldPts = []
  for pt in graph.objects(curve, graph.Uri(':point'))
    v = $V([xOffset + graph.floatValue(pt, graph.Uri(':time')),
            graph.floatValue(pt, graph.Uri(':value'))])
    v.uri = pt
    worldPts.push(v)
  worldPts.sort((a,b) -> a.e(1) > b.e(1))
  return worldPts

Polymer
  is: 'light9-timeline-note'
  behaviors: [ Polymer.IronResizableBehavior ]
  listeners: 'iron-resize': 'update'
  properties:
    graph: { type: Object, notify: true }
    dia: { type: Object, notify: true }
    uri: { type: String, notify: true }
    zoomInX: { type: Object, notify: true }
    setAdjuster: {type: Function, notify: true}
  observers: [
    'onUri(graph, dia, uri)'
    'update(graph, dia, uri, zoomInX, setAdjuster)'
    ]
  ready: ->

  detached: ->
    @dia.clearElem(@uri)

  onUri: ->
    @graph.runHandler(@update.bind(@), "note updates #{@uri}")
    
  update: ->
    # update our note DOM and SVG elements based on the graph
    U = (x) -> @graph.Uri(x)
    try
      worldPts = [] # (song time, value)

      originTime = @graph.floatValue(@uri, U(':originTime'))
      for curve in @graph.objects(@uri, U(':curve'))
        if @graph.uriValue(curve, U(':attr')) == U(':strength')
          worldPts = getCurvePoints(@graph, curve, originTime)
          @setAdjuster(@uri+'/offset', new AdjustableFloatObject({
            graph: @graph
            subj: @uri
            pred: @graph.Uri(':originTime')
            ctx: @graph.Uri(@song)
            getTargetPosForValue: (value) => $V([@zoomInX(value), 600])
            getValueForPos: (pos) => @zoomInX.invert(pos.e(1))
            getSuggestedTargetOffset: () => $V([0, -80])
          }))

          for pointNum in [0, 2, 3]
            @setAdjuster(@uri+'/p'+pointNum, adj = new AdjustableFloatObject({
              graph: @graph
              subj: worldPts[pointNum].uri
              pred: @graph.Uri(':time')
              ctx: @graph.Uri(@song)
              getTargetPosForValue: (value) => $V([@zoomInX(value), 600])
              getValueForPos: (pos) =>
                origin = @graph.floatValue(@uri, U(':originTime'))
                (@zoomInX.invert(pos.e(1)) - origin)
              getSuggestedTargetOffset: () => $V([0, -80])
            }))
            adj._getValue = (=>
              # note: don't use originTime from the closure- we need the
              # graph dependency
              adj._currentValue + @graph.floatValue(@uri, U(':originTime'))
              )
            console.log(adj)
          
      screenPos = (pt) =>
        $V([@zoomInX(pt.e(1)), @offsetTop + (1 - pt.e(2)) * @offsetHeight])

      label = @graph.uriValue(@uri, U(':effectClass')).replace(/.*\//, '')
      @dia.setNote(@uri, (screenPos(pt) for pt in worldPts), label)

    catch e
      log("during resize of #{@uri}: #{@e}")

Polymer
  is: "light9-timeline-adjusters"
  properties:
    adjs: { type: Object, notify: true }, # adjId: Adjustable
    dia: { type: Object }

  ready: ->
    @adjs = {}
    
  setAdjuster: (adjId, adjustable) ->
    # callers register/unregister the Adjustables they want us
    # to make adjuster elements for. Caller invents adjId.
    adjustable.id = adjId
    if not @adjs[adjId] or not adjustable?
      @adjs[adjId] = adjustable
      @debounce('adjsChanged', @adjsChanged.bind(@), 1)
    
  adjsChanged: ->

    added = removed = 0
    newIds = Object.keys(@adjs)

    parent = @$.all
    haveIds = []
    for c in parent.children
      id = c.getAttribute('id')
      if newIds.indexOf(id) == -1
        c.remove()
        removed++
        # ...?
      else
        haveIds.push(id)

    for id, adj of @adjs
      if haveIds.indexOf(id) == -1
        log('need new one for', id)
        child = document.createElement('light9-timeline-adjuster')
        child.dia = @dia
        child.graph = @graph
        child.setAttribute('id', id)
        child.adj = adj # set this  last
        parent.appendChild(child)
        added++
    log("adjsChanged removed #{removed} added #{added}") if added or removed

  layoutCenters: ->
    # push Adjustable centers around to avoid overlaps
    qt = d3.quadtree()
    qt.extent([[0,0], [8000,8000]])
    for _, adj of @adjs
      desired = adj.getSuggestedCenter()
      output = desired
      for tries in [0...2]
        nearest = qt.find(output.e(1), output.e(2))
        if nearest
          dist = output.distanceFrom(nearest)
          if dist < 60
            away = output.subtract(nearest).toUnitVector()
            toScreenCenter = $V([500,200]).subtract(output).toUnitVector()
            output = output.add(away.x(60).add(toScreenCenter.x(10)))

      if -50 < output.e(1) < 20 # mostly for zoom-left
        output.setElements([
          Math.max(20, output.e(1)),
          output.e(2)])
        
      adj.centerOffset = output.subtract(adj.getTarget())
      qt.add(output.elements)

  updateAllCoords: ->
    @layoutCenters()
    
    for elem in @querySelectorAll('light9-timeline-adjuster')
      elem.updateDisplay()
    

Polymer
  is: 'light9-timeline-adjuster'
  properties:
    graph: { type: Object, notify: true }
    adj: { type: Object, notify: true, observer: 'onAdj' }
    target: { type: Object, notify: true }
    displayValue: { type: String }
    centerStyle: { type: Object }
    spanClass: { type: String, value: '' }

  onAdj: (adj) ->
    log('onAdj', @id)
    @adj.subscribe(@updateDisplay.bind(this))
    @graph.runHandler(@updateDisplay.bind(@))

  updateDisplay: () ->
    log('updateDisplay', @id)
    @spanClass = if @adj.config.emptyBox then 'empty' else ''
    @displayValue = @adj.getDisplayValue()
    center = @adj.getCenter()
    target = @adj.getTarget()
    log('ct', center.elements, target.elements)
    return if isNaN(center.e(1))
    @centerStyle = {x: center.e(1), y: center.e(2)}
    @dia?.setAdjusterConnector(@adj.id + '/conn', center, target)
        
  attached: ->
    drag = d3.drag()
    sel = d3.select(@$.label)
    sel.call(drag)
    drag.subject((d) -> {x: @offsetLeft, y: @offsetTop})
    drag.container(@offsetParent)
    drag.on('start', () => @adj?.startDrag())
    drag.on 'drag', () =>
      @adj?.continueDrag($V([d3.event.x, d3.event.y]))
    drag.on('end', () => @adj?.endDrag())

    @updateDisplay()

  detached: ->
    @dia.clearElem(@adj.id + '/conn')


svgPathFromPoints = (pts) ->
  out = ''
  pts.forEach (p) ->
    p = p.elements if p.elements # for vec2
    if out.length == 0
      out = 'M '
    else
      out += 'L '
    out += '' + p[0] + ',' + p[1] + ' '
    return
  out

Polymer
  is: 'light9-timeline-diagram-layer'
  properties: {}
  ready: ->
    @elemById = {}

  setTimeAxis: (width, yTop, scale) ->
    pxPerTick = 50
    axis = d3.axisTop(scale).ticks(width / pxPerTick)
    d3.select(@$.timeAxis).attr('transform', 'translate(0,'+yTop+')').call(axis)

  setMouse: (pos) ->
    elem = @getOrCreateElem('mouse-x', 'mouse', 'path', {style: "fill:none;stroke:#fff;stroke-width:0.5;"})
    elem.setAttribute('d', svgPathFromPoints([[-9999, pos.e(2)], [9999, pos.e(2)]]))
    elem = @getOrCreateElem('mouse-y', 'mouse', 'path', {style: "fill:none;stroke:#fff;stroke-width:0.5;"})
    elem.setAttribute('d', svgPathFromPoints([[pos.e(1), -9999], [pos.e(1), 9999]]))   

  getOrCreateElem: (uri, groupId, tag, attrs) ->
    elem = @elemById[uri]
    if !elem
      elem = @elemById[uri] = document.createElementNS("http://www.w3.org/2000/svg", tag)
      @$[groupId].appendChild(elem)
      elem.setAttribute('id', uri)
      for k,v of attrs
        elem.setAttribute(k, v)
    return elem

  clearElem: (uri) ->
    elem = @elemById[uri]
    if elem
      elem.remove()
      delete @elemById[uri]

  anyPointsInView: (pts) ->
    for pt in pts
      if pt.e(1) > -100 && pt.e(1) < 2500
        return true
    return false
    
  setNote: (uri, curvePts, effectLabel) ->
    areaId = uri + '/area'
    labelId = uri + '/label'
    if not @anyPointsInView(curvePts)
      @clearElem(areaId)
      @clearElem(labelId)
      return
    elem = @getOrCreateElem(areaId, 'notes', 'path',
      {style:"fill:#53774b; stroke:#000000; stroke-width:1.5;"})
    elem.setAttribute('d', svgPathFromPoints(curvePts))

    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;

  setCursor: (y1, h1, y2, h2, fullZoomX, zoomInX, cursor) ->
    @cursorPath =
      top: @querySelector('#cursor1')
      mid: @querySelector('#cursor2')
      bot: @querySelector('#cursor3')
    return if !@cursorPath.top
    
    xZoomedOut = fullZoomX(cursor.t())
    xZoomedIn = zoomInX(cursor.t())
    @cursorPath.top.setAttribute 'd', svgPathFromPoints([
      [xZoomedOut, y1]
      [xZoomedOut, y1 + h1]
    ])
    @cursorPath.mid.setAttribute 'd', svgPathFromPoints([
      [xZoomedIn + 2, y2 + h2]
      [xZoomedIn - 2, y2 + h2]
      [xZoomedOut - 1, y1 + h1]
      [xZoomedOut + 1, y1 + h1]
    ]) + ' Z'
    @cursorPath.bot.setAttribute 'd', svgPathFromPoints([
      [xZoomedIn, y2 + h2]
      [xZoomedIn, @offsetParent.offsetHeight]
    ])

  setAdjusterConnector: (uri, center, target) ->
    id = uri + '/adj'
    if not @anyPointsInView([center, target])
      @clearElem(uri)
      return
    elem = @getOrCreateElem(uri, 'connectors', 'path', {style: "fill:none;stroke:#d4d4d4;stroke-width:0.9282527;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:2.78475821, 2.78475821;stroke-dashoffset:0;"})
    elem.setAttribute('d', svgPathFromPoints([center, target]))