<?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>