socket.onopen = function() {
	// connected
}

// Indexes for chart series
consumIdx = 0;
gridIdx = 1;
prodIdx = 2;

var msgNumbs = {
	p: "#production",
	ng: "#netgrid",
	c: "#consumption",
};

function netgridcolor(v) {
	if (v <= 0)
		return "#00ff00";
	else
		return "#ff0000";
}

socket.onmessage = function(m) {
	var msg = m.data.split(" ");
	if (msg[0] in msgNumbs) {
		// simple update values
		var num = parseFloat(msg[1]);
		var targ = $(msgNumbs[msg[0]]);
		targ.text(num.toString());

		// update color for ng
		if (msg[0] == "ng") {
			$(".gridpower").css('background', netgridcolor(num));
		}
	} else if (msg[0] == 'o') {
		// received overview data
		var data = JSON.parse(msg[1]);
		console.log(solarchart);
		solarchart.navigator.series[consumIdx].setData(data.consumption, false);
		solarchart.navigator.series[gridIdx].setData(data.grid, false);
		solarchart.navigator.series[prodIdx].setData(data.production, false);
		solarchart.redraw();
	}
}

var solarchart = Highcharts.stockChart('solarchart', {
	chart: {
		type: 'area',
		zoomType: 'x'
	},
	title: {
		text: 'Panel Production'
	},
	subtitle: {
		text: document.ontouchstart === undefined ?
                    'Click and drag in the plot area to zoom in' : 'Pinch the chart to zoom in'
	},
	navigator: {
		adaptToUpdatedData: false, // XXX - keep?
		series: [
			{
				name: 'consumptionNav',
				showInNavigator: true,
				data: [],
			},
			{
				name: 'gridNav',
				showInNavigator: true,
				data: [],
			},
			{
				name: 'productionNav',
				showInNavigator: true,
				data: [],
			},
		]
	},
	xAxis: {
		type: "datetime",
		title: {
			enabled: false
		}
	},
	yAxis: {
		title: {
			text: 'kW'
		}
	},
	tooltip: {
		split: true,
		valueSuffix: ' kW'
	},
	plotOptions: {
		area: {
			stacking: 'normal',
			lineColor: '#666666',
			lineWidth: 1,
			marker: {
				lineWidth: 1,
				lineColor: '#666666'
			}
		}
	},
	series: [
		{
			name: 'grid',
			data: fakeData,
		},
	]
});