From 268a0f5eba91ae570223c51bc26a4b57be7811c9 Mon Sep 17 00:00:00 2001
From: Andrew Letson <aletson@mainstreethost.com>
Date: Tue, 9 Feb 2016 15:40:08 -0500
Subject: [PATCH] Update circleprogress, eliminate need to redraw the entire
 dashboard on each new call. Closes #28.

t
---
 index.html                  |  90 +++++--
 js/jquery.circleprogress.js | 506 +++++++++++++++++++++++++-----------
 2 files changed, 423 insertions(+), 173 deletions(-)

diff --git a/index.html b/index.html
index 4a796fa..d10a8b2 100644
--- a/index.html
+++ b/index.html
@@ -141,6 +141,7 @@ <h4 class="modal-title" id="Settings">Settings</h4>
 	</div>
 	<script>
 	var zabbix;
+	var usedHosts = [];
 	$(document).ready(function() {
 	
 		$('#view-select-grid').click(function() {
@@ -151,10 +152,10 @@ <h4 class="modal-title" id="Settings">Settings</h4>
 			$('.view-grid-cols').attr('disabled', true);
 		});
 		$('.settings').click(function() {
-			filterHostsAndOutput(hosts); //Any settings change should trigger a redraw.
+			filterHostsAndOutput(hosts, 1); //Any settings change should trigger a redraw.
 		});
 		
-		zabbix = new $.zabbix ('http://zabbix.org/zabbix/api_jsonrpc.php', 'guest', ''); //Change zabbix.org to your server's IP, guest to a Zabbix user and the blank to the password
+		zabbix = new $.zabbix ('http://zabbix.com/zabbix/api_jsonrpc.php', 'guest', ''); //Change zabbix.org to your server's IP, guest to a Zabbix user and the blank to the password
 		if(zabbix.getApiVersion() >= '2.5.1') {
 			throw new Error('Zabbix has been updated, check the new documentation then update the code and Zabbix api version');
 			//API changes can be problematic. The current code seems to work well with 2.2, 2.4 and 2.5 (unreleased, used by zabbix.org/zabbix) version
@@ -164,7 +165,7 @@ <h4 class="modal-title" id="Settings">Settings</h4>
 	   filterHostsAndOutput(hosts);
 	   
 	   //TODO fix this. If the next API call starts before the last one finishes, the dashboard explodes and it's not pretty.
-	   setInterval(function() { var hosts = getHostsFromZabbix(zabbix); filterHostsAndOutput(hosts); }, 54000);
+	   setInterval(function() { var hosts = getHostsFromZabbix(zabbix); filterHostsAndOutput(hosts); }, 5000);
 	
 	});
 	
@@ -208,7 +209,10 @@ <h4 class="modal-title" id="Settings">Settings</h4>
 	    return false;
 	}
 	//This process takes the hosts retrieved from the API call and creates the view on the webpage.
-	function filterHostsAndOutput(hosts) {
+	function filterHostsAndOutput(hosts, redraw) {
+		if (typeof(redraw)==='undefined') {
+			redraw = 0;
+		}
 		var anError = 0;
 		var hostsCount = 0;
 		
@@ -217,8 +221,13 @@ <h4 class="modal-title" id="Settings">Settings</h4>
 		} else if ($('input:radio[name=view-select]:checked').val() == 'grid') {
 			columnWidth = 3; //If the grid view is selected but no value has been assigned for view-grid-cols
 		}
+		if(redraw == 1) {
+			$('#hosts-list').empty();
+			usedHosts = [];
+		}
 		
-		$('#hosts-list').empty();
+		//$('#hosts-list').empty();
+		var existingHosts = [];
 		$.each(hosts, function() { 
 			var thisHost = $(this); 
 			var thisHostObj = thisHost[0];
@@ -373,27 +382,60 @@ <h4 class="modal-title" id="Settings">Settings</h4>
 			
 			//TODO Check hostsCount % columnWidth to add <div class="row"></div> surrounding each row for better layout.
 			hostsCount++;
-			
-			if(!thisHostObj.error) {
-				//Build the server entry.
-				$('#hosts-list').append('<div class="col-md-' + columnWidth + '" id="' + thisHostObj.hostid +
-				'"><h4 style="text-align: center">' + thisHostObj.name + '<small> - ' + thisHostObj.os + '</small></h4><span class="circle" data-pct="' +
-				thisHostObj.avgCpuLoad + '"><strong></strong><span>' + thisHostObj.numProcesses +
-				' PROCS</span></span><div class="pull-right"><span class="circle" data-pct="' + thisHostObj.memPct +
-				'"><strong></strong><span>USED: ' + thisHostObj.usedMem.toFixed(1) + 'G / ' +
-				thisHostObj.totalMem.toFixed(1) + 'G' + '</span></span></div><br/><div class="row"><div class="col-md-6">PING: ' +
-				thisHostObj.agentPing + 'ms<br/>TRAFFIC: ' + thisHostObj.networkTraffic.toFixed(1) +
-				'KBps</div><div class="col-md-6"><span class="pull-right"><div class="panel-group" id="accordion-' + thisHostObj.hostid + '"><div class="panel ' + diskUsageClass + '"><div class="panel-heading"><div class="panel-title"><a data-toggle="collapse" data-parent="#accordion-' + thisHostObj.hostid + '" href="#collapser-' + thisHostObj.hostid + '">DISKS</a></div></div><div id="collapser-' + thisHostObj.hostid + '" class="panel-collapse collapse"><div class="panel-body">' + disks +
-				'</div></div></div></div></span></div></div></div>');
+			if ($.inArray(thisHostObj.hostid, usedHosts) !== -1) {
+				$("#" + thisHostObj.hostid).find(".cpu-circle").circleProgress('value', thisHostObj.avgCpuLoad);
+				$("#" + thisHostObj.hostid).find(".mem-circle").circleProgress('value', thisHostObj.memPct);
+				$("#" + thisHostObj.hostid).find(".process-count").text(thisHostObj.numProcesses + " PROCS");
+				$("#" + thisHostObj.hostid).find(".mem-count").text('USED: ' + thisHostObj.usedMem.toFixed(1) + 'G / ' + thisHostObj.totalMem.toFixed(1) + 'G');
+				$("#" + thisHostObj.hostid).find(".nw-stats").html('PING: ' + thisHostObj.agentPing + 'ms<br/>TRAFFIC: ' + thisHostObj.networkTraffic.toFixed(1) + 'KBps');
+				$("#" + thisHostObj.hostid).find(".disk-stats-panel").html(disks);
 			} else {
-				$('#hosts-list').append('<div class="col-md-' + columnWidth + ' blink" id="' + thisHostObj.hostid + '"><h3 style="text-align: center; font-weight: bolder">' +
-					thisHostObj.name + '</h3><h4 style="font-weight: bolder">' + thisHostObj.errorText + '</h4></div>');
+				//Host is not in the grid, append a new entry.
+				usedHosts.push(thisHostObj.hostid);
+				if(!thisHostObj.error) {
+					//Build the server entry.
+					$('#hosts-list').append('<div class="col-md-' + columnWidth + '" id="' + thisHostObj.hostid +
+					'"><h4 style="text-align: center">' + thisHostObj.name + '<small> - ' + thisHostObj.os + '</small></h4><span class="circle cpu-circle" data-pct="' +
+					thisHostObj.avgCpuLoad + '"><strong></strong><span class="process-count">' + thisHostObj.numProcesses +
+					' PROCS</span></span><div class="pull-right"><span class="circle mem-circle" data-pct="' + thisHostObj.memPct +
+					'"><strong></strong><span class="mem-count">USED: ' + thisHostObj.usedMem.toFixed(1) + 'G / ' +
+					thisHostObj.totalMem.toFixed(1) + 'G' + '</span></span></div><br/><div class="row"><div class="col-md-6 nw-stats">PING: ' +
+					thisHostObj.agentPing + 'ms<br/>TRAFFIC: ' + thisHostObj.networkTraffic.toFixed(1) +
+					'KBps</div><div class="col-md-6"><span class="pull-right"><div class="panel-group" id="accordion-' + thisHostObj.hostid + '"><div class="panel ' + 
+					diskUsageClass + ' disks-display"><div class="panel-heading"><div class="panel-title"><a data-toggle="collapse" data-parent="#accordion-' +
+					thisHostObj.hostid + '" href="#collapser-' + thisHostObj.hostid + '">DISKS</a></div></div><div id="collapser-' + thisHostObj.hostid + '" class="panel-collapse collapse"><div class="panel-body disk-stats-panel">' + disks +
+					'</div></div></div></div></span></div></div></div>');
+					
+					$('#' + thisHostObj.hostid).find('.circle').each(function() {
+						$(this).circleProgress({
+							value: $(this).attr('data-pct'),
+							fill: {gradient: ['#1EB33C', '#F72323']},
+							thickness: 15
+						}).on('circle-animation-progress', function (event, progress, stepValue) {
+							$(this).find('strong').html(String((100 * stepValue).toFixed(1)) + '<i>%</i>');
+						});
+					});
+				} else {
+					$('#hosts-list').append('<div class="col-md-' + columnWidth + ' blink" id="' + thisHostObj.hostid + '"><h3 style="text-align: center; font-weight: bolder">' +
+						thisHostObj.name + '</h3><h4 style="font-weight: bolder">' + thisHostObj.errorText + '</h4></div>');
+				}
+			}
+			if($.inArray(thisHostObj.hostid, existingHosts) === -1) {
+				existingHosts.push(thisHostObj.hostid);
 			}
 	
 	
 	
 	
 		});
+		//Remove hosts that Zabbix is no longer reporting.
+		$.each(hosts, function() {
+			if($.inArray($(this)[0].hostid, existingHosts) === -1) {
+				$('#' + $(this)[0].hostid).remove();
+				usedHosts.splice($.inArray($(this)[0].hostid, usedHosts), 1);
+			}
+		});
+		
 		//Play the tornado siren if a server is unreachable
 		if(anError === 1) { //We do this outside the for loop because we only want the sound to play...once.
 			var times = 3;
@@ -410,15 +452,7 @@ <h4 class="modal-title" id="Settings">Settings</h4>
 			repeat();
 		}
 	
-		$('.circle').each(function() {
-			$(this).circleProgress({
-				value: $(this).attr('data-pct'),
-				fill: {gradient: ['#1EB33C', '#F72323']},
-				thickness: 15
-			}).on('circle-animation-progress', function (event, progress, stepValue) {
-				$(this).find('strong').html(String((100 * stepValue).toFixed(1)) + '<i>%</i>');
-			});
-		});
+		
 	
 	
 	}
diff --git a/js/jquery.circleprogress.js b/js/jquery.circleprogress.js
index 0eed07e..9c6d1d6 100644
--- a/js/jquery.circleprogress.js
+++ b/js/jquery.circleprogress.js
@@ -1,34 +1,39 @@
 /*
- * jquery-circle-progress - jQuery Plugin to draw animated circular progress bars
- *
- * @author https://github.com/kottenator
- * @version 0.6.1
- */
+jquery-circle-progress - jQuery Plugin to draw animated circular progress bars
 
-$.circleProgress = {
-    // Default options (you may override them)
-    defaults: {
+URL: http://kottenator.github.io/jquery-circle-progress/
+Author: Rostyslav Bryzgunov <kottenator@gmail.com>
+Version: 1.1.3
+License: MIT
+*/
+(function($) {
+    function CircleProgress(config) {
+        this.init(config);
+    }
+
+    CircleProgress.prototype = {
+        //----------------------------------------------- public options -----------------------------------------------
         /**
          * This is the only required option. It should be from 0.0 to 1.0
-         * @type {float}
+         * @type {number}
          */
-        value: 0,
+        value: 0.0,
 
         /**
          * Size of the circle / canvas in pixels
-         * @type {int}
+         * @type {number}
          */
-        size: 100,
+        size: 100.0,
 
         /**
          * Initial angle for 0.0 value in radians
-         * @type {float}
+         * @type {number}
          */
         startAngle: -Math.PI,
 
         /**
-         * Width of the arc. By default it's calculated as 1/14 of size, but you may set it explicitly in pixels
-         * type {int|'auto'}
+         * Width of the arc. By default it's auto-calculated as 1/14 of size, but you may set it explicitly in pixels
+         * @type {number|string}
          */
         thickness: 'auto',
 
@@ -38,10 +43,11 @@ $.circleProgress = {
          *     - { color: '#3aeabb' }
          *     - { color: 'rgba(255, 255, 255, .3)' }
          *   - linear gradient (left to right):
-         *     - { gradient: ['#3aeabb', '#fdd250'] }
-         *     - { gradient: ['red', 'green', 'blue'] }
+         *     - { gradient: ['#3aeabb', '#fdd250'], gradientAngle: Math.PI / 4 }
+         *     - { gradient: ['red', 'green', 'blue'], gradientDirection: [x0, y0, x1, y1] }
          *   - image:
          *     - { image: 'http://i.imgur.com/pT0i89v.png' }
+         *     - { image: imageObject }
          *     - { color: 'lime', image: 'http://i.imgur.com/pT0i89v.png' } - color displayed until the image is loaded
          */
         fill: {
@@ -63,161 +69,371 @@ $.circleProgress = {
         },
 
         /**
-         * Should we start animation from 0.0 to value (direct) or from 1.0 to value (reversed)?
-         * By default - from 0.0 to value (direct)
-         * @type {bool}
+         * Default animation starts at 0.0 and ends at specified `value`. Let's call this direct animation.
+         * If you want to make reversed animation then you should set `animationStartValue` to 1.0.
+         * Also you may specify any other value from 0.0 to 1.0
+         * @type {number}
          */
-        reversedAnimation: false
-    }
-};
-
-// Renamed ease-in-out-cubic
-$.easing.circleProgressEasing = function(x, t, b, c, d) {
-    if ((t /= d / 2) < 1)
-        return c / 2 * t * t * t + b;
-    return c / 2 * ((t -= 2) * t * t + 2) + b;
-};
-
-/**
- * Draw animated circular progress bar.
- *
- * Appends <canvas> to the element or updates already appended one.
- *
- * If animated, throws 3 events:
- *
- *   - circle-animation-start(jqEvent)
- *   - circle-animation-progress(jqEvent, animationProgress, stepValue) - multiple event;
- *                                                                        animationProgress: from 0.0 to 1.0;
- *                                                                        stepValue: from 0.0 to value
- *   - circle-animation-end(jqEvent)
- *
- * @param options Example: { value: 0.75, size: 50, animation: false };
- *                you may set any of default options (see above);
- *                `animation` may be set to false;
- *                you may also use .circleProgress('widget') to get the canvas
- */
-$.fn.circleProgress = function(options) {
-    if (options == 'widget')
-        return this.data('circle-progress');
-
-    options = $.extend({}, $.circleProgress.defaults, options);
-
-    return this.each(function() {
-        var el = $(this),
-            size = options.size,
-            radius = size / 2,
-            thickness = size / 14,
-            value = options.value,
-            startAngle = options.startAngle,
-            emptyArcFill = options.emptyFill,
-            reversedAnimation = options.reversedAnimation,
-            arcFill;
-
-        if ($.isNumeric(options.thickness))
-            thickness = options.thickness;
-
-        // Prepare canvas
-        var canvas = el.data('circle-progress');
-
-        if (!canvas) {
-            canvas = $('<canvas>').prependTo(el)[0];
-            el.data('circle-progress', canvas);
-        }
+        animationStartValue: 0.0,
+
+        /**
+         * Reverse animation and arc draw
+         * @type {boolean}
+         */
+        reverse: false,
+
+        /**
+         * Arc line cap ('butt', 'round' or 'square')
+         * Read more: https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D.lineCap
+         * @type {string}
+         */
+        lineCap: 'butt',
+
+        //-------------------------------------- protected properties and methods --------------------------------------
+        /**
+         * @protected
+         */
+        constructor: CircleProgress,
+
+        /**
+         * Container element. Should be passed into constructor config
+         * @protected
+         * @type {jQuery}
+         */
+        el: null,
+
+        /**
+         * Canvas element. Automatically generated and prepended to the {@link CircleProgress.el container}
+         * @protected
+         * @type {HTMLCanvasElement}
+         */
+        canvas: null,
+
+        /**
+         * 2D-context of the {@link CircleProgress.canvas canvas}
+         * @protected
+         * @type {CanvasRenderingContext2D}
+         */
+        ctx: null,
+
+        /**
+         * Radius of the outer circle. Automatically calculated as {@link CircleProgress.size} / 2
+         * @protected
+         * @type {number}
+         */
+        radius: 0.0,
 
-        canvas.width = size;
-        canvas.height = size / 2;
+        /**
+         * Fill of the main arc. Automatically calculated, depending on {@link CircleProgress.fill} option
+         * @protected
+         * @type {string|CanvasGradient|CanvasPattern}
+         */
+        arcFill: null,
+
+        /**
+         * Last rendered frame value
+         * @protected
+         * @type {number}
+         */
+        lastFrameValue: 0.0,
+
+        /**
+         * Init/re-init the widget
+         * @param {object} config - Config
+         */
+        init: function(config) {
+            $.extend(this, config);
+            this.radius = this.size / 2;
+            this.initWidget();
+            this.initFill();
+            this.draw();
+        },
+
+        /**
+         * @protected
+         */
+        initWidget: function() {
+            var canvas = this.canvas = this.canvas || $('<canvas>').prependTo(this.el)[0];
+            canvas.width = this.size;
+            canvas.height = this.size / 2;
+            this.ctx = canvas.getContext('2d');
+        },
 
-        var ctx = canvas.getContext('2d');
+        /**
+         * This method sets {@link CircleProgress.arcFill}
+         * It could do this async (on image load)
+         * @protected
+         */
+        initFill: function() {
+            var self = this,
+                fill = this.fill,
+                ctx = this.ctx,
+                size = this.size;
+
+            if (!fill)
+                throw Error("The fill is not specified!");
+
+            if (fill.color)
+                this.arcFill = fill.color;
+
+            if (fill.gradient) {
+                var gr = fill.gradient;
+
+                if (gr.length == 1) {
+                    this.arcFill = gr[0];
+                } else if (gr.length > 1) {
+                    var ga = fill.gradientAngle || 0, // gradient direction angle; 0 by default
+                        gd = fill.gradientDirection || [
+                            size / 2 * (1 - Math.cos(ga)), // x0
+                            size / 2 * (1 + Math.sin(ga)), // y0
+                            size / 2 * (1 + Math.cos(ga)), // x1
+                            size / 2 * (1 - Math.sin(ga))  // y1
+                        ];
+
+                    var lg = ctx.createLinearGradient.apply(ctx, gd);
 
-        if (!options.fill)
-            throw Error("The fill is not specified!");
+                    for (var i = 0; i < gr.length; i++) {
+                        var color = gr[i],
+                            pos = i / (gr.length - 1);
 
-        if (options.fill.color)
-            arcFill = options.fill.color;
+                        if ($.isArray(color)) {
+                            pos = color[1];
+                            color = color[0];
+                        }
 
-        if (options.fill.gradient) {
-            var gr = options.fill.gradient;
-            if (gr.length == 1) {
-                arcFill = gr[0];
-            } else if (gr.length > 1) {
-                var lg = ctx.createLinearGradient(0, 0, size, 0);
-                for (var i = 0; i < gr.length; i++)
-                    lg.addColorStop(i / (gr.length - 1), gr[i]);
-                arcFill = lg;
+                        lg.addColorStop(pos, color);
+                    }
+
+                    this.arcFill = lg;
+                }
+            }
+
+            if (fill.image) {
+                var img;
+
+                if (fill.image instanceof Image) {
+                    img = fill.image;
+                } else {
+                    img = new Image();
+                    img.src = fill.image;
+                }
+
+                if (img.complete)
+                    setImageFill();
+                else
+                    img.onload = setImageFill;
             }
-        }
 
-        if (options.fill.image) {
-            var img = new Image();
-            img.src = options.fill.image;
-            img.onload = function() {
+            function setImageFill() {
                 var bg = $('<canvas>')[0];
-                bg.width = size;
-                bg.height = size;
+                bg.width = self.size;
+                bg.height = self.size;
                 bg.getContext('2d').drawImage(img, 0, 0, size, size);
-                arcFill = ctx.createPattern(bg, 'no-repeat');
-
-                // we need to redraw the arc when there is no animation
-                if (!options.animation)
-                    draw(value);
+                self.arcFill = self.ctx.createPattern(bg, 'no-repeat');
+                self.drawFrame(self.lastFrameValue);
             }
-        }
+        },
 
-        if (options.animation)
-            drawAnimated(value);
-        else
-            draw(value);
+        draw: function() {
+            if (this.animation)
+                this.drawAnimated(this.value);
+            else
+                this.drawFrame(this.value);
+        },
 
-        function draw(v) {
-            ctx.clearRect(0, 0, size, size);
-            drawArc(v);
-            drawEmptyArc(v);
-        }
+        /**
+         * @protected
+         * @param {number} v - Frame value
+         */
+        drawFrame: function(v) {
+            this.lastFrameValue = v;
+            this.ctx.clearRect(0, 0, this.size, this.size);
+            this.drawEmptyArc(v);
+            this.drawArc(v);
+        },
+
+        /**
+         * @protected
+         * @param {number} v - Frame value
+         */
+        drawArc: function(v) {
+            var ctx = this.ctx,
+                r = this.radius,
+                t = this.getThickness(),
+                a = this.startAngle;
 
-        function drawArc(v) {
             ctx.save();
             ctx.beginPath();
-            ctx.arc(radius, radius, radius - thickness / 2, startAngle, startAngle + Math.PI * v);
-            ctx.lineWidth = thickness;
-            ctx.strokeStyle = arcFill;
+
+            if (!this.reverse) {
+                ctx.arc(r, r, r - t / 2, a, a + Math.PI * v);
+            } else {
+                ctx.arc(r, r, r - t / 2, a - Math.PI * v, a);
+            }
+
+            ctx.lineWidth = t;
+            ctx.lineCap = this.lineCap;
+            ctx.strokeStyle = this.arcFill;
             ctx.stroke();
             ctx.restore();
-        }
+        },
+
+        /**
+         * @protected
+         * @param {number} v - Frame value
+         */
+        drawEmptyArc: function(v) {
+            var ctx = this.ctx,
+                r = this.radius,
+                t = this.getThickness(),
+                a = this.startAngle;
 
-        function drawEmptyArc(v) {
-            ctx.save();
             if (v < 1) {
+                ctx.save();
                 ctx.beginPath();
-                if (v <= 0)
-                    ctx.arc(radius, radius, radius - thickness / 2, 0, Math.PI * 2);
-                else
-                    ctx.arc(radius, radius, radius - thickness / 2, startAngle + Math.PI * v, startAngle);
-                ctx.lineWidth = thickness;
-                ctx.strokeStyle = emptyArcFill;
+
+                if (v <= 0) {
+                    ctx.arc(r, r, r - t / 2, 0, Math.PI * 2);
+                } else {
+                    if (!this.reverse) {
+                        ctx.arc(r, r, r - t / 2, a + Math.PI * 2 * v, a);
+                    } else {
+                        ctx.arc(r, r, r - t / 2, a, a - Math.PI * 2 * v);
+                    }
+                }
+
+                ctx.lineWidth = t;
+                ctx.strokeStyle = this.emptyFill;
                 ctx.stroke();
+                ctx.restore();
             }
-            ctx.restore();
-        }
+        },
 
-        function drawAnimated(v) {
+        /**
+         * @protected
+         * @param {number} v - Value
+         */
+        drawAnimated: function(v) {
+            var self = this,
+                el = this.el,
+                canvas = $(this.canvas);
+
+            // stop previous animation before new "start" event is triggered
+            canvas.stop(true, false);
             el.trigger('circle-animation-start');
 
-            $(canvas).css({ progress: 0 }).animate({ progress: reversedAnimation ? 1 - v : v },
-                $.extend({}, options.animation, {
-                    step: function(p) {
-                        var animationProgress = reversedAnimation ? p / (1 - v) : p / v,
-                            stepValue = reversedAnimation ? 1 - p : p;
+            canvas
+                .css({ animationProgress: 0 })
+                .animate({ animationProgress: 1 }, $.extend({}, this.animation, {
+                    step: function (animationProgress) {
+                        var stepValue = self.animationStartValue * (1 - animationProgress) + v * animationProgress;
+                        self.drawFrame(stepValue);
+                        el.trigger('circle-animation-progress', [animationProgress, stepValue]);
+                    }
+                }))
+                .promise()
+                .always(function() {
+                    // trigger on both successful & failure animation end
+                    el.trigger('circle-animation-end');
+                });
+        },
 
-                        draw(stepValue);
+        /**
+         * @protected
+         * @returns {number}
+         */
+        getThickness: function() {
+            return $.isNumeric(this.thickness) ? this.thickness : this.size / 14;
+        },
 
-                        el.trigger('circle-animation-progress', [animationProgress, stepValue]);
-                    },
+        getValue: function() {
+            return this.value;
+        },
 
-                    complete: function() {
-                        el.trigger('circle-animation-end');
-                    }
-                })
-            );
+        setValue: function(newValue) {
+            if (this.animation)
+                this.animationStartValue = this.lastFrameValue;
+            this.value = newValue;
+            this.draw();
+        }
+    };
+
+    //-------------------------------------------- Initiating jQuery plugin --------------------------------------------
+    $.circleProgress = {
+        // Default options (you may override them)
+        defaults: CircleProgress.prototype
+    };
+
+    // ease-in-out-cubic
+    $.easing.circleProgressEasing = function(x, t, b, c, d) {
+        if ((t /= d / 2) < 1)
+            return c / 2 * t * t * t + b;
+        return c / 2 * ((t -= 2) * t * t + 2) + b;
+    };
+
+    /**
+     * Draw animated circular progress bar.
+     *
+     * Appends <canvas> to the element or updates already appended one.
+     *
+     * If animated, throws 3 events:
+     *
+     *   - circle-animation-start(jqEvent)
+     *   - circle-animation-progress(jqEvent, animationProgress, stepValue) - multiple event;
+     *                                                                        animationProgress: from 0.0 to 1.0;
+     *                                                                        stepValue: from 0.0 to value
+     *   - circle-animation-end(jqEvent)
+     *
+     * @param configOrCommand - Config object or command name
+     *     Example: { value: 0.75, size: 50, animation: false };
+     *     you may set any public property (see above);
+     *     `animation` may be set to false;
+     *     you may use .circleProgress('widget') to get the canvas
+     *     you may use .circleProgress('value', newValue) to dynamically update the value
+     *
+     * @param commandArgument - Some commands (like 'value') may require an argument
+     */
+    $.fn.circleProgress = function(configOrCommand, commandArgument) {
+        var dataName = 'circle-progress',
+            firstInstance = this.data(dataName);
+
+        if (configOrCommand == 'widget') {
+            if (!firstInstance)
+                throw Error('Calling "widget" method on not initialized instance is forbidden');
+            return firstInstance.canvas;
         }
-    });
-};
\ No newline at end of file
+
+        if (configOrCommand == 'value') {
+            if (!firstInstance)
+                throw Error('Calling "value" method on not initialized instance is forbidden');
+            if (typeof commandArgument == 'undefined') {
+                return firstInstance.getValue();
+            } else {
+                var newValue = arguments[1];
+                return this.each(function() {
+                    $(this).data(dataName).setValue(newValue);
+                });
+            }
+        }
+
+        return this.each(function() {
+            var el = $(this),
+                instance = el.data(dataName),
+                config = $.isPlainObject(configOrCommand) ? configOrCommand : {};
+
+            if (instance) {
+                instance.init(config);
+            } else {
+                var initialConfig = $.extend({}, el.data());
+                if (typeof initialConfig.fill == 'string')
+                    initialConfig.fill = JSON.parse(initialConfig.fill);
+                if (typeof initialConfig.animation == 'string')
+                    initialConfig.animation = JSON.parse(initialConfig.animation);
+                config = $.extend(initialConfig, config);
+                config.el = el;
+                instance = new CircleProgress(config);
+                el.data(dataName, instance);
+            }
+        });
+    };
+})(jQuery);