app.craft.vin/static/nipplejs.js

(function(f){if(typeof exports==="object"&&typeof module!=="undefined"){module.exports=f()}else if(typeof define==="function"&&define.amd){define([],f)}else{var g;if(typeof window!=="undefined"){g=window}else if(typeof global!=="undefined"){g=global}else if(typeof self!=="undefined"){g=self}else{g=this}g.nipplejs = f()}})(function(){var define,module,exports;
	'use strict';
	
	// Constants
	var isTouch = !!('ontouchstart' in window);
	var isPointer = window.PointerEvent ? true : false;
	var isMSPointer = window.MSPointerEvent ? true : false;
	var events = {
		touch: {
			start: 'touchstart',
			move: 'touchmove',
			end: 'touchend, touchcancel'
		},
		mouse: {
			start: 'mousedown',
			move: 'mousemove',
			end: 'mouseup'
		},
		pointer: {
			start: 'pointerdown',
			move: 'pointermove',
			end: 'pointerup, pointercancel'
		},
		MSPointer: {
			start: 'MSPointerDown',
			move: 'MSPointerMove',
			end: 'MSPointerUp'
		}
	};
	var toBind;
	var secondBind = {};
	if (isPointer) {
		toBind = events.pointer;
	} else if (isMSPointer) {
		toBind = events.MSPointer;
	} else if (isTouch) {
		toBind = events.touch;
		secondBind = events.mouse;
	} else {
		toBind = events.mouse;
	}
	
	///////////////////////
	///      UTILS      ///
	///////////////////////
	
	var u = {};
	u.distance = function (p1, p2) {
		var dx = p2.x - p1.x;
		var dy = p2.y - p1.y;
	
		return Math.sqrt((dx * dx) + (dy * dy));
	};
	
	u.angle = function(p1, p2) {
		var dx = p2.x - p1.x;
		var dy = p2.y - p1.y;
	
		return u.degrees(Math.atan2(dy, dx));
	};
	
	u.findCoord = function(p, d, a) {
		var b = {x: 0, y: 0};
		a = u.radians(a);
		b.x = p.x - d * Math.cos(a);
		b.y = p.y - d * Math.sin(a);
		return b;
	};
	
	u.radians = function(a) {
		return a * (Math.PI / 180);
	};
	
	u.degrees = function(a) {
		return a * (180 / Math.PI);
	};
	
	u.bindEvt = function (el, arg, handler) {
		var types = arg.split(/[ ,]+/g);
		var type;
		for (var i = 0; i < types.length; i += 1) {
			type = types[i];
			if (el.addEventListener) {
				el.addEventListener(type, handler, false);
			} else if (el.attachEvent) {
				el.attachEvent(type, handler);
			}
		}
	};
	
	u.unbindEvt = function (el, arg, handler) {
		var types = arg.split(/[ ,]+/g);
		var type;
		for (var i = 0; i < types.length; i += 1) {
			type = types[i];
			if (el.removeEventListener) {
				el.removeEventListener(type, handler);
			} else if (el.detachEvent) {
				el.detachEvent(type, handler);
			}
		}
	};
	
	u.trigger = function (el, type, data) {
		var evt = new CustomEvent(type, data);
		el.dispatchEvent(evt);
	};
	
	u.prepareEvent = function (evt) {
		evt.preventDefault();
		return evt.type.match(/^touch/) ? evt.changedTouches : evt;
	};
	
	u.getScroll = function () {
		var x = (window.pageXOffset !== undefined) ?
			window.pageXOffset :
			(document.documentElement || document.body.parentNode || document.body)
				.scrollLeft;
	
		var y = (window.pageYOffset !== undefined) ?
			window.pageYOffset :
			(document.documentElement || document.body.parentNode || document.body)
				.scrollTop;
		return {
			x: x,
			y: y
		};
	};
	
	u.applyPosition = function (el, pos) {
		if (pos.top || pos.right || pos.bottom || pos.left) {
			el.style.top = pos.top;
			el.style.right = pos.right;
			el.style.bottom = pos.bottom;
			el.style.left = pos.left;
		} else {
			el.style.left = pos.x + 'px';
			el.style.top = pos.y + 'px';
		}
	};
	
	u.getTransitionStyle = function (property, values, time) {
		var obj = u.configStylePropertyObject(property);
		for (var i in obj) {
			if (obj.hasOwnProperty(i)) {
				if (typeof values === 'string') {
					obj[i] = values + ' ' + time;
				} else {
					var st = '';
					for (var j = 0, max = values.length; j < max; j += 1) {
						st += values[j] + ' ' + time + ', ';
					}
					obj[i] = st.slice(0, -2);
				}
			}
		}
		return obj;
	};
	
	u.getVendorStyle = function (property, value) {
		var obj = u.configStylePropertyObject(property);
		for (var i in obj) {
			if (obj.hasOwnProperty(i)) {
				obj[i] = value;
			}
		}
		return obj;
	};
	
	u.configStylePropertyObject = function (prop) {
		var obj = {};
		obj[prop] = '';
		var vendors = ['webkit', 'Moz', 'o'];
		vendors.forEach(function (vendor) {
			obj[vendor + prop.charAt(0).toUpperCase() + prop.slice(1)] = '';
		});
		return obj;
	};
	
	u.extend = function (objA, objB) {
		for (var i in objB) {
			if (objB.hasOwnProperty(i)) {
				objA[i] = objB[i];
			}
		}
		return objA;
	};
	
	// Overwrite only what's already present
	u.safeExtend = function (objA, objB) {
		var obj = {};
		for (var i in objA) {
			if (objA.hasOwnProperty(i) && objB.hasOwnProperty(i)) {
				obj[i] = objB[i];
			} else if (objA.hasOwnProperty(i)) {
				obj[i] = objA[i];
			}
		}
		return obj;
	};
	
	// Map for array or unique item.
	u.map = function (ar, fn) {
		if (ar.length) {
			for (var i = 0, max = ar.length; i < max; i += 1) {
				fn(ar[i]);
			}
		} else {
			fn(ar);
		}
	};
	
	///////////////////////
	///   SUPER CLASS   ///
	///////////////////////
	
	function Super () {};
	
	// Basic event system.
	Super.prototype.on = function (arg, cb) {
		var self = this;
		var types = arg.split(/[ ,]+/g);
		var type;
		self._handlers_ = self._handlers_ || {};
	
		for (var i = 0; i < types.length; i += 1) {
			type = types[i];
			self._handlers_[type] = self._handlers_[type] || [];
			self._handlers_[type].push(cb);
		}
		return self;
	};
	
	Super.prototype.off = function (type, cb) {
		var self = this;
		self._handlers_ = self._handlers_ || {};
	
		if (type === undefined) {
			self._handlers_ = {};
		} else if (cb === undefined) {
			self._handlers_[type] = null;
		} else if (self._handlers_[type] &&
				self._handlers_[type].indexOf(cb) >= 0) {
			self._handlers_[type].splice(self._handlers_[type].indexOf(cb), 1);
		}
	
		return self;
	};
	
	Super.prototype.trigger = function (arg, data) {
		var self = this;
		var types = arg.split(/[ ,]+/g);
		var type;
		self._handlers_ = self._handlers_ || {};
	
		for (var i = 0; i < types.length; i += 1) {
			type = types[i];
			if (self._handlers_[type] && self._handlers_[type].length) {
				self._handlers_[type].forEach(function (handler) {
					handler.call(self, {
						type: type,
						target: self
					}, data);
				});
			}
		}
	};
	
	// Configuration
	Super.prototype.config = function (options) {
		var self = this;
		self.options = self.defaults || {};
		if (options) {
			self.options = u.safeExtend(self.options, options);
		}
	};
	
	// Bind internal events.
	Super.prototype.bindEvt = function (el, type) {
		var self = this;
		self._domHandlers_ = self._domHandlers_ || {};
	
		self._domHandlers_[type] = function () {
			if (typeof self['on' + type] === 'function') {
				self['on' + type].apply(self, arguments);
			} else {
				console.warn('[WARNING] : Missing "on' + type + '" handler.');
			}
		};
	
		u.bindEvt(el, toBind[type], self._domHandlers_[type]);
	
		if (secondBind[type]) {
			// Support for both touch and mouse at the same time.
			u.bindEvt(el, secondBind[type], self._domHandlers_[type]);
		}
	
		return self;
	};
	
	// Unbind dom events.
	Super.prototype.unbindEvt = function (el, type) {
		var self = this;
		self._domHandlers_ = self._domHandlers_ || {};
	
		u.unbindEvt(el, toBind[type], self._domHandlers_[type]);
	
		if (secondBind[type]) {
			// Support for both touch and mouse at the same time.
			u.unbindEvt(el, secondBind[type], self._domHandlers_[type]);
		}
	
		delete self._domHandlers_[type];
	
		return this;
	};
	
	///////////////////////
	///   THE NIPPLE    ///
	///////////////////////
	
	function Nipple (collection, options) {
		this.identifier = options.identifier;
		this.position = options.position;
		this.frontPosition = options.frontPosition;
		this.collection = collection;
	
		// Defaults
		this.defaults = {
			size: 100,
			threshold: 0.1,
			color: 'white',
			fadeTime: 250,
			dataOnly: false,
			restJoystick: true,
			restOpacity: 0.5,
			mode: 'dynamic',
			zone: document.body,
			lockX: false,
			lockY: false
		};
	
		this.config(options);
	
		// Overwrites
		if (this.options.mode === 'dynamic') {
			this.options.restOpacity = 0;
		}
	
		this.id = Nipple.id;
		Nipple.id += 1;
		this.buildEl()
			.stylize();
	
		// Nipple's API.
		this.instance = {
			el: this.ui.el,
			on: this.on.bind(this),
			off: this.off.bind(this),
			show: this.show.bind(this),
			hide: this.hide.bind(this),
			add: this.addToDom.bind(this),
			remove: this.removeFromDom.bind(this),
			destroy: this.destroy.bind(this),
			resetDirection: this.resetDirection.bind(this),
			computeDirection: this.computeDirection.bind(this),
			trigger: this.trigger.bind(this),
			position: this.position,
			frontPosition: this.frontPosition,
			ui: this.ui,
			identifier: this.identifier,
			id: this.id,
			options: this.options
		};
	
		return this.instance;
	};
	
	Nipple.prototype = new Super();
	Nipple.constructor = Nipple;
	Nipple.id = 0;
	
	// Build the dom element of the Nipple instance.
	Nipple.prototype.buildEl = function (options) {
		this.ui = {};
	
		if (this.options.dataOnly) {
			return this;
		}
	
		this.ui.el = document.createElement('div');
		this.ui.back = document.createElement('div');
		this.ui.front = document.createElement('div');
	
		this.ui.el.className = 'nipple collection_' + this.collection.id;
		this.ui.back.className = 'back';
		this.ui.front.className = 'front';
	
		this.ui.el.setAttribute('id', 'nipple_' + this.collection.id +
			'_' + this.id);
	
		this.ui.el.appendChild(this.ui.back);
		this.ui.el.appendChild(this.ui.front);
	
		return this;
	};
	
	// Apply CSS to the Nipple instance.
	Nipple.prototype.stylize = function () {
		if (this.options.dataOnly) {
			return this;
		}
		var animTime = this.options.fadeTime + 'ms';
		var borderStyle = u.getVendorStyle('borderRadius', '50%');
		var transitStyle = u.getTransitionStyle('transition', 'opacity', animTime);
		var styles = {};
		styles.el = {
			position: 'absolute',
			opacity: this.options.restOpacity,
			display: 'block',
			'zIndex': 999
		};
	
		styles.back = {
			position: 'absolute',
			display: 'block',
			width: this.options.size + 'px',
			height: this.options.size + 'px',
			marginLeft: -this.options.size / 2 + 'px',
			marginTop: -this.options.size / 2 + 'px',
			background: this.options.color,
			// 'opacity': '.5'
			'opacity': '0'
		};
	
		styles.front = {
			width: this.options.size / 2 + 'px',
			height: this.options.size / 2 + 'px',
			position: 'absolute',
			display: 'block',
			marginLeft: -this.options.size / 4 + 'px',
			marginTop: -this.options.size / 4 + 'px',
			background: this.options.color,
			'opacity': '.5'
		};
	
		u.extend(styles.el, transitStyle);
		u.extend(styles.back, borderStyle);
		u.extend(styles.front, borderStyle);
	
		this.applyStyles(styles);
	
		return this;
	};
	
	Nipple.prototype.applyStyles = function (styles) {
		// Apply styles
		for (var i in this.ui) {
			if (this.ui.hasOwnProperty(i)) {
				for (var j in styles[i]) {
					this.ui[i].style[j] = styles[i][j];
				}
			}
		}
	
		return this;
	};
	
	// Inject the Nipple instance into DOM.
	Nipple.prototype.addToDom = function () {
		// We're not adding it if we're dataOnly or already in dom.
		if (this.options.dataOnly || document.body.contains(this.ui.el)) {
			return this;
		}
		this.options.zone.appendChild(this.ui.el);
		return this;
	};
	
	// Remove the Nipple instance from DOM.
	Nipple.prototype.removeFromDom = function () {
		if (this.options.dataOnly || !document.body.contains(this.ui.el)) {
			return this;
		}
		this.options.zone.removeChild(this.ui.el);
		return this;
	};
	
	// Entirely destroy this nipple
	Nipple.prototype.destroy = function () {
		clearTimeout(this.removeTimeout);
		clearTimeout(this.showTimeout);
		clearTimeout(this.restTimeout);
		this.trigger('destroyed', this.instance);
		this.removeFromDom();
		this.off();
	};
	
	// Fade in the Nipple instance.
	Nipple.prototype.show = function (cb) {
		var self = this;
	
		if (self.options.dataOnly) {
			return self;
		}
	
		clearTimeout(self.removeTimeout);
		clearTimeout(self.showTimeout);
		clearTimeout(self.restTimeout);
	
		self.addToDom();
	
		self.restCallback();
	
		setTimeout(function () {
			self.ui.el.style.opacity = 1;
		}, 0);
	
		self.showTimeout = setTimeout(function () {
			self.trigger('shown', self.instance);
			if (typeof cb === 'function') {
				cb.call(this);
			}
		}, self.options.fadeTime);
	
		return self;
	};
	
	// Fade out the Nipple instance.
	Nipple.prototype.hide = function (cb) {
		var self = this;
	
		if (self.options.dataOnly) {
			return self;
		}
	
		self.ui.el.style.opacity = self.options.restOpacity;
	
		clearTimeout(self.removeTimeout);
		clearTimeout(self.showTimeout);
		clearTimeout(self.restTimeout);
	
		self.removeTimeout = setTimeout(
			function () {
				var display = self.options.mode === 'dynamic' ? 'none' : 'block';
				self.ui.el.style.display = display;
				if (typeof cb === 'function') {
					cb.call(self);
				}
	
				self.trigger('hidden', self.instance);
			},
			self.options.fadeTime
		);
		if (self.options.restJoystick) {
			self.restPosition();
		}
	
		return self;
	};
	
	Nipple.prototype.restPosition = function (cb) {
		var self = this;
		self.frontPosition = {
			x: 0,
			y: 0
		};
		var animTime = self.options.fadeTime + 'ms';
	
		var transitStyle = {};
		transitStyle.front = u.getTransitionStyle('transition',
			['top', 'left'], animTime);
	
		var styles = {front: {}};
		styles.front = {
			left: self.frontPosition.x + 'px',
			top: self.frontPosition.y + 'px'
		};
	
		self.applyStyles(transitStyle);
		self.applyStyles(styles);
	
		self.restTimeout = setTimeout(
			function () {
				if (typeof cb === 'function') {
					cb.call(self);
				}
				self.restCallback();
			},
			self.options.fadeTime
		);
	};
	
	Nipple.prototype.restCallback = function () {
		var self = this;
		var transitStyle = {};
		transitStyle.front = u.getTransitionStyle('transition', 'none', '');
		self.applyStyles(transitStyle);
		self.trigger('rested', self.instance);
	};
	
	Nipple.prototype.resetDirection = function () {
		// Fully rebuild the object to let the iteration possible.
		this.direction = {
			x: false,
			y: false,
			angle: false
		};
	};
	
	Nipple.prototype.computeDirection = function (obj) {
		var rAngle = obj.angle.radian;
		var angle45 = Math.PI / 4;
		var angle90 = Math.PI / 2;
		var direction, directionX, directionY;
	
		// Angular direction
		//     \  UP /
		//      \   /
		// LEFT       RIGHT
		//      /   \
		//     /DOWN \
		//
		if (
			rAngle > angle45 &&
			rAngle < (angle45 * 3) &&
			!obj.lockX
		) {
			direction = 'up';
		} else if (
			rAngle > -angle45 &&
			rAngle <= angle45 &&
			!obj.lockY
		) {
			direction = 'left';
		} else if (
			rAngle > (-angle45 * 3) &&
			rAngle <= -angle45 &&
			!obj.lockX
		) {
			direction = 'down';
		} else if (!obj.lockY) {
			direction = 'right';
		}
	
		// Plain direction
		//    UP                 |
		// _______               | RIGHT
		//                  LEFT |
		//   DOWN                |
		if (!obj.lockY) {
			if (rAngle > -angle90 && rAngle < angle90) {
				directionX = 'left';
			} else {
				directionX = 'right';
			}
		}
	
		if (!obj.lockX) {
			if (rAngle > 0) {
				directionY = 'up';
			} else {
				directionY = 'down';
			}
		}
	
		if (obj.force > this.options.threshold) {
			var oldDirection = {};
			for (var i in this.direction) {
				if (this.direction.hasOwnProperty(i)) {
					oldDirection[i] = this.direction[i];
				}
			}
	
			var same = {};
	
			this.direction = {
				x: directionX,
				y: directionY,
				angle: direction
			};
	
			obj.direction = this.direction;
	
			for (var i in oldDirection) {
				if (oldDirection[i] === this.direction[i]) {
					same[i] = true;
				}
			}
	
			// If all 3 directions are the same, we don't trigger anything.
			if (same.x && same.y && same.angle) {
				return obj;
			}
	
			if (!same.x || !same.y) {
				this.trigger('plain', obj);
			}
	
			if (!same.x) {
				this.trigger('plain:' + directionX, obj);
			}
	
			if (!same.y) {
				this.trigger('plain:' + directionY, obj);
			}
	
			if (!same.angle) {
				this.trigger('dir dir:' + direction, obj);
			}
		}
		return obj;
	};
	
	/* global Nipple, Super */
	
	///////////////////////////
	///   THE COLLECTION    ///
	///////////////////////////
	
	function Collection (manager, options) {
		var self = this;
		self.nipples = [];
		self.idles = [];
		self.actives = [];
		self.ids = [];
		self.pressureIntervals = {};
		self.manager = manager;
		self.id = Collection.id;
		Collection.id += 1;
	
		// Defaults
		self.defaults = {
			zone: document.body,
			multitouch: false,
			maxNumberOfNipples: 10,
			mode: 'dynamic',
			position: {top: 0, left: 0},
			catchDistance: 200,
			size: 100,
			threshold: 0.1,
			color: 'white',
			fadeTime: 250,
			dataOnly: false,
			restJoystick: true,
			restOpacity: 0.5,
			lockX: false,
			lockY: false
		};
	
		self.config(options);
	
		// Overwrites
		if (self.options.mode === 'static' || self.options.mode === 'semi') {
			self.options.multitouch = false;
		}
	
		if (!self.options.multitouch) {
			self.options.maxNumberOfNipples = 1;
		}
	
		self.updateBox();
		self.prepareNipples();
		self.bindings();
		self.begin();
	
		return self.nipples;
	}
	
	Collection.prototype = new Super();
	Collection.constructor = Collection;
	Collection.id = 0;
	
	Collection.prototype.prepareNipples = function () {
		var self = this;
		var nips = self.nipples;
	
		// Public API Preparation.
		nips.on = self.on.bind(self);
		nips.off = self.off.bind(self);
		nips.options = self.options;
		nips.destroy = self.destroy.bind(self);
		nips.ids = self.ids;
		nips.id = self.id;
		nips.processOnMove = self.processOnMove.bind(self);
		nips.processOnEnd = self.processOnEnd.bind(self);
		nips.get = function (id) {
			if (id === undefined) {
				return nips[0];
			}
			for (var i = 0, max = nips.length; i < max; i += 1) {
				if (nips[i].identifier === id) {
					return nips[i];
				}
			}
			return false;
		};
	};
	
	Collection.prototype.bindings = function () {
		var self = this;
		// Touch start event.
		self.bindEvt(self.options.zone, 'start');
		// Avoid native touch actions (scroll, zoom etc...) on the zone.
		self.options.zone.style.touchAction = 'none';
		self.options.zone.style.msTouchAction = 'none';
	};
	
	Collection.prototype.begin = function () {
		var self = this;
		var opts = self.options;
	
		// We place our static nipple
		// if needed.
		if (opts.mode === 'static') {
			var nipple = self.createNipple(
				opts.position,
				self.manager.getIdentifier()
			);
			// Add it to the dom.
			nipple.add();
			// Store it in idles.
			self.idles.push(nipple);
		}
	};
	
	// Nipple Factory
	Collection.prototype.createNipple = function (position, identifier) {
		var self = this;
		var scroll = u.getScroll();
		var toPutOn = {};
		var opts = self.options;
	
		if (position.x && position.y) {
			toPutOn = {
				x: position.x -
					(scroll.x + self.box.left),
				y: position.y -
					(scroll.y + self.box.top)
			};
		} else if (
				position.top ||
				position.right ||
				position.bottom ||
				position.left
			) {
	
			// We need to compute the position X / Y of the joystick.
			var dumb = document.createElement('DIV');
			dumb.style.display = 'hidden';
			dumb.style.top = position.top;
			dumb.style.right = position.right;
			dumb.style.bottom = position.bottom;
			dumb.style.left = position.left;
			dumb.style.position = 'absolute';
	
			opts.zone.appendChild(dumb);
			var dumbBox = dumb.getBoundingClientRect();
			opts.zone.removeChild(dumb);
	
			toPutOn = position;
			position = {
				x: dumbBox.left + scroll.x,
				y: dumbBox.top + scroll.y
			};
		}
	
		var nipple = new Nipple(self, {
			color: opts.color,
			size: opts.size,
			threshold: opts.threshold,
			fadeTime: opts.fadeTime,
			dataOnly: opts.dataOnly,
			restJoystick: opts.restJoystick,
			restOpacity: opts.restOpacity,
			mode: opts.mode,
			identifier: identifier,
			position: position,
			zone: opts.zone,
			frontPosition: {
				x: 0,
				y: 0
			}
		});
	
		if (!opts.dataOnly) {
			u.applyPosition(nipple.ui.el, toPutOn);
			u.applyPosition(nipple.ui.front, nipple.frontPosition);
		}
		self.nipples.push(nipple);
		self.trigger('added ' + nipple.identifier + ':added', nipple);
		self.manager.trigger('added ' + nipple.identifier + ':added', nipple);
	
		self.bindNipple(nipple);
	
		return nipple;
	};
	
	Collection.prototype.updateBox = function () {
		var self = this;
		self.box = self.options.zone.getBoundingClientRect();
	};
	
	Collection.prototype.bindNipple = function (nipple) {
		var self = this;
		var type;
		// Bubble up identified events.
		var handler = function (evt, data) {
			// Identify the event type with the nipple's id.
			type = evt.type + ' ' + data.id + ':' + evt.type;
			self.trigger(type, data);
		};
	
		// When it gets destroyed.
		nipple.on('destroyed', self.onDestroyed.bind(self));
	
		// Other events that will get bubbled up.
		nipple.on('shown hidden rested dir plain', handler);
		nipple.on('dir:up dir:right dir:down dir:left', handler);
		nipple.on('plain:up plain:right plain:down plain:left', handler);
	};
	
	Collection.prototype.pressureFn = function (touch, nipple, identifier) {
		var self = this;
		var previousPressure = 0;
		clearInterval(self.pressureIntervals[identifier]);
		// Create an interval that will read the pressure every 100ms
		self.pressureIntervals[identifier] = setInterval(function () {
			var pressure = touch.force || touch.pressure ||
				touch.webkitForce || 0;
			if (pressure !== previousPressure) {
				nipple.trigger('pressure', pressure);
				self.trigger('pressure ' +
					nipple.identifier + ':pressure', pressure);
				previousPressure = pressure;
			}
		}.bind(self), 100);
	};
	
	Collection.prototype.onstart = function (evt) {
		var self = this;
		var opts = self.options;
		evt = u.prepareEvent(evt);
	
		// Update the box position
		self.updateBox();
	
		var process = function (touch) {
			// If we can create new nipples
			// meaning we don't have more active nipples than we should.
			if (self.actives.length < opts.maxNumberOfNipples) {
				self.processOnStart(touch);
			}
		};
	
		u.map(evt, process);
	
		// We ask upstream to bind the document
		// on 'move' and 'end'
		self.manager.bindDocument();
		return false;
	};
	
	Collection.prototype.processOnStart = function (evt) {
		var self = this;
		var opts = self.options;
		var indexInIdles;
		var identifier = self.manager.getIdentifier(evt);
		var pressure = evt.force || evt.pressure || evt.webkitForce || 0;
		var position = {
			x: evt.pageX,
			y: evt.pageY
		};
	
		var nipple = self.getOrCreate(identifier, position);
	
		// Update its touch identifier
		if (nipple.identifier !== identifier) {
			self.manager.removeIdentifier(nipple.identifier);
		}
		nipple.identifier = identifier;
	
		var process = function (nip) {
			// Trigger the start.
			nip.trigger('start', nip);
			self.trigger('start ' + nip.id + ':start', nip);
	
			nip.show();
			if (pressure > 0) {
				self.pressureFn(evt, nip, nip.identifier);
			}
			// Trigger the first move event.
			self.processOnMove(evt);
		};
	
		// Transfer it from idles to actives.
		if ((indexInIdles = self.idles.indexOf(nipple)) >= 0) {
			self.idles.splice(indexInIdles, 1);
		}
	
		// Store the nipple in the actives array
		self.actives.push(nipple);
		self.ids.push(nipple.identifier);
	
		if (opts.mode !== 'semi') {
			process(nipple);
		} else {
			// In semi we check the distance of the touch
			// to decide if we have to reset the nipple
			var distance = u.distance(position, nipple.position);
			if (distance <= opts.catchDistance) {
				process(nipple);
			} else {
				nipple.destroy();
				self.processOnStart(evt);
				return;
			}
		}
	
		return nipple;
	};
	
	Collection.prototype.getOrCreate = function (identifier, position) {
		var self = this;
		var opts = self.options;
		var nipple;
	
		// If we're in static or semi, we might already have an active.
		if (/(semi|static)/.test(opts.mode)) {
			// Get the active one.
			// TODO: Multi-touche for semi and static will start here.
			// Return the nearest one.
			nipple = self.idles[0];
			if (nipple) {
				self.idles.splice(0, 1);
				return nipple;
			}
	
			if (opts.mode === 'semi') {
				// If we're in semi mode, we need to create one.
				return self.createNipple(position, identifier);
			}
	
			console.warn('Coudln\'t find the needed nipple.');
			return false;
		}
		// In dynamic, we create a new one.
		nipple = self.createNipple(position, identifier);
		return nipple;
	};
	
	Collection.prototype.processOnMove = function (evt) {
		var self = this;
		var opts = self.options;
		var identifier = self.manager.getIdentifier(evt);
		var nipple = self.nipples.get(identifier);
	
		if (!nipple) {
			// This is here just for safety.
			// It shouldn't happen.
			console.error('Found zombie joystick with ID ' + identifier);
			self.manager.removeIdentifier(identifier);
			return;
		}
	
		nipple.identifier = identifier;
	
		var size = nipple.options.size / 2;
		var pos = {
			x: evt.pageX,
			y: evt.pageY
		};
	
		var dist = u.distance(pos, nipple.position);
		var angle = u.angle(pos, nipple.position);
		var rAngle = u.radians(angle);
		var force = dist / size;
	
		// If distance is bigger than nipple's size
		// we clamp the position.
		if (dist > size) {
			dist = size;
			pos = u.findCoord(nipple.position, dist, angle);
		}
	
		var xPosition = pos.x - nipple.position.x
		var yPosition = pos.y - nipple.position.y
	
		if (opts.lockX){
			yPosition = 0
		}
		if (opts.lockY) {
			xPosition = 0
		}
	
		nipple.frontPosition = {
			x: xPosition,
			y: yPosition
		};
	
		if (!opts.dataOnly) {
			u.applyPosition(nipple.ui.front, nipple.frontPosition);
		}
	
		// Prepare event's datas.
		var toSend = {
			identifier: nipple.identifier,
			position: pos,
			force: force,
			pressure: evt.force || evt.pressure || evt.webkitForce || 0,
			distance: dist,
			angle: {
				radian: rAngle,
				degree: angle
			},
			instance: nipple,
			lockX: opts.lockX,
			lockY: opts.lockY
		};
	
		// Compute the direction's datas.
		toSend = nipple.computeDirection(toSend);
	
		// Offset angles to follow units circle.
		toSend.angle = {
			radian: u.radians(180 - angle),
			degree: 180 - angle
		};
	
		// Send everything to everyone.
		nipple.trigger('move', toSend);
		self.trigger('move ' + nipple.id + ':move', toSend);
	};
	
	Collection.prototype.processOnEnd = function (evt) {
		var self = this;
		var opts = self.options;
		var identifier = self.manager.getIdentifier(evt);
		var nipple = self.nipples.get(identifier);
		var removedIdentifier = self.manager.removeIdentifier(nipple.identifier);
	
		if (!nipple) {
			return;
		}
	
		if (!opts.dataOnly) {
			nipple.hide(function () {
				if (opts.mode === 'dynamic') {
					nipple.trigger('removed', nipple);
					self.trigger('removed ' + nipple.id + ':removed', nipple);
					self.manager
						.trigger('removed ' + nipple.id + ':removed', nipple);
					nipple.destroy();
				}
			});
		}
	
		// Clear the pressure interval reader
		clearInterval(self.pressureIntervals[nipple.identifier]);
	
		// Reset the direciton of the nipple, to be able to trigger a new direction
		// on start.
		nipple.resetDirection();
	
		nipple.trigger('end', nipple);
		self.trigger('end ' + nipple.id + ':end', nipple);
	
		// Remove identifier from our bank.
		if (self.ids.indexOf(nipple.identifier) >= 0) {
			self.ids.splice(self.ids.indexOf(nipple.identifier), 1);
		}
	
		// Clean our actives array.
		if (self.actives.indexOf(nipple) >= 0) {
			self.actives.splice(self.actives.indexOf(nipple), 1);
		}
	
		if (/(semi|static)/.test(opts.mode)) {
			// Transfer nipple from actives to idles
			// if we're in semi or static mode.
			self.idles.push(nipple);
		} else if (self.nipples.indexOf(nipple) >= 0) {
			// Only if we're not in semi or static mode
			// we can remove the instance.
			self.nipples.splice(self.nipples.indexOf(nipple), 1);
		}
	
		// We unbind move and end.
		self.manager.unbindDocument();
	
		// We add back the identifier of the idle nipple;
		if (/(semi|static)/.test(opts.mode)) {
			self.manager.ids[removedIdentifier.id] = removedIdentifier.identifier;
		}
	};
	
	// Remove destroyed nipple from the lists
	Collection.prototype.onDestroyed = function(evt, nipple) {
		var self = this;
		if (self.nipples.indexOf(nipple) >= 0) {
			self.nipples.splice(self.nipples.indexOf(nipple), 1);
		}
		if (self.actives.indexOf(nipple) >= 0) {
			self.actives.splice(self.actives.indexOf(nipple), 1);
		}
		if (self.idles.indexOf(nipple) >= 0) {
			self.idles.splice(self.idles.indexOf(nipple), 1);
		}
		if (self.ids.indexOf(nipple.identifier) >= 0) {
			self.ids.splice(self.ids.indexOf(nipple.identifier), 1);
		}
	
		// Remove the identifier from our bank
		self.manager.removeIdentifier(nipple.identifier);
	
		// We unbind move and end.
		self.manager.unbindDocument();
	};
	
	// Cleanly destroy the manager
	Collection.prototype.destroy = function () {
		var self = this;
		self.unbindEvt(self.options.zone, 'start');
	
		// Destroy nipples.
		self.nipples.forEach(function(nipple) {
			nipple.destroy();
		});
	
		// Clean 3DTouch intervals.
		for (var i in self.pressureIntervals) {
			if (self.pressureIntervals.hasOwnProperty(i)) {
				clearInterval(self.pressureIntervals[i]);
			}
		}
	
		// Notify the manager passing the instance
		self.trigger('destroyed', self.nipples);
		// We unbind move and end.
		self.manager.unbindDocument();
		// Unbind everything.
		self.off();
	};
	
	/* global u, Super, Collection */
	
	///////////////////////
	///     MANAGER     ///
	///////////////////////
	
	function Manager (options) {
		var self = this;
		self.ids = {};
		self.index = 0;
		self.collections = [];
	
		self.config(options);
		self.prepareCollections();
	
		// Listen for resize, to reposition every joysticks
		var resizeTimer;
		u.bindEvt(window, 'resize', function (evt) {
			clearTimeout(resizeTimer);
			resizeTimer = setTimeout(function () {
				var pos;
				var scroll = u.getScroll();
				self.collections.forEach(function (collection) {
					collection.forEach(function (nipple) {
						pos = nipple.el.getBoundingClientRect();
						nipple.position = {
							x: scroll.x + pos.left,
							y: scroll.y + pos.top
						};
					});
				});
			}, 100);
		});
	
		return self.collections;
	};
	
	Manager.prototype = new Super();
	Manager.constructor = Manager;
	
	Manager.prototype.prepareCollections = function () {
		var self = this;
		// Public API Preparation.
		self.collections.create = self.create.bind(self);
		// Listen to anything
		self.collections.on = self.on.bind(self);
		// Unbind general events
		self.collections.off = self.off.bind(self);
		// Destroy everything
		self.collections.destroy = self.destroy.bind(self);
		// Get any nipple
		self.collections.get = function (id) {
			var nipple;
			self.collections.every(function (collection) {
				if (nipple = collection.get(id)) {
					return false;
				}
				return true;
			});
			return nipple;
		};
	};
	
	Manager.prototype.create = function (options) {
		return this.createCollection(options);
	};
	
	// Collection Factory
	Manager.prototype.createCollection = function (options) {
		var self = this;
		var collection = new Collection(self, options);
	
		self.bindCollection(collection);
		self.collections.push(collection);
	
		return collection;
	};
	
	Manager.prototype.bindCollection = function (collection) {
		var self = this;
		var type;
		// Bubble up identified events.
		var handler = function (evt, data) {
			// Identify the event type with the nipple's identifier.
			type = evt.type + ' ' + data.id + ':' + evt.type;
			self.trigger(type, data);
		};
	
		// When it gets destroyed we clean.
		collection.on('destroyed', self.onDestroyed.bind(self));
	
		// Other events that will get bubbled up.
		collection.on('shown hidden rested dir plain', handler);
		collection.on('dir:up dir:right dir:down dir:left', handler);
		collection.on('plain:up plain:right plain:down plain:left', handler);
	};
	
	Manager.prototype.bindDocument = function () {
		var self = this;
		// Bind only if not already binded
		if (!self.binded) {
			self.bindEvt(document, 'move')
				.bindEvt(document, 'end');
			self.binded = true;
		}
	};
	
	Manager.prototype.unbindDocument = function (force) {
		var self = this;
		// If there are no touch left
		// unbind the document.
		if (!Object.keys(self.ids).length || force === true) {
			self.unbindEvt(document, 'move')
				.unbindEvt(document, 'end');
			self.binded = false;
		}
	};
	
	Manager.prototype.getIdentifier = function (evt) {
		var id;
		// If no event, simple increment
		if (!evt) {
			id = this.index;
		} else {
			// Extract identifier from event object.
			// Unavailable in mouse events so replaced by latest increment.
			id = evt.identifier === undefined ? evt.pointerId : evt.identifier;
			if (id === undefined) {
				id = this.latest || 0;
			}
		}
	
		if (this.ids[id] === undefined) {
			this.ids[id] = this.index;
			this.index += 1;
		}
	
		// Keep the latest id used in case we're using an unidentified mouseEvent
		this.latest = id;
		return this.ids[id];
	};
	
	Manager.prototype.removeIdentifier = function (identifier) {
		var removed = {};
		for (var id in this.ids) {
			if (this.ids[id] === identifier) {
				removed.id = id;
				removed.identifier = this.ids[id];
				delete this.ids[id];
				break;
			}
		}
		return removed;
	};
	
	Manager.prototype.onmove = function (evt) {
		var self = this;
		self.onAny('move', evt);
		return false;
	};
	
	Manager.prototype.onend = function (evt) {
		var self = this;
		self.onAny('end', evt);
		return false;
	};
	
	Manager.prototype.oncancel = function (evt) {
		var self = this;
		self.onAny('end', evt);
		return false;
	};
	
	Manager.prototype.onAny = function (which, evt) {
		var self = this;
		var id;
		var processFn = 'processOn' + which.charAt(0).toUpperCase() +
			which.slice(1);
		evt = u.prepareEvent(evt);
		var processColl = function (e, id, coll) {
			if (coll.ids.indexOf(id) >= 0) {
				coll[processFn](e);
				// Mark the event to avoid cleaning it later.
				e._found_ = true;
			}
		};
		var processEvt = function (e) {
			id = self.getIdentifier(e);
			u.map(self.collections, processColl.bind(null, e, id));
			// If the event isn't handled by any collection,
			// we need to clean its identifier.
			if (!e._found_) {
				self.removeIdentifier(id);
			}
		};
	
		u.map(evt, processEvt);
	
		return false;
	};
	
	// Cleanly destroy the manager
	Manager.prototype.destroy = function () {
		var self = this;
		self.unbindDocument(true);
		self.ids = {};
		self.index = 0;
		self.collections.forEach(function(collection) {
			collection.destroy();
		});
		self.off();
	};
	
	// When a collection gets destroyed
	// we clean behind.
	Manager.prototype.onDestroyed = function (evt, coll) {
		var self = this;
		if (self.collections.indexOf(coll) < 0) {
			return false;
		}
		self.collections.splice(self.collections.indexOf(coll), 1);
	};
	
	var factory = new Manager();
	return {
		create: function (options) {
			return factory.create(options);
		},
		factory: factory
	};
	
	});