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.1202276, 0.2164521, -1.7371798, -0.3969712, 1.4106547, -0.7233762, 1.6047085, 0.7773068, 0.8139478, 0.1277326];
	var dataY = [0.9931740, -1.2085483, 2.1504754, -0.6780248, 0.2971705, 0.4086755, 0.2458021, -0.2775808, -0.6384854, 0.4508158];
	var dat = [dataX, dataY];
	return dat;
}

function getXYZData() {
	var dataX = [0.1202276, 0.2164521, -1.7371798, -0.3969712, 1.4106547, -0.7233762, 1.6047085, 0.7773068, 0.8139478, 0.1277326];
	var dataY = [0.9931740, -1.2085483, 2.1504754, -0.6780248, 0.2971705, 0.4086755, 0.2458021, -0.2775808, -0.6384854, 0.4508158];
	var dataZ = [0.90219474, 2.08781576, 0.76664429, 0.86390297, 1.09946849, 1.39577633, 1.98381348, 0.67306875, 0.68446006, 0.8457302];
	var dat = [dataX, dataY, dataZ];
	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 scatterplot() {

	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 = -4;
	maxx = 4;
	miny = -4;
	maxy = 4;
	
	var paper = Raphael(10, 10, SCR_WIDTH, SCR_HEIGHT);
		
	var ax = convertToPoint(AXIS_Y, AXIS_X, minx, maxx, miny, maxy);
	var yaxis = paper.path("M" + ax[0] + " 0" + "L" + ax[0] + " " + SCR_HEIGHT);
	var xaxis = paper.path("M" + "0 " + ax[1] + "L" + SCR_WIDTH + " " + ax[1]);
		
	var i = 0;
	var points = []
	for (i = 0; i < dataX.length; i++) {
		var p = convertToPoint(dataX[i], dataY[i], minx, maxx, miny, maxy);
		points[i] = paper.circle(p[0], p[1], POINT_RADIUS);
		points[i].mouseover(function (event) {this.attr({fill: "red"});});
		points[i].mouseout(function (event) {this.attr({fill: "white"});});
	}
	
}

function bubbleplot() {

	dat = getXYZData();
	var dataX = dat[0];
	var dataY = dat[1];
	var dataZ = dat[2];
	
	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 = -4;
	maxx = 4;
	miny = -4;
	maxy = 4;
	
	var paper = Raphael(10, 10, SCR_WIDTH, SCR_HEIGHT);
		
	var ax = convertToPoint(AXIS_Y, AXIS_X, minx, maxx, miny, maxy);
	var yaxis = paper.path("M" + ax[0] + " 0" + "L" + ax[0] + " " + SCR_HEIGHT);
	yaxis.attr({"stroke-dasharray": "- "});
	var xaxis = paper.path("M" + "0 " + ax[1] + "L" + SCR_WIDTH + " " + ax[1]);
	xaxis.attr({"stroke-dasharray": "- "});
		
	var i = 0;
	var points = []
	for (i = 0; i < dataX.length; i++) {
		var p = convertToPoint(dataX[i], dataY[i], minx, maxx, miny, maxy);
		points[i] = paper.circle(p[0], p[1], POINT_RADIUS * dataZ[i]);
		points[i].attr("fill", "white");
		points[i].mouseover(function (event) {this.attr({fill: "red"});});
		points[i].mouseout(function (event) {this.attr({fill: "white"});});
	}
	
}