// JavaScript Document

var SEPARATION =100, AMOUNTX =50, AMOUNTY =50;
//var container;
var camera, scene, renderer;
var particles, particle, count = 0;
var mouseX = 0, mouseY = -350;
/*
var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;
*/

var windowHalfX, windowHalfY, containerDiv;



function init(container) {
	//container = document.getElementById("proA3_bg");
	containerDiv = container;
	windowHalfX = $(container).innerWidth() / 2;
	windowHalfY = $(container).innerHeight() / 2;
	camera = new THREE.PerspectiveCamera(75, $(container).innerWidth() / $(container).innerHeight(), 1, 10000);
	camera.position.z = 1000;
	scene = new THREE.Scene();
	particles = new Array();
	var PI2 = Math.PI * 2;
	var material = new THREE.ParticleCanvasMaterial({
		color: 0x5b6169,
		program:function(context){
			context.beginPath();
			context.arc(0, 0, .6, 0, 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.Particle( material );
			particle.position.x = ix * SEPARATION - ( ( AMOUNTX * SEPARATION ) / 2 );
			particle.position.z = iy * SEPARATION - ( ( AMOUNTY * SEPARATION ) / 2 );
			scene.add( particle );
		}
	}
	renderer = new THREE.CanvasRenderer();
	renderer.setSize(window.innerWidth, window.innerHeight);
	container.appendChild(renderer.domElement);
	//container.addEventListener( 'mousemove', onDocumentMouseMove, false );
	//container.addEventListener( 'touchstart', onDocumentTouchStart, false );
	//container.addEventListener( 'touchmove', onDocumentTouchMove, false );
	window.addEventListener( 'resize', onWindowResize, false );
}

function onWindowResize() {
	//windowHalfX = window.innerWidth / 2;
	//windowHalfY = window.innerHeight / 2;
	windowHalfX = $(containerDiv).innerWidth() / 2;
	windowHalfY = $(containerDiv).innerHeight() / 2;
	camera.aspect = $(containerDiv).innerWidth() / $(containerDiv).innerHeight();
	camera.updateProjectionMatrix();
	renderer.setSize( $(containerDiv).innerWidth(), $(containerDiv).innerHeight() );
}

function onDocumentMouseMove( event) {
	mouseX = event.clientX - windowHalfX;
	mouseY = event.clientY - windowHalfY;
}

function onDocumentTouchStart(event) {
	if(event.touches.length === 1) {
		event.preventDefault();
		mouseX = event.touches[ 0 ].pageX - windowHalfX;
		mouseY = event.touches[ 0 ].pageY - windowHalfY;
	}
}

function onDocumentTouchMove(event) {
	if(event.touches.length === 1) {
		event.preventDefault();
		mouseX = event.touches[ 0 ].pageX - windowHalfX;
		mouseY = event.touches[ 0 ].pageY - windowHalfY;
	}
}

function animate() {
	requestAnimationFrame( animate );
	render();
}

function render() {	
	camera.position.x += ( mouseX - camera.position.x ) * .05;
	camera.position.y += ( - mouseY - camera.position.y ) * .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 ) * 2 + ( Math.sin( ( iy + count ) * 0.5 ) + 1 ) * 2;
		}
	}
	renderer.render( scene, camera );
	count += 0.1;
}