//Import TweenMax (we use it for animation)
import gs.*;
 
//Save the center coordinates of the stage
var centerX:uint = stage.stageWidth / 2;
var centerY:uint = stage.stageHeight / 2;
 
//Let's add the images to an array
var imagesArray:Array = new Array(image1,image2,image3,image4);
 
//This variable will store the current image displayed
var currentImage:MovieClip = null;
 
//Make the border invisible at first
imageBorder.alpha = 0;
 
//Loop through the array elements
for (var i:uint = 0; i < imagesArray.length; i++) {
 
        //We want all the images to be invisible at the beginning
        imagesArray[i].alpha = 0;
 
        //Save the index of the image to a variable called "imageIndex"
        imagesArray[i].imageIndex = i;
}
 
//We listen when the user clicks the mouse on the stage
stage.addEventListener(MouseEvent.CLICK, stageClicked);
 
//This function is called when the user clicks the stage
function stageClicked(e:MouseEvent):void {
 
        //Check that the current image is not null
        if (currentImage != null) {
 
                //Animate the current image away
                TweenMax.to(currentImage, 1, {alpha:0});
 
                //Check to see if we are at the end of the imagesArray
                if (currentImage.imageIndex == imagesArray.length - 1) {
 
                        //Set the first image of the array to be our currentImage
                        currentImage = imagesArray[0];
 
                } else {
                        //We are not at the end of the array, so get the next image from the array
                        currentImage = imagesArray[currentImage.imageIndex + 1];
                }
 
        } else {
                //If the currentImage is null (= we just started the movie), we set the first image in the array
                //to be our current image.
                currentImage = imagesArray[0];
 
                //Set the border's alpha to 0.5
                imageBorder.alpha = 0.5;
        }
 
        //Position the current image and the border to the center of the stage
        currentImage.x = imageBorder.x = centerX;
        currentImage.y = imageBorder.y = centerY;
 
        //Animate the border's width and height according to the current image's dimensions.
        //We also a nice glow effect to the image border
        TweenMax.to(imageBorder, 0.5, {width: currentImage.width + 8, height: currentImage.height + 8, 
        glowFilter:{color:Math.random() * 0xffffff, alpha:1, blurX:20, blurY:20, strength:100, quality:1}});
 
        //Animate the currentImage's alpha
        TweenMax.to(currentImage, 1, {alpha:1});
}