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 = 7; // Set x-axis from dataset column 7
var nX = 3; // Numbers of graph horizontally
var nY = 1; // Numbers of graph vertically
var xAxisLabel = "Airport";
var list_variable = new Array(8,10,21) // The list of column want to show
var list_variable_name = new Array("Numbers of Delayed Flights","Total Numbers of Flights","Numbers of On Time Flights");


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

function setup() {
	var xSize = 2000;
	var ySize = 800;

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

	widthXSubset = (xSize-200)/nX;
	lengthYSubset = (ySize -200)/nY;

	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<nX; hor++){
		for(var vert=0; vert<nY; vert++){
			line(orgX +hor*widthXSubset,orgY-vert*lengthYSubset, orgX +hor*widthXSubset+widthXLine, orgY-vert*lengthYSubset);
			line(orgX +hor*widthXSubset,orgY-vert*lengthYSubset, orgX +hor*widthXSubset, orgY-vert*lengthYSubset-lengthYLine-20);
		} // Draw xN*yN graphs
	}



	var counter = 0;
	var xLabel = new Array(0);
	var xWidth;
	var yLength;

	for(var xFinder = 0; xFinder < nRow; xFinder++){
		if(!xLabel.includes(table.getString(xFinder,xCol).valueOf())){
	     	xLabel.push(table.getString(xFinder,xCol));
		}
	} // Obtain the list of categorical label on x-axis


	// Obtain the maximum of y-axis and the x-axis labels
	for(var xDim = 0; xDim<nX; xDim++){
		for(var yDim = 0;yDim <nY; yDim++){	
			if(xDim+yDim>list_variable.length){
				break;
			}

			var yMax = 0;
		  	
		  	yCol = list_variable[counter];
		  	orgX_local = orgX + xDim*widthXSubset;
		  	orgY_local = orgY + yDim*lengthYSubset;

			for(var i =0; i<nRow;i++){
		    	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/xLabel.length;
			yLength = lengthYLine/yMax;


			for(var c = 0; c<xLabel.length; c++){
				var tempString = xLabel[c];
				var tempStringLabel = '';
				for(var d=0; d<tempString.length;d++){
					tempStringLabel += tempString.charAt(d) + '\n';
				}

				push();
				text(tempStringLabel,orgX_local+c*xWidth+xWidth/2,orgY_local +20);
				pop();

			} // Label x-axis

			push();
			text(xAxisLabel,orgX_local+widthXLine*0.45,orgY_local+80);
			pop();

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

			var tempYLabel = list_variable_name[counter];
			var tempYLabelString = '';
			for(var d=0; d<tempYLabel.length;d++){
					tempYLabelString += tempYLabel.charAt(d) + '\n';
			} // Make Y-axis label vertical


			push();
			text(tempYLabelString,orgX_local-80,orgY_local-lengthYLine*0.8);
			pop();

			push();
			text(list_variable_name[counter]+" vs. Airports",orgX_local+widthXLine*0.35,orgY_local-lengthYLine*1.1)
			pop();


			for(var g=0; g<nRow; g++){
				label = table.getString(g,xCol);
				label += ": " + table.getString(g,yCol);

				var xCate = table.getString(g,xCol);
				var index = xLabel.indexOf(xCate);


				xPt = orgX_local + index*xWidth+xWidth/2;
				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
		counter++; // Go to next assigned column
	} // End for xDim




}