Creates an HTML Grid for debugging Animations

debug-grid.js

/**
 * @library DebugGrid
 * @author CandidBlend <hi@candidblend.la>
 * @description grid for debugging, layouts & demos
 * @license MIT
 */

(function() {

  'use strict';

  /**
   * @class DebugGrid
   * @description constructor
   */

  var DebugGrid = window.DebugGrid = function() {
    var $row, $grid, $square, $infobox, cw, ch, ww, wh, z = 1, sz = 40;
    ww = $(window).width();
    wh = $(window).height();
    cw = Math.floor(ww / sz) - 1;
    ch = Math.floor(wh / sz) - 1;
    $grid = $('<div id="grid"></div>');
    $('body').append($grid);
    for (var a = 0; a < cw; a++) {
      for (var b = 0; b < ch; b++) {
        $square = $('<div class="grid-square"></div>')
          .attr('id', 'grid-square-' + z);
        _positionSquare($square, (a * sz), (b * sz), z);
        $grid.append($square);
        z++;
      }
    }
    $infobox = $('<div class="info-box"><p></p></p></p></div>').css({
      top  : 60,
      left : ((cw * sz) - 220),
    });
    $grid.append($infobox);
    _positionGridAndStage(ww, wh, cw, ch, sz);
    return $grid;
  };

  /**
   * @private _positionGridAndStage
   */

  function _positionGridAndStage(ww, wh, cw, ch, sz) {
    return $('#stage, #grid').css({
      "top": (wh - (ch * sz)) / 2,
      "left": (ww - (cw * sz)) / 2,
      "width": cw,
      "height": ch
    });
  }

  /**
   * @private _positionSquare
   */

  function _positionSquare($square, x, y, z) {
    return $square.css({
      "top": y,
      "left": x,
      "z-index": z
    });
  }

}());