var canvas, context, pencil, hour;
var inner_clock_second_size = 5;
var inner_clock_size = inner_clock_second_size*60;
var inner_clock_pos = (600-inner_clock_size) / 2;
var marcadores_hora = new Array(new Array (420,90,25,(Math.PI*2), 75, 12, 1), 	//01
								new Array (505,190,25,(Math.PI*2), 75, 12, 1), 	//02
								new Array (490,270,100,60, 195, 12, 0), 		//03
								new Array (505,410,25,(Math.PI*2), 75, 12, 1), 	//04 
								new Array (420,510,25,(Math.PI*2), 75, 12, 1), 	//05
								new Array (270,490,60,100, 195, 12, 0), 		//06
								new Array (180,510,25,(Math.PI*2), 75, 12, 1), 	//07
								new Array (75,410,25,(Math.PI*2), 75, 12, 1), 	//08
								new Array (10,270,100,60, 195, 12, 0), 			//09
								new Array (75,190,25,(Math.PI*2), 75, 12, 1), 	//10
								new Array (180,90,25,(Math.PI*2), 75, 12, 1), 	//11
								new Array (270,10,60,100, 195, 12, 0)); 		//12
function clock_init() {
	//Init canvas object
	canvas = document.getElementById('hourcanvas');
	if (!canvas) {	alert('Error: I cannot find the canvas element!');	return;}
	if (!canvas.getContext) {	alert('Error: no canvas.getContext!');  return;}
	context = canvas.getContext('2d');
	if (!context) { alert('Error: failed to getContext!'); return;}
	//Init drawing tool + listeners
	tool = new tool_pencil();
	canvas.addEventListener('mousedown', ev_canvas, false);
	canvas.addEventListener('mousemove', ev_canvas, false);
	canvas.addEventListener('mouseup',   ev_canvas, false);
	//Init clock
	hour = start_clock();
	var id = setInterval("clock()",1000);
}

function tool_pencil () {
	var tool = this;
	this.started = false;
	//Click event
	this.mousedown = function (ev) {
		context.beginPath();
		context.moveTo(ev._x, ev._y);
		tool.started = true;
	};
	//Move event
	this.mousemove = function (ev) {
		if (tool.started) {
			context.lineTo(ev._x, ev._y);
			context.stroke();
		}
	};
	// Mouse release
	this.mouseup = function (ev) {
		if (tool.started) {
			tool.mousemove(ev);
			tool.started = false;
		}
	};
}

function ev_canvas (ev) {
	if (ev.layerX || ev.layerX == 0) { // Firefox
		ev._x = ev.layerX;
		ev._y = ev.layerY;
	} else if (ev.offsetX || ev.offsetX == 0) { // Opera
		ev._x = ev.offsetX;
		ev._y = ev.offsetY;
	}
	// Call the event handler of the tool.
	var func = tool[ev.type];
	if (func) {
		func(ev);
	}
}

function draw_square (startx, starty, sizex, sizey, red, green, blue) {
	if (canvas && context) {
		context.fillStyle = 'rgb('+red+','+green+','+blue+')';
		context.fillRect(startx, starty, sizex, sizey); 
	}
}
function draw_circle (startx, starty, radius, r_start, r_end, red, green, blue) {
	if (canvas && context) {
		context.fillStyle = 'rgb('+red+','+green+','+blue+')';
		context.beginPath();
		context.arc(startx, starty,radius,r_start,r_end,false);
		context.fill();
	}
}
 
function clock() {
	var fObj = new Date() ; 
	var horas = fObj.getHours() ; 
	var minutos = fObj.getMinutes() ; 
	var segundos = fObj.getSeconds() ;
	//Check if we changed an hour
	if (hour != horas) {
		//Check if we went from am to pm
		if (horas == 13 || horas == 1) {
			context.clearRect ( 0 , 0 , 600 , 600 );
		}
		//Reset the inner clock and add the hour counters if needed
		draw_square(inner_clock_pos, inner_clock_pos, inner_clock_size, inner_clock_size, 255, 255, 255 );
		if(horas > 12) 	nhour = horas % 13;
		else			nhour = horas - 1;
		if (marcadores_hora[nhour][6] == 0)	draw_square(marcadores_hora[nhour][0], marcadores_hora[nhour][1], marcadores_hora[nhour][2], marcadores_hora[nhour][3], marcadores_hora[nhour][4], marcadores_hora[nhour][5], '00' );
		else								draw_circle (marcadores_hora[nhour][0], marcadores_hora[nhour][1], marcadores_hora[nhour][2], 0, marcadores_hora[nhour][3], marcadores_hora[nhour][4], marcadores_hora[nhour][5], '00' );
		//Store the current hour
		hour = horas;
	}
	draw_square((segundos*inner_clock_second_size)+inner_clock_pos, (minutos*inner_clock_second_size)+inner_clock_pos, inner_clock_second_size, inner_clock_second_size, (195+minutos), Math.floor(segundos*4.25), '00' );
}

function start_clock() {
	//Get current date
	var now = new Date(),
	csec = now.getSeconds(),
	cmin = now.getMinutes(),
	chour = now.getHours();
	if(chour > 12) 	nhour = chour % 12;
	else			nhour = chour;
	//Init the outer clock
	for (i=0;i<nhour;i++){
		if (marcadores_hora[i][6] == 0)	draw_square (marcadores_hora[i][0], marcadores_hora[i][1], marcadores_hora[i][2], marcadores_hora[i][3], marcadores_hora[i][4], marcadores_hora[i][5], '00' );
		else							draw_circle (marcadores_hora[i][0], marcadores_hora[i][1], marcadores_hora[i][2], 0, marcadores_hora[i][3], marcadores_hora[i][4], marcadores_hora[i][5], '00');
	}
	//Init the inner clock
	draw_square(inner_clock_pos, inner_clock_pos, inner_clock_size, inner_clock_size, 255, 255, 255 );
	for(var i= 0; i < cmin; i++) {
		for(var j= 0; j < 60; j++) {
			draw_square((j*inner_clock_second_size)+inner_clock_pos, (i*inner_clock_second_size)+inner_clock_pos, inner_clock_second_size, inner_clock_second_size, (195+i), Math.floor(j*4.25), '00' );
		}
	}
	for(var z= 0; z <= csec; z++) {
		draw_square((z*inner_clock_second_size)+inner_clock_pos, (cmin*inner_clock_second_size)+inner_clock_pos, inner_clock_second_size, inner_clock_second_size, (195+cmin), Math.floor(z*4.25), '00' );
	}
	return chour;
}