var renderer, scene, camera, cubes, vector;

var ww = window.innerWidth,
	wh = window.innerHeight;

function init(){

	renderer = new THREE.WebGLRenderer({canvas : document.getElementById('scene')});
	renderer.setSize(ww,wh);

	scene = new THREE.Scene();

	camera = new THREE.PerspectiveCamera(50,ww/wh, 0.1, 10000 );
	camera.position.set(0,0,500);
	scene.add(camera);

	light = new THREE.DirectionalLight(0xffffff, 1);
	light.position.set( 0, 0, 500 );
	scene.add(light);

	//Vector use to get position of vertice
	vector = new THREE.Vector3();

	//Generate cubes on the scene
	createCubes();

	//Render my scene
	render();
}


var createCubes = function(){

	//Create an object 3D that contains my cubes
	cubes = new THREE.Object3D();

	//Simple geometry and material
	var geometry = new THREE.BoxGeometry(50,50,50);
	var material = new THREE.MeshLambertMaterial({color: 0x00ff00});
	for(var i=0;i<3;i++){
		var cube = new THREE.Mesh(geometry, material);
		cubes.add(cube);
	}

	//Add my cubes on the scene
	scene.add(cubes);
};

var moveDom = function(i){

	//Vector equal a vertice from the cube (it can be any vertice)
    vector = cubes.children[i].geometry.vertices[i].clone();

    //Apply the matrix of its cube (rotation & translation)
    vector.applyMatrix4(cubes.children[i].matrix);

    //Get the position of the vector according to the rendered scene
    vector.project(camera);

    //Convert the vector values to our scene size (here it's the screen size)
	vector.x = (vector.x * ww/2) + ww/2;
	vector.y = -(vector.y * wh/2) + wh/2;

    //Get the DOM element and apply transforms on it
   	document.querySelectorAll(".element")[i].style.webkitTransform = "translate("+vector.x+"px,"+vector.y+"px)";
   	document.querySelectorAll(".element")[i].style.transform = "translate("+vector.x+"px,"+vector.y+"px)";
};


var counter = 0;
var render = function (a) {
	requestAnimationFrame(render);

	counter++;

	//Move my cubes
	for(var i=0;i<3;i++){
		cubes.children[i].position.x = Math.cos((counter+i*150)/200)*(ww/6+i*80);
		cubes.children[i].position.y = Math.sin((counter+i*150)/200)*(70+i*80);
		cubes.children[i].rotation.x += .001*i+.002;
		cubes.children[i].rotation.y += .001*i+.02;

		//Move my dom elements
		moveDom(i);
	}
	
	renderer.render(scene, camera);
};

init();