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

var data = {};
function setup() { 
  //can change colOfData to column num of whatever data you want

  var cnv = createCanvas(500, 500);
  //TODO: don't know why position() is throwing me "not a function" error; can't put all the sketches in one file
  //      should work: https://github.com/processing/p5.js/wiki/Positioning-your-canvas
  //cnv.position(500,500);
  background(250,250,210);
  //change col to whatever column of data you want to look at



  var worthRaw = [];
  var gdpRaw = [];
  var regionRaw = [];
  for(var row = 0; row < table.getRowCount(); row++)
  {
    //O - region 15, worth - U 21, gdp - I 9 
    var tmpWorth = table.getString(row, 20);
    var worthFloat = parseFloat(tmpWorth);
    worthRaw.push(worthFloat);

    var tmpGDP = table.getString(row, 8);
    var gdpFloat = parseFloat(tmpGDP);

    gdpRaw.push(gdpFloat);

    //print(tmpWorth);
  }
  data['worth'] = worthRaw;
  data['gdp'] = gdpRaw;
  print('Hello');
  print(gdpRaw);

} 


function drawAxis(graphSize, maxValue){

  var offset = 50;
  strokeWeight(2);
  var point1 = {
      xCoord: offset,
      yCoord: offset
  }
  var point2 = {
      xCoord: offset,
      yCoord: graphSize - offset
  }
  var point3 = {
      xCoord: graphSize - offset,
      yCoord: graphSize - offset
  }

  //x-axis
  line(point1.xCoord, point1.yCoord, point2.xCoord, point2.yCoord);
  //y-axis
  line(point2.xCoord, point2.yCoord, point3.xCoord, point3.yCoord);

  // **Creates y-axis with incremental lines at changing values, depending on 

  var numIncrements = 5;
  var yincrementDist = (point2.yCoord - point1.yCoord) / numIncrements;
  var yincr = yincrementDist * numIncrements;

  var incrementVals = maxValue / numIncrements; 
  for(var i = 0; i < numIncrements; i++)
  {
    strokeWeight(1);
    stroke(192,192,192);
    //The +1 and -1 is to fix the increment lines to line up more cleanly
    line(point1.xCoord+1, point1.yCoord + (yincrementDist* i)-1, point3.xCoord, point1.yCoord+(yincrementDist * i)-1);
    var increment = maxValue - (i * (maxValue/numIncrements));
    //print('Increment '+increment);
    textAlign(RIGHT);
    text(increment.toString(),0, point1.yCoord + (yincrementDist*i) - 8 , 50, 50);
  }
  // ** /end of y-axis creation

  // ** Create x-axis showing each value
  

  var worth = data.worth;
  var gdp = data.gdp;
  print(worth.length);
  print(worth);
  print(gdp.length);
  stroke('black');
  var xCoord;
  var yCoord;
  for(var i = 0; i < worth.length ; i++)
  {
    // min GDP 2491800559, 10600000000000 
    //Filter out the records with an unreported GDP
    if(gdp[i] != 0)
    {
      var gdpXValue = map(gdp[i], 2491800559, 10600000000000, point1.xCoord + 10, point3.xCoord);
      xCoord = map(gdpXValue, 0, graphSize, 15 + point1.xCoord, point3.xCoord);
      yCoord = map(worth[i], 0, 100, point2.yCoord, point1.yCoord);
      ellipse(xCoord, yCoord, 4,4);
      //TODO: Need to get unique values to print out x-axis
      textAlign(CENTER);
      if(gdp[i] == 2491800559 || gdp[i] == 10600000000000)
      {
        text(gdp[i], xCoord, point2.yCoord + 20);
      }
    }

  }

  
  // ** /end of x-axis creation

  drawLabels(graphSize/2 );
}

function drawLabels(size)
{
  stroke(192,192,192)
  textSize(10);
  textAlign(CENTER);
  text('Wealth (billions)', 20, size, 10);
  text('GDP', size-10, size*2 - 15);
  textAlign(CENTER);
  textSize(20);
  text('Company\'s GDP vs Owner\'s Worth', size, 30);
}


function draw() { 
  background(500);
  background(250,250,210);
  //Draw Axis also draw's the bars (saves having to pass information along methods)
  drawAxis(500, 100);

  noLoop();
}