var table;
var nCol;
var nRow;
var orgX = 100;
var orgY = 700;
var widthXLine = 600;
var lengthYLine = 620;
var yCol; // The column extract data to graph a line

var stateCol; // column# - 11
var yearCol; // column# -1

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

function setup() {
  createCanvas(800,800);
  nCol = table.getColumnCount();
  nRow = table.getRowCount();
}

function draw() {
	yearCol = nCol-1; // Column selection, year is at the last column
	stateCol = nCol-11;
  yCol = nCol -3;
  var state = new String("California");
	var title = 'Numbers of Test-taker in ' + state;
	

	var yMax = 0;
  var xMax = 0;

  background(255);
  text(title,350,50);
  line(orgX,orgY,orgX,orgY-620); // Drawing Y-axis
  line(orgX,orgY,orgX+620,orgY); // Drawing X-axis
  

	for(var i =0; i<nRow;i++){
		if(table.getString(i,stateCol).valueOf() == state.valueOf()){
      if(table.getString(i,yCol) >yMax){
        yMax = table.getString(i,yCol);
      }
      if(table.getString(i,yearCol) >xMax){
        xMax = table.getString(i,yearCol);
      }
    } // Find the maximum value of x-axis and y-axis
  }
  var xMin = xMax;

  for(var j =0; j<nRow;j++){
    if(table.getString(j,stateCol).valueOf() == state.valueOf()){
      var xTemp = table.getString(j,yearCol);
      if(xMin > xTemp){
        xMin = xTemp;
      }
    } 
  } // Find the minimum value of x-axis

	yMax = Math.ceil(yMax*1.10); // Find the maximum value and time by 10% more

  xWidth = widthXLine / (xMax - xMin); // Width for year
  
  var discountYMax = yMax/5; // Y-axis labeling divide into 5 marks, discountYMax is 1 mark
  for (var f=0; f<=5; f++){ // Create Y-axis labeling
    push();
    text(Number(f*discountYMax).toFixed(0),orgX-50,orgY-f*120); // Create Y-axis label
    pop();
    }
  

  counter =0; // For counting the number of x-axis


  for(var a =0; a<nRow;a++){ // Plug line
    var xPt1;
    var yPt1;
    var xPt2;
    var yPt2;
    var xLabel;

    if(table.getString(a,stateCol).valueOf() == state.valueOf()){
      if(counter ==0){
        xLabel = table.getString(a,yearCol);
        xPt1 = orgX+ counter*xWidth;
        yPt1 = orgY-table.getString(a,yCol)/yMax*lengthYLine;
        push();
        textAlign(CENTER);
        text(xLabel,xPt1,orgY+20);
        pop();
        counter++;
      }
      else if(counter==1){
        xLabel = table.getString(a,yearCol);
        xPt2 = orgX+ counter*xWidth;
        yPt2 = orgY-table.getString(a,yCol)/yMax*lengthYLine;
        push();
        textAlign(CENTER);
        text(xLabel,xPt2,orgY+20);
        line(xPt1,yPt1,xPt2,yPt2);
        pop();
        counter++;  
        xPt1 = xPt2;
        yPt1 = yPt2;
      }
      else if(counter>1){
        xLabel = table.getString(a,yearCol);
        xPt2 = orgX+ counter*xWidth;
        yPt2 = orgY-table.getString(a,yCol)/yMax *lengthYLine;
        push();
        textAlign(CENTER);
        text(xLabel,xPt2,orgY+20);
        line(xPt1,yPt1,xPt2,yPt2);
        pop();
        counter++;
        xPt1 = xPt2;
        yPt1 = yPt2;
      }
    }
  } // End for

counter =0;

for(var b =0; b<nRow;b++){ // Plug line
    var xPt1;
    var yPt1;
    var xPt2;
    var yPt2;
    var xLabel;


    if(table.getString(b,stateCol).valueOf() == state.valueOf()){
      if(counter ==0){
        xLabel = table.getString(b,yearCol);
        xPt1 = orgX+ counter*xWidth;
        yPt1 = orgY-table.getString(b,yCol)/yMax*lengthYLine;
        if(dist(xPt1,yPt1,mouseX,mouseY)<5){
          push();
          textAlign(CENTER);
          text(table.getString(b,yearCol)+": "+table.getString(b,yCol),xPt1+20,yPt1-40);
          pop();
        }
        counter++;
      }
      else if(counter==1){
        xLabel = table.getString(b,yearCol);
        xPt2 = orgX+ counter*xWidth;
        yPt2 = orgY-table.getString(b,yCol)/yMax*lengthYLine;
        if(dist(xPt2,yPt2,mouseX,mouseY)<5){
          push();
          textAlign(CENTER);
          text(table.getString(b,yearCol)+": "+table.getString(b,yCol),xPt2+20,yPt2+40);
          pop();
        }
        counter++;  
        xPt1 = xPt2;
        yPt1 = yPt2;
      }
      else if(counter>1){
        xLabel = table.getString(b,yearCol);
        xPt2 = orgX+ counter*xWidth;
        yPt2 = orgY-table.getString(b,yCol)/yMax *lengthYLine;
        if(dist(xPt2,yPt2,mouseX,mouseY)<5 && counter%2 == 0){
          push();
          textAlign(CENTER);
          text(table.getString(b,yearCol)+": "+table.getString(b,yCol),xPt2+20,yPt2-40);
          pop();
        }
        else if(dist(xPt2,yPt2,mouseX,mouseY)<5 && counter%2 == 1){
          push();
          textAlign(CENTER);
          text(table.getString(b,yearCol)+": "+table.getString(b,yCol),xPt2+20,yPt2+40);
          pop();
        }
        counter++;
        xPt1 = xPt2;
        yPt1 = yPt2;
      }
    }
  } // End for

  
} // End Draw