<h1># Shuffle letters</h1>

<p>hover on texts to see the effect</p>

<nav>
	<ul>
		<li>
			<a class="shuffle" href="#">shuffle</a>
		</li>
		<li>
			<a class="shuffle" href="#">texts</a>
		</li>
		<li>
			<a class="shuffle" href="#">hover</a>
		</li>
	</ul>
</nav>

<a target="_blank" href="http://www.hermesgrau.com" class="website">www.hermesgrau.com</a>

html, body {
	box-sizing: border-box;
	font-size: 12px;
	font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
	background: #fff;
	width: 100%;
	height: 100%;
	padding: 10px;
		-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

body * {
	box-sizing: border-box;
}

h1 {
	position: absolute;
	bottom: 10px;
	font-size: 16px;
	font-weight: bold;
	color: #ccc;
}

a.website {
	position: absolute;
	bottom: 10px;
	right: 10px;
}

a {
	color: #000;
	text-decoration: none;
}

p {
	//text-transform: uppercase;
	color: #888;
	margin-bottom: 30px;
}

nav ul li {
	float: left;
	margin-right: 50px;
	
	&:last-child { margin-right: 0 }
	
	a {
		font-family: 'Courier New', Courier, monospace;
		font-size: 14px;
		text-transform: uppercase;
		letter-spacing: .1em;
	}
}

jQuery('document').ready(function($) {
	// Set effect velocity in ms
	var velocity = 50;
	
	var shuffleElement = $('.shuffle');

	$.each( shuffleElement, function(index, item) {
		$(item).attr('data-text', $(item).text());
	});

	var shuffle = function(o) {
		for(var j, x, i = o.length; i; j = parseInt(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x);
		return o;
	};

	var shuffleText = function(element, originalText) {
		var elementTextArray = [];
		var randomText = [];

		for ( i=0;i<originalText.length;i++) {
			elementTextArray.push(originalText.charAt([i]));
		};

		var repeatShuffle = function(times, index) {
			if ( index == times ) {
				element.text(originalText);
				return;
			} 

			setTimeout( function() {
				randomText = shuffle(elementTextArray);
				for (var i=0;i<index;i++) {
					randomText[i] = originalText[i];	
				}
				randomText = randomText.join('');
				element.text(randomText);
				index++;
				repeatShuffle(times, index);
			}, velocity);	
		}
		repeatShuffle(element.text().length, 0);
	}

	shuffleElement.mouseenter(function() {
		shuffleText($(this), $(this).data('text'));
	});
});