var data;
var table;
var dict = {};
var canvasWidth = 1000;
var canvasHeight = 650;

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


function setup() {
    frameRate(1);

    var rows = table.findRows('USA', 'country code');
    for (i = 0; i < rows.length; i++) {
        var year = parseInt(rows[i].getString("year"));
        var wib = parseFloat(rows[i].getString("worth in billions"));
        if (year in dict){
            dict[year] += wib;
        }else{
            dict[year] = wib;
        }
    }

    data = dict;
    createCanvas(canvasWidth, canvasHeight);
    console.log(dict);
}


function draw() {
    fill(0);
    textSize(20);
    var title_h = 50;
    var axis_y_title_pos_x = 10;
    var axis_x_title_pos_y = canvasHeight-10;

    var axis_intercept_x = axis_y_title_pos_x+50+130+100;
    var axis_intercept_y = canvasHeight-100;
    var axis_y_end_height = title_h+20;
    var axis_x_end_width = canvasWidth;

    line(axis_intercept_x, axis_intercept_y, axis_intercept_x, axis_y_end_height);
    line(axis_intercept_x, axis_intercept_y, axis_x_end_width, axis_intercept_y);

    text("Trend of Sum Worth in Billions of USA in Years", canvasWidth/2, title_h);
    textSize(16);
    text("Sum Worth in Billions of USA", axis_y_title_pos_x, axis_y_end_height+(axis_intercept_y-axis_y_end_height)/2);
    text("Year", axis_intercept_x+(canvasWidth-axis_intercept_x)/2, axis_x_title_pos_y);

    var axis_x_scale_label_pos_y = canvasHeight-50;
    var axis_y_scale_label_pos_x = axis_intercept_x-80;

    max_year = Math.max.apply(null, Object.keys(dict));
    min_year = Math.min.apply(null, Object.keys(dict));
    max_worth = Math.max.apply(null, Object.values(dict));
    min_worth = Math.min.apply(null, Object.values(dict));

    var axis_x_scale_margin_px = 5;
    var axis_y_scale_margin_px = 100;

    fill(58,183,149);

    for (i = 1; i < Object.keys(dict).length; i++) {

        prev_pos_x = map(Object.keys(dict)[i-1], min_year-axis_x_scale_margin_px, max_year+axis_x_scale_margin_px, axis_intercept_x, axis_x_end_width);
        prev_pos_y = map(data[Object.keys(dict)[i-1]], min_worth-axis_x_scale_margin_px, max_worth+axis_x_scale_margin_px, axis_intercept_y-axis_y_scale_margin_px, axis_y_end_height+axis_y_scale_margin_px);

        pos_x = map(Object.keys(dict)[i], min_year-axis_x_scale_margin_px, max_year+axis_x_scale_margin_px, axis_intercept_x, axis_x_end_width);
        pos_y = map(data[Object.keys(dict)[i]], min_worth-axis_x_scale_margin_px, max_worth+axis_x_scale_margin_px, axis_intercept_y-axis_y_scale_margin_px, axis_y_end_height+axis_y_scale_margin_px);

        stroke(58,183,149);
        strokeWeight(1);
        line(prev_pos_x, prev_pos_y, pos_x, pos_y);
        ellipse(prev_pos_x, prev_pos_y, 5);
        ellipse(pos_x, pos_y, 5);

        text(Object.keys(dict)[i-1], prev_pos_x-8, axis_x_scale_label_pos_y);
        text(Object.keys(dict)[i], pos_x-8, axis_x_scale_label_pos_y);
        stroke(200);
        line(prev_pos_x, axis_intercept_y-5, prev_pos_x, axis_intercept_y+5);
        line(pos_x, axis_intercept_y-5, pos_x, axis_intercept_y+5);

        text(data[Object.keys(dict)[i-1]].toFixed(2), axis_y_scale_label_pos_x, prev_pos_y+3);
        text(data[Object.keys(dict)[i]].toFixed(2), axis_y_scale_label_pos_x, pos_y+3);
        stroke(200);
        line(axis_intercept_x-5, prev_pos_y, axis_intercept_x+5, prev_pos_y);
        line(axis_intercept_x-5, pos_y, axis_intercept_x+5, pos_y);

        var prev_d = dist(mouseX, mouseY, prev_pos_x, prev_pos_y);
        var d = dist(mouseX, mouseY, pos_x, pos_y);
        if (d < 5 || prev_d < 5) {
            noStroke();
            textSize(12);
            fill(58,183,149);
            if (d < 5) {
                var msg = "Year: " + Object.keys(dict)[i] + "\n" + "Sum Worth: " + data[Object.keys(dict)[i]].toFixed(2);
                text(msg, mouseX, mouseY-15);
            } else{
                var msg = "Year: " + Object.keys(dict)[i-1] + "\n" + "Sum Worth: " + data[Object.keys(dict)[i-1]].toFixed(2);
                text(msg, mouseX, mouseY-15);
            }
        }
    }
}