//
// curr script
//
// var mySite = 'http://192.168.1.23' from myip.js
var url = mySite + '/state';
var rawData = [];
var avgData = [];
var currIndex = 0;
var axes = {};
var totalSamples = 400;         // Width of the graph
for (var i = 0; i < totalSamples; i++)
	rawData[i] = avgData[i] = 0;
setInterval(RefreshStatus, 250);

// -------------------------

getIt = function (aUrl, callback) {
	var xhr = new XMLHttpRequest();
	xhr.open('GET', aUrl, true);
	xhr.responseType = 'text';
	xhr.onload = function (e) {
		if (this.status === 200) {
			callback(this.response);
		}
	};
	xhr.send();
};

function RefreshStatus() {
	getIt(url,
		function (data) {
			obj = JSON.parse(data);
			UpdateGraph(obj.raw, obj.sense);	// raw and averaged
			document.getElementById('uptime').innerHTML = 'Uptime: ' + obj.uptime;
			document.getElementById('currText').innerHTML = 'raw: ' + obj.raw + ', avg: ' + obj.sense;
		}
	);
}

function CurrInit() {
	var canvas = document.getElementById('curr');
	if (null === canvas || !canvas.getContext)
		return;
	ctx = canvas.getContext('2d');
	axes.w = 0.9 * canvas.width;
	axes.h = 0.8 * canvas.height;
	axes.x0 = 0.07 * canvas.width;	// x0 pixels from left to x=0
	axes.y0 = 0.10 * canvas.height;	// y0 pixels from top to y=0
	axes.scaleX = totalSamples;	// # pixels from x=0 to x=1
	axes.scaleY = 1024;
	axes.doNegativeX = false;
	ctx.clearRect(0, 0, canvas.width, canvas.height);
	ctx.rect(0, 0, canvas.width - 1, canvas.height - 1);
	ctx.strokeStyle = 'black';
	ctx.lineWidth = 1;
	ctx.stroke();
	showAxes(ctx, axes);
}

function UpdateGraph(rawCurr, avgCurr) {
	var xx, yy;
	var i;

	if (rawCurr > axes.scaleY)	// safety limit
		rawCurr = axes.scaleY;
	else if (rawCurr < 0)
		rawCurr = 0;
	if (avgCurr > axes.scaleY)	// safety limit
		avgCurr = axes.scaleY;
	else if (avgCurr < 0)
		avgCurr = 0;
	rawData[currIndex] = rawCurr;
	avgData[currIndex] = avgCurr;
	console.log('UpdateGraph(-' + rawCurr + ')');
	CurrInit();

	// Draw Raw
	x0 = axes.x0;
	y0 = axes.y0;
	ctx.beginPath();
	ctx.strokeStyle = '#FF8080';
	ctx.lineWidth = 3;
	for (i = 0; i < totalSamples; i++) {
		pi = (currIndex + 1 + i) % totalSamples;
		xx = x0 + i / axes.scaleX * axes.w;
		yy = y0 + axes.h - rawData[pi] / axes.scaleY * axes.h;
		ctx.lineTo(xx, yy);
	}
	ctx.stroke();
	// Circle
	ctx.beginPath();
	ctx.arc(xx, yy, 7, 0, 2 * Math.PI, false);
	ctx.fillstyle = '#FF8080';
	ctx.fill();
	ctx.strokeStyle = '#FF0000';
	ctx.stroke();

	// Draw Average
	x0 = axes.x0;
	y0 = axes.y0;
	ctx.beginPath();
	ctx.strokeStyle = '#8080FF';
	ctx.lineWidth = 3;
	for (i = 0; i < totalSamples; i++) {
		pi = (currIndex + 1 + i) % totalSamples;
		xx = x0 + i / axes.scaleX * axes.w;
		yy = y0 + axes.h - avgData[pi] / axes.scaleY * axes.h;
		ctx.lineTo(xx, yy);
	}
	ctx.stroke();
	// Circle
	ctx.beginPath();
	ctx.arc(xx, yy, 7, 0, 2 * Math.PI, false);
	ctx.fillstyle = '#8080FF';
	ctx.fill();
	ctx.strokeStyle = '#0000FF';
	ctx.stroke();
	currIndex++;
	currIndex %= totalSamples;
}

function showAxes(ctx, axes) {
	var x0 = axes.x0, w = axes.w;
	var y0 = axes.y0, h = axes.h;
	var xmin = axes.doNegativeX ? 0 : x0;
	ctx.lineWidth = 1;
	ctx.font = '12px Arial';
	ctx.textAlign = 'end';
	ctx.beginPath();
	ctx.strokeStyle = 'rgb(128,128,128)';
	ctx.moveTo(x0, y0); ctx.lineTo(x0, y0 + h);  // Y axis
	for (var y = 0; y <= axes.scaleY; y += 100) {
		yy = axes.y0 + axes.h - y / axes.scaleY * axes.h;
		ctx.moveTo(xmin, yy); ctx.lineTo(x0 + w, yy);  // X axis
		ctx.fillText(y, x0 - 3, yy + 3);
	}
	ctx.font = '18px Arial';
	ctx.textAlign = 'start';
	ctx.fillText('Current Graph', axes.x0, axes.y0 - 6);
	ctx.stroke();
}