/**
 * Good basic starting point for a THREE.JS sketch
 */
(function(){
	var Sketch = function(){
		this.onBeforeStart();
	};

	Sketch.prototype.onBeforeStart = function() {
		var that = this;
		var onContentLoaded = function(){
			window.removeEventListener('DOMContentLoaded', onContentLoaded);
			that.onLoaded();
		};
		window.addEventListener('DOMContentLoaded', onContentLoaded, true);
	};

	Sketch.prototype.onLoaded = function() {
		var width = window.innerWidth - 10;
		var height = window.innerHeight - 10;

		this._domElement = document.getElementById("threecontainer");
		this._domElement.style.width = width + "px";
		this._domElement.style.height = height  + "px";
		this._scene = new THREE.Scene();

		this._renderer = new THREE.WebGLRenderer({antialias: true});

		this._renderer.autoClear = true;
		this._renderer.sortObjects = true;
		this._renderer.setClearColor(new THREE.Color(0x111111), 1);
		this._renderer.setSize( width, height );
		this._renderer.domElement.tabIndex = "1";
		this._domElement.appendChild(this._renderer.domElement);

		this._camera = new THREE.Camera( 65, width/height, 1, 5000 );
		this._camera.position.y = 0;
		this._camera.position.z = 50;

		this._ambientLight = new THREE.AmbientLight(0x111111);
		this._scene.addLight(this._ambientLight);

		this._pointLight = new THREE.PointLight(0xFF00FF, 0.5, 0);
		this._pointLight.position.set(0, 10, 10);
		this._scene.addLight(this._pointLight);

		this.setupStats();

		var geometry = new THREE.CubeGeometry( 5, 5, 5, 2, 2, 2 );
		this._cube = new THREE.Mesh( geometry, [new THREE.MeshLambertMaterial( {
			color: 0xFF0000,
			shading: THREE.SmoothShading
		})] );
		this._cube.position.set(0, 0,0);

		this._scene.addObject( this._cube );

		var that = this;
		(function loop() {
			that.update();
			that.render();
			window.requestAnimationFrame(loop);
		})();
	};

	/**
	 * Creates a Stats.js instance and adds it to the page
	 */
	Sketch.prototype.setupStats = function() {
		var container = document.createElement('div');
		this.stats = new Stats();
		this.stats.domElement.style.position = 'absolute';
		this.stats.domElement.style.top = '5px';
		this.stats.domElement.style.left= '5px';
		container.appendChild(this.stats.domElement);
		document.body.appendChild(container);
	};

	Sketch.prototype.update = function() {
		this.stats.update();
		this._cube.rotation.y += 0.02;
	};

	Sketch.prototype.render = function() {
		this._renderer.render(this._scene, this._camera);
	};

	var sketch = new Sketch();
})();