var SCR_WIDTH = 300;
var SCR_HEIGHT = 300;
var POINT_RADIUS = 4;
var AXIS_Y = 0;
var AXIS_X = 0;

function draw() {  
	// Creates canvas 320 × 200 at 10, 50
	var paper = Raphael(10, 50, 320, 200);

	// Creates circle at x = 50, y = 40, with radius 10
	var circle = paper.circle(50, 40, 10);
	// Sets the fill attribute of the circle to red (#f00)
	circle.attr("fill", "#f00");

	// Sets the stroke attribute of the circle to white
	circle.attr("stroke", "#fff"); 
}

function getXYData() {
	var dataX = [0.02, 0.1949050, 0.1970120, 0.3338668, 0.5578730, 0.7055021, 0.8128947, 1.0475934, 1.1889012, 1.4440622];
	var dataY = [0.5526520, 0.3746894, -0.3136405, 0.8450872, 0.2733260, -2.4130266, 0.2035318, 1.2181160, -1.2657267, 1.1344116];
	var dat = [dataX, dataY];
	return dat;
}

function getMin(d) {
	var minX = d[0];
	var i = 1;
	for (i = 1; i < d.length; i++) {
		if (d[i] < minX) {
			minX = d[i];	
		}	
	}
	return minX;
}

function getMax(d) {
	var maxX = d[0];
	var i = 1;
	for (i = 1; i < d.length; i++) {
		if (d[i] > maxX) {
			maxX = d[i];	
		}	
	}
	return maxX;
}

function convertToPoint(dX, dY, minX, maxX, minY, maxY) {
	var xval = ((dX - minX) / (maxX - minX)) * SCR_WIDTH;
	var yval = SCR_HEIGHT - ((dY - minY) / (maxY - minY)) * SCR_HEIGHT;
	var point = [xval, yval];
	return point;
}

function lineplot() {

	dat = getXYData();
	var dataX = dat[0];
	var dataY = dat[1];
	
	var minx = getMin(dataX);
	var miny = getMin(dataY);
	var maxx = getMax(dataX);
	var maxy = getMax(dataY);
	
	// Override the x and y values here for the border...	
	minx = 0;
	maxx = 1.5;
	miny = -3;
	maxy = 3;
	
	var paper = Raphael(10, 10, SCR_WIDTH, SCR_HEIGHT);
		
	var ax = convertToPoint(AXIS_Y, AXIS_X, minx, maxx, miny, maxy);
	var xaxis = paper.path("M" + "0 " + ax[1] + "L" + SCR_WIDTH + " " + ax[1]);
	xaxis.attr({"stroke-dasharray": "- "});
	var yaxis = paper.path("M" + ax[0] + " 0" + "L" + ax[0] + " " + SCR_HEIGHT);
	yaxis.attr({"stroke-dasharray": "- "});
		
	var i = 0;
	var points = []
	var lines = []
	for (i = 0; i < dataX.length; i++) {
		
		var p = convertToPoint(dataX[i], dataY[i], minx, maxx, miny, maxy);
		
		// We draw a line if it's not the last point.
		if (i != dataX.length - 1) {
			var pNext = convertToPoint(dataX[i+1], dataY[i+1], minx, maxx, miny, maxy);
			lines[i] = paper.path("M" + p[0] + " " + p[1] + "L" + pNext[0] + " " + pNext[1]);
		}
		
		points[i] = paper.circle(p[0], p[1], POINT_RADIUS);
		points[i].attr("fill", "white");
		points[i].mouseover(function (event) {this.attr({fill: "red"});});
		points[i].mouseout(function (event) {this.attr({fill: "white"});});
	}
	
}