'use strict'

Math.TAU = Math.PI * 2
Math.RAD = Math.PI / 180
Math.DEG = 180 / Math.PI

video  = document.createElement 'video'
canvas = document.createElement 'canvas'
gl     = canvas.getContext      'webgl'

new Promise (done) ->
  window.addEventListener 'load', done

.then ->
  document.body.appendChild canvas

  video.autoplay = video.loop = true
  video.crossOrigin = 'anonymous'
  video.volume = 0.1
  video.src = 'https://dl.dropboxusercontent.com/u/3116587' +
    '/video/Aye%20Aye%20%28Original%20Mix%29%20-%20Pogo.webm'

  if not gl
    throw new Error 'WebGL is not supported'

  if not gl.getExtension 'OES_texture_float'
    throw new Error 'Float textures are not supported'

  gl.clearColor 0, 0, 0, 0
  gl.enable gl.DEPTH_TEST

  $.loadFiles 'json/dither.json', 'json/cube.json',
    'shaders/vertex.essl', 'shaders/fragment.essl'

.then ([ dither, cube, vertex, fragment ]) ->
  program = $.makeProgram gl, vertex, fragment

  $.makeTexture gl, program, 0
  $.makeTexture gl, program, 1
  $.makeBuffers gl, program, new Uint16Array(cube.indices),
    'a_position', 3, new Float32Array(cube.vertices),
    'a_normal',   3, new Float32Array(cube.normals),
    'a_texture',  2, new Float32Array(cube.texture)

  u_model      = gl.getUniformLocation program, 'u_model'
  u_view       = gl.getUniformLocation program, 'u_view'
  u_projection = gl.getUniformLocation program, 'u_projection'
  u_viewport   = gl.getUniformLocation program, 'u_viewport'

  blank = do ->
    c = document.createElement('canvas').getContext '2d'
    c.canvas.width = c.canvas.height = 1
    c.fillStyle = '#FFF'
    c.fillRect 0, 0, 1, 1
    c.canvas

  for own name, matrix of dither
    dither[name] = $.makeDitherMatrix matrix

  do render = (T = 0) ->
    requestAnimationFrame render

    W = canvas.clientWidth
    H = canvas.clientHeight
    if W isnt canvas.width or H isnt canvas.height
      gl.viewport 0, 0, canvas.width = W, canvas.height = H

    $.fillTexture gl, program, 0, if video.duration then video else blank
    $.fillTexture gl, program, 1, dither.bayer16, gl.ALPHA

    model = mat4.create()
    mat4.rotateX model, model, T/5e3
    mat4.rotateY model, model, T/6e3
    mat4.rotateZ model, model, T/7e3

    view = mat4.create()
    mat4.lookAt view, [0,0,5], [0,0,0], [0,1,0]

    projection = mat4.create()
    mat4.perspective projection, 45 * Math.RAD, W/H, 1e-3, 1e3
    mat4.scale projection, projection, [1,-1,1]

    gl.uniformMatrix4fv u_model,      false, model
    gl.uniformMatrix4fv u_view,       false, view
    gl.uniformMatrix4fv u_projection, false, projection
    gl.uniform2f u_viewport, W, H

    gl.clear gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT
    gl.drawElements gl.TRIANGLES, 36, gl.UNSIGNED_SHORT, 0

.catch (e) ->
  resize = ->
    w = video.videoWidth
    h = video.videoHeight
    s = Math.max window.innerWidth  / w,
                 window.innerHeight / h

    video.style.width      = "#{ w *= s }px"
    video.style.height     = "#{ h *= s }px"
    video.style.marginLeft = "#{ w / -2 }px"
    video.style.marginTop  = "#{ h / -2 }px"

  video.addEventListener 'canplay', resize
  window.addEventListener 'resize', resize

  document.body.dataset.error = e.message
  document.body.replaceChild video, canvas

  canvas = gl = null

.then ->
  target = canvas or video

  target.addEventListener 'wheel', (e) ->
    if delta = `e.deltaY ? e.deltaY < 0 ? 1 : -1 : 0`
      vol = video.volume; base = 1e3
      vol = Math.log(vol * base) / Math.log(base)
      vol = Math.pow(base, vol + delta * 0.025) / base
      vol = Math.min(Math.max(0, vol), 1)
      video.volume = vol
      e.preventDefault()

  target.addEventListener 'mousedown', (e) ->
    if e.button is 0
      if video.paused then video.play() else video.pause()
      e.preventDefault()

  target.addEventListener 'drop', (e) ->
    if file = e.dataTransfer.files[0]
      URL.revokeObjectURL video.src
      video.src = URL.createObjectURL file
      e.preventDefault()

  target.addEventListener 'dragover', (e) ->
    e.preventDefault()

$ =

  loadFiles: (url) ->
    if arguments.length > 1
      return Promise.all Array::map.
        call arguments, (x) -> $.loadFiles x

    # new Promise (done, fail) ->
    #   x = new XMLHttpRequest
    #   x.onreadystatechange = ->
    #     done @ if @readyState is 4
    #   x.onerror = fail
    #   x.open 'GET', url, true
    #   x.send()
    # .then (x) ->
    #   h = x.getResponseHeader 'Content-Type'
    #   r = x.responseText
    #   if /json/i.test h then JSON.parse r else r

    # workaround for codepen
    new Promise (done, fail) ->
      if e = document.querySelector "[type='#{url}']"
        done e.textContent
      else
        fail new Error "#{url} not found"
    .then (x) ->
      if /json$/i.test url then JSON.parse x else x

  makeDitherMatrix: (matrix) ->
    m = 1 + matrix.reduce (a, b) -> Math.max a, b
    new Float32Array matrix.map (x) -> (0.5 + x) / m

  makeShader: (gl, type, source) ->
    shader = gl.createShader type
    gl.shaderSource shader, source
    gl.compileShader shader
    if not gl.getShaderParameter shader, gl.COMPILE_STATUS
      throw new Error gl.getShaderInfoLog shader
    shader

  makeProgram: (gl, vshader, fshader) ->
    program = gl.createProgram()
    gl.attachShader program, $.makeShader gl, gl.VERTEX_SHADER,   vshader
    gl.attachShader program, $.makeShader gl, gl.FRAGMENT_SHADER, fshader
    gl.linkProgram program
    if not gl.getProgramParameter program, gl.LINK_STATUS
      throw new Error gl.getProgramInfoLog program
    gl.useProgram program
    program

  makeBuffer: (gl, type, data) ->
    buffer = gl.createBuffer()
    gl.bindBuffer type, buffer
    gl.bufferData type, data, gl.STATIC_DRAW
    buffer

  makeBuffers: (gl, program, indices) ->
    for i in [3...arguments.length] by 3
      [ name, size, data ] = Array::slice.call arguments, i, i + 3
      $.makeBuffer gl, gl.ARRAY_BUFFER, data
      location = gl.getAttribLocation program, name
      gl.enableVertexAttribArray location
      gl.vertexAttribPointer location, size, gl.FLOAT, false, 0, 0

    if indices
      $.makeBuffer gl, gl.ELEMENT_ARRAY_BUFFER, indices

  makeTexture: (gl, program, id) ->
    texture = gl.createTexture()
    gl.uniform1i gl.getUniformLocation(program, 'u_sampler' + id), id
    gl.activeTexture gl.TEXTURE0 + id
    gl.bindTexture gl.TEXTURE_2D, texture
    texture

  fillTexture: (gl, program, id, source, type = gl.RGBA, width, height) ->
    gl.activeTexture gl.TEXTURE0 + id

    if not width and source.length and type is gl.ALPHA
      width = height = Math.sqrt source.length

    gl.uniform2f gl.getUniformLocation(program, 'u_size' + id),
      w = width  or source.width  or source.videoWidth,
      h = height or source.height or source.videoHeight or w

    if w&w-1 or h&h-1
      gl.texParameteri gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE
      gl.texParameteri gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE

    if width
      gl.texParameteri gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST
      gl.texParameteri gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST
      gl.texImage2D gl.TEXTURE_2D, 0, type, w, h, 0, type, (if Object::toString
        .call(source)[8...13] is 'Float' then gl.FLOAT else gl.UNSIGNED_BYTE), source
    else
      # gl.pixelStorei gl.UNPACK_FLIP_Y_WEBGL, true
      gl.texParameteri gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR
      gl.texParameteri gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR
      gl.texImage2D gl.TEXTURE_2D, 0, type, type, gl.UNSIGNED_BYTE, source