text: /**!
   * easyPieChart
   * Lightweight plugin to render simple, animated and retina optimized pie charts
   *
   * @license Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php) and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses.
   * @author Robert Fleischmann <rendro87@gmail.com> (http://robert-fleischmann.de)
   * @version 2.1.3
   **/
  
  (function(root, factory) {
      if(typeof exports === 'object') {
          module.exports = factory(require('jquery'));
      }
      else if(typeof define === 'function' && define.amd) {
          define('EasyPieChart', ['jquery'], factory);
      }
      else {
          factory(root.jQuery);
      }
  }(this, function($) {
  /**
   * Renderer to render the chart on a canvas object
   * @param {DOMElement} el      DOM element to host the canvas (root of the plugin)
   * @param {object}     options options object of the plugin
   */
  var CanvasRenderer = function(el, options) {
  	var cachedBackground;
  	var canvas = document.createElement('canvas');
  
  	if (typeof(G_vmlCanvasManager) !== 'undefined') {
  		G_vmlCanvasManager.initElement(canvas);
  	}
  
  	var ctx = canvas.getContext('2d');
  
  	canvas.width = canvas.height = options.size;
  
  	el.appendChild(canvas);
  
  	// canvas on retina devices
  	var scaleBy = 1;
  	if (window.devicePixelRatio > 1) {
  		scaleBy = window.devicePixelRatio;
  		canvas.style.width = canvas.style.height = [options.size, 'px'].join('');
  		canvas.width = canvas.height = options.size * scaleBy;
  		ctx.scale(scaleBy, scaleBy);
  	}
  
  	// move 0,0 coordinates to the center
  	ctx.translate(options.size / 2, options.size / 2);
  
  	// rotate canvas -90deg
  	ctx.rotate((-1 / 2 + options.rotate / 180) * Math.PI);
  
  	var radius = (options.size - options.lineWidth) / 2;
  	if (options.scaleColor && options.scaleLength) {
  		radius -= options.scaleLength + 2; // 2 is the distance between scale and bar
  	}
  
  	// IE polyfill for Date
  	Date.now = Date.now || function() {
  		return +(new Date());
  	};
  
  	/**
  	 * Draw a circle around the center of the canvas
  	 * @param {strong} color     Valid CSS color string
  	 * @param {number} lineWidth Width of the line in px
  	 * @param {number} percent   Percentage to draw (float between -1 and 1)
  	 */
  	var drawCircle = function(color, lineWidth, percent) {
  		percent = Math.min(Math.max(-1, percent || 0), 1);
  		var isNegative = percent <= 0 ? true : false;
  
  		ctx.beginPath();
  		ctx.arc(0, 0, radius, 0, Math.PI * 2 * percent, isNegative);
  
  		ctx.strokeStyle = color;
  		ctx.lineWidth = lineWidth;
  
  		ctx.stroke();
  	};
  
  	/**
  	 * Draw the scale of the chart
  	 */
  	var drawScale = function() {
  		var offset;
  		var length;
  		var i = 24;
  
  		ctx.lineWidth = 1
  		ctx.fillStyle = options.scaleColor;
  
  		ctx.save();
  		for (var i = 24; i > 0; --i) {
  			if (i%6 === 0) {
  				length = options.scaleLength;
  				offset = 0;
  			} else {
  				length = options.scaleLength * .6;
  				offset = options.scaleLength - length;
  			}
  			ctx.fillRect(-options.size/2 + offset, 0, length, 1);
  			ctx.rotate(Math.PI / 12);
  		}
  		ctx.restore();
  	};
  
  	/**
  	 * Request animation frame wrapper with polyfill
  	 * @return {function} Request animation frame method or timeout fallback
  	 */
  	var reqAnimationFrame = (function() {
  		return  window.requestAnimationFrame ||
  				window.webkitRequestAnimationFrame ||
  				window.mozRequestAnimationFrame ||
  				function(callback) {
  					window.setTimeout(callback, 1000 / 60);
  				};
  	}());
  
  	/**
  	 * Draw the background of the plugin including the scale and the track
  	 */
  	var drawBackground = function() {
  		options.scaleColor && drawScale();
  		options.trackColor && drawCircle(options.trackColor, options.lineWidth, 1);
  	};
  
  	/**
  	 * Clear the complete canvas
  	 */
  	this.clear = function() {
  		ctx.clearRect(options.size / -2, options.size / -2, options.size, options.size);
  	};
  
  	/**
  	 * Draw the complete chart
  	 * @param {number} percent Percent shown by the chart between -100 and 100
  	 */
  	this.draw = function(percent) {
  		// do we need to render a background
  		if (!!options.scaleColor || !!options.trackColor) {
  			// getImageData and putImageData are supported
  			if (ctx.getImageData && ctx.putImageData) {
  				if (!cachedBackground) {
  					drawBackground();
  					cachedBackground = ctx.getImageData(0, 0, options.size * scaleBy, options.size * scaleBy);
  				} else {
  					ctx.putImageData(cachedBackground, 0, 0);
  				}
  			} else {
  				this.clear();
  				drawBackground();
  			}
  		} else {
  			this.clear();
  		}
  
  		ctx.lineCap = options.lineCap;
  
  		// if barcolor is a function execute it and pass the percent as a value
  		var color;
  		if (typeof(options.barColor) === 'function') {
  			color = options.barColor(percent);
  		} else {
  			color = options.barColor;
  		}
  
  		// draw bar
  		drawCircle(color, options.lineWidth, percent / 100);
  	}.bind(this);
  
  	/**
  	 * Animate from some percent to some other percentage
  	 * @param {number} from Starting percentage
  	 * @param {number} to   Final percentage
  	 */
  	this.animate = function(from, to) {
  		var startTime = Date.now();
  		options.onStart(from, to);
  		var animation = function() {
  			var process = Math.min(Date.now() - startTime, options.animate);
  			var currentValue = options.easing(this, process, from, to - from, options.animate);
  			this.draw(currentValue);
  			options.onStep(from, to, currentValue);
  			if (process >= options.animate) {
  				options.onStop(from, to);
  			} else {
  				reqAnimationFrame(animation);
  			}
  		}.bind(this);
  
  		reqAnimationFrame(animation);
  	}.bind(this);
  };
  
  var EasyPieChart = function(el, opts) {
  	var defaultOptions = {
  		barColor: '#4aa9e9',
  		trackColor: '#eceef1',
  		scaleColor: '#626262',
  		scaleLength: 5,
  		lineCap: 'round',
  		lineWidth: 5,
  		size: 110,
  		rotate: 0,
  		animate: 1000,
  		easing: function (x, t, b, c, d) { // more can be found here: http://gsgd.co.uk/sandbox/jquery/easing/
  			t = t / (d/2);
  			if (t < 1) {
  				return c / 2 * t * t + b;
  			}
  			return -c/2 * ((--t)*(t-2) - 1) + b;
  		},
  		onStart: function(from, to) {
  			return;
  		},
  		onStep: function(from, to, currentValue) {
  			return;
  		},
  		onStop: function(from, to) {
  			return;
  		}
  	};
  
  	// detect present renderer
  	if (typeof(CanvasRenderer) !== 'undefined') {
  		defaultOptions.renderer = CanvasRenderer;
  	} else if (typeof(SVGRenderer) !== 'undefined') {
  		defaultOptions.renderer = SVGRenderer;
  	} else {
  		throw new Error('Please load either the SVG- or the CanvasRenderer');
  	}
  
  	var options = {};
  	var currentValue = 0;
  
  	/**
  	 * Initialize the plugin by creating the options object and initialize rendering
  	 */
  	var init = function() {
  		this.el = el;
  		this.options = options;
  
  		// merge user options into default options
  		for (var i in defaultOptions) {
  			if (defaultOptions.hasOwnProperty(i)) {
  				options[i] = opts && typeof(opts[i]) !== 'undefined' ? opts[i] : defaultOptions[i];
  				if (typeof(options[i]) === 'function') {
  					options[i] = options[i].bind(this);
  				}
  			}
  		}
  
  		// check for jQuery easing
  		if (typeof(options.easing) === 'string' && typeof(jQuery) !== 'undefined' && jQuery.isFunction(jQuery.easing[options.easing])) {
  			options.easing = jQuery.easing[options.easing];
  		} else {
  			options.easing = defaultOptions.easing;
  		}
  
  		// create renderer
  		this.renderer = new options.renderer(el, options);
  
  		// initial draw
  		this.renderer.draw(currentValue);
  
  		// initial update
  		if (el.dataset && el.dataset.percent) {
  			this.update(parseFloat(el.dataset.percent));
  		} else if (el.getAttribute && el.getAttribute('data-percent')) {
  			this.update(parseFloat(el.getAttribute('data-percent')));
  		}
  	}.bind(this);
  
  	/**
  	 * Update the value of the chart
  	 * @param  {number} newValue Number between 0 and 100
  	 * @return {object}          Instance of the plugin for method chaining
  	 */
  	this.update = function(newValue) {
  		newValue = parseFloat(newValue);
  		if (options.animate) {
  			this.renderer.animate(currentValue, newValue);
  		} else {
  			this.renderer.draw(newValue);
  		}
  		currentValue = newValue;
  		return this;
  	}.bind(this);
  
  	init();
  };
  
  $.fn.easyPieChart = function(options) {
  	return this.each(function() {
  		var instanceOptions;
  
  		if (!$.data(this, 'easyPieChart')) {
  			instanceOptions = $.extend({}, options, $(this).data());
  			$.data(this, 'easyPieChart', new EasyPieChart(this, instanceOptions));
  		}
  	});
  };
  
  }));
  