/*!

 * jQuery UI Effects Explode 1.10.3

 * http://jqueryui.com

 *

 * Copyright 2013 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);