//<![CDATA[

			    var dataset;
			    var row;
			    var depth = new Array();
					var temp = new Array();
					var xpoint;
					var ypoint;
					var mycells;
					var tempmax = 5;
					var tempmin = -30;
					var xrange = tempmax - tempmin;
					var yrange = 75;

			    function Input(dataz) { 
			        var X = !window.XMLHttpRequest ? new ActiveXObject("Microsoft.XMLHTTP") : new XMLHttpRequest;
			        X.open( "GET", dataz, false);
			        X.setRequestHeader("Content-Type", "text/html");
			        X.send(dataz ? dataz : "");
			        return X.responseText;
			    }

					function init() {

							// mycells contains the data from the csv file.
							mycells = Input('outputs/house_soil_1.csv').split(/\r\n/)

				      // chartdata contains the data from the a row in the csv file
				      // mycells[0] is the header line with depth information.
							chartdata = mycells[3].split(',');
							for (var i in chartdata	) {
									depth[i] = -chartdata[i];
							}
							row = mycells.length - 24 * 30;
							
							// so now the x row has been read in.  Next up paint the canvas and charge that stuff.
					    setInterval(clock,60);
					}

					function clock(){
						  if (row >= mycells.length) {
					  		  row = 4;
						  }
						  // reset row if it goes over the # of lines in the original data file.
							// some initial canvas things
						  var ctx = document.getElementById('canvas').getContext('2d');
						  //ctx.save();
				      ctx.clearRect(0,0,500,500); // clear canvas
							ctx.save()
							ctx.lineWidth = 1;
							ctx.strokeStyle = "orange";
							ctx.beginPath();
							var zeropoint = (0 - tempmin) / xrange * 500;
							ctx.moveTo(zeropoint,0);
							ctx.lineTo(zeropoint,500);
							ctx.stroke();
							ctx.strokeStyle = "black";
							ctx.lineWidth = 3;
					    ctx.beginPath();

						  // dump the current line of data into chartdata
							chartdata = mycells[row].split(',');
							var test = chartdata.length
							// dump the current temperatures into temp
							for (i in chartdata) {
								    temp[i] = chartdata[i];
							}

							// display the current time interval
							div = document.getElementById('chart_date');
							data_date = temp[0].split(' ');
							data_date = data_date[0].split('"');
				      div.innerHTML = data_date[1];
							var userow = 'True';
							for (cellval=1; cellval<temp.length; cellval++) {
								if (temp[cellval] == 'NaN') {
									    userow= 'False'
								}
								
							}
							// set this to the first point and move from temperature space to canvas space.
							if (userow == 'True') {
									xpoint = (temp[1] - tempmin) / xrange * 500;
									ypoint = depth[1]* 500 / yrange;
							
						    	ctx.moveTo( xpoint, ypoint); 
							    for (cellval=2; cellval<temp.length; cellval++) {
											// for the other points...
											xpoint = (temp[cellval] - tempmin) / xrange * 500;
											ypoint = depth[cellval]* 500 / yrange;
									
									
											ctx.lineTo(xpoint,ypoint); 
									}
									// finish the line
							 		ctx.stroke();
							}
						  row++;
					} 
					
//]]>