function deg2Rad(degree){
	var factor = Math.PI/180;
	return degree * factor;
};

function degreeConverter(degree){
	if(degree > 0){
		degree--;
	}
	else{
		degree = 1;
	}
	return degree;
};

function color8Tor(requestType, degree){
	switch(requestType){
		case 'strokeStyle':
			if(degree > 180){
				return 'green';
			}
			if(degree <= 181 && degree > 120){
				return 'yellow';
			}
			if(degree <= 121 && degree > 37){
				return 'orange';
			}
			if(degree <= 36){
				return 'red';
			}
		break;
		case 'shadowColor':
			if(degree > 180){
				return 'lightgreen';
			}
			if(degree <= 181 && degree > 120){
				return 'blue';
			}
			if(degree <= 121 && degree > 60){
				return 'orange';
			}
			if(degree <= 61){
				return 'red';
			}
		break;
		case 'fillStyle':
			if(degree > 180){
				return 'green';
			}
			if(degree <= 181 && degree > 120){
				return 'yellow';
			}
			if(degree <= 121 && degree > 37){
				return 'orange';
			}
			if(degree <= 36){
				return 'red';
			}
		break;
	}
};

function renderCanvas(countDown, degree){
	var canvas = document.getElementById('canvas');
	var ctx = canvas.getContext('2d');	
	
	//ctx.strokeStyle = 'green';
	ctx.strokeStyle = color8Tor('strokeStyle', degree);
	ctx.lineWidth = 17;
	ctx.lineCap = 'round';
	ctx.shadowBlur = 15;
	//ctx.shadowColor = 'lightgreen';
	ctx.shadowColor = color8Tor('shadowColor', degree);
	

	
	gradient = ctx.createRadialGradient(150, 150, 5, 150, 150, 100);
	gradient.addColorStop(0, 'lightblue');
	gradient.addColorStop(1, 'white');
	ctx.fillStyle = gradient;
	
	
	ctx.fillRect(0, 0, 300, 300);
	
	ctx.beginPath();

	degree = degreeConverter(degree);
	ctx.arc(150, 150, 100, deg2Rad(270), deg2Rad(degree - 90));

	ctx.stroke();
	
	ctx.font = "30px Arial";
	//ctx.fillStyle = 'green';
	ctx.fillStyle = color8Tor('fillStyle', degree);
	ctx.fillText(countDown, 145, 160);
}