//Import TweenLite
import gs.*;
import gs.easing.*;
 
//Image piece's width and height
const IMAGE_PIECE_WIDTH:uint=30;
const IMAGE_PIECE_HEIGHT:uint=30;
 
//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
var imageLoader:Loader = new Loader();
imageLoader.load(new URLRequest("insert_your_filepath_here"));
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.
//An image piece will be invisible before the user hovers over the piece.
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();
 
			//We want the image holder to be invisible at the beginning
			imagePieceHolder.alpha=0;
 
			//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 into 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);
 
			//Set the image piece onto the holder so that the image's center
			//is at the top left corner of the holder. This way the rotation
			//will look natural.
			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 one single 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 holder
			imagePieceHolder.addEventListener(MouseEvent.MOUSE_OVER, mouseOverHandler);
 
			//Update the image pieces counter
			imagePieces++;
 
			//Add the imagePiece holder to the stage
			addChild(imagePieceHolder);
		}
	}
}
 
//This function is called when the user hovers over an image piece holder
function mouseOverHandler(e:Event):void {
 
	//Save the holder to a local variable
	var imagePieceHolder = (MovieClip)(e.target);
 
	//Add the holder to the top of the display list.
	//This way the boxes will overlap each others correctly.
	setChildIndex(imagePieceHolder,imagePieces - 1);
 
	//Set the alpha to one so the holder is visible
	imagePieceHolder.alpha=1;
 
	//Calculate a random rotation value
	var randomRotation=Math.random()*1024-512;
 
	//Tween the holder (rotate, scale & alpha)
	TweenLite.from(imagePieceHolder, 1, {rotation: randomRotation, scaleX: 2, scaleY: 2, alpha: 0});
 
	//We don't want to receive any more mouse events for this holder
	imagePieceHolder.mouseEnabled = false;
 
	//Remove the MOUSE_OVER event listener
	imagePieceHolder.removeEventListener(MouseEvent.MOUSE_OVER, mouseOverHandler);
}