JsFiddle Beta is coming!

JsFiddle Beta is coming!

HTML

<!-- webkit only -->
<link href="http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz" rel="stylesheet" type="text/css" />
<h1>JsFiddle Beta is coming!</h1>
<div id="wrapper"></div>

CSS

body {
    background: #D4D7DF url('http://img21.imageshack.us/img21/7868/mootoolifiedbg.png');
    font-family: 'Yanone Kaffeesatz', Helvetica, Arial, serif;
    text-shadow: 0 1px 0 #fff;
    text-align: center;
    margin: 20px;
    font-size: 10px;
    color: #fff;
}

h1 {
    -webkit-transition: all 0.12s ease-out;
    position: relative;
    text-transform: uppercase;
    text-shadow: 1px 1px #73799C, 2px 2px #73799C, 3px 3px #73799C, 4px 4px #73799C, 5px 5px #73799C, 6px 6px #73799C;
    top: -7px;
    left: -7px;
    font-size: 4em;
    margin-bottom: 20px;
}

h1:hover {
    text-shadow: 1px 1px #73799C, 2px 2px #73799C;
    top: -3px;
    left: -3px;
}

#wrapper {
    width: 450px;
    margin: 0 auto;
}

span, .ignore {
    position: relative;
    width: 18px;
    height: 18px;
    -webkit-box-shadow: 1px 1px #73799C, 2px 2px #73799C, 3px 3px #73799C, 4px 4px #73799C, 5px 5px #73799C, 6px 6px #73799C, 7px 7px #73799C, 8px 8px #73799C, 9px 9px #73799C;
    float: left;
    background: #fff;
    margin: 1px 1px 0 0;
    top: -8px;
    left: -8px;
    -webkit-transition: all 0.2s ease-out;
    color: #fff;
}

span:hover, span.hover {
    text-decoration: none;
    -webkit-box-shadow: 1px 1px #73799C;
    top: 0;
    left: 0;
    background: #C7C9D7;
}

.ignore {
    background: red;
}

JavaScript

/* webkit only */

var n = 415, 
    wrapper = $('wrapper'), 
    l = [, 371, 372, 373, 374, 375, 376, 377, 347, 324, 301, 278, 256, 378, 389, 367, 344, 321, 298, 274, 251, 227, 204, 180, 157, 133, 109, 234, 211, 188, 166, 167, 191, 169, 146, 124, 102, 80, 81, 82, 83, 108, 84, 379, 380, 381, 382, 383, 384, 385, 386, 387, 388, 189, 190, 213, 236, 259, 282, 305, 328, 351, 350, 327, 304, 281, 258, 235, 212, 257, 279, 302, 325, 348, 349, 326, 303, 280, 329, 352, 260, 237, 214, 192, 215, 238, 284, 307, 353, 354, 355, 356, 357, 358, 359, 360, 361, 362, 363, 364, 365, 366, 343, 342, 341, 340, 336, 335, 334, 312, 311, 310, 309, 308, 285, 286, 287, 288, 314, 315, 316, 318, 319, 320, 297, 296, 273, 250, 249, 271, 270, 269, 268, 267, 266, 264, 263, 262, 290, 291, 292, 293, 294, 244, 243, 242, 216, 217, 218, 219, 220, 221, 222, 223, 224, 225, 226, 203, 202, 201, 200, 199, 198, 197, 196, 195, 194, 193, 170, 171, 172, 173, 174, 175, 176, 177, 178, 179, 156, 155, 154, 153, 152, 151, 150, 149, 148, 147, 125, 126, 127, 128, 129, 130, 131, 132, 107, 106, 105, 104, 103];

for (var i = 1; i < n; ++i){
    new Element('span', {
        'class': (l.contains(i) ? '' : 'boo')
    }).inject(wrapper);
}

var b = $$('span');
(function(){
    var c = this[1][$random(0, this[0])];
    if (c && c.hasClass('boo')){
        c.addClass('hover');
    } 
}).periodical(4, [n, b]);