var Width = 1200;       
var Height = 800;      
var Padding = 50;         
var tickSize = 10;
var xField = "";        
var yField = "";            
var disease = "";
var values = [];
var x1, y1, x2, y2, rectWidth, rectHeight;
var maxX, minX, xArr, minY, maxY, yArr, unique;

var fontBold;

function preload(){
    table=loadTable("DiseaseInformation.csv", "csv");
    //fontBold = loadFont('assets/Bold.ttf');
}

function setup() {
    createCanvas(Width, Height);
    xField = table.getColumn(0)[0];
    yField = table.getColumn(1)[0];
    disease = table.getColumn(2)[0];
    diseaseArr = table.getColumn(2);
    unique = diseaseArr.filter(function(item, i, ar){ return ar.indexOf(item) === i; });
   // print("Unique Values " + unique);
}

function sliceData(start, end) {
    for (var i = 0; i < 2; i++) {
        var column = table.getColumn(i).slice(start, end);
        column = column.map(function (num) {
            return parseFloat(num);
        });
        values.push(column);
    }
}

function draw() {
    background(255, 255, 255);
    x1 = 200;
    y1 = 350;
    x2 = 550;
    y2 = 350;
    rectWidth = 350;
    rectHeight = 300;
    drawAxes(x1, y1, x2, y2);
    fill("none");
    rect(x1, y1 - 300, rectWidth, rectHeight);
    drawAxes(x1, y1 + 300, x2, y2 + 300);
    fill("none");
    rect(x1, y1, rectWidth, rectHeight);
    drawAxes(x1 + 350, y1, x2 + 300, y2);
    fill("none");
    rect(x1 + 350, y1 - 300, rectWidth, rectHeight);
    drawAxes(x1 + 350, y1 + 300, x2 + 300, y2 + 300);
    fill("none");
    rect(x1 + 350, y1, rectWidth, rectHeight);

    sliceData(1, 374);
    xArr = values[0];
    yArr = values[1];
    diseaseArr = table.getColumn(2).slice(1, 374);
    maxX = Math.max.apply(Math, xArr);
    maxY = Math.max.apply(Math, yArr);
    minX = Math.min.apply(Math, xArr);
    minY = Math.min.apply(Math, yArr);
    drawPlot(x1, 350, x2, 650);
    textSize(20);
    fill(0, 0, 255);
    stroke(0);
    text("MEASLES", x1 + 90, 450);
    values = [];

    sliceData(375, 759);
    xArr = values[0];
    yArr = values[1];
    diseaseArr = table.getColumn(2).slice(375, 759);
    maxX = Math.max.apply(Math, xArr);
    maxY = Math.max.apply(Math, yArr);
    minX = Math.min.apply(Math, xArr);
    minY = Math.min.apply(Math, yArr);
    drawPlot(x1, 50, x2, 350);
    textSize(20);
    fill(0, 0, 255);
    stroke(0);
    text("POLIO", x1 + 90, 180);
    values = [];

    sliceData(760, 1144);
    xArr = values[0];
    yArr = values[1];
    diseaseArr = table.getColumn(2).slice(760, 1144);
    maxX = Math.max.apply(Math, xArr);
    maxY = Math.max.apply(Math, yArr);
    minX = Math.min.apply(Math, xArr);
    minY = Math.min.apply(Math, yArr);
    drawPlot(x1 + 350, 350, x2 + 300, 650);
    textSize(20);
    fill(0, 0, 255);
    stroke(0);
    text("SMALLPOX", x1 + 500, 450);
    values = [];
    textSize(25);
    fill(0, 0, 0)
    text("Count of Infected People by Different Diseases for Initial 5 Years", x1, 20);
    textSize(20);
    fill(0, 0, 255);
    text(xField, x2 + 300, y2 + 350);
    text(yField, x1 - 130, y2 - 300);
}

function drawPlot(x1, y1, x2, y2) {
    var tickGap = (x2 - x1) / 5;
    var XAxisScale = minX, YAxisScale = 0;
    var temp = (maxX - minX) / 5;
    textSize(15);
    fill(0, 0, 0);
    //print("Max and Min and Temp is " + maxX + " " + minX + " " + temp);
    for (var i = 1; i <= 5; i++) {
        if (i == 5)
            XAxisScale = maxX;
        text(int(XAxisScale), x1 + i * tickGap - 30, y2 + 30);
        XAxisScale += temp;
    }

    tickGap = (y2 - y1) / 5;
    YAxisScale = 0;
    // print("Start at " + YAxisScale);
    for (i = 0; i <= 5; i++) {
        text(YAxisScale, x1 - 45, y2 - i * tickGap + 4);
        YAxisScale += int(maxY / 5);
    }

    var selectedPoints = [];
    for (i = 0; i < xArr.length; i++) {
        selectedPoints.push(createVector(xArr[i], yArr[i]));
    }

    for (i = 0; i < selectedPoints.length; i++) {
        var point = selectedPoints[i];
        var newx1 = x1;
        var newx2 = x2;
        //  print("MAx values are : " + maxX + "3899518, " 150537+ maxY);
        var xPos = int(map(point.x, (minX - temp) - (temp / 4), maxX, newx1, newx2));
        var newy1 = y2;
        var newy2 = y1;
        var yPos = int(map(point.y, 0, maxY, newy1, newy2));
       // print("xpos an dypos are " + xPos + " " + yPos);
        //colorbyDisease(diseaseArr[i + 1], xPos, yPos);
        fill(230, 138, 0); 
        ellipse(xPos, yPos, 10, 10);
    }
    for (i = 0; i < selectedPoints.length; i++) {
        var point = selectedPoints[i];
        var newx1 = x1;
        var newx2 = x2;
        var xPos = map(point.x, (minX - temp) - (temp / 4), maxX, newx1, newx2);
        var newy1 = y2;
        var newy2 = y1;
        var yPos = int(map(point.y, 0, maxY, newy1, newy2));
        if (sq(mouseX - xPos) + sq(mouseY - yPos) < 80) {
          //  print("hi");
            fill(255, 0, 255);
            ellipse(xPos, yPos, 10, 10);
            // print(point);
            text(diseaseArr[i] + " (" + point.x + ", " + point.y + ")", mouseX + 15, mouseY);
        }
    }
}

function drawAxes(x1, y1, x2, y2) {
    stroke(100, 100, 100);
    strokeWeight(1.5);
    fill(100, 100, 100);
    textSize(18);
    line(x1, y1, x2, y2);
    var tickGap = (x2 - x1) / 5;
    for (var j = 0; j < 5; j++) {
        line(x1 + (j + 1) * tickGap, y1, x1 + (j + 1) * tickGap, y1 + tickSize);
    }
   // text(xField, x2 + 5, y2 + 40);
    x1 = x1;
    x2 = x1;
    y1 = y1;
    y2 = y1 - 300;
    line(x1, y1, x2, y2);
    tickGap = (y1 - y2) / 5;
    for (var j = 0; j < 5; j++) {
        line(x1, y2 + j * tickGap, x1 - tickSize, y2 + j * tickGap);
    }
   // text(yField, x1, y2 - 15);
}