var renderer, scene, camera, cube;

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);

	//Add a light in the scene
	directionalLight = new THREE.DirectionalLight( 0xffffff, 0.8 );
	directionalLight.position.set( 0, 0, 350 );
	directionalLight.lookAt(new THREE.Vector3(0,0,0));
	scene.add( directionalLight );

	//Add a cube in the scene add apply animation
	createCube();

	//Render the scene and start request animation frame
	render();
}

var createCube = function(){

	//Create a new cube with simple geometry & material
	var geometry = new THREE.BoxGeometry(150,150,150);
	var texture = new THREE.MeshLambertMaterial({color:0x00ff00, transparent: true });
	cube = new THREE.Mesh(geometry, texture);

	//Create a new timeline
	//I like to add my timeline to my element object so I know to which element it refers to
	//But we could declare a new variable which contains the timeline
	cube.tl = new TimelineMax({repeat:-1, repeatDelay: 1});
	//I add a few animations in my timeline
	//The cube turn on itself
	cube.tl.to(cube.rotation, 3, {y:-Math.PI*3.25, x : -Math.PI*1.25, ease:Back.easeInOut});

	//Then it will move to the left and fade out
	cube.tl.to(cube.position, 1, {x : -150, ease:Power3.easeOut});
	cube.tl.to(cube.material, 1, {opacity : 0, ease:Power3.easeOut}, "-=1");

	//Move the cube without transition
	cube.tl.set(cube.position,{x:100, y: -100});

	//Fade In the cube
	cube.tl.to(cube.material, 1, {opacity : 1, ease:Power3.easeOut});

	//It goes back to its initial position
	cube.tl.to(cube.position, 3, {x:0,y:0, ease: Back.easeInOut.config(2)});
	cube.tl.to(cube.rotation, 3, {x:0,y:0, ease: Back.easeInOut.config(2)},"-=3");
	

	//Add the cube in the scene
	scene.add(cube);
};


var render = function () {
	requestAnimationFrame(render);

	//Simply render the scene with a request animation frame and the timeline from GreenSock will do the rest ;)
	renderer.render(scene, camera);
};

init();