var scanInterval = 3000;
// Bouttons de commande
addEventListener("DOMContentLoaded", function() {
    sendCmd("/scan");
    sendCmd("/browse");
    sendCmd("/all/rssi");
    // Tous les elements avec la classe ".command"
    var commandButtons = document.querySelectorAll(".command");
    for (var i=0, l=commandButtons.length; i<l; i++) {
	var button = commandButtons[i];
	// Sur un click
	button.addEventListener("click", function(event) {
	  // On intercepte le signal
	    event.preventDefault();
	      // On recupere la valeur de value="" sur le bouton
	    var clickedButton = event.currentTarget;
	    var command = clickedButton.value;
	    if (( command == "/10.42.0.135/reboot" ) || ( command == "/10.42.0.135/poweroff" )) {
		if ( !confirm("Êtes vous certain de vouloir effectuer cette action ?") ) {
		    return 0;
		}
	    } else if ( command == "/scan" ) {
		document.getElementById("status_all").innerHTML = "Searching network for live hosts...";
	    } else if ( command.indexOf("/sort") > -1 ){ 
		if (command.indexOf('/1/') > -1 ) {
		    clickedButton.value = clickedButton.value.replace('/1/','/0/')
		} else {
		    clickedButton.value = clickedButton.value.replace('/0/','/1/')
		}
	    } else if ( command.indexOf("/move") > -1 ) {
		const test_array = [5,6,7,8];
		for (i=test_array.length, l=0;i>l;i--){
		    console.log(test_array[i-1]);
		    sendCmd("/all/move/" + test_array[i-1] + "/1");
		    
		};
		//setInterval( sendCmd, scanInterval, "/all/move/16/1");
	    };

	      // On envoie la commande en AJAX
	    var request = new XMLHttpRequest();
	    if ( command == "/scan" ) {
		request.onload = refreshInfos(command);
	    }
	    // On construit la commande
	    request.open("GET", command, true);
	    // et on l'envoie
	    request.send();
	});
    }
}, true);

// Affichage des infos
function parseResult(command, infos_array) {
    //~ var request = new XMLHttpRequest();
    //~ request.onload = function() {
	//~ if (request.readyState === request.DONE) {
	    //~ if (request.status === 200) {
	    //~ // responseText is a string, use parse to get an array.
		//~ const infos_array = JSON.parse(request.responseText);
		switch (command) {
		    case "/all/status": 
			// Iterate over array
			for (var i = 0, l=infos_array.length; i<l; i++) {
			    document.getElementById("status_"+infos_array[i].host).innerHTML = "Playing " + infos_array[i].file + " : " + infos_array[i].time + " / " + infos_array[i].leng;
			    if (infos_array[i].loop == "true") { document.getElementById("loop_ind_" + infos_array[i].host).style.backgroundColor = "#0f0"} else {document.getElementById("loop_ind_" + infos_array[i].host).style.backgroundColor = "#f00"};
			    if (infos_array[i].repeat == "true") { document.getElementById("repeat_ind_" + infos_array[i].host).style.backgroundColor = "#0f0"} else {document.getElementById("repeat_ind_" + infos_array[i].host).style.backgroundColor = "#f00"};
			};
			break;
		    case "/all/list":
			for (var i = 0, l=infos_array.length; i<l; i++) {
			    document.getElementById("playlist_"+infos_array[i].host).innerHTML = infos_array[i].leng + " item(s) in playlist - " + infos_array[i].duration;
			    var items_array = Array.from(infos_array[i].items);
			    var html_table  = "<table>" + 
						"<tr>" + 
							"<th>Id</th>" + 
							"<th>Filename</th>" + 
							"<th>Duration</th>" + 
						"</tr>";
			    for (var j = 0, k=items_array.length; j<k; j++) {
				    item_meta = items_array[j].split(';');
				    html_table += "<tr>" + 
							"<td>" + item_meta[0] + "</td>" +
							"<td>" + item_meta[1] + "</td>" + 
							"<td>" + item_meta[2] + "</td>" + 
						  "</tr>" ;
			    }
			    html_table += "</table>";
			    document.getElementById("playlist_"+infos_array[i].host).innerHTML += html_table;
			};
			break;
		    case "/scan":
			var host_up = infos_array[0];
			var host_down = infos_array[1];
			for ( var i=0, l=host_up.length; i<l; i++){
				document.getElementById(host_up[i]).style.display = 'initial';
			}
			for ( var i=0, l=host_down.length; i<l; i++){
				document.getElementById(host_down[i]).style.display = 'none';
			}
			//~ if (host_up.length) { 
				//~ scanInterval = 10000;
				//~ document.getElementById("status_all").innerHTML = "Scan intarvel set to " + scanInterval;
			//~ }
			document.getElementById("status_all").innerHTML = host_up.length + " client(s) found.";
			break;
		    case "/browse":
			var html_table  = "<table>" + 
					   "<tr>" + 
						"<th>Filename</th>" + 
						"<th>Duration</th>" + 
					   "</tr>";
			for (var j = 0, k=infos_array.length; j<k; j++) {
				html_table += "<tr>" + 
						    "<td>" + infos_array[j] + "</td>" +
						    "<td>" + "00:00" + "</td>" +
					      "</tr>" ;
			}
			html_table += "</table>";
			document.getElementById("filelist").innerHTML += html_table;
			break;
		    case "/all/rssi":
			var signal_color = 40;
			var best_rssi = 30;
			var worst_rssi = 70;
			for (var j = 0, k=infos_array.length; j<k; j++) {
			    var rssi_norm = Math.ceil( (worst_rssi - parseInt(infos_array[j].rssi) ) / ( worst_rssi - best_rssi ) * 4 );
			    signal_color = (rssi_norm-1) * signal_color;
			    // Reset to grey
			    for (i=0, l=4; i<l;i++) {
				document.getElementById("wl_"+i).style.backgroundColor = "hsl(0, 0%, 65%)";
			    };
			    // Color it
			    for (i=0, l=rssi_norm; i<l;i++) {
				document.getElementById("wl_"+i).style.backgroundColor = "hsl(" + signal_color + ", 100%, 50%)";
			    };
			};
			break;
		}; // End switch case
	    //~ };
	//~ };
    //~ };
      //~ // On construit la commande
      //~ request.open("GET", command, true);
      //~ // et on l'envoie
      //~ request.send(); 
};

function sendCmd(command) {
    var request = new XMLHttpRequest();
    request.onload = function() {
	if (request.readyState === request.DONE) {
	    if (request.status === 200) {
	    // responseText is a string, use parse to get an array.
		var infos_array = JSON.parse(request.responseText);  
		//console.log(infos_array);
		parseResult(command, infos_array);
		//return infos_array;
	    };
	};
    };
    // On construit la commande
    request.open("GET", command, true);
    // et on l'envoie
    request.send();     
};
setInterval( sendCmd, 500, "/all/status");
setInterval( sendCmd, 1000, "/all/list");
setInterval( sendCmd, scanInterval, "/scan");
setInterval( sendCmd, 10000, "/all/rssi");


/* TODO : 
  * Change scanInterval after first results are in (3 to 30 seconds)
  * 
*/