<?xml version="1.0"?>
<!-- Simple example to demonstrate the Image control. -->
<mx:Application backgroundGradientColors="[0xffffff, 0xffffff]" 
backgroundColor="0xFFFFFF" 
creationComplete="init();"
xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script><![CDATA[
	import mx.controls.Image;            
	import mx.events.FlexEvent;  
	import mx.effects.Fade;     
	import mx.effects.WipeLeft;
	import flash.events.MouseEvent;
	import mx.events.EffectEvent;
	import mx.events.ItemClickEvent; 
	import flash.utils.Timer;
	import mx.controls.Label;
       
	
	private var fadeIn:Object = new Object();
	private var fadeOut:Object = new Object();
	private var activeImage:Image = new Image();
	private var currentImageIndex:int = new int();
	private var imagePath:String = "http://www.canyonranch.com/shared/images/photo-gallery/tucson/";
	private var imageName:String = "tucson";
	private var imageType:String = ".jpg";
	private var imageCount:int = 15;	 
	private var myTimer:Timer = new Timer(5000, 0);  
	private var indexTrackingArray:Object = new Object();
	private var indexReverseTrackingArray:Object = new Object();

    private function init():void {
		//sets default active image
		//sets default big image
		//loads images from URL - inefficient?
		//creates small images
		var img:Image = new Image();
		var imgURL:String = new String();
		var smallImageCurrentYpos:int = new int();
		
        myTimer.addEventListener("timer", nextImageHandler);
        myTimer.start();
		
		playLabel.addEventListener(flash.events.MouseEvent.CLICK, playShow );
		playLabel.addEventListener(MouseEvent.MOUSE_OVER, brownLabel );
		playLabel.addEventListener(MouseEvent.MOUSE_OUT, yellowLabel );
		stopLabel.addEventListener(flash.events.MouseEvent.CLICK, stopShow );
		stopLabel.addEventListener(MouseEvent.MOUSE_OVER, brownLabel );
		stopLabel.addEventListener(MouseEvent.MOUSE_OUT, yellowLabel );
		previousLabel.addEventListener(flash.events.MouseEvent.CLICK, previousImageHandler );
		nextLabel.addEventListener(flash.events.MouseEvent.CLICK, nextImageHandler );
		smallImageCurrentYpos = 0;
		for(var i:int=1;i<(imageCount + 1);i++)
		{
			imgURL = (imagePath + "thumbs/" + imageName + String(i) + imageType);
			img = getImage();
			img.source = imgURL;
			if(i != 1 && (i - 1) % 5 == 0){
				smallImageCurrentYpos += 45;
			}
			img.x = ((((i - 1) % 5)  * 123) + 5);
			img.y = smallImageCurrentYpos;
			img.name = imageName + String(i);
			img.id = imageName + String(i);
			img.addEventListener(MouseEvent.MOUSE_OVER, showImage);
			img.addEventListener(MouseEvent.MOUSE_OUT, hideImage);
			img.addEventListener(flash.events.MouseEvent.CLICK, activateImage );
			smallImageCanvas.addChild(img);
			img.alpha = .3;
			myLabel.text = imgURL;
			activeImage = img;
			currentImageIndex = i;
			indexReverseTrackingArray[img.id] = i;
			indexTrackingArray[i] = img.id;
		}
		mainImage.alpha = 0;
        mainImage.source = "http://www.canyonranch.com/shared/images/photo-gallery/tucson/tucson1.jpg";
		fadeThis(mainImage,800,1.0,'fadeIn');
		return;
    }
	
	private function brownLabel(e:Event):void{
		e.target.parent.setStyle("color","0x4b3710");
		return;
	}
	
	private function yellowLabel(e:Event):void{
		e.target.parent.setStyle("color","0xdcb05a");
		return;
	}
	
	private function playShow(e:Event):void{
		myTimer.start();
		myLabel.text = "playing";
		return;
	}
	
	private function stopShow(e:Event):void{
		myTimer.stop();
		myLabel.text = "stopped";
		return;
	}
	 
	private function getImage():Image{
		//for kicks
		var img:Image = new Image();
		return img;
	}
	private function previousImageHandler(e:Event):void{
		if(currentImageIndex != 1){
			currentImageIndex--;
		} else {
			currentImageIndex = imageCount;
		}
		reconcileActiveImageWithIndex();
		return;
	}
	private function nextImageHandler(e:Event):void{
		if(currentImageIndex != imageCount){
			currentImageIndex++;
		} else {
			currentImageIndex = 1;
		}
		reconcileActiveImageWithIndex();
		return;
	}
	
	private function reconcileActiveImageWithIndex():void{
		//activates main image because currentIndex has changed and needs to be updated
		var img:Image = new Image();
		myLabel.text = smallImageCanvas.getChildByName(indexTrackingArray[currentImageIndex]).toString();
		img = Image(smallImageCanvas.getChildByName(indexTrackingArray[currentImageIndex]));
		fadeThis(img,800,1.0,'fadeIn');
		imageInMotion(img);
		return;
	}
	 
	private function activateImage(e:Event):void{
		//event handler
		imageInMotion(e.target.parent);
	 }
	 
	private function imageInMotion(img:Image):void{
		//uses activeImage global var
		//removes mouseout event that fades image to make it look selected
		//adds mouseout event to past selected image and fades it out
		//sets selected image as active image
		
		img.removeEventListener(MouseEvent.MOUSE_OUT, hideImage);
		activeImage.addEventListener(MouseEvent.MOUSE_OUT, hideImage);
		
		fadeThis(activeImage,800,0.3,'fadeOut');
		activeImage = img;
		myLabel.text = img.toString();
		changeMainImage(img.id);	
		return;	
	}
	 
	private function changeMainImage(imageId:String):void{
		//changes the main image
		//calls fade this which will add event listener once fade out is complete
		//to switch main image source and fade image back in with new image
		//via fadeInMainImage event handler
		
		fadeThis(mainImage,400,0,'fadeOut');
		return;
	}
	
	private function fadeInMainImage(e:Event):void{
		//see changeMainImage comments
		//uses global vars imagePath, imageType and activeImage
		
		mainImage.source = imagePath + activeImage.id + imageType;
		currentImageIndex = indexReverseTrackingArray[activeImage.id];
		fadeThis(mainImage,1000,1.0,'fadeIn');
		return;
		
	}
	 
	private function showImage(e:Event):void{	
		//fades in image
		fadeThis(e.target.parent,800,1.0,'fadeIn');
		return;		
	}
	 
	private function hideImage(e:Event):void{  
		//fades out image
		fadeThis(e.target.parent,800,0.3,'fadeOut');
		return;
	}
	 
	private function fadeThis(target:Image,duration:int,alphaTo:Number,type:String):void{
		//target is an image to fade, duration is length of fade effect
		//alphaTo is the alpha number you can change to, float value
		//type is either fadeIn or fadeOut
		//function uses global vars fadeIn and fadeOut
		//if fadeout
	 
		var targetID:String = new String();
		targetID = target.id;
		
		if(type == 'fadeOut'){
			fadeOut[targetID] = new mx.effects.Fade();
			fadeOut[targetID].duration = duration;
			fadeOut[targetID].alphaFrom = target.alpha;
			fadeOut[targetID].alphaTo = alphaTo;
			fadeOut[targetID].target  = target;
			if(targetID == 'mainImage'){
				fadeOut[targetID].addEventListener(mx.events.EffectEvent.EFFECT_END, fadeInMainImage);
			}
			try{
				fadeIn[targetID].end();
			}
			catch(error:Error){
				//not yet called fade in, ignore error
			}
			fadeOut[targetID].play();
		}else{
			fadeIn[targetID] = new mx.effects.Fade();
			fadeIn[targetID].duration = duration;
			fadeIn[targetID].alphaFrom = target.alpha;
			fadeIn[targetID].alphaTo = alphaTo;
			
			fadeIn[targetID].target  = target;
			try{
				fadeOut[targetID].end();
			}
			catch(error:Error){
				//not yet called fade in, ignore error
			}
			fadeIn[targetID].play();
		}
		return;
	}
  ]]></mx:Script> 
      <mx:Style>        
		Button{
			borderColor: blue;
		}
        .test2
        {
			color: black;
            padding-top: 12; 
            padding-bottom: 12;
            border-style: solid;
			border-width: 5px;
			border-color: red;
			background-color: white;
        }
    </mx:Style>
	<mx:Box id="testLabel">
        <mx:Label id="myLabel" color="blue" text="Image embedded in the application."/>
		<mx:Label id="previousLabel" text="Previous" color="0xFF0000"/>
		<mx:Label id="playLabel" text="Play" color="0xFF0000"/>
		<mx:Label id="stopLabel" text="Stop" color="0xFF0000"/>
		<mx:Label id="nextLabel" text="Next" color="0xFF0000"/>
	</mx:Box>
    <mx:Box id="myPanel" 
		backgroundColor="0xFFFFFF" 
		borderThickness="1"
		borderColor="black"
        height="560" width="660"
		borderStyle="none"
		horizontalAlign="center" 
		paddingTop="20"
		paddingBottom="0"
		
        >
		<!--
		-->
		<mx:Box id="mainImageBox" 
		backgroundColor="0xFFFFFF" 
		borderThickness="0"
		borderColor="black"
		borderStyle="none"
		width="620" 
		height="317" 
		horizontalAlign="center" >
			<mx:Image id="mainImage" width="610" height="317" />
		</mx:Box>
		<mx:Canvas
		backgroundColor="0xFFFFFF" 
		borderThickness="0"
		borderColor="black"
		borderStyle="none"
		id="smallImageCanvas"
		width="620" 
		height="200">
			
		</mx:Canvas>
    </mx:Box>
</mx:Application>