///////////////////////////////////////////
// Spin.js
//fgnass.github.com/spin.js#v1.2.2
(function(window, document, undefined) {

/**
 * Copyright (c) 2011 Felix Gnass [fgnass at neteye dot de]
 * Licensed under the MIT license
 */

  var prefixes = ['webkit', 'Moz', 'ms', 'O'], /* Vendor prefixes */
	  animations = {}, /* Animation rules keyed by their name */
	  useCssAnimations;

  /**
   * Utility function to create elements. If no tag name is given,
   * a DIV is created. Optionally properties can be passed.
   */
	function createEl(tag, prop) {
		var el = document.createElement(tag || 'div'),
		n;

		for(n in prop) {
			el[n] = prop[n];
		}
		return el;
	}

  /**
   * Inserts child1 before child2. If child2 is not specified,
   * child1 is appended. If child2 has no parentNode, child2 is
   * appended first.
   */
	function ins(parent, child1, child2) {
		if(child2 && !child2.parentNode) ins(parent, child2);
		parent.insertBefore(child1, child2||null);
		return parent;
	}

  /**
   * Insert a new stylesheet to hold the @keyframe or VML rules.
   */
	var sheet = (function() {
		var el = createEl('style');
		ins(document.getElementsByTagName('head')[0], el);
		return el.sheet || el.styleSheet;
	})();

  /**
   * Creates an opacity keyframe animation rule and returns its name.
   * Since most mobile Webkits have timing issues with animation-delay,
   * we create separate rules for each line/segment.
   */
  function addAnimation(alpha, trail, i, lines) {
	var name = ['opacity', trail, ~~(alpha*100), i, lines].join('-'),
		start = 0.01 + i/lines*100,
		z = Math.max(1-(1-alpha)/trail*(100-start) , alpha),
		prefix = useCssAnimations.substring(0, useCssAnimations.indexOf('Animation')).toLowerCase(),
		pre = prefix && '-'+prefix+'-' || '';

	if (!animations[name]) {
	  sheet.insertRule(
		'@' + pre + 'keyframes ' + name + '{' +
		'0%{opacity:'+z+'}' +
		start + '%{opacity:'+ alpha + '}' +
		(start+0.01) + '%{opacity:1}' +
		(start+trail)%100 + '%{opacity:'+ alpha + '}' +
		'100%{opacity:'+ z + '}' +
		'}', 0);
	  animations[name] = 1;
	}
	return name;
  }

  /**
   * Tries various vendor prefixes and returns the first supported property.
   **/
  function vendor(el, prop) {
	var s = el.style,
		pp,
		i;

	if(s[prop] !== undefined) return prop;
	prop = prop.charAt(0).toUpperCase() + prop.slice(1);
	for(i=0; i<prefixes.length; i++) {
	  pp = prefixes[i]+prop;
	  if(s[pp] !== undefined) return pp;
	}
  }

  /**
   * Sets multiple style properties at once.
   */
  function css(el, prop) {
	for (var n in prop) {
	  el.style[vendor(el, n)||n] = prop[n];
	}
	return el;
  }

  /**
   * Fills in default values.
   */
  function merge(obj) {
	for (var i=1; i < arguments.length; i++) {
	  var def = arguments[i];
	  for (var n in def) {
		if (obj[n] === undefined) obj[n] = def[n];
	  }
	}
	return obj;
  }

  /**
   * Returns the absolute page-offset of the given element.
   */
  function pos(el) {
	var o = {x:el.offsetLeft, y:el.offsetTop};
	while((el = el.offsetParent)) {
	  o.x+=el.offsetLeft;
	  o.y+=el.offsetTop;
	}
	return o;
  }

  /** The constructor */
  var Spinner = function Spinner(o) {
	if (!this.spin) return new Spinner(o);
	this.opts = merge(o || {}, Spinner.defaults, defaults);
  },
  defaults = Spinner.defaults = {
	lines: 12, // The number of lines to draw
	length: 7, // The length of each line
	width: 5, // The line thickness
	radius: 10, // The radius of the inner circle
	color: '#000', // #rgb or #rrggbb
	speed: 1, // Rounds per second
	trail: 100, // Afterglow percentage
	opacity: 1/4,
	fps: 20
  },
  proto = Spinner.prototype = {
	spin: function(target) {
	  this.stop();
	  var self = this,
		  el = self.el = css(createEl(), {position: 'relative'}),
		  ep, // element position
		  tp; // target position

	  if (target) {
		tp = pos(ins(target, el, target.firstChild));
		ep = pos(el);
		css(el, {
		  left: (target.offsetWidth >> 1) - ep.x+tp.x + 'px',
		  top: (target.offsetHeight >> 1) - ep.y+tp.y + 'px'
		});
	  }
	  el.setAttribute('aria-role', 'progressbar');
	  self.lines(el, self.opts);
	  if (!useCssAnimations) {
		// No CSS animation support, use setTimeout() instead
		var o = self.opts,
			i = 0,
			fps = o.fps,
			f = fps/o.speed,
			ostep = (1-o.opacity)/(f*o.trail / 100),
			astep = f/o.lines;

		(function anim() {
		  i++;
		  for (var s=o.lines; s; s--) {
			var alpha = Math.max(1-(i+s*astep)%f * ostep, o.opacity);
			self.opacity(el, o.lines-s, alpha, o);
		  }
		  self.timeout = self.el && setTimeout(anim, ~~(1000/fps));
		})();
	  }
	  return self;
	},
	stop: function() {
	  var el = this.el;
	  if (el) {
		clearTimeout(this.timeout);
		if (el.parentNode) el.parentNode.removeChild(el);
		this.el = undefined;
	  }
	  return this;
	}
  };
  proto.lines = function(el, o) {
	var i = 0,
		seg;

	function fill(color, shadow) {
	  return css(createEl(), {
		position: 'absolute',
		width: (o.length+o.width) + 'px',
		height: o.width + 'px',
		background: color,
		boxShadow: shadow,
		transformOrigin: 'left',
		transform: 'rotate(' + ~~(360/o.lines*i) + 'deg) translate(' + o.radius+'px' +',0)',
		borderRadius: (o.width>>1) + 'px'
	  });
	}
	for (; i < o.lines; i++) {
	  seg = css(createEl(), {
		position: 'absolute',
		top: 1+~(o.width/2) + 'px',
		transform: 'translate3d(0,0,0)',
		opacity: o.opacity,
		animation: useCssAnimations && addAnimation(o.opacity, o.trail, i, o.lines) + ' ' + 1/o.speed + 's linear infinite'
	  });
	  if (o.shadow) ins(seg, css(fill('#000', '0 0 4px ' + '#000'), {top: 2+'px'}));
	  ins(el, ins(seg, fill(o.color, '0 0 1px rgba(0,0,0,.1)')));
	}
	return el;
  };
  proto.opacity = function(el, i, val) {
	if (i < el.childNodes.length) el.childNodes[i].style.opacity = val;
  };

  /////////////////////////////////////////////////////////////////////////
  // VML rendering for IE
  /////////////////////////////////////////////////////////////////////////

  /** 
   * Check and init VML support
   */
  (function() {
	var s = css(createEl('group'), {behavior: 'url(#default#VML)'}),
		i;

	if (!vendor(s, 'transform') && s.adj) {

	  // VML support detected. Insert CSS rules ...
	  for (i=4; i--;) sheet.addRule(['group', 'roundrect', 'fill', 'stroke'][i], 'behavior:url(#default#VML)');

	  proto.lines = function(el, o) {
		var r = o.length+o.width,
			s = 2*r;

		function grp() {
			return css(createEl('group', {coordsize: s +' '+s, coordorigin: -r +' '+-r}), {width: s, height: s});
		}

		var g = grp(),
			margin = ~(o.length+o.radius+o.width)+'px',
			i;

		function seg(i, dx, filter) {
			ins(g,
				ins(css(grp(), {rotation: 360 / o.lines * i + 'deg', left: ~~dx}),
				ins(css(createEl('roundrect', {arcsize: 1}), {
					width: r,
					height: o.width,
					left: o.radius,
					top: -o.width>>1,
					filter: filter
					}),
					createEl('fill', {color: o.color, opacity: o.opacity}),
					createEl('stroke', {opacity: 0}) // transparent stroke to fix color bleeding upon opacity change
					)
				)
			);
		}

		if (o.shadow) {
		  for (i = 1; i <= o.lines; i++) {
			seg(i, -2, 'progid:DXImageTransform.Microsoft.Blur(pixelradius=2,makeshadow=1,shadowopacity=.3)');
		  }
		}
		for (i = 1; i <= o.lines; i++) {
		  seg(i);
		}
		return ins(css(el, {
		  margin: margin + ' 0 0 ' + margin,
		  zoom: 1
		}), g);
	  };
	  proto.opacity = function(el, i, val, o) {
		var c = el.firstChild;
		o = o.shadow && o.lines || 0;
		if (c && i+o < c.childNodes.length) {
		  c = c.childNodes[i+o]; c = c && c.firstChild; c = c && c.firstChild;
		  if (c) c.opacity = val;
		}
	  };
	}
	else {
	  useCssAnimations = vendor(s, 'animation');
	}
  })();

  window.Spinner = Spinner;

})(window, document);
////////////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////////////



////////////////////////////////////////////////
MD.Spinner = new Class({

	Implements: [Options,Events]

	,options: {
		version: ''			// can be 'light' or 'dark' - useful for quickly setting the style of the spinner and mask
		,spinner: {
			lines: 12
			,length: 7
			,width: 2
			,radius: 7
			,trail: 50
			,color: '#fff'
			,speed: 1.8
			,shadow: true
		}
		,maskTarget: null
		,maskOpacity: 0.7
		,maskColor: '#000'
		,maskOptions: {}
		,message: ''
		,messageStyles: {'font-size':14, color: '#ccc'}
		,clickToHide: false
		,timeout: null
		// ,onShow: function(thisObj) {}
		// ,onHide: function(thisObj) {}
	}

	,initialize: function(targetElement, options){
		this.setOptions(options);
		if (this.options.version != '') {
			if (this.options.version.toLowerCase() == 'light') {
				this.options.spinner.color = '#000';
				this.options.maskColor = '#fff';
			} else if (this.options.version.toLowerCase() == 'dark') {
				this.options.spinner.color = '#fff';
				this.options.maskColor = '#000';
			}
		}
		this.targetElement = targetElement;
		if (!this.options.maskTarget && !this.targetElement) {
			throw new Error('No target element supplied to MD.Spinner');
			return;
		}
		this.maskTarget 	= (this.options.maskTarget || this.targetElement);
		this.maskOpacity 	= this.options.maskOpacity;
		this.maskColor		= this.options.maskColor;
		this.maskOptions 	= this.options.maskOptions;
		this.clickToHide	= this.options.clickToHide;
		this.spinner 		= new Spinner(this.options.spinner);

		this.active = false;
	}

	,show: function() {
		this.mask = new Mask(this.maskTarget, Object.merge({
			destroyOnHide: true
			,style:{
				opacity: this.maskOpacity
				,'background-color': this.maskColor
				,'z-index': (function() {
								if (this.maskTarget.getStyle('z-index') == 'auto' || this.maskTarget.getStyle('z-index') == '') {
									return 100;
								} else {
									return this.maskTarget.getStyle('z-index').toInt()+100;
								}
							}.bind(this))()
			}
		}, this.maskOptions));

		this.message = new Element('div.Message', {html: this.options.message});
		this.message.setStyles(this.options.messageStyles);

		this.maskClone = undefined;
		this.mask.show();
		this.maskClone = this.mask.element.clone();
		this.maskClone.addClass('maskClone').setStyles({
			'background-color':'transparent'
			,opacity: 1
			,overflow:'hidden'
		}).inject(this.mask.element, 'after');
		this.message.inject(this.maskClone);
		this.positionMessage();
		this.spinner.spin((this.maskClone || this.targetElement));
		if (this.clickToHide) {
			this.maskClone.addEvent('click', function(){
				this.hide();
			}.bind(this));
		}
		this.fireEvent('show', this);
		this.active = true;
		if (this.options.timeout) (function(){ this.hide(); }.bind(this)).delay(this.options.timeout);
		return this;
	}

	,hide: function() {
		this.maskClone.destroy();
		this.mask.hide();
		this.spinner.stop();
		this.fireEvent('hide', this);
		this.active = false;
		return this;
	}

	,hideSpinner: function() {
		this.spinner.stop();
		return this;
	}

	,hideMessage: function() {
		this.message.hide();
		return this;
	}

	,setMessage: function(text) {
		this.message.set('html', text);
		this.positionMessage();
		return this;
	}

	,positionMessage: function(options) {
		var posOptions = (options || {
			relativeTo: this.maskClone
			,position: 'center'
			,edge: 'center'
			,offset: {
				x: '',
				y: (this.options.spinner.radius + (this.options.spinner.length * 2) + 4)
			}
		});
		this.message.position(posOptions);
		return this;
	}

	,isActive: function() {
		return this.active;
	}
});