will-in-wi/stats_js.html Secret

## stats_js.html
<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, user-scalable=no" />

	<title>Bug stats</title>

	<style>
		progress {
			display: block;
			width: 100%;
		}

		table {
			width: 100%;
			height: 20px;
		}

		.progress_listing td {
			background-color: #efefef;
		}

		.progress_listing td.fail {
			background-color: #EF2929;
		}

		.progress_listing td.success {
			background-color: #73D216;
		}
	</style>

	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/0.2.0/Chart.min.js"></script>
	<script type="text/javascript">
		$(function(){
			"use strict";

			var src = 'http://ondemand-http.stream.publicradio.org/minnesota/general/performances/2008/08/08/test13_20080808_64.mp3';

			var success = 0;
			var fail = 0;

			var iterations = 100;


			// Create listing of tries.
			for (var i = 0; i < iterations; i++) {
				$('.progress_listing').append('<td />');
			};


			var audio = new Audio();

			var change_src = function(src) {
				audio.src = src;
				audio.play();
			}

			audio.addEventListener('canplay', function(ev) {
				if (audio.duration === 0) {
					fail++;
					console.log('Fail');
					$('.progress_listing td:nth-child(' + (success + fail) + ')').addClass('fail');
				} else {
					success++;
					console.log('Success');
					$('.progress_listing td:nth-child(' + (success + fail) + ')').addClass('success');
				}

				$('progress').attr('value', ((success + fail) / iterations) * 100);

				if (success + fail >= iterations) {
					audio.pause();
					console.log('successes: ' + success);
					console.log('failures: ' + fail);

					$('.output').html('<div>Tests are done</div><div>Successes: ' + success + ', ' + ((success / iterations) * 100) + '%</div><div>Failures: ' + fail + ', ' + ((fail / iterations) * 100) + '%</div>');

					var ctx = $("#myChart").get(0).getContext("2d");
					var data = [
						{
							value: success,
							color: "#73D216"
						},
						{
							value: fail,
							color: "#EF2929"
						}
					]
					var myNewChart = new Chart(ctx).Pie(data);
				} else {
					change_src(src);
				}
			});

			$('.start').click(function(e){
				e.preventDefault();

				audio.src = src;
				audio.play();
			});
		});
	</script>
</head>
<body>
	<a href="#" class="start">Start test.</a>
	<div class="output">
		Running tests…
	</div>
	<progress max="100" value="0"></progress>
	<table>
		<tbody>
			<tr class="progress_listing"></tr>
		</tbody>
	</table>
	<canvas id="myChart" style="width: 100%;" height="400"></canvas>
</body>
</html>
	<!doctype html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, user-scalable=no" />

	<title>Bug stats</title>

	<style>
	progress {
	display: block;
	width: 100%;
	}

	table {
	width: 100%;
	height: 20px;
	}

	.progress_listing td {
	background-color: #efefef;
	}

	.progress_listing td.fail {
	background-color: #EF2929;
	}

	.progress_listing td.success {
	background-color: #73D216;
	}
	</style>

	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/0.2.0/Chart.min.js"></script>
	<script type="text/javascript">
	$(function(){
	"use strict";

	var src = 'http://ondemand-http.stream.publicradio.org/minnesota/general/performances/2008/08/08/test13_20080808_64.mp3';

	var success = 0;
	var fail = 0;

	var iterations = 100;


	// Create listing of tries.
	for (var i = 0; i < iterations; i++) {
	$('.progress_listing').append('<td />');
	};


	var audio = new Audio();

	var change_src = function(src) {
	audio.src = src;
	audio.play();
	}

	audio.addEventListener('canplay', function(ev) {
	if (audio.duration === 0) {
	fail++;
	console.log('Fail');
	$('.progress_listing td:nth-child(' + (success + fail) + ')').addClass('fail');
	} else {
	success++;
	console.log('Success');
	$('.progress_listing td:nth-child(' + (success + fail) + ')').addClass('success');
	}

	$('progress').attr('value', ((success + fail) / iterations) * 100);

	if (success + fail >= iterations) {
	audio.pause();
	console.log('successes: ' + success);
	console.log('failures: ' + fail);

	$('.output').html('<div>Tests are done</div><div>Successes: ' + success + ', ' + ((success / iterations) * 100) + '%</div><div>Failures: ' + fail + ', ' + ((fail / iterations) * 100) + '%</div>');

	var ctx = $("#myChart").get(0).getContext("2d");
	var data = [
	{
	value: success,
	color: "#73D216"
	},
	{
	value: fail,
	color: "#EF2929"
	}
	]
	var myNewChart = new Chart(ctx).Pie(data);
	} else {
	change_src(src);
	}
	});

	$('.start').click(function(e){
	e.preventDefault();

	audio.src = src;
	audio.play();
	});
	});
	</script>
	</head>
	<body>
	<a href="#" class="start">Start test.</a>
	<div class="output">
	Running tests…
	</div>
	<progress max="100" value="0"></progress>
	<table>
	<tbody>
	<tr class="progress_listing"></tr>
	</tbody>
	</table>
	<canvas id="myChart" style="width: 100%;" height="400"></canvas>
	</body>
	</html>