var table;
var nCol;
var nRow;
var orgX;
var orgY;
var widthXLine; // x-axis width
var lengthYLine; // y-axis length

var widthXSubset; // width for a subset which is the length of x-axis and space
var lengthYSubset // length for a subset which is the length of y-axis and space

var yCol;
var xCol;
var nameCol = 12;
var n = 4; // Numbers of variable to display
var list_variable = new Array(0,6,10,16) // The list of column want to show
var list_variable_name = new Array("City mpg","Highway mpg","Length","Width");
var headline = "Car Size and Fuel Economy"

var xSize = 1600; // Size of Canvas
var ySize = 1600;


function preload(){
	table = loadTable('cars.csv','csv','header');
}

function setup() {
	

	createCanvas(xSize,ySize);
	nCol = table.getColumnCount();
	nRow = table.getRowCount();
	orgX = 100;
	orgY = ySize - 100;

	widthXSubset = (xSize-200)/n;
	lengthYSubset = (ySize -200)/n;


	widthXLine = widthXSubset*0.8;
	lengthYLine = lengthYSubset*0.8;
	// Set line length, to be 90% of subset in order to leave space

	if(lengthYLine>widthXLine){
		lengthYLine = widthXLine;
	}
	else if(widthXLine > lengthYLine){
		widthXLine = lengthYLine;
	} 
	// Here make the axis be symmetric

	

}

function draw() {
	background(255);

	for(var hor=0; hor<n; hor++){
		for(var vert=0; vert<n; vert++){
			line(orgX +hor*widthXSubset,orgY-vert*lengthYSubset, orgX +hor*widthXSubset+widthXLine*1.05, orgY-vert*lengthYSubset);
			line(orgX +hor*widthXSubset,orgY-vert*lengthYSubset, orgX +hor*widthXSubset, orgY-vert*lengthYSubset-lengthYLine-20);
		} // Draw n*n graphs
	}
	push();
	text(headline,xSize*0.45,50); // Label Header
	pop();
	
	// Obtain the maximum of y-axis and the x-axis labels
	for(var xDim = 0; xDim<n; xDim++){
		for(var yDim = 0;yDim <n; yDim++){		
		  	orgX_local = orgX + xDim*widthXSubset;
		  	orgY_local = orgY - yDim*lengthYSubset;
		  	

		  	if(xDim == yDim){
		  		push();
				text(list_variable_name[xDim], (orgX_local+widthXSubset/3), (orgY_local-lengthYSubset/2));
				pop();
				
				continue;
			}

			xCol = list_variable[xDim];
			yCol = list_variable[yDim];

			var xMax = 0; 
			var yMax = 0;
			

			for(var i =0; i<nRow;i++){
		    	if(Number(table.getString(i,xCol)) > xMax){
			     	xMax = Number(table.getString(i,xCol));
			    }
			    if(Number(table.getString(i,yCol)) > yMax){
			    	yMax = Number(table.getString(i,yCol));
			    }

			} // Find the maximum value of x-axis and y-axis


			xWidth = widthXLine/xMax;
			yLength = lengthYLine/yMax;

			//print(widthXLine+", "+xWidth);
			//print(lengthYLine+", "+yLength);

			for(var c = xMax/10; c<xMax*1.05; c+=xMax/10){
				push();
				text(Math.round(c),orgX_local+c*xWidth+xWidth/2,orgY_local +20);
				pop();

			} // Label x-axis

			for(var b=yMax/10; b<yMax*1.05; b+=yMax/10){
				push();
				text(Math.round(b),orgX_local-30,orgY_local-b*yLength);
				pop();
			} // Label y-axis

			
			

			for(var g=0; g<nRow; g++){
				label = table.getString(g,nameCol);


				xPt = orgX_local + Number(table.getString(g,xCol))*xWidth;
				yPt = orgY_local - Number(table.getString(g,yCol))*yLength;

				push();
				if(dist(xPt,yPt,mouseX,mouseY)<2){
					text(label,xPt+20,yPt-20);
					ellipse(xPt,yPt,40,40);
				}
				else{
					ellipse(xPt,yPt,10,10);
				}
				pop();
				
			}
			
		} // End for yDim
	} // End for xDim
	




} // End draw