var separation = 100,
	amountx = 50,
	amounty = 50;

var container;
var camera, scene, renderer;

var particles,
	particle,
	count = 0;

var mousex = 0,
	mousey = 0;

var windowhalfx = window.innerwidth / 2;
var windowhalfy = window.innerheight / 2;

if (document.getelementbyid('index_canvas')) {
	init();
	animate();
}

function init() {
	// container = document.createelement( 'div' );
	container = document.getelementbyid('index_canvas');
	//document.body.appendchild( container );

	camera = new three.perspectivecamera(
		75,
		window.innerwidth / window.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: 0xffffff,
		program: function (context) {
			context.beginpath();
			context.arc(0, 0, 1, 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);

	document.addeventlistener('mousemove', ondocumentmousemove, false);
	document.addeventlistener('touchstart', ondocumenttouchstart, false);
	document.addeventlistener('touchmove', ondocumenttouchmove, false);

	//

	window.addeventlistener('resize', onwindowresize, false);
}

function onwindowresize() {
	windowhalfx = window.innerwidth / 2;
	windowhalfy = window.innerheight / 2;

	camera.aspect = window.innerwidth / window.innerheight;
	camera.updateprojectionmatrix();

	renderer.setsize(window.innerwidth, window.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.position.x += camera.position.x * 0.05;
	camera.position.y += (300 - camera.position.y) * 0.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) * 30 + math.sin((iy + count) * 0.5) * 30;
			particle.scale.x = particle.scale.y =
				(math.sin((ix + count) * 0.2) + 1) * 2 +
				(math.sin((iy + count) * 0.4) + 1) * 2;
		}
	}

	renderer.render(scene, camera);

	count += 0.1;
}