var ws;
var sData = [], gData = [];
var lastTime = 0;
var svg = [], path, line;

var gDims = {
	left: 40,
	right: 30,
	top: 30,
	bottom: 30,
	outerWidth: 600,
	outerHeight: 400,
	domain: "0.5",
};
gDims.width = gDims.outerWidth - gDims.left - gDims.right;
gDims.height = gDims.outerHeight - gDims.top - gDims.bottom;

mRecv = function(){
  msg = ws.rQshiftStr(ws.rQlen());
  //console.log(msg);
//  readings = msg.split("\n").slice(1,-2).map(function(i){return Number.parseInt(i)});
  readings = msg.split("\n");
console.log("***" + readings.slice(0,3).join(", ") + "***");
  if (!(readings[0] == "START")) {
	  throw("Expecting 'START'; found '" + readings[0] +"'")
  }
  readings = readings.slice(1,-2);
  lastTime = parseInt(readings.shift());
  readings.shift();
//  console.log(readings.join(", "));
  
  for (i=0;i<readings.length;i++){
	  sData.shift();
  }
  for (i=0;i<readings.length;i++){
	  sData.push(parseInt(readings[i]) * 0.000152587890625);
  }
  for (i=0;i< sData.length; i++){
//	  gData[i] = [sData.length-i, sData[i]];
	  gData[i] = [new Date((lastTime - 300000) + i*500), sData[i]];
  }
//  console.log(lastTime + " " + sData.join(", "))

	drawTrace();
  document.getElementById("log").innerHTML = new Date(lastTime);
};
 // conv to mV = 0.000152587890625

setSize = function(){
	wW = window.innerWidth;
	gDims.outerWidth = wW;
	gDims.left = wW * .2;
	gDims.right = wW * .2;
	gDims.width = wW * .6;
	gDims.height = gDims.width * 3/5;
	gDims.outerHeight = gDims.height + gDims.top + gDims.bottom;
}
 
drawTrace = function(){
	svg.selectAll("g").remove();
	svg
		.attr("height", gDims.outerHeight)
		.attr("width", gDims.outerWidth)
	
	xScale = d3.time.scale()
		.domain([new Date(lastTime), new Date (lastTime - 300000)])
		.range([gDims.left, gDims.left+gDims.width])
	
	yScale = d3.scale.linear()
		.domain([-gDims.domain, gDims.domain])
		.range([gDims.top+gDims.height, gDims.top]);
	
	line = d3.svg.line()
		.x(function(d){return xScale(d[0])})
		.y(function(d){return yScale(d[1])});
	
	yAxis = d3.svg.axis()
		.orient("left")
		.scale(yScale)
		.ticks(5)
		.tickSize(-gDims.width,0)
		
	xAxis = d3.svg.axis()
		.orient("bottom")
		.scale(xScale)
		.tickSize(-gDims.height,0)
		.ticks(3)
		
	svg.append("g")
		.attr("transform","translate(" + gDims.left + ")")
		.attr("class", "y axis")
		.call(yAxis);
		
	svg.append("g")
		.attr("transform","translate( 0, " + (gDims.height + gDims.top) + ")")
		.attr("class", "x axis")
		.call(xAxis);
	
	path.attr("d", line(gData));
}
$("window").unload(function(){
	ws.close();
})

$("document").ready(function () {
//$("window").load(function () {
	setSize();
	ws || (ws = new Websock());
	ws.open("ws://benioff.geol.wwu.edu:10632/");

	svg = d3.select("svg")
		.attr("height", gDims.outerHeight)
		.attr("width", gDims.outerWidth);

	path = svg.append("path")
		.style("stroke", "red")
		.style("fill", "none");

	
	d3.select("select")
		.property("value", gDims.domain)
		.on("change", function(){
			gDims.domain = this.value;
//			console.log("value " + this.value);
		});
		
	window.onresize = setSize;
		
	ws.on("message", mRecv);
}
);