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;

 }