(function() {
    'use strict';

    var w = 720,
        h = 720;
    // https://github.com/mbostock/d3/wiki/Colors#hsl
    var hueScale = d3.scale.linear().domain([0, w]).range([0, 360]),
        hueScaleR = d3.scale.linear().domain([0, w]).range([360, 0]),
        squareScale = d3.scale.linear().domain([0, w]).range([10, h]);

    var square = 100; 

    // create the svg
    var svg = d3.select('#colours').append('svg')
        .attr({
            width: w,
            height: h
        });

    var squareCanvas = svg.append('rect')
        .attr({
            fill: d3.hsl(360, 1, 0.5),
            x: 0,
            y: 0,
            width: w,
            height: h
        });

    var squareSmall = svg.append('rect')
        .attr({
            fill: d3.hsl(180, 1, 0.5),
            x: w/2 - (square/2),
            y: h/2 - (square/2),
            width: square,
            height: square
        });

    var positionLabel = svg.append('text')
        .attr({
            x: 10,
            y: 20
        });

    svg.on('mousemove', function () {
        // scale the size of square using mouse position
        square = function () { return squareScale(mouseX()); }; 
        // feedback for position
        positionLabel.text('x: ' + mouseX() + ' | y: ' + mouseY());
        // update colour of background
        squareCanvas.attr('fill', function () {
            return d3.hsl(hueScale(mouseY()), 1, 0.5);
        });
        // update the small square
        squareSmall
            .attr({
                fill: function () { return d3.hsl(hueScaleR(mouseY()), 1, 0.5); },
                x: w/2 - (square()/2),
                y: h/2 - (square()/2),
                width: square(),
                height: square()
            });
    });

    function mouseX() {
        var x = d3.mouse(svg.node());
        return x[0];
    }

    function mouseY() {
        var y = d3.mouse(svg.node());
        return y[1];
    }

    // just for blocks viewer size
    d3.select(self.frameElement).style('height', '760px');

}());