;(function() {
    "use strict"
    var gl, canvas, program, buffer;
    var attributeLocation;
    var timeLocation, resolutionLocation;

    window.addEventListener("load", initWebGL, false);

    function getRenderingContext() {
        canvas = document.querySelector("canvas");
        canvas.width = canvas.clientWidth;
        canvas.height = canvas.clientHeight;

        var gl = canvas.getContext("webgl") || canvas.getContext("experimental-webgl");

        if (!gl) {
            // TODO: show something fancy
            console.log("failed to get webcontext");
            return null;
        }

        gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);

        return gl;
    };

    function render(time) {
        gl.viewport(0, 0, canvas.width, canvas.height);

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

        gl.useProgram(program);

        gl.enableVertexAttribArray(attributeLocation);
        gl.vertexAttribPointer(attributeLocation, 2, gl.FLOAT, false, 0, 0);

        gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
        gl.uniform2f(resolutionLocation, canvas.width, canvas.height);
        gl.uniform1f(timeLocation, time * 0.001);

        gl.drawArrays(gl.TRIANGLES, 0, 6);

        window.requestAnimationFrame(render, canvas);
    }

    function initAttributes() {
        buffer = gl.createBuffer();
        gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
        gl.bufferData(
            gl.ARRAY_BUFFER,
            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,
            ]),
            gl.STATIC_DRAW);
    }

    function initWebGL(event) {
        window.removeEventListener(event.type, initWebGL, false);

        if (!(gl = getRenderingContext()))
            return;

        initAttributes();

        var vertexSource =
            `attribute vec2 a_position;
             void main() { gl_Position = vec4(a_position, 0, 1);}`;

        var vertexShader = gl.createShader(gl.VERTEX_SHADER);

        gl.shaderSource(vertexShader, vertexSource);
        gl.compileShader(vertexShader);

        var wavesSource = document.querySelector('#waves').text;
        var wavesShader = gl.createShader(gl.FRAGMENT_SHADER);

        gl.shaderSource(wavesShader, wavesSource);
        gl.compileShader(wavesShader);

        var compilationLog = gl.getShaderInfoLog(wavesShader);

        // TODO: show link/compile errors?

        program = gl.createProgram();

        gl.attachShader(program, vertexShader);
        gl.attachShader(program, wavesShader);

        gl.linkProgram(program);
        gl.useProgram(program);

        attributeLocation = gl.getAttribLocation(program, "a_position");

        timeLocation = gl.getUniformLocation(program, "iTime");
        resolutionLocation = gl.getUniformLocation(program, "iResolution");

        render();
    };
})();