Pixel Drawing Grid

HTML

<div id="designer"></div>
<span class="invert">invert</span> | <span class="fillall">fill all</span> | <span class="reset">reset</span>
<div id="board"></div>

CSS

body{background-color: #222;padding:30px;cursor:pointer !important;color:white;font-family:verdana; font-size:10px;}
.fill {background-color:white;}
#designer {width: 500px;height:100px;margin-bottom:10px}
#board {width:100px;margin-top:20px;}
.square {height: 6px; width:6px;float:left;border:1px solid white;margin:1px;;cursor:pointer;}
.pixel {float:left;width:2px;height:2px;}

JavaScript

$(document).ready(function(){
//setup vars    
var p = 1, clicking = false;
//setup grids
while (p < 501){
   $('#designer').append('<div id='+p+' class="square"></div>');
   $('#board').append('<div id="p'+p+'" class="pixel"></div>');
   p++;   
} 

function fill(e){
   var id = $(e).attr('id');
   $('#'+id).toggleClass('fill');
   $('#p'+id).toggleClass('fill');
}  
    $('.square').mousedown(function(){clicking = true;fill(this);}); 
    $(document).mouseup(function(){clicking = false;})
    $('.square').mouseenter(function(){if(clicking == false) return;fill(this);});  
    
$('.fillall').live('click',function(){
    $('.square, .pixel').addClass('fill');  
});
$('.reset').live('click',function(){
   $('.square, .pixel').removeClass('fill');
}); 
$('.invert').live('click',function(){
   $('.square, .pixel').toggleClass('fill');
}); 
});