A javascript clock [KO + Raphael]

A simple analog clock made with KnockoutJS and RaphaelJS

by jjperezaguinaga

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<div>
    <div id="clock"></div>
    <br/>
    <button data-bind="click: start, disable: hasStarted()">Start</button>
    <button data-bind="click: pause, disable: !hasStarted()">Pause</button>
    <button data-bind="click: reset">Reset</button>
    <button data-bind="click: increaseMinute">+ Minute</button>
    <button data-bind="click: increaseHour">+ Hour</button>
</div>

JavaScript

function Clock() {
    var self = this;

    var seconds, minutes, hours, paper, width = 100,
        height = 100;
    var midPoint = width / 2 + " " + height / 2;

    self.init = function () {
        paper = Raphael(document.getElementById("clock"), width, height);
        paper.circle(width * .4, height * .4, width * .4).transform("T10,10");

        seconds = paper.path("M" + midPoint + "L50 85").attr("stroke", "black");
        minutes = paper.path("M" + midPoint + "L50 80").attr("stroke", "blue");
        hours = paper.path("M" + midPoint + "L50 70").attr("stroke", "red");

        self.secondsRotation = ko.observable("-180");
        self.minutesRotation = ko.observable("-180");
        self.hoursRotation = ko.observable("-180");

        hours.transform("R" + self.hoursRotation() + " " + midPoint);
        minutes.transform("R" + self.minutesRotation() + " " + midPoint);
        seconds.transform("R" + self.secondsRotation() + " " + midPoint);
    }

    self.hour = ko.observable("00");
    self.minute = ko.observable("00");
    self.second = ko.observable("00");

    var formatNumber = function (n) {
        return (n).toString().length == 1 ? "0" + n : n;
    }

    var rotate = function (type, element) {
        var rotation = +type();
        type(rotation += 6);
        element.animate({
            transform: "R" + rotation + " " + midPoint
        }, 1000);
    }

    self.second.subscribe(function (second) {
        rotate(self.secondsRotation, seconds);
    });

    self.minute.subscribe(function (minute) {
        rotate(self.minutesRotation, minutes);
    });

    self.hour.subscribe(function (hour) {
        rotate(self.hoursRotation, hours);
    });

    self.hasStarted = ko.observable(false);

    self.increase = function () {
        var second = +self.second();
        var minute = +self.minute();
        var hour = +self.hour();
        self.second(formatNumber(++second % 60));
        self.minute(formatNumber((parseInt(second / 60) +...