//Import Tweenmax
import gs.*;
import gs.easing.*;
import gs.plugins.*;
TweenPlugin.activate([BlurFilterPlugin]);
 
//Image piece's width and height
const IMAGE_PIECE_WIDTH:uint = 50;
const IMAGE_PIECE_HEIGHT:uint = 50;
 
//We want to know how many image pieces there are on the stage
var imagePieces:Number = 0;
 
//Load an image and listen when the loading is complete.
//For the "URLRequest", specify the path for your image.
var imageLoader:Loader = new Loader();
imageLoader.load(new URLRequest("your_image_path"));
imageLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, completeHandler);
 
//This function is called when the image is loaded.
//We slice the image into pieces and add the image pieces to the stage.
function completeHandler(event:Event):void {
 
	//Get the bitmap data of the loaded image
	var imageTextureMap:BitmapData = event.target.content.bitmapData;
 
	//Calculate how many colums and rows we will have
	var columns:Number = Math.ceil(imageTextureMap.width / IMAGE_PIECE_WIDTH);
	var rows:Number = Math.ceil(imageTextureMap.height / IMAGE_PIECE_HEIGHT);
 
	//Loop through the colums
	for (var i = 0; i < columns; i++) {
 
		//Loop through the rows
		for (var j = 0; j < rows; j++) {
 
			//Create a new movieclip that holds a single image piece
			var imagePieceHolder:MovieClip = new MovieClip();
 
			//Create a new image piece, to which we will copy bitmap data
			//from the original image.
			var imagePiece:Bitmap = new Bitmap();
			imagePiece.bitmapData = new BitmapData(IMAGE_PIECE_WIDTH,IMAGE_PIECE_HEIGHT);
 
			//Copy a rectangular area from the original image to our image piece.
			imagePiece.bitmapData.copyPixels(imageTextureMap,
			  new Rectangle(i * IMAGE_PIECE_WIDTH, j * IMAGE_PIECE_HEIGHT, 
			IMAGE_PIECE_WIDTH, IMAGE_PIECE_HEIGHT),
			  new Point(0,0));
 
			//Add the image piece to an image holder
			imagePieceHolder.addChild(imagePiece);
 
			//Adjust the image piece position in the holder so that the registration point will be centered
 			imagePiece.x = - (IMAGE_PIECE_WIDTH / 2);
			imagePiece.y = - (IMAGE_PIECE_HEIGHT / 2);
 
			//Position the image holder to the stage.
			//We position the holders so that it looks like the original image.
			imagePieceHolder.x = i * IMAGE_PIECE_WIDTH + IMAGE_PIECE_WIDTH / 2;
			imagePieceHolder.y = j * IMAGE_PIECE_HEIGHT + IMAGE_PIECE_HEIGHT / 2;
 
			//Listen when the mouse hovers over an image piece
			imagePieceHolder.addEventListener(MouseEvent.MOUSE_OVER, mouseOverHandler);
 
			//Add the imagePiece holder to the stage
			addChild(imagePieceHolder);
 
			//Update the image pieces counter
			imagePieces++;
		}
	}
}
 
//This function is called when the mouse hovers over an image piece holder
function mouseOverHandler(e:Event):void {
 
	//Save the holder to a local variable
	var imagePieceHolder = (MovieClip)(e.target);
 
	//Flip the image using TweenMax.
	//We will call the function "flipped()" when the animation is finished.
	TweenMax.to(imagePieceHolder, 0.5, {scaleX: -1, alpha: 0.5, blurFilter:{blurX:5, blurY:5}, onComplete:flipped, onCompleteParams:[imagePieceHolder]});
 
	//Remove the MOUSE_OVER event listener
	imagePieceHolder.removeEventListener(MouseEvent.MOUSE_OVER, mouseOverHandler);
}
 
//This function is called when the holder has flipped
function flipped(imagePieceHolder:MovieClip):void {
 
	//Tween the holder back to original scale.
	//Call the function "flippedBack()" when finished.
	TweenLite.to(imagePieceHolder, 1, {scaleX: 1, alpha: 1, blurFilter:{blurX:0, blurY:0}, onComplete:flippedBack, onCompleteParams:[imagePieceHolder]});
}
 
//This function is called when the holder is flipped back to original scale
function flippedBack(imagePieceHolder:MovieClip):void {
 
	//We can start to listen for the MOUSE_OVER event again
	imagePieceHolder.addEventListener(MouseEvent.MOUSE_OVER, mouseOverHandler);
 
}