/**
 *
 */
Visualizer.prototype.swap = function(args) {
    var indexA = args[2];
    var indexB = args[3];

    // NOTE Two way binding here between dataset and function parameter?
    // NOTE swapping will not reorder index and i parameter will be off
    // NOTE discuss chained transitions: http://bl.ocks.org/mbostock/1125997
    this.groups
        .transition().duration(400)
            .attr('transform', function doTransform(d) {
                if (d.index === indexA) {
                    d.index = indexB;
                }
                else if (d.index === indexB) {
                    d.index = indexA;
                }

                return `translate(${Visualizer.calculateX(d.index)}, ${Visualizer.itemY})`;
            })
};

/**
 * Highlights an index.
 */
Visualizer.prototype.highlight = function(args) {
    var index = args[2];

    if (index < 0) {
        console.error('Trying to highlight index of ' + index);
        return;
    }

    this.groups.each(function(d, i) {
        if (d.index === index) {
            d3.select(this).select('rect').attr('fill', 'orangered')
        }
    });
};

/**
 * Un-highlights an index.
 */
Visualizer.prototype.unhighlight = function() {
    this.svg.selectAll('.item').attr('fill', function(d) { return d.fill; });
};

// TODO restart instructions on re-init
// TODO on 'next step', skip past all zero-length timeouts -> do this in followInstruction by checking if timeout is zero
// TODO add adaptive/stable bools below canvas
// TODO add tabs for best/worst cases

// /**
//  * Greys out an item.
//  */
// Visualizer.prototype.fade = function(startIndex, endIndex) {
//     console.log(`fading from ${startIndex} to ${endIndex}`);
//     this.svg.selectAll('rect')
//         // NOTE this replaces the fill function reference for each rectangle - key point!
//         .attr('fill', function fill(d) {
//             if (d.index >= startIndex && d.index <= endIndex) {
//                 console.log(`${d.index} to ${d.fade}`)
//                 return d.fade;
//             }
//             return d.fill;
//         });
// };

// /**
//  * Restores all items to un-greyed state.
//  */
// Visualizer.prototype.unfade = function() {
//     this.svg.selectAll('rect')
//         .attr('fill', functi;n fill(d) {
//             console.log(`unfade ${d.index}`)
//             return d.fill;
//         })
// };

/**
 *
 */
Visualizer.prototype.hideMarker = function(args) {
    var which = args[2];
    this.svg.select(`#marker${which}`).attr('style', 'display:none');
};

/**
 *
 */
Visualizer.prototype.showMarker = function(args) {
    var which = args[2];
    this.svg.select(`#marker${which}`).attr('style', 'display:block');
};

/**
 * Marker movement.
 */
Visualizer.prototype.marker = function(args) {
    var which = args[2];
    var index = args[3];
    var label = args[4];

    if (label !== undefined) {
        label = label[0].toString();
        this.svg.select(`#marker${which} text`).text(label)
    }

    this.svg.select(`#marker${which}`)
        .transition().duration(100)
        .attr('transform', `translate(${Visualizer.calculateX(index)},${Visualizer.spacerW})`)
};

/**
 * Message updates.
 */
Visualizer.prototype.message = function(args) {
    var which = args[2];
    var msg = args[3];
    this.parent.querySelector(`.message:nth-child(${which})`).innerHTML = msg;
};