var localModeEnabled = false;
var howlerSounds = [];

function ready(fn) {
	if (document.attachEvent ? document.readyState === "complete" : document.readyState !== "loading") {
		fn();
	} else {
		document.addEventListener("DOMContentLoaded", fn);
	}
}

function sleep(ms) {
	return new Promise(resolve => setTimeout(resolve, ms));
}

ready(function() {
	var sections = document.querySelectorAll("section");
	var nav = document.querySelectorAll("nav a");

	sections[0].style.display = "block";

	nav.forEach(function(item) {
		item.onclick = function(e) {
			e.preventDefault();

			var target = e.target.href.split("#");
			var id = target[target.length - 1];

			hideSections();

			document.querySelector("#" + id).style.display = "block";
		};
	});

	var searchfield = document.querySelector("#search");
	searchfield.focus();

	searchfield.addEventListener("keyup", function() {

		var buttons = document.querySelectorAll(".sound");

		buttons.forEach(function(item) {
			item.style.display = "inline-block";
		});

		buttons.forEach(function(item) {
			var name = item.firstChild.innerHTML;
	
			if (name.toLowerCase().indexOf(searchfield.value.toLowerCase()) === -1) {
				item.style.display = "none";
			}
		});
	});

	var reset = document.querySelector("#reset");
	var sounds_nav = document.querySelector("#sounds-nav");

	reset.addEventListener("click", resetSearch, false);
	sounds_nav.addEventListener("click", resetSearch, false);

	// keyboard listener for global key strokes/inputs
	document.onkeydown = function(evt) {
    		evt = evt || window.event;
		if (evt.keyCode == 27) {
			// esc key
			resetSearch();
		} else if ((evt.keyCode == 75 || evt.keyCode == 67) && evt.ctrlKey) {
			// ctrl+k and ctrl+c key binding
			killAllAudio();
		} else if (evt.keyCode == 88 && evt.ctrlKey){
			toggleLocalMode();			
		}	
	};
	
	// TODO: make sure that only sound buttons get selected, not ALL a-tags. See d4377e0f49dc8dd5787f4466c9ab7f7e7cd37ec5#note_857
	// keyboard listener for enter key
	var all_a_s = document.getElementsByTagName("a"); 
	for(i=0; i<all_a_s.length; i++) {	
	    all_a_s[i].addEventListener('keypress', async function (e) {
		    var key = e.keyCode;
		    var source = e.target;
		    // keylistener for enter or ctrl+enter (which is k10 on chrome)
		    if (key === 13 || (key === 10 && e.ctrlKey)) {
			if(e.ctrlKey){
				killAllAudio();
				await sleep(100);
			}
			source.classList.add("sound-pressed");
		    	source.onclick(); 
			await sleep(300);
			source.classList.remove("sound-pressed"); 
		    }
		});
	}

});


function resetSearch() {
	var searchfield = document.querySelector("#search");
	var buttons = document.querySelectorAll(".sound");

	// TODO: check if blur() still necessary or if value="" and focus() are already enough. See d4377e0f49dc8dd5787f4466c9ab7f7e7cd37ec5#note_871
	searchfield.blur();

        buttons.forEach(function(item) {
        	item.style.display = "inline-block";
        });

        searchfield.value = "";
	searchfield.focus();
}

function playStream(){
	var streamUrl = document.querySelector("#streaming-url").value;
	ajaxRequest("/?video="+encodeURI(streamUrl));	
}

function hideSections() {
	var sections = document.querySelectorAll("section");

	sections.forEach(function(item, i) {
		item.style.display = "none";
	});
}

function ajaxRequest(url){
    var ajaxRequest;
    try{
        ajaxRequest = new XMLHttpRequest();
        ajaxRequest.open("GET", url, true);
        ajaxRequest.send(null);
    }catch (e){
        alert("Your browser broke!");
        return false;
    }
}

function toggleLocalMode(){
	toggleButton = document.getElementById("local-mode-button").children[0];
	if(localModeEnabled){
		localModeEnabled = false;
		toggleButton.classList.remove("local");
		toggleButton.innerHTML = "[S]";
		toggleButton.title = "play sounds on server";
	}else{
		localModeEnabled = true;
		toggleButton.classList.add("local");
                toggleButton.innerHTML = "[L]";
                toggleButton.title = "play sounds locally";
	}	
}

function playSound(filename){
	if(localModeEnabled){
		// play local audio using howler.js
		var sound = new Howl({
		  src: ['/sounds/'+filename]
		});
		sound.play();
		howlerSounds.push(sound);
	}else{
		ajaxRequest("/play/"+filename);
	}
}

function killAllHowlerAudio(){
	for(i=0; i<howlerSounds.length; i++) {
            howlerSounds[i].stop();
	}	
}

function killAllAudio(){
	if (localModeEnabled) {
        	killAllHowlerAudio();
        } else {
                ajaxRequest("/?killvideo=yes");
        }
}