// # Rendering Signed Distance Functions with WebGL
//
// Yes, you can do this in Shadertoy, but this is how you can do it from scratch.
// (It also loads a lot faster.)
//
// Use it by opening the Scratchpad in Firefox and evaluate the code with `Ctrl-R`
// to rerender.  Including via `<script>` should also work.
//
// # Resources
//
// - [Raw WebGL](http://nickdesaulniers.github.io/RawWebGL) ([video](https://www.youtube.com/watch?v=H4c8t6myAWU))
// - [WebGL Fundamentals](http://webglfundamentals.org/webgl/lessons/webgl-fundamentals.html)

try {
  document.body.style = "margin: 0; overflow: hidden;";
  document.body.innerHTML = "";
  
  var errorEl = document.createElement("pre");
  errorEl.style = "color: red; position: absolute; right: 0; bottom: 0; background-color: black; z-index: 4";
  document.body.appendChild(errorEl);
  
  function displayError(e) {
    window.error = e;
    errorEl.textContent = e;
    console.error(e);
  }
  
  function clearError() {
    errorEl.textContent = "";
  }
  
  function compileShader(gl, type, shaderSrc) {
    var shader = gl.createShader(type);
    gl.shaderSource(shader, shaderSrc);
    gl.compileShader(shader);

    if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
      throw new Error(gl.getShaderInfoLog(shader));
    }

    return shader;
  }
  
  function linkShaders(gl, vertexShader, fragmentShader) {
    var program = gl.createProgram();
    gl.attachShader(program, vertexShader);
    gl.attachShader(program, fragmentShader);
    gl.linkProgram(program);
    
    if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
      throw new Error(gl.getProgramInfoLog(program));
    }
    
    return program;
  }
  
  function initBuffer(gl, data, elemPerVertex, attribute) {
    var buffer = gl.createBuffer();
    if (!buffer) {
      throw new Error('failed to create buffer');
    }
    
    gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
    gl.bufferData(gl.ARRAY_BUFFER, data, gl.STATIC_DRAW);
    gl.vertexAttribPointer(attribute, elemPerVertex, gl.FLOAT, false, 0, 0);
    gl.enableVertexAttribArray(attribute);
  }

  var vertexShaderSrc = `
attribute vec4 aPosition;

void main() {
  gl_Position = aPosition;
}
`
   
  var styleEl = document.createElement("style");
  styleEl.textContent = `

#sidebar {
  position: absolute;
  top: 0;
  right: -250px;
  z-index: 1;

  padding: 1ex;

  font-family: monospace;
  font-weight: bold;

  background-color: rgba(255, 255, 255, 0.5);
}

#sidebar:hover {
  transition: right 0.1s;
  right: 0;
}

#editor {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
}

#editor textarea {
  display: block;
  width: 72ex;
  height: calc(100% - 2em + 1px); /* TODO: fix this */
  resize: horizontal;
  padding: 1ex;
  box-sizing: border-box;
}

#editor textarea, #editor input {
  border: none;
  background-color: rgba(255, 255, 255, 0.8);
}

#editor-changed {
  position: absolute;
  right: 0;
  top: 1.5em;
}
  `
  document.head.appendChild(styleEl);
  
  function TwoTriangles(canvas, fragmentShaderSrc, options) {
    var options = options || {};
    var tt = {};
    tt.canvas = canvas;
    tt.fragmentShaderSrc = transformShader(fragmentShaderSrc);
    
    tt.w = canvas.width = window.innerWidth;
    tt.h = canvas.height = window.innerHeight;

    var gl = tt.gl = canvas.getContext("webgl");
    if (!gl) { alert("i think your browser does not support webgl"); }

    gl.clearColor(0.0, 0.0, 0.0, 1.0);
    gl.clear(gl.COLOR_BUFFER_BIT);

    var vertexShader = compileShader(gl, gl.VERTEX_SHADER, vertexShaderSrc);
    var fragmentShader = compileShader(gl, gl.FRAGMENT_SHADER, tt.fragmentShaderSrc);

    var program = tt.program = linkShaders(gl, vertexShader, fragmentShader);
    gl.useProgram(program);

    var aPosition = gl.getAttribLocation(program, 'aPosition');
    var iResolution = gl.getUniformLocation(program, 'iResolution');
    var iGlobalTime = gl.getUniformLocation(program, 'iGlobalTime');
    var iMouse = gl.getUniformLocation(program, 'iMouse');

    gl.vertexAttrib2f(aPosition, 0.0, 0.0);
    gl.uniform2f(iResolution, canvas.width, canvas.height);
    gl.uniform1f(iGlobalTime, 0.0);
    gl.uniform3f(iMouse, 0.0, 0.0, 0.0);
    
    tt.origin = gl.getUniformLocation(program, 'origin');

    // two triangles
    var positions = new Float32Array([
      -1.0, 1.0,
      -1.0, -1.0,
      1.0, 1.0,

      1.0, 1.0,
      -1.0, -1.0,
      1.0, -1.0
    ]);
    initBuffer(gl, positions, 2, aPosition);

    tt.render = function() {
      gl.drawArrays(gl.TRIANGLES, 0, 6);
    };
    
    tt.playing = options.playing || false;
    tt.draw = function(timestamp) {
      if (tt.playing) {
        requestAnimationFrame(tt.draw);
      }
      gl.uniform1f(iGlobalTime, timestamp / 1000);
      tt.render();
    }
    
    tt.playingControls = document.createElement("div");
    var playPauseButton = document.createElement("button");
    playPauseButton.textContent = "Play";
    playPauseButton.onclick = function(ev) {
      tt.togglePlaying();
    }
    tt.playingControls.appendChild(playPauseButton);
    
    tt.togglePlaying = function() {
      if (!tt.playing) {
        tt.playing = true;
        tt.draw();
      } else {
        tt.playing = false;
      }
      playPauseButton.textContent = tt.playing ? "Pause" : "Play";
    }
    
    window.addEventListener('keydown', function(ev) {
      if (ev.keyCode == 32 && document.activeElement != editor.el) { // Space
        ev.preventDefault();
        tt.togglePlaying();
      }
    });
    
    tt.direction = [0, 0, 1];
    tt.right = [-1, 0, 0];
    tt.angle = {horizontal: 0.0, vertical: 0.0};
    
    var iDirection = gl.getUniformLocation(program, 'iDirection');
    gl.uniform3f(iDirection, tt.direction[0], tt.direction[1], tt.direction[2]);
    
    var mousePressed = false;
    tt.canvas.addEventListener("mousedown", function(ev) { if (ev.button == 0) { mousePressed = true; }});
    tt.canvas.addEventListener("mouseup", function(ev) { mousePressed = false; });
    
    tt.canvas.addEventListener("mousemove", function(ev) {
      gl.uniform3f(iMouse, ev.clientX, canvas.clientHeight - ev.clientY, 0.0);
      
      if (!mousePressed || !iDirection) {
        return;
      }
      
      tt.angle.horizontal += 0.0001 * (tt.w/2 - ev.clientX);
      tt.angle.vertical += 0.0001 * (tt.h/2 - ev.clientY);
      tt.direction = [Math.cos(tt.angle.vertical) * Math.sin(tt.angle.horizontal),
                      Math.sin(tt.angle.vertical),
                      Math.cos(tt.angle.vertical) * Math.cos(tt.angle.horizontal)];
      tt.right = [Math.sin(tt.angle.horizontal - Math.PI/2),
                  0,
                  Math.cos(tt.angle.horizontal - Math.PI/2)];
      
      gl.uniform3f(iDirection, tt.direction[0], tt.direction[1], tt.direction[2]);

      requestAnimationFrame(tt.render);
    });
    
    window.addEventListener('keydown', function(ev) {
      if (document.activeElement != document.body || ev.ctrlKey || ev.altKey) {
        return;
      }
      
      var origin = tt.gl.getUniform(tt.program, tt.origin);
      
      switch (ev.keyCode) {
        case 38: // Up
        case 87: // W
          origin = [origin[0]+tt.direction[0], origin[1]+tt.direction[1], origin[2]+tt.direction[2]];
          break;
        case 37: // Left
        case 65: // A
          origin = [origin[0]-tt.right[0], origin[1]-tt.right[1], origin[2]-tt.right[2]];
          break;
        case 40: // Down
        case 83: // S
          origin = [origin[0]-tt.direction[0], origin[1]-tt.direction[1], origin[2]-tt.direction[2]];
          break;
        case 39: // Right
        case 68: // D
          origin = [origin[0]+tt.right[0], origin[1]+tt.right[1], origin[2]+tt.right[2]];
          break;
        default:
          return
      }
      
      ev.preventDefault();
      
      gl.uniform3f(tt.origin, origin[0], origin[1], origin[2]);
      requestAnimationFrame(tt.render);
    });
    
    window.onresize = function(ev) {
      tt.w = tt.canvas.width = window.innerWidth;
      tt.h = tt.canvas.height = window.innerHeight;
      gl.viewport(0, 0, tt.w, tt.h);
      gl.uniform2f(iResolution, tt.w, tt.h);
      tt.render();
    };
    
    tt.render();
    if (tt.playing) {
      tt.draw();
    }
    return tt;
  }
  
  var canvas = document.createElement("canvas");
  document.body.appendChild(canvas);
  
  var tt = TwoTriangles(canvas, files.open('default.frag').content);

  var sidebarEl = document.createElement("div");
  sidebarEl.id = "sidebar";
  document.body.appendChild(sidebarEl);
  
  var sliders = findSliders(tt.fragmentShaderSrc);
  initSliders(tt.gl, tt.program, sliders, function(ev) {
    requestAnimationFrame(tt.render);
  });
  addSliders(sidebarEl, sliders);
  
  sidebarEl.appendChild(tt.playingControls);
  
  tt.render();
  
  var editor = {};
  editor.el = document.createElement("textarea");
  editor.el.value = tt.fragmentShaderSrc;
  
  editor.el.onkeydown = function(ev) {
    try {
      if (ev.ctrlKey && ev.keyCode == 13) {
        tt = TwoTriangles(canvas, editor.el.value, {playing: tt.playing});

        sidebarEl.innerHTML = "";
        sliders = findSliders(tt.fragmentShaderSrc);
        initSliders(tt.gl, tt.program, sliders, function(ev) {
          // rerender if not in animation mode (otherwise `tt.draw` will already do that)
          if (!tt.playing) {
            requestAnimationFrame(tt.render);
          }
        });
        addSliders(sidebarEl, sliders);
        
        sidebarEl.appendChild(tt.playingControls);

        tt.render();
        clearError();
      }
    } catch (e) {
      displayError(e);
    }
  }
  
  editor.toggle = function() {
    if (editor.visible) {
      editor.container.style.display = "none";
    } else {
      editor.container.style.display = "inherit";
      editor.el.focus();
    }
    editor.visible = !editor.visible;
  }
  
  window.addEventListener('keydown', function(ev) {
    if (ev.ctrlKey && ev.keyCode == 69) { // Ctrl + e
      ev.preventDefault();
      editor.toggle();
    }
  });
  
  editor.ui = files.setupUI(editor.el);
  editor.container = document.createElement("div");
  editor.container.id = "editor";
  editor.visible = false;
  editor.container.style.display = "none";
  editor.container.appendChild(editor.ui);
  editor.container.appendChild(editor.el);
  
  document.body.appendChild(editor.container);
} catch (e) {
  displayError(e);
}