text: "use strict";
  
  var canvas;
  var gl;
  
  var program;
  
  var numPositions = 36;
  
  var pointsArray = [];
  var colorsArray = [];
  
  var framebuffer;
  
  var flag = true;
  
  var color = new Uint8Array(4);
  
  var vertices = [
          vec4(-0.5, -0.5,  0.5, 1.0),
          vec4(-0.5,  0.5,  0.5, 1.0),
          vec4(0.5,  0.5,  0.5, 1.0),
          vec4(0.5, -0.5,  0.5, 1.0),
          vec4(-0.5, -0.5, -0.5, 1.0),
          vec4(-0.5,  0.5, -0.5, 1.0),
          vec4(0.5,  0.5, -0.5, 1.0),
          vec4(0.5, -0.5, -0.5, 1.0),
      ];
  
  var vertexColors = [
          vec4(0.0, 0.0, 0.0, 1.0),  // black
          vec4(1.0, 0.0, 0.0, 1.0),  // red
          vec4(1.0, 1.0, 0.0, 1.0),  // yellow
          vec4(0.0, 1.0, 0.0, 1.0),  // green
          vec4(0.0, 0.0, 1.0, 1.0),  // blue
          vec4(1.0, 0.0, 1.0, 1.0),  // magenta
          vec4(1.0, 1.0, 1.0, 1.0),  // white
          vec4(0.0, 1.0, 1.0, 1.0),   // cyan
      ];
  
  var xAxis = 0;
  var yAxis = 1;
  var zAxis = 2;
  var axis = xAxis;
  
  var theta = vec3(45.0, 45.0, 45.0);
  
  var thetaLoc;
  
  function quad(a, b, c, d) {
       pointsArray.push(vertices[a]);
       colorsArray.push(vertexColors[a]);
       pointsArray.push(vertices[b]);
       colorsArray.push(vertexColors[b]);
       pointsArray.push(vertices[c]);
       colorsArray.push(vertexColors[c]);
       pointsArray.push(vertices[a]);
       colorsArray.push(vertexColors[a]);
       pointsArray.push(vertices[c]);
       colorsArray.push(vertexColors[c]);
       pointsArray.push(vertices[d]);
       colorsArray.push(vertexColors[d]);
  }
  
  function colorCube()
  {
      quad(1, 0, 3, 2);
      quad(2, 3, 7, 6);
      quad(3, 0, 4, 7);
      quad(6, 5, 1, 2);
      quad(4, 5, 6, 7);
      quad(5, 4, 0, 1);
  }
  
  
  window.onload = function init() {
      canvas = document.getElementById("gl-canvas");
  
      gl = canvas.getContext('webgl2');
      if (!gl) alert("WebGL 2.0 isn't available");
  
      gl.viewport(0, 0, canvas.width, canvas.height);
      gl.clearColor(0.5, 0.5, 0.5, 1.0);
  
      gl.enable(gl.CULL_FACE);
  
      var texture = gl.createTexture();
      gl.bindTexture(gl.TEXTURE_2D, texture);
      gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);
      gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 512, 512, 0,
         gl.RGBA, gl.UNSIGNED_BYTE, null);
      gl.generateMipmap(gl.TEXTURE_2D);
  
  // Allocate a frame buffer object
  
     framebuffer = gl.createFramebuffer();
     gl.bindFramebuffer( gl.FRAMEBUFFER, framebuffer);
  
  // Attach color buffer
  
     gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, texture, 0);
  
  // check for completeness
  
     //var status = gl.checkFramebufferStatus(gl.FRAMEBUFFER);
     //if(status != gl.FRAMEBUFFER_COMPLETE) alert('Frame Buffer Not Complete');
  
  gl.bindFramebuffer(gl.FRAMEBUFFER, null);
  
      //
      //  Load shaders and initialize attribute buffers
      //
      program = initShaders( gl, "vertex-shader", "fragment-shader" );
      gl.useProgram(program);
  
      colorCube();
  
      var cBuffer = gl.createBuffer();
      gl.bindBuffer(gl.ARRAY_BUFFER, cBuffer);
      gl.bufferData(gl.ARRAY_BUFFER, flatten(colorsArray), gl.STATIC_DRAW);
  
      var colorLoc = gl.getAttribLocation(program, "aColor");
      gl.vertexAttribPointer(colorLoc, 4, gl.FLOAT, false, 0, 0);
      gl.enableVertexAttribArray(colorLoc);
  
      var vBuffer = gl.createBuffer();
      gl.bindBuffer(gl.ARRAY_BUFFER, vBuffer);
      gl.bufferData(gl.ARRAY_BUFFER, flatten(pointsArray), gl.STATIC_DRAW);
  
      var positionLoc = gl.getAttribLocation(program, "aPosition");
      gl.vertexAttribPointer(positionLoc, 4, gl.FLOAT, false, 0, 0);
      gl.enableVertexAttribArray(positionLoc);
  
      thetaLoc = gl.getUniformLocation(program, "uTheta");
  
      document.getElementById("ButtonX").onclick = function(){axis = xAxis;};
      document.getElementById("ButtonY").onclick = function(){axis = yAxis;};
      document.getElementById("ButtonZ").onclick = function(){axis = zAxis;};
      document.getElementById("ButtonT").onclick = function(){flag = !flag};
  
      canvas.addEventListener("mousedown", function(event){
  
          gl.bindFramebuffer(gl.FRAMEBUFFER, framebuffer);
          gl.clear( gl.COLOR_BUFFER_BIT);
          gl.uniform3fv(thetaLoc, theta);
          for(var i=0; i<6; i++) {
              gl.uniform1i(gl.getUniformLocation(program, "uColorIndex"), i+1);
              gl.drawArrays( gl.TRIANGLES, 6*i, 6 );
          }
          var x = event.clientX;
          var y = canvas.height -event.clientY;
  
          gl.readPixels(x, y, 1, 1, gl.RGBA, gl.UNSIGNED_BYTE, color);
  
          if(color[0]==255)
          if(color[1]==255) console.log("yellow");
          else if(color[2]==255) console.log("magenta");
          else console.log("red");
          else if(color[1]==255)
          if(color[2]==255) console.log("cyan");
          else console.log("green");
          else if(color[2]==255) console.log("blue");
          else console.log("background");
          gl.bindFramebuffer(gl.FRAMEBUFFER, null);
  
          gl.uniform1i(gl.getUniformLocation(program, "uColorIndex"), 0);
          gl.clear(gl.COLOR_BUFFER_BIT);
          gl.uniform3fv(thetaLoc, theta);
          gl.drawArrays(gl.TRIANGLES, 0, 36);
      });
  
      render();
  }
  
  var render = function(){
      gl.clear(gl.COLOR_BUFFER_BIT);
      if(flag) theta[axis] += 2.0;
      gl.uniform3fv(thetaLoc, theta);
      gl.uniform1i(gl.getUniformLocation(program, "uColorIndex"),0);
      gl.drawArrays(gl.TRIANGLES, 0, numPositions);
  
      requestAnimationFrame(render);
  }
  