Square dissolver (js)

by Oski Krawczyk

HTML

<div id="cont"></div>

CSS

#cont {
    width: 220px;
    height: 220px;
    background-image: url(http://2.bp.blogspot.com/_deD_ZOwRvo0/Svn4H3l_oMI/AAAAAAAAAK8/oFqvFSMvX2A/s320/city+and+colour+cover+%28sized%29.jpg);
    overflow: hidden;
    margin: 0 auto;
}

#cont div {
    width: 21px;
    height: 21px;
    background: #EF4832;
    float: left;
    border: solid 1px #fff;
    position: relative;
    margin-top: -1px;
    margin-left: -1px;
}

body {
    background: #F6F6F4;
}

JavaScript

var cells = [],
    limit = 10,
    map = {},
    container = $('cont');

var start = $time();

(100).each(function(cell) {
    cells[cell] = new Element('div').inject(container);
    cells[cell].set('tween', {
        duration: 1000
    });
});

(limit * 2 + 1).each(function(index) {
    var idx = index;
    cells = (index == limit) ? cells.reverse() : cells;
    if (index == limit || index == limit + 1) return;
    if (index > limit) {
        idx -= 2;
        index = (limit * 2) - index;
    }
    map[idx] = [cells[index]];

    var counter = index,
        siblings = [];

    (index).each(function(sibling) {
        counter += limit - 1;
        if (cells[counter]) siblings.push(cells[counter]);
    });

    map[idx].extend(siblings);
});

for (var i in map) {
    $$(map[i]).tween.delay(i * 100, map[i], ['opacity', 0]);
}

var end = $time();
console.log('It took ' + (end - start) + 'ms.');