var program;
var gl;

function checkerboardImage(texSize) {
  var image1 = new Array()
  for (var i =0; i<texSize; i++) { image1[i] = new Array(); }
  for (var i =0; i<texSize; i++) {
      for ( var j = 0; j < texSize; j++) {
        image1[i][j] = new Float32Array(4);
      }
  }
  for (var i =0; i<texSize; i++) for (var j=0; j<texSize; j++) {
      var c = (((i & 0x8) == 0) ^ ((j & 0x8)  == 0));
      image1[i][j] = [c, c, c, 1];
  }

  // Convert floats to ubytes for texture
  var image2 = new Uint8Array(4*texSize*texSize);
  for ( var i = 0; i < texSize; i++ ) {
    for ( var j = 0; j < texSize; j++ ) {
      for(var k =0; k<4; k++) {
        image2[4*texSize*i+4*j+k] = 255*image1[i][j][k];
      }
    }
  }
  
  return image2;
}


function configureTexture( image, isImage, texSize ) {
    texture = gl.createTexture();
    gl.bindTexture( gl.TEXTURE_2D, texture );
    gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);
    if (isImage) {
      gl.texImage2D( gl.TEXTURE_2D, 0, gl.RGB, 
           gl.RGB, gl.UNSIGNED_BYTE, image ); 
    } else {
      gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, texSize, texSize, 0, 
        gl.RGBA, gl.UNSIGNED_BYTE, image);
    } 
    gl.generateMipmap( gl.TEXTURE_2D );
    gl.texParameteri( gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, 
                      gl.LINEAR_MIPMAP_LINEAR );
    gl.texParameteri( gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR );
    
    gl.uniform1i(gl.getUniformLocation(program, "texture"), 0);
}


  // Three Vertices 
  var vertices = [
    vec2(-1, -1),
    vec2(1, -1),
    vec2(0, 1)
  ];

  var texCoords = [
    vec2(0, 0),
    vec2(1, 0),
    vec2(.5, 1)
  ];


function init() {
  var canvas = document.getElementById("gl-canvas");
  gl = WebGLUtils.setupWebGL(canvas);
  if (!gl) {
    alert("WebGL isn't available");
  }

  //  Configure WebGL
  gl.viewport(0, 0, canvas.width, canvas.height);
  gl.clearColor(1.0, 1.0, 1.0, 1.0);

  //  Load shaders and initialize attribute buffers
  program = initShaders(gl, "vertex-shader", "fragment-shader");
  gl.useProgram(program);

  // Load the data into the GPU
  var bufferId = gl.createBuffer();
  gl.bindBuffer(gl.ARRAY_BUFFER, bufferId);
  gl.bufferData(gl.ARRAY_BUFFER, flatten(vertices), gl.STATIC_DRAW);

  // Associate out shader variables with our data buffer
  var vPosition = gl.getAttribLocation(program, "vPosition");
  gl.vertexAttribPointer(vPosition, 2, gl.FLOAT, false, 0, 0);
  gl.enableVertexAttribArray(vPosition);
  
    // Configure texture buffers
  var tBuffer = gl.createBuffer();
  gl.bindBuffer( gl.ARRAY_BUFFER, tBuffer );
  gl.bufferData( gl.ARRAY_BUFFER, flatten(texCoords), gl.STATIC_DRAW );
    
  var vTexCoord = gl.getAttribLocation( program, "vTexCoord" );
  gl.vertexAttribPointer( vTexCoord, 2, gl.FLOAT, false, 0, 0 );
  gl.enableVertexAttribArray( vTexCoord );

    // Option 3: Generate texture image procedurally
  var image2 = checkerboardImage(128);
  configureTexture( image2, 0, 128 );
  
  render();
};

function render() {
  gl.clear(gl.COLOR_BUFFER_BIT);
  gl.drawArrays(gl.TRIANGLES, 0, 3);
  requestAnimFrame(render);
}

init();