jQuery: image division and explosion

by gabrieleromanato

HTML

<div id="image"></div>

CSS

#image {
    width: 423px;
    height: 282px;
    margin: 1.5em auto;
    background: url(https://lh5.googleusercontent.com/-oAhHdVnnyg4/T1MrcEW9ByI/AAAAAAAAA3o/-zTma1DolLk/s425/fonts-web-fonts-typography.jpg) no-repeat;
    cursor: pointer;
}

JavaScript

var ImageExplosion = new

function() {

    var img = $('#image');
    var imgWidth = img.width();
    var imgHeight = img.height();
    var blockWidth = imgWidth / 3;
    var blockHeight = imgHeight / 2;
    var bg = img.css('backgroundImage');

    img.css('backgroundImage', 'none');

    var blocks = function() {

        var pos = '';

        for (var i = 0; i < 6; i++) {

            switch (i) {

            case 0:
                pos = '0px 0px';
                break;
            case 1:
                pos = '-' + blockWidth + 'px 0px';
                break;
            case 2:
                pos = '-' + (blockWidth * 2) + 'px -' + '0px';
                break;
            case 3:
                pos = '0px -' + blockHeight + 'px';
                break;
            case 4:
                pos = '-' + blockWidth + 'px -' + blockHeight + 'px';
                break;
            case 5:
                pos = '-' + (blockWidth * 2) + 'px -' + blockHeight + 'px';
                break;
            default:
                break;

            }

            $('<div class="image-block"/>').
            css({
                width: blockWidth,
                height: blockHeight,
                'float': 'left',
                backgroundImage: bg,
                backgroundPosition: pos
            }).appendTo(img);

        }

    };

    var explosion = function() {

        var time = 0;

        $('div.image-block', img).each(function() {

            var $block = $(this);
            $block.queue('explosion', function(next) {
                $block.effect('explode', {
                    pieces: 4
                }, time, next);

            });
            $block.dequeue('explosion');
            time += 400;
        });

    };

    this.init = function() {

        blocks();

        img.bind('click', explosion);

    };

}();

ImageExplosion.init();