var table;

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


function setup() {
	createCanvas(1000, 700);
}

function draw(){
	clear()
	var total_Rape = table.getColumn('Totals.Violent.Rape');
	var years = table.getColumn('Year');
  	
	push();
	fill(0,0,0)
    textSize(30)
    textStyle(BOLD)
    text("Alabaster P.D. Rape Crimes", 250, 500)
    pop()

	fill(0,0,0)

	textSize(10);
	text('# of Rapes', 10, 200);
	line(99,10,99, 410);

	textSize(10);
	text("Years", 410, 450);
	line(100,400,800, 400);


	for(var x = 0; x < table.getRowCount(); x++){
		var tick1 = map(years[x], min(years), max(years), 110,800)
		line(tick1,400, tick1,406)
	}
	for(var x = 0; x < table.getRowCount(); x++){
		var tick1 = map(years[x], min(years), max(years), 110,800)
		text(years[x], tick1-10, 420)
	}

	for(var x = 0; x < table.getRowCount(); x++){
		var tick2 = map(total_Rape[x], min(total_Rape), max(total_Rape), 400,10)
		line(95,tick2, 98,tick2)
		text(total_Rape[x], 85,tick2)
	}

	translate(110,400);
	var first_x = map(years[0], min(years), max(years), 0, 690)
	var first_y = map(total_Rape[0], min(total_Rape), max(total_Rape), 0,390)
	push()
	stroke(204, 51, 51)
	line(-10,0,first_x,-first_y)
	var time = 0;
	for(var x = 0; x < table.getRowCount(); x++){
		var x0 = map(years[x-1], min(years), max(years), 0, 690)
		var y0 = map(total_Rape[x-1], min(total_Rape), max(total_Rape), 0,390)
		var x1 = map(years[x], min(years), max(years), 0, 690)
		var y1 = map(total_Rape[x], min(total_Rape), max(total_Rape), 0,390)
		point(x1, -y1);
		line(x0,-y0,x1,-y1);
		if(mouseX-110 < x1+2 && mouseX-110 > x1-2 && mouseY-400 < -y1+2 && mouseY-400> -y1-2){
			
			fill(0,0,0)
			textSize(10);
			if(time == 0){
				text(total_Rape[x], mouseX-110, mouseY-402)
				time = time + 1
				
			}
		}
	} 
	pop()
	
}