var width = 800,
    height = 600;

var animateInterval = 300;

var x0_box = 100,
    //    dx = 20,
    y0_box = 100;
//  dy = 20


var square_separation = 325;

var dt = 100;
var nstep = 1410;

var fsz = 12;
var sq_sz = fsz + 8;

var x0_text = x0_box + fsz - 2;
var y0_text = y0_box + fsz + 2;

var svg = d3.select("#chart").append("svg")
    .attr("width", width)
    .attr("height", height);

var xsc = d3.scale.linear()
    .range([0, 14])
    .domain([0, 14]);
var ysc = d3.scale.linear()
    .range([0, 14])
    .domain([0, 14]);


var xx = function (i, j, x0, dx) {
    return x0 + dx * j;
}

var yy = function (i, j, y0, dy) {
    return y0 + dy * i;
}


var xx2 = function (i, j, x0, dx) {
    return square_separation + x0 + dx * i;
}

var yy2 = function (i, j, y0, dy) {
    return y0 + dy * j;
}


var i = 0;
d3.json('raw_kewl.json', function (data) {
    console.log(data);

    d3.select("#blahtext")
        .style('position', 'absolute')
        .style('left', x0_box + 0 + "px")
        .style('top', y0_box - 50 + "px")
        .append('text')
        .attr('id', 'blahtext-text')
        .text("blah")
        .style('font-family', 'san-serif')
        .style('font-size', '12px');


    var g1 = svg.append("g")
        .attr("class", "g1");

    var g2 = svg.append("g")
        .attr("class", "g2");

    svg.select(".g1")
        .selectAll(".grid1")
        .data(data[0])
        .enter()
        .append("rect")
        .attr("class", "grid1")
        .attr("x", function (d) {
            return xx(d.irow, d.icol, x0_box, sq_sz);
        })
        .attr('y', function (d) {
            return yy(d.irow, d.icol, y0_box, sq_sz);
        })
        .attr("width", sq_sz)
        .attr("height", sq_sz)
        .attr("stroke", "black")
        .attr("fill", function (d, i) {
            console.log("d vnew", d.vnew);
            return d.vnew == "." ? "black" : "white ";
        });

    svg.select(".g2")
        .selectAll(".grid2")
        .data(data[0])
        .enter()
        .append("rect")
        .attr("class", "grid2")
        .attr("x", function (d) {
            return xx2(d.irow, d.icol, x0_box, sq_sz);
        })
        .attr('y', function (d) {
            return yy2(d.irow, d.icol, y0_box, sq_sz);
        })
        .attr("width", sq_sz)
        .attr("height", sq_sz)
        .attr("stroke", "black")
        .attr("fill", function (d, i) {
            console.log("d vnew", d.vnew);
            return d.vnew == "." ? "black" : "white ";
        });


    svg.selectAll(".xword_square-1")
        .data(data[0])
        .enter()
        .append('text')
        .attr('class', 'xword-square-1')
        .attr('id', function (d) {
            return 'xword-square-1-' + d.irow + '-' + d.icol;
        })
        .attr('x', function (d) {
            return xx(d.irow, d.icol, x0_text, sq_sz);
        })
        .attr('y', function (d) {
            return yy(d.irow, d.icol, y0_text, sq_sz);
        })
        .text(function (d) {
            return d.vnew == "0" ? "" : d.vnew;
        })
        .attr("text-anchor", "middle")
        .style('font-size', function (d) {
            return fsz + "px";
        });

    svg.selectAll(".xword_square-2")
        .data(data[0])
        .enter()
        .append('text')
        .attr('class', 'xword-square-2')
        .attr('id', function (d) {
            return 'xword-square-2-' + d.irow + '-' + d.icol;
        })
        .attr('x', function (d) {
            return xx2(d.irow, d.icol, x0_text - 4, sq_sz);
        })
        .attr('y', function (d) {
            return yy2(d.irow, d.icol, y0_text, sq_sz);
        })
        .text(function (d) {
            return d.vnew == "0" ? "" : d.vnew;
        })
        .style('font-size', function (d) {
            return fsz + "px";
        });


    setInterval(function () {
        //        console.log("datai", data[i]);
        i += 1;
        var x = data[i];
        //      console.log('x', x, x.length);

        d3.select('#blahtext-text')
            .text(function () {
                return i > nstep ? '---' : "step= " + i;
            })

        d3.selectAll('.xword-square-1')
            .style('fill', 'black')
            .style('font-weight', 'normal')
            .style('font-size', fsz);

        d3.selectAll('.xword-square-2')
            .style('fill', 'black')
            .style('font-weight', 'normal')
            .style('font-size', fsz);


        _.forEach(x, function (e) {

            var id = 'xword-square-1-' + e.irow + '-' + e.icol;
            d3.select("#" + id)
                .text(function () {
                    return e.vnew == "0" ? "-" : e.vnew;
                })
                .style('fill', 'green')
                .style('font-weight', 'bold')
                .style('font-size', fsz + 2);

            var id = 'xword-square-2-' + e.irow + '-' + e.icol;
            d3.select("#" + id)
                .text(function () {
                    return e.vnew == "0" ? "-" : e.vnew;
                })
                .style('fill', 'green')
                .style('font-weight', 'bold')
                .style('font-size', fsz + 2);

        })

    }, dt);

});