(function() {
  // noprotect;
  /* BEGIN
  */

  var F00, F01, F10, F11, Fxy, a, b, b1, b2, b3, b4, canvas, color, colorize, ctx, format, g, hcl_linear_rainbow, height, image, pixel_i, pixel_x, pixel_y, r, side, svg, vis, width, x, y, _i, _j, _ref, _ref1;

  hcl_linear_rainbow = function() {
    var chroma_range, domain, hue_range, luminance_range, scale;

    domain = [0, 1];
    hue_range = [340, 340 - 480];
    chroma_range = [0, 40];
    luminance_range = [0, 100];
    scale = function(x) {
      var ext, xn;

      ext = domain[1] - domain[0];
      xn = (x - domain[0]) / ext;
      return d3.hcl(hue_range[0] + (hue_range[1] - hue_range[0]) * xn, chroma_range[0] + (chroma_range[1] - chroma_range[0]) * (1 - Math.pow(1 - 2 * xn, 2)), luminance_range[0] + (luminance_range[1] - luminance_range[0]) * xn);
    };
    scale.domain = function(x) {
      if (!arguments.length) {
        return domain;
      }
      domain = x;
      return scale;
    };
    scale.hue_range = function(x) {
      if (!arguments.length) {
        return hue_range;
      }
      hue_range = x;
      return scale;
    };
    scale.chroma_range = function(x) {
      if (!arguments.length) {
        return chroma_range;
      }
      chroma_range = x;
      return scale;
    };
    scale.luminance_range = function(x) {
      if (!arguments.length) {
        return luminance_range;
      }
      luminance_range = x;
      return scale;
    };
    return scale;
  };

  /* END
  */


  canvas = d3.select('canvas');

  width = canvas.node().getBoundingClientRect().width;

  height = canvas.node().getBoundingClientRect().height;

  side = Math.min(width, height) - 20;

  ctx = canvas.node().getContext('2d');

  image = ctx.createImageData(side, side);

  F00 = Math.random();

  F10 = Math.random();

  F01 = Math.random();

  F11 = Math.random();

  /* Bilinear interpolation
  */


  /* F(x,y) = b1 + b2*x + b3*y + b4*x*y
  */


  b1 = F00;

  b2 = F10 - F00;

  b3 = F01 - F00;

  b4 = F00 - F10 - F01 + F11;

  /* define a default cubehelix-style hcl linear rainbow scale
  */


  colorize = hcl_linear_rainbow();

  console.debug('Coloring...');

  for (pixel_x = _i = 0; 0 <= side ? _i < side : _i > side; pixel_x = 0 <= side ? ++_i : --_i) {
    for (pixel_y = _j = 0; 0 <= side ? _j < side : _j > side; pixel_y = 0 <= side ? ++_j : --_j) {
      pixel_i = (pixel_y * side + pixel_x) * 4;
      _ref = [pixel_i + 0, pixel_i + 1, pixel_i + 2, pixel_i + 3], r = _ref[0], g = _ref[1], b = _ref[2], a = _ref[3];
      _ref1 = [pixel_x / side, pixel_y / side], x = _ref1[0], y = _ref1[1];
      Fxy = b1 + b2 * x + b3 * y + b4 * x * y;
      color = d3.rgb(colorize(Fxy));
      image.data[r] = color.r;
      image.data[g] = color.g;
      image.data[b] = color.b;
      image.data[a] = 255;
    }
  }

  ctx.putImageData(image, (width - side) / 2, (height - side) / 2);

  /* draw labels
  */


  format = d3.format('%');

  svg = d3.select('svg');

  vis = svg.append('g').attr({
    transform: "translate(" + (width / 2) + "," + (height / 2) + ")"
  });

  vis.append('text').text(format(F00)).style('text-anchor', 'end').attr({
    "class": 'label',
    dx: '-4px',
    dy: '0.85em',
    x: -side / 2,
    y: -side / 2
  });

  vis.append('text').text(format(F01)).style('text-anchor', 'end').attr({
    "class": 'label',
    dx: '-4px',
    x: -side / 2,
    y: side / 2
  });

  vis.append('text').text(format(F10)).style('text-anchor', 'start').attr({
    "class": 'label',
    dx: '4px',
    dy: '0.85em',
    x: side / 2,
    y: -side / 2
  });

  vis.append('text').text(format(F11)).style('text-anchor', 'start').attr({
    "class": 'label',
    dx: '4px',
    x: side / 2,
    y: side / 2
  });

}).call(this);