var curriedBandline = flyd.stream([model, model], function() {
    return setupBandline(model())
})

var config = flyd.stream()({
    rowPitch: 40
})

flyd.stream([curriedBandline, model, config], function() {
    render(curriedBandline(), model(), config())
})

function render(curriedBandLine, tsers, config) {

    var margin = {top: 5, right: 40, bottom: 20, left: 120}
    var width = 370 - margin.left - margin.right
    var height = 370 - margin.top - margin.bottom

    var rowPitch = config.rowPitch
    var bandLineHeight = rowPitch * 0.75

    // Column widths
    var nameColumnWidth = 165
    var bandLineWidth = 100
    var sparkStripWidth = 50
    var columnSeparation = 6

    // The bandline gets augmented with the View specific settings (screen widths etc.)
    var bandLine = curriedBandLine // fixme implement bandline .copy

    // Augment partially set up elements
    bandLine.xScaleOfBandLine().range([0, bandLineWidth])
    bandLine.xScaleOfSparkStrip().range([0, sparkStripWidth])
    bandLine.rScaleOfBandLine().range([2, 0, 2])

    // Add new elements
    bandLine
        .rScaleOfSparkStrip(R.always(2))
        .yRange([bandLineHeight / 2 , -bandLineHeight  / 2])
        .yRangeOfSparkStrip([rowPitch / 2  , -rowPitch / 2])

    // Initialise the bandline renderer with SVG defs
    var svg = d3.selectAll('svg')
    bandLine.addDefs(svg)

    /**
     * Root
     */

    svg
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom)

    var dashboard = bind(svg, 'dashboard', 'g', [{key: 0}])


    /**
     * Headers
     */

    bind(dashboard, 'header', 'text', [{key: 'Name'}, {key: 'Spread'}, {key: 'Time Series'}])
        .entered
        .text(key)
        .attr('transform', translate(function(d, i) {
            return [0, nameColumnWidth, nameColumnWidth + sparkStripWidth + 3 * columnSeparation][i]
        }, rowPitch))


    /**
     * Rows
     */

    var row = bind(dashboard, 'row', 'g', tsers)

    row.attr('transform', function rowTransform(d, i) {return translateY((i + 2) * rowPitch)()})

    bind(row, 'nameCellText', 'text')
        .text(key)
        .attr('y', '0.5em')

    bind(row, 'assignmentScoresCell')
        .attr('transform', translateX(nameColumnWidth + sparkStripWidth + 2 * columnSeparation))
        .call(bandLine.renderBandLine)

    bind(row, 'assignmentScoresVerticalCell')
        .attr('transform', translateX(nameColumnWidth + columnSeparation))
        .call(bandLine.renderSparkStrip)
}