/**
 * @file A simple WebGL example drawing a circle
 * @author Eric Shaffer <shaffer1@illinois.edu>
 */

/** @global The WebGL context */
var gl;

/** @global The HTML5 canvas we draw on */
var canvas;

/** @global A simple GLSL shader program */
var shaderProgram;

/** @global The WebGL buffer holding the triangle */
var vertexPositionBuffer;

/** @global The WebGL buffer holding the vertex colors */
var vertexColorBuffer;

/** @global The Modelview matrix */
var mvMatrix = mat4.create();

/** @global The Projection matrix */
var pMatrix = mat4.create();

/** @global The angle of rotation around the x axis */
var defAngle = 0;

/** @global Number of vertices around the circle boundary */
var numCircleVerts = 100;

/** @global Two times pi to save some multiplications...*/
var twicePi=2.0*3.14159;

//----------------------------------------------------------------------------------
/**
 * Sends projection/modelview matrices to shader
 */
function setMatrixUniforms() {
		gl.uniformMatrix4fv(shaderProgram.mvMatrixUniform, false, mvMatrix);
		gl.uniformMatrix4fv(shaderProgram.pMatrixUniform, false, pMatrix);
}

/**
 * Translates degrees to radians
 * @param {Number} degrees Degree input to function
 * @return {Number} The radians that correspond to the degree input
 */
function degToRad(degrees) {
				return degrees * Math.PI / 180;
}


/**
 * Creates a context for WebGL
 * @param {element} canvas WebGL canvas
 * @return {Object} WebGL context
 */
function createGLContext(canvas) {
	var names = ["webgl", "experimental-webgl"];
	var context = null;
	for (var i=0; i < names.length; i++) {
		try {
			context = canvas.getContext(names[i]);
		} catch(e) {}
		if (context) {
			break;
		}
	}
	if (context) {
		context.viewportWidth = canvas.width;
		context.viewportHeight = canvas.height;
	} else {
		alert("Failed to create WebGL context!");
	}
	return context;
}

/**
 * Loads Shaders
 * @param {string} id ID string for shader to load. Either vertex shader/fragment shader
 */
function loadShaderFromDOM(id) {
	var shaderScript = document.getElementById(id);

	// If we don't find an element with the specified id
	// we do an early exit
	if (!shaderScript) {
		return null;
	}

	// Loop through the children for the found DOM element and
	// build up the shader source code as a string
	var shaderSource = "";
	var currentChild = shaderScript.firstChild;
	while (currentChild) {
		if (currentChild.nodeType == 3) { // 3 corresponds to TEXT_NODE
			shaderSource += currentChild.textContent;
		}
		currentChild = currentChild.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, shaderSource);
	gl.compileShader(shader);

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

/**
 * Setup the fragment and vertex shaders
 */
function setupShaders() {
	vertexShader = loadShaderFromDOM("shader-vs");
	fragmentShader = loadShaderFromDOM("shader-fs");

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

	if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
		alert("Failed to setup shaders");
	}

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

	shaderProgram.vertexColorAttribute = gl.getAttribLocation(shaderProgram, "aVertexColor");
	gl.enableVertexAttribArray(shaderProgram.vertexColorAttribute);
	shaderProgram.mvMatrixUniform = gl.getUniformLocation(shaderProgram, "uMVMatrix");
	shaderProgram.pMatrixUniform = gl.getUniformLocation(shaderProgram, "uPMatrix");
}

/**
 * Populate buffers with data
	 @param {number} number of vertices to use around the circle boundary
 */
function setupBuffers() {

	vertexPositionBuffer = gl.createBuffer();
	gl.bindBuffer(gl.ARRAY_BUFFER, vertexPositionBuffer);
	var triangleVertices = [
	 // top of the I
	   -0.6,  1.0,  0.0,
	   -0.6,  0.6,  0.0,
	   -0.2,  0.6,  0.0,

	   -0.6,  1.0,  0.0,
	   -0.2,  0.6,  0.0,
		0.6,  1.0,  0.0,

	   -0.2,  0.6,  0.0,
		0.2,  0.6,  0.0,
		0.6,  1.0,  0.0,

		0.2,  0.6,  0.0,
		0.6,  0.6,  0.0,
		0.6,  1.0,  0.0,

	 // middle of the I
	   -0.2,  0.6,  0.0,
		0.2,  0.6,  0.0,
	   -0.2, -0.6,  0.0,

		0.2,  0.6,  0.0,
	   -0.2, -0.6,  0.0,
		0.2, -0.6,  0.0,

	 // bottom of the I
	   -0.6, -1.0,  0.0,
	   -0.6, -0.6,  0.0,
	   -0.2, -0.6,  0.0,

	   -0.6, -1.0,  0.0,
	   -0.2, -0.6,  0.0,
		0.6, -1.0,  0.0,

	   -0.2, -0.6,  0.0,
		0.2, -0.6,  0.0,
		0.6, -1.0,  0.0,

		0.2, -0.6,  0.0,
		0.6, -0.6,  0.0,
		0.6, -1.0,  0.0,
	];

	gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(triangleVertices), gl.DYNAMIC_DRAW);
	vertexPositionBuffer.itemSize = 3;
	vertexPositionBuffer.numberOfItems = 30;

	vertexColorBuffer = gl.createBuffer();
	gl.bindBuffer(gl.ARRAY_BUFFER, vertexColorBuffer);
	var colors = [
		// top of the I
		0.91, 0.29, 0.15, 1.0,
		0.07, 0.16, 0.29, 1.0,
		0.07, 0.16, 0.29, 1.0,

		0.91, 0.29, 0.15, 1.0,
		0.07, 0.16, 0.29, 1.0,
		0.91, 0.29, 0.15, 1.0,

		0.07, 0.16, 0.29, 1.0,
		0.07, 0.16, 0.29, 1.0,
		0.91, 0.29, 0.15, 1.0,

		0.07, 0.16, 0.29, 1.0,
		0.07, 0.16, 0.29, 1.0,
		0.91, 0.29, 0.15, 1.0,

		// middle of the I
		0.07, 0.16, 0.29, 1.0,
		0.07, 0.16, 0.29, 1.0,
		0.91, 0.29, 0.15, 1.0,

		0.07, 0.16, 0.29, 1.0,
		0.91, 0.29, 0.15, 1.0,
		0.91, 0.29, 0.15, 1.0,

		// bottom of the I
		0.07, 0.16, 0.29, 1.0,
		0.91, 0.29, 0.15, 1.0,
		0.91, 0.29, 0.15, 1.0,

		0.07, 0.16, 0.29, 1.0,
		0.91, 0.29, 0.15, 1.0,
		0.07, 0.16, 0.29, 1.0,

		0.91, 0.29, 0.15, 1.0,
		0.91, 0.29, 0.15, 1.0,
		0.07, 0.16, 0.29, 1.0,

		0.91, 0.29, 0.15, 1.0,
		0.91, 0.29, 0.15, 1.0,
		0.07, 0.16, 0.29, 1.0
		];
	gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(colors), gl.STATIC_DRAW);
	vertexColorBuffer.itemSize = 4;
	vertexColorBuffer.numItems = 30;
}

/**
 * Draw call that applies matrix transformations to model and draws model in frame
 */
function draw() {
	gl.viewport(0, 0, gl.viewportWidth, gl.viewportHeight);
	gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

	mat4.identity(mvMatrix);
	mat4.identity(pMatrix);

	mat4.ortho(pMatrix,-1,1,-1,1,1,-1);


	gl.bindBuffer(gl.ARRAY_BUFFER, vertexPositionBuffer);
	gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute,
												vertexPositionBuffer.itemSize, gl.FLOAT, false, 0, 0);
	gl.bindBuffer(gl.ARRAY_BUFFER, vertexColorBuffer);
	gl.vertexAttribPointer(shaderProgram.vertexColorAttribute,
												vertexColorBuffer.itemSize, gl.FLOAT, false, 0, 0);

	setMatrixUniforms();
	gl.drawArrays(gl.TRIANGLES, 0, vertexPositionBuffer.numberOfItems);
}

/**
 * Animation to be called from tick. Updates globals and performs animation for each tick.
 */
function animate() {
		defAngle= (defAngle+1.0) % 360;
		loadVertices(numCircleVerts);
}

/**
 * Startup function called from html code to start program.
 */
 function startup() {
	canvas = document.getElementById("myGLCanvas");
	gl = createGLContext(canvas);
	setupShaders();
	setupBuffers();
	gl.clearColor(0.0, 0.0, 0.0, 1.0);
	gl.enable(gl.DEPTH_TEST);
	tick();
	//draw();
}

/**
 * Tick called for every animation frame.
 */
function tick() {
		requestAnimFrame(tick);
		draw();
		animate();
}

function deformSin(x,y,angle) {
	var circPt = vec2.fromValues(x,y);
	var dist = 0.2*Math.sin((angle)+degToRad(defAngle));
	vec2.normalize(circPt,circPt);
	vec2.scale(circPt,circPt,dist);
	return circPt;
}