// https://d3js.org/d3-chord/ Version 0.0.2. Copyright 2016 Mike Bostock.
(function (global, factory) {
  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('d3-array'), require('d3-path')) :
  typeof define === 'function' && define.amd ? define(['exports', 'd3-array', 'd3-path'], factory) :
  (factory((global.d3 = global.d3 || {}),global.d3,global.d3));
}(this, function (exports,d3Array,d3Path) { 'use strict';

  var cos = Math.cos;
  var sin = Math.sin;
  var pi = Math.PI;
  var halfPi = pi / 2;
  var tau = pi * 2;
  var max = Math.max;

  function compareValue(compare) {
    return function(a, b) {
      return compare(
        a.source.value + a.target.value,
        b.source.value + b.target.value
      );
    };
  }

  function chord() {
    var padAngle = 0,
        sortGroups = null,
        sortSubgroups = null,
        sortChords = null;

    function chord(matrix, e_series, subjectByName, subjectByIndex) {
					if (e_series === undefined) {
console.log("^^^^^^^^^^^^^^^^^^^^^^^^^ matrix mode")					
							var n = matrix.length,
									groupSums = [],
									groupIndex = d3Array.range(n),
									subgroupIndex = [],
									chords = [],
									groups = chords.groups = new Array(n),
									subgroups = new Array(n * n),
									k,
									x,
									x0,
									dx,
									i,
									j;

							// Compute the sum.
							k = 0, i = -1; while (++i < n) {
								x = 0, j = -1; while (++j < n) {
									x += matrix[i][j];
								}
								groupSums.push(x);
								subgroupIndex.push(d3Array.range(n));
								k += x;
							}

							// Sort groups…
							if (sortGroups) groupIndex.sort(function(a, b) {
								return sortGroups(groupSums[a], groupSums[b]);
							});

							// Sort subgroups…
							if (sortSubgroups) subgroupIndex.forEach(function(d, i) {
								d.sort(function(a, b) {
									return sortSubgroups(matrix[i][a], matrix[i][b]);
								});
							});

							// Convert the sum to scaling factor for [0, 2pi].
							// TODO Allow start and end angle to be specified?
							// TODO Allow padding to be specified as percentage?
							k = max(0, tau - padAngle * n) / k;
							dx = k ? padAngle : tau / n;

							// Compute the start and end angle for each group and subgroup.
							// Note: Opera has a bug reordering object literal properties!
							x = 0, i = -1; while (++i < n) {
								x0 = x, j = -1; while (++j < n) {
									var di = groupIndex[i],
											dj = subgroupIndex[di][j],
											v = matrix[di][dj],
											a0 = x,
											a1 = x += v * k;
									subgroups[dj * n + di] = {
										index: di,
										subindex: dj,
										startAngle: a0,
										endAngle: a1,
										value: v
									};
								}
								groups[di] = {
									index: di,
									startAngle: x0,
									endAngle: x,
									value: groupSums[di]
								};
								x += dx;
							}

							// Generate chords for each (non-empty) subgroup-subgroup link.
							i = -1; while (++i < n) {
								j = i - 1; while (++j < n) {
									var source = subgroups[j * n + i],
											target = subgroups[i * n + j];
									if (source.value || target.value) {
										chords.push(source.value < target.value
												? {source: target, target: source}
												: {source: source, target: target});
									}
								}
							}
							
						return sortChords ? chords.sort(sortChords) : chords
							
					}
				else 
				// ==========================================================================================
					{
							 var e_m = e_series.length,
										e_n = subjectByName.keys().length,		// number of groups
										e_groupSums = {},
										e_groupIndex = [],
										e_subgroupIndex = [],
										e_chords = [],
										e_groups = [],
										e_subgroups = [],
										e_k,
										e_x,
										e_x0,
										e_dx,
										e_g,
										e_s
								
								e_k = 0, e_s = -1; while (++e_s < e_m) {	// actions
									e_k += e_series[e_s].weigh							// source slots
									e_k += 1																// target slots
								}
								
								e_k = max(0, tau - padAngle * e_n) / e_k;		// radians per slot
								e_dx = e_k ? padAngle : tau / e_n;					// radians per pad
							
								var e_subgroups = []
								e_x0 = e_x = 0, e_g = -1; while (++e_g < e_n) {			// for each group e_g
									var subject = subjectByIndex[e_g]									
									e_subgroups[e_g] = []
									e_x0 = e_x, e_s = -1; while (++e_s < e_m) {				// for each action e_s
										var action = e_series[e_s]											// set action

											if (subject.name === action.source.name					//       1 0
													&& subject.name !== action.target.name
												) {																					// if group is subject of action
													var v = action.weigh												// slots of action per source
													var a0 = e_x																// start action where we finished
													e_x = e_x + v * e_k													// end action per slots
													var a1 = e_x																// end action per slots
						
													var sg = Object.assign({}, action, {					// base subgroup on action
														index: action.source.index,							// set source group index
														subindex: action.target.index,					// set target group index
														startAngleSource: a0,
														endAngleSource: a1,
														value: v,															// set action value - weigh
												})
												e_subgroups[e_g].push(sg)										// add subgroup to group array
											}

											else if (subject.name === action.source.name					//       1 1
													&& subject.name === action.target.name
												) {																					// if group is subject of action
												var a0, a1, b0, b1
												var v = action.weigh												// slots of action per source
												var v1 = 1 
												a0 = e_x																// start action where we finished
												a1 = e_x += v * e_k												// end action per slots
												b0 = a1																	// start action where we finished
												b1 = e_x += v1 * e_k												// end action per slots
													var sg = Object.assign({}, action, {					// base subgroup on action
														index: action.source.index,							// set source group index
														subindex: action.target.index,					// set target group index
														startAngleSource: a0,
														endAngleSource: a1,
														startAngleTarget: b0,
														endAngleTarget: b1,
														value: v,															// set action value - weigh
												})
												e_subgroups[e_g].push(sg)										// add subgroup to group array
											}
											
											else if (subject.name !== action.source.name					//       0 1
													&& subject.name === action.target.name
												) {																						// if group is subject of action
												var a0, a1, b0, b1
												var v = 0															// slots of action per source
												var v1 = 1																	// slots of action per target
												a0 = e_x																// start action where we finished
												a1 = e_x += v * e_k												// end action per slots
												b0 = a1																// start action where we finished
												b1 = e_x += v1 * e_k												// end action per slots
													var sg = Object.assign({}, action, {					// base subgroup on action
														index: action.source.index,							// set source group index
														subindex: action.target.index,					// set target group index
														startAngleTarget: b0,
														endAngleTarget: b1,
														// value: v,															// set action value - weigh
												})
												e_subgroups[e_g].push(sg)										// add subgroup to group array
											}
											
												
									}
								
									e_groups[e_g] = {
										index: e_g,
										startAngle: e_x0,
										endAngle: e_x,
										value: e_groupSums[e_g],
										subgroups: e_subgroups[e_g],
									}
													
									e_x += e_dx									// increment angle with pad		
								}
								
								e_s = -1; while (++e_s < e_m) {												// for each actions e_s
									
									var actionThis = e_series[e_s]																				// action		
									var actionSourceGroup = 			e_groups[e_series[e_s].source.index]		// source group
									var actionTargetGroup = 			e_groups[e_series[e_s].target.index]		// target group
									
									var actionSubgroupsSource = 				e_groups[e_series[e_s].source.index].subgroups	// source subgroups
									var indexSource = actionSubgroupsSource.filter(function(d) {		// source subgroup
												return d.prx == actionThis.prx
									})[0]
									
									var actionSubgroupsTarget = 				e_groups[e_series[e_s].target.index].subgroups	// target subgroups
									var indexTarget = actionSubgroupsTarget.filter(function(d) {		// target subgroup
												return d.prx == actionThis.prx
									})[0]
									
									e_chords.push(
										{
											prx: actionThis.prx,
											predicate: actionThis.predicate,
											weigh: actionThis.weigh,
											source: {
												index: actionThis.source.index,
												subindex: indexSource.source.index,
												startAngle: indexSource.startAngleSource,
												endAngle: indexSource.endAngleSource,
												value: actionThis, 
											},
											target: {
												index: actionThis.target.index,
												subindex: indexSource.target.index,
												startAngle: indexTarget.startAngleTarget,
												endAngle: indexTarget.endAngleTarget,
												value: actionThis,
											}
										}
									)			
								}

						e_chords.groups = e_groups
						return sortChords ? e_chords.sort(sortChords) : e_chords;

				}
 			
    }

    chord.padAngle = function(_) {
      return arguments.length ? (padAngle = max(0, _), chord) : padAngle;
    };

    chord.sortGroups = function(_) {
      return arguments.length ? (sortGroups = _, chord) : sortGroups;
    };

    chord.sortSubgroups = function(_) {
      return arguments.length ? (sortSubgroups = _, chord) : sortSubgroups;
    };

    chord.sortChords = function(_) {
      return arguments.length ? (_ == null ? sortChords = null : (sortChords = compareValue(_))._ = _, chord) : sortChords && sortChords._;
    };

    return chord;
  }

  var slice = Array.prototype.slice;

  function constant(x) {
    return function() {
      return x;
    };
  }

  function defaultSource(d) {
    return d.source;
  }

  function defaultTarget(d) {
    return d.target;
  }

  function defaultRadius(d) {
    return d.radius;
  }

  function defaultStartAngle(d) {
    return d.startAngle;
  }

  function defaultEndAngle(d) {
    return d.endAngle;
  }

  function ribbon() {
    var source = defaultSource,
        target = defaultTarget,
        radius = defaultRadius,
        startAngle = defaultStartAngle,
        endAngle = defaultEndAngle,
        context = null;

    function ribbon() {
      var buffer,
          argv = slice.call(arguments),
          s = source.apply(this, argv),
          t = target.apply(this, argv),
          sr = +radius.apply(this, (argv[0] = s, argv)),
          sa0 = startAngle.apply(this, argv) - halfPi,
          sa1 = endAngle.apply(this, argv) - halfPi,
          sx0 = sr * cos(sa0),
          sy0 = sr * sin(sa0),
          tr = +radius.apply(this, (argv[0] = t, argv)),
          ta0 = startAngle.apply(this, argv) - halfPi,
          ta1 = endAngle.apply(this, argv) - halfPi;

      if (!context) context = buffer = d3Path.path();

      context.moveTo(sx0, sy0);
      context.arc(0, 0, sr, sa0, sa1);
      if (sa0 !== ta0 || sa1 !== ta1) { // TODO sr !== tr?
        context.quadraticCurveTo(0, 0, tr * cos(ta0), tr * sin(ta0));
        context.arc(0, 0, tr, ta0, ta1);
      }
      context.quadraticCurveTo(0, 0, sx0, sy0);
      context.closePath();

      if (buffer) return context = null, buffer + "" || null;
    }

    ribbon.radius = function(_) {
      return arguments.length ? (radius = typeof _ === "function" ? _ : constant(+_), ribbon) : radius;
    };

    ribbon.startAngle = function(_) {
      return arguments.length ? (startAngle = typeof _ === "function" ? _ : constant(+_), ribbon) : startAngle;
    };

    ribbon.endAngle = function(_) {
      return arguments.length ? (endAngle = typeof _ === "function" ? _ : constant(+_), ribbon) : endAngle;
    };

    ribbon.source = function(_) {
      return arguments.length ? (source = _, ribbon) : source;
    };

    ribbon.target = function(_) {
      return arguments.length ? (target = _, ribbon) : target;
    };

    ribbon.context = function(_) {
      return arguments.length ? ((context = _ == null ? null : _), ribbon) : context;
    };

    return ribbon;
  }

  exports.chord = chord;
  exports.ribbon = ribbon;

  Object.defineProperty(exports, '__esModule', { value: true });

}));
/* 																	*/
/* 				d3rings-controls.js   		*/
/* 																	*/

if (typeof require === "function") {
	var d3 = require('./d3.v4.0.0-rc.2.js')
}	

(function (global, factory) {
  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
  typeof define === 'function' && define.amd ? define(['exports'], factory) :
  (factory((global.d3ringsControls = global.d3ringsControls || {})));
}(this, function (exports) { 'use strict';

/*  -------------          */
/*    timeControls        */
/*  -------------          */
	function timeControls(payload) {
	
		var currentListeners = []
		var nextListeners = currentListeners

		// ____________________ ensureCanMutateNextListeners
		function ensureCanMutateNextListeners() {
				if (nextListeners === currentListeners) {
					nextListeners = currentListeners.slice()
				}
		}			
		
		// ____________________ timer
		function timer() {}
		
		// ____________________ start
		timer.start = function start() {
				var started = false
				var listeners = currentListeners = nextListeners
				for (var i = 0; i < listeners.length; i++) {
					// listeners[i]()
				}
				return timer
			}
		// ____________________ subscribe
	 timer.subscribe = function subscribe (listener) {
			if (typeof listener !== 'function') {
				throw new Error('Expected listener to be a function.')
			}
			var isSubscribed = true
			ensureCanMutateNextListeners()
			nextListeners.push(listener)
			
			d3.timer(listener)

			return function unsubscribe() {
				if (!isSubscribed) {
					return
				}

				isSubscribed = false
				ensureCanMutateNextListeners()
				var index = nextListeners.indexOf(listener)
				nextListeners.splice(index, 1)
			}
		}
		return timer
}		

/*  -------------          */
/*    stepControls        */
/*  -------------          */
	function stepControls(payload) {
	
		var store = payload.store
		var currentListeners = []
		var nextListeners = currentListeners

		// ____________________ ensureCanMutateNextListeners
		function ensureCanMutateNextListeners() {
				if (nextListeners === currentListeners) {
					nextListeners = currentListeners.slice()
				}
		}			
		
		// ____________________ stepper
		function stepper() {}
		
		// ____________________ start
		stepper.start = function start() {
					var periodFactor = store.getState().reducerConfig.periodFactor					
					var beatTime = store.getState().reducerConfig.beatTime				
					var periodTime = periodFactor	* beatTime // items added						
							
					var itemSpan = store.getState().reducerConfig.itemSpan
							
					var tickspan = store.getState().reducerConfig.tickspan
					var vLow = store.getState().reducerLanes.messagesCursorLow
					var vHigh = store.getState().reducerLanes.messagesCursorHigh

					var tickfn = setInterval(function() {
																		
						var listeners = currentListeners = nextListeners
						for (var i = 0; i < listeners.length; i++) {
							listeners[i]()
						}									
					}, periodTime)
					
					return stepper
			}
		// ____________________ subscribe
	 stepper.subscribe = function subscribe (listener) {
			if (typeof listener !== 'function') {
				throw new Error('Expected listener to be a function.')
			}
			var isSubscribed = true
			ensureCanMutateNextListeners()
			nextListeners.push(listener)
			// return stepper

			return function unsubscribe() {
				if (!isSubscribed) {
					return
				}

				isSubscribed = false

				ensureCanMutateNextListeners()
				var index = nextListeners.indexOf(listener)
				nextListeners.splice(index, 1)
			}

		}
		return stepper
}		

/*  -------------          */
/*    tickControls        */
/*  -------------          */
	function tickControls(payload) {
	
		var currentListeners = []
		var nextListeners = currentListeners

		// ____________________ ensureCanMutateNextListeners
		function ensureCanMutateNextListeners() {
				if (nextListeners === currentListeners) {
					nextListeners = currentListeners.slice()
				}
		}			
		
		// ____________________ ticker
		function ticker() {}
		
		// ____________________ start
		ticker.start = function start() {
				var started = false
				var main = function(timestamp) {
					window.requestAnimationFrame(main)
					
					var listeners = currentListeners = nextListeners
					for (var i = 0; i < listeners.length; i++) {
						listeners[i]()
					}
				}
				if (!started) {
					started = true
					main()	
				}
				return ticker
			}
		// ____________________ subscribe
	 ticker.subscribe = function subscribe (listener) {
			if (typeof listener !== 'function') {
				throw new Error('Expected listener to be a function.')
			}
			var isSubscribed = true
			ensureCanMutateNextListeners()
			nextListeners.push(listener)

			return function unsubscribe() {
				if (!isSubscribed) {
					return
				}

				isSubscribed = false

				ensureCanMutateNextListeners()
				var index = nextListeners.indexOf(listener)
				nextListeners.splice(index, 1)
			}
		}
		return ticker
}		

/*  -------------       		   */
/*    mouseDownControls        */
/*  -------------       		   */
	function mouseDownControl(payload) {
		var currentListeners = []
		var nextListeners = currentListeners

	// ____________________ ensureCanMutateNextListeners
		function ensureCanMutateNextListeners() {
				if (nextListeners === currentListeners) {
					nextListeners = currentListeners.slice()
				}
		}			

		function pauseEvent(e){
						if(e.stopPropagation) e.stopPropagation();
						if(e.preventDefault) e.preventDefault();
						e.cancelBubble=true;
						e.returnValue=false;
						return false;
				}			

		function controlAction(svg) {
				var e = d3.event
				pauseEvent(e)
				
				var listeners = currentListeners = nextListeners
				for (var i = 0; i < listeners.length; i++) {
					listeners[i](svg)
				}									
		}

		// ____________________ controlApi
		function controlApi() {}
		
		// ____________________ start
		controlApi.start = function start(svg) {
					svg.on('mousedown', 	function() {controlAction(this)})
					return controlApi
		}
		// ____________________ subscribe
		controlApi.subscribe = function subscribe (listener) {
			if (typeof listener !== 'function') {
				throw new Error('Expected listener to be a function.')
			}
			var isSubscribed = true
			ensureCanMutateNextListeners()
			nextListeners.push(listener)
			// return controlApi
			return function unsubscribe() {
				if (!isSubscribed) {
					return
				}

				isSubscribed = false

				ensureCanMutateNextListeners()
				var index = nextListeners.indexOf(listener)
				nextListeners.splice(index, 1)
			}
		}
		
		return controlApi
	}

	/*  -------------       		   */
/*    touchStartControls        */
/*  -------------       		   */
	function touchStartControl(payload) {
		var currentListeners = []
		var nextListeners = currentListeners

	// ____________________ ensureCanMutateNextListeners
		function ensureCanMutateNextListeners() {
				if (nextListeners === currentListeners) {
					nextListeners = currentListeners.slice()
				}
		}			

		function pauseEvent(e){
				if(e.stopPropagation) e.stopPropagation();
				if(e.preventDefault) e.preventDefault();
				e.cancelBubble=true;
				e.returnValue=false;
				return false;
		}			

		function controlAction(svg) {
				var e = d3.event
				pauseEvent(e)
				
				var listeners = currentListeners = nextListeners
				for (var i = 0; i < listeners.length; i++) {
					listeners[i](svg)
				}									
		}

		// ____________________ controlApi
		function controlApi() {}
		
		// ____________________ start
		controlApi.start = function start(svg) {
					svg.on('touchstart', 	function() {controlAction(this)})
					return controlApi
		}
		// ____________________ subscribe
	 controlApi.subscribe = function subscribe (listener) {
			if (typeof listener !== 'function') {
				throw new Error('Expected listener to be a function.')
			}
			var isSubscribed = true
			ensureCanMutateNextListeners()
			nextListeners.push(listener)
			// return controlApi
						return function unsubscribe() {
				if (!isSubscribed) {
					return
				}

				isSubscribed = false

				ensureCanMutateNextListeners()
				var index = nextListeners.indexOf(listener)
				nextListeners.splice(index, 1)
			}
		}
		
		return controlApi
	}
		

/*  -------------       		   */
/*    mouseMoveControls        */
/*  -------------       		   */
	function mouseMoveControl(payload) {
		var currentListeners = []
		var nextListeners = currentListeners

	// ____________________ ensureCanMutateNextListeners
		function ensureCanMutateNextListeners() {
				if (nextListeners === currentListeners) {
					nextListeners = currentListeners.slice()
				}
		}			

		function pauseEvent(e){
						if(e.stopPropagation) e.stopPropagation();
						if(e.preventDefault) e.preventDefault();
						e.cancelBubble=true;
						e.returnValue=false;
						return false;
				}			

		function controlAction(svg) {
				var e = d3.event
				pauseEvent(e)
				
				var listeners = currentListeners = nextListeners
				for (var i = 0; i < listeners.length; i++) {
					listeners[i](svg)
				}									
		}

		// ____________________ controlApi
		function controlApi() {}
		
		// ____________________ start
		controlApi.start = function start(svg) {
					svg.on('mousemove', 	function() {controlAction(this)})
					return controlApi
		}
		// ____________________ subscribe
	 controlApi.subscribe = function subscribe (listener) {
			if (typeof listener !== 'function') {
				throw new Error('Expected listener to be a function.')
			}
			var isSubscribed = true
			ensureCanMutateNextListeners()
			nextListeners.push(listener)
			return function unsubscribe() {
				if (!isSubscribed) {
					return
				}

				isSubscribed = false

				ensureCanMutateNextListeners()
				var index = nextListeners.indexOf(listener)
				nextListeners.splice(index, 1)
			}

		}
		
		return controlApi
	}		

/*  -------------       		   */
/*    touchMoveControls        */
/*  -------------       		   */
	function touchMoveControl(payload) {
		var currentListeners = []
		var nextListeners = currentListeners

	// ____________________ ensureCanMutateNextListeners
		function ensureCanMutateNextListeners() {
				if (nextListeners === currentListeners) {
					nextListeners = currentListeners.slice()
				}
		}			

		function pauseEvent(e){
						if(e.stopPropagation) e.stopPropagation();
						if(e.preventDefault) e.preventDefault();
						e.cancelBubble=true;
						e.returnValue=false;
						return false;
				}			

		function controlAction(svg) {
				var e = d3.event
				pauseEvent(e)
				
				var listeners = currentListeners = nextListeners
				for (var i = 0; i < listeners.length; i++) {
					listeners[i](svg)
				}									
		}

		// ____________________ controlApi
		function controlApi() {}
		
		// ____________________ start
		controlApi.start = function start(svg) {
					svg.on('touchmove', 	function() {controlAction(this)})
					return controlApi
		}
		// ____________________ subscribe
	 controlApi.subscribe = function subscribe (listener) {
			if (typeof listener !== 'function') {
				throw new Error('Expected listener to be a function.')
			}
			var isSubscribed = true
			ensureCanMutateNextListeners()
			nextListeners.push(listener)
			return function unsubscribe() {
				if (!isSubscribed) {
					return
				}

				isSubscribed = false

				ensureCanMutateNextListeners()
				var index = nextListeners.indexOf(listener)
				nextListeners.splice(index, 1)
			}

		}
		
		return controlApi
	}		
/*  -------------       		   */
/*    mouseUpControls        */
/*  -------------       		   */
	function mouseUpControl(payload) {
		var currentListeners = []
		var nextListeners = currentListeners

	// ____________________ ensureCanMutateNextListeners
		function ensureCanMutateNextListeners() {
				if (nextListeners === currentListeners) {
					nextListeners = currentListeners.slice()
				}
		}			

		function pauseEvent(e){
						if(e.stopPropagation) e.stopPropagation();
						if(e.preventDefault) e.preventDefault();
						e.cancelBubble=true;
						e.returnValue=false;
						return false;
				}			

		function controlAction(svg) {
				var e = d3.event
				pauseEvent(e)
				
				var listeners = currentListeners = nextListeners
				for (var i = 0; i < listeners.length; i++) {
					listeners[i](svg)
				}									
		}

		// ____________________ controlApi
		function controlApi() {}
		
		// ____________________ start
		controlApi.start = function start(svg) {
					svg.on('mouseup', 	function() {controlAction(this)})
					return controlApi
		}
		// ____________________ subscribe
	 controlApi.subscribe = function subscribe (listener) {
			if (typeof listener !== 'function') {
				throw new Error('Expected listener to be a function.')
			}
			var isSubscribed = true
			ensureCanMutateNextListeners()
			nextListeners.push(listener)
			// return controlApi
						return function unsubscribe() {
				if (!isSubscribed) {
					return
				}

				isSubscribed = false

				ensureCanMutateNextListeners()
				var index = nextListeners.indexOf(listener)
				nextListeners.splice(index, 1)
			}
		}
		
		return controlApi
	}		
/*  -------------       		   */
/*    touchEndControls        */
/*  -------------       		   */
	function touchEndControl(payload) {
		var currentListeners = []
		var nextListeners = currentListeners

	// ____________________ ensureCanMutateNextListeners
		function ensureCanMutateNextListeners() {
				if (nextListeners === currentListeners) {
					nextListeners = currentListeners.slice()
				}
		}			

		function pauseEvent(e){
						if(e.stopPropagation) e.stopPropagation();
						if(e.preventDefault) e.preventDefault();
						e.cancelBubble=true;
						e.returnValue=false;
						return false;
				}			

		function controlAction(svg) {
				var e = d3.event
				pauseEvent(e)
				
				var listeners = currentListeners = nextListeners
				for (var i = 0; i < listeners.length; i++) {
					listeners[i](svg)
				}									
		}
		// ____________________ controlApi
		function controlApi() {}
		
		// ____________________ start
		controlApi.start = function start(svg) {
					svg.on('touchend', 	function() {controlAction(this)})
					return controlApi
		}
		// ____________________ subscribe
	 controlApi.subscribe = function subscribe (listener) {
			if (typeof listener !== 'function') {
				throw new Error('Expected listener to be a function.')
			}
			var isSubscribed = true
			ensureCanMutateNextListeners()
			nextListeners.push(listener)
			return function unsubscribe() {
				if (!isSubscribed) {
					return
				}

				isSubscribed = false

				ensureCanMutateNextListeners()
				var index = nextListeners.indexOf(listener)
				nextListeners.splice(index, 1)
			}

		}
		
		return controlApi
	}		
		
			
/*  -------------       		   */
/*    mouseLeaveControls        */
/*  -------------       		   */
	function mouseLeaveControl(payload) {
		var currentListeners = []
		var nextListeners = currentListeners

	// ____________________ ensureCanMutateNextListeners
		function ensureCanMutateNextListeners() {
				if (nextListeners === currentListeners) {
					nextListeners = currentListeners.slice()
				}
		}			

		function pauseEvent(e){
						if(e.stopPropagation) e.stopPropagation();
						if(e.preventDefault) e.preventDefault();
						e.cancelBubble=true;
						e.returnValue=false;
						return false;
				}			

		function controlAction(svg) {
				var e = d3.event
				pauseEvent(e)
				
				var listeners = currentListeners = nextListeners
				for (var i = 0; i < listeners.length; i++) {
					listeners[i](svg)
				}									
		}

		// ____________________ controlApi
		function controlApi() {}
		
		// ____________________ start
		controlApi.start = function start(svg) {
					svg.on('mouseleave', 	function() {controlAction(this)})
					return controlApi
		}
		// ____________________ subscribe
	 controlApi.subscribe = function subscribe (listener) {
			if (typeof listener !== 'function') {
				throw new Error('Expected listener to be a function.')
			}
			var isSubscribed = true
			ensureCanMutateNextListeners()
			nextListeners.push(listener)
			// return controlApi
						return function unsubscribe() {
				if (!isSubscribed) {
					return
				}

				isSubscribed = false

				ensureCanMutateNextListeners()
				var index = nextListeners.indexOf(listener)
				nextListeners.splice(index, 1)
			}
		}
		
		return controlApi
	}	
		
/*  -------------       		   */
/*    mouseEnterControls        */
/*  -------------       		   */
	function mouseEnterControl(payload) {
		var currentListeners = []
		var nextListeners = currentListeners

	// ____________________ ensureCanMutateNextListeners
		function ensureCanMutateNextListeners() {
				if (nextListeners === currentListeners) {
					nextListeners = currentListeners.slice()
				}
		}			

		function pauseEvent(e){
						if(e.stopPropagation) e.stopPropagation();
						if(e.preventDefault) e.preventDefault();
						e.cancelBubble=true;
						e.returnValue=false;
						return false;
				}			

		function controlAction(svg) {
				var e = d3.event
				pauseEvent(e)
				
				var listeners = currentListeners = nextListeners
				for (var i = 0; i < listeners.length; i++) {
					listeners[i](svg)
				}									
		}

		// ____________________ controlApi
		function controlApi() {}
		
		// ____________________ start
		controlApi.start = function start(svg) {
					svg.on('mouseenter', 	function() {controlAction(this)})
					return controlApi
		}
		// ____________________ subscribe
	 controlApi.subscribe = function subscribe (listener) {
			if (typeof listener !== 'function') {
				throw new Error('Expected listener to be a function.')
			}
			var isSubscribed = true
			ensureCanMutateNextListeners()
			nextListeners.push(listener)
			return function unsubscribe() {
				if (!isSubscribed) {
					return
				}

				isSubscribed = false

				ensureCanMutateNextListeners()
				var index = nextListeners.indexOf(listener)
				nextListeners.splice(index, 1)
			}

		}
		
		return controlApi
	}	
					
					
/*  -------------       		   */
/*    keyDownControl        */
/*  -------------       		   */
	function keyDownControl(payload) {
		var currentListeners = []
		var nextListeners = currentListeners

	// ____________________ ensureCanMutateNextListeners
		function ensureCanMutateNextListeners() {
				if (nextListeners === currentListeners) {
					nextListeners = currentListeners.slice()
				}
		}			

		function pauseEvent(e){
						if(e.stopPropagation) e.stopPropagation();
						if(e.preventDefault) e.preventDefault();
						e.cancelBubble=true;
						e.returnValue=false;
						return false;
		}			

		var controlAction = function controlAction(e) {
			pauseEvent(e)
			var listeners = currentListeners = nextListeners
			for (var i = 0; i < listeners.length; i++) {
				listeners[i](e)
			}									
		}

		// ____________________ controlApi
		function controlApi() {}
		
		// ____________________ start
		controlApi.start = function start() {
			document.addEventListener("keydown", controlAction, false)
						return controlApi
		}
		// ____________________ subscribe
		controlApi.subscribe = function subscribe (listener) {
			if (typeof listener !== 'function') {
				throw new Error('Expected listener to be a function.')
			}
			var isSubscribed = true
			ensureCanMutateNextListeners()
			nextListeners.push(listener)
			// return controlApi
						return function unsubscribe() {
				if (!isSubscribed) {
					return
				}

				isSubscribed = false

				ensureCanMutateNextListeners()
				var index = nextListeners.indexOf(listener)
				nextListeners.splice(index, 1)
			}

		}
		
		return controlApi
	}	

/*  -------------       		   */
/*    keyReleaseControl        */
/*  -------------       		   */
	function keyReleaseControl(payload) {
		var currentListeners = []
		var nextListeners = currentListeners

	// ____________________ ensureCanMutateNextListeners
		function ensureCanMutateNextListeners() {
				if (nextListeners === currentListeners) {
					nextListeners = currentListeners.slice()
				}
		}			

		function pauseEvent(e){
				if(e.stopPropagation) e.stopPropagation();
				if(e.preventDefault) e.preventDefault();
				e.cancelBubble=true;
				e.returnValue=false;
				return false;
		}			

		var controlAction = function controlAction(e) {
			pauseEvent(e);
			var listeners = currentListeners = nextListeners
			for (var i = 0; i < listeners.length; i++) {
				listeners[i](e)
			}									
		}

		// ____________________ controlApi
		function controlApi() {}
		
		// ____________________ start
		controlApi.start = function start() {
			document.addEventListener("keyup", controlAction, false)
						return controlApi
		}
		// ____________________ subscribe
		controlApi.subscribe = function subscribe (listener) {
			if (typeof listener !== 'function') {
				throw new Error('Expected listener to be a function.')
			}
			var isSubscribed = true
			ensureCanMutateNextListeners()
			nextListeners.push(listener)
				return function unsubscribe() {
				if (!isSubscribed) {
					return
				}

				isSubscribed = false

				ensureCanMutateNextListeners()
				var index = nextListeners.indexOf(listener)
				nextListeners.splice(index, 1)
			}

		}
		
		return controlApi
	}						
					
/*  -------------       		   */
/*    keyPressControl        */
/*  -------------       		   */
	function keyPressControl(payload) {
		var currentListeners = []
		var nextListeners = currentListeners

	// ____________________ ensureCanMutateNextListeners
		function ensureCanMutateNextListeners() {
				if (nextListeners === currentListeners) {
					nextListeners = currentListeners.slice()
				}
		}			

		function pauseEvent(e){
				if(e.stopPropagation) e.stopPropagation();
				if(e.preventDefault) e.preventDefault();
				e.cancelBubble=true;
				e.returnValue=false;
				return false;
		}			

		var controlAction = function controlAction(e) {
			pauseEvent(e);				
			var listeners = currentListeners = nextListeners
			for (var i = 0; i < listeners.length; i++) {
				listeners[i]()
			}									
		}

		// ____________________ controlApi
		function controlApi() {}
		
		// ____________________ start
		controlApi.start = function start() {
			document.addEventListener("keypress", controlAction, false)
						return controlApi
		}
		// ____________________ subscribe
		controlApi.subscribe = function subscribe (listener) {
			if (typeof listener !== 'function') {
				throw new Error('Expected listener to be a function.')
			}
			var isSubscribed = true
			ensureCanMutateNextListeners()
			nextListeners.push(listener)
			return function unsubscribe() {
				if (!isSubscribed) {
					return
				}

				isSubscribed = false

				ensureCanMutateNextListeners()
				var index = nextListeners.indexOf(listener)
				nextListeners.splice(index, 1)
			}
		}
		
		return controlApi
	}	

exports.keyDownControl = keyDownControl
exports.keyReleaseControl = keyReleaseControl

exports.mouseDownControl = mouseDownControl
exports.touchStartControl = touchStartControl
exports.mouseMoveControl = mouseMoveControl
exports.touchMoveControl = touchMoveControl
exports.mouseUpControl = mouseUpControl
exports.touchEndControl = touchEndControl
exports.mouseLeaveControl = mouseLeaveControl
exports.mouseEnterControl = mouseEnterControl

exports.stepControls = stepControls
exports.tickControls = tickControls
exports.timeControls = timeControls

}));		

/* 																	*/
/* d3rings-actions-court.js   			*/
/* 																	*/

(function (global, factory) {
  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
  typeof define === 'function' && define.amd ? define(['exports'], factory) :
  (factory((global.d3ringsActionsCourt = global.d3ringsActionsCourt || {})));
}(this, function (exports) { 'use strict';

// ____________________ keyMirror
// https://github.com/STRML/keyMirror
var keyMirror = function(obj, prefix) {
  var ret = {};
  var key;
  if (!(obj instanceof Object && !Array.isArray(obj))) {
    throw new Error('keyMirror(...): Argument must be an object.');
  }
  for (key in obj) {
    if (obj.hasOwnProperty(key)) {
      ret[key] = prefix + key;
    }
  }
  return ret;
};

// ____________________ action TYPES
var cttsCourt = {
	FETCH_RECORDS: '',
	KEYB_DISPATCH: '',
	PROCESS_KEYB_KEYS: '',
	RELEASE_KEYBKEY: '',
	RESET_KEYS_EVENTS: '',
	RESIZE_HEIGHT: '',
	RESIZE_WIDTH: '',
	SET_KEYBKEY: '',
	SET_MODE: '',
	SET_NOTICE: '',
	SET_VIEW: '',
	START_KEYS_EVENTS: '',
	START_KEYBKEY_EVENTS: '',
	UPDATE_MOUSE_POS: '',
}

var ActionTypes = keyMirror(cttsCourt, '')

// ____________________ actions COURT
var ActionCreators = {

	resizeHeight(payload) {
    return {
        type: ActionTypes.RESIZE_HEIGHT,
        payload: payload
		}
  },
	resizeWidth(payload) {
    return {
        type: ActionTypes.RESIZE_WIDTH,
        payload: payload
		}
  },
	releaseKeybKey(e) {
    return {
        type: ActionTypes.RELEASE_KEYBKEY,
        keyCode: e.keyCode,
		}
  },
	setKeybKey(e) {
    return {
        type: ActionTypes.SET_KEYBKEY,
        keyCode: e.keyCode,
		}
  },
	processKeybKeys(payload) {
    return {
        type: ActionTypes.PROCESS_KEYB_KEYS,	// processKeybKeys
        payload: payload,
		}
  },
	setMode(payload) {
    return {
        type: ActionTypes.SET_MODE,	// setMode
        payload: payload,
		}
  },
	setNotice(notice) {
    return {
        type: ActionTypes.SET_NOTICE,
        notice: notice,
		}
  },
	setView(payload) {
    return {
        type: ActionTypes.SET_VIEW,
        payload: payload,
		}
  },
	startKeybKeyEvents() {
    return {
        type: ActionTypes.START_KEYBKEY_EVENTS	// startKeybKeyEvents
    }
	},
	updateMousePos(svg) {
    return {
        type: ActionTypes.UPDATE_MOUSE_POS,
        svg: svg,
    }
	},
}

exports.ActionTypes = ActionTypes;
exports.ActionCreators = ActionCreators;
}));

/* 																*/
/*    d3rings-reducer-court.js    */
/* 																*/

	if (typeof require === "function") {
		var d3 = require('./d3.v4.0.0-rc.2.js')
		var d3ringsActions = require('./d3rings-actions-court.js')
	}
	
	(function (global, factory) {
  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
  typeof define === 'function' && define.amd ? define(['exports'], factory) :
  (factory((global.d3ringsReducerCourt = global.d3ringsReducerCourt || {})));
}(this, function (exports) { 'use strict';

// http://stackoverflow.com/questions/31381129/assign-new-id-attribute-to-each-element-created
function guid() {
    function _p8(s) {
        var p = (Math.random().toString(16)+"000000000").substr(2,8);
        return s ? "-" + p.substr(0,4) + "-" + p.substr(4,4) : p ;
    }
    return _p8() + _p8(true) + _p8(true) + _p8();
}

// _____________ COURT
var initialStateCourt = {
			leftBorder: 0,		// 
			svgHeight: 400,		// 
			svgWidth: 600,		// 
			keys: [],
			keysEvents: {},
			notice: 'auto lanes',
			currentMode: 'autoMode',
			currentView: 'chordsView',
			arrowKeysStarted: false,
			keybKeyEventsStarted: false,
			tickerStarted: false,
			lastTick: 0,
			mousePos: [200, 300],
}

function reducerCourt(state = initialStateCourt, action) {
	if (action == null) return state
	var ActionTypes = d3ringsActions.ActionTypes
    switch (action.type) {
        case ActionTypes.START_KEYBKEY_EVENTS:	// startKeybKeyEvents
						// console.log('START_KEYBKEY_EVENTS')
            return Object.assign({}, state, {
                keybKeyEventsStarted: true
            })
				case ActionTypes.SET_KEYBKEY:				// setKeybkey
						// console.log('SET_KEYBKEY')
						var ks = state.keys
						ks[action.keyCode] = true
            return Object.assign({}, state, {
                keys: ks
            })
        case ActionTypes.RELEASE_KEYBKEY:	// releaseKeybkey
						// console.log('RELEASE_KEYBKEY')
 						var ks = state.keys
						ks[action.keyCode] = false
            return Object.assign({}, state, {
                keys: ks
            })
        case ActionTypes.PROCESS_KEYB_KEYS:		// processKeybKeys
 					// console.log('PROCESS_KEYB_KEYS state keys', state.keys)
						var keyEvents = Object.assign({}, state.keyEvents)
						var altKeyCode = 18, ctrlKeyCode = 17 
						var vKeyCode = 86, dKeyCode = 68, fKeyCode = 70
						var leftArrow = 37, rightArrow = 39, leftArrow = 37, upArrow = 38, downArrow = 40
						var keys = state.keys
						
							if (keys[ctrlKeyCode] !== true && keys[altKeyCode] == true && keys[vKeyCode] == true) {		// alt-v
								keyEvents.altvKey =  guid()
							}
							if (keys[ctrlKeyCode] !== true && keys[altKeyCode] !== true && keys[vKeyCode] == true) {		// v
								keyEvents.vKey =  guid()
							}
							if (keys[leftArrow] == true) {		// leftArrow
								keyEvents.leftArrow =  guid()
							}
							if (keys[rightArrow] == true) {		// rightArrow
								keyEvents.rightArrow =  guid()
							}
							if (keys[upArrow] == true) {		// upArrow
								keyEvents.upArrow =  guid()
							}
							if (keys[downArrow] == true) {		// downArrow
								keyEvents.downArrow =  guid()
							}
						
	          return Object.assign({}, state, {
								keyEvents: keyEvents
						})
					
       case ActionTypes.SET_MODE:
  					// console.log('SET_MODE')
						var altKeyCode = 18, ctrlKeyCode = 17 
						var vKeyCode = 86, dKeyCode = 68, fKeyCode = 70
						var leftArrow = 37, rightArrow = 39, leftArrow = 37, upArrow = 38, downArrow = 40
						var keys = action.payload.keys
							
						var currentMode = state.currentMode	
						var newMode = currentMode
							
						if (keys[leftArrow] == true) {										// leftArrow
								newMode = 'walkMode'
								}
							if (keys[rightArrow] == true) {										// rightArrow
								newMode = 'autoMode'
							}
							if (keys[upArrow] == true) {												// upArrow
								if (currentMode == 'autoMode') {
										newMode = 'walkMode'
								} 
							}
							if (keys[downArrow] == true) {											// downArrow
								if (currentMode == 'autoMode') {
										newMode = 'walkMode'
								}
							}
           return Object.assign({}, state, {
                currentMode: newMode
            })
						
       case ActionTypes.SET_VIEW:		// setView	// views currentView
 						var altKeyCode = 18, ctrlKeyCode = 17 
						var vKeyCode = 86, dKeyCode = 68, fKeyCode = 70
						var leftArrow = 37, rightArrow = 39, leftArrow = 37, upArrow = 38, downArrow = 40
						var keys = action.payload.keys
						
						var views = action.payload.views
						var currentView = action.payload.currentView
						var currentViewIndex = views.indexOf(currentView)
						var newViewIndex = currentView

						if (keys[vKeyCode] == true && keys[altKeyCode] == true) {		// alt-v
							 newViewIndex = views[Math.abs(currentViewIndex + 1) % views.length]
						}	
						
						return Object.assign({}, state, {
                currentView: newViewIndex,
            });
        case ActionTypes.SET_NOTICE:
  						// console.log('SET_NOTICE')
           return Object.assign({}, state, {
                notice: action.notice,
            });
        case ActionTypes.START_TICKER:
  						// console.log('START_TICKER')
            return Object.assign({}, state, {
                tickerStarted: true
            });
       case ActionTypes.STOP_TICKER:
  						// console.log('STOP_TICKER')
            return Object.assign({}, state, {
                tickerStarted: false
            });
        case ActionTypes.UPDATE_MOUSE_POS:
							var coords  = d3.mouse(action.svg)
							var x = coords[0]
							var y = coords[1]

            return Object.assign({}, state, {
                mousePos: [x, y]
            });
        case ActionTypes.RESIZE_WIDTH:
 						// console.log('RESIZE_WIDTH')
						var svgWidth = state.svgWidth
						var delta = 10

 						var altKeyCode = 18, ctrlKeyCode = 17 
						var vKeyCode = 86, dKeyCode = 68, fKeyCode = 70
						var leftArrow = 37, rightArrow = 39, leftArrow = 37, upArrow = 38, downArrow = 40
						var keys = action.payload.keys
						
						var newSvgWidth = svgWidth

						if (keys[rightArrow] == true && keys[ctrlKeyCode] == true) {		// rightArrow-Ctrl
							 newSvgWidth = svgWidth + delta
						}	
						if (keys[leftArrow] == true && keys[ctrlKeyCode] == true) {		// lefftArrow-Ctrl
							 newSvgWidth = svgWidth - delta
						}	

            return Object.assign({}, state, {
                svgWidth: newSvgWidth
            })
						
        case ActionTypes.RESIZE_HEIGHT:
   					// console.log('RESIZE_HEIGHT')
						var svgHeight = state.svgHeight
						var delta = 10

 						var altKeyCode = 18, ctrlKeyCode = 17 
						var vKeyCode = 86, dKeyCode = 68, fKeyCode = 70
						var leftArrow = 37, rightArrow = 39, leftArrow = 37, upArrow = 38, downArrow = 40
						var keys = action.payload.keys
						
						var newSvgHeight = svgHeight
						if (keys[upArrow] == true && keys[ctrlKeyCode] == true) {		// upArrow-Ctrl
							 newSvgHeight = svgHeight + delta
						}	
					if (keys[downArrow] == true && keys[ctrlKeyCode] == true) {		// downArrow-Ctrl
							 newSvgHeight = svgHeight - delta
						}	

            return Object.assign({}, state, {
                svgHeight: newSvgHeight
            })

						default:
							return state;
	}
}	

exports.reducerCourt = reducerCourt;
}));

/* 																	*/
/* d3rings-renderer-court.js   			*/
/* 																	*/

if (typeof require === "function") {
		var d3 = require('./d3.v4.0.0-rc.2.js')
	}
	
(function (global, factory) {
  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
  typeof define === 'function' && define.amd ? define(['exports'], factory) :
  (factory((global.d3ringsRendererCourt = global.d3ringsRendererCourt || {})));
}(this, function (exports) { 'use strict';

	function renderer(payload) {

		var store = payload.store
		var actions = payload.actions
		var newState = store.getState()
		
		var state
		doRender(newState)

		function doRender(newState) {
			if (state === newState) return 
				state = newState
					
			var svgContainer = d3.select(state.reducerConfig.containerElem)
			.selectAll('svg')
				.data(['svg'])
			
			var svgContainerNew = svgContainer.enter()
				.append("svg")
					.attr("id", state.reducerConfig.containerId)
					.style('width', state.reducerCourt.svgWidth)
					.style('height', state.reducerCourt.svgHeight)
					.attr('class', 'bar-chart')			// 
					.style('border', '1px solid red')
					.style('color', 'blue')	
					.attr('viewbox',"0 0 3 2")										


			var svg = d3.select('svg')

			var itemsGroup = d3.select('svg')
				.selectAll('g.notices')		// items
				.data(['items'])
					
			itemsGroup.enter()	
				.append("g")
					.classed("notices", true)	// items
			// _________________________________ render Notice Update
				var errorNotice = (state.reducerCourt.notice) ? state.reducerCourt.notice : ""
				var noticeToShow = ""
				var currentView = state.reducerCourt.currentView
				var labelMode = state.reducerConfig.modeLabels[state.reducerConfig.modes[state.reducerCourt.currentMode]]
				var size = parseInt(svg.style("width")) + " x " + parseInt(svg.style("height"))
				var rangsNow = state.reducerWhirls.rangsNow
				var particlesNow = state.reducerParticles.particleIndex
				var ringsNow = state.reducerWhirls.ringsIndex
				var startRangs = state.reducerWhirls.startRangs
				var rangsAlways = state.reducerWhirls.rangsAlways
				var ringsHits = state.reducerWhirls.ringsHits
				var rangsHitsIndex = state.reducerWhirls.rangsHitsIndex
				var framesPerSecond = state.reducerDebug.fps
				var framesPerSecondMax = state.reducerDebug.fpsMax
				var framesLostPct = (framesPerSecondMax == 0) ? 0 : Math.round(100 * (framesPerSecondMax - framesPerSecond) / framesPerSecondMax)
				var hitsLostPct = Math.round(100 * (rangsAlways - rangsHitsIndex) / rangsAlways) || 0
				
				if (currentView == 'lanesView') {
					var cmdsLanes = "down-arrow, right-arrow, alt-v"
					noticeToShow = noticeToShow +
						cmdsLanes + " - " + currentView +
						" - n: " + particlesNow +
						" - fps: " + framesPerSecond
				}
				if (currentView == 'ringsView') {
					noticeToShow = noticeToShow +
						((startRangs) ? '' : ' MOUSE PLEASE !!! ') +
						' you already missed ' + hitsLostPct + ' % of your ' + rangsAlways + ' rings' + 
						' and ' + framesLostPct + ' % of your  frames ' +
						'!!! ' +
						'  (' + 'try alt-v' + ')'
				}
				
				if (currentView == 'chordsView') {
					noticeToShow = noticeToShow +
						currentView  + "  " + labelMode+ 
						" - the key is in the arrow key"
				}

				var winWidthPixels = parseInt(svg.style("width"))
				var winHeightPixels = parseInt(svg.style("height"))
				
				var fontSizeHw = 2 + "hw"
				var fontSize = winWidthPixels * 2/100
				var fontname = 'sans-serif'
						
				var c=document.createElement('canvas');
				var ctx=c.getContext('2d');
				ctx.font = fontSize + 'px ' + fontname;

				var noticeLength = ctx.measureText(noticeToShow).width
				
				var vlocation = winHeightPixels - fontSize
				var hlocation = winWidthPixels	- noticeLength

			 // items elems
				var itemsElems = svgContainer
					.select("g.notices")
						.selectAll("g.notice")
						.data([noticeToShow]);							
									
				// items elems enter
				var itemsElemsNew = itemsElems.enter()
						.append("g")
							.classed("notice", true)	
					
					itemsElemsNew.each(function(d, i) {
							var itemElemNew = d3.select(this)	
								.append("text")					
									.classed("info", true)
									.style("font-family", fontname)
									.attr("x", function(d) { 
											return hlocation; })
									.attr("y", function(d) { 							
											return vlocation
									})
									.style("font-size", function(d, i) {
											return fontSize
										})
									.text(function(d) { return d })
									.style("fill-opacity", 1)
							})
						
			// items elems update
					itemsElems
						.select('text')
							.text(function(d) { return d })
							.attr("x", function(d) { 
											return hlocation; })
							.attr("y", function(d) { 
											return vlocation; })

			// items elems exit
					itemsElems.exit()
						.select('text')
							.remove()					

		} // render
	}
	
	exports.renderer = renderer;
}));


/* 																	*/
/* d3rings-actions-debug.js					*/
/* 																	*/

(function (global, factory) {
  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
  typeof define === 'function' && define.amd ? define(['exports'], factory) :
  (factory((global.d3ringsActionsDebug = global.d3ringsActionsDebug || {})));
}(this, function (exports) { 'use strict';

// ____________________ keyMirror
// https://github.com/STRML/keyMirror
var keyMirror = function(obj, prefix) {
  var ret = {};
  var key;
  if (!(obj instanceof Object && !Array.isArray(obj))) {
    throw new Error('keyMirror(...): Argument must be an object.');
  }
  for (key in obj) {
    if (obj.hasOwnProperty(key)) {
      ret[key] = prefix + key;
    }
  }
  return ret;
}

// ____________________ action TYPES
var cttsDebug = {
	SET_DEBUGMODE: '',
	SET_FPS: '',
	SWITCH_DEBUGMODE: '',
}


var ActionTypes = keyMirror(cttsDebug, '')

// ____________________ actions DEBUG
var ActionCreators = {
	setDebugMode(debugMode) {
    return {
        type: ActionTypes.SET_DEBUG_MODE,
        debugMode: debugMode,
		}
  },
	setFps(fps) {
    return {
        type: ActionTypes.SET_FPS,
        fps: fps,
		}
  },
	switchDebugMode(payload) {
    return {
        type: ActionTypes.SWITCH_DEBUGMODE,
        payload: payload,
    };
	},
}

exports.ActionTypes = ActionTypes
exports.ActionCreators = ActionCreators
}));

/* 																*/
/*    d3rings-reducer-debug.js    */
/* 																*/

	if (typeof require === "function") {
		var d3 = require('./d3.v4.0.0-rc.2.js')
		var d3ringsActions = require('./d3rings-actions-debug.js')
	}
	
	(function (global, factory) {
  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
  typeof define === 'function' && define.amd ? define(['exports'], factory) :
  (factory((global.d3ringsReducerDebug = global.d3ringsReducerDebug || {})));
}(this, function (exports) { 'use strict';


// _____________ DEBUG
var initialStateDebug = {
				debugMode: true,
				debugTickerStarted: false,
				rfps: 60,
				fps: 0,
				fpsMax: 0,
				timeStamp: 0,
				timeLastFrame: 0,
				tickLastFrame: 0,
}
function reducerDebug(state = initialStateDebug, action) {
	if (action == null) return state

	var ActionTypes = d3ringsActions.ActionTypes
    switch (action.type) {
				case ActionTypes.SET_FPS:			
						return setFps(state, action)
						
				case ActionTypes.SWITCH_DEBUGMODE:
						return switchDebugMode(state, action)
						
				default:
					return state;
	}
}
function setFps(state, action) {
			// tbc
			var timeLastFrame0 = state.timeLastFrame 
			var tickLastFrame0 = state.tickLastFrame
			var timeLastFrame = performance.now()
			var tickLastFrame = tickLastFrame0 + 1
			var timeDelta = timeLastFrame - timeLastFrame0
			
			var fps0 = state.fps
			var fpsMax = state.fpsMax
			
			var fps = (timeLastFrame != 0) ? parseFloat(Math.round(1000 / timeDelta)).toFixed(0) : 0
			var fpsMax = Math.max(fpsMax, fps)
			
		  return Object.assign({}, state, {
						fps: fps,
						fpsMax: fpsMax,
             debugTickerStarted: true,
             timeLastFrame: timeLastFrame,
             tickLastFrame: tickLastFrame
		})
}
function switchDebugMode(state, action) {
			var altKeyCode = 18, ctrlKeyCode = 17 
			var vKeyCode = 86, dKeyCode = 68, fKeyCode = 70
			var leftArrow = 37, rightArrow = 39, leftArrow = 37, upArrow = 38, downArrow = 40

			var keys = action.payload.keys
			var debugMode = state.debugMode
			var newdebugMode = debugMode

			if (keys[dKeyCode] == true && keys[altKeyCode] == true) {		// alt-d
				 newdebugMode = !state.debugMode
			}	
		 return Object.assign({}, state, {
             debugMode: newdebugMode
		})
}



exports.reducerDebug = reducerDebug;
}));

/* 																	*/
/* d3rings-actions-lanes.js   			*/
/* 																	*/

(function (global, factory) {
  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
  typeof define === 'function' && define.amd ? define(['exports'], factory) :
  (factory((global.d3ringsActionsLanes = global.d3ringsActionsLanes || {})));
}(this, function (exports) { 'use strict';

// ____________________ keyMirror
// https://github.com/STRML/keyMirror
var keyMirror = function(obj, prefix) {
  var ret = {};
  var key;
  if (!(obj instanceof Object && !Array.isArray(obj))) {
    throw new Error('keyMirror(...): Argument must be an object.');
  }
  for (key in obj) {
    if (obj.hasOwnProperty(key)) {
      ret[key] = prefix + key;
    }
  }
  return ret;
}


var cttsLanes = {
	DELETE_LANE: '',
	SET_LANE: '',
	SET_LANES: '',
	SET_MESSAGES: '',
	SET_RECORDS: '',
	SET_RECORDS_COLLECTION: '',
	SET_RECORDS_FETCHED: '',
	UPDATE_MESSAGES: '',
	WALK_DOWN_RECORDS: '',
	WALK_UP_RECORDS: '',
}

var ActionTypes = keyMirror(cttsLanes, '')

// ____________________ actions LANES
var ActionCreators = {
	decreaseCursorLow() {
    return {
        type: ActionTypes.DECREASE_CURSOR_LOW,
		}
  },
	decreaseCursorHigh() {
    return {
        type: ActionTypes.DECREASE_CURSOR_HIGH,
		}
  },
	deleteLane(lane) {
    return {
        type: ActionTypes.DELETE_LANE,
        lane: lane,
		}
  },
	setRecordsFetched(areRecordsFetched) {
    return {
        type: ActionTypes.SET_RECORDS_FETCHED,
        areRecordsFetched: areRecordsFetched,
    }
  },
	setRecords(argObj) {	// SET_RECORDS
    return {
        type: ActionTypes.SET_RECORDS,
        itemSpan: argObj.itemSpan,
        mode: argObj.currentMode,
    }
  },
	setRecordsCollection(obj) {	// SET_RECORDS_COLLECTION
    return {
        type: ActionTypes.SET_RECORDS_COLLECTION,
        recordsCollection: obj.recordsCollection
    }
  },
	setLane(lane) {
    return {
        type: ActionTypes.SET_LANE,
        lane: lane,
		}
  },
	setLanes(lanes) {
    return {
        type: ActionTypes.SET_LANES,
        lanes: lanes,
		}
  },
	setMessages(messages) {
    return {
        type: ActionTypes.SET_MESSAGES,
        messages: messages,
		}
  },
	updateMessages(messages) {
    return {
       type: ActionTypes.UPDATE_MESSAGES,
       cursorLow: cursorLow,
       cursorHigh: cursorHigh,
		}
  },
	walkDownRecords(payload) {	// WALK_DOWN_RECORDS
    return {
        type: ActionTypes.WALK_DOWN_RECORDS,
        payload: payload,
    }
  },
	walkUpRecords(payload) {	// WALK_UP_RECORDS
    return {
        type: ActionTypes.WALK_UP_RECORDS,
        payload: payload,
    }
  },
}

exports.ActionTypes = ActionTypes
exports.ActionCreators = ActionCreators
}));

/* 													  			*/
/*    d3rings-reducer-lanes.js      */
/* 																	*/

	if (typeof require === "function") {
		var d3 = require('./d3.v4.0.0-rc.2.js')
		var d3ringsActions = require('./d3rings-actions-lanes.js')
	}
	
	(function (global, factory) {
  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
  typeof define === 'function' && define.amd ? define(['exports'], factory) :
  (factory((global.d3ringsReducerLanes = global.d3ringsReducerLanes || {})));
}(this, function (exports) { 'use strict';


// _____________ LANES
var initialStateLanes = {
			lanes: [],
			lanesIndex: 0,
			messages: [],
			records: [],
			keyEventsOnLanes: {},
			recordsCollection: [],
			areRecordsFetched: false,
			messagesCursorLow: 0,
			messagesCursorHigh: 0,
	}
	
function reducerLanes(state = initialStateLanes, action) {
	if (action == null) return state
	var ActionTypes = d3ringsActions.ActionTypes
    switch (action.type) {
				case ActionTypes.DELETE_LANE:		// deleteLane
					var lanes = state.lanes
					var ls = lanes.filter(function( obj ) {
							return obj.id !== action.lane.id;
						})
					var r = Object.assign({}, state,
						{lanes: ls},
						{lanesIndex: ls.length}
						)
					return r

				case ActionTypes.SET_LANE:		// setLane
					var lanes = state.lanes
					var ls = {}
					var result = lanes.filter(function( obj ) {
							return obj.id == action.lane.id;
						});
							
					if (result.length === 0) {			// add
						ls = {lanes: [
							{
									id: action.lane.id,
									name: action.lane.name,
									x: action.lane.x
							}, 
							...lanes
						]}
					} else {												// edit
							ls = {lanes: lanes.map(lane =>
								lane.id === action.lane.id ?
									Object.assign({}, lane, { id: action.lane.id, name: action.lane.name, x: action.lane.x }) :
									lane
							)}
					}
					
					 var r = Object.assign({}, state,
						ls,
						{
							lanesIndex: ls.lanes.length
						})
						return r
						
        case ActionTypes.SET_LANES:		// setLanes
 						// console.log('SET_LANES')
            return Object.assign({}, state, {
                lanes: action.lanes,
                lanesIndex: Object.keys(action.lanes).length
            })
				case ActionTypes.FETCH_RECORDS:	// fetchRecords
						// console.log('FETCH_RECORDS')
						var processRecord = function processRecord(d) {
							d.amount = +d.amount;
							d.risk = +d.risk;
							d.valueOf = function value() {
								return this.amount;
							}	
							return d;
						}

						var processData = function processData(error, dataCsv) {
							if (store.getState().court.currentMode == 0) {	// _tbd_  
									++timeTick
									++vLast
									store.dispatch(actions.setMessages(store.getState().reducerConfig.recordsCollection.slice(0,
										store.getState().reducerConfig.recordsCollection.length)))
							}
						}
						d3.queue()
							.defer(d3.csv, action.src, processRecord)
							.await(processData)					
						
            return Object.assign({}, state);

        case ActionTypes.SET_MESSAGES:			
 						// console.log('SET_MESSAGES')
           return Object.assign({}, state, {
										messages: action.messages,
            })
						
				case ActionTypes.SET_RECORDS_FETCHED:
						// console.log('SET_RECORDS_FETCHED')
           return Object.assign({}, state, {
                areRecordsFetched: action.areRecordsFetched
            })
						
				case ActionTypes.SET_RECORDS_COLLECTION:	// setRecordsCollection
						var r = state
						if (state.areRecordsFetched == false) {
							// console.log('SET_RECORDS_COLLECTION')
							var r = Object.assign({}, state, {
									recordsCollection: action.recordsCollection,
									areRecordsFetched: true,
							})
						}
						return r
						
				case ActionTypes.SET_RECORDS:
						// console.log('SET_RECORDS')
						var vLow = state.messagesCursorLow
						var vHigh = state.messagesCursorHigh
						var itemSpan = action.itemSpan
						var mode = action.mode
						var r = state
						if (mode == 'autoMode') {
							var records = state.recordsCollection
							var numRecords = records.length
							if (vHigh >= vLow) vHigh = vHigh + 1	// add one to upper border
							if (vHigh > numRecords) vHigh = -1		// upper border
							if (((vHigh - vLow) > itemSpan) 			// all spteps full
									|| (vHigh == -1) 									// infinitum with vLow active
									|| (vLow == -1) 									// get always from reset
									) vLow = vLow + 1									// increase lower border
							if (vLow > numRecords) vLow = -1			// reset at end of cycle
							r = Object.assign({}, state, {
								records: state.recordsCollection.slice(vLow, vHigh),
								messagesCursorLow: vLow,
								messagesCursorHigh: vHigh,
							})
						}
						return r

				case ActionTypes.WALK_UP_RECORDS:			// walkUpRecords
						var keyEventsOnLanes = state.keyEventsOnLanes
						var altKeyCode = 18, ctrlKeyCode = 17 
						var vKeyCode = 86, dKeyCode = 68, fKeyCode = 70
						var leftArrow = 37, rightArrow = 39, leftArrow = 37, upArrow = 38, downArrow = 40
						var keys = action.payload.keys
						
						var vLow = state.messagesCursorLow
						var vHigh = state.messagesCursorHigh
						var itemSpan = action.payload.itemSpan
						var currentMode = action.payload.mode
						var r = state
						if (currentMode == 'walkMode') {
							if (keyEventsOnLanes.upArrow !== null && keyEventsOnLanes.upArrow !== action.payload.keyEvents.upArrow) {			// upArrow
										keyEventsOnLanes.upArrow = action.payload.keyEvents.upArrow
										vLow = Math.max(0, --vLow)
										r = Object.assign({}, state, keyEventsOnLanes) 
										r = Object.assign({}, state, {
											records: state.recordsCollection.slice(vLow, vHigh),
											messagesCursorLow: vLow,
											messagesCursorHigh: vHigh,
									})
								}
						}
						return r
						
				case ActionTypes.WALK_DOWN_RECORDS:			// walkDownRecords
						var keyEventsOnLanes = state.keyEventsOnLanes
						var altKeyCode = 18, ctrlKeyCode = 17 
						var vKeyCode = 86, dKeyCode = 68, fKeyCode = 70
						var leftArrow = 37, rightArrow = 39, leftArrow = 37, upArrow = 38, downArrow = 40
						var keys = action.payload.keys
						
						var vLow = state.messagesCursorLow
						var vHigh = state.messagesCursorHigh
						var itemSpan = action.payload.itemSpan
						var currentMode = action.payload.currentMode
						var r = Object.assign({}, state)
						if (currentMode == 'walkMode') {
							if (keyEventsOnLanes.downArrow !== null && keyEventsOnLanes.downArrow !== action.payload.keyEvents.downArrow) {			// downArrow
								keyEventsOnLanes.downArrow = action.payload.keyEvents.downArrow
								r = Object.assign({}, state, keyEventsOnLanes) 
								if ((vHigh - vLow)  >= itemSpan) ++vLow
								++vHigh
									r = Object.assign({}, state, {
										records: state.recordsCollection.slice(vLow, vHigh),
										messagesCursorLow: vLow,
										messagesCursorHigh: vHigh,
								})
							}
						}
						return r
						
        default:
            return state
    }
}

exports.reducerLanes = reducerLanes;
}));

/* 																	*/
/* d3rings-renderer-lanes.js   			*/
/* 																	*/

if (typeof require === "function") {
		var d3 = require('./d3.v4.0.0-rc.2.js')
	}
(function (global, factory) {
  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
  typeof define === 'function' && define.amd ? define(['exports'], factory) :
  (factory((global.d3ringsRendererLanes = global.d3ringsRendererLanes || {})));
}(this, function (exports) { 'use strict';

// _____________ coordsUtils
	function coordsUtils () {
		function index_hcoord_pct(arr, index) {
				return (index+1) * (100/(arr.length+1));
			}
		function index_hcoord_pct_with_symbol(arr, index) {
			return index_hcoord_pct(arr, index) + "%";
		}
		
		function horizontal_center(x1, x2) {
			if (x1 > x2) return (x2 - x1)/2 + x1
			else return (x1 - x2)/2 + x2
		}
		function horizontal_percent_to_coord(svg, percent) {
			// https://bugzilla.mozilla.org/show_bug.cgi?id=874811 // _e_
			if(navigator.userAgent.toLowerCase().indexOf('firefox') > -1) {
				var xScrollWidth = svg[0].parentNode.scrollWidth;
			} else {
				var xScrollWidth = svg.property("scrollWidth");
			}
			return xScrollWidth * Number.parseFloat(percent)/100;
		}
		function horizontal_coord_to_percent(svg, length) {
				var xScrollWidth = svg.property("scrollWidth");
				return Number.parseFloat(length) / xScrollWidth;
		}

		var publicAPI = {
				hcoord_tagged_pct: function hcoord_tagged_pct(arr, val) {
					return index_hcoord_pct_with_symbol(arr, arr.indexOf(val));
				},
				hcoord_pct:	function hcoord_pct(arr, val) {
					return index_hcoord_pct(arr, arr.indexOf(val));
				},		
				hcenter_tagged_pct:	function hcenter_tagged_pct(x1, x2) {
					return horizontal_center(x1, x2) + "%";
				}
		}
		return publicAPI
	}

// _____________ arrayUtils
	function arrayUtils () {
		function flattenArrByObjProp(a, p) {
			return a.reduce(function(prevArr, currVal, i, a) {
				if (prevArr.indexOf(currVal[p]) < 0)
						var r = prevArr.push(currVal[p])
						return prevArr
			}, []);
		}
		
		function union_arrays (x, y) {
			var obj = {};
			for (var i = x.length-1; i >= 0; -- i)
				 obj[x[i]] = x[i];
			for (var i = y.length-1; i >= 0; -- i)
				 obj[y[i]] = y[i];
			var res = []
			for (var k in obj) {
				if (obj.hasOwnProperty(k))
					res.push(obj[k]);
			}
			return res;
		}

		function array_names_from_props (arr, props) {
			var r = props.reduce( function(prevArr, currVal, i, a) {
				var q1 = flattenArrByObjProp(arr, currVal)
				var q =  union_arrays(prevArr, q1)
				return q
			}, [])
			return r
		}		
	
		var publicAPI = {
			array_names_from_props: function array_names_from_props (arr, props) {
			
						var r = props.reduce( function(prevArr, currVal, i, a) {
							var q1 = flattenArrByObjProp(arr, currVal)
							var q =  union_arrays(prevArr, q1)
							return q
						}, [])
						return r
			},
		}
		return publicAPI
	}

// _____________ context
var stateLanes = {
	reducerLanes: {}
}
var intransition = false
	
// _____________ renderer
	function renderer(payload) {

		var store = payload.store
		var actions = payload.actions
		var newState = store.getState()
	
		// return on transition
		if (intransition == true) return

		// return on same data
		if (JSON.stringify(stateLanes.reducerLanes.records) === JSON.stringify(newState.reducerLanes.records)) {
			return 
		}
	
		// store previous - will not change during renderer
		var _runners0 = stateLanes.reducerLanes.records || []
		var state = stateLanes = newState
		
		// hide on wrong views
		var _opacity = 1
		var _currentView = state.reducerCourt.currentView
		if (_currentView !== 'lanesView') _opacity = 0
	
		var _runners1 = state.reducerLanes.records
		var _fadeTime = state.reducerConfig.fadeFactor * state.reducerConfig.beatTime
		var _itemProps = state.reducerConfig.itemProps

		// SVG
		var svgContainer = d3.select('body')
			.selectAll('svg')
				.data(['lanes_svg'], function(d) {
											return 'lanes_svg'
								})
			
			var newSvgContainer = svgContainer
				.enter()
				.append("svg")
					.attr("id", "lanes_svg")
					
					var laneGroup = svgContainer
							.selectAll('g.lane')
							.data(['lane'])
							.style('opacity', _opacity)
								
						laneGroup.enter()	
							.append("g")
								.classed("lane", true)
								
			var runnersGroup = laneGroup
				.selectAll('g.runners')
				.data(['runners'])
					
			runnersGroup.enter()	
				.append("g")
					.classed("runners", true)

			var lanesGroup = laneGroup
				.selectAll('g.lanes')
				.data(['lanes'])
					
			lanesGroup.enter()	
				.append("g")
					.classed("lanes", true)

		var markerInstance = laneGroup.select(".runner-marker")
		if (markerInstance.node() == null) {
				laneGroup
					.append("marker")
					.attr("id", "runner-marker")
					.attr("class", "runner-marker")
					.attr("viewBox", "0 0 10 10")
					.attr("refX", "10")
					.attr("refY", "5")
					.attr("markerWidth", "5")
					.attr("markerHeight", "4")
					.attr("orient", "auto")
					.append("path")
						.attr("class", "runner-arrow")
						.attr("d", "M 0 0 L 10 5 L 0 10 z")
			}
					
			var _laneItems0 = arrayUtils()
				.array_names_from_props(_runners0, _itemProps)

			var _laneObjs0 = _laneItems0.map(function(d, i) {
					return ({id: d,
								name: d,
								x0: parseFloat(coordsUtils().hcoord_pct(_laneItems0, d)
									* parseInt(svgContainer.style("width")) / 100).toFixed(0)})})

			var _lanesObj0 = _laneItems0.reduce(function(total,d,currentIndex,arr) {
					var o = {}
					o[d] = {name: d,
													x0: parseFloat(coordsUtils().hcoord_pct(_laneItems0, d)
									* parseInt(svgContainer.style("width")) / 100).toFixed(0)}
					return (Object.assign({}, total, o))}, {})								


			var _laneItems1 = arrayUtils()
				.array_names_from_props(_runners1, _itemProps)
				
			var _laneObjs1 = _laneItems1.map(function(d, i) {

			var x0 = 0
					if ( _lanesObj0.hasOwnProperty( d) ) {
							x0 =  _lanesObj0[d].x0
					}
				return ({id: d,
							name: d,
							x0: x0})})
								
					// laneElems trasition
						var d3ringsTransition = d3.transition()
							.duration(_fadeTime)
							.ease(d3.easeLinear)
	
					// laneElements DATA
						var laneElements = svgContainer
							.select("g.lanes")
								.selectAll("g.lane")
								.data(_laneObjs1, function(d) { return d.id })				
					
					// laneElements EXIT
							laneElements.exit()
									.transition(d3ringsTransition)
										.style("opacity", function(d) {
														store.dispatch(actions.deleteLane(d))
											return 0
										})
										.remove(function(){})										
									
					// laneElements UPDATE	texts
						var laneTexts = laneElements.select("text")
											.attr("text-anchor", "middle")
											.attr("alignment-baseline", "middle")
											.style("font-size", function(d, i) { 
													return parseInt(svgContainer.style("width")) * 2/100
													})
											.text(function(d) { return d.name })
											.attr("dy", "20")
									.transition(d3ringsTransition)
										.attr("x", function(d, i) {
												var r = coordsUtils().hcoord_tagged_pct(_laneItems1, d.name)
												return r
										})
									.on("start", function start() {		
											intransition = true
									})
									.on("end", function end() {	
											intransition = false
									})

					// laneElements UPDATE lines
						var laneLines = laneElements.select("line")
							.attr("x0", function(d, i) {
								var r = parseFloat(coordsUtils().hcoord_pct(_laneItems0, d.name)
												* parseInt(svgContainer.style("width")) / 100).toFixed(0)
								return r
							})
							.attr("y1", function() {
								var text_bbox = this.parentNode.querySelector("text").getBBox();
								return text_bbox.y + text_bbox.height;
							})
							.attr("y2", "100%")
							.transition(d3ringsTransition)
									.attrTween("x1", function(d, i, a) {
											return function (t) {
													var r = parseFloat(coordsUtils().hcoord_pct(_laneItems1, d.name)
																	* parseInt(svgContainer.style("width")) / 100).toFixed(0)
													var x = parseFloat(parseInt(d.x0) + t * (r - parseInt(d.x0))).toFixed(0)
													// dispatch lanes abscissa 	
													var l = {name: d.name, id: d.id, x: x }
													store.dispatch(actions.setLane(l))
													return x
												}
											})

								.attr("x2", function(d, i) {
										var r = coordsUtils().hcoord_tagged_pct(_laneItems1, d.name)
										return r
								})
								.on("start", function start() {		
										intransition = true
								})
								.on("end", function end() {	
										intransition = false
								})								
							
					// newLaneElements ENTER
						var newLaneElements = laneElements
							.enter()
								.append("g")
									.classed("lane", true)

					// newLaneElements ENTER text
						newLaneElements.append("text")
							.attr("class", "lane")
							.attr("text-anchor", "middle")
							.attr("alignment-baseline", "middle")
							.style("font-family", "sans-serif")
											.style("fill", "transparent")
							.style("font-size", function(d, i) { 
												return parseInt(svgContainer.style("width")) * 2/100
													})
							.text(function(d) { return d.name })
							.attr("dy", "20")

							.attr("x", function(d, i, a) {
								var r =  coordsUtils().hcoord_tagged_pct(_laneItems1, d.name)
								return r
							})
							.transition(d3ringsTransition)
									.style("fill", "black")
									.on("start", function start() {		
											intransition = true
									})
									.on("end", function end() {	
											intransition = false
									})									
									
					// newLaneElements ENTER lines																			
						newLaneElements.append("line")
							.attr("class", "lane")
							.attr("stroke", "lightgray")
							.style("stroke-width", "1px")
							.attr("stroke-width", 1)
							.attr("x0", function(d, i) {
								var r = parseFloat(coordsUtils().hcoord_pct(_laneItems0, d.name)
												* parseInt(svgContainer.style("width")) / 100).toFixed(0)
								return r
							})
							.attr("x1", function(d, i, a) { 
										var r = coordsUtils().hcoord_tagged_pct(_laneItems1, d.name)
										var x = parseFloat(coordsUtils().hcoord_pct(_laneItems1, d.name)
												* parseInt(svgContainer.style("width")) / 100).toFixed(0)
												var l = {name: d.name, id: d.id, x: x }
												store.dispatch(actions.setLane(l))
										return r
							})
							.attr("x2", function(d, i, a) { 
										var r = coordsUtils().hcoord_tagged_pct(_laneItems1, d.name)
										return r
							})
							.attr("y1", function(_d, i) {
								var text_bbox = this.parentNode.querySelector("text").getBBox();
								return text_bbox.y + text_bbox.height;
							})
							.attr("y2", function(d, i, a) { 
									var r = "100%"
											return r
							})

				// runnerElements										
						var runnerElements = svgContainer
							.select("g.runners")
								.selectAll("g.runner")
								.data(_runners1, function(d, i) { return d.id || (d.id = ++i); })

					// runner elems UPDATE texts
							runnerElements.select('text')
								.transition(d3ringsTransition)
										.attr("x", function(d, i) {
											var r1 = coordsUtils().hcoord_pct(_laneItems1, d.from)
											var r2 = coordsUtils().hcoord_pct(_laneItems1, d.to)
											var r = coordsUtils().hcenter_tagged_pct(r1, r2)
											return r
										})
									.attr("y", function(d, i, s) { 
											var r = (i + 2) * state.reducerConfig.vstep - 10 
											return r  // (i+1)*10 
									})
									.on("start", function start() {		
											intransition = true
									})
									.on("end", function end() {	
											intransition = false
									})
									
					// runnerElems UPDATE lines
							runnerElements.select('line')						 
							.transition(d3ringsTransition)
								.attr("x1", function(d, i, a) { 
											var r = coordsUtils().hcoord_tagged_pct(_laneItems1, d.from)
											return r
							})
							.attr("x2", function(d, i, a) { 
										var r = coordsUtils().hcoord_tagged_pct(_laneItems1, d.to)
										return r
							})
							.attr("y1", function(d, i) {
									var r = (i + 2) * state.reducerConfig.vstep; 
									return r 
								})
							.attr("y2", function(d, i) {
									var r = (i + 2) * state.reducerConfig.vstep; 
									return r 
							})								
							.on("start", function start() {		
									intransition = true
							})
							.on("end", function end() {	
									intransition = false
							})
									
					// runnerElems UPDATE paths
							runnerElements.select("path")
								.transition(d3ringsTransition)
									.attr("d", function(d, i) { 			
											var	x_pc = coordsUtils().hcoord_tagged_pct(_laneItems1, d.from)
											var xScrollWidth = parseInt(svgContainer.style("width"))
											var t = xScrollWidth * Number.parseFloat(x_pc)/100
											var x = t
											var	rx = 40
											var	ry = 20
											var	y = (i + 2)*50 - ry
											var	sweep_flag = 1	
											var r = [
												"M", x, y, 
												"a", rx, ry, 0, 1, sweep_flag, 0, ry*2,
												].join(" ");														
											return r
										})
									.on("start", function start() {		
											intransition = true
									})
									.on("end", function end() {	
											intransition = false
									})					
												
						// runnerElems ENTER
								var newMessageElements = runnerElements
									.enter()
										.append("g")
											.classed("runner", true)
																					
						// runnerElems ENTER TEXTs
									newMessageElements.each(function(d, i) {
										var new_runner = d3.select(this)	
											.append("text")													
											.attr("class", "runner")
											.style("fill", "transparent")
											.style("font-size", function(d, i) {
													return parseInt(svgContainer.style("width")) * 2/100
													})
											.attr("dy", ".15em")
											.attr("text-anchor", d.from == d.to ? "end" : "middle")
											.attr("alignment-baseline", d.from == d.to ? "middle" : "autoMode")
												.text(d.msg)
												.attr("y", (i + 2) * state.reducerConfig.vstep - 10)
												.attr("x", function() {
													var x1 = coordsUtils().hcoord_pct(_laneItems1, d.from)
													var x2 = coordsUtils().hcoord_pct(_laneItems1, d.to)
													var r = coordsUtils().hcenter_tagged_pct(x1, x2)
													return r
												})
											.transition(d3ringsTransition)
													.style("fill", "grey")
													.on("start", function start() {		
															intransition = true
													})
													.on("end", function end() {	
															intransition = false
													})					
										})
											
						// runnerElems ENTER PATHs
									newMessageElements.each(function(d, i) {
										var new_runner = d3.select(this)	
										if (d.from == d.to) {
											new_runner.append("path")			// new mPATHs
												.attr("fill-opacity", 0)
												.attr("stroke", "transparent")
													.each(function(d) { 
															// this._current = d_to_arc(d, i); // store initial state
													})
												.attr("d", function() { 			
														var	x_pc_to = coordsUtils().hcoord_pct(_laneItems1, d.to)
														var xScrollWidth = parseInt(svgContainer.style("width"))
														var t = xScrollWidth * Number.parseFloat(x_pc_to)/100
														var x = t																		
														var	rx = 40
														var	ry = 20
														var	y = (i + 2)*50 - ry
														var	sweep_flag = 1
														var r = [
															"M", x, y, 
															"a", rx, ry, 0, 1, sweep_flag, 0, ry*2,
															].join(" ");														
														return r
													})
													.transition(d3ringsTransition)
														.attr("stroke", "grey")
														.attr("fill", "grey")
														.attrTween("marker-end", function(d) {
																return function (t) {
																	if (t != 1) {
																		return null
																		} else {
																		return "url(#runner-marker)"
																		}
																}
															})
														.on("start", function start() {		
																intransition = true
														})
														.on("end", function end() {	
																intransition = false
														})					
																
					// runnerElems ENTER LINEs
										}	else {
											var line = new_runner.append("line")
												.attr("class", "runner")
												.attr("stroke", "transparent")
												.attr("stroke-width", 1)
												.attr("y1", function() {
														var r = (i + 2) * state.reducerConfig.vstep ; 
														return r 
													})
												.attr("y2", function() {
														var r = (i + 2) * state.reducerConfig.vstep ; 
														return r 
												})	
												.attr("x1", coordsUtils().hcoord_tagged_pct(_laneItems1, d.from))
												.attr("x2", coordsUtils().hcoord_tagged_pct(_laneItems1, d.to))
												.transition(d3ringsTransition)
															.attr("stroke", "gray")
															.attr("fill", "grey")
															.attrTween("marker-end", function() {
																return function (t) {
																	if (t != 1) {
																		return null
																		} else {
																		return "url(#runner-marker)"
																		}
																}
															})
															.on("start", function start() {		
																	intransition = true
															})
															.on("end", function end() {	
																	intransition = false
															})					
											}
									});								
														
		// runnerElems EXIT
				runnerElements.exit()
					.transition()
						.style("opacity", 0)
						.remove()	

	}
	
	exports.renderer = renderer;
}));

/* 																	*/
/* d3rings-actions-particles.js 		*/
/* 																	*/

(function (global, factory) {
  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
  typeof define === 'function' && define.amd ? define(['exports'], factory) :
  (factory((global.d3ringsActionsParticles = global.d3ringsActionsParticles || {})));
}(this, function (exports) { 'use strict';

// ____________________ keyMirror
// https://github.com/STRML/keyMirror
var keyMirror = function(obj, prefix) {
  var ret = {};
  var key;
  if (!(obj instanceof Object && !Array.isArray(obj))) {
    throw new Error('keyMirror(...): Argument must be an object.');
  }
  for (key in obj) {
    if (obj.hasOwnProperty(key)) {
      ret[key] = prefix + key;
    }
  }
  return ret;
}

var cttsParticles = {
	CREATE_PARTICLES: '',
	INTRODUCE_PARTICLES: '',
	START_PARTICLES: '',
	START_TICKER: '',
	STOP_PARTICLES: '',
	STOP_TICKER: '',
	TICK_PARTICLES: '',
}


var ActionTypes = keyMirror(cttsParticles, '')

// ____________________ actions PARTICLES
var ActionCreators = {
	createParticles(obj) {
    var action = {
        type: ActionTypes.CREATE_PARTICLES,	// createParticles
        particlesPerTick: obj.particlesPerTick,
        x: obj.x,
        y: obj.y,
				randNormal: obj.randNormal,
 				randNormal2: obj.randNormal2,
				xInit: obj.xInit,
				xEnd: obj.xEnd,
 				lanes: obj.lanes,
 				particlesGenerating: obj.particlesGenerating,
 				currentView: obj.currentView,
    }
		return action
  },
	introduceParticles(obj) {
    return {
        type: ActionTypes.INTRODUCE_PARTICLES,	// introduceParticles
        particlesPerTick: obj.particlesPerTick,
        x: obj.x,
        y: obj.y,
				randNormal: obj.randNormal,
 				randNormal2: obj.randNormal2,
				xInit: obj.xInit,
				xEnd: obj.xEnd,
 				lanes: obj.lanes,
 				particlesGenerating: obj.particlesGenerating,
 				currentView: obj.currentView,
    }
  },
	startParticles() {
    return {
        type: ActionTypes.START_PARTICLES
    }
	},
	startTicker() {
    return {
        type: ActionTypes.START_TICKER
    };
	},
	stopTicker() {
    return {
        type: ActionTypes.STOP_TICKER
    };
	},
	stopParticles() {
    return {
        type: ActionTypes.STOP_PARTICLES
    }
	},
	tickParticles(arg) {
    return {
         type: ActionTypes.TICK_PARTICLES,		// tickParticles
				 width: arg.width,
				 height: arg.height,
				 gravity: arg.gravity,
				 lanes: arg.lanes,
    }
	},
}

exports.ActionTypes = ActionTypes
exports.ActionCreators = ActionCreators
}));

/* 																	*/
/*    d3rings-reducer-particles.js  */
/* 																	*/

	if (typeof require === "function") {
		var d3 = require('./d3.v4.0.0-rc.2.js')
		var d3ringsActions = require('./d3rings-actions-particles.js')
	}
	
	(function (global, factory) {
  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
  typeof define === 'function' && define.amd ? define(['exports'], factory) :
  (factory((global.d3ringsReducerParticles = global.d3ringsReducerParticles || {})));
}(this, function (exports) { 'use strict';


// _____________ PARTICLES
var initialStateParticles = {
			particles: [],
			particleIndex: 0,
			particlesGenerating: true,
			particlesIntroduced: false,
			particlesPerTick: 10,
			particleRadio: 9,
}

function reducerParticles(state = initialStateParticles, action) {
	if (action == null) return state
	var ActionTypes = d3ringsActions.ActionTypes
    switch (action.type) {
        case ActionTypes.START_PARTICLES:				// startParticles
					// console.log("START_PARTICLES")
          return Object.assign({}, state, {
                particlesGenerating: true
            })
						
        case ActionTypes.STOP_PARTICLES:			// stopParticles
					// console.log("STOP_PARTICLES")
            return Object.assign({}, state, {
                // particlesGenerating: false
            });
						
        case ActionTypes.INTRODUCE_PARTICLES:			// introduceParticles
					var newParticles = state.particles.slice(0)
					var numberOfNewParticles = 5 * action.particlesPerTick
					var currentView = action.currentView
					var i
					if ((state.particlesIntroduced == false) && (currentView == 'lanesView')) {
						for (i = 0; i < numberOfNewParticles; i++) {
								var particle = {id: state.particleIndex+i,
																		x: action.x,
																		y: action.y,
																		closestLaneDown: {id: 'init', x: action.xInit},
																		closestLaneUp: {id: 'end', x: action.xEnd},
																	}
										particle.vector = [particle.id%2 ? - action.randNormal() : action.randNormal(),
																		 - action.randNormal2() * 3.3];
										newParticles.unshift(particle);
							}
							return Object.assign({}, state, {
									particles: newParticles,
									particleIndex: state.particleIndex+i+1,
									particlesIntroduced: true
							})
					} else {
							return state
					}
							
        case ActionTypes.CREATE_PARTICLES:			// createParticles
						var newParticles = state.particles.slice(0)
						var numberOfNewParticles = action.particlesPerTick
						var particlesGenerating = action.particlesGenerating
						var currentView = action.currentView
						if ((particlesGenerating == true) && (currentView == 'lanesView') ){
							for (var i = 0; i < numberOfNewParticles; i++) {
									var ref = parseInt(action.x)
									var closestLaneUp = action.lanes
													.filter(function (d) {return d.x >= ref} )
													.reduce(function (prev, curr) {
										return (Math.abs(curr.x - ref) < Math.abs(prev.x - ref) ? curr : prev);
									}, {id: 'end', x: action.xEnd})
									
									var closestLaneDown = action.lanes
													.filter(function (d) {return d.x <= ref} )
													.reduce(function (prev, curr) {
										return (Math.abs(curr.x - ref) < Math.abs(prev.x - ref) ? curr : prev);
									}, {id: 'init', x: action.xInit})									
							
									var particle = {id: state.particleIndex+i,
																		x: action.x,
																		y: action.y,
																		closestLaneDown: closestLaneDown,
																		closestLaneUp: closestLaneUp,
																	};

									particle.vector = [particle.id%2 ? - action.randNormal() : action.randNormal(),
																		 - action.randNormal2()*3.3];

									newParticles.unshift(particle);
							}
							return Object.assign({}, state, {
									particles: newParticles,
									particleIndex: state.particleIndex+i+1
							})
						} else {
							return state
						}
						
        case ActionTypes.TICK_PARTICLES:		// tickParticles
							var laneXs = action.lanes
									.map(function(l) {
										var x = parseInt(l.x)
										return x})
							var svgWidth = action.width
							var svgHeight = action.height
              var gravity = action.gravity
              var movedParticles = state.particles
								.filter(function (p) {
											return (!(p.y > svgHeight))
									})
								.filter(function (p) {
											return (!(p.y < 0))
									})
								.map(function (p) {
										var vx = p.vector[0]
										var vy = p.vector[1]
										p.x += vx
										p.y += vy

										var ref = parseInt(p.x)

										var laneUp = action.lanes
												.filter(function(l) {
													return (l.id == p.closestLaneUp.id)
													})
										p.closestLaneUp.x = (laneUp.length > 0 ) ? +laneUp[0].x : +p.closestLaneUp.x
										
										var laneDown = action.lanes
												.filter(function(l) {
													return (l.id == p.closestLaneDown.id)
													})
										 p.closestLaneDown.x = (laneDown.length > 0 ) ? +laneDown[0].x : +p.closestLaneDown.x

										if (ref < (p.closestLaneDown.x + state.particleRadio) || ref > (p.closestLaneUp.x - state.particleRadio)) {
												p.vector[0] = -p.vector[0] 
											}
										p.vector[1] += gravity + 2 * gravity * (p.y - svgHeight) / svgHeight
										return p
							});
							return Object.assign({}, state, {
										particles: movedParticles,
										particleIndex: movedParticles.length,
								});
					default:
            return state;
	}
}

exports.reducerParticles = reducerParticles;
}));

/* 																	*/
/* d3rings-renderer-particles.js    */
/* 																	*/

if (typeof require === "function") {
		var d3 = require('./d3.v4.0.0-rc.2.js')
	}
	
(function (global, factory) {
  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
  typeof define === 'function' && define.amd ? define(['exports'], factory) :
  (factory((global.d3ringsRendererParticles = global.d3ringsRendererParticles || {})));
}(this, function (exports) { 'use strict';

// _____________ context
var stateParticles = {
	reducerParticles: {}
}
var rendering = false
var intransition = false

	// _______________________ renderer
	function renderer(payload) {

		var store = payload.store
		var actions = payload.actions
		var newState = store.getState()
		
		if (rendering == true) return
		if (newState.reducerParticles.particles.length == 0) return
		rendering = true
			var state = stateParticles= newState
			var particleRadio = state.reducerParticles.particleRadio || 6.33

			var svgContainer = d3.select('body')
					.selectAll('svg')
						.data(['svgContainer'])
					
					svgContainer
						.enter()
						.append("svg")
							.attr("id", state.reducerConfig.container)
					
					svgContainer
							.style('width', state.reducerCourt.svgWidth)
							.style('height', state.reducerCourt.svgHeight)

					var itemsGroup = d3.select('svg')
						.selectAll('g.particles')		// items
						.data(['items'])
							
					itemsGroup.enter()	
						.append("g")
							.classed("particles", true)	// items
							
				// _________________________________ render Particles	
					var color = d3.scalePlasma()
							.domain([0, 1])

					var particleElements = svgContainer
						.select("g.particles")
							.selectAll("circle")
							.data(state.reducerParticles.particles)
									.attr('cx', function(d, i, a) { return d.x })
									.attr('cy', function(d, i, a) { return d.y })
									.attr('r', function(d, i, a) { return particleRadio })
									.style("fill", function (d) {
										var r = d.closestLaneUp.x / (d.closestLaneUp.x - d.closestLaneDown.x)
										return color( ((3*r)%10 / 10) + (Math.random()* 3 /10))
									})
									.style("fill-opacity", 0.2)
									.style("stroke", "none")

						
					var newParticleElements = particleElements
					.enter()
								.append("circle")													
									.attr('cx', function(d, i, a) { return d.x })
									.attr('cy', function(d, i, a) { return d.y })
									.attr('r', function(d, i, a) { return particleRadio })
									.style("fill", function (d) {
										var r = d.closestLaneUp.x / (d.closestLaneUp.x - d.closestLaneDown.x)
										return color( ((3*r)%10 / 10) + (Math.random()/10))
									})
									.style("stroke", "none")
									
					particleElements.exit()
						.remove()										

				rendering = false
} // renderer
	
	exports.renderer = renderer;
}));

/* 																	*/
/* d3rings-actions-whirls.js   			*/
/* 																	*/

(function (global, factory) {
  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
  typeof define === 'function' && define.amd ? define(['exports'], factory) :
  (factory((global.d3ringsActionsWhirls = global.d3ringsActionsWhirls || {})));
}(this, function (exports) { 'use strict';

// ____________________ keyMirror
// https://github.com/STRML/keyMirror
var keyMirror = function(obj, prefix) {
  var ret = {};
  var key;
  if (!(obj instanceof Object && !Array.isArray(obj))) {
    throw new Error('keyMirror(...): Argument must be an object.');
  }
  for (key in obj) {
    if (obj.hasOwnProperty(key)) {
      ret[key] = prefix + key;
    }
  }
  return ret;
}


var consts = {
	DELETE_RANG: '',
	INIT_RANGS: '',
	SET_DURATION: '',
	SET_RANG: '',
	SET_RANGS: '',
	STOP_RANGS: '',
	UPDATE_RANGS_DURATION: '',
	UPDATE_RANGS_NUMBER: '',
	
	INTRODUCE_RINGS: '',
	CREATE_RINGS: '',
	DELETE_RING: '',
	START_RINGS: '',
	START_RINGS_TICKER: '',
	STOP_RINGS: '',
	STOP_TICKER: '',
	TICK_RING: '',
	TICK_RINGS: '',
}


var ActionTypes = keyMirror(consts, '')

// ____________________ actions RANGS
var ActionCreators = {
	deleteRang(rang) {
    return {
        type: ActionTypes.DELETE_RANG,
        rang: rang,
		}
  },
	startRangs() {
    return {
        type: ActionTypes.INIT_RANGS,
        startRangs: true,
		}
  },
	setDuration(duration) {
    return {
        type: ActionTypes.SET_DURATION,
        duration: duration,
		}
  },
	stopRangs() {
    return {
        type: ActionTypes.STOP_RANGS
		}
  },
	setRang(rang) {
    return {
        type: ActionTypes.SET_RANG,
        rang: rang,
		}
  },
	setRangs(rangs) {
    return {
        type: ActionTypes.SET_RANGS,
        rangs: rangs,
		}
  },
	
	updateRangsDuration(obj) {
    return {
        type: ActionTypes.UPDATE_RANGS_DURATION,
        rangsAlways: obj.rangsAlways,
        rangsHitsIndex: obj.rangsHitsIndex,
		}
  },
	
	updateRangsNumber(obj) {
    return {
        type: ActionTypes.UPDATE_RANGS_NUMBER,
        rangsAlways: obj.rangsAlways,
        rangsHitsIndex: obj.rangsHitsIndex,
		}
  },
	
	introduceRings(obj) {
    return {
        type: ActionTypes.INTRODUCE_RINGS,	// introduceRings
        ringsPerTick: obj.ringsPerTick,
        x: obj.x,
        y: obj.y,
				randNormal: obj.randNormal,
 				randNormal2: obj.randNormal2,
				xInit: obj.xInit,
				xEnd: obj.xEnd,
 				rangs: obj.rangs,
 				ringsGenerating: obj.ringsGenerating,
    }
  },
	
	createRings(obj) {
    return {
        type: ActionTypes.CREATE_RINGS,	// createRings
        ringsPerTick: obj.ringsPerTick,
        x: obj.x,
        y: obj.y,
        r: obj.r,
 				randNormal: obj.randNormal,
 				randNormal2: obj.randNormal2,
 				rangs: obj.rangs,
 				ringsGenerating: obj.ringsGenerating,
    }
  },
	deleteRing(ring) {
    return {
        type: ActionTypes.DELETE_RING,
        ring: ring,
		}
  },	
	startRings() {
    return {
        type: ActionTypes.START_RINGS
    }
	},
	startRingsTicker() {
    return {
        type: ActionTypes.START_RINGS_TICKER
    };
	},
	stopRingsTicker() {
    return {
        type: ActionTypes.STOP_RINGS_TICKER
    };
	},
	tickRing(arg) {
    return {
        type: ActionTypes.TICK_RING,		// tickRing
				ring: {
					 id: arg.id,
					 rid: arg.rid,
					 cx: arg.cx,
					 cy: arg.cy,
					 r0: arg.r0,
					 r: arg.r,
					 vector: arg.vector,
					 t: arg.t,
					 tn: arg.tn,
					 rang: arg.rang,
				}
   }
	},
	stopRings() {
    return {
        type: ActionTypes.STOP_RINGS
    }
	},	
}

exports.ActionTypes = ActionTypes
exports.ActionCreators = ActionCreators
}));
/* 																*/
/*    d3rings-reducer-whirls.js   */
/* 																*/

if (typeof require === "function") {
	var d3 = require('./d3.v4.0.0-rc.2.js')
	var d3ringsActions = require('./d3rings-actions-whirls.js')
}

(function (global, factory) {
  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
  typeof define === 'function' && define.amd ? define(['exports'], factory) :
  (factory((global.d3ringsReducerWhirls = global.d3ringsReducerWhirls || {})));
}(this, function (exports) { 'use strict';

// http://stackoverflow.com/questions/31381129/assign-new-id-attribute-to-each-element-created
function guid() {
    function _p8(s) {
        var p = (Math.random().toString(16)+"000000000").substr(2,8);
        return s ? "-" + p.substr(0,4) + "-" + p.substr(4,4) : p ;
    }
    return _p8() + _p8(true) + _p8(true) + _p8();
}

function inSquare (cx, cy, xl, yl, xh, yh) {
	if (cx > xl && cx < xh && cy > yl && cy < yh) return true
	else return false											
}

// _____________ RANGS
var initialStateThis = {
			duration: 2500,
			n: 3,
			s0: 200,
			s: 200,
			rangs: [],
			rangsNow: 0,
			rangsAlways: 0,
			startRangs: true,
			
			rings: [],
			ringsNew: [],
			ringsIndex: 0,
			ringsHits: 0,
			rangsHitsIndex: 0,
			rangsHits: [],
			ringsIntroduced: false,
			ringsPerTick: 3,
			ringsRadio: 9,
			ringsGenerating: true,			
	}
	
function reducerThis(state = initialStateThis, action) {
	if (action == null) return state
	var ActionTypes = d3ringsActions.ActionTypes
    switch (action.type) {
		
       case ActionTypes.DELETE_RANG:
						var rangs = state.rangs
						var items = rangs.filter(function( obj ) {
								return obj.rid !== action.rang.rid;
							});
		
						 var r = Object.assign({}, state,
							{rangs: items},
							{rangsNow: items.length}
							);
							return r

       case ActionTypes.INIT_RANGS:
            return Object.assign({}, state, {
                startRangs: true
            })

       case ActionTypes.STOP_RANGS:
 						// console.log('STOP_RANGS')
            return Object.assign({}, state, {
                // startRangs: false
            })

			case ActionTypes.SET_RANG:					// setRang
					var rangs = state.rangs
					var s0 = state.s0
					var rangsAlways = state.rangsAlways
					var items = {}
					var result = rangs.filter(function( obj ) {
							return obj.id == action.rang.id;
						});
							
					if (result.length === 0) {			// add rang
						items = {rangs: [
							{
								id: action.rang.id,
								rid: action.rang.rid,
								grid: action.rang.grid,
								x: action.rang.x,
								y: action.rang.y,
								s: action.rang.s,
								t: action.rang.t,
								sn: action.rang.s,
								s: s0,
							}, 
							...rangs
						]}
						rangsAlways = rangsAlways + 1
					} else {												// edit rang
						items = {rangs: rangs.map(rang =>
								rang.rid === action.rang.rid ?
									Object.assign({}, rang, { 
											rid: action.rang.rid,
											grid: action.rang.grid,
											x: action.rang.x,
											y: action.rang.y,
											s: action.rang.s,
											sn: rang.s,
											s0: s0,
									}) :
									rang
							)}
					}
				 var r = Object.assign({}, state,
						items,
						{rangsNow: items.rangs.length,
						 rangsAlways: rangsAlways}
					)
					return r
		
        case ActionTypes.SET_RANGS:						// setRangs
 						// console.log('SET_RANGS')
            return Object.assign({}, state, {
                rangs: action.rangs,
                rangsNow: Object.keys(action.rangs).length
            })

       case ActionTypes.UPDATE_RANGS_DURATION:	// updateRangsDuration
						var duration = state.duration
						var hitsLostPct = Math.round(100 * (action.rangsAlways - action.rangsHitsIndex) / action.rangsAlways) || 0
						if (hitsLostPct < 20) duration = Math.min(Math.max((50 - hitsLostPct) * 20, 1500), 2500)
            return Object.assign({}, state, {
                duration: duration,
             })

       case ActionTypes.UPDATE_RANGS_NUMBER:		// updateRangsNumber
						var n = state.n
						var hitsLostPct = Math.round(100 * (action.rangsAlways - action.rangsHitsIndex) / action.rangsAlways) || 0
						var hitsPctBy10 = Math.floor((100 - hitsLostPct)/10)
						var rangsMax = Math.max(hitsPctBy10, 2)
						var rangsNumber = Math.min(rangsMax, 8)
						return Object.assign({}, state, {
                n: rangsNumber,
             })

						
        case ActionTypes.CREATE_RINGS:			// createRings
						var _duration = state.duration
						var _newRings = []
						var _ringsHits = state.ringsHits
						var _rangsHits = state.rangsHits
						var _rangsHitsIndex = state.rangsHitsIndex
						if (action.ringsGenerating == true) {
							var ringsRadio = state.ringsRadio
						
							var idx = state.ringsIndex
							var i, j
							for (j = 0; j < action.rangs.length; ++j) {
									var cx = action.x
									var cy = action.y
								

									var xl = action.rangs[j].x
									var yl = action.rangs[j].y
									var xh = action.rangs[j].x + action.rangs[j].s
									var yh = action.rangs[j].y + action.rangs[j].s
									if (inSquare (cx, cy, xl, yl, xh, yh)) {
											var rang = action.rangs[j]
											var rid = rang.id
											var grid = rang.grid
											var t = rang.t
											var s = rang.s
											var s0 = rang.s0
											var r0 = (ringsRadio * s / s0) || 0
											var r = (ringsRadio * s / s0) || 0
												
											for (i = 0; i < action.ringsPerTick; i++) {
													var ring = {
																id: guid(),
																cx: cx,
																cy: cy,
																r0: r0,
																r: r,
																rid: rid,
																grid: grid,
																rang: rang,
															};

													ring.vector = [ring.id%2 ? - action.randNormal() : action.randNormal(),
																						 - action.randNormal2()]
													_newRings.unshift(ring)
											}
											_ringsHits = _ringsHits + 1
									
											if (_rangsHits.indexOf(grid) == -1) {
													_rangsHits.push(grid)
											}
											_rangsHitsIndex = _rangsHits.length
										}
						}
							
							var _ringsAll = state.rings.slice(0).concat(_newRings)
							return Object.assign({}, state, {
									rings: _ringsAll,
									ringsNew: _newRings,
									ringsIndex: _ringsAll.length,
									ringsHits: _ringsHits,
									rangsHits: _rangsHits,
									rangsHitsIndex: _rangsHitsIndex,
							})
						} else {
							return state
						}
						
     case ActionTypes.DELETE_RING:	// deleteRing
						var rings = state.rings
						var items = rings.filter(function( obj ) {
								return obj.id !== action.ring.id;
							});
		
						 var r = Object.assign({}, state,
								{rings: items},
								{ringsIndex: items.length}
							)
							return r
		
        case ActionTypes.SET_DURATION:				// setDuration
					// console.log("SET_DURATION")		
          return Object.assign({}, state, {
                duration: action.duration
            })
						
		
        case ActionTypes.START_RINGS:				// startRings
					// console.log("START_RINGS")		
          return Object.assign({}, state, {
                ringsGenerating: true
            })
						
        case ActionTypes.STOP_RINGS:			// stopRings
					// console.log("STOP_RINGS")
            return Object.assign({}, state, {
                // ringsGenerating: false
            });

						
        case ActionTypes.TICK_RING:		// tickRing
					var duration = state.duration
					
					var ringsRadio = state.ringsRadio		// init ring radio
					var rangs = state.rangs
					var ringsNew = []
				
					var hitRangs = rangs
						.filter(function (d) { return (d.id == action.ring.rid) })

					if (hitRangs.length > 0) {
						var rang = hitRangs[0]		// rang by id
						var speed = rang.s0/duration
						var xe = rang.x + rang.s
						var xw = rang.x
						var yn = rang.y
						var ys = rang.y + rang.s
						var t = action.ring.t
						var tn = action.ring.tn
						var deltas = rang.s - rang.sn
						var deltat = t - tn
						var v = deltas/deltat || 0
						
						ringsNew = state.rings			// get other rings
							.reduce(function (a, d) {				
									if (d.id == action.ring.id) {
												var randx = d.vector[0]
												var randy = d.vector[1]
												var dcx = d.cx
												var dcy = d.cy
												var dr = d.r
												var dr0 = d.r0
												
												if (dr > deltas) {
															if (dcx - dr < xw) randx = - randx
															if (dcx + dr > xe) randx = randx + 2 * deltas
															if (dcy - dr < yn) randy = - randy
															if (dcy + dr > ys) randy = randy + 2 * deltas
														
															var xnp1 = dcx + randx
															var ynp1 = dcy + randy

															d.tn = t
															d.r = (1 - t) * dr0
															d.vector[0] = randx
															d.vector[1] = randy
															
															var xpose = Math.max(xw, xnp1)
															var xpos = Math.min(xpose, xe)
															var yposn = Math.max(yn, ynp1)
															var ypos = Math.min(yposn, ys)
															d.cx = xpos
															d.cy = ypos
												a.push(d)
											}
											return a
									} else {
											a.push(d)
											return a
									}
						}, [])
					}
					return Object.assign({}, state, {
							rings: ringsNew,
							ringsIndex: ringsNew.length,
					})
								
						
        default:
            return state;
    }
}

exports.reducer = reducerThis
}));

/* 																	*/
/* d3rings-renderer-whirls.js   		*/
/* 																	*/

if (typeof require === "function") {
		var d3 = require('./d3.v4.0.0-rc.2.js')
	}
(function (global, factory) {
  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
  typeof define === 'function' && define.amd ? define(['exports'], factory) :
  (factory((global.d3ringsRendererWhirls = global.d3ringsRendererWhirls || {})));
}(this, function (exports) { 'use strict';

			
// http://stackoverflow.com/questions/31381129/assign-new-id-attribute-to-each-element-created
function guid() {
    function _p8(s) {
        var p = (Math.random().toString(16)+"000000000").substr(2,8);
        return s ? "-" + p.substr(0,4) + "-" + p.substr(4,4) : p ;
    }
    return _p8() + _p8(true) + _p8(true) + _p8();
}

// Adapted from https://github.com/tj/d3-dot
var gen = function(n, l, h, s) {
  var data = []
  for (var i = n; i; i--) {
		var grid = guid()
    data.push({
      x: Math.random() * l | 0,
      y: Math.random() * h | 0,
			id: i,
			rid: i,
			grid: grid,
			s: s
    })
  }

  return data
}
		
// _____________ context
var stateWhirls = {
	reducerWhirls: {}
}
var intransition = false
var intransition_newRang = false
var intransition_updRang = false
var intransition_newRing = false

	
// _____________ renderer
	function renderer(payload) {
		var store = payload.store
		var actions = payload.actions
		var newState = store.getState()
		
		// return on transition
		if (intransition == true) return
		
		var state = stateWhirls = newState

		// return if not init - mouse hover
		var _startRangs = state.reducerWhirls.startRangs

		// hide on wrong views
		var _opacity = 1
		var _currentView = state.reducerCourt.currentView
		if (_currentView !== 'ringsView') _opacity = 0
				
		if (_startRangs == false) return

		var _fadeTime = state.reducerConfig.fadeFactor * state.reducerConfig.beatTime		
		var _itemProps = state.reducerConfig.itemProps
		var _duration = state.reducerWhirls.duration
		var _n = state.reducerWhirls.n
		var _s = state.reducerWhirls.s
		var _width = state.reducerCourt.svgWidth
		var _height = state.reducerCourt.svgHeight
		var _svgid = state.reducerConfig.container
		var _currentView = state.reducerCourt.currentView

		// rings
		var ringsRadio = state.reducerWhirls.ringsRadio || state.reducerConfig.ringDefaultRadio

		
		// SVG
		var svgContainer = d3.select('body')
			.selectAll('svg')
				.data(['rangs_svg'], function(d) {
											return 'rangs_svg'
								})

		var newSvgContainer = svgContainer
				.enter()
				.append("svg")
					.attr("id", 'rangs_svg')

			svgContainer
					.style('width', _width)
					.style('height', _height)

			d3.select('svg')
				.selectAll('g.rangs')		// items
				.data(['items'])
				.style('opacity', _opacity)
			.enter()	
				.append("g")
					.classed("rangs", true)	// items

			// rings
				d3.select('svg')
						.selectAll('g.rings')		// items
						.data(['items'])
				.enter()	
						.append("g")
							.classed("rings", true)	// items
						
 			// elems trasition
				var elemsTransition = d3.transition()
					.duration(_duration)
					.ease(d3.easeLinear)
	
				var rangsTransition = d3.transition()
					.duration(_duration)
					.ease(d3.easeLinear)
	
				var elemsTransition = d3.transition()
					.duration(_duration)
					.ease(d3.easeLinear)
	
				var colorScale = d3.interpolateCubehelixLong(0, 1)

					// _________________________________ render rangs

				var rangGroups = svgContainer.select("g.rangs")		// data rang
						.selectAll("g.rang")
            .data(gen(_n, _width, _height, _s), 
								function(d) { return d.rid })
 							
				var newRangGroups = rangGroups										// enter rang
            .enter()
							.append("g")
							.attr("class", "rang")
							// .attr("id", function (d) { return d.id; })
							.attr("rid", function (d) { return d.rid; })

				var rectOnNewRang = newRangGroups.append('rect')	// append rect
            .attr("rid", function (d) {return d.rid })
            .attr("grid", function (d) {return d.grid })
            .attr("class", "rect")
						.attr("x", function (d) { return d.x; })
            .attr("y", function (d) { return d.y; })
            .attr("s", function (d) { return d.s; })
            .attr("t", function (d) { return d.t; })
						.attr("stroke-width", 1)
						.attr("stroke", "grey")
						.style("fill", "transparent")

				if (intransition_updRang == false) {
					var rectOnExistingRang = rangGroups.select("rect")	// update rect
 						.attr("rid", function (d) { return d.rid })
  					.attr("x", function (d) { return d.x })
            .attr("y", function (d) { return d.y })
            .attr("s", function (d) { return d.s })
							.transition('updRang')
								.duration(_duration)
								.ease(d3.easeLinear)
							.attrTween("height", function(d) {
								return function (t) {
									var r = parseInt((1 - t) * d.s)
									return r
								}
							})
							.attrTween("width", function(d) {
								return function (t) {
									var r = parseInt((1 - t) * d.s)
									return r
								}
							})
							.attrTween("s", function(d) {
								return function (t) {
									var r = parseInt((1 - t) * d.s)
									var item = {
												id: d.id,
												rid: d.rid,
												grid: d.grid,
												x: d.x,
												y: d.y,
												t: t,
												s: parseInt((1 - t) * d.s),
										}
									store.dispatch(actions.setRang(item))				
									return r
								}
							})
							.on("start", function start() {		
									intransition_updRang = true
								})
							.on("end", function end(d) {	
								store.dispatch(actions.deleteRang(d))				
								intransition_updRang = false
							})								
						
					rangGroups.exit()											// delete rang
						.remove(function(){
							store.dispatch(actions.deleteRang(d))
								})
				}
				
					// _________________________________ render rings

						var ringElements = svgContainer
							.select("g.rings")
							.selectAll("circle")
							.data(state.reducerWhirls.rings, function (d) { return d.id})

						var updateItems = ringElements
									.attr('r', function(d, i, a) { return d.r })
									.attr('cx', function(d, i, a) { return d.cx })
									.attr('cy', function(d, i, a) { return d.cy })
										.style("fill", function (d) {	return colorScale( Math.random() / 2)})
										.style("fill-opacity", 0.7)
										.style("stroke", "none")
				
						var newRingElements = ringElements
							.enter()
								.append("circle")													
										.attr('class', 'ring')
										.attr('id', function(d, i, a) { return d.id })
										
						newRingElements				
									.transition('newRing')
										.duration(_duration)
										.ease(d3.easeLinear)
											.attrTween('t', function(d, i, a) {
											return function (t) {
												store.dispatch(actions.tickRing(Object.assign({}, d, {t: t})))
												return t
											}
									})
			
							var exitRingElements = ringElements.exit()
								.remove(function(){
												store.dispatch(actions.deleteRing(d))
								})

	} // end render
	
	exports.renderer = renderer;
}));

/* 																	*/
/* d3rings-actions-chords.js   		  */
/* 																	*/

(function (global, factory) {
  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
  typeof define === 'function' && define.amd ? define(['exports'], factory) :
  (factory((global.d3ringsActionsChords = global.d3ringsActionsChords || {})));
}(this, function (exports) { 'use strict';

// ____________________ keyMirror
// https://github.com/STRML/keyMirror
var keyMirror = function(obj, prefix) {
  var ret = {};
  var key;
  if (!(obj instanceof Object && !Array.isArray(obj))) {
    throw new Error('keyMirror(...): Argument must be an object.');
  }
  for (key in obj) {
    if (obj.hasOwnProperty(key)) {
      ret[key] = prefix + key;
    }
  }
  return ret;
}

var actionConstants = {
	FETCH_CHORDS_COLLECTION: '',
	SET_CHORDS_COLLECTION: '',
	SET_CHORDS: '',
	WALK_DOWN_CHORDS: '',
	WALK_UP_CHORDS: '',
}

var ActionTypes = keyMirror(actionConstants, '')

// ____________________ actions
var ActionCreators = {

	fetchChordsCollection(payload) {		// FETCH_CHORDS_COLLECTION
    return {
        type: ActionTypes.FETCH_CHORDS_COLLECTION,
        payload: payload,
    }
  },
	setChordsCollection(payload) {		// SET_CHORDS_COLLECTION
    return {
        type: ActionTypes.SET_CHORDS_COLLECTION,
        payload: payload,
    }
  },
	setChords(payload) {				// SET_CHORDS
    return {
        type: ActionTypes.SET_CHORDS,
        payload: payload,
    }
  },
	walkDownChords(payload) {	// WALK_DOWN_CHORDS
    return {
        type: ActionTypes.WALK_DOWN_CHORDS,
        payload: payload,
    }
  },
	walkUpChords(payload) {	// WALK_UP_CHORDS
    return {
        type: ActionTypes.WALK_UP_CHORDS,
        payload: payload,
    }
  },

}

exports.ActionTypes = ActionTypes
exports.ActionCreators = ActionCreators
}));

/* 													  			*/
/*    d3rings-reducer-chords.js     */
/* 																	*/

if (typeof require === "function") {
	var d3 = require('./d3.v4.0.0-rc.2.js')
	var d3ringsActions = require('./d3rings-actions-chords.js')
}
	
(function (global, factory) {
  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
  typeof define === 'function' && define.amd ? define(['exports'], factory) :
  (factory((global.d3ringsReducerChords = global.d3ringsReducerChords || {})));
}(this, function (exports) { 'use strict';

				var actionsSeriesCreate = function actionsSeriesCreate (dataParam) {
						var cbn = []
						var ci = -1
						var d3map = d3.map()
						dataParam.forEach(function(d) {
						
							var cr = {}
							if (d3map.has(d.source)) {
									cr.source = d3map.get(d.source)
							} else {
									++ci
									cr.source = {name: d.source, index: ci}
									d3map.set(d.source, cr.source)
							}
							if (d3map.has(d.target)) {
									cr.target = d3map.get(d.target)
							} else {
									++ci
									cr.target = {name: d.target, index: ci}
									d3map.set(d.target, cr.target)
							}
							cr.prx = d.prx
							cr.predicate = d.predicate
							cr.weigh = d.weigh
							cr.valueOf = d.valueOf
							cbn.push(cr)
						})
						return cbn
				}



					var subjectByNameCreate = function subjectByNameCreate (dataParam) {
						var ci = -1
						var d3map = d3.map()
						var cidx = dataParam
						cidx.forEach(function(d) {
								if (!d3map.has(d.source)) d3map.set(d.source, {name: d.source, index: ++ci})
								if (!d3map.has(d.target)) d3map.set(d.target, {name: d.target, index: ++ci})
						})
						return d3map
					}
			
					var subjectByIndexCreate = function subjectByIndexCreate (dataParam) {		// source, weigh, ???
						var ci = -1
						var subjectIndex = {}
						var d3map = d3.map()
						dataParam.forEach(function(d) {
								if (!d3map.has(d.source)) {
										++ci; 
										d3map.set(d.source, {
													index: ci
										})
										subjectIndex[ci] = {
											name: d.source, 
											index: ci,
											weigh: d.weigh,
										}
								}
								if (d3map.has(d.source)) {
										var e = d3map.get(d.source);
										subjectIndex[e.index] = {
											name: d.source, 
											index: ci,
											weigh: d.weigh
										}
								}
								if (!d3map.has(d.target)) {
									++ci; 
									d3map.set(d.target, {
											index: ci
									})
									subjectIndex[ci] = {
											name: d.target
									}
								}
						})
						return subjectIndex
					}
			
					var actionsListCreate = function actionsListCreate (dataParam) {		// source, target, predicate, weigh, value
						var cbn = []
						var ci = -1
						var d3map = d3.map()
						dataParam.forEach(function(d) {
							var cr = {}
							if (d3map.has(d.source)) cr.source = d3map.get(d.source);
							 else {
											++ci
											cr.source = {name: d.source, index: ci}
											d3map.set(d.source, cr.source)
									}
							if (d3map.has(d.target)) cr.target = d3map.get(d.target)
							 else {
											++ci
											cr.target = {name: d.target, index: ci}
											d3map.set(d.target, cr.target)
									}
							cr.predicate = d.predicate;
							cr.weigh = d.weigh;
							cr.valueOf = d.valueOf;
							cbn.push(cr)
						})
						return cbn
				}		

// _____________ CHORDS
var initialStateThis = {
			outerRate: 3/8,
			outerDelta: 20,
			chords: [],
			chordsCollection: [],
			chordsIndex: 0,
			areChordsFetched: false,
			src: 'chords.csv',
			itemsCursorLow: 0,
			itemsCursorHigh: 0,
			keyEventsOnChords: {},
			itemSpan: 50,
			itemProps: ['source', 'target', 'predicate', 'weigh'],
			subjectByNameAll: {},
			subjectByIndexAll: {},
			actionsListAll: [],
			chordsCollection: [
				 {source: "architect", target: "faraon", predicate: "did village in tebas, workers!", weigh: 5},
				 {source: "faraon", target: "architect", predicate: "uhmm!!!", weigh: 10},
				 {source: "friend", target: "architect", predicate: "what a waste!!!", weigh: 9},
				 {source: "architect", target: "faraon", predicate: "built fortress in kadesh, hittites!", weigh: 5},
				 {source: "faraon", target: "architect", predicate: "uhmm!!!", weigh: 10},
				 {source: "girl friend", target: "architect", predicate: "coward!!!", weigh: 9},
				 {source: "faraon", target: "architect", predicate: "now sleeping room, eternal", weigh: 15},
				 {source: "architect", target: "faraon", predicate: "uhmm", weigh: 2},
				 {source: "friend", target: "architect", predicate: "lazy!!!", weigh: 9},
				 {source: "girl friend", target: "architect", predicate: "do it!!!", weigh: 9},
				 {source: "faraon", target: "architect", predicate: "resources, all!!!", weigh: 15},
				 {source: "architect", target: "faraon", predicate: "uhmm", weigh: 3},
				 {source: "architect", target: "faraon", predicate: "  .....  ", weigh: 1},
				 {source: "architect", target: "faraon", predicate: "  .....  ", weigh: 1},
				 {source: "architect", target: "faraon", predicate: "  __/^\\__ !!!", weigh: 10},
				 {source: "faraon", target: "architect", predicate: "uhmm", weigh: 5},
				 {source: "friend", target: "architect", predicate: "uhmm!!!", weigh: 9},
				 {source: "girl friend", target: "architect", predicate: "uhmm!!!", weigh: 9},
				 {source: "faraon", target: "architect", predicate: "sitting room, inside!!!", weigh: 15},
				 {source: "faraon", target: "architect", predicate: "resources, all!!!", weigh: 15},
				 {source: "architect", target: "faraon", predicate: "uhmm", weigh: 3},
				 {source: "architect", target: "faraon", predicate: "uhmm", weigh: 2},
				 {source: "architect", target: "faraon", predicate: "uhmm", weigh: 1},
			],
	}
	
function reducerThis(state = initialStateThis, action) {
	if (action == null) return state
	var ActionTypes = d3ringsActions.ActionTypes
    switch (action.type) {

				case ActionTypes.SET_CHORDS_COLLECTION:	// setChordsCollection
					// console.log("SET_CHORDS_COLLECTION", action)
						var r = Object.assign({}, state)			
						if (state.areChordsFetched == false) {
							var chordsCollection = action.payload.chordsCollection
							var itemSpan = state.itemSpan
							if (chordsCollection.length) {
								var cc = chordsCollection.map(function(d, i) {
									return({
										prx: i,
										source: d.source,
										target: d.target,
										predicate: d.predicate,
										weigh: +d.weigh,
										valueOf: function value() {
											return this.weigh
										},
									})
								})
								if (itemSpan > cc.length) itemSpan = cc.length
								r = Object.assign({}, state, {
										chordsCollection: cc,
										areChordsFetched: true,
										itemSpan: itemSpan,
								})
							}
						}
						return r

		
				case ActionTypes.FETCH_CHORDS_COLLECTION:	// fetchChordsCollection
				
					var data = action.payload.chords
					var areChordsFetched = state.areChordsFetched
					var itemSpan = state.itemSpan
					
					var r = Object.assign({}, state)			
					if (areChordsFetched === false && typeof data !== 'undefined' && data.length) {
							var actionListAll = actionsListCreate(data)	// source, target
							var subjectByNameAll = subjectByNameCreate(data)	// source, target
							var subjectByIndexAll = subjectByIndexCreate(data)
							var actionsListAll = actionsListCreate(data)
							if (itemSpan > data.length) itemSpan = data.length
							r = Object.assign({}, state,
								{
									chordsCollection: data,
									areChordsFetched: true,
									actionListAll: actionListAll,
									subjectByNameAll: subjectByNameAll,
									subjectByIndexAll: subjectByIndexAll,
									actionsListAll: actionsListAll,
									itemSpan: itemSpan,
								})
					}
				 return r
						
				case ActionTypes.SET_CHORDS:	// setChords
					// console.log("SET_CHORDS")
						var vLow = state.itemsCursorLow
						var vHigh = state.itemsCursorHigh
						var itemSpan = state.itemSpan
						var mode = action.payload.currentMode
						var r = state
						if (mode == 'autoMode') {
							var chordsCollection = state.chordsCollection
							var numChords = chordsCollection.length
							if (vHigh >= vLow) vHigh = vHigh + 1	// add one to upper border
							if (vHigh > numChords) vHigh = 0		// upper border
							if (((vHigh - vLow) > itemSpan) 			// all spteps full
									|| (vHigh == -1) 									// infinitum with vLow active
									|| (vLow == -1) 									// get always from reset
									) vLow = vLow + 1									// increase lower border
							if (vLow > numChords) vLow = -1			// reset at end of cycle
								var chords = state.chordsCollection.slice(vLow, vHigh)
								var actionsSeries = actionsSeriesCreate(chords)	// source, target
								var subjectByName = subjectByNameCreate(chords)	// source, target
								var subjectByIndex = subjectByIndexCreate(chords)
								r = Object.assign({}, state, {
									chords: chords,
									itemsCursorLow: vLow,
									itemsCursorHigh: vHigh,
									actionsSeries: actionsSeries,
									subjectByName: subjectByName,
									subjectByIndex: subjectByIndex,
							})
						}
						return r

				case ActionTypes.WALK_UP_CHORDS:			// walkUpChords
						// console.log("WALK_UP_CHORDS", action)
					var keyEventsOnChords = state.keyEventsOnChords
						var altKeyCode = 18, ctrlKeyCode = 17 
						var vKeyCode = 86, dKeyCode = 68, fKeyCode = 70
						var leftArrow = 37, rightArrow = 39, leftArrow = 37, upArrow = 38, downArrow = 40
						var keys = action.payload.keys
						
						var vLow = state.itemsCursorLow
						var vHigh = state.itemsCursorHigh
						var itemSpan = action.payload.itemSpan
						var currentMode = action.payload.mode
						var r = state
						if (currentMode == 'walkMode') {
							if (keyEventsOnChords.upArrow !== null && keyEventsOnChords.upArrow !== action.payload.keyEvents.upArrow) {			// upArrow
										keyEventsOnChords.upArrow = action.payload.keyEvents.upArrow
										vLow = Math.max(0, --vLow)
										var chords = state.chordsCollection.slice(vLow, vHigh)
										var actionsSeries = actionsSeriesCreate(chords)	// source, target
										var subjectByName = subjectByNameCreate(chords)	// source, target
										var subjectByIndex = subjectByIndexCreate(chords)

										r = Object.assign({}, state, {
											chords: chords,
											itemsCursorLow: vLow,
											itemsCursorHigh: vHigh,
									actionsSeries: actionsSeries,
									subjectByName: subjectByName,
									subjectByIndex: subjectByIndex,
									})
								}
						}
						return r
						
				case ActionTypes.WALK_DOWN_CHORDS:			// walkDownChords
						// console.log("WALK_DOWN_CHORDS")
						var keyEventsOnChords = state.keyEventsOnChords
						var altKeyCode = 18, ctrlKeyCode = 17 
						var vKeyCode = 86, dKeyCode = 68, fKeyCode = 70
						var leftArrow = 37, rightArrow = 39, leftArrow = 37, upArrow = 38, downArrow = 40
						var keys = action.payload.keys
						
						var vLow = state.itemsCursorLow
						var vHigh = state.itemsCursorHigh
						var itemSpan = state.itemSpan
						var currentMode = action.payload.currentMode
						var r = Object.assign({}, state)
						if (currentMode == 'walkMode') {
							if (keyEventsOnChords.downArrow !== null && keyEventsOnChords.downArrow !== action.payload.keyEvents.downArrow) {			// downArrow
								keyEventsOnChords.downArrow = action.payload.keyEvents.downArrow
								r = Object.assign({}, state, keyEventsOnChords) 
								if ((vHigh - vLow)  >= itemSpan) ++vLow
								++vHigh
							if (vHigh > numChords) vHigh = 0		// upper border
									var chords = state.chordsCollection.slice(vLow, vHigh)
										var actionsSeries = actionsSeriesCreate(chords)	// source, target
										var subjectByName = subjectByNameCreate(chords)	// source, target
										var subjectByIndex = subjectByIndexCreate(chords)
									r = Object.assign({}, state, {
										chords: chords,
										itemsCursorLow: vLow,
										itemsCursorHigh: vHigh,
									actionsSeries: actionsSeries,
										subjectByName: subjectByName,
										subjectByIndex: subjectByIndex,
								})
							}
						}
						return r						
        default:
            return state
    }
		

}

exports.reducer = reducerThis;
}));
	
/* 																						*/
/* d3rings-renderer-chords.js   							*/
/* ref. https://bl.ocks.org/mbostock/1308257	*/
// http://circos.ca/guide/tables/
// http://bl.ocks.org/mbostock/4062006
/* 																						*/

	if (typeof require === "function") {
		var d3 = require('./d3.v4.0.0-rc.2.js')
	}
	
(function (global, factory) {
  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
  typeof define === 'function' && define.amd ? define(['exports'], factory) :
  (factory((global.d3ringsRendererChords = global.d3ringsRendererChords || {})));
}(this, function (exports) { 'use strict';

// _____________ context
var stateChords = {
	reducerChords: {}
}
var intransition = false
	
// _____________ renderer
	function renderer(payload) {
		var store = payload.store
		var actions = payload.actions
		var newState = store.getState()

		// return on transition
		if (intransition == true) return

		// return on same data
		if (JSON.stringify(stateChords.reducerChords.chords) === JSON.stringify(newState.reducerChords.chords)) {
			return 
		}
		
		var state = stateChords = newState
		var data = state.reducerChords.chords
		if (!data.length) return
		var lastDataItem = data.slice(-1)[0]
		
		// hide on wrong views
		var _opacity = 1
		var _currentView = state.reducerCourt.currentView
		if (_currentView !== 'chordsView') _opacity = 0
		
		var _width = state.reducerCourt.svgWidth
		var _height = state.reducerCourt.svgHeight
		var _svgid = state.reducerConfig.container
		var _currentView = state.reducerCourt.currentView
		var _fadeTime = state.reducerConfig.fadeFactor * state.reducerConfig.beatTime

		var subjectByName = state.reducerChords.subjectByName
		var subjectByIndex = state.reducerChords.subjectByIndex
		var actionsSeries = state.reducerChords.actionsSeries
		
		var outerRate = state.reducerChords.outerRate
		var outerDelta = state.reducerChords.outerDelta
		// 
		var _groupNameColorFrom = 'white'
		var _groupNameColorTo = 'white'
		var _groupNameColorOther = 'SaddleBrown'
				
		var _groupArcColorFrom = 'black'
		var _groupArcColorTo = 'darkgrey'

		var _groupToolTipColorOther = 'gray'
		var _groupBorderColor = "gray"
		
		var _chordColorLast = "gold"
		var _chordColorOther = 'yellow'
		
		var _predicateColorLast = "sienna"
		var _predicateColorOther = 'gold'
		var _predicateTextSize = 12
		
		
			// SVG
		var svgContainer = d3.select('body')
			.selectAll('svg')
				.data(['svg'], function(d) { return 'svg' })

		var newSvgContainer = svgContainer
				.enter()
				.append("svg")
					.attr("id", 'svg')

		svgContainer
				.style('width', _width)
				.style('height', _height)

// ---------------------------------------				
  // http://bl.ocks.org/brattonc/b1abb535227b2f722b51.
	
		function textWidth(N, s) {
				var dummyText = svgContainer.select(".dummyText")			
				if (dummyText.node() == null) {
						dummyText = svgContainer
								.append("text")
									.attr("id", "dummyText")
									.attr("class", "dummyText")
									.text(N)
								.style("font-size", function(d, i) { 
										return s
									})
				}
				
				var textHeight = dummyText.node().getBBox().height				
				var textWidth = dummyText.node().getBBox().width				
				
				svgContainer.select(".dummyText").remove()
			return textWidth
		}
	
// ---------------------------------------				

		// trasition
			var d3Transition = d3.transition()
				.duration(_fadeTime)
				.ease(d3.easeLinear)
	
	
// ---------------------------------------				
			var outerRadius = outerRate * Math.min(_width, _height),
					innerRadius = outerRadius - outerDelta;

			var format = d3.format(",.3r");
			// var formatValue = d3.formatPrefix(",.0", 1e3);

						
			// The arc generator, for the groups.
			var arc = d3.arc()
					.innerRadius(innerRadius)
					.outerRadius(outerRadius);

			var ribbon = d3.ribbon()
					.radius(innerRadius);

				var fill = d3.scaleLinear()
						.domain([0, 9])
						.range(["#F8EDD3", "#DB704D"])					

				var color = d3.scaleOrdinal()
						.domain(d3.range(4))
						.range(["#000000", "#FFDD89", "#957244", "#F26223"]);
		

// ---------------------------------------				MATRIX
				var matrix = []
				for (var i = 0; i < subjectByName.size(); i++) {
					matrix[i] = [];
					for (var j = 0; j < subjectByName.size(); j++) {
						matrix[i][j] = 0;
					}
				}		
				actionsSeries.forEach(function(d) {
							matrix[d.source.index][d.target.index] = d;
				})

				var chord = d3.chord()
						.padAngle(0.05)
					// .radius(innerRadius
					// .sortSubgroups(d3.descending)
					
				var chordsMatrix = chord(matrix, actionsSeries, subjectByName, subjectByIndex)
				
				// var chordsMatrix = chord(matrix)
						// .sortChords(d3.descending)
						// .padding(.07);

				var ribbon = d3.ribbon()
						.radius(innerRadius);			

// ---------------------------------------				
				// CHORDS GROUP
				var chordsGroup = svgContainer
						.selectAll('g.chords')		// items
						.data(['chords group'])

					var chordsGroupNew = chordsGroup.enter()
						.append("g")
						.classed("chords", true)	// items
						.attr("transform", "translate(" + _width / 2 + "," + _height / 2 + ")")
						.datum(chordsMatrix);
							
// ---------------------------------------				
					// GROUPS GROUP
					var groupsGroup = svgContainer
						.select('g.chords')		
						.selectAll('g.groups')
						.data(['groups group'])
							
					var groupsGroupNew = groupsGroup.enter()	
						.append("g")
							.classed("groups", true)

// ---------------------------------------	
					// GROUPS ELEMS		
				var groupElems = svgContainer
						.select("g.groups")
						.selectAll("g.group")
						.data(chordsMatrix.groups, function(d) { 
								return d.index })		

					// GROUPS ELEMS EXIT			
					groupElems.exit()
						.remove()

					// GROUPS ELEMS ENTER
				var	groupElemsEnter = groupElems.enter()
						.append("g")
							.classed("group", true)		
						
	// ---------------------------------------	
					// var gpath = svgContainer
							// .select("g.chords")
							// .selectAll('path')
							// .data(chordsMatrix.groups, function(d) { 
								// return d.index })
					// gpath.attr('id', function(d){return 'path22' + d.index})
					// gpath.attr('d', d3.arc()
							// .innerRadius(innerRadius/ 2)
							// .outerRadius(outerRadius/ 2)
					// )
					// gpath.enter().append('path')
						// .attr('d', d3.arc()
								// .innerRadius(innerRadius/ 2)
								// .outerRadius(outerRadius / 2)
					// )
					// gpath.exit().remove()
	
	
			 // GROUPS ARCS ENTER
					groupElemsEnter
						.append("path")
			        .style("fill", function(d) { 		// arcs - new by index in chart
								var r = fill(d.index)
								if (subjectByIndex[d.index].name == lastDataItem.source) r = _groupArcColorFrom
								if (subjectByIndex[d.index].name == lastDataItem.target) r = _groupArcColorTo
								return r
							})
							.style("stroke", _groupToolTipColorOther)
							.style("stroke-width", 1)
							.attr("id", function(d, i) { return "group" + d.index; })
							.attr("d", arc)
						.append("title")									// group toolTip
			        .text(function(d) { 
									return subjectByIndex[d.index].name + " predicates " + format(d.value) + "with weigh " + subjectByIndex[d.index].weigh; 
						})
					
				 // GROUPS ARCS UPDATE
					groupElems
						.select('path')
							.attr("d", arc)
							.style("fill", function(d) { 				// group arcs update
									var r =  fill(d.index)
									if (subjectByIndex[d.index].name == lastDataItem.source) r = _groupArcColorFrom
									if (subjectByIndex[d.index].name == lastDataItem.target) r = _groupArcColorTo
									return r
								})			
						.style("stroke", _groupBorderColor)
						.style("stroke-width", 1)
							
// ---------------------------------------	
					// GROUPS NAMES ENTER
					groupElemsEnter
						.append("text")
							.attr("x", 6)
							.attr("dy", 15)
							.append("textPath")
								.attr("xlink:href", function(d) {
									return "#group" + d.index; 
								})
								.text(function(d) { 
											var text = subjectByIndex[d.index].name		// group name enter
											return text
											})
								.style("stroke", function(d, i , a) { 
											var r = _groupNameColorOther
											if (subjectByIndex[d.index].name == lastDataItem.source) r = _groupNameColorFrom
											if (subjectByIndex[d.index].name == lastDataItem.target) r = _groupNameColorTo
											return r
									})
								.style("fill", function(d, i , a) { 
										var r = _groupNameColorOther
											if (subjectByIndex[d.index].name == lastDataItem.source) r = _groupNameColorFrom
											if (subjectByIndex[d.index].name == lastDataItem.target) r = _groupNameColorTo
											return r
								})
								.style("stroke-width", function(d, i , a) { 
											var r = 1
											return r
									})

							

				 // GROUPS NAMES UPDATE
					groupElems
						.select('textPath')
						.text(function(d) { return subjectByIndex[d.index].name })	// group name update
						.style("stroke", function(d, i , a) { 
								var r = _groupNameColorOther
								if (subjectByIndex[d.index].name == lastDataItem.source) r = _groupNameColorFrom
								if (subjectByIndex[d.index].name == lastDataItem.target) r = _groupNameColorTo
								return r
						})
						.style("fill", function(d, i , a) { 
							var r = _groupNameColorOther
								if (subjectByIndex[d.index].name == lastDataItem.source) r = _groupNameColorFrom
								if (subjectByIndex[d.index].name == lastDataItem.target) r = _groupNameColorTo
								return r
						})
							
				 // GROUPS ToolTips UPDATE
					groupElems
						.select('title')
						.text(function(d) { return subjectByIndex[d.index].name + " " + " predicates " + format(d.value) + "with weigh " + subjectByIndex[d.index].weigh; });

// ---------------------------------------				
					// RIBBONS GROUP
					var ribbonsGroup = svgContainer
						.select('g.ribbons')		
						.selectAll('g.ribbons')
						.data(['ribbons group'])
							
					var ribbonsGroupNew = ribbonsGroup.enter()	
						.append("g")
							.classed("ribbons", true)

// ---------------------------------------				
				// RIBBONS ELEMS
					var ribbonsElems = svgContainer
						.select("g.chords")
						.selectAll("g.ribbon")
						.data(chordsMatrix, function(d, i) { return d.prx })
																
				// RIBBONS ELEMS EXIT
					ribbonsElems.exit()
						.remove()
						
					// RIBBONS ELEMS ENTER
					var ribbonsElemsEnter = ribbonsElems.enter()
						.append("g")
							.classed("ribbon", true)
							
						ribbonsElemsEnter	
							.append("path")
							.attr("id", function(d, i) { return "ribbon" + d.source.value.prx })
							.attr("d", ribbon)
			        // .style("fill", function(d) { return fill(d.source.index) })			
				        .style("fill", function(d) { 		// ribbon path enter
										var r =  fill(d.source.value.source.index)
										if (d.source.value.source.name == lastDataItem.source) r = _chordColorLast
										return r
									})			
									.style("stroke", function(d) { return d3.rgb(fill(d.source.index)).darker(); })
							.append("title")
								.text(function(d) {
									return d.source.value.source.name + " to " + d.source.value.target.name + ":" + format(d.source.value)})
	
	
				 //  RIBBONS ELEMS UPDATE
					ribbonsElems
						.select("path")
							.attr("d", ribbon)	
									// .attr("d", function(d) {
										// return d
									// })
				        .style("fill", function(d) { 		// ribbon path update
										var r =  fill(d.source.value.source.index)
										return r
									})			

					// CHORDS TITLE
					ribbonsElems
						.select("title")
						.text(function(d) {		// source (index, subindex, startAngle, endAngle, value), target
							var r = d.source.value.source.name + " to " + d.source.value.target.name + ":" + format(d.source.value)
							return r})

// ---------------------------------------				
					// PREDICATES GROUP
					var predicatesGroup = svgContainer
						.select('g.chords')		
							.selectAll("g.predicates")
						.data(['predicates group'])

						var predicatesGroupNew = predicatesGroup.enter()	
						.append("g")
						.classed("predicates", true)	// items

// ---------------------------------------				
					// PREDICATES ELEMS		
					var predicatesElems = svgContainer
						.select("g.predicates")
						.selectAll("g.predicate")
								.data(chordsMatrix, function(d) { return	d.source.value.prx})

					// PREDICATES EXIT			
					predicatesElems.exit()
						.remove()
						
					// PREDICATES ENTER
					var predicatesElemsEnter = predicatesElems.enter()		// ^^^^^^^^^^^^^^ CONVERSATION
							.append("g")
							.attr("class","predicate")
							.append("text")
								.attr("x", 0)
								.attr("y", 0)
								.attr("class","predicate")	
										.text(function(d) {
											var r = d.source.value.predicate
											return r
										})
										.style("font-size", function(d, i) { 
												return _predicateTextSize
												})
									.attr("transform", function(d) {
											var rotate = ''
											var translate = ''
											var mirror = ''
											var transform = ''
											var d3Angle = (d.source.startAngle + d.source.endAngle) / 2
											var mathAngle = (2 * Math.PI) - (d3Angle - (Math.PI / 2))
											// var rotate = "rotate(" + (d3Angle * 180 / Math.PI - 90) + ") "
											// var translate = "translate(" + (innerRadius + 26) + ") "
											// var mirror = (d3Angle > Math.PI ? "rotate(180)" : "")
											var deltaX, deltaY, tx, ty
											tx = ty = deltaX = deltaY = 0
											if (d3Angle > 0/2 * Math.PI && d3Angle < 1/2 * Math.PI ) {	// NE
												deltaX = 0
												deltaY = 0
											} else if (d3Angle > 1/2 * Math.PI && d3Angle < 2/2 * Math.PI ) {	// SE
												deltaX = 0
												deltaY = textWidth("N", _predicateTextSize)
											} else if (d3Angle > 2/2 * Math.PI && d3Angle < 3/2 * Math.PI ) {	// SW
												deltaX = - textWidth(d.source.value.predicate, _predicateTextSize) - textWidth("N", _predicateTextSize) 
												deltaY = textWidth("N", _predicateTextSize)
											} else if (d3Angle > 3/2 * Math.PI && d3Angle < 4/2 * Math.PI) {	// NW
												deltaX =  - textWidth(d.source.value.predicate, _predicateTextSize) - textWidth("N", _predicateTextSize)
												deltaY = 0
											}
											tx = outerRadius * Math.cos(mathAngle)
											ty = - outerRadius * Math.sin(mathAngle) // inverse screen metrix
											translate = "translate(" + (tx + deltaX) + "," + (ty + deltaY) + ") "
											transform = rotate + translate + mirror		// ^^^^^^^^^^^^^^^
											return transform
										})
									.style("fill", function(d) { 
											var r = (d.source.value.prx == lastDataItem.prx) ? _predicateColorLast : _predicateColorOther
											return r
										})

					// PREDICATES UPDATE
					predicatesElems
							.select("text.predicate")
										.style("fill", function(d, i , a) { 
													var r = _predicateColorOther
														return r
											})
											.style("font-size", function(d, i) { 
														return 0
														})
											.attr("transform", function(d) {
													var rotate = ''
														var translate = ''
														var mirror = ''
														var transform = ''
														var d3Angle = (d.target.startAngle + d.target.endAngle) / 2
														var mathAngle = (2 * Math.PI) - (d3Angle - (Math.PI / 2))
														var tx = outerRadius * Math.cos(mathAngle) 
														var ty = - outerRadius * Math.sin(mathAngle) // inverse screen metrix
														translate = "translate(" + (tx) + "," + (ty) + ") "
														transform = rotate + translate + mirror		// ^^^^^^^^^^^^^^^
														return transform
												})
											.style("opacity", function(d) {
													return 0
											})


	}
	
	exports.renderer = renderer;
}))									
									

/* 																	*/
/* d3rings-actions.js   						*/
/* 																	*/

if (typeof require === "function") {
	var d3ringsActionsCourt = require('./d3rings-actions-court.js')
	var d3ringsActionsDebug = require('./d3rings-actions-debug.js')
	var d3ringsActionsLanes = require('./d3rings-actions-lanes.js')
	var d3ringsActionsParticles = require('./d3rings-actions-particles.js')
	var d3ringsActionsWhirls = require('./d3rings-actions-whirls.js')
	var d3ringsActionsChords = require('./d3rings-actions-chords.js')
}	


(function (global, factory) {
  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
  typeof define === 'function' && define.amd ? define(['exports'], factory) :
  (factory((global.d3ringsActions = global.d3ringsActions || {})));
}(this, function (exports) { 'use strict';


// ____________________ merge_objects
function merge_objects(ctt1,ctt2){	
    var i, obj = {}
    for (i = 0; i < arguments.length; i++) {
        Object.assign(obj, arguments[i])
    }
    return obj;
}

var ActionTypes = merge_objects(
		d3ringsActionsCourt.ActionTypes,
		d3ringsActionsDebug.ActionTypes,
		d3ringsActionsLanes.ActionTypes,
		d3ringsActionsParticles.ActionTypes,
		d3ringsActionsWhirls.ActionTypes,
		d3ringsActionsChords.ActionTypes
	)
		
var ActionCreators = merge_objects(
		d3ringsActionsCourt.ActionCreators,
		d3ringsActionsDebug.ActionCreators, 
		d3ringsActionsLanes.ActionCreators, 
		d3ringsActionsParticles.ActionCreators,
		d3ringsActionsWhirls.ActionCreators,
		d3ringsActionsChords.ActionCreators
	)

exports.ActionTypes = ActionTypes;
exports.ActionCreators = ActionCreators;
}));

/* 																		*/
/*    d3rings-reducer-config.js      */
/* 																		*/

if (typeof require === "function") {
	var d3 = require('./d3.v4.0.0-rc.2.js')
	var d3ringsActions = require('./d3rings-actions.js')
}
	
(function (global, factory) {
  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
  typeof define === 'function' && define.amd ? define(['exports'], factory) :
  (factory((global.d3ringsReducerConfig = global.d3ringsReducerConfig || {})));
}(this, function (exports) { 'use strict';


// _____________ CONFIG
var initialStateConfig = {
			modes: {autoMode: 'autoMode', walkMode: 'walkMode'},
			modeLabels: {autoMode: 'auto', walkMode: 'walk'},
			views: ['chordsView', 'lanesView', 'ringsView'],
			gravity: 0.5,
			randNormal: d3.randomNormal(1.3, 2),
			randNormal2: d3.randomNormal(0.5, 1.8),
			containerElem: '#container',
			containerId: 'svgid',
			tickspan: 60,			
			beatTime: 500,
			fadeFactor: 3,	// times beat - fade items
			periodFactor: 4, // times beat - add items
			ringDefaultRadio: 6.33,
			vstep: 50,
			itemSpan: 6,
			itemProps: ['to', 'from'],
			itemVal: 'msg',
			recordsCollection_000: [
				 {id: "1", from: "customer", to: "barrista1", msg: "place order"},
				 {id: "2", from: "barrista1", to: "register", msg: "enter order"},
				 {id: "3", from: "register", to: "barrista1", msg: "give total"},
				 {id: "4", from: "barrista1", to: "barrista1", msg: "get cup making sure that it is fine for purpose"},
				 {id: "5", from: "barrista1", to: "barrista2", msg: "give cup"},
				 {id: "6", from: "barrista1", to: "customer", msg: "request money"},
				 {id: "7", from: "customer", to: "barrista1", msg: "pay order"},
				 {id: "8", from: "barrista2", to: "barrista2", msg: "get chai mix"},
				 {id: "9", from: "barrista2", to: "barrista2", msg: "add flavor"},
				 {id: "10", from: "barrista2", to: "barrista2", msg: "add milk"},
				 {id: "11", from: "barrista2", to: "barrista2", msg: "add ice"},
				 {id: "12", from: "barrista2", to: "barrista2", msg: "swirl"},
				 {id: "13", from: "barrista2", to: "customer", msg: "give tasty beverage"},
				 {id: "14", from: "customer", to: "tasty beverage", msg: "sip"},
				 {id: "15", from: "tasty beverage", to: "customer", msg: "burn"},
				 {id: "16", from: "customer", to: "customer", msg: "cry"},
				 {id: "17", from: "customer", to: "manager", msg: "complain"},
				 {id: "18", from: "manager", to: "barrista1", msg: "fire"},
				 {id: "19", from: "manager", to: "barrista2", msg: "fire"},
			],
			recordsCollection: [
				 {id: "1", from: "app", to: "store", msg: "create store"},
				 {id: "2", from: "store", to: "store", msg: "subscribe lanes listener"},
				 {id: "3", from: "store", to: "store", msg: "subscribe particles listener"},
				 {id: "4", from: "app", to: "app", msg: "start kbd controller"},
				 {id: "5", from: "app", to: "app", msg: "start mouse controller"},
				 {id: "6", from: "ticker", to: "ticker", msg: "subscribe tickParticles"},
				 {id: "7", from: "ticker", to: "ticker", msg: "subscribe setRecords"},
				 {id: "8", from: "ticker", to: "ticker", msg: "start auto"},
				 {id: "9", from: "store", to: "reducer", msg: "dispatch setRecords action"},
				 {id: "10", from: "reducer", to: "reducer", msg: "apply action logic"},
				 {id: "11", from: "reducer", to: "store", msg: "return new state"},
				 {id: "12", from: "ticker", to: "ticker", msg: "run listeners"},
				 {id: "13", from: "renderer", to: "UI", msg: "render lanes"},
				 {id: "14", from: "UI", to: "app", msg: "trigger left arrow event"},
				 {id: "15", from: "store", to: "reducer", msg: "dispatch setMode action"},
				 {id: "16", from: "reducer", to: "reducer", msg: "run action"},
				 {id: "17", from: "reducer", to: "store", msg: "return new state"},
				 {id: "18", from: "ticker", to: "ticker", msg: "run listeners"},
				 {id: "19", from: "UI", to: "app", msg: "send down arrow event"},
				 {id: "20", from: "store", to: "reducer", msg: "dispatch setRecods action"},
				 {id: "21", from: "reducer", to: "reducer", msg: "run action and get record"},
				 {id: "22", from: "reducer", to: "reducer", msg: "return new set"},
				 {id: "23", from: "ticker", to: "ticker", msg: "run listeners"},
				 {id: "24", from: "renderer", to: "UI", msg: "render lanes"},
				 {id: "25", from: "UI", to: "app", msg: "send right arrow event"},
				 {id: "26", from: "store", to: "reducer", msg: "dispatch setMode action"},
				 {id: "27", from: "reducer", to: "reducer", msg: "run action"},
				 {id: "28", from: "reducer", to: "reducer", msg: "return new mode auto"},
				 {id: "29", from: "ticker", to: "ticker", msg: "run listeners with new state"},
				 {id: "30", from: "renderer", to: "UI", msg: "render auto lanes"},
				 {id: "31", from: "store", to: "reducer", msg: "dispatch createParticles action"},
				 {id: "32", from: "reducer", to: "reducer", msg: "run action"},
				 {id: "33", from: "reducer", to: "store", msg: "return new state with particles"},
				 {id: "34", from: "ticker", to: "ticker", msg: "run particles listeners"},
				 {id: "35", from: "renderer", to: "UI", msg: "render particles"},
			],			
}
function reducerConfig(state = initialStateConfig, action) {
	if (action == null) return state
	var ActionTypes = d3ringsActions.ActionTypes
    switch (action.type) {
					default:
            return state;
	}
}

exports.reducerConfig = reducerConfig;
}));

/* 														*/
/*    d3rings-reducer.js      */
/* 														*/

if (typeof require === "function") {
	var d3ringsReducerConfig = 		require('./d3rings-reducer-config.js')
	var d3ringsReducerCourt = 		require('./d3rings-reducer-court.js')
	var d3ringsReducerDebug = 		require('./d3rings-reducer-debug.js')
	var d3ringsReducerLanes = 		require('./d3rings-reducer-lanes.js')
	var d3ringsReducerParticles = require('./d3rings-reducer-particles.js')
	var d3ringsReducerWhirls = 		require('./d3rings-reducer-whirls.js')
	var d3ringsReducerChords = 		require('./d3rings-reducer-chords.js')
}
	
(function (global, factory) {
  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
  typeof define === 'function' && define.amd ? define(['exports'], factory) :
  (factory((global.d3ringsReducer = global.d3ringsReducer || {})));
}(this, function (exports) { 'use strict';


// _____________ adapted from redux combineReducers	
function combineReducers(reducers) {
  var reducerKeys = Object.keys(reducers)
  var finalReducers = {}
  for (var i = 0; i < reducerKeys.length; i++) {
    var key = reducerKeys[i]
    if (typeof reducers[key] === 'function') {
      finalReducers[key] = reducers[key]
    }
  }
  var finalReducerKeys = Object.keys(finalReducers)

  return function combination(state = {}, action) {
    var hasChanged = false
    var nextState = {}
    for (var i = 0; i < finalReducerKeys.length; i++) {
      var key = finalReducerKeys[i]
      var reducer = finalReducers[key]
      var previousStateForKey = state[key]
      var nextStateForKey = reducer(previousStateForKey, action)
      if (typeof nextStateForKey === 'undefined') {
        var errorMessage = getUndefinedStateErrorMessage(key, action)
        throw new Error(errorMessage)
      }
      nextState[key] = nextStateForKey
      hasChanged = hasChanged || nextStateForKey !== previousStateForKey
    }
    return hasChanged ? nextState : state
  }
}

// _____________ combined reducer
var reducer = combineReducers({
		reducerConfig: d3ringsReducerConfig.reducerConfig,
		reducerCourt: d3ringsReducerCourt.reducerCourt,
		reducerDebug: d3ringsReducerDebug.reducerDebug,
		reducerLanes: d3ringsReducerLanes.reducerLanes,
		reducerParticles: d3ringsReducerParticles.reducerParticles,
		reducerWhirls: d3ringsReducerWhirls.reducer,
		reducerChords: d3ringsReducerChords.reducer,
})

var r = reducer()

exports.reducer = reducer;
}));

/* 														*/
/*    d3rings-store.js        */
/* 														*/



if (typeof require === "function") {
	var d3ringsReducer = require('./d3rings-reducer.js')
	var d3ringsStore = require('./d3rings-store.js')
	var d3ringsActions = require('./d3rings-actions.js')
	var d3ringsControls = require('./d3rings-controls.js')
}
	

/* adapted from REDUX http://redux.js.org/		*/
(function (global, factory) {
  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
  typeof define === 'function' && define.amd ? define(['exports'], factory) :
  (factory((global.d3ringsStore = global.d3ringsStore || {})));
}(this, function (exports) { 'use strict';

		var createStore = function createStore(reducer, initialState) {
		var currentReducer = reducer
		var currentState = initialState
		var currentListeners = []
		var nextListeners = currentListeners
		var isDispatching = false

		// ______________________________ ensureCanMutateNextListeners
		function ensureCanMutateNextListeners() {
			if (nextListeners === currentListeners) {
				nextListeners = currentListeners.slice()
			}
		}
		
		// ______________________________ getState
		function getState() {
			return currentState
		}

		// ______________________________ redux compose
		function compose(...funcs) {
			if (funcs.length === 0) {
				return arg => arg
			} else {
				const last = funcs[funcs.length - 1]
				const rest = funcs.slice(0, -1)
				return (...args) => rest.reduceRight((composed, f) => f(composed), last(...args))
			}
		}

		// ______________________________ subscribe
		function subscribe(listener) {
		
			if (typeof listener !== 'function') {
				throw new Error('Expected listener to be a function.')
			}

			var isSubscribed = true

			ensureCanMutateNextListeners()
			nextListeners.push(listener)

			return function unsubscribe() {
				if (!isSubscribed) {
					return
				}

				isSubscribed = false

				ensureCanMutateNextListeners()
				var index = nextListeners.indexOf(listener)
				nextListeners.splice(index, 1)
			}
		}

		// ______________________________ dispatch
		function dispatch(action) {
		
			if (typeof action.type === 'undefined') {
				throw new Error(
					'Actions may not have an undefined "type" property. ' +
					'Have you misspelled a constant?'
				)
			}

			if (isDispatching) {
				throw new Error('Reducers may not dispatch actions.')
			}

			try {
				isDispatching = true
				currentState = currentReducer(currentState, action)
			} finally {
				isDispatching = false
			}

			var listeners = currentListeners = nextListeners
			for (var i = 0; i < listeners.length; i++) {
				listeners[i]()
			}

			return action
		}
		
		// ______________________________ return		
		return {
			compose: compose,
			dispatch: dispatch,
			subscribe: subscribe,
			getState: getState,
		}
	}
	
			/* store */
		var store = createStore(d3ringsReducer.reducer, d3ringsReducer.reducer())

		exports.createStore = createStore
		exports.store = store
}));

/* 																				*/
/*    		 d3rings-listeners-court.js     */
/* 																				*/

if (typeof require === "function") {
	var d3 = require('./d3.v4.0.0-rc.2.js')

	var d3ringsRendererCourt = require('./d3rings-renderer-court.js')
	var d3ringsRendererLanes = require('./d3rings-renderer-lanes.js')
	var d3ringsRendererParticles = require('./d3rings-renderer-particles.js')
	var d3ringsRendererWhirls = require('./d3rings-renderer-whirls.js')
	var d3ringsRendererChords = require('./d3rings-renderer-chords.js')

	var d3ringsReducer = require('./d3rings-reducer.js')
	var d3ringsStore = require('./d3rings-store.js')
	var d3ringsActions = require('./d3rings-actions.js')
	var d3ringsControls = require('./d3rings-controls.js')
	
}	

(function (global, factory) {
  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
  typeof define === 'function' && define.amd ? define(['exports'], factory) :
  (factory((global.d3ringsListenersCourt = global.d3ringsListenersCourt || {})));
}(this, function (exports) { 'use strict';

		/* actions */
		var actions = d3ringsActions.ActionCreators

		/* store */
		// var store = d3ringsStore.createStore(d3ringsReducer.reducer, d3ringsReducer.reducer())
		var store = d3ringsStore.store

			/* payloads renderers */
			var logicAndData_Payload = function () { return {
				store: store,
				actions: actions
			}}
			
	
		/* payloads court */
			var keyDown_Payload = function (e) { 
					return e
			}
			
			var mouseMove_Payload = function (svg) { 
				return (svg)
			}
			
			var keyDownKeys_Payload = function () { return {
						keys: store.getState().reducerCourt.keys,
						views: store.getState().reducerConfig.views,
						currentView: store.getState().reducerCourt.currentView,
			}}
		

		/* launchers court */
		var processKeybKeys_court_Listener = store.compose(
			store.dispatch,
			actions.processKeybKeys,
			keyDown_Payload
		)	

	var keyDown_court_Listener = store.compose(
			store.dispatch,
			actions.setKeybKey,
			keyDown_Payload
		)	

		var releaseKeybKey_court_Listener = store.compose(
			store.dispatch,
			actions.releaseKeybKey
		)	

		var updateMousePos_court_Listener = store.compose(
			store.dispatch,
			actions.updateMousePos,
			mouseMove_Payload
		)	

		var keyDownAltV_court_Listener = store.compose(
			store.dispatch,
			actions.setView,
			keyDownKeys_Payload
		)	
		var keyDownAltD_court_Listener = store.compose(
			store.dispatch,
			actions.switchDebugMode,
			keyDownKeys_Payload
		)	
		var keyLeftArrow_court_Listener = store.compose(
			store.dispatch,
			actions.setMode,
			keyDownKeys_Payload
		)	
		var keyRightArrow_court_Listener = store.compose(
			store.dispatch,
			actions.setMode,
			keyDownKeys_Payload
		)	
		var keyUpArrow_court_Listener = store.compose(
			store.dispatch,
			actions.setMode,
			keyDownKeys_Payload
		)	
		var keyDownArrow_court_Listener = store.compose(
			store.dispatch,
			actions.setMode,
			keyDownKeys_Payload
		)	

		var keyLeftArrowCtr_court_Listener = store.compose(
			store.dispatch,
			actions.resizeWidth,
			keyDownKeys_Payload
		)	
		var keyRightArrowCtrl_court_Listener = store.compose(
			store.dispatch,
			actions.resizeHeight,
			keyDownKeys_Payload
		)	
		var keyUpArrowCtrl_court_Listener = store.compose(
			store.dispatch,
			actions.resizeWidth,
			keyDownKeys_Payload
		)	
		var keyDownArrowCtrl_court_Listener = store.compose(
			store.dispatch,
			actions.resizeHeight,
			keyDownKeys_Payload
		)	
		
		// renderers
		var renderer_court_Listener = store.compose(
			d3ringsRendererCourt.renderer,
			logicAndData_Payload
		)	
		
		/* launchers */
		var mouseDown_Launcher = 	d3ringsControls.mouseDownControl(logicAndData_Payload()).start(d3.select('svg'))
		var touchStart_Launcher = d3ringsControls.touchStartControl(logicAndData_Payload()).start(d3.select('svg'))
		var mouseMove_Launcher = 	d3ringsControls.mouseMoveControl(logicAndData_Payload()).start(d3.select('svg'))
		var touchMove_Launcher = 	d3ringsControls.touchMoveControl(logicAndData_Payload()).start(d3.select('svg'))
		var mouseUp_Launcher =		d3ringsControls.mouseUpControl(logicAndData_Payload()).start(d3.select('svg'))
		var touchEnd_Launcher = 	d3ringsControls.touchEndControl(logicAndData_Payload()).start(d3.select('svg'))
		var mouseLeave_Launcher = d3ringsControls.mouseLeaveControl(logicAndData_Payload()).start(d3.select('svg'))
		var mouseEnter_Launcher = d3ringsControls.mouseEnterControl(logicAndData_Payload()).start(d3.select('svg'))
		var ticker_Launcher = 		d3ringsControls.tickControls(logicAndData_Payload()).start()
		var d3timer_Launcher = 			d3ringsControls.timeControls(logicAndData_Payload()).start()
		var stepper_Launcher =		d3ringsControls.stepControls(logicAndData_Payload()).start()
		var keyDown_Launcher = 		d3ringsControls.keyDownControl(logicAndData_Payload()).start()
		var keyRelease_Launcher = d3ringsControls.keyReleaseControl(logicAndData_Payload()).start()
		var keyRelease_Launcher = d3ringsControls.keyReleaseControl(logicAndData_Payload()).start()

		/* listeners */
			
									 store.subscribe(renderer_court_Listener)
		 keyRelease_Launcher.subscribe(releaseKeybKey_court_Listener)
				keyDown_Launcher.subscribe(keyDown_court_Listener)
				keyDown_Launcher.subscribe(keyDownAltV_court_Listener)
				keyDown_Launcher.subscribe(keyDownAltD_court_Listener)
				keyDown_Launcher.subscribe(keyLeftArrow_court_Listener)
				keyDown_Launcher.subscribe(keyRightArrow_court_Listener)
				keyDown_Launcher.subscribe(keyUpArrow_court_Listener)
				keyDown_Launcher.subscribe(keyDownArrow_court_Listener)
				keyDown_Launcher.subscribe(keyLeftArrowCtr_court_Listener)
				keyDown_Launcher.subscribe(keyRightArrowCtrl_court_Listener)
				keyDown_Launcher.subscribe(keyUpArrowCtrl_court_Listener)
				keyDown_Launcher.subscribe(keyDownArrowCtrl_court_Listener)
			mouseMove_Launcher.subscribe(updateMousePos_court_Listener)
			mouseDown_Launcher.subscribe(updateMousePos_court_Listener)
				mouseUp_Launcher.subscribe(updateMousePos_court_Listener)
		 mouseLeave_Launcher.subscribe(updateMousePos_court_Listener)
		 mouseEnter_Launcher.subscribe(updateMousePos_court_Listener)
		 touchStart_Launcher.subscribe(updateMousePos_court_Listener)
			touchMove_Launcher.subscribe(updateMousePos_court_Listener)
			 touchEnd_Launcher.subscribe(updateMousePos_court_Listener)
				 ticker_Launcher.subscribe(processKeybKeys_court_Listener)
			 
}));
/* 																				*/
/*    		 d3rings-listeners-debug.js     */
/* 																				*/

if (typeof require === "function") {
	var d3 = require('./d3.v4.0.0-rc.2.js')

	var d3ringsRendererCourt = require('./d3rings-renderer-court.js')
	var d3ringsRendererLanes = require('./d3rings-renderer-lanes.js')
	var d3ringsRendererParticles = require('./d3rings-renderer-particles.js')
	var d3ringsRendererWhirls = require('./d3rings-renderer-whirls.js')
	var d3ringsRendererChords = require('./d3rings-renderer-chords.js')

	var d3ringsReducer = require('./d3rings-reducer.js')
	var d3ringsStore = require('./d3rings-store.js')
	var d3ringsActions = require('./d3rings-actions.js')
	var d3ringsControls = require('./d3rings-controls.js')
}	
		/* actions */
		var actions = d3ringsActions.ActionCreators

		/* store */
		var store = d3ringsStore.store

			/* payloads renderers */
			var logicAndData_Payload = function () { return {
				store: store,
				actions: actions
			}}
			


		/* launchers debug */
		var setFps_debug_Listener = store.compose(
			store.dispatch,
			actions.setFps
		)

		/* launchers */
		var mouseDown_Launcher = 	d3ringsControls.mouseDownControl(logicAndData_Payload()).start(d3.select('svg'))
		var touchStart_Launcher = d3ringsControls.touchStartControl(logicAndData_Payload()).start(d3.select('svg'))
		var mouseMove_Launcher = 	d3ringsControls.mouseMoveControl(logicAndData_Payload()).start(d3.select('svg'))
		var touchMove_Launcher = 	d3ringsControls.touchMoveControl(logicAndData_Payload()).start(d3.select('svg'))
		var mouseUp_Launcher =		d3ringsControls.mouseUpControl(logicAndData_Payload()).start(d3.select('svg'))
		var touchEnd_Launcher = 	d3ringsControls.touchEndControl(logicAndData_Payload()).start(d3.select('svg'))
		var mouseLeave_Launcher = d3ringsControls.mouseLeaveControl(logicAndData_Payload()).start(d3.select('svg'))
		var mouseEnter_Launcher = d3ringsControls.mouseEnterControl(logicAndData_Payload()).start(d3.select('svg'))
		var ticker_Launcher = 		d3ringsControls.tickControls(logicAndData_Payload()).start()
		var d3timer_Launcher = 			d3ringsControls.timeControls(logicAndData_Payload()).start()
		var stepper_Launcher =		d3ringsControls.stepControls(logicAndData_Payload()).start()
		var keyDown_Launcher = 		d3ringsControls.keyDownControl(logicAndData_Payload()).start()
		var keyRelease_Launcher = d3ringsControls.keyReleaseControl(logicAndData_Payload()).start()
		var keyRelease_Launcher = d3ringsControls.keyReleaseControl(logicAndData_Payload()).start()
		
		/* launchers */
		var mouseDown_Launcher = 	d3ringsControls.mouseDownControl(logicAndData_Payload()).start(d3.select('svg'))
		var touchStart_Launcher = d3ringsControls.touchStartControl(logicAndData_Payload()).start(d3.select('svg'))
		var mouseMove_Launcher = 	d3ringsControls.mouseMoveControl(logicAndData_Payload()).start(d3.select('svg'))
		var touchMove_Launcher = 	d3ringsControls.touchMoveControl(logicAndData_Payload()).start(d3.select('svg'))
		var mouseUp_Launcher =		d3ringsControls.mouseUpControl(logicAndData_Payload()).start(d3.select('svg'))
		var touchEnd_Launcher = 	d3ringsControls.touchEndControl(logicAndData_Payload()).start(d3.select('svg'))
		var mouseLeave_Launcher = d3ringsControls.mouseLeaveControl(logicAndData_Payload()).start(d3.select('svg'))
		var mouseEnter_Launcher = d3ringsControls.mouseEnterControl(logicAndData_Payload()).start(d3.select('svg'))
		var ticker_Launcher = 		d3ringsControls.tickControls(logicAndData_Payload()).start()
		var d3timer_Launcher = 			d3ringsControls.timeControls(logicAndData_Payload()).start()
		var stepper_Launcher =		d3ringsControls.stepControls(logicAndData_Payload()).start()
		var keyDown_Launcher = 		d3ringsControls.keyDownControl(logicAndData_Payload()).start()
		var keyRelease_Launcher = d3ringsControls.keyReleaseControl(logicAndData_Payload()).start()
		var keyRelease_Launcher = d3ringsControls.keyReleaseControl(logicAndData_Payload()).start()
		
		/* listeners */
				 d3timer_Launcher.subscribe(setFps_debug_Listener)


/* 																				*/
/*    		 d3rings-listeners-lanes.js     */
/* 																				*/

if (typeof require === "function") {
	var d3 = require('./d3.v4.0.0-rc.2.js')

	var d3ringsRendererCourt = require('./d3rings-renderer-court.js')
	var d3ringsRendererLanes = require('./d3rings-renderer-lanes.js')
	var d3ringsRendererParticles = require('./d3rings-renderer-particles.js')
	var d3ringsRendererWhirls = require('./d3rings-renderer-whirls.js')
	var d3ringsRendererChords = require('./d3rings-renderer-chords.js')

	var d3ringsReducer = require('./d3rings-reducer.js')
	var d3ringsStore = require('./d3rings-store.js')
	var d3ringsActions = require('./d3rings-actions.js')
	var d3ringsControls = require('./d3rings-controls.js')
	
}	
		/* actions */
		var actions = d3ringsActions.ActionCreators

		/* store */
		// var store = d3ringsStore.createStore(d3ringsReducer.reducer, d3ringsReducer.reducer())
		var store = d3ringsStore.store


			/* payloads renderers */
			var logicAndData_Payload = function () { return {
				store: store,
				actions: actions
			}}
			
			/* payloads lanes */
			var keyDownKeysLanes_Payload = function () { return {
				keyEvents: store.getState().reducerCourt.keyEvents,
				currentMode: store.getState().reducerCourt.currentMode,
				itemSpan: store.getState().reducerConfig.itemSpan,
			}}

			var keyUpKeysLanes_Payload = function () { return {
				keys: store.getState().reducerCourt.keys,
				currentMode: store.getState().reducerCourt.currentMode,
				itemSpan: store.getState().reducerConfig.itemSpan,
			}}

			var setRecords_Payload = function () { return {
				itemSpan: store.getState().reducerConfig.itemSpan,
				currentMode: store.getState().reducerCourt.currentMode
			}}
				
			var setRecordsCollection_Payload = function () { return {
				recordsCollection: store.getState().reducerConfig.recordsCollection
			}}


		/* launchers lanes */
		var keyDownArrow_lanes_Listener = store.compose(
			store.dispatch,
			actions.walkDownRecords,
			keyDownKeysLanes_Payload
		)	

		var keyUpArrow_lanes_Listener = store.compose(
			store.dispatch,
			actions.walkUpRecords,
			keyUpKeysLanes_Payload
		)	
		
		var setRecordsCollection_lanes_Listener = store.compose(
			store.dispatch,
			actions.setRecordsCollection,
			setRecordsCollection_Payload
		)
	
		var setRecords_lanes_Listener = store.compose(
			store.dispatch,
			actions.setRecords,
			setRecords_Payload
		)
	

		// renderers
		var renderer_lanes_Listener = store.compose(
			d3ringsRendererLanes.renderer,
			logicAndData_Payload
		)	

		/* launchers */
		var mouseDown_Launcher = 	d3ringsControls.mouseDownControl(logicAndData_Payload()).start(d3.select('svg'))
		var touchStart_Launcher = d3ringsControls.touchStartControl(logicAndData_Payload()).start(d3.select('svg'))
		var mouseMove_Launcher = 	d3ringsControls.mouseMoveControl(logicAndData_Payload()).start(d3.select('svg'))
		var touchMove_Launcher = 	d3ringsControls.touchMoveControl(logicAndData_Payload()).start(d3.select('svg'))
		var mouseUp_Launcher =		d3ringsControls.mouseUpControl(logicAndData_Payload()).start(d3.select('svg'))
		var touchEnd_Launcher = 	d3ringsControls.touchEndControl(logicAndData_Payload()).start(d3.select('svg'))
		var mouseLeave_Launcher = d3ringsControls.mouseLeaveControl(logicAndData_Payload()).start(d3.select('svg'))
		var mouseEnter_Launcher = d3ringsControls.mouseEnterControl(logicAndData_Payload()).start(d3.select('svg'))
		var ticker_Launcher = 		d3ringsControls.tickControls(logicAndData_Payload()).start()
		var d3timer_Launcher = 			d3ringsControls.timeControls(logicAndData_Payload()).start()
		var stepper_Launcher =		d3ringsControls.stepControls(logicAndData_Payload()).start()
		var keyDown_Launcher = 		d3ringsControls.keyDownControl(logicAndData_Payload()).start()
		var keyRelease_Launcher = d3ringsControls.keyReleaseControl(logicAndData_Payload()).start()
		var keyRelease_Launcher = d3ringsControls.keyReleaseControl(logicAndData_Payload()).start()

		/* listeners */
				 
									 store.subscribe(renderer_lanes_Listener)
				stepper_Launcher.subscribe(setRecordsCollection_lanes_Listener)
				stepper_Launcher.subscribe(setRecords_lanes_Listener)
				stepper_Launcher.subscribe(keyUpArrow_lanes_Listener)
				stepper_Launcher.subscribe(keyDownArrow_lanes_Listener)

/* 																					*/
/*    		 d3rings-listeners-particles.js   */
/* 																					*/

if (typeof require === "function") {
	var d3 = require('./d3.v4.0.0-rc.2.js')

	var d3ringsRendererCourt = require('./d3rings-renderer-court.js')
	var d3ringsRendererLanes = require('./d3rings-renderer-lanes.js')
	var d3ringsRendererParticles = require('./d3rings-renderer-particles.js')
	var d3ringsRendererWhirls = require('./d3rings-renderer-whirls.js')
	var d3ringsRendererChords = require('./d3rings-renderer-chords.js')

	var d3ringsReducer = require('./d3rings-reducer.js')
	var d3ringsStore = require('./d3rings-store.js')
	var d3ringsActions = require('./d3rings-actions.js')
	var d3ringsControls = require('./d3rings-controls.js')
	
}	
		/* actions */
		var actions = d3ringsActions.ActionCreators

		/* store */
		// var store = d3ringsStore.createStore(d3ringsReducer.reducer, d3ringsReducer.reducer())
		var store = d3ringsStore.store

			/* payloads renderers */
			var logicAndData_Payload = function () { return {
				store: store,
				actions: actions
			}}
			
			/* payloads particles */
			var createParticles_Payload = function () { return {
					particlesPerTick: store.getState().reducerParticles.particlesPerTick,
					x: 								store.getState().reducerCourt.mousePos[0], 
					y: 								store.getState().reducerCourt.mousePos[1],
					xInit: 						store.getState().reducerCourt.leftBorder,
					xEnd: 						store.getState().reducerCourt.svgWidth, 
					randNormal: 			store.getState().reducerConfig.randNormal,
					randNormal2: 			store.getState().reducerConfig.randNormal2,
					lanes: 						store.getState().reducerLanes.lanes,
					particlesGenerating: 			store.getState().reducerParticles.particlesGenerating,
					currentView: 			store.getState().reducerCourt.currentView,
			}}

			var introduceParticles_Payload = function () { return {
					particlesPerTick: store.getState().reducerParticles.particlesPerTick,
					x: 								store.getState().reducerCourt.mousePos[0], 
					y: 								store.getState().reducerCourt.mousePos[1],
					xInit: 						store.getState().reducerCourt.leftBorder,
					xEnd: 						store.getState().reducerCourt.svgWidth, 
					randNormal: 			store.getState().reducerConfig.randNormal,
					randNormal2: 			store.getState().reducerConfig.randNormal2,
					lanes: 						store.getState().reducerLanes.lanes,
					particlesGenerating: 			store.getState().reducerParticles.particlesGenerating,
					currentView: 			store.getState().reducerCourt.currentView,
			}}

			
			var tickParticles_Payload = function () { return {
				width: store.getState().reducerCourt.svgWidth,
				height: store.getState().reducerCourt.svgHeight,
				gravity: store.getState().reducerConfig.gravity,
				lanes: store.getState().reducerLanes.lanes
			}}
			

		/* launchers particles*/
		var createParticles_particles_Listener = store.compose(
			store.dispatch,
			actions.createParticles,
			createParticles_Payload
		)

		var introduceParticles_particles_Listener = store.compose(
			store.dispatch,
			actions.introduceParticles,
			introduceParticles_Payload
		)

		var tickParticles_particles_Listener = store.compose(
			store.dispatch,
			actions.tickParticles,
			tickParticles_Payload
		)
	
		var startParticles_particles_Listener = store.compose(
			store.dispatch,
			actions.startParticles
		)	
		
		var stopParticles_particles_Listener = store.compose(
			store.dispatch,
			actions.stopParticles
		)		
		

		// renderers
		var renderer_particles_Listener = store.compose(
			d3ringsRendererParticles.renderer,
			logicAndData_Payload
		)	
		
		/* launchers */
		var mouseDown_Launcher = 	d3ringsControls.mouseDownControl(logicAndData_Payload()).start(d3.select('svg'))
		var touchStart_Launcher = d3ringsControls.touchStartControl(logicAndData_Payload()).start(d3.select('svg'))
		var mouseMove_Launcher = 	d3ringsControls.mouseMoveControl(logicAndData_Payload()).start(d3.select('svg'))
		var touchMove_Launcher = 	d3ringsControls.touchMoveControl(logicAndData_Payload()).start(d3.select('svg'))
		var mouseUp_Launcher =		d3ringsControls.mouseUpControl(logicAndData_Payload()).start(d3.select('svg'))
		var touchEnd_Launcher = 	d3ringsControls.touchEndControl(logicAndData_Payload()).start(d3.select('svg'))
		var mouseLeave_Launcher = d3ringsControls.mouseLeaveControl(logicAndData_Payload()).start(d3.select('svg'))
		var mouseEnter_Launcher = d3ringsControls.mouseEnterControl(logicAndData_Payload()).start(d3.select('svg'))
		var ticker_Launcher = 		d3ringsControls.tickControls(logicAndData_Payload()).start()
		var d3timer_Launcher = 			d3ringsControls.timeControls(logicAndData_Payload()).start()
		var stepper_Launcher =		d3ringsControls.stepControls(logicAndData_Payload()).start()
		var keyDown_Launcher = 		d3ringsControls.keyDownControl(logicAndData_Payload()).start()
		var keyRelease_Launcher = d3ringsControls.keyReleaseControl(logicAndData_Payload()).start()
		var keyRelease_Launcher = d3ringsControls.keyReleaseControl(logicAndData_Payload()).start()

		/* listeners */
				
									 store.subscribe(renderer_particles_Listener)
			mouseDown_Launcher.subscribe(startParticles_particles_Listener)
		 touchStart_Launcher.subscribe(startParticles_particles_Listener)
			mouseDown_Launcher.subscribe(createParticles_particles_Listener)
		 touchStart_Launcher.subscribe(createParticles_particles_Listener)
			mouseMove_Launcher.subscribe(createParticles_particles_Listener)
			touchMove_Launcher.subscribe(createParticles_particles_Listener)
				mouseUp_Launcher.subscribe(stopParticles_particles_Listener)
			 touchEnd_Launcher.subscribe(stopParticles_particles_Listener)
		 mouseLeave_Launcher.subscribe(stopParticles_particles_Listener)
				 ticker_Launcher.subscribe(tickParticles_particles_Listener)
				 ticker_Launcher.subscribe(createParticles_particles_Listener)
				stepper_Launcher.subscribe(introduceParticles_particles_Listener)

/* 																				*/
/*    		 d3rings-whirls-debug.js    		*/
/* 																				*/

if (typeof require === "function") {
	var d3 = require('./d3.v4.0.0-rc.2.js')

	var d3ringsRendererCourt = require('./d3rings-renderer-court.js')
	var d3ringsRendererLanes = require('./d3rings-renderer-lanes.js')
	var d3ringsRendererParticles = require('./d3rings-renderer-particles.js')
	var d3ringsRendererWhirls = require('./d3rings-renderer-whirls.js')
	var d3ringsRendererChords = require('./d3rings-renderer-chords.js')

	var d3ringsReducer = require('./d3rings-reducer.js')
	var d3ringsStore = require('./d3rings-store.js')
	var d3ringsActions = require('./d3rings-actions.js')
	var d3ringsControls = require('./d3rings-controls.js')
	
}	
		/* actions */
		var actions = d3ringsActions.ActionCreators

		/* store */
		// var store = d3ringsStore.createStore(d3ringsReducer.reducer, d3ringsReducer.reducer())
		var store = d3ringsStore.store

			/* payloads renderers */
			var logicAndData_Payload = function () { return {
				store: store,
				actions: actions
			}}
			

		/* payloads whirls */
			var createRings_Payload = function () { return {
						ringsPerTick: store.getState().reducerWhirls.ringsPerTick,
						x: store.getState().reducerCourt.mousePos[0], 
						y: store.getState().reducerCourt.mousePos[1],
						randNormal: store.getState().reducerConfig.randNormal,
						randNormal2: store.getState().reducerConfig.randNormal2,
						rings: store.getState().reducerWhirls.rings,
						rangs: store.getState().reducerWhirls.rangs,
						ringsGenerating: store.getState().reducerWhirls.ringsGenerating,
			}}
			
			var updateRangsDuration_Payload = function () { return {
						rangsAlways: store.getState().reducerWhirls.rangsAlways,
						rangsHitsIndex: store.getState().reducerWhirls.rangsHitsIndex, 
			}}
			
			var updateRangsNumber_Payload = function () { return {
						rangsAlways: store.getState().reducerWhirls.rangsAlways,
						rangsHitsIndex: store.getState().reducerWhirls.rangsHitsIndex, 
			}}
			
		
		/* launchers rings */
		var startRangs_rangs_Listener = store.compose(
			store.dispatch,
			actions.startRangs
		)
			
		var stopRangs_rings_Listener = store.compose(
			store.dispatch,
			actions.stopRangs
		)
			
		var updateRangsDuration_rings_Listener = store.compose(
			store.dispatch,
			actions.updateRangsDuration,
			updateRangsDuration_Payload			
		)
			
		var updateRangsNumber_rings_Listener = store.compose(
			store.dispatch,
			actions.updateRangsNumber,
			updateRangsNumber_Payload			
		)
			
		var createRings_rings_Listener = store.compose(
			store.dispatch,
			actions.createRings,
			createRings_Payload
		)

		var startRings_rings_Listener = store.compose(
			store.dispatch,
			actions.startRings
		)	
		
		var stopRings_rings_Listener = store.compose(
			store.dispatch,
			actions.stopRings
		)	


		// renderers
		
		var renderer_whirls_Listener = store.compose(
			d3ringsRendererWhirls.renderer,
			logicAndData_Payload
		)	

		/* launchers */
		var mouseDown_Launcher = 	d3ringsControls.mouseDownControl(logicAndData_Payload()).start(d3.select('svg'))
		var touchStart_Launcher = d3ringsControls.touchStartControl(logicAndData_Payload()).start(d3.select('svg'))
		var mouseMove_Launcher = 	d3ringsControls.mouseMoveControl(logicAndData_Payload()).start(d3.select('svg'))
		var touchMove_Launcher = 	d3ringsControls.touchMoveControl(logicAndData_Payload()).start(d3.select('svg'))
		var mouseUp_Launcher =		d3ringsControls.mouseUpControl(logicAndData_Payload()).start(d3.select('svg'))
		var touchEnd_Launcher = 	d3ringsControls.touchEndControl(logicAndData_Payload()).start(d3.select('svg'))
		var mouseLeave_Launcher = d3ringsControls.mouseLeaveControl(logicAndData_Payload()).start(d3.select('svg'))
		var mouseEnter_Launcher = d3ringsControls.mouseEnterControl(logicAndData_Payload()).start(d3.select('svg'))
		var ticker_Launcher = 		d3ringsControls.tickControls(logicAndData_Payload()).start()
		var d3timer_Launcher = 			d3ringsControls.timeControls(logicAndData_Payload()).start()
		var stepper_Launcher =		d3ringsControls.stepControls(logicAndData_Payload()).start()
		var keyDown_Launcher = 		d3ringsControls.keyDownControl(logicAndData_Payload()).start()
		var keyRelease_Launcher = d3ringsControls.keyReleaseControl(logicAndData_Payload()).start()
		var keyRelease_Launcher = d3ringsControls.keyReleaseControl(logicAndData_Payload()).start()

		
		/* listeners */
			
									 store.subscribe(renderer_whirls_Listener)
			mouseDown_Launcher.subscribe(startRangs_rangs_Listener)
		 mouseEnter_Launcher.subscribe(startRangs_rangs_Listener)
		 mouseLeave_Launcher.subscribe(stopRangs_rings_Listener)
			mouseDown_Launcher.subscribe(startRings_rings_Listener)
			mouseDown_Launcher.subscribe(createRings_rings_Listener)
			mouseMove_Launcher.subscribe(createRings_rings_Listener)
				mouseUp_Launcher.subscribe(stopRings_rings_Listener)
		 mouseLeave_Launcher.subscribe(stopRings_rings_Listener)		
				stepper_Launcher.subscribe(updateRangsDuration_rings_Listener)
				stepper_Launcher.subscribe(updateRangsNumber_rings_Listener)

/* 																				*/
/*    		 d3rings-listeners-chords.js    */
/* 																				*/

if (typeof require === "function") {
	var d3 = require('./d3.v4.0.0-rc.2.js')

	var d3ringsRendererCourt = require('./d3rings-renderer-court.js')
	var d3ringsRendererLanes = require('./d3rings-renderer-lanes.js')
	var d3ringsRendererParticles = require('./d3rings-renderer-particles.js')
	var d3ringsRendererWhirls = require('./d3rings-renderer-whirls.js')
	var d3ringsRendererChords = require('./d3rings-renderer-chords.js')

	var d3ringsReducer = require('./d3rings-reducer.js')
	var d3ringsStore = require('./d3rings-store.js')
	var d3ringsActions = require('./d3rings-actions.js')
	var d3ringsControls = require('./d3rings-controls.js')
	
}	
		/* actions */
		var actions = d3ringsActions.ActionCreators

		/* store */
		// var store = d3ringsStore.createStore(d3ringsReducer.reducer, d3ringsReducer.reducer())
		var store = d3ringsStore.store


			/* payloads renderers */
			var logicAndData_Payload = function () { return {
				store: store,
				actions: actions
			}}
			

		/* payloads chords */
			var keyDownKeysChords_Payload = function () { return {
				keyEvents: store.getState().reducerCourt.keyEvents,
				currentMode: store.getState().reducerCourt.currentMode,
				itemSpan: store.getState().reducerConfig.itemSpan,
			}}

			var keyUpKeysChords_Payload = function () { return {
				keys: store.getState().reducerCourt.keys,
				currentMode: store.getState().reducerCourt.currentMode,
				itemSpan: store.getState().reducerConfig.itemSpan,
			}}

			var setChords_Payload = function () { return {
				currentMode: store.getState().reducerCourt.currentMode
			}}
				
			var fetchChordsCollection_Payload = function () { return {
				src: store.getState().reducerChords.src,
				areChordsFetched: store.getState().reducerChords.areChordsFetched,
		}}
		
		var setChordsCollection_Payload = function () { return {
				chordsCollection: store.getState().reducerChords.chordsCollection
			}}
				
		/* launchers chords */
		var keyDownArrow_chords_Listener = store.compose(
			store.dispatch,
			actions.walkDownChords,
			keyDownKeysChords_Payload
		)

		var keyUpArrow_chords_Listener = store.compose(
			store.dispatch,
			actions.walkUpChords,
			keyUpKeysChords_Payload
		)	
		
		var fetchChordsCollection_chords_Listener = store.compose(
			function(payload) { 
					if (payload.areChordsFetched == false) {
						 return d3.queue()
							.defer(d3.csv, store.getState().reducerChords.src, 
										// processRecord
										function (d, i) {						
											d.prx = i
											d.source = d.source
											d.target = d.target
											d.predicate = d.predicate
											d.weigh = +d.weigh
											d.valueOf = function value() {
												return this.weigh
											}	
											return d;
										}
							)
							.await(
										// processData
										function (error, dataCsv) {
											store.dispatch(actions.fetchChordsCollection({chords: dataCsv}))
										}	
							)
						}
				},
			fetchChordsCollection_Payload
		)
			
		var setChordsCollection_chords_Listener = store.compose(
			store.dispatch,
			actions.setChordsCollection,
			setChordsCollection_Payload
		)
	
								
		var setChords_chords_Listener = store.compose(
			store.dispatch,
			actions.setChords,
			setChords_Payload
		)

		
		// renderers
	
		var renderer_chords_Listener = store.compose(
			d3ringsRendererChords.renderer,
			logicAndData_Payload
		)	
		
		/* listeners */
									 store.subscribe(renderer_chords_Listener)
				stepper_Launcher.subscribe(setChords_chords_Listener)
 		  	stepper_Launcher.subscribe(setChordsCollection_chords_Listener)
	   		stepper_Launcher.subscribe(fetchChordsCollection_chords_Listener)			
				stepper_Launcher.subscribe(keyUpArrow_chords_Listener)
				stepper_Launcher.subscribe(keyDownArrow_chords_Listener)	

/* 														*/
/*    		 index.js           */
/* 														*/

if (typeof require === "function") {
	var d3 = require('./d3.v4.0.0-rc.2.js')

	var d3ringsRendererCourt = require('./d3rings-renderer-court.js')
	var d3ringsRendererLanes = require('./d3rings-renderer-lanes.js')
	var d3ringsRendererParticles = require('./d3rings-renderer-particles.js')
	var d3ringsRendererWhirls = require('./d3rings-renderer-whirls.js')
	var d3ringsRendererChords = require('./d3rings-renderer-chords.js')

	var d3ringsReducer = require('./d3rings-reducer.js')
	var d3ringsStore = require('./d3rings-store.js')
	var d3ringsActions = require('./d3rings-actions.js')
	var d3ringsControls = require('./d3rings-controls.js')
	
}	
		/* actions */
		var actions = d3ringsActions.ActionCreators

		/* store */
		// var store = d3ringsStore.createStore(d3ringsReducer.reducer, d3ringsReducer.reducer())
		var store = d3ringsStore.store
		
			/* payloads renderers */
			var logicAndData_Payload = function () { return {
				store: store,
				actions: actions
			}}

		/* container */
		var svgContainer = d3.select(store.getState().reducerConfig.containerElem)
			.selectAll('svg')
				.data(['svg'])
				.enter()
					.append("svg")
						.attr("id", store.getState().reducerConfig.containerId)
						.attr('class', 'chart')
						.style('width', store.getState().reducerCourt.svgWidth)
						.style('height', store.getState().reducerCourt.svgHeight)
						.style('background', 'oldlace')
						.style('border', '1px solid darkgrey')
						.attr('viewbox',"0 0 3 2")										

		
		/* launchers */
		var mouseDown_Launcher = 	d3ringsControls.mouseDownControl(logicAndData_Payload()).start(d3.select('svg'))
		var touchStart_Launcher = d3ringsControls.touchStartControl(logicAndData_Payload()).start(d3.select('svg'))
		var mouseMove_Launcher = 	d3ringsControls.mouseMoveControl(logicAndData_Payload()).start(d3.select('svg'))
		var touchMove_Launcher = 	d3ringsControls.touchMoveControl(logicAndData_Payload()).start(d3.select('svg'))
		var mouseUp_Launcher =		d3ringsControls.mouseUpControl(logicAndData_Payload()).start(d3.select('svg'))
		var touchEnd_Launcher = 	d3ringsControls.touchEndControl(logicAndData_Payload()).start(d3.select('svg'))
		var mouseLeave_Launcher = d3ringsControls.mouseLeaveControl(logicAndData_Payload()).start(d3.select('svg'))
		var mouseEnter_Launcher = d3ringsControls.mouseEnterControl(logicAndData_Payload()).start(d3.select('svg'))
		var ticker_Launcher = 		d3ringsControls.tickControls(logicAndData_Payload()).start()
		var d3timer_Launcher = 			d3ringsControls.timeControls(logicAndData_Payload()).start()
		var stepper_Launcher =		d3ringsControls.stepControls(logicAndData_Payload()).start()
		var keyDown_Launcher = 		d3ringsControls.keyDownControl(logicAndData_Payload()).start()
		var keyRelease_Launcher = d3ringsControls.keyReleaseControl(logicAndData_Payload()).start()
		var keyRelease_Launcher = d3ringsControls.keyReleaseControl(logicAndData_Payload()).start()