var plot_data = {};
var plot = null;
var overview_plot = null;

/*
	Render the series option table.
*/
function render_options(){

	/* EWWWWW -  quick hack - but this should be from DB*/
	
	var devices = ['base','ref','11','19','21','23','24','25','26','27'];
	var sensors = {
		'temperature': {base:true, ref:true, 11:true,  19:true,  21:true,  23:true,  24:true,  25:true,  26:true, 27:true},
		'humidity':    {base:true, ref:true, 11:false, 19:false, 21:false, 23:false, 24:false, 25:false, 26:false, 27:false},
		'snow':	       {base:true, ref:false,11:false, 19:false, 21:false, 23:false, 24:false, 25:false, 26:false, 27:false},
		'voltage':     {base:true, ref:true, 11:false,  19:true,  21:true,  23:true,  24:true,  25:true,  26:true, 27:true},
		'pitch':       {base:false, ref:false, 11:true, 19:true, 21:true,  23:true,  24:true,  25:true,  26:true, 27:true},
		'roll':        {base:false, ref:false, 11:true, 19:true, 21:true,  23:true,  24:true,  25:true,  26:true, 27:true},
		'conductivity':{base:false, ref:false, 11:false, 19:true, 21:true, 23:true,  24:true,  25:true,  26:true, 27:true},
		'light':       {base:false, ref:false, 11:false, 19:true, 21:true, 23:true,  24:true,  25:true,  26:true, 27:true},
		'pressure':    {base:false, ref:false, 11:false, 19:true, 21:true, 23:true,  24:true,  25:true,  26:true, 27:true},
		'strain':      {base:false, ref:false, 11:false, 19:true, 21:true, 23:true,  24:true,  25:true,  26:true, 27:true},
		'rssi':        {base:false, ref:false, 11:true, 19:true, 21:true, 23:true, 24:true, 25:true, 26:true, 27:true},
		'powerstate': {base:true, ref:true, 11:false, 19:false, 21:false, 23:false, 24:false, 25:false, 26:false, 27:false}
	};

	table = '<table id="sensors" cellspacing="0" cellpadding="4"><tr><td class="right">&nbsp;</td>';

	$.each(devices, function(i, device){
		dev = device.charAt(0).toUpperCase() + device.slice(1);
		table = table + '<td class="right">'+dev+'</td>';
	});
	
	table = table + "</tr>";

	$.each(sensors, function(name, sensor){
		capitalized = name.charAt(0).toUpperCase() + name.slice(1);
		if (capitalized == "Rssi"){
			capitalized = "RSSI";
		}
		else if (capitalized == "Powerstate"){
			capitalized = "Power State";
		}
		table = table + '<tr><td class="type sensor right">'+capitalized+'</td>';
		$.each(sensor, function(device, enabled){
			table = table + '<td class="sensor right">';
			if(sensor[device]){
				table = table + '<input type="checkbox" name="'+name+'" value="'+device+'"></input>';
			}
			else{
				table = table + '&nbsp;'
			}
			table = table + "</td>";
		});
		table = table + '</tr>';
	});

	$("#options").prepend(table + '</table>');
	$("#sensors").find("input").click(select);
	$("#sensors :tr :last-child").removeClass("right");	
} 

/*
	Each checkbox will execute this function when clicked.
*/
function select(){
	device = this.value;
	sensor = this.name;
	if(this.checked == true){
		if(typeof(plot_data[device+sensor]) == 'undefined'){
			fetch_data(sensor, device);
		}
		else{
			plot_data[device+sensor]['enabled'] = true;
			redraw();
		}
	}
	else{
		plot_data[device+sensor]['enabled'] = false;
		redraw();
	}
}


/*
	Fetches the data via ajax.
*/
function fetch_data(sensor, device){
	opts = { device: device, pos:'internal'};
	$.getJSON('fetch/'+sensor, opts,
		function(json){
			$.each(json, function(i, reading){
				reading[0] = reading[0]*1000;
			});
			plot_data[device+sensor] = { label: device.charAt(0).toUpperCase() + device.slice(1) + ' ' + sensor.charAt(0).toUpperCase() + sensor.slice(1), data: json, enabled: true, shadowSize: 0};
			redraw();
		}
	);
}

/*
	Redraws given the data sets in plot_data.
*/
function redraw(){
	data = [];
	i = 0;
	$.each(plot_data, function(k, v){
		if (v['enabled']){
			data[i] = v;
			i = i + 1;
		}
	});
	
	plot_options = null;
	if(plot == null){
		plot_options = { xaxis: {mode: "time"}, selection: {mode: "x"}};
	}
	else{
		xmin = plot.getAxes().xaxis.min;
		xmax = plot.getAxes().xaxis.max;
		plot_options = { xaxis: {mode: "time", min: xmin, max: xmax}, selection: {mode: "x"}};
	}

	plot = $.plot($("#placeholder"), data, plot_options);
	
	overview_plot = $.plot($("#overview"), data, {
		legend: false,
		lines: {show: true, lineWidth: 1},
		shadowSize: 0,
		xaxis: { ticks: [], mode: "time" },
		yaxis: { ticks: []},
		selection: { mode: "x" }
	});

	$("#placeholder").bind("plotselected", function (event, ranges) {
		plot = $.plot($("#placeholder"), data,
			$.extend(true, {}, plot_options, {
				xaxis: { min: ranges.xaxis.from, max: ranges.xaxis.to }
			}));
		overview_plot.setSelection(ranges, true);
	});
    
	$("#overview").bind("plotselected", function (event, ranges) {
		plot.setSelection(ranges);
	});
}