// the main three.js components
var camera, scene, renderer,

// to keep track of the mouse position
	mouseX = 0, mouseY = 0,

// an array to store our particles in
	particles = [];


function init() {
	
	
	// the scene contains all the 3D object data
	scene = new THREE.Scene();
	
	scene.fog = new THREE.Fog( 0x000000, 0, 2000 );
	
	// Camera params : 
	// field of view, aspect ratio for render output, near and far clipping plane. 
	camera = new THREE.PerspectiveCamera(3000, window.innerWidth / window.innerHeight, 0.1, 10000 );

	// move the camera backwards so we can see stuff! 
	// default position is 0,0,0. 
	camera.position.z = 1000;

	scene.add(camera);
	
	
	// create a point light
	var pointLight = new THREE.PointLight( 0xFFFF00 );
	
	// set its position
	pointLight.position.x = 0;
	pointLight.position.y = 1000;
	pointLight.position.z = -500;
	
	// add to the scene
	scene.add(pointLight);
	
	
	// create a point light
	var pointLight = new THREE.PointLight( 0x00FFFF );
	
	// set its position
	pointLight.position.x = 0;
	pointLight.position.y = -1000;
	pointLight.position.z = 500;
	
	// add to the scene
	scene.add(pointLight);
	
	
	// create a point light
	var pointLight = new THREE.PointLight( 0xFFFFFF );
	
	// set its position
	pointLight.position.x = 0;
	pointLight.position.y = 1000;
	pointLight.position.z = 1000;
	
	// add to the scene
	scene.add(pointLight);
	

	

	// and the CanvasRenderer figures out what the 
	// stuff in the scene looks like and draws it!
 
			renderer = new THREE.WebGLRenderer();
			renderer.setSize( window.innerWidth, window.innerHeight );

			// the renderer's canvas domElement is added to the body
	I('webgl').appendChild( renderer.domElement );

	makeParticles(); 
	
	// render 30 times a second (should also look 
	// at requestAnimationFrame)
	
	requestAnimationFrame(update);
	 
	//setInterval(update, 1000 / 30); 

}

// the main update function, called 30 times a second

function update() {

	updateParticles();

	// and render the scene from the perspective of the camera
	renderer.render( scene, camera );
	
	requestAnimationFrame(update);
}

// creates a random field of Particle objects

function makeParticles() { 
	
	var particle, material, geometry; 

	// we're gonna move from z position -1000 (far away) 
	// to 1000 (where the camera is) and add a random particle at every pos. 
	for ( var zpos= -2000; zpos < 2000; zpos+=20 ) {
		
		var col = [0x003366, 0x006666, 0x666633, 0x663333].random();
		
		geometry =  new THREE.CubeGeometry( 10, Math.random() * 10 + 10, 1 ) ;
        material = new THREE.MeshLambertMaterial( { color: col } );

        particle = new THREE.Mesh( geometry, material );
        scene.add( particle );

		// give it a random x and y position between -500 and 500
		particle.position.x = Math.random() * 2000 - 1000;
		particle.position.y = Math.random() * 2000 - 1000;

		// set its z position
		particle.position.z = zpos;

		// scale it up a bit
		particle.scale.z = particle.scale.x = particle.scale.y = 10;
		
		particle.rotation.x = Math.random() * 1 - 0.5;
		particle.rotation.y = Math.random() * 1 - 0.5;

		// add it to the scene
		scene.add( particle );

		// and to the array of particles. 
		particles.push(particle); 
	}
	
}

// there isn't a built in circle particle renderer 
// so we have to define our own. 

function particleRender( context ) {
	
	// we get passed a reference to the canvas context
	context.beginPath();
	// and we just have to draw our shape at 0,0 - in this
	// case an arc from 0 to 2Pi radians or 360º - a full circle!
	context.arc( 0, 0, 1, 0,  Math.PI * 2, true );
	context.fill();
};


// moves all the particles dependent on mouse position

function updateParticles() { 
	
	// iterate through every particle
	for(var i=0; i<particles.length; i++) {

		particle = particles[i]; 

		// and move it forward dependent on the mouseY position. 
		particle.position.z +=  ( window.innerHeight / 12) * 0.1;
		
		particle.rotation.x += (1000 % i) / 1000;
		particle.rotation.y += (2000 % i) / 2000;
		

		// if the particle is too close move it to the back
		if(particle.position.z>1000) particle.position.z-=2000; 

	}

}

AidaEvent.onReady(function()
{
	init();
});