Repository: ineventapp/musjs
Branch: master
Commit: a27886387a9b
Files: 4
Total size: 25.6 KB

Directory structure:
gitextract__1kwazhe/

├── LICENSE
├── README.md
├── example.html
└── mus.js

================================================
FILE CONTENTS
================================================

================================================
FILE: LICENSE
================================================
MIT License

Copyright (c) 2018 InEvent

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.


================================================
FILE: README.md
================================================

<p align="center"><img width="100" height="100" src="https://i.imgur.com/6QGo4Zn.jpg"/></p>

[![GitHub license](https://img.shields.io/github/license/ineventapp/musjs.svg)](https://github.com/ineventapp/musjs/blob/master/LICENSE)
![Coverage](https://img.shields.io/badge/coverage-100%25-brightgreen.svg)

# mus.js
A simple mouse tracking library to provide insights on how your users are handling your layout / user experience.

This library was created so you don't need an external service to "record" your users mouse events and "play" them in a later moment.

**mus** works with any AMD you wish and its setup is extremely simple - **5.6kb**

## Recording
```js
// Instantiate a mus object
var mus = new Mus();

// Start recording
mus.record();

// After a while, stops
setTimeout(function() {
  mus.stop();
}, 5000);
```

## Playing
```js
// Sets playback speed (optional, default NORMAL)
mus.setPlaybackSpeed(mus.speed.SLOW);

// Starts playing and enjoy
mus.play();
```

## Example


<img height="300" src="https://i.imgur.com/GCYD9EP.gif"/>


## Public methods

### Controls

#### record()
Starts a recording session for current screen. If there is already a session recorded, it appends to it.

#### stop()
Stops a recording or a playback.

#### play(onfinish)
Plays current recording session.

#### pause()
Pauses current playback.

#### release()
Releases all data recorded or set.


### Getters and setters

#### getData()
Returns all data collected during recording.

#### setData(data)
Sets custom data for playback. It must be a JSON object collected from `getData`.

#### setFrames(frames)
Same as `setData`, but allows only to set the `frames` array.

#### setWindowSize(width, height)
During recording, all data collected contains window dimensions as well, so if your recorded data comes from a different window dimension, **mus** automatically adapts to current window size. This function allows you to set a custom playback window size if you decide to use `setFrames` instead of `setData` (that already sets windows dimensions).

#### setPlaybackSpeed(speed)
Allows playback to be faster or slower.
Default constants: `mus.speed.SLOW` (35), `mus.speed.NORMAL` (15), `mus.speed.FAST` (5)
You may decide to use custom values as you wish.

#### setTimePoint(bool)
Records time elapsed for each point for a precise data recording.
Default: disabled

#### isRecording()
Informs if **mus** is currently recording something.

#### isPlaying()
Informs if **mus** is currently playing something.

#### isTimePoint()
Informs if **mus** is recording time for each data point.

# Roadmap
- Detect touch movements and clicks;
- Get form inputs;
- Allows real clicks during setup (default false);
- Suggestions are greatly appreciated!

# Version history

## v1.1.0
- Added time point recording for precise data;

## v1.0.1
- Added minified file for distribution;

# License
MIT


================================================
FILE: example.html
================================================
<!DOCTYPE html>
<html>
	<head>
		<script src="mus.js"></script>
		<style>
		.controls {
			margin-bottom: 20px;
		}

		.controls td {
			vertical-align: top;
			padding: 0 20px;
		}

		.move-mouse-here {
			width: 400px;
			height: 200px;
			display: table;
			margin: 0 auto;
			background-color: #33ff00;
			text-align: center;
			line-height: 200px;
		}

		.click-here {
			width: 400px;
			height: 200px;
			display: table;
			margin: 0 auto;
			background-color: #00ffff;
			text-align: center;
			line-height: 200px;
		}

		.scroll-here {
			width: 400px;
			height: 2000px;
			display: table;
			margin: 0 auto;
			background-color: #00c4ff;
			text-align: center;
			line-height: 200px;
		}

		#console {
			font-size: 10px;
		}
		</style>
	</head>
	<body>
		<table class="controls">
			<tr>
				<td>
					<h1>Mus.js</h1>
					<p>Status: <span id="status"></span></p>
					<p>Speed: <span id="speed">Normal</span></p>
					<br/>
					<button id="recording" onclick="toggleRecord();">Start recording</button>
					<button id="play" onclick="play();">Playback</button>
					<br/>
					<button onclick="mus.setPlaybackSpeed(mus.speed.SLOW);">Slow</button>
					<button onclick="mus.setPlaybackSpeed(mus.speed.NORMAL);">Normal</button>
					<button onclick="mus.setPlaybackSpeed(mus.speed.FAST);">Fast</button>
					<br/>
					<button id="timePoint" onclick="setTimePoint();">Enable time point</button>
					<br/>
					<button onclick="releaseMus();">Release</button>
				</td>
				<td>
					<h2>Data console</h2>
					<textarea id="console" rows="12" cols="100"></textarea>
				</td>
			</tr>
		</table>

		<div class="guide">
			<div style="display: flex; flex-direction: column; width: 40%;">
				<input type="text" placeholder="Type here !"/>
				<textarea placeholder="Type here !"></textarea>
				<div>
					Change My Color: <input type="color" />
				</div>
				
				<div>
					Check Me:<input type="checkbox" />
				</div>

				<div>
					Change My Date:<input type="date" />
				</div>

				<div>
					Change My Number: <input type="number" />
				</div>
			</div>

			<div class="move-mouse-here">Move mouse here!</div>

			<div class="click-here">Click here!</div>

			<div class="scroll-here">Scroll here!</div>
		</div>

		<script>
			var mus = new Mus();
			mus.setPlaybackSpeed(mus.speed.SLOW);

			var setTimePoint = function() {
				releaseMus();
				mus.setTimePoint(!mus.isTimePoint());
				if (mus.isTimePoint()) {
					document.getElementById("timePoint").innerHTML = "Disable time point";
				} else {
					document.getElementById("timePoint").innerHTML = "Enable time point";
				}
			};
			var setConsoleData = function() {
				var textarea = document.getElementById("console");
				textarea.innerHTML = JSON.stringify(mus.getData());
				textarea.scrollTop = textarea.scrollHeight;
			};
			var releaseMus = function() {
				mus.release();
				setConsoleData();
			};
			var toggleRecord = function() {
				if (mus.isPlaying()) return;
				if (!mus.isRecording()) {
					document.getElementById("status").innerHTML = "Recording";
					document.getElementById("recording").innerHTML = "Stop recording";
					mus.record(setConsoleData);
				} else {
					document.getElementById("status").innerHTML = "Stand by";
					document.getElementById("recording").innerHTML = "Start recording";
					mus.stop();
					setConsoleData();
				}
			};
			var play = function() {
				if (mus.isRecording()) return;
				if (mus.isPlaying()) {
					document.getElementById("play").innerHTML = "Play";
					document.getElementById("status").innerHTML = "Stand by";
					mus.pause();
				} else {
					document.getElementById("play").innerHTML = "Pause";
					document.getElementById("status").innerHTML = "Playing";
					mus.play(function() {
						document.getElementById("play").innerHTML = "Play";
						document.getElementById("status").innerHTML = "Stand by";
					});
				}
			};
			var setSpeed = function(speed) {
				mus.setPlaybackSpeed(speed);
				if (speed == mus.speed.SLOW) {
					document.getElementById("speed").innerHTML = "Slow";
				} else if (speed == mus.speed.NORMAL) {
					document.getElementById("speed").innerHTML = "Normal";
				} else {
					document.getElementById("speed").innerHTML = "Fast";
				}
			};
			setConsoleData();
		</script>
	</body>
</html>

================================================
FILE: mus.js
================================================
/*!
 * Mus.js v1.1.0
 * (c) 2018 Mauricio Giordano <giordano@inevent.us> - InEvent
 * Released under the MIT License.
 */
(function (global, factory) {
	typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
		typeof define === 'function' && define.amd ? define(factory) :
			(global.Mus = factory());
}(this, (function () {
	'use strict';

	// Mus default cursor icon based on OSx default cursor
	var cursorIcon = 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiCSB2aWV3Qm94PSIwIDAgMjggMjgiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDI4IDI4IiB4bWw6c3BhY2U9InByZXNlcnZlIj48cG9seWdvbiBmaWxsPSIjRkZGRkZGIiBwb2ludHM9IjguMiwyMC45IDguMiw0LjkgMTkuOCwxNi41IDEzLDE2LjUgMTIuNiwxNi42ICIvPjxwb2x5Z29uIGZpbGw9IiNGRkZGRkYiIHBvaW50cz0iMTcuMywyMS42IDEzLjcsMjMuMSA5LDEyIDEyLjcsMTAuNSAiLz48cmVjdCB4PSIxMi41IiB5PSIxMy42IiB0cmFuc2Zvcm09Im1hdHJpeCgwLjkyMjEgLTAuMzg3MSAwLjM4NzEgMC45MjIxIC01Ljc2MDUgNi41OTA5KSIgd2lkdGg9IjIiIGhlaWdodD0iOCIvPjxwb2x5Z29uIHBvaW50cz0iOS4yLDcuMyA5LjIsMTguNSAxMi4yLDE1LjYgMTIuNiwxNS41IDE3LjQsMTUuNSAiLz48L3N2Zz4=';

	/**
	 * Mus constructor that defines initial variables and
	 * sets browser width and height.
	 * @knownbug: if user decides to change browser window size on-the-go
	 * 		it may cause bugs during playback
	 */
	function Mus() {
		if (this === undefined) {
			console.error('Have you initialized Mus with "new" statement? (i.e. var mus = new Mus())');
			return;
		}
		this.frames = [];
		this.timeouts = [];
		this.pos = 0;
		this.currPos = 0;
		this.startedAt = 0;
		this.finishedAt = 0;
		this.timePoint = false;
		this.recording = false;
		this.playing = false;
		this.playbackSpeed = this.speed.NORMAL;
		this.observer = '';
		this.window = {
			width: window.outerWidth,
			height: window.outerHeight
		};

		// Stores initial listeners
		this.onmousemove = window.onmousemove;
		this.onmousedown = window.onmousedown;
		this.onscroll = window.onscroll;
		this.inputWithUserKeyEvent = () => {
			document.querySelectorAll('textarea, input[type=text], input[type=email], input[type=number], input[type=password], input[type=tel], input[type=search], input[type=url], input[type=search], input[type=week], input[type=month], input[type=datetime-local]').forEach(element => {
				element.onkeydown = null;
			});
		};
		this.inputWithOnchangeEvent = () => {
			document.querySelectorAll('select, input[type=checkbox], input[type=radio], input[type=color], input[type=date], input[type=file], input[type=number], input[type=range], input[type=time]').forEach(element => {
				element.onchange = null;
			});
		};
	};

	/**
	 * Here goes all Mus magic
	 */
	Mus.prototype = {

		/** Mus Listeners **/

		/**
		 * Listener intended to be used with onmousemove
		 * @param callback function a callback fnc
		 * @return function the mouse move listener
		 */
		moveListener: function (callback) {
			return function (e) {
				if (callback) callback(['m', e.clientX, e.clientY]);
			}
		},

		/**
		 * Listener intended to be used with onmousedown
		 * @param callback function a callback fnc
		 * @return function the mouse click listener
		 */
		clickListener: function (callback) {
			return function (e) {
				if (callback) callback(['c', e.clientX, e.clientY]);
			}
		},

		/**
		 * Listener intended to be used with onscroll
		 * @param callback function a callback fnc
		 * @return function the window scroll listener
		 */
		scrollListener: function (callback) {
			return function (e) {
				if (callback) callback(['s', document.scrollingElement.scrollLeft, document.scrollingElement.scrollTop]);
			}
		},

		/**
		 * Listener intended to be used with onKeyDown
		 * @param callback function a callback fnc
		 * @return function the input with user key listener
		 */

		inputWithUserKeyListener: function (callback) {
			var self = this;
			return function (e) {
				console.log(e)
				if (callback) callback(['i', self.getXpathFromElement(e.target), e.target.value]);
			}
		},

		/**
		 * Listener intended to be used with onChange
		 * @param callback function a callback fnc
		 * @return function the input with onChange listener
		 */

		inputWithOnchangeListener: function (callback) {
			var self = this;
			return function (e) {
				if (callback) callback(['o', self.getXpathFromElement(e.target), e.target.value]);
			}
		},


		/**
		 * Listener intended to be used with mutation observer (remove or add a class name)
		 * @param callback function a callback fnc
		 * @return function the mutation observer
		 */

		mutationObserver: function (callback) {
			return function (mutations) {
				if (callback) callback(mutations);
			}
		},

		/** Mus recording tools **/

		/**
		 * Starts screen recording
		 */
		record: function (onFrame) {
			if (this.recording) return;

			var self = this;
			if (self.startedAt == 0) self.startedAt = new Date().getTime() / 1000;

			// Sets initial scroll position of the window
			if (self.timePoint) {
				self.frames.push(['s', document.scrollingElement.scrollLeft, document.scrollingElement.scrollTop, 0]);
			} else {
				self.frames.push(['s', document.scrollingElement.scrollLeft, document.scrollingElement.scrollTop]);
			}

			//Sets initial value of inputs
			document.querySelectorAll('textarea, input[type=text], input[type=email], input[type=number], input[type=password], input[type=tel], input[type=search], input[type=url], input[type=search], input[type=week], input[type=month], input[type=datetime-local]').forEach(element => {
				
				if (self.timePoint) {
					self.frames.push(['i', self.getXpathFromElement(element), element.value, 0]);
				} else {
					self.frames.push(['i', self.getXpathFromElement(element), element.value]);
				}
				
			});
			document.querySelectorAll('select, input[type=checkbox], input[type=radio], input[type=color], input[type=date], input[type=file], input[type=number], input[type=range], input[type=time]').forEach(element => {
				if (self.timePoint) {
					if (element.type == 'checkbox' || element.type == 'radio')
						self.frames.push(['o', self.getXpathFromElement(element), element.value, element.checked, 0]);
					else
						self.frames.push(['o', self.getXpathFromElement(element), element.value, 0]);
				} else {
					if (element.type == 'checkbox' || element.type == 'radio')
						self.frames.push(['o', self.getXpathFromElement(element), element.value, element.checked]);
					else
						self.frames.push(['o', self.getXpathFromElement(element), element.value]);
				}

			});


			// SET INITIAL VALUES END HERE

			// Defines Mus listeners on window
			window.onmousemove = this.moveListener(function (pos) {
				self.frames.push(self.timePoint ? pos.concat(new Date().getTime() - (self.startedAt * 1000)) : pos);
				if (onFrame instanceof Function) onFrame();
			});
			window.onmousedown = this.clickListener(function (click) {
				self.frames.push(self.timePoint ? click.concat(new Date().getTime() - (self.startedAt * 1000)) : click);
				if (onFrame instanceof Function) onFrame();
			});
			window.onscroll = this.scrollListener(function (scroll) {
				self.frames.push(self.timePoint ? scroll.concat(new Date().getTime() - (self.startedAt * 1000)) : scroll);
				if (onFrame instanceof Function) onFrame();
			});
			document.querySelectorAll('textarea, input[type=text], input[type=email], input[type=number], input[type=password], input[type=tel], input[type=search], input[type=url], input[type=search], input[type=week], input[type=month], input[type=datetime-local]').forEach(element => {
				element.oninput = this.inputWithUserKeyListener(function (input) {
					console.log(input)
					self.frames.push(self.timePoint ? input.concat(new Date().getTime() - (self.startedAt * 1000)) : input);
					if (onFrame instanceof Function) onFrame();
				});
			});

			document.querySelectorAll('select, input[type=checkbox], input[type=radio], input[type=color], input[type=date], input[type=file], input[type=number], input[type=range], input[type=time]').forEach(element => {
				element.onchange = this.inputWithOnchangeListener(function (inputonchange) {
					let element = self.getElementByXpath(inputonchange[1]);
					if (element.type == 'checkbox' || element.type == 'radio') {
						inputonchange = inputonchange.concat(element.checked);
						self.frames.push(self.timePoint ? inputonchange.concat(new Date().getTime() - (self.startedAt * 1000)) : inputonchange);
					} else
						self.frames.push(self.timePoint ? inputonchange.concat(new Date().getTime() - (self.startedAt * 1000)) : inputonchange);

					if (onFrame instanceof Function) onFrame();
				});
			});

			//Define mutation observer here
			const targetNode = document.querySelector('body');
			const config = { attributes: true, attributeOldValue: true, subtree: true };

			var MutationObserver = window.MutationObserver || window.WebKitMutationObserver;
			this.observer = new MutationObserver(this.mutationObserver(function (mutations) {
				for (let mutation of mutations) {
					if (mutation.type == 'attributes') {
						var mutationFrame = [];
						if (mutation.target.hasAttribute(mutation.attributeName)) {
							mutationFrame = ['a', self.getXpathFromElement(mutation.target), mutation.attributeName, mutation.target.getAttribute(mutation.attributeName), mutation.oldValue, 'M'];
						}
						else {
							mutationFrame = ['a', self.getXpathFromElement(mutation.target), mutation.attributeName, mutation.oldValue, 'D'];
						}

						self.frames.push(self.timePoint ? mutationFrame.concat(new Date().getTime() - (self.startedAt * 1000)) : mutationFrame);
						if (onFrame instanceof Function) onFrame();
					}
				}
			}));
			this.observer.observe(targetNode, config);

			// Sets our recording flag
			self.recording = true;
		},

		/**
		 * Stops screen recording
		 */
		stop: function () {
			this.finishedAt = new Date().getTime() / 1000;
			window.onmousemove = this.onmousemove;
			window.onmousedown = this.onmousedown;
			window.onscroll = this.onscroll;
			this.inputWithUserKeyEvent();
			this.inputWithOnchangeEvent();
			if (this.observer != '') this.observer.disconnect();
			// Sets our recording flag
			this.timeouts = [];
			this.recording = false;
			this.playing = false;
			this.pos = 0;
		},

		/**
		 * Pauses current execution
		 */
		pause: function () {
			if (this.playing) {
				this.pos = this.currPos;
				this.playing = false;
				this.clearTimeouts();
			}
		},

		/**
		 * Runs a playback of a recording
		 * @param function onfinish a callback function
		 */
		play: function (onfinish) {
			if (this.playing) return;

			var self = this;
			self.createCursor();

			var node = document.getElementById("musCursor");
			var delay = '';
			for (; self.pos < self.frames.length; self.pos++) {
				if(self.timePoint){
					delay = self.frames[self.pos][self.frames[self.pos].length - 1];
				}else{
					delay = self.pos * self.playbackSpeed;
				}

				self.timeouts.push(setTimeout(function (pos) {

					// Plays specific timeout
					self.playFrame(self, self.frames[pos], node);
					self.currPos = pos;

					if (pos == self.frames.length - 1) {
						node.style.backgroundColor = "transparent";
						self.timeouts = [];
						self.playing = false;
						self.pos = 0;
						if (onfinish) onfinish();
					}
				}, delay, self.pos));
			};

			this.playing = true;
		},

		/**
		 * Releases Mus instance
		 */
		release: function () {
			this.frames = [];
			this.startedAt = 0;
			this.finishedAt = 0;
			this.stop();
			this.destroyCursor();
			this.destroyClickSnapshot();
		},

		/** Mus internal functions **/

		/**
		 * Play a specific frame from playback
		 */
		playFrame: function (self, frame, node) {

			if (frame[0] == 'm') {
				node.style.left = self.getXCoordinate(frame[1]) + "px";
				node.style.top = self.getYCoordinate(frame[2]) + "px";

			} else if (frame[0] == 'c') {
				self.createClickSnapshot(frame[2], frame[1]);

			} else if (frame[0] == 's') {
				window.scrollTo(frame[1], frame[2]);

			} else if (frame[0] == 'i') {
				let element = self.getElementByXpath(frame[1]);
				element.value = frame[2];

			} else if (frame[0] == 'o') {
				let element = self.getElementByXpath(frame[1]);
				if (element.type == 'checkbox' || element.type == 'radio') {
					element.checked = frame[3];
				}
				else {
					element.value = frame[2];
				}
			} else if (frame[0] == 'a') {
				let element = self.getElementByXpath(frame[1]);
				if (frame[5] == 'M') {
					element.setAttribute(frame[2], frame[3]);
				} else if (frame[4] == 'D') {
					element.removeAttribute(frame[2]);
				}


			}
		},

		/**
		 * Clears all timeouts stored
		 */
		clearTimeouts: function () {
			for (var i in this.timeouts) {
				clearTimeout(this.timeouts[i]);
			}

			this.timeouts = [];
		},

		/**
		 * Calculates time elapsed during recording
		 * @return integer time elapsed
		 */
		timeElapsed: function () {
			return this.finishedAt - this.startedAt;
		},

		/**
		 * Creates Mus cursor if non-existent
		 */
		createCursor: function () {
			if (!document.getElementById("musCursor")) {
				var node = document.createElement("div");
				node.id = "musCursor";
				node.style.position = "fixed";
				node.style.width = "32px";
				node.style.height = "32px";
				node.style.top = "-100%";
				node.style.left = "-100%";
				node.style.borderRadius = "32px";
				node.style.backgroundImage = "url(" + cursorIcon + ")";
				document.body.appendChild(node);
			}
		},

		/**
		 * Destroys Mus cursor
		 */
		destroyCursor: function () {
			var cursor = document.getElementById("musCursor");
			if (cursor) cursor.remove();
		},

		/**
		 * Creates Mus click snapshot
		 */
		createClickSnapshot: function (x, y) {
			var left = document.scrollingElement.scrollLeft;
			var top = document.scrollingElement.scrollTop;
			var node = document.createElement("div");
			node.className = "musClickSnapshot";
			node.style.position = "absolute";
			node.style.width = "32px";
			node.style.height = "32px";
			node.style.top = (x + top) + "px";
			node.style.left = (y + left) + "px";
			node.style.borderRadius = "32px";
			node.style.backgroundColor = "red";
			node.style.opacity = 0.2;
			document.body.appendChild(node);
		},

		/**
		 * Destroys Mus click snapshot
		 */
		destroyClickSnapshot: function () {
			var nodes = document.getElementsByClassName("musClickSnapshot");
			while (nodes.length > 0) {
				nodes[0].remove();
			}
		},

		/**
		 * Calculates current X coordinate of mouse based on window dimensions provided
		 * @param x integer the x position
		 * @return integer calculated x position
		 */
		getXCoordinate: function (x) {
			if (window.outerWidth > this.window.width) {
				return parseInt(this.window.width * x / window.outerWidth);
			}

			return parseInt(window.outerWidth * x / this.window.width);
		},

		/**
		 * Calculates current Y coordinate of mouse based on window dimensions provided
		 * @param y integer the y position
		 * @return integer calculated y position
		 */
		getYCoordinate: function (y) {
			if (window.outerHeight > this.window.height) {
				return parseInt(this.window.height * y / window.outerHeight);
			}

			return parseInt(window.outerHeight * y / this.window.height);
		},

		/** Public getters and setters **/

		/**
		 * Get all generated Mus data
		 * @return array generated Mus data
		 */
		getData: function () {
			return {
				frames: this.frames,
				timeElapsed: this.timeElapsed(),
				window: {
					width: window.outerWidth,
					height: window.outerHeight
				}
			};
		},

		/**
		 * Get point time recording flag
		 * @return boolean point time flag
		 */
		isTimePoint: function () {
			return this.timePoint;
		},

		/**
		 * Sets generated Mus data for playback
		 * @param data array generated Mus data
		 */
		setData: function (data) {
			if (data.frames) this.frames = data.frames;
			if (data.window) this.window = data.window;
		},

		/**
		 * Sets recorded frames for playback
		 * @param frames array the frames array
		 */
		setFrames: function (frames) {
			this.frames = frames;
		},

		/**
		 * Sets custom window size for playback
		 * @param width integer window width
		 * @param height integer window height
		 */
		setWindowSize: function (width, height) {
			this.window.width = width;
			this.window.height = height;
		},

		/**
		 * Sets a playback speed based on Mus speed set
		 * @param speed integer the playback speed
		 */
		setPlaybackSpeed: function (speed) {
			this.playbackSpeed = speed;
		},

		/**
		 * Sets point time recording for accurate data
		 * @param 
		 */
		setTimePoint: function (timePoint) {
			this.timePoint = timePoint;
		},

		/**
		 * Informs if Mus is currently recording
		 * @return boolean is recording?
		 */
		isRecording: function () {
			return this.recording;
		},

		/**
		 * Informs if Mus is currently playing
		 * @return boolean is playing?
		 */
		isPlaying: function () {
			return this.playing;
		},

		/** Mus speed constants **/

		speed: {
			SLOW: 35,
			NORMAL: 15,
			FAST: 5
		},

		getXpathFromElement: function (elm) {
			var allNodes = document.getElementsByTagName('*');
			for (var segs = []; elm && elm.nodeType == 1; elm = elm.parentNode) {
				for (var i = 1, sib = elm.previousSibling; sib; sib = sib.previousSibling) {
					if (sib.localName == elm.localName) i++;
				};
				segs.unshift(elm.localName.toLowerCase() + '[' + i + ']');
			};
			return segs.length ? '/' + segs.join('/') : null;
		},

		getElementByXpath: function (path) {
			var evaluator = new XPathEvaluator();
			var result = evaluator.evaluate(path, document.documentElement, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null);
			return result.singleNodeValue;
		},

	};

	return Mus;

})));