enyo.kind({
	name: "Point",
	constructor: function(x, y) {
		this.x = x;
		this.y = y;
	},
	add: function(p) {
		this.x += p.x;
		this.y += p.y;
	}
});

enyo.kind({
	name: "RandomPoint",
	kind: "Point",
	constructor: function(x, y, w, h) {
		this.x = Math.random() * w + x;
		this.y = Math.random() * h + y;
	}
});

enyo.kind({
	name: "HexaSpinner",
	constructor: function(position, velocity, scale, color, rate) {
		this.position = position;
		this.velocity = velocity;
		this.scale = scale;
		this.color = color;
		if (rate) {
			this.rate = rate;
		} else {
			this.rate = Math.PI / 40;
		}
		this.rotation = Math.random() * 2 * Math.PI;
	},
	update: function(bb) {
		this.position.add(this.velocity);
		if (this.position.x > bb.right) {
			this.position.x -= (this.position.x - bb.right) * 2;
			this.velocity.x *= -1;
		} else if (this.position.x < bb.left) {
			this.position.x -= (this.position.x - bb.left) * 2;
			this.velocity.x *= -1;
		}
		if (this.position.y > bb.bottom) {
			this.position.y -= (this.position.y - bb.bottom) * 2;
			this.velocity.y *= -1;
		} else if (this.position.y < bb.top) {
			this.position.y -= (this.position.y - bb.top) * 2;
			this.velocity.y *= -1;
		}
	},
	draw: function(ctx) {
		ctx.save();
		ctx.translate(this.position.x, this.position.y);
		ctx.rotate(this.rotation);
		ctx.scale(this.scale, this.scale);
		ctx.fillStyle = this.color;
		for (i = 0; i < 6; i++) {
			ctx.fillRect(-10, -50, 20, 34);
			ctx.rotate(2 * Math.PI / 6);
		}
		ctx.restore();
		this.rotation += this.rate;
		if (this.rotation > Math.PI * 2)
			this.rotation -= Math.PI * 2;
		else if (this.rotation < 0)
			this.rotation += Math.PI * 2;
	}
});

enyo.kind({
	name: "HexaSpinnerHack",
	kind: "Hack",
	style: "background-color: white",
	preferences: [
		{name: "chaos", label: "Chaos", kind: "Slider", minimum: 1.0, maximum: 10.0, snap: 0.1},
		{name: "color1", label: "Primary Color", kind: "ListSelector", items: colorList},
		{name: "color2", label: "Secondary Color", kind: "ListSelector", items: colorList},
	],
	chaos: 1.0,
	color1: 'white',
	color2: 'black',
	components: [
		{name: "canvas", nodeTag: "canvas"}
	],
	rendered: function() {
		this.canvas = this.$.canvas.hasNode();
		this.ctx = this.canvas.getContext('2d');
		this.resize(window.innerWidth, window.innerHeight);

		this.initSpinners();

		this.engine();
	},
	initSpinners: function() {
		this.spinners = [];
		this.spinners.push(new HexaSpinner(
			new RandomPoint(0, 0, this.w, this.h),
			new RandomPoint(-0.5 * this.chaos, -0.5 * this.chaos, 1.0 * this.chaos, 1.0 * this.chaos),
			18.0, this.color2, -Math.PI / 150));
		this.spinners.push(new HexaSpinner(
			new RandomPoint(0, 0, this.w, this.h),
			new RandomPoint(-0.8 * this.chaos, -0.8 * this.chaos, 1.6 * this.chaos, 1.6 * this.chaos),
			12.0, this.color1, Math.PI / 120));
		this.spinners.push(new HexaSpinner(
			new RandomPoint(0, 0, this.w, this.h),
			new RandomPoint(-0.9 * this.chaos, -0.9 * this.chaos, 1.8 * this.chaos, 1.8 * this.chaos),
			9.0, this.color2, -Math.PI / 140));
		this.spinners.push(new HexaSpinner(
			new RandomPoint(0, 0, this.w, this.h),
			new RandomPoint(-0.5 * this.chaos, -0.5 * this.chaos, 1.0 * this.chaos, 1.0 * this.chaos),
			4.0, this.color1, -Math.PI / 100));
		this.spinners.push(new HexaSpinner(
			new RandomPoint(0, 0, this.w, this.h),
			new RandomPoint(-1.2 * this.chaos, -1.2 * this.chaos, 2.4 * this.chaos, 2.4 * this.chaos),
			3.0, this.color2));
		this.spinners.push(new HexaSpinner(
			new RandomPoint(0, 0, this.w, this.h),
			new RandomPoint(-1.8 * this.chaos, -1.8 * this.chaos, 3.2 * this.chaos, 3.2 * this.chaos),
			1.8, this.color1, -Math.PI / 30));
	},
	start: function() {
		if (!this.timer)
			this.timer = setInterval(this.engine.bind(this), 30);
	},
	stop: function() {
		clearInterval(this.timer);
		this.timer = null;
	},
	resize: function(w, h) {
		this.canvas.width = this.w = w;
		this.canvas.height = this.h = h;
		this.bb = {
			left: 50,
			right: w - 50,
			top: 50,
			bottom: h - 50
		};
	},
	preferencesChanged: function() {
		this.initSpinners();
	},
	engine: function() {
		this.ctx.fillStyle = this.color1;
		this.ctx.fillRect(0, 0, this.w, this.h);
		for (i in this.spinners) {
			this.spinners[i].update(this.bb);
			this.spinners[i].draw(this.ctx);
		}
	}
});