var machine;

var render;

function main()

{

    var canvas = document.getElementById("machine");

    window.onresize = resize;

    var context = new Context(canvas);

    make_fullscreen(context);

    var gl = context.gl;

    var object = new Box(1, context);

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

    gl.enable(gl.DEPTH_TEST);

    machine = new Machine(object);

    render = new Render(context);

    render.draw(machine.scene);

}

function resize()

{

    make_fullscreen(machine.context);

    machine.draw();

}

function make_fullscreen(context)

{

    var width = window.innerWidth;

    var height = window.innerHeight;

    context.canvas.width = width;

    context.canvas.height = height;

    context.viewport.width = width;

    context.viewport.height = height;

}

function Render(context)

{

    this.context = context;

    this.gl = context.gl;

}

Render.prototype.draw = function(scene)

{ 

    var gl = this.context.gl;

    var viewport = this.context.viewport;

    var shader = this.context.shader;

    var mvMatrix = this.context.mvMatrix;

    var pMatrix = this.context.pMatrix;

    gl.viewport(0, 0, viewport.width, viewport.height);

    gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

    mat4.perspective(45, viewport.width / viewport.height, 0.1, 100.0, pMatrix);

    mat4.identity(mvMatrix);

    mat4.translate(mvMatrix, [0.0, 0.0, -7.0]);

    gl.bindBuffer(gl.ARRAY_BUFFER, scene.positionBuffer);

    gl.vertexAttribPointer(shader.vertexPosition, scene.positionBuffer.itemSize, gl.FLOAT, false, 0, 0);

    gl.bindBuffer(gl.ARRAY_BUFFER, scene.colourBuffer);

    gl.vertexAttribPointer(shader.vertexColour, scene.colourBuffer.itemSize, gl.FLOAT, false, 0, 0);

    this.context.updateMatrixUniforms();

    gl.drawArrays(gl.TRIANGLE_STRIP, 0, scene.positionBuffer.numItems);

    if (this.next) this.next.draw(scene);

}

function Machine(scene)

{

    this.scene = scene;

}

Machine.prototype.draw = function(render)

{

    render.draw(this.scene);

}

function Context(canvas)

{

    this.canvas = canvas;

    try 

    {

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

	this.viewport = {'width': canvas.width,

			 'height': canvas.height};

    } 

    catch(e) 

    {

	alert(e);

    }

    if (!this.gl) alert("Failed: WebGL init.");

    this.mvMatrix = mat4.create();

    this.pMatrix = mat4.create();

    this.shader = new Shader(this);    

}

Context.prototype.updateMatrixUniforms = function()

{

    var gl = this.gl;

    var program = this.shader;

    var pMatrix = this.pMatrix;

    var mvMatrix = this.mvMatrix;

    gl.uniformMatrix4fv(program.pMatrixUniform, false, pMatrix);

    gl.uniformMatrix4fv(program.mvMatrixUniform, false, mvMatrix);

}

function Shader(context)

{

    var gl = context.gl;

    var fragment = load_shader(gl, "fragment-shader");

    var vertex = load_shader(gl, "vertex-shader");

    this.program = gl.createProgram();

    gl.attachShader(this.program, vertex);

    gl.attachShader(this.program, fragment);

    gl.linkProgram(this.program);

    if (!gl.getProgramParameter(this.program, gl.LINK_STATUS))

    {

	alert("Failed: Shader init.");

    }

    gl.useProgram(this.program);

    this.vertexPosition = gl.getAttribLocation(this.program, "aVertexPosition");

    gl.enableVertexAttribArray(this.vertexPosition);

    this.vertexColour = gl.getAttribLocation(this.program, "aVertexColour");

    gl.enableVertexAttribArray(this.vertexColour);

    this.pMatrixUniform = gl.getUniformLocation(this.program, "uPMatrix");

    this.mvMatrixUniform = gl.getUniformLocation(this.program, "uMVMatrix");

    function load_shader(gl, id)

    {

	var script = document.getElementById(id);

	if (!script) return null;

	var str = "";

	var child = script.firstChild;

	while (child)

	{

	    if (child.nodeType == 3) str += child.textContent;

	    child = child.nextSibling;

	}

	var shader;

	var common = "x-shader/x-";

	if (script.type == common + "fragment") shader = gl.createShader(gl.FRAGMENT_SHADER);

	else if (script.type == common + "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 Box(size, context)

{

    var gl = context.gl;

    this.size = size || 1;

    this.positionBuffer = gl.createBuffer();

    gl.bindBuffer(gl.ARRAY_BUFFER, this.positionBuffer);

    var vertices = [1.0, 1.0, 0.0,

		    -1.0, 1.0, 0.0,

		    1.0, -1.0, 0.0,

		    -1.0, -1.0, 0.0];

    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);

    this.positionBuffer.itemSize = 3;

    this.positionBuffer.numItems = 4;

    this.colourBuffer = gl.createBuffer();

    gl.bindBuffer(gl.ARRAY_BUFFER, this.colourBuffer);

    var colours = [1.0, 0.0, 0.0, .5,

		   0.0, 1.0, 0.0, .5,

		   0.0, 0.0, 1.0, .5,

		   1.0, 0.0, 1.0, .5];

    //colours = [];

    for (var i = 0; i < 4; i++)

    {

	//	colours = colours.concat([0.5, 0.5, 1.0, 1.0]);

    }

    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(colours), gl.STATIC_DRAW);

    this.colourBuffer.itemSize = 4;

    this.colourBuffer.numItems = 4;

}