var table;
var bars = [];
var tickValue, tickDistance;
var map1 = {};

function preload() {

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

function setup() {
    
    for (var j = 0; j < table.getRowCount(); j++){
      if (table.getString(j, 'Year') === "2016"){
        map1[table.getString(j, 'Code')] = table.getNum(j, 'Cancelled');
      }
    }
    // find max value
    var maxheight = 0;
    for (var key in map1) {
      if (map1[key] > maxheight){
        maxheight = map1[key];
      }
    }
    
    // to get decimal-free scales
    while (maxheight % 100 != 0){
      maxheight++;
    }

    createCanvas(1000, 1000);

    tickDistance = 850/10; // we want 10 ticks always. the length of the axis will not change

    tickValue = maxheight/10; // each tick will correspond to a multiple of this number

    var barDist = 900/Object.keys(map1).length;

    var counter = 0;
    var startPoint = 0;

    for (var key in map1) {
      startPoint = getStartPoint(map1[key]);
      bars.push(new Bar(55+(counter*barDist), startPoint, map1[key], key));
      counter++;
    }

}

// the point to start the rectangle is (x_distance, 900-((value/tickValue)*tickDistance))
// and the height is 900-(startPoint) because the end of the axis is at yvalue = 900
function getStartPoint(value){
  return 900-((value/tickValue)*tickDistance);
}

function draw(){
    clear();
    fill(0);
    // y axis
    line(50, 50, 50, 900);
    // x axis
    line(50, 900, 950, 900);

    
    line(48, 900, 53, 900); // tick at 0
    text(0, 15, 900);

    // adding rest of the ticks
    for (var j = 10; j > 0; j--){
      line(48, 900-(tickDistance*j), 53, 900-(tickDistance*j));
      text((tickValue)*j, 15, 900-(tickDistance*j));
    }
    
    text("Airport", 450, 950);
    text("Number of Cancelled Flights by Airport in 2016", 250, 10); 

   for (var i = 0; i < bars.length; i++){
    bars[i].show();
   }
    fill(0);
    rotate(PI/2);
    text("Number of Cancelled Flights", 200, -5);
}

class Bar {

  constructor(x, y, height, label) {
    this.x = x;
    this.y = y;
    this.height = height;
    this.label = label;
    
  }

  show(){
    fill(255);
    rect(this.x, this.y, 20, 900-(this.y));

    if (mouseX > this.x & mouseX < this.x+20 & mouseY > this.y & mouseY < this.y+height){
      fill(240);
      rect(this.x, this.y, 20, 900-(this.y));
      rect(this.x-10, this.y-50, 40, 40);
      fill(0);
      text(this.height, this.x-5, this.y-15);
      text(this.label, this.x-5, this.y-35);
    }
  }

}