var width = 720,
    height = 720,
    outerRadius = Math.min(width, height) / 2 - 10,
    innerRadius = outerRadius - 24;

var formatPercent = d3.format("05.2%");

var arc = d3.svg.arc()
    .innerRadius(innerRadius)
    .outerRadius(outerRadius);

var layout = d3.layout.chord()
    .padding(.04)
    .sortSubgroups(d3.descending)
    .sortChords(d3.ascending);

var path = d3.svg.chord()
    .radius(innerRadius);

var con = d3.select("body")
    .append("svg")
    .attr("width", width + 300)
    .attr("height", height);

var svg = con.append("g")
    .attr("id", "circle")
    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

svg.append("circle")
    .attr("r", outerRadius);

var letter_table = d3.select("body")
    .append("table")
    .attr("class", "letter_table")
    .attr("border", "1");

var head_row = letter_table
    .append("tr");

head_row
    .append("th")
    .text("")
    .style('font-size', '10px');

head_row
    .append("th")
    .attr('id', 'table_header')
    .text("--")
    .style('font-size', '10px');


var test = 0;
var cfile = "";
var mfile = "";
cfile = "groups.csv";
mfile = "matrix.json";

function letter_dict(letters, matrix) {
    var ans = {};
    letters.forEach(function (d) {
        ans[d.name] = {};
    });

    matrix.forEach(function (row, i) {
        row.forEach(function (col, j) {
            //            console.log(i, letters[i], j, letters[j], col);
            ans[letters[j]['name']][letters[i]['name']] = col;
        })
    });

    return ans;
};

var vowels = ['a', 'e', 'i', 'o', 'u'];

d3.csv(cfile, function (letters) {
    d3.json(mfile, function (matrix) {

        console.log('letters', letters);
        console.log('matrix', matrix);

        var ans = letter_dict(letters, matrix);
        console.log('ans', ans);
        // build the table


        //        table_data.selectAll('td.table_data')
        //        .data(letters)
        //        .enter()
        //        .append(

        // Compute the chord layout.
        layout.matrix(matrix);

        // Add a group per neighborhood.
        var group = svg.selectAll(".group")
            .data(layout.groups)
            .enter().append("g")
            .attr("class", "group")
            .on("mouseover", mouseover);

        // Add a mouseover title.
        // group.append("title").text(function(d, i) {
        // return letters[i].name + ": " + formatPercent(d.value) + " of origins";
        // });

        // Add the group arc.
        var groupPath = group.append("path")
            .attr("id", function (d, i) {
                return "group" + i;
            })
            .attr("d", arc)
            .style("fill", function (d, i) {
                return letters[i].color;
            });

        // Add a text label.
        var groupText = group.append("text")
            .attr("x", 6)
            .attr("dy", 15);

        groupText.append("textPath")
            .attr("xlink:href", function (d, i) {
                return "#group" + i;
            })
            .text(function (d, i) {
                return letters[i].name;
            });

        // Remove the labels that don't fit. :(
        groupText.filter(function (d, i) {
                return groupPath[0][i].getTotalLength() / 2 - 16 < this.getComputedTextLength();
            })
            .remove();

        // Add the chords.
        var chord = svg.selectAll(".chord")
            .data(layout.chords)
            .enter().append("path")
            .attr("class", "chord")
            .style("fill", function (d) {
                return letters[d.source.index].color;
            })
            .attr("d", path);


        d3.select('.letter_table')
            .style('position', 'absolute')
            .style('right', '20px')
            .style('top', '80px')
            .style('width', '100px');

        d3.select('.title_text')
            .style('position', 'absolute')
            .style('right', '-20px')
            .style('top', '10px')
            .style('width', '325px')
            .style('font-family', 'sans-serif');

        table_data = d3.select('.letter_table')
            .selectAll('tr.table_data')
            .data(letters)
            .enter()
            .append('tr')
            .text(function (d, i) {
                return d.name;
            })
            .style('font-size', '12px')
            .style('color', function (d, i) {
                return _.contains(vowels, d.name) ? 'blue' : 'black';
            })
            .append('td')
            .attr('class', 'table_data')
            .attr('id', function (d, i) {
                return 'td-' + d.name;
            })
            .text('--')
            .style('color', function (d, i) {
                return _.contains(vowels, d.name) ? 'blue' : 'black';
            })
            .style('font-size', '12px');

        // Add an elaborate mouseover title for each chord.
        chord.append("title").text(function (d) {
            return letters[d.source.index].name + " → " + letters[d.target.index].name + ": " + formatPercent(d.target.value) + "\n" + letters[d.target.index].name + " → " + letters[d.source.index].name + ": " + formatPercent(d.source.value);
        });

        function mouseover(d, i) {
            chord.classed("fade", function (p) {
                return p.source.index != i && p.target.index != i;
            });

            d3.select('#table_header')
                .text(function (x) {
                    console.log('d', d, letters[d.index].name);
                    return letters[d.index].name;
                });

            d3.selectAll('.table_data')
                .text(function (x, j) {
                    var l1 = letters[d.index].name;
                    var l2 = letters[j].name;
                    var t = matrix[j][i];
                    return t > 0.0001 ? formatPercent(t) : '-----';
                });

        }

        function mouseout(d, i) {
            d3.select('#table_header')
                .text('');
        };

    });
});