//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);
 
}