/* Javascript plotting library for jQuery, version 0.8.1.

Copyright (c) 2007-2013 IOLA and Ole Laursen.

Licensed under the MIT license.

*/

// first an inline dependency, jquery.colorhelpers.js, we inline it here

// for convenience

/* Plugin for jQuery for working with colors.

 *

 * Version 1.1.

 *

 * Inspiration from jQuery color animation plugin by John Resig.

 *

 * Released under the MIT license by Ole Laursen, October 2009.

 *

 * Examples:

 *

 *   $.color.parse("#fff").scale('rgb', 0.25).add('a', -0.5).toString()

 *   var c = $.color.extract($("#mydiv"), 'background-color');

 *   console.log(c.r, c.g, c.b, c.a);

 *   $.color.make(100, 50, 25, 0.4).toString() // returns "rgba(100,50,25,0.4)"

 *

 * Note that .scale() and .add() return the same modified object

 * instead of making a new one.

 *

 * V. 1.1: Fix error handling so e.g. parsing an empty string does

 * produce a color rather than just crashing.

 */

(function(B){B.color={};B.color.make=function(F,E,C,D){var G={};G.r=F||0;G.g=E||0;G.b=C||0;G.a=D!=null?D:1;G.add=function(J,I){for(var H=0;H<J.length;++H){G[J.charAt(H)]+=I}return G.normalize()};G.scale=function(J,I){for(var H=0;H<J.length;++H){G[J.charAt(H)]*=I}return G.normalize()};G.toString=function(){if(G.a>=1){return"rgb("+[G.r,G.g,G.b].join(",")+")"}else{return"rgba("+[G.r,G.g,G.b,G.a].join(",")+")"}};G.normalize=function(){function H(J,K,I){return K<J?J:(K>I?I:K)}G.r=H(0,parseInt(G.r),255);G.g=H(0,parseInt(G.g),255);G.b=H(0,parseInt(G.b),255);G.a=H(0,G.a,1);return G};G.clone=function(){return B.color.make(G.r,G.b,G.g,G.a)};return G.normalize()};B.color.extract=function(D,C){var E;do{E=D.css(C).toLowerCase();if(E!=""&&E!="transparent"){break}D=D.parent()}while(!B.nodeName(D.get(0),"body"));if(E=="rgba(0, 0, 0, 0)"){E="transparent"}return B.color.parse(E)};B.color.parse=function(F){var E,C=B.color.make;if(E=/rgb\(\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*\)/.exec(F)){return C(parseInt(E[1],10),parseInt(E[2],10),parseInt(E[3],10))}if(E=/rgba\(\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]+(?:\.[0-9]+)?)\s*\)/.exec(F)){return C(parseInt(E[1],10),parseInt(E[2],10),parseInt(E[3],10),parseFloat(E[4]))}if(E=/rgb\(\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*\)/.exec(F)){return C(parseFloat(E[1])*2.55,parseFloat(E[2])*2.55,parseFloat(E[3])*2.55)}if(E=/rgba\(\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\s*\)/.exec(F)){return C(parseFloat(E[1])*2.55,parseFloat(E[2])*2.55,parseFloat(E[3])*2.55,parseFloat(E[4]))}if(E=/#([a-fA-F0-9]{2})([a-fA-F0-9]{2})([a-fA-F0-9]{2})/.exec(F)){return C(parseInt(E[1],16),parseInt(E[2],16),parseInt(E[3],16))}if(E=/#([a-fA-F0-9])([a-fA-F0-9])([a-fA-F0-9])/.exec(F)){return C(parseInt(E[1]+E[1],16),parseInt(E[2]+E[2],16),parseInt(E[3]+E[3],16))}var D=B.trim(F).toLowerCase();if(D=="transparent"){return C(255,255,255,0)}else{E=A[D]||[0,0,0];return C(E[0],E[1],E[2])}};var A={aqua:[0,255,255],azure:[240,255,255],beige:[245,245,220],black:[0,0,0],blue:[0,0,255],brown:[165,42,42],cyan:[0,255,255],darkblue:[0,0,139],darkcyan:[0,139,139],darkgrey:[169,169,169],darkgreen:[0,100,0],darkkhaki:[189,183,107],darkmagenta:[139,0,139],darkolivegreen:[85,107,47],darkorange:[255,140,0],darkorchid:[153,50,204],darkred:[139,0,0],darksalmon:[233,150,122],darkviolet:[148,0,211],fuchsia:[255,0,255],gold:[255,215,0],green:[0,128,0],indigo:[75,0,130],khaki:[240,230,140],lightblue:[173,216,230],lightcyan:[224,255,255],lightgreen:[144,238,144],lightgrey:[211,211,211],lightpink:[255,182,193],lightyellow:[255,255,224],lime:[0,255,0],magenta:[255,0,255],maroon:[128,0,0],navy:[0,0,128],olive:[128,128,0],orange:[255,165,0],pink:[255,192,203],purple:[128,0,128],violet:[128,0,128],red:[255,0,0],silver:[192,192,192],white:[255,255,255],yellow:[255,255,0]}})(jQuery);

// the actual Flot code

(function($) {

	// Cache the prototype hasOwnProperty for faster access

	var hasOwnProperty = Object.prototype.hasOwnProperty;

	///////////////////////////////////////////////////////////////////////////

	// The Canvas object is a wrapper around an HTML5 <canvas> tag.

	//

	// @constructor

	// @param {string} cls List of classes to apply to the canvas.

	// @param {element} container Element onto which to append the canvas.

	//

	// Requiring a container is a little iffy, but unfortunately canvas

	// operations don't work unless the canvas is attached to the DOM.

	function Canvas(cls, container) {

		var element = container.children("." + cls)[0];

		if (element == null) {

			element = document.createElement("canvas");

			element.className = cls;

			$(element).css({ direction: "ltr", position: "absolute", left: 0, top: 0 })

				.appendTo(container);

			// If HTML5 Canvas isn't available, fall back to [Ex|Flash]canvas

			if (!element.getContext) {

				if (window.G_vmlCanvasManager) {

					element = window.G_vmlCanvasManager.initElement(element);

				} else {

					throw new Error("Canvas is not available. If you're using IE with a fall-back such as Excanvas, then there's either a mistake in your conditional include, or the page has no DOCTYPE and is rendering in Quirks Mode.");

				}

			}

		}

		this.element = element;

		var context = this.context = element.getContext("2d");

		// Determine the screen's ratio of physical to device-independent

		// pixels.  This is the ratio between the canvas width that the browser

		// advertises and the number of pixels actually present in that space.

		// The iPhone 4, for example, has a device-independent width of 320px,

		// but its screen is actually 640px wide.  It therefore has a pixel

		// ratio of 2, while most normal devices have a ratio of 1.

		var devicePixelRatio = window.devicePixelRatio || 1,

			backingStoreRatio =

				context.webkitBackingStorePixelRatio ||

				context.mozBackingStorePixelRatio ||

				context.msBackingStorePixelRatio ||

				context.oBackingStorePixelRatio ||

				context.backingStorePixelRatio || 1;

		this.pixelRatio = devicePixelRatio / backingStoreRatio;

		// Size the canvas to match the internal dimensions of its container

		this.resize(container.width(), container.height());

		// Collection of HTML div layers for text overlaid onto the canvas

		this.textContainer = null;

		this.text = {};

		// Cache of text fragments and metrics, so we can avoid expensively

		// re-calculating them when the plot is re-rendered in a loop.

		this._textCache = {};

	}

	// Resizes the canvas to the given dimensions.

	//

	// @param {number} width New width of the canvas, in pixels.

	// @param {number} width New height of the canvas, in pixels.

	Canvas.prototype.resize = function(width, height) {

		if (width <= 0 || height <= 0) {

			throw new Error("Invalid dimensions for plot, width = " + width + ", height = " + height);

		}

		var element = this.element,

			context = this.context,

			pixelRatio = this.pixelRatio;

		// Resize the canvas, increasing its density based on the display's

		// pixel ratio; basically giving it more pixels without increasing the

		// size of its element, to take advantage of the fact that retina

		// displays have that many more pixels in the same advertised space.

		// Resizing should reset the state (excanvas seems to be buggy though)

		if (this.width != width) {

			element.width = width * pixelRatio;

			element.style.width = width + "px";

			this.width = width;

		}

		if (this.height != height) {

			element.height = height * pixelRatio;

			element.style.height = height + "px";

			this.height = height;

		}

		// Save the context, so we can reset in case we get replotted.  The

		// restore ensure that we're really back at the initial state, and

		// should be safe even if we haven't saved the initial state yet.

		context.restore();

		context.save();

		// Scale the coordinate space to match the display density; so even though we

		// may have twice as many pixels, we still want lines and other drawing to

		// appear at the same size; the extra pixels will just make them crisper.

		context.scale(pixelRatio, pixelRatio);

	};

	// Clears the entire canvas area, not including any overlaid HTML text

	Canvas.prototype.clear = function() {

		this.context.clearRect(0, 0, this.width, this.height);

	};

	// Finishes rendering the canvas, including managing the text overlay.

	Canvas.prototype.render = function() {

		var cache = this._textCache;

		// For each text layer, add elements marked as active that haven't

		// already been rendered, and remove those that are no longer active.

		for (var layerKey in cache) {

			if (hasOwnProperty.call(cache, layerKey)) {

				var layer = this.getTextLayer(layerKey),

					layerCache = cache[layerKey];

				layer.hide();

				for (var styleKey in layerCache) {

					if (hasOwnProperty.call(layerCache, styleKey)) {

						var styleCache = layerCache[styleKey];

						for (var key in styleCache) {

							if (hasOwnProperty.call(styleCache, key)) {

								var positions = styleCache[key].positions;

								for (var i = 0, position; position = positions[i]; i++) {

									if (position.active) {

										if (!position.rendered) {

											layer.append(position.element);

											position.rendered = true;

										}

									} else {

										positions.splice(i--, 1);

										if (position.rendered) {

											position.element.detach();

										}

									}

								}

								if (positions.length == 0) {

									delete styleCache[key];

								}

							}

						}

					}

				}

				layer.show();

			}

		}

	};

	// Creates (if necessary) and returns the text overlay container.

	//

	// @param {string} classes String of space-separated CSS classes used to

	//     uniquely identify the text layer.

	// @return {object} The jQuery-wrapped text-layer div.

	Canvas.prototype.getTextLayer = function(classes) {

		var layer = this.text[classes];

		// Create the text layer if it doesn't exist

		if (layer == null) {

			// Create the text layer container, if it doesn't exist

			if (this.textContainer == null) {

				this.textContainer = $("<div class='flot-text'></div>")

					.css({

						position: "absolute",

						top: 0,

						left: 0,

						bottom: 0,

						right: 0,

						'font-size': "smaller",

						color: "#545454"

					})

					.insertAfter(this.element);

			}

			layer = this.text[classes] = $("<div></div>")

				.addClass(classes)

				.css({

					position: "absolute",

					top: 0,

					left: 0,

					bottom: 0,

					right: 0

				})

				.appendTo(this.textContainer);

		}

		return layer;

	};

	// Creates (if necessary) and returns a text info object.

	//

	// The object looks like this:

	//

	// {

	//     width: Width of the text's wrapper div.

	//     height: Height of the text's wrapper div.

	//     element: The jQuery-wrapped HTML div containing the text.

	//     positions: Array of positions at which this text is drawn.

	// }

	//

	// The positions array contains objects that look like this:

	//

	// {

	//     active: Flag indicating whether the text should be visible.

	//     rendered: Flag indicating whether the text is currently visible.

	//     element: The jQuery-wrapped HTML div containing the text.

	//     x: X coordinate at which to draw the text.

	//     y: Y coordinate at which to draw the text.

	// }

	//

	// Each position after the first receives a clone of the original element.

	//

	// The idea is that that the width, height, and general 'identity' of the

	// text is constant no matter where it is placed; the placements are a

	// secondary property.

	//

	// Canvas maintains a cache of recently-used text info objects; getTextInfo

	// either returns the cached element or creates a new entry.

	//

	// @param {string} layer A string of space-separated CSS classes uniquely

	//     identifying the layer containing this text.

	// @param {string} text Text string to retrieve info for.

	// @param {(string|object)=} font Either a string of space-separated CSS

	//     classes or a font-spec object, defining the text's font and style.

	// @param {number=} angle Angle at which to rotate the text, in degrees.

	//     Angle is currently unused, it will be implemented in the future.

	// @param {number=} width Maximum width of the text before it wraps.

	// @return {object} a text info object.

	Canvas.prototype.getTextInfo = function(layer, text, font, angle, width) {

		var textStyle, layerCache, styleCache, info;

		// Cast the value to a string, in case we were given a number or such

		text = "" + text;

		// If the font is a font-spec object, generate a CSS font definition

		if (typeof font === "object") {

			textStyle = font.style + " " + font.variant + " " + font.weight + " " + font.size + "px/" + font.lineHeight + "px " + font.family;

		} else {

			textStyle = font;

		}

		// Retrieve (or create) the cache for the text's layer and styles

		layerCache = this._textCache[layer];

		if (layerCache == null) {

			layerCache = this._textCache[layer] = {};

		}

		styleCache = layerCache[textStyle];

		if (styleCache == null) {

			styleCache = layerCache[textStyle] = {};

		}

		info = styleCache[text];

		// If we can't find a matching element in our cache, create a new one

		if (info == null) {

			var element = $("<div></div>").html(text)

				.css({

					position: "absolute",

					'max-width': width,

					top: -9999

				})

				.appendTo(this.getTextLayer(layer));

			if (typeof font === "object") {

				element.css({

					font: textStyle,

					color: font.color

				});

			} else if (typeof font === "string") {

				element.addClass(font);

			}

			info = styleCache[text] = {

				width: element.outerWidth(true),

				height: element.outerHeight(true),

				element: element,

				positions: []

			};

			element.detach();

		}

		return info;

	};

	// Adds a text string to the canvas text overlay.

	//

	// The text isn't drawn immediately; it is marked as rendering, which will

	// result in its addition to the canvas on the next render pass.

	//

	// @param {string} layer A string of space-separated CSS classes uniquely

	//     identifying the layer containing this text.

	// @param {number} x X coordinate at which to draw the text.

	// @param {number} y Y coordinate at which to draw the text.

	// @param {string} text Text string to draw.

	// @param {(string|object)=} font Either a string of space-separated CSS

	//     classes or a font-spec object, defining the text's font and style.

	// @param {number=} angle Angle at which to rotate the text, in degrees.

	//     Angle is currently unused, it will be implemented in the future.

	// @param {number=} width Maximum width of the text before it wraps.

	// @param {string=} halign Horizontal alignment of the text; either "left",

	//     "center" or "right".

	// @param {string=} valign Vertical alignment of the text; either "top",

	//     "middle" or "bottom".

	Canvas.prototype.addText = function(layer, x, y, text, font, angle, width, halign, valign) {

		var info = this.getTextInfo(layer, text, font, angle, width),

			positions = info.positions;

		// Tweak the div's position to match the text's alignment

		if (halign == "center") {

			x -= info.width / 2;

		} else if (halign == "right") {

			x -= info.width;

		}

		if (valign == "middle") {

			y -= info.height / 2;

		} else if (valign == "bottom") {

			y -= info.height;

		}

		// Determine whether this text already exists at this position.

		// If so, mark it for inclusion in the next render pass.

		for (var i = 0, position; position = positions[i]; i++) {

			if (position.x == x && position.y == y) {

				position.active = true;

				return;

			}

		}

		// If the text doesn't exist at this position, create a new entry

		// For the very first position we'll re-use the original element,

		// while for subsequent ones we'll clone it.

		position = {

			active: true,

			rendered: false,

			element: positions.length ? info.element.clone() : info.element,

			x: x,

			y: y

		}

		positions.push(position);

		// Move the element to its final position within the container

		position.element.css({

			top: Math.round(y),

			left: Math.round(x),

			'text-align': halign	// In case the text wraps

		});

	};

	// Removes one or more text strings from the canvas text overlay.

	//

	// If no parameters are given, all text within the layer is removed.

	//

	// Note that the text is not immediately removed; it is simply marked as

	// inactive, which will result in its removal on the next render pass.

	// This avoids the performance penalty for 'clear and redraw' behavior,

	// where we potentially get rid of all text on a layer, but will likely

	// add back most or all of it later, as when redrawing axes, for example.

	//

	// @param {string} layer A string of space-separated CSS classes uniquely

	//     identifying the layer containing this text.

	// @param {number=} x X coordinate of the text.

	// @param {number=} y Y coordinate of the text.

	// @param {string=} text Text string to remove.

	// @param {(string|object)=} font Either a string of space-separated CSS

	//     classes or a font-spec object, defining the text's font and style.

	// @param {number=} angle Angle at which the text is rotated, in degrees.

	//     Angle is currently unused, it will be implemented in the future.

	Canvas.prototype.removeText = function(layer, x, y, text, font, angle) {

		if (text == null) {

			var layerCache = this._textCache[layer];

			if (layerCache != null) {

				for (var styleKey in layerCache) {

					if (hasOwnProperty.call(layerCache, styleKey)) {

						var styleCache = layerCache[styleKey];

						for (var key in styleCache) {

							if (hasOwnProperty.call(styleCache, key)) {

								var positions = styleCache[key].positions;

								for (var i = 0, position; position = positions[i]; i++) {

									position.active = false;

								}

							}

						}

					}

				}

			}

		} else {

			var positions = this.getTextInfo(layer, text, font, angle).positions;

			for (var i = 0, position; position = positions[i]; i++) {

				if (position.x == x && position.y == y) {

					position.active = false;

				}

			}

		}

	};

	///////////////////////////////////////////////////////////////////////////

	// The top-level container for the entire plot.

    function Plot(placeholder, data_, options_, plugins) {

        // data is on the form:

        //   [ series1, series2 ... ]

        // where series is either just the data as [ [x1, y1], [x2, y2], ... ]

        // or { data: [ [x1, y1], [x2, y2], ... ], label: "some label", ... }

        var series = [],

            options = {

                // the color theme used for graphs

                colors: ["#edc240", "#afd8f8", "#cb4b4b", "#4da74d", "#9440ed"],

                legend: {

                    show: true,

                    noColumns: 1, // number of colums in legend table

                    labelFormatter: null, // fn: string -> string

                    labelBoxBorderColor: "#ccc", // border color for the little label boxes

                    container: null, // container (as jQuery object) to put legend in, null means default on top of graph

                    position: "ne", // position of default legend container within plot

                    margin: 5, // distance from grid edge to default legend container within plot

                    backgroundColor: null, // null means auto-detect

                    backgroundOpacity: 0.85, // set to 0 to avoid background

                    sorted: null    // default to no legend sorting

                },

                xaxis: {

                    show: null, // null = auto-detect, true = always, false = never

                    position: "bottom", // or "top"

                    mode: null, // null or "time"

                    font: null, // null (derived from CSS in placeholder) or object like { size: 11, lineHeight: 13, style: "italic", weight: "bold", family: "sans-serif", variant: "small-caps" }

                    color: null, // base color, labels, ticks

                    tickColor: null, // possibly different color of ticks, e.g. "rgba(0,0,0,0.15)"

                    transform: null, // null or f: number -> number to transform axis

                    inverseTransform: null, // if transform is set, this should be the inverse function

                    min: null, // min. value to show, null means set automatically

                    max: null, // max. value to show, null means set automatically

                    autoscaleMargin: null, // margin in % to add if auto-setting min/max

                    ticks: null, // either [1, 3] or [[1, "a"], 3] or (fn: axis info -> ticks) or app. number of ticks for auto-ticks

                    tickFormatter: null, // fn: number -> string

                    labelWidth: null, // size of tick labels in pixels

                    labelHeight: null,