'use strict';
window.addEventListener("load",()=>{
	const canvas = document.getElementById('canvas');
	let gl = null;
	try {
		gl = canvas.getContext("webgl");
	}catch(e){}
		
	if(!gl)try {
		gl = canvas.getContext("experimental-webgl");
	}catch(e){}
	
	if(!gl)try {
		gl = canvas.getContext("moz-webgl");
	}catch(e){}
	
	if(!gl)try {
		gl = canvas.getContext("webkit-3d");
	}catch(e){}
	
	if(!gl) {
		throw new Error("Unable to initialize WebGL. Your browser may not support it.");
	}
	
	const vertexShader = gl.createShader(gl.VERTEX_SHADER);
	gl.shaderSource(vertexShader, document.getElementById("vertex").text);
	gl.compileShader(vertexShader);
	if (!gl.getShaderParameter(vertexShader, gl.COMPILE_STATUS)) {
		throw new Error("An error occurred compiling the shaders: " + gl.getShaderInfoLog(vertexShader));
	}
	
	const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
	gl.shaderSource(fragmentShader, document.getElementById("fragment").text);
	gl.compileShader(fragmentShader);
	if (!gl.getShaderParameter(fragmentShader, gl.COMPILE_STATUS)) {
		throw new Error("An error occurred compiling the shaders: " + gl.getShaderInfoLog(fragmentShader));
	}
	
	const shaderProgram = gl.createProgram();
	gl.attachShader(shaderProgram, vertexShader);
	gl.attachShader(shaderProgram, fragmentShader);
	gl.linkProgram(shaderProgram);
	if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
		throw new Error("Unable to initialize the shader program.");
	}
	gl.useProgram(shaderProgram);
	
	const aVertex = gl.getAttribLocation(shaderProgram, "aVertex");
	gl.enableVertexAttribArray(aVertex);
	
	const aUVCoords = gl.getAttribLocation(shaderProgram, "aUVCoords");
	gl.enableVertexAttribArray(aUVCoords);
	
	const uSampler = gl.getUniformLocation(shaderProgram, "uSampler");
	const uRotate = gl.getUniformLocation(shaderProgram, "uRotate");
	
	const vertexBuffer = gl.createBuffer();
	const vertexData = new Float32Array([
		 0.5,  0.5,
		-0.5,  0.5,
		 0.5, -0.5,
		-0.5, -0.5
	]);
	gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
	gl.bufferData(gl.ARRAY_BUFFER, vertexData, gl.STATIC_DRAW);
	gl.vertexAttribPointer(aVertex, 2, gl.FLOAT, false, 0, 0);
	
	const uvBuffer = gl.createBuffer();
	const uvData = new Float32Array([
		1.0,  0.0,
		0.0,  0.0,
		1.0,  1.0,
		0.0,  1.0
	]);
	gl.bindBuffer(gl.ARRAY_BUFFER, uvBuffer);
	gl.bufferData(gl.ARRAY_BUFFER, uvData, gl.STATIC_DRAW);
	gl.vertexAttribPointer(aUVCoords, 2, gl.FLOAT, false, 0, 0);
					
	const image = document.getElementById("image");
	const texture = gl.createTexture();
	gl.bindTexture(gl.TEXTURE_2D, texture);
	gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image);
	gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
	gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
	gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
	gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
	gl.generateMipmap(gl.TEXTURE_2D);
	gl.bindTexture(gl.TEXTURE_2D, null);
	
	gl.uniform1i(uSampler, 0);
	gl.activeTexture(gl.TEXTURE0);
	gl.bindTexture(gl.TEXTURE_2D, texture);
					
	gl.enable(gl.BLEND);
	gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
	
	const repaint = ()=>{
		const t = Date.now() * 0.001;
		gl.clearColor(Math.cos(t), Math.cos(t * 1.1), Math.cos(t * 1.2), 1.0);
		gl.clear(gl.COLOR_BUFFER_BIT);
		gl.uniform2f(uRotate, Math.cos(t), Math.sin(t));
		gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
		requestAnimationFrame(repaint);
	};
	requestAnimationFrame(repaint);
});