var canvas;
var context;
var intervalId = 0;
function setup() {
	canvas = document.getElementById('cnvs');
	if(canvas.getContext) {
		context = canvas.getContext('2d');
		intervalId = setInterval(animate, 1000 / 30);
		
		var toggleBtn = document.getElementById('toggle');
		toggleBtn.addEventListener('click', replayToggle, false);
	}
}

var radians = 0;
function animate() {
	context.clearRect(0, 0, context.canvas.width, context.canvas.height);
	radians += Math.PI / 16;
	
	var color = 'hsla(' + Math.round((radians / 4) * 180 / Math.PI) + ', 100%, 50%, 1)';
	context.fillStyle = color;
	context.strokeStyle = 'rgba(0, 0, 0, 0)';
	context.shadowOffsetX = 0;
	context.shadowOffsetY = 0;
	context.shadowBlur = 64;
	context.shadowColor = color;
	context.beginPath();
	var x = context.canvas.width / 2;
	var y = context.canvas.height / 2 - Math.sin(radians) * 100;
	var radius = 50;
	var startAngle = 0;
	var endAngle = 2 * Math.PI;
	var ccw = true;
	context.arc(x, y, radius, startAngle, endAngle, ccw);
	context.fill();
}

function replayToggle(e) {
	if(intervalId == 0) {
		intervalId = setInterval(animate, 1000 / 30);
	} else {
		clearInterval(intervalId);
		intervalId = 0;
	}
}
