/**!
 * easyPieChart
 * Lightweight plugin to render simple, animated and retina optimized pie charts
 * @author Robert Fleischmann <rendro87@gmail.com> (http://robert-fleischmann.de)
 * @version 2.1.1
 **/

(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 0 and 1)
*/
var drawCircle = function(color, lineWidth, percent) {
percent = Math.min(Math.max(0, percent || 1), 1);

ctx.beginPath();
ctx.arc(0, 0, radius, 0, Math.PI * 2 * percent, false);

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);
};

/**
* 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 0 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
if (percent > 0) {
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: '#ef1e25',
trackColor: '#f9f9f9',
scaleColor: '#dfe0e0',
scaleLength: 5,
lineCap: 'round',
lineWidth: 3,
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() {
if (!$.data(this, 'easyPieChart')) {
$.data(this, 'easyPieChart', new EasyPieChart(this, options));
}
});
};

}));