var width; // Canvas width in x-axis
var length; // Canvas length in y-axis
var raw_file;
var id_list = new Array(0); // To use number to keep track what id we have
var vertex_arr = new Array(0); // Array of vertex in vertex class
var edge_arr = new Array(0); // Array to store edge

var title = "Facebook ID Connections";

var numNodes;
var k;

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

function setup(){
	width = 1000;
	length = 1000;
	createCanvas(width, length);

	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
	}
	


	for (var j=0; j<id_list.length;j++){
		var temp = new vertex(id_list[j]);
		vertex_arr.push(temp);
	}
	// Once you have the list of id's, convert those id's to be a vertex

	numNodes = int(vertex_arr.length); // V
	k = Math.sqrt((width*length)/numNodes); // k

	// Calculating the force
	for(var i=0; i<vertex_arr.length;i++){
		vertex_arr[i].resetDisp();
	} // Before calculating, reset the displacement to 0

	for(var i=0; i<vertex_arr.length;i++){
		var v1 = vertex_arr[i];
		var v1_dispX = 0;
		var v1_dispY = 0;
		for(var j=0; j<vertex_arr.length;j++){
			var v2 = vertex_arr[j];
			var dis_x;
			var dis_y;
			if(int(v1.getName()) != int(v2.getName())){
				dis_x = v1.getX() - v2.getX();
				dis_y = v1.getY() - v2.getY();
			}
			v1_dispX += (dis_x/Math.abs(dis_x)) * f_rx(Math.abs(dis_x));
			v1_dispY += (dis_y/Math.abs(dis_y)) * f_rx(Math.abs(dis_y));

		} // End for j
		v1.addDisp_x(v1_dispX);
		v1.addDisp_y(v1_dispY);
	} // Calculate repulsive forces

	for (var i=0; i<edge_arr.length;i++){
		var v1 = findVertex(edge_arr[i].get_v1());
		var v2 = findVertex(edge_arr[i].get_v2());
		var dis_x = v1.getX() - v2.getX();
		var dis_y = v1.getY() - v2.getY();

		var disp_x = (dis_x/abs(dis_x))*f_ax(abs(dis_x));
		var disp_y = (dis_y/abs(dis_y))*f_ax(abs(dis_y));

		v1.addDisp_x(-disp_x);
		v2.addDisp_y(disp_y);
	} // Attractive force
	
	for(var i=0; i<vertex_arr.length; i++){
		var tempX = vertex_arr[i].getX();
		var tempDispX = vertex_arr[i].get_dispX();
		var tempY = vertex_arr[i].getY();
		var tempDispY = vertex_arr[i].get_dispY();

		vertex_arr[i].setNetX(adjust_netX(tempX,tempDispX));
		vertex_arr[i].setNetY(adjust_netY(tempY,tempDispY));
	}
	// Limit max displacement to temperature and prevent displacement outside frame



}

function findVertex(v){
	var temp;
	for(var i=0; i<vertex_arr.length; i++){
		if(vertex_arr[i].getName()==v){
			temp = vertex_arr[i];
		}
	}
	return temp;
}

function adjust_netX(orgX,disp_x){
	var netX = orgX + disp_x/500;
	if (netX < 120)
		return 120;
	else if (netX > width-120)
		return width-120;
	return netX;
}

function adjust_netY(orgY,disp_y){
	var netY = orgY + disp_y/500;
	if (netY < 120)
		return 120;
	else if (netY > length-120)
		return length-120;
	return netY;
}

class vertex{
	constructor(name){
		this.x = Math.floor(Math.random()*width);
		this.y = Math.floor(Math.random()*length);
		this.disp_x = 0;
		this.disp_y = 0;
		this.netX = 0;
		this.netY = 0;
		this.name = name;

		while(this.x <120 || this.x > width-120){
			this.x = Math.floor(Math.random()*width);
		}
		while(this.y <120 || this.y > length-120){
			this.y = Math.floor(Math.random()*length);
		}
	}
	resetDisp(){
		this.disp_x =0;
		this.disp_y =0;
	} // For making sure disp_x and disp_y is 0, after the initial position is randomize

	addDisp_x(num){
		this.disp_x += num;
	}
	addDisp_y(num){
		this.disp_y += num;
	} // To add disp_x and disp_y

	setDisp_x(num){
		this.disp_x = num;
	}
	setDisp_y(num){
		this.disp_y = num;
	}

	setNetX(numX){
		this.netX = numX;
	}
	setNetY(numY){
		this.netY = numY;
	}

	getX(){
		return this.x;
	}
	getY(){
		return this.y;
	}
	get_dispX(){
		return this.disp_x;
	}
	get_dispY(){
		return this.disp_y;
	}

	get_netX(){
		return this.netX;
		//return this.x + this.disp_x/500;
	}

	get_netY(){
		return this.netY;
		//return this.y + this.disp_y/500;
	}

	getName(){
		return this.name;
	}
}

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

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

function f_ax(x){
	return ((x^2)/k);
}

function f_rx(x){
	//print(sq(k)/x)
	return (sq(k)/x);
}


function draw(){
	background(255);
	push();
	textSize(22);
	text(title,width*.4,30);
	pop();
	// Put the title of the graph

	for (var j=0; j<edge_arr.length; j++){
		var v1_id = edge_arr[j].get_v1();
		var v2_id = edge_arr[j].get_v2();
		// These are the int form of id, use those to obtain the vertex object

		var v1_obj = findVertex(v1_id);
		var v2_obj = findVertex(v2_id);
		// Obtain vertex object in order to find (x,y) position of v1 and v2	
	
		push();
		stroke('red');
		line(v1_obj.get_netX(),v1_obj.get_netY(),v2_obj.get_netX(),v2_obj.get_netY());
		pop();
	} // Draw the edges for no interaction
	
	
	for(var i=0;i<vertex_arr.length;i++){

		var vertex = vertex_arr[i];

		// Interaction here
		if(dist(vertex.get_netX(),vertex.get_netY(),mouseX,mouseY)<4){
			background(255); // Clear the canvas
			
			var edges_related = Array(0); // Array to store the node id's connected to variable vertex
			push();
			textSize(22);
			text(title,width*.4,30);
			pop(); // Put the title

			// Draw the edges related to this selected node
			for (var j=0; j<edge_arr.length;j++){
				if(edge_arr[j].get_v1() == vertex.getName() || edge_arr[j].get_v2() == vertex.getName()){
					if(!edges_related.includes(edge_arr[j].get_v1()))
						edges_related.push(edge_arr[j].get_v1());
					if(!edges_related.includes(edge_arr[j].get_v2()))
						edges_related.push(edge_arr[j].get_v2());
				}
			} // Find all the connected nodes
			for(var j=0; j<edges_related.length;j++){
				var vertex2 = findVertex(edges_related[j]);
				push();
				stroke(48,81,135);
				line(vertex.get_netX(),vertex.get_netY(),vertex2.get_netX(),vertex2.get_netY());
				pop();
				push();
				if(vertex2.getName() != vertex.getName())
					text(vertex2.getName(),vertex2.get_netX()-10,vertex2.get_netY()-20);
				pop();
			}
			
			push();
			fill(0,0,255);
			text(vertex.getName(),vertex.get_netX()-10,vertex.get_netY()-40);
			ellipse(vertex.get_netX(),vertex.get_netY(), 40,40);
			pop();

			var k=i-1;
			push();
			while(k>0){
				ellipse(vertex_arr[k].get_netX(),vertex_arr[k].get_netY(), 20,20);
				k--;
			} // Draw the nodes before the i-th element in the loop
			pop();
			
		} 
		// If there is no interaction
		else{
			push();
			ellipse(vertex.get_netX(),vertex.get_netY(), 20,20);
			pop();
		}
		
	} // Draw the nodes
	
	
}