(function () {
	var D = Flotr.DOM,
		_ = Flotr._;

	Flotr.addPlugin('refresh', {
		options: {
			show: true,			// => setting to true will show the refresh, hide otherwise
			labelFormatter: function(y) { return y; },
			labelBoxBorderColor: '#00b2eb', // => border color for the little label boxes
			labelBoxWidth: 14,
			labelBoxHeight: 10,
			labelBoxMargin: 5,
			container: null,	// => container (as jQuery object) to put refresh in, null means default on top of graph
			position: 'nw',		// => position of default refresh container within plot
			margin: 0,			// => distance from grid edge to default refresh container within plot
			backgroundColor: '#F0F0F0',	// => refresh background color.
			backgroundOpacity: 0.85		// => set to 0 to avoid background, set to 1 for a solid background
		},
		callbacks: {
			'flotr:afterinit': function() {
				this.refresh.insertRefresh();
			},
			'flotr:destroy': function() {
				var markup = this.refresh.markup;
				if (markup) {
					this.refresh.markup = null;
					D.remove(markup);
				}
			},
		},
		/**
		 * Adds a refresh div to the canvas container or draws it on the canvas
		 */
		insertRefresh: function() {

			if (!this.options.refresh.show)
				return;

			var	plotOffset	= this.plotOffset,
				options		= this.options,
				refresh		= options.refresh,
				ctx			= this.ctx,
				p			= refresh.position,
				m			= refresh.margin,
				opacity		= refresh.backgroundOpacity,
				i, label, color;

			var lbw = refresh.labelBoxWidth,
				lbh = refresh.labelBoxHeight,
				lbm = refresh.labelBoxMargin,
				offsetX = plotOffset.left + m,
				offsetY = plotOffset.top + m,
				style = {
					size: options.fontSize * 1.1,
					color: options.grid.color
				};

			var refreshWidth = 64,
				refreshHeight = 64;

			// Default Opacity
			if (!opacity && opacity !== 0) {
				opacity = 0.1;
			}

			var button = D.create('div');
			D.addClass(button, 'flotr-refresh-box');
			if (refresh.container) {
				button = D.node(button);
				this.refresh.markup = button;
				D.insert(refresh.container, button);
			} else {
				var styles = { 'position': 'absolute', 'zIndex': '2', 'border' : '1px solid ' + refresh.labelBoxBorderColor};

				if (p.charAt(0) == 'n') {
					styles.top = (m + plotOffset.top) + 'px';
					styles.bottom = 'auto';
				} else if (p.charAt(0) == 'c') {
					styles.top = (offsetY + (this.plotHeight - refreshHeight) / 2) + 'px';
					styles.bottom = 'auto';
					styles.left = (offsetX + (this.plotWidth - refreshWidth) / 2) + 'px';
					styles.right = 'auto';
				} else if (p.charAt(0) == 's') {
					styles.bottom = (m + plotOffset.bottom) + 'px';
					styles.top = 'auto';
				}
				if (p.charAt(1) == 'e') {
					styles.right = (m + plotOffset.right) + 'px';
					styles.left = 'auto';
				} else if (p.charAt(0) == 'w') {
					styles.left = (m + plotOffset.left) + 'px';
					styles.right = 'auto';
				}

				var div = D.create('div'), size;
				D.addClass(div, 'flotr-refresh-container');
				// hide container first
				D.addClass(div, 'flotr-refresh-container-hide');

				// disable content editable
				div.setAttribute('contenteditable', false);

				// set background color
				styles.backgroundColor = refresh.backgroundColor || options.grid.backgroundColor || '#ffffff';

				D.setStyles(div, styles);
				D.insert(div, button);
				D.insert(this.el, div);
			}

			// handle on tap event
			$(button).on('tap', function(ev) {
				if (refresh.tap) {
					refresh.tap(ev);
				}
			});
		}
	});
})();