2 files changed, 18 insertions, 4 deletions

diff --git a/src/viz/index.css b/src/viz/index.css
index 73c6f42..656f85d 100644
--- a/src/viz/index.css
+++ b/src/viz/index.css
@@ -61,7 +61,6 @@ main {
 
 h2.dispstreamheader {
   font-variant: small-caps;
-
 }
 
 ul.controls {
@@ -149,6 +148,13 @@ div.dispvalueheader {
   padding-top: 10px;
 }
 
+input.dispvalueheaderafter {
+  float:right;
+  display:inline;
+  margin-top:-35px;
+}
+
+
 div.dispvaluevalue {
   margin-top:10px;
   margin-left:10px;
diff --git a/src/viz/index.js b/src/viz/index.js
index e282026..2485912 100644
--- a/src/viz/index.js
+++ b/src/viz/index.js
@@ -2,6 +2,7 @@ var qintv_ms = 5000;
 var uripart = "/updates?";
 var lastfrom = "";
 var stuff_to_display = {"clients":"none","*":showvalue,"client-count":showvalue, "bytes-sent":showgauge, "fuckups-per-second":showasgraph};
+var sidseen = [];
 
 
 $(document).ready(function()
@@ -20,11 +21,16 @@ function getstreamdiv(sid) {
 	return elem;
 }
 
+function killvalue(name) {
+	stuff_to_display[name]="none";
+	$.each(sidseen,function(index,sid){ $("#li-"+sid+"_"+name).remove() });
+}
+
 function showvalue(sid, name, value, jsdate) {
 	var divid = sid+"_"+name;
 	var elem = $("#"+divid);
 	if (elem.length<1) {
-		getstreamdiv(sid).append('<li class="dispvalue size1"><div class="dispvalueheader">'+ name +'</div><div class="dispvaluevalue" id='+divid+'></div></li>');
+		getstreamdiv(sid).append('<li class="dispvalue size1" id="li-'+divid+'""><div class="dispvalueheader">'+ name +'</div><input type="button" class="dispvalueheaderafter" value="X" onClick="killvalue(\''+name+'\');"></input><div class="dispvaluevalue" id='+divid+'></div></li>');
 		elem = $("#"+divid);
 	}
 	elem.html("<strong>"+value+"</strong><br/><span style='font-size:smaller;'>@"+jsdate.toLocaleDateString()+" "+jsdate.toLocaleTimeString()+"</span>");
@@ -35,7 +41,7 @@ function showgauge(sid, name, value) {
 	var divid = sid+"_"+name;
 	var elem = document.getElementById(divid);
 	if (!elem) {
-		getstreamdiv(sid).append('<li class="dispvalue quadsize"><div class="dispvalueheader">'+ name +'</div><div class="dispvaluevalue" id='+divid+'></div></li>');
+		getstreamdiv(sid).append('<li class="dispvalue quadsize" id="li-'+divid+'""><div class="dispvalueheader">'+ name +'</div><input type="button" class="dispvalueheaderafter" value="X" onClick="killvalue(\''+name+'\');"></input><div class="dispvaluevalue" id='+divid+'></div></li>');
 		elem = document.getElementById(divid);
 		gauges[divid] = new google.visualization.Gauge(elem);
 	}
@@ -49,7 +55,7 @@ function showasgraph(sid, name, value, jsdate) {
 	var divid = sid+"_"+name;
 	var elem = document.getElementById(divid);
 	if (!elem) {
-		getstreamdiv(sid).append('<li class="dispvalue graphsize"><div class="dispvalueheader">'+ name +'</div><div class="dispvaluevalue" id='+divid+'></div></li>');
+		getstreamdiv(sid).append('<li class="dispvalue graphsize" id="li-'+divid+'""><div class="dispvalueheader">'+ name +'</div><input type="button" class="dispvalueheaderafter" value="X" onClick="killvalue(\''+name+'\');"></input><div class="dispvaluevalue" id='+divid+'></div></li>');
 		elem = document.getElementById(divid);
 		graphdata[divid]=[];
 		graphs[divid] = new Dygraph(elem,graphdata[divid],{legend:'none',title:sid+"-"+name,labels:["Date/Time",name]});
@@ -59,8 +65,10 @@ function showasgraph(sid, name, value, jsdate) {
 }
 
 function graphS5Status(data) {
+	sidseen=[];
 	$.each(data, function(index, stream) {
 		var sid = stream["streamer-id"].format + '-' + stream["streamer-id"].quality;
+		sidseen.push(sid);
 		lastfrom = "from="+stream["start-time"];
 		var jsdate = new Date(stream["start-time"]);
 		qintv_ms = stream["duration-ms"]; //doesnt really change anything yet