const img = new Image();
img.crossOrigin = "";

// thanks to Ken Cheung https://unsplash.com/photos/KonWFWUaAuk
img.src = `https://images.unsplash.com/photo-1494500764479-0c8f2919a3d8?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=${window.innerWidth}&q=80`;

img.onload = () => {
	// assume this runs all the code we've been writing so far
	initializeWebGLStuff();
};

function initializeWebGLStuff() {
	const canvas = document.querySelector('canvas');
  
  // have the canvas dimensions match the actual image dimensions for best quality
  canvas.width = img.width;
  canvas.height = img.height;
  
	const gl = canvas.getContext('webgl');

	const vertexShaderSource = `
	attribute vec2 points;
	attribute vec2 texture_coordinate;

	varying highp vec2 v_texture_coordinate;

	void main(void) {
		gl_Position = vec4(points, 0.0, 1.0);
		v_texture_coordinate = texture_coordinate;
	}
`;

	const fragmentShaderSource = `
	precision highp float;
	varying highp vec2 v_texture_coordinate;
	uniform sampler2D sampler;

	void main() {
		gl_FragColor = texture2D(sampler, v_texture_coordinate);
	}
`;
	// create a program (which we'll access later)
	const program = gl.createProgram();

	// create a new vertex shader and a fragment shader
	const vertexShader = gl.createShader(gl.VERTEX_SHADER);
	const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);

	// specify the source code for the shaders using those strings
	gl.shaderSource(vertexShader, vertexShaderSource);
	gl.shaderSource(fragmentShader, fragmentShaderSource);

	// compile the shaders
	gl.compileShader(vertexShader);
	gl.compileShader(fragmentShader);

	// attach the two shaders to the program
	gl.attachShader(program, vertexShader);
	gl.attachShader(program, fragmentShader);
	gl.linkProgram(program);
	gl.useProgram(program);
	if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
		console.error(gl.getProgramInfoLog(program));
	}

	const points = [
		// first triangle
		// top left
		-1, -1,

		// top right
		1, -1,

		// bottom left
		-1, 1,

		// second triangle
		// bottom right
		1, 1,

		// top right
		1, -1,

		// bottom left
		-1, 1,
	];

	// create a buffer
	const buffer = gl.createBuffer();

	// activate the buffer, and specify that it contains an array
	gl.bindBuffer(gl.ARRAY_BUFFER, buffer);

	// upload the points array to the active buffer
	// gl.STATIC_DRAW tells the GPU this data won't change
	gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(points), gl.STATIC_DRAW);

	// get the location of our "points" attribute in our shader program
	const location = gl.getAttribLocation(program, 'points');

	// pull out pairs of float numbers from the active buffer
	// each pair is a vertex that will be available in our vertex shader
	gl.vertexAttribPointer(location, 2, gl.FLOAT, false, 0, 0);

	// enable the attribute in the program
	gl.enableVertexAttribArray(location);

	// create a new texture
	const texture = gl.createTexture();

	// specify that our texture is 2-dimensional
	gl.bindTexture(gl.TEXTURE_2D, texture);

	// upload the 2D image (img) and specify that it contains RGBA data
	gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, img);

	// tell WebGL how to choose pixels when drawing our non-square image
	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.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);

	// bind this texture to texture #0
	gl.activeTexture(gl.TEXTURE0);
	gl.bindTexture(gl.TEXTURE_2D, texture);

	// use the texture for the uniform in our program called "sampler",
	gl.uniform1i(gl.getUniformLocation(program, 'sampler'), 0);

	const textureCoordinates = [
		// first triangle
		// top left
		0, 1,

		// top right
		1, 1,

		// bottom left
		0, 0,

		// second triangle
		// bottom right
		1, 0,

		// top right
		1, 1,

		// bottom left
		0, 0,
	];

	// same stuff we did earlier, but passing different numbers
	const textureCoordinateBuffer = gl.createBuffer();
	gl.bindBuffer(gl.ARRAY_BUFFER, textureCoordinateBuffer);
	gl.bufferData(
		gl.ARRAY_BUFFER,
		new Float32Array(textureCoordinates),
		gl.STATIC_DRAW
	);

	// and associating it with a different attribute
	const textureCoordinateLocation = gl.getAttribLocation(
		program,
		'texture_coordinate'
	);
	gl.vertexAttribPointer(textureCoordinateLocation, 2, gl.FLOAT, false, 0, 0);
	gl.enableVertexAttribArray(textureCoordinateLocation);

	gl.drawArrays(gl.TRIANGLES, 0, 6);
}