var canvasSize = 1200; // Canvas size, to be square
var n; // Number of data
var title = 'Facebook network'; // Title
var label = 'Facebook User ID';


var orgX; 
var orgY;
// X and Y where the matrix starts

var lengthLine; // The matrix line length

var subset; // The width/length per data
var lineSep = 20; // Line in how many rows


var raw_file;// File to be read
var id_list = new Array(0); // To use number to keep track what id we have
var edge_arr = new Array(0); // Array to store edge

function preload(){
	raw_file = loadStrings('edges.txt');
}

function setup(){
	createCanvas(canvasSize,canvasSize);
	orgX = 100;
	orgY = 100;

	lengthLine = (canvasSize - 200); // Save 100 on each side	

	for(var i=0; i<raw_file.length; i++){
		var words = split(raw_file[i]," ");
		if(!id_list.includes(int(words[0])))
			id_list.push(int(words[0]));
		if(!id_list.includes(int(words[1])))
			id_list.push(int(words[1]));
		// Create an array to have the list of id's
		edge_arr.push(new edge(int(words[0]),int(words[1])));	
		// Add the edges into an array
	}

	var max = 0;
	for (var k=0; k<id_list.length;k++){
		if(id_list[k]>max)
			max = id_list[k];
	}
	n = max; // To obtain the largest number id used
	subset = lengthLine/n; // To calculate distance for each point

	
	
}
class edge{
	constructor(v1,v2){
		this.v1 = v1;
		this.v2 = v2;
	}

	get_v1(){
		return this.v1;
	}
	get_v2(){
		return this.v2;
	}
}

function draw(){
	background(255);
	push();
	textSize(24);
	text(title,lengthLine/2,30); // Put the title
	pop();

	for(var i=0; i<n+1;i++){
		push();
		stroke(244);
		line(orgX,orgY+i*subset,orgX+lengthLine,orgY+i*subset);
		line(orgX+i*subset,orgY,orgX+i*subset,orgY+lengthLine);
		pop();
	}
	

	for(var j=0;j<n;j+=lineSep){
		text(j,50,orgY+j*subset+subset/2);
		text(j,orgX+j*subset+subset/2,80);
	} // Label the axis
	text(label,lengthLine*0.8,50); // Label x axis
	var label_vert = '';
	for (var k=0; k<label.length;k++){
		label_vert += label.charAt(k) + '\n';
	}
	text(label_vert,30,lengthLine/3);
	// Label y-axis

	

	for(var i=0;i<edge_arr.length;i++){
		
		if(mouseX >= orgX+(edge_arr[i].get_v1())*subset &&
			mouseX <= orgX+(edge_arr[i].get_v1())*subset+subset &&
			mouseY >= orgY+(edge_arr[i].get_v2())*subset &&
			mouseY <= orgY+(edge_arr[i].get_v2())*subset+subset){
			push();
			fill(0,0,255);
			text("Connection between Facebook ID# "+edge_arr[i].get_v1()+" and Facebook ID# "+ edge_arr[i].get_v2(), 50,50);
			rect(orgX+(edge_arr[i].get_v1()-2.5)*subset,orgY+(edge_arr[i].get_v2()-2.5)*subset,5*subset,5*subset);
			pop();
		}
		else{
			push();
			fill(255,0,0);
			rect(orgX+(edge_arr[i].get_v1()-1)*subset,orgY+(edge_arr[i].get_v2()-1)*subset,subset,subset);
			pop();
		}
	}
	
}