<?xml version="1.0" encoding="utf-8"?>
<!--
	SlideShow
	
	The SlideShow displays one photo after another. It uses a state
	to display the "Loading" message when the next photo is
	being retrieved.
-->
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" xmlns="*" >
	
	<mx:Metadata>
		[Event("close")]
		[Event(name="skip",type="com.adobe.flickr.events.SlideEvent")]
	</mx:Metadata>

	<mx:states>
		<mx:State name="loadingState">
			<mx:AddChild position="lastChild">
				<mx:Label text="Loading..." horizontalCenter="-1" verticalCenter="-6" styleName="loadingLabelLarge"/>
			</mx:AddChild>
		</mx:State>
	</mx:states>
	
	<mx:Script>
	<![CDATA[
		import com.adobe.flickr.events.SlideEvent;
		import mx.events.ItemClickEvent;
		import mx.collections.ArrayCollection;
		
		[Bindable]
		private var __photos:ArrayCollection;
		public function set photos( ac:ArrayCollection ) : void
		{
			var isPlaying:Boolean = __slideTimerID != 0;
			pauseSlides();
			__photos = ac;
			if( isPlaying ) playSlides();
		}
		public function get photos() : ArrayCollection
		{
			return __photos;
		}
		
		private var __selectedPhoto:*;
		public function set selectedPhoto( photo:* ) : void
		{
			__selectedPhoto = photo;
		}
		public function get selectedPhoto() : *
		{
			return __selectedPhoto;
		}
		
		private var __mode:String = "pause";
		
		[Bindable]
		private var __title:String = "";
		
		[Embed(source="actionscript-application-flickr-assets-skins.swf",symbol="playButton_up")]
		private var __playButton:Class;
		[Embed(source="actionscript-application-flickr-assets-skins.swf",symbol="pauseButton_up")]
		private var __pauseButton:Class;
		[Embed(source="actionscript-application-flickr-assets-skins.swf",symbol="skipButton_up")]
		private var __skipButton:Class;
		[Embed(source="actionscript-application-flickr-assets-skins.swf",symbol="closeButton_slideshow")]
		private var __closeButton:Class;
		
		[Bindable]
		private var __controlButtons:ArrayCollection =
			new ArrayCollection( 
				[{label:"Play", icon:__playButton, tip:"Plays (or pauses) the slide show"},
				 {label:"Skip", icon:__skipButton, tip:"Moves to the next slide"},
				 {label:"Close",icon:__closeButton, tip:"Closes the slide show"}]);
		
		private function handleClick(event:ItemClickEvent) : void
		{
			switch( event.index ) 
			{
				case 0:
					if( __mode == "pause" ) {
						__mode = "play";
						changeButtonLabel( "Pause", __pauseButton );
						playSlides();
					} else {
						__mode = "pause";
						changeButtonLabel( "Play", __playButton );
						pauseSlides();
					}
					break;
				case 1:
					playSlides();
					break;
				case 2:
					pauseSlides();
					__mode = "pause";
					changeButtonLabel( "Play", __playButton );
					pauseSlides();
					dispatchEvent( new Event("close") );
					break;
			}
		}
		
		private function changeButtonLabel( label:String, icon:Class, buttonIndex:int=0 ) : void
		{
			var item:* = __controlButtons.getItemAt(buttonIndex);
			item.label = label;
			item.icon  = icon;
		}
		
		private var __slideTimerID:int = 0;
		private var __currentIndex:int = 0;
		
		private var __advance:Boolean = false;
		
		private function imageLoaded() : void
		{
			currentState = "";
			__title = selectedPhoto.title;
			
			if( __mode == "play" ) {
				__slideTimerID = flash.utils.setInterval( playSlides, 5000 );
			}
		}
		
		private function nextPhoto() : void
		{
			currentState = "loadingState";
			
			selectedPhoto = __photos.getItemAt(__currentIndex);
			var imageURL:String = "http://static.flickr.com/"+selectedPhoto.server+"/"+selectedPhoto.id+"_"+selectedPhoto.secret+".jpg";
			img.source = imageURL;
			
			dispatchEvent( new SlideEvent(__currentIndex) ); 
			
			if( ++__currentIndex >= __photos.length ) __currentIndex = 0;
		}
		
		public function playSlides() : void
		{
			if( __slideTimerID != 0 ) {
				flash.utils.clearInterval(__slideTimerID);
			}
						
			nextPhoto();
		}
		
		public function pauseSlides() : void
		{
			if( __slideTimerID != 0 ) {
				flash.utils.clearInterval(__slideTimerID);
			}
			__slideTimerID = 0;
		}
		
	]]>
	</mx:Script>
	
	<actionscript_application_flickr_ImageMixer id="img" top="40" left="20" right="20" bottom="50"
			complete="imageLoaded()" >
      <filters>
      		<f:DropShadowFilter xmlns:f="flash.filters.*" />
      </filters>
	</actionscript_application_flickr_ImageMixer>
	
	<mx:ButtonBar id="controls" bottom="10" horizontalCenter="0" 
		itemClick="handleClick(event)"
		dataProvider="{__controlButtons}"
		labelField="label"
		toolTipField="tip" />
		
	<mx:Label text="{__title}" left="10" right="10" top="10" styleName="photoTitle"/>
</mx:Canvas>