var table;

var x_x1; // x-axis x1
var x_x2;
var x_y1; 
var x_y2;

var y_x1; // y-axis x1
var y_x2;
var y_y1;
var y_y2;

var x_len; // length of the x-axis
var y_len; 

var desired_x; 
var desired_y;

var numTicks; // number of tick marks per axis

var data; // dictionary of key (discrete) value (continuous) pairs

var max_y;
var num_bars; 

var scale_x;
var scale_y;


function preload() {
  table = loadTable("classics.csv", "csv", "header");
}

function setup() {
  // VARIABLE INFORMATION......................................................................

  // Canvas information
  var canvas_x = 1250;
  var canvas_y = 800;

  // DESIRED x, y, options(?)
  desired_x = 'month name';
  desired_y = 'downloads';

  // Axis information
  x_x1 = 200; 
  x_x2 = 700;
  x_y1 = 650; 
  x_y2 = 650;

  y_x1 = 200;
  y_x2 = 200;
  y_y1 = 150;
  y_y2 = 650; 

  numTicks = 10; // number of tick marks per axis

  // DERIVED VALUES............................................................................

  createCanvas(canvas_x, canvas_y);

  x_len = abs(x_x1 - x_x2);
  y_len = abs(y_y1 - y_y2);

  // DATA POPULATION...........................................................................

  dict = {}; // discrete x -> continuous y
  max_y = 0; // max bar height
  num_bars = 0; // number of distrete variables
  
  // populate dictionary
  for(var i = 0; i < table.getRowCount(); i++) {
    var x = table.getString(i, desired_x);
    var y = int(table.getString(i, desired_y));
    
    // Add values to dictionary
    if (x in dict) {
      dict[x] = dict[x] + y;
    } else {
      dict[x] = y;
      num_bars += 1; 
    }

    // Find max_y
    if (dict[x] > max_y) {
      max_y = dict[x];
    }
  }

  // SCALING.....................................................................................

  // Scale so the highest value reaches the tips of the axes
  scale_y = (1/max_y) * y_len; // find the scaling factor for y-values

  for (key in dict) {
    dict[key] = dict[key] * scale_y;
  }
}

function draw() {

  // background info
	background(255, 248, 220);

  // TITLE CREATION...............................................................................
  
  // Plot type title 
  textSize(50);
  fill(255, 145, 146);
  text("Bar", 20, 50);
  fill(255, 248, 220);
  text("Bar", 22, 52);
  fill(255, 145, 146);
  text("Bar", 24, 54);
  fill(49, 54, 57);
  
  // Sub title 
  textSize(30);
  fill(49, 54, 57); // rect info
  text(desired_x + " vs. " + desired_y, 25, 90);

  // AXIS CREATION ...............................................................................
  
  // axis info
  stroke(49, 54, 57);
  strokeWeight(3);

  // Tick info
  tick_dist_x = x_len / numTicks; // distance between tick marks on x-axis
  tick_dist_y = y_len / numTicks; // distance between tick marks on y-axis

  // Plot x-axis
  line(x_x1, x_y1, x_x2, x_y2);

  // Plot y-axis
  line(y_x1, y_y1, y_x2, y_y2);

  // tick-text info
  fill(49, 54, 57);
  textSize(10);

  // Y-axis ticks & tick-text
  var temp_y = max_y;
  for (var i = y_y1; i < y_y2; i += tick_dist_x) {
    strokeWeight(3); // tick mark info
    line(y_x1 - 5, i, y_x1 + 5, i); // tick mark
    strokeWeight(0); // tick value info
    text(Math.round(temp_y), y_x1 - 50, i + 5); // print tick value (+5 to center number on tick)
    temp_y = temp_y - (max_y / numTicks); // update value of temp
  }

  // Axis titles
  textSize(20); // Axis title info
  fill(49, 54, 57); // Axis title info

  // y-axis
  var y_title_x = 35;
  var y_title_y = y_y1 + Math.round(y_len / 2);
  text(desired_y, y_title_x, y_title_y);

  // x-axis
  var x_title_x = x_x1 + Math.round((x_len / 3));
  var x_title_y = y_y1 + y_len + 70;
  text(desired_x, x_title_x, x_title_y);

  // Bar creation .........................................................................
  var dist_bars = 10; // distance between bars
  var space_bar = Math.round((num_bars + 1) * dist_bars); // total space taken up by distance between bars
  var bar_width = (x_len - space_bar) / num_bars;

  var x_loc = dist_bars + x_x1; // initialize bar location to be at start of first desired bar
  var rect_loc = {}; // rectangle location that maps key -> [x1, x2, y1, y2]
  for (key in dict) {
    height = Math.round(dict[key]); // calculate height
    rect(x_loc, x_y1, bar_width, -height); // draw bar
    rect_loc[key] = [x_loc, x_y1, x_loc + bar_width, x_y1 - height]; // put rectangle location info into rect_dict
    textSize(8); // Bar text info
    text(key, x_loc, x_y1 + 20); // print tick value (+5 to center number on tick)
    x_loc += (dist_bars + bar_width);
  }

  // Interaction..........................................................................
  for (key in rect_loc) {
    var x1 = rect_loc[key][0];
    var y1 = rect_loc[key][1];
    var x2 = rect_loc[key][2];
    var y2 = rect_loc[key][3];

    if (mouseX > x1 && mouseX < x2 && mouseY < y1 && mouseY > y2) {

      fill(255, 145, 146); // rect info
      rect(mouseX, mouseY, 150, -80); // rect creation

      textSize(10); // text info
      fill(255, 248, 220); // text info
      
      var string_x = desired_x + "    " + key;
      var string_y = desired_y + "    " + Math.round(dict[key]/scale_y); 

      textStyle(BOLD); // info header specs
      textSize(15); // info header specs
      text("info", mouseX + 10, mouseY - 58); // info header

      textStyle(NORMAL); // normal text info
      textSize(10); // normal text info
      text(string_x, mouseX + 10, mouseY - 40);
      text(string_y, mouseX + 10, mouseY - 20);
    }
  }
}