var table;
var node = []; // vertices array
var edge = []; // edges array
var addNode0;
var addNode1;
var l = 5;

function preload() {
	// my table is comma separated value "csv“ 
	table = loadTable('0-new.edges', 'csv');
}

function setup() {
	// count the columns
	print("Hello!");
	print(table.getRowCount() + ' total rows in table');
	print(table.getColumnCount() + ' total columns in table');
	
	// cycle through the table
	for (var r = 0; r < table.getRowCount(); r++) {
		// add edges into edges array
		nx = new Edge();
		nx.value0 = table.getNum(r, 0);
		nx.value1 = table.getNum(r, 1);
		edge.push(nx);
		
		// add vertices into nodes array
		addNode0 = 1;
		addNode1 = 1;
		
		for (var s = 0; s < node.length; s++) {
			if (node[s].value == table.getNum(r, 0))
				addNode0 = 0;
			if (node[s].value == table.getNum(r, 1))
				addNode1 = 0;
		}
		
		if (addNode0 == 1) {
			n0 = new Node();
			n0.value = table.getNum(r, 0);
			node.push(n0);
		}
		if (addNode1 == 1) {
			n1 = new Node();
			n1.value = table.getNum(r, 1);
			node.push(n1);
		}
	}
	
	createCanvas(2500, 2500);
	
	// validate
	print("node.length = " + node.length);
	print("edge.length = " + edge.length);
}

function draw() { 
	background(255);
	translate(40, 20);
	fill(255, 115, 25);
	textSize(8);
	
	// iterate all vertices
	for (var s = 0; s < node.length; s++) {
		// draw the x-axis
		text(node[s].value, s*l+5, 0);
		
		// iterate all vertices
		for (var t = 0; t < node.length; t++) {
			// determine if those two vertices have edge
			for (var e = 0; e < edge.length; e++) {
				// if so, draw the rect
				if ((node[s].value == edge[e].value0 && node[t].value == edge[e].value1) ||
					(node[s].value == edge[e].value1 && node[t].value == edge[e].value0)) {
						rect(s*l, t*l, l, l);
				}
			}
			
			// draw the y-axis
			text(node[t].value, -20, t*l+12);
		}
	}
	
	// draw the grid
	for (var i = 0; i <= node.length; i++) {
		line(0, l*i, node.length*l, l*i);
		line(l*i, 0, l*i, node.length*l);
	}
	
	// hover display
	for (var s = 0; s < node.length; s++) {
		for (var t = 0; t < node.length; t++) {
			if (mouseX <= s*l+l+40 && mouseX >= s*l+40 && mouseY <= t*l+l+20 && mouseY >= t*l+20) {
				fill(0, 102, 153);
				textStyle(BOLD);
				textAlign(CENTER);
				fill('blue');
				textSize(25);
				text(node[s].value+','+node[t].value, mouseX, mouseY);
				fill(255, 115, 25);
			}
		}
	}
}

// Node structure to store all vertices
function Node() {
	this.value;
}

// Edge structure to store all edges (two nodes)
function Edge() {
	this.value0;
	this.value1;
}