;(function() {

    var _originalInit = $.circleProgress.defaults.init;

    $.circleProgress.defaults.init = function() {

        _originalInit.apply(this, arguments);

        this.handleEvents();

    };

    $.circleProgress.defaults.circleThreshold = 15;

    $.circleProgress.defaults.events = ['click', 'mousedown', 'mouseup', 'mousemove'];

    $.circleProgress.defaults.handleEvents = function() {

        var self = this,

            canvas = $(this.canvas);

        canvas.on(this.events.join(' '), function(e) {

            var offset = canvas.offset();

            var r = self.size / 2,

                x = e.pageX - offset.left - r, // translate coords ⏎

                y = e.pageY - offset.top - r, // to the circle center

                s = Math.sqrt(x * x + y * y), // calculate distance from center

                t = self.circleThreshold; // add some "threshold"

            // chech if the event has happened in the circle area

            if (s >= r - self.getThickness() - t && s <= r + t) {

                var m = (y > 0) ? 1 : -1, // sign modificator ⏎

                    a = m * Math.acos(x / s); // for current angle

                // translate startAngle to [0, 2 * π] range 

                var sa = self.startAngle,

                    π = Math.PI; // start angle

                sa = sa % (2 * π);

                sa = sa < 0 ? 2 * π + sa : sa;

                // calculate circle value for the event

                var v = (a - sa) / (2 * π);

                v = (v < 0) ? v + 1 : v;

​

                self.el.trigger('circle-' + e.type, [v, x, y, a]);

            }

        });

    };

})();

​

var config = {

    size: 150,

    value: 0.7,

    startAngle: -Math.PI

};

​

function setValue(e, v) {

    var instance = $(this).data('circle-progress');

    $(instance.canvas).stop(true, true);

    instance.drawFrame(v);

}

​

$('#circle-cl').circleProgress(config).on('circle-click', setValue);

$('#circle-md').circleProgress(config).on('circle-mousedown', setValue);

$('#circle-mm').circleProgress(config).on('circle-mousemove', setValue);

​

var customCircle = $('#circle-dr').circleProgress(config)

.on('circle-mousedown', function(e, v) {

    $(this).data('circle-progress').dragging = true;

    setValue.call(this, e, v);

})

.on('circle-mouseup', function(e, v) {

    $(this).data('circle-progress').dragging = false;

})

.on('circle-mousemove', function(e, v) {

    if ($(this).data('circle-progress').dragging) {

        setValue.call(this, e, v);

    }

});

​