// Nine Circles Number plugin for jquery

(function($){
	
	t = 0;

	$.fn.ncn = function(options){
		var opts = $.extend({},$.fn.ncn.defaults,options);
		
		function draw(n,canvas){

			var current = 0,
				width = opts.size,
				height = opts.size,
				white = opts.foreground,
				black = opts.background;
			
			var radius = (width/6);
			
			var coords = [
				[radius,  radius  ],
				[radius*3,radius  ],
				[radius*5,radius  ],
				[radius,  radius*3],
				[radius*3,radius*3],
				[radius*5,radius*3],
				[radius,  radius*5],
				[radius*3,radius*5],
				[radius*5,radius*5]
			];
				
			var ctx = canvas.getContext('2d');
			
			var mathPI2 = Math.PI*2;

			var grid = [
				"0",
				"5",
				"4,6",
				"4,5,6",
				"1,3,7,9",
				"1,3,5,7,9",
				"1,2,3,7,8,9",
				"1,2,3,5,7,8,9",
				"1,2,3,4,6,7,8,9",
				"1,2,3,4,5,6,7,8,9"
			];
			
			canvas.width = width;
			canvas.height = height;
			
			if ( $.isArray(n) ) {
				var nLength = n.length;
				canvas.width = (nLength*width) + ((nLength-1)*opts.gap);
				// alert(parseInt(n[0]));
				for ( i=0; i<nLength; i++ ) {
					xoffset = (i*width) + (i*opts.gap);
					coords = [
						[xoffset+radius,  radius  ],
						[xoffset+radius*3,radius  ],
						[xoffset+radius*5,radius  ],
						[xoffset+radius,  radius*3],
						[xoffset+radius*3,radius*3],
						[xoffset+radius*5,radius*3],
						[xoffset+radius,  radius*5],
						[xoffset+radius*3,radius*5],
						[xoffset+radius*5,radius*5]
					];
					nineCircles(n[i]);
				}
			} else {
				nineCircles(n);
			}

			function nineCircles(n){
				n = parseInt(n,10);
				
				// positive and negative numbers
				if ( n < 0 ) {
					bg = black;
					fg = white;
				} else {
					bg = white;
					fg = black;
				}
				
				function addColour(i){
					opts.colours[i] = [
						Math.floor(Math.random()*256),
						Math.floor(Math.random()*256),
						Math.floor(Math.random()*256)
					];
				}

				function circle(num,current,xy,radius,ci) {
					ctx.lineWidth = 0;
					// ctx.strokeStyle = fg;
					if ( typeof(opts.colours[ci]) == "undefined" ) {
						addColour(ci);
					}
					if ( grid[current].match(num) ) {
						ctx.fillStyle = opts.colours[ci];
					} else {
						ctx.fillStyle = bg;
					}
					ctx.beginPath();
					ctx.arc((xy[0]),(xy[1]),radius,0,mathPI2,true);
					// ctx.stroke();
					ctx.fill();
					ctx.closePath();
				}
			
				var iString = n.toString().split("");
				if ( n < 0 ) {
					iString.shift();
				}
				var sLength = iString.length;
				var ci = sLength-1;
				var r = radius;

				for ( c=0; c < sLength; c++ ) {
					current = parseInt(iString.shift());
					ci = (sLength-c-1);
					circle(1,current,coords[0],r,ci);
					circle(2,current,coords[1],r,ci);
					circle(3,current,coords[2],r,ci);
					circle(4,current,coords[3],r,ci);
					circle(5,current,coords[4],r,ci);
					circle(6,current,coords[5],r,ci);
					circle(7,current,coords[6],r,ci);
					circle(8,current,coords[7],r,ci);
					circle(9,current,coords[8],r,ci);
					r = r - (radius/sLength);
				}
			}
		}
		
		// if it's a time element replace html with canvas
		$(this).html('<canvas id="ncn'+t+'" class="ncn" title="'+$(this).text()+'"></canvas>');
		draw(opts.numbers,$("#ncn"+t)[0]);
		t++;
		
	};
	
	$.fn.ncn.defaults = {
		colours: ['#ff0000','#0000ff','#ffff00','#00ff00'],
		numbers: 0,
		size: 30,
		gap: 10,
		foreground: "#ffffff",
		background: "#000000"
	};
	
})(jQuery);