$( function () {

	$.fn.extend({

		spindicator: function (action, override) {

			var userAction = action || 'none';
			var userOptions = override || {};

			var output;

			if (action === 'stop') {

				return this.each( function () {
					var $this = $(this);
					// var sp = $this.data('spindicatorSpinner');
					$this.data('spindicator').toggle(false);
					// sp.stop();
				});

			}

			if (action === 'remove') {
				return this.each( function () {
					var $this = $(this);
					// var sp = $this.data('spindicatorSpinner');
					$this.data('spindicator').remove();
					// sp.stop();
				});
			}
			
			else {

				return this.each( function () {

					var $this = $(this);

					var spinnerOpts = $.extend({
						lines: 6,
						length: 4,
						width: 4,
						radius: 4,
						corners: 1,
						rotate: 30,
						direction: 1,
						color: '#e54c3c',
						speed: 1,
						trail: 60,
						shadow: false,
						hwaccel: true,
						className: 'spindicator-spinner',
						zIndex: 2e9,
						//top: '150%',
						//left: '50%'
					}, userOptions);

					if ($this.data('spindicator')) {
						//console.log('found a spindicator already: ', $this.data('spindicator'));

						$this.data('spindicator').toggle(true);

					} else {

						// var numSpinners = $('.spindicator').length;

						var $spinner = $('<span>')
							// .prop( 'id', 'spindicator_' + numSpinners.toString() )
							.prop( 'id', 'spindicator_' + $('.spindicator').length.toString() )
							.addClass('spindicator')
							.css({
								'position': 'relative',
								'display': 'inline-block',
								'width': '15px',
								'height': '5px',
								'margin-left': '0px',
								//'left': '40%',
								//'top': '60%',
							})
							.toggle(false);

						var spinner = new Spinner(spinnerOpts).spin($spinner[0]);
						//console.log(spinner);

						$this.data('spindicatorSpinner', spinner)
							.data('spindicator', $spinner)
							.prepend($spinner.toggle(true));

					}

				});

			}

		}

	});

});