(function () {
      'use strict';

      var blocks = document.querySelectorAll('.color-block'),
          colorFrom = {
            r: 250,
            g: 200,
            b: 80
          },
          colorTo = {
            r: 245,
            g: 80,
            b: 0
          },
          colorDifference = {r: 0, g: 0, b: 0},
          rows = 10,
          columns = 20;

      colorDifference.r = colorTo.r - colorFrom.r;
      colorDifference.g = colorTo.g - colorFrom.g;
      colorDifference.b = colorTo.b - colorFrom.b;

      var currentColumn = 0,
          currentRow = 0;

      for (var i = 0; i < blocks.length; i++) {
        var block = blocks[i],
            color = {
              r: ~~(colorFrom.r),
              g: ~~(colorFrom.g + (colorDifference.g / columns) * currentColumn),
              b: ~~(colorFrom.b + (colorDifference.b / rows) * currentRow)
            };

        block.colorTo = 'rgb(' + color.r + ', ' + color.g + ', ' + color.b + ')';

        currentColumn++;

        if (currentColumn === columns) {
          currentColumn = 0;
          currentRow++;
        }

        block.addEventListener('mouseover', function (e) {
          var bullet = e.currentTarget.querySelector('.bullet');
          bullet.style.backgroundColor = e.currentTarget.colorTo;
          bullet.classList.add('is-active');
        });

        block.addEventListener('mouseout', function (e) {
          var bullet = e.currentTarget.querySelector('.bullet');

          setTimeout(function () {
            bullet.style.backgroundColor = '';
            bullet.classList.remove('is-active');
          }, 400);
        });
      };
    }());