spiral challenge

//constants
var WIDTH_COUNT = 10;
var HEIGHT_COUNT = 10;
var TOTAL_COUNT = WIDTH_COUNT*HEIGHT_COUNT;

// counts
var horizontalIndex = WIDTH_COUNT-1;
var verticalIndex   = HEIGHT_COUNT-1;
var rowCountOffset = 0;
var colCountOffset = 0;
var leftPos = -1;
var topPos = 0;
var current = 0;

//color values
var lightestGrey = 0.90;
var darkestGrey = 0.55;


// directions
var direction = 'left';
var directionMap = {
  left:'down',
  down:'right',
  right:'up',
  up:'left'
};

//sizing
var containerDiv = document.getElementById("container");
var padding = parseInt(window.getComputedStyle(containerDiv, null).getPropertyValue('padding'));
var innerWidth = containerDiv.offsetWidth - (padding*2);
var innerHeight = containerDiv.offsetHeight - (padding*2);
var boxWidth =  innerWidth/WIDTH_COUNT;
var boxHeight =  innerHeight/HEIGHT_COUNT;


function calculateGrey()
{
  greyDiff = lightestGrey-darkestGrey;
  greyDiff/=TOTAL_COUNT;
  greyDiff*=current;
  return (lightestGrey-greyDiff)*100;
}

function createElement(x,y)
{
  var box =  document.createElement('div');
  var number = document.createTextNode(current.toString());
  box.setAttribute("class", "numbox");
  box.style.width = boxWidth+"px";
  box.style.height = boxHeight+"px";
  greyPercent = calculateGrey();
  box.style.backgroundColor = 'hsl(240,0%,'+greyPercent+'%)';
  leftSpot = x*boxWidth+padding+"px";
  topSpot = y*boxHeight+padding+"px";

  box.style.left = leftSpot;
  box.style.top = topSpot;
  box.appendChild(number);
  containerDiv.appendChild(box);
}


function makeGrid ()
{
    while(current < TOTAL_COUNT)
    {
      if(direction == 'left')
      {
        if(++leftPos > horizontalIndex)
        {
          leftPos = horizontalIndex;
          ++rowCountOffset;
          direction = directionMap[direction];
        }

      }

      if(direction == 'down')
      {
        if(++topPos > verticalIndex)
        {
          topPos = verticalIndex;
          ++colCountOffset;
          direction = directionMap[direction];
        }

      }

      if(direction == 'right')
      {
        var leftOffset = rowCountOffset+horizontalIndex-WIDTH_COUNT;
        if(--leftPos < leftOffset)
        {
          leftPos = leftOffset;
          --horizontalIndex;
          direction = directionMap[direction];
        }
      }

      if(direction == 'up')
      {
        var topOffset = (colCountOffset+verticalIndex)-HEIGHT_COUNT;
        if(--topPos <= topOffset)
        {
          topPos = topOffset+1;
          --verticalIndex;
          ++leftPos;
          direction = directionMap[direction];
        }
      }
      createElement(leftPos,topPos);
      ++current;
    }
}

makeGrid();

+function (win, doc) {

  main(10, 10)
  function main (lenRow, lenCol) {
    if (lenRow <=0 || lenCol <= 0) return

    var numRow = lenRow
    var numCol = lenCol

    var elem = ['<table><tbody>']
    var append = elem.push.bind(elem)

    var beta = 1/(lenCol*lenRow)
    var alpha = (1 + beta)*beta
    var hash = makeHashTable(lenRow, lenCol)

    // super dangerous loop ahead :)
   do {
      var x = lenRow - numRow
      append('<tr>')

      do {
        var y = lenCol - numCol

        // and some wild math appears on the way. No probs
        var value = hash[x][y]
        var level = 1 - alpha*value

        append('<td style="background:'+ grayify(145, 225, level) +'">')
        append(value)
        append('</td>')
      }
      while (--numCol)

      numCol = lenCol
      append('</tr>')
    }
    while (--numRow)

    append('</tbody></table>')
    $('#demo')[0].innerHTML = elem.join('')
  }

  function $ (selector) {
    return [].slice.call(doc.querySelectorAll(selector))
  }

  function grayify (c0, c1, level) {
    var color = (c0 + (c1 - c0)*level)|0
    return ['rgb('+ color, color, color +')'].join(',')
  }

  function makeHashTable (lenR, lenC, offset, hash) {
    var r = lenR
    var c = lenC
    var offset = offset || 0
    var y0 = 0
    var x0 = 0

    hash = hash || []
    hash.counter = hash.counter || -1

    while (y0 + offset < lenC - offset - 1) {
      hash.counter++
      hash[x0 + offset] = hash[x0 + offset] || []
      hash[x0 + offset][y0 + offset] = hash.counter
      y0++
    }

    while (x0 + offset < lenR - offset) {
      hash.counter++
      hash[x0 + offset] = hash[x0 + offset] || []
      hash[x0 + offset][y0 + offset] = hash.counter
      x0++
    }

    if (hash.counter >= (lenR * lenC -1)) return hash

    x0--
    while (y0--) {
      hash.counter++
      hash[x0 + offset] = hash[x0 + offset] || []
      hash[x0 + offset][y0 + offset] = hash.counter
    }

    y0++
    while (--x0) {
      hash.counter++
      hash[x0 + offset] = hash[x0 + offset] || []
      hash[x0 + offset][y0 + offset] = hash.counter
    }

    if (hash.counter < (lenR * lenC -1) ) {
      return makeHashTable(lenR, lenC, ++offset, hash)
    }

    return hash
  }

}(window, document)