gistfile1.txt

function Creeper() {
  this.colors = ['G', 'B'];
  this.positions = ['0','1','2','3','4','5','6','7','8','9','10','11','12','13','14','15','16','17','18','19','20','21','22','23','24','25','26','27','28','29','30','31','32','33','34','35','36','37','38','39','40','41','42','43','44','45','46','47','48','49','50','51','52','53','54','55','56','57','58','59','60','61','62','63'];

  this.bPositions = ['17','18','21','22','25','26','29','30','35','36','42','43','44','45','50','51','52','53','58','61'];

  var theBlock = this;

  $.each(this.positions, function( index, position ) {
    if ($.inArray(position, this.bPositions) == -1) {
      var block = new Block("G", position);
      $('#scrambled').append(block.toHTML());
    } else {
      var block = new Block("B", position);
      $('#scrambled').append(block.toHTML());
    }
  });
}

function Block(color, position) {
  this.color = color;
  this.position = position;
  this.toHTML = function() {
    return '<div id="square" class=' + this.color + '>' + this.position + '</div>';
  };
}

$(document).ready(function() {
 // for (i = 0; i < 64; i++) {
 //   $('#scrambled').append('<div class="square"></div');    
 // }
 var creeper = new Creeper();
});

//blck = 20
//g = 44