var SEPARATION = 100, AMOUNTX = 50, AMOUNTY = 50;
var container, stats;
var camera, scene, renderer;
var particles, particle, count = 0;
var mouseX = 0, mouseY = 0;
var container = document.getElementById( 'wave1' );
var windowHalfX = window.innerWidth / 2;
var windowHalfY = parseInt(container.style.height) / 2;
init();
animate();
function init() {
	container = document.getElementById( 'wave1' );
	camera = new THREE.PerspectiveCamera( 80, window.innerWidth / parseInt(container.style.height),30, 10000 ); 
	camera.position.y = 500;
	camera.position.z = 1000;
	scene = new THREE.Scene();
	particles = new Array();
	var PI2 = Math.PI * 2;
	var material = new THREE.SpriteCanvasMaterial( {
		color: 0x69ffff,
		opacity:1,
		program: function ( context ) {
			context.beginPath();
			context.arc( 0, 0, 1, 3, PI2, true ); 
			context.fill();
		}
	} );
	var i = 0;
	for ( var ix = 0; ix < AMOUNTX; ix ++ ) {
		for ( var iy = 0; iy < AMOUNTY; iy ++ ) {
			particle = particles[ i ++ ] = new THREE.Sprite( material );
			particle.position.x = ix * SEPARATION - ( ( AMOUNTX * SEPARATION ) / 2 );
			particle.position.z = iy * SEPARATION - ( ( AMOUNTY * SEPARATION ) / 2 );
			scene.add( particle );
		}
	}
	renderer = new THREE.CanvasRenderer({
		alpha:true,
		antialias:true,
		preserveDrawingBuffer:true
	})
	renderer.setPixelRatio( window.devicePixelRatio );
	renderer.setSize( window.innerWidth, parseInt(container.style.height) );
	container.appendChild( renderer.domElement );
	window.addEventListener( 'resize', onWindowResize, false );
}
function onWindowResize() {
	windowHalfX = window.innerWidth / 2;
	windowHalfY = parseInt(container.style.height) / 2;
	camera.aspect = window.innerWidth / parseInt(container.style.height);
	camera.updateProjectionMatrix();
	renderer.setSize( window.innerWidth, 690 );
}
function onDocumentMouseMove( event ) {
	mouseX = event.clientX - windowHalfX;
}
function onDocumentTouchStart( event ) {
	if ( event.touches.length === 1 ) {
		event.preventDefault();
		mouseX = event.touches[ 0 ].pageX - windowHalfX;
	}
}
function onDocumentTouchMove( event ) {
	if ( event.touches.length === 1 ) {
		event.preventDefault();
		mouseX = event.touches[ 0 ].pageX - windowHalfX;
	}
}
function animate() {
	requestAnimationFrame( animate );
	render();
}
function render() {
	camera.position.x += ( mouseX - camera.position.x ) * .05;
	camera.position.y += ( - mouseY - camera.position.y + 200 ) * .05;
	camera.lookAt( scene.position );
	var i = 0;
	for ( var ix = 0; ix < AMOUNTX; ix ++ ) {
		for ( var iy = 0; iy < AMOUNTY; iy ++ ) {
			particle = particles[ i++ ];
			particle.position.y = ( Math.sin( ( ix + count ) * 0.3 ) * 50 ) +
			( Math.sin( ( iy + count ) * 0.5 ) * 50 );
			particle.scale.x = particle.scale.y = ( Math.sin( ( ix + count ) * 0.3 ) + 1 ) * 4 +
			( Math.sin( ( iy + count ) * 0.5 ) + 1 ) * 4;
		}

	}
	renderer.render( scene, camera );
	count += 0.1;
}