/**
 *
 */
Visualizer.prototype.swap = function(delay, indexA, indexB) {
    // 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(delay)
            .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(delay, index) {
    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; });
};

/**
 * Greys out an item.
 */
Visualizer.prototype.fade = function(delay, startIndex, endIndex) {
    this.groups.each(function(d) {
        if (d.index >= startIndex && d.index <= endIndex) {
            d3.select(this).style('opacity', '0.2');
        }
    });
};

/**
 * Restores all items to un-greyed state.
 */
Visualizer.prototype.unfade = function() {
    this.groups.each(function(d) {
        d3.select(this).style('opacity', 1);
    });
};

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

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

/**
 * Marker movement.
 */
Visualizer.prototype.marker = function(delay, which, index, label) {
    if (label !== undefined) {
        label = label[0].toString();
        this.svg.select(`#marker${which} text`).text(label)
    }

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

/**
 * Message updates.
 */
Visualizer.prototype.message = function(delay, which, msg) {
    var msg = msg || '&nbsp;';
    this.parent.querySelector(`.message:nth-child(${which})`).innerHTML = msg;
};