function rearrange(gridboxes) {
  var margin = 5;
  var width = 221;
  var height = 166;
  
  var row = column = 0;
  var per_row = 3;
  var count = 0;
  
  for (var i = 0; i <= gridboxes.length; i++) {
    if ($(gridboxes[i]).is('.active')) {
      var mod = (i + 1) % 3;
      if (mod == 1) {
        $(gridboxes[i]).css('top', row * (height + margin));
        $(gridboxes[i]).css('left', column * (width + margin));
        
        $(gridboxes[i+1]).css('top', row * (height + margin));
        $(gridboxes[i+1]).css('left', (column + 2) * (width + margin));
        
        $(gridboxes[i+2]).css('top', (row + 1) * (height + margin));
        $(gridboxes[i+2]).css('left', (column + 2) * (width + margin));
        
        i += 2;
      }
      else if (mod == 2) {
        $(gridboxes[i]).css('top', row * (height + margin));
        $(gridboxes[i]).css('left', column * (width + margin));
        
        $(gridboxes[i+1]).css('top', (row + 1) * (height + margin));
        $(gridboxes[i+1]).css('left', 0);
        
        i += 1;
      }
      else if (mod == 0) {
        $(gridboxes[i]).css('top', row * (height + margin));
        $(gridboxes[i]).css('left', (column - 1) * (width + margin));
        
        $(gridboxes[i-1]).css('top', (row + 1) * (height + margin));
        $(gridboxes[i-1]).css('left', 0);
      }
      
      row += 2;
      column = 0;
      count += 3;
    }
    else {
      $(gridboxes[i]).css('top', row * (height + margin));
      $(gridboxes[i]).css('left', column * (width + margin));
      column++;
      if (column == per_row) {
        column = 0;
        row++;
      }
    }    
  }
  
  $('#grid').css('height', (row + (gridboxes.length % per_row == 0 ? 0 : 1)) * (height + margin));
}

$(document).ready(function() {
  var gridboxes = $('#grid .box');
  
  gridboxes.each(function() {
    
    $(this).css({
      'cursor' : 'pointer',
      'float' : 'none',
      'position' : 'absolute'
    });
    
    $(this).mouseover(function() {
      $(this).addClass('hover');
    });
    $(this).mouseout(function() {
      $(this).removeClass('hover');
    });
    $(this).click(function() {
      if ($(this).hasClass('active')) {
        $(this).removeClass('active');
      }
      else {
        gridboxes.removeClass('active');
        $(this).addClass('active');
      }      
      
      rearrange(gridboxes);
    });
  });
  
  rearrange(gridboxes);
});