var first_sc = null;
var second_sc = null;
var third_sc = null;
var blue_sc = null;

function setup()
{
	first_sc = new SpinningClock("first_clock", "#000000", false);
	second_sc = new SpinningClock("second_clock", "#333333", true);
	third_sc = new SpinningClock("third_clock", "#000000", false);
	blue_sc = new SpinningClock("blue_clock", "#0000FF", false);
	second_sc.clearAfterStop = false;
	first_sc.draw(first_sc);
	second_sc.draw(second_sc);
	third_sc.draw(third_sc);
}

function spin(id)
{
	if (id == "second_button") {
		if (second_sc.timer == null) {
			second_sc.start();
			document.getElementById("second_button").value = "stop";
		}
		else {
			second_sc.stop();
			document.getElementById("second_button").value = "start";
		}
	}
	else if (id == "blue_button") {
		if (blue_sc.timer == null) {
			blue_sc.start();
			document.getElementById("blue_button").value = "stop";
		}
		else {
			blue_sc.stop();
			document.getElementById("blue_button").value = "start";
		}
	}
}


function SpinningClock(canvasID, startColor, roundCap)
{
	this.id = canvasID;
	var target_div = document.getElementById(this.id);
	var target_div_style = document.defaultView.getComputedStyle(target_div, "");
	this.width = parseInt(target_div_style.getPropertyValue("width"));
	this.height = parseInt(target_div_style.getPropertyValue("height"));
	this.lineWidth = this.width/10;
	this.roundCap = roundCap;
	this.startColor = startColor;
	this.clearAfterStop = true;
	this.interval = 50;
	this.startPos = 0;
	this.alpha = new Array(1.0,0.3,0.35,0.4,0.45,0.5,0.55,0.6,0.65,0.7,0.8,0.9);
	this.timer = null;
		
	var self = this;

	this.draw = function(self) {
		var canvas = document.getElementById(self.id);
		var ctx = canvas.getContext('2d');
		var centerCircleRadius = self.width/4;
		var capAdjust = (self.roundCap) ? 3 : 2;
		ctx.save();
		ctx.clearRect(0, 0, self.width, self.height);
		ctx.translate(self.width/2, self.height/2);
		
		for (var i=0; i<12; i++) {
			ctx.lineWidth = self.lineWidth;
			ctx.lineCap = (self.roundCap) ? "round" : "square";
			ctx.strokeStyle = self.startColor;
			ctx.globalAlpha = self.alpha[i];
			ctx.beginPath();
			ctx.moveTo(0, (0-centerCircleRadius)-(self.lineWidth/capAdjust));
			ctx.lineTo(0, ((self.height/2)-(self.lineWidth/2))*-1);
			ctx.stroke();
			ctx.rotate(Math.PI/6);
		}
		
		ctx.restore();
		self.alpha.unshift(self.alpha[11]);
		self.alpha.pop();
		self.startPos = (self.startPos >= 11) ? 0 : self.startPos += 1;
	
	}
	
	this.clear = function(self) {
		var canvas = document.getElementById(self.id);
		var ctx = canvas.getContext('2d');
		ctx.clearRect(0, 0, self.width, self.height);
		self.startPos = 0;
		self.alpha = new Array(1.0,0.3,0.35,0.4,0.45,0.5,0.55,0.6,0.65,0.7,0.8,0.9);
	}
	
}

SpinningClock.prototype.start = function()
{
	if (this.timer == null) {
		this.timer = setInterval(this.draw,this.interval,this);
	}
	else {
		this.stop();
	}
}

SpinningClock.prototype.stop = function()
{
	clearInterval(this.timer);
	this.timer = null;
	if (this.clearAfterStop) this.clear(this);
}