g<div class="buttonBar">
  <a href="#" class="colorButton glow" id="red">Red (R)</a>
  <a href="#" class="colorButton" id="green">Green (G)</a>
  <a href="#" class="colorButton" id="blue">Blue (B)</a>
  <a href="#" class="colorButton" id="yellow">Yellow (Y)</a>
</div>

@circleDim: 24px;
@bgPage: black;
@fadeTimer: 25s;

body { 
  background-color: @bgPage; 
  padding: 20px;
}
.buttonBar {
  display: block;
  margin-bottom: 20px;
  text-align: center;
}
.colorButton {
  margin: 5px;
  padding: 10px;
  background-color: #232323;
  .rounded(10px);
  font-family: Arial;
  color: white;
  text-decoration: none;
  font-size: .8em;
}
#red.glow { .box-shadow(0 0 18px red); }
#green.glow { .box-shadow(0 0 18px green); }
#blue.glow { .box-shadow(0 0 18px blue); }
#yellow.glow { .box-shadow(0 0 18px yellow); }
.cl {
  background-color: #232323;
  float: left;
  margin: 0px 1px 1px 0px;
  width: @circleDim;
  height: @circleDim;
  .rounded(@circleDim);
  .transition(@fadeTimer);
}
.cl:hover, .hovered, .cl.red:hover, .cl.red.hovered {
  background-color: red;
  .transition(0s);
}
.cl.green:hover, .cl.green.hovered {
  background-color: green;
  .transition(0s);
}
.cl.blue:hover, .cl.blue.hovered {
  background-color: blue;
  .transition(0s);
}
.cl.yellow:hover, .cl.yellow.hovered {
  background-color: yellow;
  .transition(0s);
}

.transition(@duration:0.1s, @ease:ease-out) {
  -webkit-transition: all @duration @ease;
  -moz-transition: all @duration @ease;
  -o-transition: all @duration @ease;
  transition: all @duration @ease;
}
.rounded(@radius: 2px) {
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
  border-radius: @radius;
}
.box-shadow(@arguments) {
  -webkit-box-shadow: @arguments;
  -moz-box-shadow: @arguments;
  box-shadow: @arguments;
}

$(document).ready(function() {
  
  // add dots
  for (var i=0;i<1000;i++) { 
    $("body").append("<a class='cl'></a>");
  }
  
  // color click handler
  $("#green").click(function() {
    $(".cl").removeClass().addClass('cl green');
    $(".colorButton").removeClass("glow");
    $("#green").addClass("glow"); 
    return false;
  });
  
  $("#blue").click(function() {
    $(".cl").removeClass().addClass('cl blue');
    $(".colorButton").removeClass("glow");
    $("#blue").addClass("glow"); 
    return false;
  });
  
  $("#yellow").click(function() {
    $(".cl").removeClass().addClass('cl yellow');
    $(".colorButton").removeClass("glow");
    $("#yellow").addClass("glow"); 
    return false;
  });
  
  $("#red").click(function() {
    $(".cl").removeClass().addClass('cl red');
    $(".colorButton").removeClass("glow");
    $("#red").addClass("glow"); 
    return false;
  });
  
  $(document).keydown(function(event) {
      var key = String.fromCharCode(event.keyCode);
      key.toUpperCase();
      switch(key) {
         case 'G': 
          $(".cl").removeClass().addClass("cl green"); 
          $(".colorButton").removeClass("glow");
          $("#green").addClass("glow"); 
          break;
         case 'B': 
          $(".cl").removeClass().addClass("cl blue");
          $(".colorButton").removeClass("glow");
          $("#blue").addClass("glow"); 
          break;
         case 'Y': 
          $(".cl").removeClass().addClass("cl yellow");
          $(".colorButton").removeClass("glow");
          $("#yellow").addClass("glow"); 
          break;
         case 'R': 
          $(".cl").removeClass().addClass("cl red");
          $(".colorButton").removeClass("glow");
          $("#red").addClass("glow"); 
          break;
      }
   });
  
  document.body.addEventListener('touchmove', function(event) {
    event.preventDefault();
  }, false); 
  
  // if ipad and iphone, call to see if highlight object
  if ( (navigator.userAgent.match(/iPhone/i)) 
   || (navigator.userAgent.match(/iPod/i) ) 
   || (navigator.userAgent.match(/iPad/i))) {
          
    $(".cl").bind("touchmove", function(e){
      var touch = e.originalEvent.touches[0];
      highlightHoveredObject(touch.clientX, touch.clientY);
    });
  }
  
  function highlightHoveredObject(x, y) {
    var pixelOffset = 12;
    var circleDim = 24;
    
    $('.cl').each(function() {
      
      offsetLeft = $(this).offset().left;
      
      // highlight cell? 
      if (x > offsetLeft - pixelOffset) {
        if (x < offsetLeft + pixelOffset + circleDim) {
          
          offsetTop = $(this).offset().top;

          if (y > offsetTop - pixelOffset) {
            if (y < offsetTop + pixelOffset + circleDim) {
             $(this).addClass('hovered');              
            }
          }
        }
      } // end highlight cell
      
    }); // end cl each
    
    // fader
    $('.cl').removeClass('hovered');  
    
  } // end highlightHoveredObject
  
}); // end document ready