var canvas, c, bg, t, h, m, s, t, t2;

function start(){
	canvas = Raphael( "clock", 100, 150);
	bg = canvas.image("/imagens/clock.png", 0, 0, 100, 100);
	// for hours
	h = canvas.path("M50 50L50 23");
	h.attr({stroke: "#728187", "stroke-width": 2 });
	// for mins
	m = canvas.path("M50 50L50 11");
	m.attr({ stroke: "#728187", "stroke-width": 2 });
	// for seconds
	s = canvas.path("M50 62L50 9");
	s.attr({ stroke: "#728187", "stroke-width": 1 });

	c = canvas.circle(50, 50, 2);
	c.attr({fill: "#2c4d55", stroke: "#11424e"});

	t2 = canvas.text(50, 125, "--:--:--");
	t = canvas.text(50, 138, "--/--/----");

	setInterval("moveSec()",1000);
}

function pad2(number) {
     return (number < 10 ? '0' : '') + number

}

function calcTime(offset) {

    // create Date object for current location
    d = new Date();

    // convert to msec
    // add local time zone offset
    // get UTC time in msec
    utc = d.getTime() + (d.getTimezoneOffset() * 60000);

    // create new Date object for different city
    // using supplied offset
    nd = new Date(utc + (3600000*offset));

    // return time as a string
    return pad2(nd.getDate()) + "/" + pad2(nd.getMonth()) + "/" + pad2(nd.getFullYear());
}

function moveSec()
{
	var date = new Date();
	var sec = date.getUTCSeconds();
	s.rotate(6*sec, 50, 50);
	var mins = date.getUTCMinutes();
	m.rotate(6*mins, 50, 50);
	var hrs = date.getUTCHours() - 3;
	h.rotate(30*hrs+(mins/3), 50, 50);
	//c.scale(sec/3, sec/3);

	t.attr("text", calcTime(-3));
	t2.attr("text", pad2(hrs)+":"+pad2(mins)+":"+pad2(sec));
}

$(function(){

	start();
	$("#hour").change(function(){
		h.attr({stroke: $(this).val()});
	});
	$("#mins").change(function(){
		m.attr({stroke: $(this).val()});
	});
	$("#secs").change(function(){
		s.attr({stroke: $(this).val()});
	});

});