var gl;
var shaderProgram;
var aVertexPosition;

var centerOffsetX = 0;
var centerOffsetY = 0;

var zoom = 1;
var zoomCenterX = 0;
var zoomCenterY = 0;

var mouseX, mouseY;

var vertexPositionBuffer;


var baseCorners = [
  [ 0.7,  1.2],
  [-2.2,  1.2],
  [ 0.7, -1.2],
  [-2.2, -1.2],
];

var corners = [];

//------------------------------------------------------------------------

function initGL(canvas) {
    try {
      gl = canvas.getContext("webgl");
      gl.viewportWidth = canvas.width;
      gl.viewportHeight = canvas.height;
    } catch(e) {
    }
    if (!gl) {
      alert("Could not initialise WebGL, sorry :-(");
    }
}

function initBuffers() {
    vertexPositionBuffer = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, vertexPositionBuffer);
    var vertices = [
         1.0,  1.0,
        -1.0,  1.0,
         1.0, -1.0,
        -1.0, -1.0,
    ];
    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
    vertexPositionBuffer.itemSize = 2;
    vertexPositionBuffer.numItems = 4;
}

function getShader(gl, id) {
    var shaderScript = document.getElementById(id);
    if (!shaderScript) {
      return null;
    }

    var str = "";
    var k = shaderScript.firstChild;
    while (k) {
      if (k.nodeType == 3) {
        str += k.textContent;
      }
      k = k.nextSibling;
    }

    var shader;
    if (shaderScript.type == "x-shader/x-fragment") {
      shader = gl.createShader(gl.FRAGMENT_SHADER);
    } else if (shaderScript.type == "x-shader/x-vertex") {
      shader = gl.createShader(gl.VERTEX_SHADER);
    } else {
      return null;
    }

    gl.shaderSource(shader, str);
    gl.compileShader(shader);

    if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
      alert(gl.getShaderInfoLog(shader));
      return null;
    }

    return shader;
}

function initShaders() {
    var fragmentShader = getShader(gl, "shader-fs");
    var vertexShader = getShader(gl, "shader-vs");

    shaderProgram = gl.createProgram();
    gl.attachShader(shaderProgram, vertexShader);
    gl.attachShader(shaderProgram, fragmentShader);
    gl.linkProgram(shaderProgram);

    if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
      alert("Could not initialise shaders");
    }

    gl.useProgram(shaderProgram);

    aVertexPosition = gl.getAttribLocation(shaderProgram, "aVertexPosition");
    gl.enableVertexAttribArray(aVertexPosition);

    aPlotPosition = gl.getAttribLocation(shaderProgram, "aPlotPosition");
    gl.enableVertexAttribArray(aPlotPosition);
}

function drawScene() {
    gl.viewport(0, 0, gl.viewportWidth, gl.viewportHeight);
    gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

    gl.bindBuffer(gl.ARRAY_BUFFER, vertexPositionBuffer);
    gl.vertexAttribPointer(aVertexPosition, vertexPositionBuffer.itemSize, gl.FLOAT, false, 0, 0);


    var plotPositionBuffer = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, plotPositionBuffer);
    var cornerIx;
    corners = [];
    for (cornerIx in baseCorners) {
      x = baseCorners[cornerIx][0];
      y = baseCorners[cornerIx][1];
      corners.push(x / zoom + centerOffsetX);
      corners.push(y / zoom + centerOffsetY);
    }

    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(corners), gl.DYNAMIC_DRAW);
    gl.vertexAttribPointer(aPlotPosition, 2, gl.FLOAT, false, 0, 0);

    gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);

    gl.deleteBuffer(plotPositionBuffer);
}

function resetZoom() {
    zoom = 1.0;
    centerOffsetX = 0.5;
    centerOffsetY = 0.2;

    $("#zoomOutput").val(zoom);
    $("#zoomCenterXInput").val(zoomCenterX);
    $("#zoomCenterYInput").val(zoomCenterY);
    $("#centerOffsetXOutput").val(centerOffsetX);
    $("#centerOffsetYOutput").val(centerOffsetY);
}

function startFractalDraw() {
    resetZoom();

    var canvas = document.getElementById("my_canvas");
    initGL(canvas);
    initShaders()
    initBuffers();

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

    drawScene();
}

$(function() {
    startFractalDraw();

    var wnd = $(window);
    var canvas = $("#my_canvas");

    wnd.resize(function(e){
        canvas.height(wnd.height());

        var aspectRatio = 1.25;
        var ww = wnd.height() * aspectRatio
        canvas.width(ww);

        canvas.css('margin-left', (wnd.width() / 2 - ww / 2)+'px');

        gl.viewportWidth = canvas.width();
        gl.viewportHeight = canvas.height();

        drawScene();
    }).trigger('resize');

    $("#reset_zoom").click(function() {
        resetZoom();
        drawScene();
    });

    $('#my_canvas').mousewheel(function(event) {
        zoom *= (event.deltaY > 0) ? 1.02 : 0.98;
        $("#zoomOutput").val(zoom);
        $("#centerOffsetXOutput").val(centerOffsetX);
        $("#centerOffsetYOutput").val(centerOffsetY);
        drawScene();
    });

    $( "#my_canvas" ).mousemove(function( event ) {
        centerOffsetX = -2.2 + 2.9 * (event.pageX - $(this).offset().left) / $(this).width();
        centerOffsetY = 1.2 -  2.4 * (event.pageY - $(this).offset().top) / $(this).height();
        // console.log(zoomCenterX + "   " + zoomCenterY);
    });
});