var qintv_ms = 5000;
var uripart = "/updates?";
//var lastfrom = "";
var lastfrom="limit=12000";
//var lastfrom = "from="+(new Date(Date.now() - 10*60*1000)).toISOString();
//var lastfrom = "from="+(new Date(Date.now() - 10*60*1000)).toISOString()+"&limit=1000";
//console.log(lastfrom);
//var possible_display_functions = {"Off":"none", "Value":showvalue, "Gauge":showgauge, "Graph":showasgraph};
var possible_display_functions = {"Off":"none", "Value":showvalue, "Graph":showasgraph};
var stuff_to_display = {"clients":"none","*":showvalue,"client-count":showasgraph, "bytes-sent":showasgraph};
var sidseen = [];

$(document).ready(function()
{
  updateS5Stats();
  setInterval("updateS5Stats()", qintv_ms);
});

function getstreamdiv(sid) {
	var elem = $("#"+sid);
	if (elem.length<1) {
		$("#content").append('<div class="container" id="'+sid+'jump"><main><h2 class="dispstreamheader">Stream: '+sid+'</h2><ul id="'+sid+'" class="controls"></ul></main></div>');
		$("#menu").append('<a href="#'+sid+'jump">'+sid+'</a>&nbsp;');
		elem = $("#"+sid);
	}
	return elem;
}

function killvalue(name, nosetselect) {
	stuff_to_display[name]="none";
	$.each(sidseen,function(index,sid){ $("#li-"+sid+"_"+name).remove() });
    if (nosetselect != 1) {
        document.getElementById("opts-"+name).selectedIndex=0;
    }
}

function showvalue(sid, name) {
	var divid = sid+"_"+name;
	var elem = $("#"+divid);
	if (elem.length<1) {
		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);
	}
    var jsdvalue = graphdata[divid][graphdata[divid].length-1];
    var jsdate = jsdvalue[0];
    var value = jsdvalue[1];
	elem.html("<strong>"+value+"</strong><br/><span style='font-size:smaller;'>@"+jsdate.toLocaleDateString()+" "+jsdate.toLocaleTimeString()+"</span>");
}

var gauges = {};
function showgauge(sid, name) {
	var divid = sid+"_"+name;
	var elem = document.getElementById(divid);
	if (!elem) {
		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);
	}
    var value = graphdata[divid][graphdata[divid].length-1][1];
	var data = google.visualization.arrayToDataTable([["Label", "Value"],[name,value]]);
	gauges[divid].draw(data, {});
}

var graphs = {}
function showasgraph(sid, name) {
	var divid = sid+"_"+name;
	var elem = document.getElementById(divid);
	if (!elem) {
		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);
		graphs[divid] = new Dygraph(elem,graphdata[divid],{legend:'none',title:sid+"-"+name,labels:["Date/Time",name]});
	} else {
        graphs[divid].updateOptions({'file':graphdata[divid]});
    }
}

var graphdata = {}
function savedata(sid, name, value, jsdate) {
	var divid = sid+"_"+name;
	if (!graphdata[divid]) {
		graphdata[divid]=[];
	}
    graphdata[divid].push([jsdate,value]);
}

function showasetting(name) {
    var setid = "opts-"+name;
    if (! document.getElementById(setid)) {
        var sts = $('<select/>').attr('id',setid).attr('onchange',"changeSetting('"+name+"',this);");
        $.each(possible_display_functions, function(key, value) {
             var stsopt = $("<option/>").text(key);
            if (stuff_to_display[name] == value) {
                stsopt.attr("selected","true");
            }
            sts.append(stsopt);
        });
        var stsdiv=$("<div>"+name+":</div>");
        stsdiv.append(sts);
        $("#settings").append(stsdiv);
    }
}

function changeSetting(name, selobj) {
    var newdispfunc = possible_display_functions[selobj.options[selobj.selectedIndex].text];
    if (newdispfunc) {
        $("#status").text("Chaging Graph...");
        killvalue(name, 1);
        stuff_to_display[name]=newdispfunc;
        if (typeof(newdispfunc) == 'function') {
            $.each(sidseen,function(index,sid){ newdispfunc(sid,name); });
        }
        $("#status").text("Graph Change Done");
    }
}

function graphS5Status(data) {
	var mysidseen=[];
    var jsdate;
    $("#status").text("Loading data "+lastfrom);
	$.each(data.data, function(index, stream) {
		var sid = stream["streamer-id"].format + '-' + stream["streamer-id"].quality;
		mysidseen.push(sid);
		jsdate = new Date(stream["start-time"]);
		qintv_ms = stream["duration-ms"]; //doesnt really change anything yet
        var jsdateplus = new Date(jsdate.getTime() + qintv_ms);
		var data = stream.data;
        //console.log(data);
        //console.log(graphdata);
		for (var key in data) {
            savedata(sid, key, data[key], jsdateplus);
            if (! stuff_to_display[key]) {
                stuff_to_display[key]=stuff_to_display['*'];
			}
		}	
	});
    $("#status").text("Loading done");
    if (mysidseen.length < 1)
        return;
    sidseen = mysidseen;
    var jsdate1s = new Date(jsdate.getTime() + 1000);
    lastfrom = "from="+jsdate1s.toISOString();
    $("#status").text("Graphing Data");
    $.each(mysidseen, function(index, sid){
        $.each(stuff_to_display, function(key, func){
            if (key!="*")
            {
                showasetting(key);
                if (typeof(func) == 'function')
                {
                    func(sid, key);
                }
            }
        });
    });
    $("#status").text("Graphing Done");
}

function updateS5Stats() {
	var uri = uripart + lastfrom;
    console.log(uri);
	//$.getJSON(uri, "", function(data){alert(data);});
	$.ajax({
	dataType: "json",
	url: uri,
	data: undefined,
	success: graphS5Status, //function(data){alert(data);},
	error: function( jqxhr, textStatus, error ) {
		var err = textStatus + ", " + error;
		console.log( "Request Failed: " + err );}
	});
}