function double() {
		if (document.getElementById("meter1") == undefined) return null;
		var element2 = document.getElementById("left");
        var element = document.getElementById("right");	
	
        if (document.getElementById("meter2").value == "0") {
            element.style.display = "none";
			element2.className = "box_full";
			destroyChart(); loadChart();
        }
        else {
            element.style.display = "block";
			element2.className = "box";
			destroyChart(); loadChart();
        }
    }
	
	function loadMeters() {
	if (document.getElementById("meter1") == undefined) return null;
		var text = "";
		
		fetch('https://5groningen02.housing.rug.nl/api/pq/meters')
			.then(function (response) {
				if (response.status != 200) return new Promise((resolve) => { resolve([]); });
				return response.json()
			})
			.then(function (data) {
				if (data == null) return;
				var name = "";
				for (var i = 0; i < data.length; i++) {
					if (data[i]["name"] == ""){name= 'new';} else {name = data[i]["name"];}
					text = text + '<option value="' + data[i]["id"] + '">' + name + '</option>';
					}
				if (document.getElementById("meter1") != undefined){
					document.getElementById("meter1").innerHTML = text;
				}
				if (document.getElementById("meter2")!= undefined){
					document.getElementById("meter2").innerHTML = '<option value="0" selected>Geen</option>' + text;
				}
				if (document.getElementById("meter1") && document.getElementById("meter2") != undefined){
				double();
				}
			})		
}

	function loadPowerQualityOptions() {
	if (document.getElementById("buttons") == undefined) return null;
		var text = "";
		
		fetch('https://5groningen02.housing.rug.nl/api/pq/list')
			.then(function (response) {
				if (response.status != 200) return new Promise((resolve) => { resolve([]); });
				return response.json()
			})
			.then(function (data) {
				if (data == null) return;
				for (var i = 0; i < data.length; i++) {
					text = text + '<label><input onclick="Hidediv()" type="checkbox" name="'+ data[i] + '" value="'+ data[i] + '"><b>'+ data[i] + '</B></label>'
					}
				if (document.getElementById("buttons") != undefined){
					document.getElementById("buttons").innerHTML = text;
				}
			})		
}
	
	var mapping = {
			'ugem': {label:'Voltage (Gemiddelde)', unit: 'Volt', min:'220', max:'240'},
			'igem': {label:'Ampère (Gemiddelde)', unit: 'Ampère', min:'', max:''},
			'imax': {label:'Ampère (max-piek)', unit: 'Ampère', min:'', max:''},
			'pmax': {label:'Werkelijkvermogen (max-piek)', unit: 'Watt', min:'', max:''},
			'smax': {label:'Schijnbaarvermogen (max-piek)', unit: 'VoltAmpère', min:'', max:''},
			'cgem': {label:'Cos-Phi (Gemiddelde)', unit: 'Cos-Phi', min:'', max:''},
			'ep': {label:'EP', unit: 'EP', min:'', max:''},
		};

    function Hidediv() {
		if (document.getElementById("buttons") == undefined) return null;
		var div_left = "";
		var div_right = "";
		
		document.querySelectorAll("#buttons label input").forEach(function (i) {
			if (i.checked == true){
				var opts = mapping[i.name] || {};
				div_left = div_left + '<div class="box_full"><chart meter-source="meter1" attr="'+ i.name +'" label="'+ (opts.label || i.name) +'" unit="'+ (opts.unit || i.name) +'" min="'+ (opts.min) +'" max="'+ (opts.max) +'"></chart></div>'
				div_right = div_right + '<div class="box_full"><chart meter-source="meter2" attr="'+ i.name +'" label="'+ (opts.label || i.name) +'" unit="'+ (opts.unit || i.name) +'" min="'+ (opts.min) +'" max="'+ (opts.max) +'"></chart></div>'
			}
		})
		
		if (document.getElementById("left") != undefined){
					document.getElementById("left").innerHTML = div_left;
					destroyChart(); loadChart();
				}
		if (document.getElementById("right") != undefined){
					document.getElementById("right").innerHTML = div_right;
					destroyChart(); loadChart();
				}
    }