source: trunk/themes/default/js/ui/jquery.ui.effect-explode.js @ 28780

/*!
 * jQuery UI Effects Explode 1.10.4
 * http://jqueryui.com
 *
 * Copyright 2014 jQuery Foundation and other contributors
 * Released under the MIT license.
 * http://jquery.org/license
 *
 * http://api.jqueryui.com/explode-effect/
 *
 * Depends:
 *      jquery.ui.effect.js
 */
(function( $, undefined ) {

$.effects.effect.explode = function( o, done ) {

        var rows = o.pieces ? Math.round( Math.sqrt( o.pieces ) ) : 3,
                cells = rows,
                el = $( this ),
                mode = $.effects.setMode( el, o.mode || "hide" ),
                show = mode === "show",

                // show and then visibility:hidden the element before calculating offset
                offset = el.show().css( "visibility", "hidden" ).offset(),

                // width and height of a piece
                width = Math.ceil( el.outerWidth() / cells ),
                height = Math.ceil( el.outerHeight() / rows ),
                pieces = [],

                // loop
                i, j, left, top, mx, my;

        // children animate complete:
        function childComplete() {
                pieces.push( this );
                if ( pieces.length === rows * cells ) {
                        animComplete();
                }
        }

        // clone the element for each row and cell.
        for( i = 0; i < rows ; i++ ) { // ===>
                top = offset.top + i * height;
                my = i - ( rows - 1 ) / 2 ;

                for( j = 0; j < cells ; j++ ) { // |||
                        left = offset.left + j * width;
                        mx = j - ( cells - 1 ) / 2 ;

                        // Create a clone of the now hidden main element that will be absolute positioned
                        // within a wrapper div off the -left and -top equal to size of our pieces
                        el
                                .clone()
                                .appendTo( "body" )
                                .wrap( "<div></div>" )
                                .css({
                                        position: "absolute",
                                        visibility: "visible",
                                        left: -j * width,
                                        top: -i * height
                                })

                        // select the wrapper - make it overflow: hidden and absolute positioned based on
                        // where the original was located +left and +top equal to the size of pieces
                                .parent()
                                .addClass( "ui-effects-explode" )
                                .css({
                                        position: "absolute",
                                        overflow: "hidden",
                                        width: width,
                                        height: height,
                                        left: left + ( show ? mx * width : 0 ),
                                        top: top + ( show ? my * height : 0 ),
                                        opacity: show ? 0 : 1
                                }).animate({
                                        left: left + ( show ? 0 : mx * width ),
                                        top: top + ( show ? 0 : my * height ),
                                        opacity: show ? 1 : 0
                                }, o.duration || 500, o.easing, childComplete );
                }
        }

        function animComplete() {
                el.css({
                        visibility: "visible"
                });
                $( pieces ).remove();
                if ( !show ) {
                        el.hide();
                }
                done();
        }
};

})(jQuery);