{% extends "snippets/layout.html" %}

{% block title "Beats per Minute | Maximilian Möhring" %}

{% block css %}
	.main {
		font-size: inherit !important;
	}
	.jumbotron {
		background-color: inherit !important;
		border: 1px solid grey;
	}
{% endblock %}

{% block main %}
<div class="container text-center">
	<span id="countBpm">
		<div class="jumbotron">
			<div class="flavor-text">
				<!--h1>Hier klicken um die BPMs zu zählen:</h1-->
				<h1>Click here to count beats per minute</h1>
				<!--em>Ist das Lied tanzbar? Was kann man dazu tanzen?</em-->
				<em>How fast is the song? What's the matching dance?</em>
			</div>
			<h2><span id="showBpm">0</span> BPM</h2>
			<button class="btn btn-primary">Click</button>
			<div class="mt-5 mb-5 container" id="showDances">
				<div class="row mb-2" id="showDances-standard">
				</div>
				<div class="row mb-2" id="showDances-latein"></div>
			</div>
		</div>
	</span>
	<button id="reset" class="btn btn-secondary">Reset</button>

	<div class="row">
{% set type = "" %}
{% for dance in dances %}
	{% if dance.type != type %}
		{% set type = dance.type %}
		<div class="col-12 mt-4 mb-2"> <h2>{{ type|capitalize }}</h2> </div>
	{% endif %}

	<div class="col" id="{{ dance.name }}">
		<h3> {{ dance.name }} </h3>
		{{ dance.minBarspm }} bis {{ dance.maxBarspm }} Takte pM
		<br>
		{{ dance.minBpm }} bis {{ dance.maxBpm }} BpM
		<br>
		{{ dance.bar }} Takt
	</div>

{% endfor %}
	</div>
</div>

<script>
	var lastClick = 0;
	var bpm = [];
	var dances = {{ dump_dances() }};
	var appendedDances = [];
	var appendedHeader = [];
	function median(values){
		if ( values.length === 0 ) {
			return 0;
		}

		values.sort(function(a,b){
			return a-b;
		});

		var half = Math.floor(values.length / 2);

		if (values.length % 2) {
			return values[half];
		}

		return (values[half - 1] + values[half]) / 2.0;
	}
	function reset() {
		lastClick = 0;
		bpm = [];
		appendedDances = [];
		appendedHeader = [];
		document.getElementById("showBpm").innerHTML = 0;
		document.getElementById("showDances-standard").innerHTML = "";
		document.getElementById("showDances-latein").innerHTML = "";
	}
	function getBpm(bpm) {
		/* slice() copies by value, not by reference, so the median() doesn't mess with the array */
		return Math.round(median(bpm.slice()));
	}
	function display(bpm) {
		document.getElementById("showBpm").innerHTML = getBpm(bpm.slice());
	}
	window.addEventListener("load",function() {
		document.getElementById("countBpm").addEventListener("click", function(e){
			var d = new Date();
			var t = d.getTime();
			var seconds = ( t - lastClick ) / 1000;

			if ( 0 != lastClick ) {

				if ( seconds > 10 ) {
					// reset after 10 seconds delay
					reset();
				} else {
					var _bpm = 60 / seconds
					bpm.push( _bpm );
					if ( bpm.length > 25 ) {
						// keep only last 10 clicks
						bpm.shift();
					}
					display(bpm);
				}

			}
			lastClick = t;

			if ( bpm.length >= 5 ) {
				for ( i = 0; i < dances.length; i++ ) {
					var dance = dances[i];
					if ( ( (dance.minBpm-3) <= getBpm(bpm) ) && ( getBpm(bpm) <= (dance.maxBpm+3) ) && -1 == appendedDances.indexOf( dance.name ) ) {
						var danceDiv = document.createElement("div");
						danceDiv.innerHTML = document.getElementById( dance.name ).innerHTML;
						danceDiv.classList.add("dance-created");
						danceDiv.classList.add("col");

						if ( -1 == appendedHeader.indexOf( dance.type ) ) {
							var danceHeader = document.createElement("div");
							danceHeader.classList.add("col-12");
							danceHeader.classList.add("mb-2");
							danceHeader.classList.add("mt-4");
							danceHeader.innerHTML = "<h3> Mögliche " + dance.type[0].toUpperCase() + dance.type.substr(1) + "-Tänze</h3>";
							//danceHeader.innerHTML = "<h3> Possible " + dance.type[0].toUpperCase() + dance.type.substr(1) + " dance</h3>";
							document.getElementById( "showDances-" + dance.type ).appendChild(danceHeader);
							appendedHeader.push( dance.type );
						}

						appendedDances.push( dance.name );

						document.getElementById( "showDances-" + dance.type ).appendChild(danceDiv);
					}
				}
			}

		});
		document.getElementById("reset").addEventListener("click", function(e){
			reset();
		});
	});
	if ('serviceWorker' in navigator){
		navigator.serviceWorker.register('serviceworker.js').then(function(registration){
			console.log('ServiceWorker registration successful with scope: ', registration.scope);
		}).catch(function(err){
			console.log('ServiceWorker registration failed: ', err);
		});
	} else {
		console.log('no service worker found. offline access is not granted.');
	}

</script>
{% endblock %}