Draw Chessboard

HTML

<div id="container"></div>
<div>
  <button type="button" id="drwButton">Draw chessbord</button>
</div>

CSS

div {
  float: left;
}

div#container {
  width: 640px;
  height: 640px;
  background: #f1f0ef;
  border: solid;
}

div.WhiteTile {
  width: 80px;
  height: 80px;
  background: #fff7ee;
}

div.BlackTile {
  width: 80px;
  height: 80px;
  background: #4c453c;
}

JavaScript

dF = {
  boardId: "#container",
  whiteTileCls: ".WhiteTile",
  blackTileCls: ".BlackTile",
  tileProto: "<div class='ChssBrdTile'style='position:absolute;'></div>",
  buttonId: "#drwButton",
  y: 11,
  x: 11,
  row: 0
};

dF.initialize = function(options) {
  $.extend(dF, options);
  dF.board = $(dF.boardId);

  $(dF.buttonId).on("click", function() {
    dF.drawChessboard();
    $(this).off("click");
  });
};

dF.drawChessboard = function() {
  var drawingWhite = true;
  var tileCounter = 0;
  var loopCounter = 0

	// Spustime interval, ktory kazdych 250 milisekund vykresli jednu dlazdicu
  var drawInterval = setInterval(function() {
  	// tileCounter rata pocet pridanych dlazdic
    tileCounter++;
    dF.addTiles(drawingWhite, tileCounter);
 		// Kontrola, ci bolo vykreslenych 32 dlazdic => jedna farba je hotova
    if (tileCounter == 32) {
    	dF.setNewPositions(); //Reset pozicii 0-tej dlazdice novej farby
    	drawingWhite = false; //Uz nechcceme biele dlazdice
      tileCounter = 0;  //vynulovanie tileCountera => chceme 32 dlazdic novej farby
      loopCounter++; // inkrementacie slucky vykreslovania
    }
    // Kontrola slucky vykreslovania => ak to zbehlo 2x, mame obe farby a teda koniec.
    if (loopCounter == 2) {
      clearInterval(drawInterval);
    }
  }, 250);
};

dF.addTiles = function(addWhite, counter) {
  // Vytvorime novu dlazdicu
  var tile = $(dF.tileProto);
  // Vyfarbime ju
  tile.addClass(addWhite ? "WhiteTile" : "BlackTile");
	
  // Nastavime pozicie novej dlazdice v sachovnici
  tile.css("left", dF.x);
  tile.css("top", dF.y);
  // A pridame ju do sachovnice
  dF.board.append(tile);
  // Posun x-ovu poziciu po kazdej pridanej dlazdici dlazdici
  // Posun o sirku dlazdice + sirka dlazdice dalsej farby 
  dF.x += 2 * tile.width();
  // Ak boli pridane do riadku 4 dlazdice, ideme do dalsieho riadku
  if ((counter % 4) == 0) {
    dF.row++; //Inkrementujeme pocet riadkov
    // X pozicia dlazdic sa meni podla toho, ci je riadok parny,...