var canvas_matrix;
var canvas;
var table_edges;
var rangeW,rangeH;
var edges = [];
var nodes = [];
var sorted_nodes = [];
var nodeids_circles = [];
var circles = [];
var n,zoom;

function preload(){
    table_edges = loadTable('686.edges', 'tsv');
}

function setup() {
    zoom = 15;
    n = 80;
    for(var i=0;i<table_edges.getRowCount();i++){
        append(edges,table_edges.getString(i,0));
        var arr = table_edges.getString(i,0).split(' ');
        if(nodes.indexOf(arr[0]) < 0){
            append(nodes,arr[0]);
        }
        else if(nodes.indexOf(arr[1]) < 0){
            append(nodes,arr[1]);
        }
    }
    sorted_nodes = nodes.sort(function(a, b){return a - b});
    canvas_matrix = {
        width: nodes.length*zoom,
        height: nodes.length*zoom
    };
     canvas  = {
        width:canvas_matrix.width*1.1,
         height: canvas_matrix.height*1.1
    }
    matrix = {
        width: nodes.length,
        height: nodes.length
    };
    createCanvas(canvas.width, canvas.height);
   
}

function drawMatrix(w,h){
    rangeW = (canvas_matrix.width-1)/(w+1);
    rangeH = (canvas_matrix.height-1)/(h+1);
    push();
    fill('rgba(220,220,220,0.5)');
    noStroke();
    rect(n,n,canvas_matrix.width-zoom,canvas_matrix.height-zoom);
    pop();
    push();
    stroke(255);
      for (var x =  rangeW; x <= canvas_matrix.width; x += rangeW) {
            line(x+n, n,x+n, canvas_matrix.height+n);    
      }
      for (var y =  rangeH; y <= canvas_matrix.height; y += rangeH) {
            line(n, y+n,canvas_matrix.width+n, y+n);
      }
    pop();
}

function draw() {
     background(255);
     push();
     textStyle(BOLD);
     textSize(20);
     text("Matrix-based Representation",n,n/2);
     pop();
     drawMatrix(matrix.width,matrix.height); 
     drawValue();
     for(var i=0;i<edges.length;i++){
        var arr = edges[i].split(' ');
         push();
         noStroke();
         fill('rgb(255,127,80)');
         rect(rangeW*(sorted_nodes.indexOf(arr[0]))+n,rangeH*(sorted_nodes.indexOf(arr[1]))+n, rangeW, rangeH);
         pop();
         var d = dist(mouseX,mouseY,(rangeW/2)+(rangeW*(sorted_nodes.indexOf(arr[0]))+n),(rangeH/2)+(rangeH*(sorted_nodes.indexOf(arr[1]))+n));
         if(d <= rangeW/2){
             push();
             strokeWeight(rangeW);
             stroke(255, 0, 10, 0.2);    
             colorMode(RGB, 255, 255, 255, 1);
             line((rangeW/2)+(rangeW*(sorted_nodes.indexOf(arr[0]))+n), n+5,(rangeW/2)+(rangeW*(sorted_nodes.indexOf(arr[0]))+n), (rangeH/2)+(rangeH*(sorted_nodes.indexOf(arr[1]))+n)); 
             line(n+5, (rangeH/2)+(rangeH*(sorted_nodes.indexOf(arr[1]))+n),(rangeW/2)+(rangeW*(sorted_nodes.indexOf(arr[0]))+n), (rangeH/2)+(rangeH*(sorted_nodes.indexOf(arr[1]))+n));
             pop();
             push();
             noStroke();
             fill(255);
             var x;
             if(mouseX >= (95/100*canvas_matrix.width)){
                 x = -(arr[0].length + arr[1].length)*8;
             }
             else{
                 x = rangeW;
             }
             pop();
             push();
             textSize(10);
             textStyle(BOLD);
             text(arr[0]+","+arr[1],mouseX+x,mouseY-5);
             pop();
       }
    }
}

function drawValue(){
    push();  
        for(var j=0;j<nodes.length;j++){            
            textSize(rangeW/2);
            textStyle(BOLD);
            push();
            translate(n-5,(rangeH+rangeH*j*0.001)+n-20);
            rotate(HALF_PI*3);
            text(nodes[j],0,rangeH+rangeH*j);
            pop();
            text(nodes[j],n-20,((rangeH*j))+n+10);
        }
    pop();
}