# Polymer seems to need static getters for 'observers' and

# can even tell the difference.

#

# This workaround is to use names like '@getter_properties' in the

# class then register with this function that fixes them.

# 

# Also see http://coffeescript.org/#unsupported-get-set

window.coffeeElementSetup = (cls) ->

    val = cls['getter_' + attr]

    if val?

      do (val) ->

        Object.defineProperty(cls, attr, {get: ( -> val)})  

  customElements.define(cls.is, cls)

log = console.log

Drawing = window.Drawing

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

  @is: 'light9-adjusters-canvas'

  @getter_properties:

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

  @getter_observers: [

    'updateAllCoords(adjs)'

  ]

    @adjs = {}

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

    @redraw()

  onDown: (ev) ->

    if ev.buttons == 1

      ev.stopPropagation()

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

      adj = @_adjAtPoint(start)

      if adj

        @currentDrag = {start: start, adj: adj}

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

  @is: 'light9-cursor-canvas'

  @getter_properties:

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

    @mouseX = 0

    @mouseY = 0

    @cursorPath = null

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

  onViewState: ->

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

  redrawCursor: ->

    vs = @viewState

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

    xZoomedOut = vs.fullZoomX(vs.latestMouseTime())

    xZoomedIn = vs.mouse.pos().e(1)

    @cursorPath = {

      top0: $V([xZoomedOut, vs.audioY()])

      top1: $V([xZoomedOut, vs.audioY() + vs.audioH()])

      mid0: $V([xZoomedIn + 2, vs.zoomedTimeY() + vs.zoomedTimeH()])

      mid1: $V([xZoomedIn - 2, vs.zoomedTimeY() + vs.zoomedTimeH()])

      mid2: $V([xZoomedOut - 1, vs.audioY() + vs.audioH()])

      mid3: $V([xZoomedOut + 1, vs.audioY() + vs.audioH()])

      bot0: $V([xZoomedIn, vs.zoomedTimeY() + vs.zoomedTimeH()])

    }

    @redraw()

  redraw: ->

    return unless @ctx

    @ctx.clearRect(0, 0, @$.canvas.width, @$.canvas.height)

    @ctx.strokeStyle = '#fff'

    @ctx.lineWidth = 0.5

    @ctx.beginPath()

    Drawing.line(@ctx, $V([0, @mouseY]), $V([@$.canvas.width, @mouseY]))

    Drawing.line(@ctx, $V([@mouseX, 0]), $V([@mouseX, @$.canvas.height]))

    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: [

    'setSong(playerSong, followPlayerSong)',

    'onGraph(graph)',

    '_onSongDuration(songDuration, viewState)',

    '_onSongTime(songTime, viewState)',

  ]

    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

  @getter_observers: [

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

    'onZoom(viewState)',

  ]

  constructor: ->

    super()

    @stage = new PIXI.Container()

    @renderer = PIXI.autoDetectRenderer({

         backgroundColor: 0xff6060,

    })

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

    @update()

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

  update: ->

    @renderer.resize(@clientWidth, @clientHeight)

    @renderer.render(@stage)

  onZoom: ->

    updateZoomFlattened = ->

    for newUri in notesForThisRow

      #should only make new ones

      child = new Note(@graph, @selection, @dia, newUri, @setAdjuster, @song, @zoomInX)

  onZoom: ->

    for e in @children

      e.zoomInX = @zoomInX

class Note

  constructor: (@graph, @selection, @dia, @uri, @setAdjuster, @song, @zoomInX)->0

  @is: 'light9-timeline-note'

  @behaviors: [ Polymer.IronResizableBehavior ]

  @properties:

    graph: { type: Object, notify: true }

    selection: { type: Object, notify: true }

    dia: { type: Object, notify: true }

    uri: { type: String, notify: true }

    zoomInX: { type: Object, notify: true }

    setAdjuster: {type: Function, notify: true }

    inlineRect: { type: Object, notify: true }

    song: { type: String, notify: true }

  @observers: [

    'onUri(graph, dia, uri, zoomInX, setAdjuster, song)'

    'update(graph, dia, uri, zoomInX, setAdjuster, song)'

    ]

  ready: ->

    @adjusterIds = {} # id : true

  detached: ->

    log('detatch', @uri)

    @dia.clearNote(@uri)

    @isDetached = true

    @clearAdjusters()

  clearAdjusters: ->

    for i in Object.keys(@adjusterIds)

      @setAdjuster(i, null)

  onUri: ->

      $V([0, 30])

    else

      $V([0, -30])

coffeeElementSetup(class DiagramLayer extends Polymer.Element

  # note boxes. 

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

  @getter_properties: {

    selection: {type: Object, notify: true}

  }

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

      elem.setAttribute('id', uri)

      for k,v of attrs

        elem.setAttribute(k, v)

      if moreBuild