var container, stats;
var camera, controls, scene, renderer;
var mesh, texture, material;
var worldWidth = 256, worldDepth = 256, worldHalfWidth = worldWidth / 2, worldHalfDepth = worldDepth / 2;
var textureURL, heightmapURL;
var textureFile = 'img/test2.gif'; //texture doesn't need resizing
var heightmapFile = 'img/testnew.png';
var pos_x, pos_y, pos_z, rot_x, rot_y, rot_z;
var wf = false;


function runWebGLSimulation(){
	//Detect WebGL
	if (!Detector.webgl) {
		Detector.addGetWebGLMessage();
		document.getElementById('container').innerHTML = "";
	}

	//Start Graphics
	initGraphics(function(){ animate() });
	//Start Scene Animation
}

function initGraphics(cb) {

	container = document.getElementById('container');
	
	//Set camera
	camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 20000);
	
	//Set scene
	scene = new THREE.Scene();
	
	//Get heightmap data
	//Generates the heightmap data from the heightmap image
	var size = worldWidth * worldDepth, data = new Float32Array(size);

	var canvas = document.createElement('canvas');
	canvas.width = worldWidth;
	canvas.height = worldDepth;
	context = canvas.getContext('2d');
	context.fillStyle = '#000';
	context.fillRect(0, 0, worldWidth, worldDepth);

	var img = new Image();
	img.src = heightmapFile;

//FIXME
  img.onload = function(){
    context.drawImage(img, 0, 0);
    image = context.getImageData(0, 0, worldWidth, worldDepth);
    var imageData = image.data;
    var pixels = size;
    for (var i=0; i<pixels; i++){
      // Get RGB
      red = imageData[4 * i + 0];
      green = imageData[4 * i + 1];
      blue = imageData[4 * i + 2];
      // Get grayscale
      gray = (red + green + blue) / 3;
      // Put heightmap value
      data[i] = gray;
    }

    //Set camera position
    camera.position.y = data[worldHalfWidth + worldHalfDepth * worldWidth] + 500;
    scene.add(camera);
    
    //Create geometry data used for mesh
    var geometry = new THREE.PlaneGeometry(7500, 7500, worldWidth - 1,	worldDepth - 1);
    for ( var i = 0, l = geometry.vertices.length; i < l; i++) {
      geometry.vertices[i].position.z = data[i] * 3;
    }
    
    //Load texture
    texture = THREE.ImageUtils.loadTexture(textureFile, {}, function() {
      renderer.render(scene, camera);
    });
    texture.needsUpdate = true;
    
    //Create mesh from heightmap and texture
    material = new THREE.MeshBasicMaterial({
      map : texture,
      wireframe: wf
    });
    mesh = new THREE.Mesh(geometry, material);
    mesh.rotation.x = -90 * Math.PI / 180;
    scene.add(mesh);

    //Create renderer
    renderer = new THREE.WebGLRenderer({
      preserveDrawingBuffer : true // required to support .toDataURL()
    }); 
    renderer.setSize(window.innerWidth, window.innerHeight - 150); //FIXME, add height of the controls
    container.innerHTML = "";
    container.appendChild(renderer.domElement);

  //	//Add FPS statistics
  //	stats = new Stats();
  //	stats.domElement.style.position = 'absolute';
  //	stats.domElement.style.top = '0px';
  //	container.appendChild(stats.domElement);

    //Get default values
    pos_x = mesh.position.x;
    pos_y = mesh.position.y;
    pos_z = mesh.position.z;
    rot_x = mesh.rotation.x;
    rot_y = mesh.rotation.y;
    rot_z = mesh.rotation.z;
  //{{{init controls
    //Controls 
    

    //Toggle wire-frame
    shortcut.add("Space",function() {
      wf = !wf;
      material.wireframe = wf;
    });

    //Rotate Up
    shortcut.add("Shift+Up",function() {
      mesh.rotation.x += 0.1;
    });
    
    //Rotate Down
    shortcut.add("Shift+Down",function() {
      mesh.rotation.x -= 0.1;
    });
    
    //Rotate Left
    shortcut.add("Shift+Left",function() {
      mesh.rotation.z += 0.1;
    });
    
    //Rotate Right
    shortcut.add("Shift+Right",function() {
      mesh.rotation.z -= 0.1;
    });

    //Zoom In
    shortcut.add("Page_up",function() {
      mesh.position.z += 150;
    });

    //Zoom Out
    shortcut.add("Page_down",function() {
      mesh.position.z -= 150;
    });

    //Up
    shortcut.add("Up",function() {
      mesh.position.y += 150;
    });

    //Down
    shortcut.add("Down",function() {
      mesh.position.y -= 150;
    });
    
    //Left
    shortcut.add("Left",function() {
      mesh.position.x -= 150;
    });

    //Right
    shortcut.add("Right",function() {
      mesh.position.x += 150;
    });
    //Reset
    shortcut.add("Delete",function() {
      mesh.position.x = pos_x;
      mesh.position.y = pos_y;
      mesh.position.z = pos_z;
      mesh.rotation.x = rot_x;
      mesh.rotation.y = rot_y;
      mesh.rotation.z = rot_z;
      
    });
  //}}}
  cb();
  };
}


function animate() {
	render();
	requestAnimationFrame(animate);
}

function render() {
	renderer.render(scene, camera);
}

window.onload= function(e){
	initGraphics(function(){ animate() });
}