<link rel="import" href="/lib/polymer/polymer.html">

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

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

<link rel="import" href="light9-timeline-audio.html">

<link rel="import" href="../rdfdb-synced-graph.html">

<link rel="import" href="../light9-music.html">

<link rel="import" href="../edit-choice.html">

<link rel="import" href="inline-attrs.html">

<!-- Whole editor- include this on your page.

     Most coordinates are relative to this element.

   -->

         pointer-events: none;

     }

    </style>

    <canvas id="canvas"></canvas>

  </template>

</dom-module>

<!-- seconds labels -->

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

  <template>

    <style>

      div {

          width: 100%;

          height: 31px;

      }

      svg {

          width: 100%;

          height: 30px;

      }

    </style>

    <svg id="timeAxis" xmlns="http://www.w3.org/2000/svg">

      <g id="axis" transform="translate(0,30)"></g>    

    </svg>

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

    songTime: {type: Number, notify: true}

    songDuration: {type: Number, notify: true}

    songPlaying: {type: Boolean, notify: true}

    selection: {type: Object, notify: true}

  @getter_observers: [

    '_onSongDuration(songDuration, viewState)',

    '_onSongTime(songTime, viewState)',

  ]

  ready: ->

    super.ready()

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

      @trackMouse()

      @bindKeys()

      @bindWheelZoom(@dia)

          @forwardMouseEventsToAdjustersCanvas()

      @makeZoomAdjs()

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

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

  _onIronResize: ->

    @viewState.setWidth(@offsetWidth)

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

    @viewState.audioH(@$.audio.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)

    @song = @playerSong if @followPlayerSong

    @project = new Project(graph)

  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

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

    shortcut.add "Escape", => @viewState.frameCursor()

    shortcut.add "L", =>

      @$.adjustersCanvas.updateAllCoords()

    shortcut.add 'Delete', =>

      for note in @selection.selected()

        @project.deleteNote(@song, note, @selection)

  makeZoomAdjs: ->

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

    valForPos = (pos) =>

        x = pos.e(1)

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

      observable: @viewState.zoomSpec.t1,

      getTarget: () =>

      getSuggestedTargetOffset: () => $V([50, 0])

      getValueForPos: valForPos

    }))

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

      observable: @viewState.zoomSpec.t2,

      getTarget: () =>

      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)

  constructor: ->

    super()

    @stage = new PIXI.Container()

    @renderer = PIXI.autoDetectRenderer({

         backgroundColor: 0xff6060,

    })

  ready: ->

    super.ready()

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

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

  update: ->

    @renderer.resize(@clientWidth, @clientHeight)

    @renderer.render(@stage)

  onZoom: ->

    updateZoomFlattened = ->

      log('updateZoomFlattened')

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

    ko.computed(updateZoomFlattened.bind(@))

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

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

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

          [@pointUris, @worldPts] = @project.getCurvePoints(curve, originTime)

          curveWidthCalc = () => @_curveWidth(@worldPts)

          h = 150 #@offsetHeight

          screenPts = ($V([@viewState.zoomInX(pt.e(1)), @offsetTop + (1 - pt.e(2)) * h]) for pt in @worldPts)

          graphics.beginFill(0xFF3300);

          graphics.lineStyle(4, 0xffd900, 1)

          graphics.moveTo(screenPts[0].e(1), screenPts[0].e(2))

          for p in screenPts.slice(1)

            graphics.lineTo(p.e(1), p.e(2))

         graphics.endFill()

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

     @stage.children.splice(0)