<?php
echo '</body><head><link rel="stylesheet" href="sharebuttons/sbstyle.css"></head><body><h2>Dienste ein-/ausblenden</h2><table class="hiddentable"><tbody>';
$i = 0;
foreach(unserialize(file_get_contents('sharebuttons/sb-service-conf.psr',true)) AS $name=>$data) {
	echo (is_int($i / 6) ? '<tr>' : '').'<td><input type="checkbox" id="show_'.$name.'" onclick="update_services(this)" '.($data['show']==true ? 'checked' : '').'></td><td><label for="show_'.$name.'"><img src="sharebuttons/buttons/'.$name.'.svg" style="width:35px"></td><td><label for="show_'.$name.'">'.$name.'</label></td>';
	$i++;
}
echo '</tbody><table><p><a href="sharebuttons/addservice.php"><img src="img/plus.png" style="width:15px"> Weiteren Dienst hinzufügen</a></p><h2>Reihenfolge</h2><div class="text"><div id="buttons_parent" style="margin:20px">Kein Element ausgewählt. Wählen Sie eines aus.</div><div id="service_order_demonstration" class="sharebuttons">';
include(__DIR__.'/button-data-generator.php');
echo '<noscript>Diese Einstellung benötigt Javascript.</noscript></div></div><h2>Darstellung</h2><div class="text" style="overflow:auto"><textarea id="source" style="float:right">'.file_get_contents('sharebuttons/sbstyle.css').'</textarea></div>';
?><script>
function update_services(t) {
	var cb = t.parentElement.parentElement.parentElement.getElementsByTagName("input");
	var i;
	var services = {};
	for (i = 0; i < cb.length; i++) {
		services[cb[i].id.replace("show_","")] = cb[i].checked;
	}
	var xhr = new XMLHttpRequest();
	xhr.open("POST","sharebuttons/updateshowservice.php");
	xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
	xhr.addEventListener("load",function() {
		console.log(this.responseText);
	});
	xhr.send("data=" + JSON.stringify(services));
	if(t.checked == true) order.push(t.id.replace("show_",""));
	else order.splice(order.indexOf(t.id),1);
	update_graphic();
}
var selected;
function save_order() {
	var xhr = new XMLHttpRequest();
	xhr.open("POST","sharebuttons/saveorder.php");
	xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
	xhr.addEventListener("load",function() {
		console.log(this.responseText);
	});
	xhr.send("data=" + JSON.stringify(order));
}
function move_service_left() {
	order.splice(order.indexOf(selected) - 1,2,selected,order[order.indexOf(selected) - 1]);
	update_graphic();
	save_order();
	show_buttons();
}
function move_service_right() {
	order.splice(order.indexOf(selected),2,order[order.indexOf(selected) + 1],selected);
	update_graphic();
	save_order();
	show_buttons();
}
function process_keystrokes(e) {
	if(e.keyCode == 37 && order.indexOf(selected) != 0) move_service_left();
	if(e.keyCode == 39 && order.indexOf(selected) != order.length - 1) move_service_right();
}
function show_buttons() {
	window.removeEventListener("keydown",process_keystrokes);
	document.getElementById("buttons_parent").innerHTML = "";
	if(order.indexOf(selected) != 0) {
		var left = document.createElement("img");
		left.src = "img/arrow.svg";
		left.style.height = "40px";
		left.style.transform = "rotate(-90deg)";
		left.style.cursor = "pointer";
		left.addEventListener("click",function() {
			move_service_left();
		});
		document.getElementById("buttons_parent").appendChild(left);
	}
	var number = document.createElement("span");
	number.style.fontSize = "40px";
	number.innerHTML = " " + (order.indexOf(selected) + 1) + " ";
	document.getElementById("buttons_parent").appendChild(number);
	if(order.indexOf(selected) != order.length -1) {
		var right = document.createElement("img");
		right.src = "img/arrow.svg";
		right.style.height = "40px";
		right.style.transform = "rotate(90deg)";
		right.style.cursor = "pointer";
		right.addEventListener("click",function() {
			move_service_right();
		});
		document.getElementById("buttons_parent").appendChild(right);
	}
	window.addEventListener("keydown",process_keystrokes);
}
function update_graphic() {
	document.getElementsByClassName("sharebuttons")[0].innerHTML = "";
	order.forEach(function(n) {
		var a = document.createElement("a");
		a.href = "javascript:;";
		a.addEventListener("click",select_service);
		a.id = n;
		if(selected == n) a.style.borderBottom = "1px solid black";
		var b = document.createElement("img");
		b.src = "sharebuttons/buttons/" + n + ".svg";
		a.appendChild(b);
		document.getElementsByClassName("sharebuttons")[0].appendChild(a);
	});
}
var order = <?php echo json_encode(array_values($order)); ?>;
update_graphic();
function select_service() {
	selected = this.id;
	update_graphic();
	show_buttons(order.indexOf(this.id),this.id);
}
</script>