var canvas;
var chart;
var majors = [];
var student = [];
var years = [];
var comsci = [];
var elec = [];
var bio = [];
var other = [];
var rangeX,maxX,rangeY,maxY;
var count = 0,countA = 0, countB = 0;
function preload(){
    table = loadTable('graduates.csv', 'csv', 'header');
}

function setup(){
    years=[1993,1995,1997,1999,2001,2003,2006,2008,2010,2013,2015];
    majors=['Computer Science and Math','Electrical Engineering','Biological Sciences','Other Engineering'];
       canvas = {
        width: 2000,
        height: 600,
        margin: 20,
        text: 'Major',
    };
    chart ={
        width: canvas.width/majors.length,
        height: 500,
        margin:50,
        label:20,
        stepX:50,
        stepY:100,
        textX:'Asians',
        textY: 'Year'
    };

    for (var i = 0; i < table.getRowCount(); i++) {
        if(table.getRow(i).getString('Major') == majors[0]){
            append(comsci,table.getRow(i).getString('Asians'));
        }
        else if(table.getRow(i).getString('Major') == majors[1]){
            append(elec,table.getRow(i).getString('Asians'));
        }
        else if(table.getRow(i).getString('Major') == majors[2]){
             append(bio,table.getRow(i).getString('Asians'));
        }
        else if(table.getRow(i).getString('Major') == majors[3]){
             append(other,table.getRow(i).getString('Asians'));
        }    
        
    }
     
    maxY = Math.round(floor(max(comsci)/chart.stepY));
    rangeY = Math.round(floor(max(comsci)/(maxY)));
    rangeX = (chart.width+chart.margin)/years.length;
    createCanvas(canvas.width,canvas.height);
    drawAxis();
}

function drawAxis(){   
    line(chart.margin,chart.height, (chart.width*(majors.length-1))+(chart.margin*(majors.length)), chart.height);
    text(chart.textX,chart.margin-chart.label,chart.margin-5);
    push();
    textStyle(BOLD);
    text(canvas.text,(canvas.width+chart.margin)/2,canvas.margin);
    pop();
    
    for(var i = 0; i<majors.length-1;i++){
        push();
        textStyle(BOLD);
        text(majors[i],((chart.margin+chart.width)*i)+(chart.width+(majors[i].length)*2)/2-chart.label,chart.margin);
        text(chart.textY,((chart.margin+chart.width)*(i))+(chart.width/2)+chart.margin,chart.height+chart.margin);
        line(((chart.margin+chart.width)*i)+chart.margin,chart.margin,((chart.margin+chart.width)*i)+chart.margin, chart.height); //Y
        pop();
       
        for(var x=(chart.width*i)+(chart.margin*i)-1;x < (chart.width*(i+1))+(chart.margin*i);x+=rangeX){
            push()
            stroke(220,220,220);
            line(x+chart.margin,chart.margin,x+chart.margin, chart.height);
            text(years[count%years.length],x+chart.margin,chart.height+chart.label);
            count++;
            pop();
        }
   
    }
    
    for(var y=1;y<chart.height; y+=rangeY){ //X
        stroke(220,220,220);
        line(chart.margin,chart.height-y,(chart.width*(majors.length-1))+(chart.margin*(majors.length)), chart.height-y);
        text((y-1)+"K",chart.label,chart.height-y);
    }
    
}

function draw(){
    for(var i = 0; i<majors.length;i++){
        for(var j = 0;j<years.length;j++){
            if(i==0){
                push();
                fill(255,209,204);
                noStroke();
                rect(chart.margin+((chart.width+chart.margin)/years.length)*j,chart.height-(comsci[j]/1000),chart.label,comsci[j]/1000);
                   if(mouseX > chart.margin+((chart.width+chart.margin)/years.length)*j && mouseY > chart.height-(comsci[j]/1000) && 
                   mouseX < chart.margin+((chart.width+chart.margin)/years.length)*j+chart.label && mouseY < canvas.height){
                       fill(0);
                       noStroke();
                       text(parseInt(comsci[j]).toLocaleString('en'),chart.margin+((chart.width+chart.margin)/years.length)*j,chart.height-5-(comsci[j]/1000));
                    
                } 
                pop();
            }
            else if(i==1){
                push();
                fill(102,0,204);
                noStroke();
                rect(((chart.width*i)+(chart.margin*(i+1)))+((chart.width+chart.margin)/years.length)*j,chart.height-(elec[j]/1000),chart.label,elec[j]/1000);
                 if(mouseX > ((chart.width*i)+(chart.margin*(i+1)))+((chart.width+chart.margin)/years.length)*j
                    && mouseY > chart.height-(comsci[j]/1000) 
                    && mouseX < ((chart.width*i)+(chart.margin*(i+1)))+((chart.width+chart.margin)/years.length)*j+chart.label 
                    && mouseY < canvas.height){
                       fill(0);
                       noStroke();
                       text(parseInt(elec[j]).toLocaleString('en'),((chart.width*i)+(chart.margin*(i+1)))+((chart.width+chart.margin)/years.length)*j,chart.height-5-(elec[j]/1000));
                    
                } 
                pop();
            }
            else if(i==2){
                push();
                fill(0,153,76);
                noStroke();
                rect(((chart.width*i)+(chart.margin*(i+1)))+((chart.width+chart.margin)/years.length)*j,chart.height-(bio[j]/1000),chart.label,bio[j]/1000);
                if(mouseX > ((chart.width*i)+(chart.margin*(i+1)))+((chart.width+chart.margin)/years.length)*j
                    && mouseY > chart.height-(comsci[j]/1000) 
                    && mouseX < ((chart.width*i)+(chart.margin*(i+1)))+((chart.width+chart.margin)/years.length)*j+chart.label 
                    && mouseY < canvas.height){
                       fill(0);
                       noStroke();
                       text(parseInt(bio[j]).toLocaleString('en'),((chart.width*i)+(chart.margin*(i+1)))+((chart.width+chart.margin)/years.length)*j,chart.height-5-(bio[j]/1000));
                } 
                pop();
            }
          
            
       }
    }
}