<?xml version="1.0" encoding="utf-8"?>
  <!--
          GalleryPanel
          
          The GalleryPanel displays a grid of thumbnails and the PhotoViewer. The GalleryPanel
          has three states: one showing just the Tile of Thumbnails, other state showing
          the PhotoViewer with the Tile squeezed to the right, and a state where no photos are
          in the gallery.
          
          Transitions are used to provide feedback as the PhotoViewer is hidden and displayed.
          
          GalleryPanel fires the following events:
          enlarge: A Thumbnail was clicked and it has been enlarged and displayed in the
                  PhotoViewer.
          search: A tag in the PhotoViewer.PhotoDetails has been clicked
          favorite: The image in the PhotoViewer has been selected to be in the Favorites list.
          
          The GalleryPanel also implements the ISlideShow interface.
  -->
  <mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" xmlns="*" 
                  implements="com.adobe.flickr.interfaces.ISlideShow"
                  verticalScrollPolicy="off"
                  horizontalScrollPolicy="off"
                  resize="calcWidths()"
                  >
                  
          <mx:Metadata>
                  [Event(name="enlarge",type="com.adobe.flickr.events.EnlargeEvent")]
                  [Event(name="search",type="com.adobe.flickr.events.SearchEvent")]
                  [Event(name="favorite",type="com.adobe.flickr.events.FavoriteEvent")]
          </mx:Metadata>
                  
          <mx:states>
                  <mx:State name="largeState">
                          <mx:SetProperty target="{thumbView}" name="width" value="{width-__largeViewWidth}" />
                  </mx:State>
                  <mx:State name="noPhotosState">
                          <mx:SetProperty target="{thumbView}" name="visible" value="false" />
                          <mx:SetProperty target="{largeView}" name="visible" value="false" />
                          <mx:AddChild >
                                  <mx:VBox width="100%" height="100%" horizontalAlign="center" verticalAlign="middle">
                                          <mx:Label id="nomatch" text="No Photos Match Criteria"
                                                  visible="true"
                                                  styleName="noMatchLabel" />
                                  </mx:VBox>
                          </mx:AddChild>
                  </mx:State>
          </mx:states>
          
          <mx:transitions>
                  <mx:Transition fromState="*" toState="largeState">
                          <mx:Sequence targets="{[thumbView,largeView]}">
                                  <mx:SetPropertyAction name="visible" value="true" />
                                  <mx:Parallel>
                                          <mx:Resize target="{thumbView}" widthTo="{width-__largeViewWidth-4}" />
                                          <mx:Move target="{thumbView}" xTo="{__largeViewWidth}" />
                                  </mx:Parallel>
                                  <mx:Fade target="{largeView}" alphaTo="1" duration="500" />
                          </mx:Sequence>
                  </mx:Transition>
                  <mx:Transition fromState="*" toState="">
                          <mx:Sequence targets="{[thumbView,largeView]}" >
                                  <mx:SetPropertyAction name="visible" value="true" />
                                  <mx:Fade target="{largeView}" alphaTo="0" duration="500" />
                                  <mx:Parallel>
                                          <mx:Resize target="{thumbView}" widthTo="{width}" />
                                          <mx:Move target="{thumbView}" xTo="0" />
                                  </mx:Parallel>
                          </mx:Sequence>
                  </mx:Transition>
          </mx:transitions>
          
          <mx:Script>
          <![CDATA[
                  import com.adobe.flickr.events.*;
                  import com.adobe.flickr.interfaces.ISlideShow;
                  import mx.controls.Alert;
                  import mx.collections.ArrayCollection;
                  
                  [Bindable] public var selectedPhoto:Object;
                  [Bindable] public var selectedPhotoInfo:Object;
                  
                  [Bindable] private var __ac:ArrayCollection;
                  [Bindable] private var __title:String;
                  [Bindable] private var __largeViewWidth:Number;
                  
                  /*
  		 * setters and getters
  		 */
                  
                  private var __selectedItem:actionscript_application_flickr_Thumbnail = null;
                  public function set selectedItem( item:actionscript_application_flickr_Thumbnail ) : void
                  {
                          if( __selectedItem != null ) __selectedItem.selected = false;
                          __selectedItem = item;
                          if( __selectedItem != null ) __selectedItem.selected = true;
                  }
                  public function get selectedItem() : actionscript_application_flickr_Thumbnail
                  {
                          return __selectedItem;
                  }
                  
                  public function set photos( photos:Array ) : void
                  {
                          selectedItem = null;
                          
                          __ac = new ArrayCollection(photos);
                          
                          if( photos.length == 0 ) {
                                  currentState = "noPhotosState";
                          } else if( currentState == "noPhotosState" ) {
                                  currentState = "";
                          }
                          
                          thumbView.verticalScrollPosition = 0;
                  }
                  
                  /*
  		 * public methods
  		 */
                  
                  public function showLargeView( event:flash.events.MouseEvent ) : void
                  {
                          selectedItem = actionscript_application_flickr_Thumbnail(event.currentTarget);
                          
                          dispatchEvent( new EnlargeEvent(this,event.currentTarget.data) );
                  }
                  
                  public function showGalleryPhoto( event:EnlargeEvent ) : void
                  {
                          currentState = "largeState";
                          selectedPhoto = event.photo;
                          selectedPhotoInfo = null;
                          
                          __title = "";
                          
                          var imageURL:String = "http://static.flickr.com/"+selectedPhoto.server+"/"+selectedPhoto.id+"_"+selectedPhoto.secret+".jpg";
                          largeView.source = imageURL;
                          largeView.viewer = event.viewer;
                  }
                  
                  public function showFavoritePhoto( event:EnlargeEvent ) : void
                  {
                          currentState = "largeState";
                          selectedPhoto = event.photo;
                          selectedPhotoInfo = null;
                          
                          __title = "";
                          
                          var imageURL:String = "http://static.flickr.com/"+selectedPhoto.server+"/"+selectedPhoto.id+"_"+selectedPhoto.secret+".jpg";
                          largeView.source = imageURL;
                          largeView.viewer = event.viewer;
                  }
                  
                  public function hideLargeView() : void
                  {
                          currentState = "";
                  }
                  
                  public function nextPhoto() : void
                  {
                          if( selectedItem == null ) return;
                          
                          var index:int = selectedItem.index;
                          if( ++index >= __ac.length ) index = 0;
                          
                          selectedItem = actionscript_application_flickr_Thumbnail(thumbView.getChildAt(index));
                          
                          dispatchEvent( new EnlargeEvent(this,__ac.getItemAt(index)) );
                  }
                  
                  public function prevPhoto() : void
                  {
                          if( selectedItem == null ) return;
                          
                          var index:int = selectedItem.index;
                          if( --index < 0 ) index = __ac.length - 1;
                          
                          selectedItem = actionscript_application_flickr_Thumbnail(thumbView.getChildAt(index));
                          
                          dispatchEvent( new EnlargeEvent(this,__ac.getItemAt(index)) );
                  }
                   
                  /*
  		 * private methods
  		 */
                  
                  private function calcWidths() : void
                  {
                          __largeViewWidth = Math.floor( width*0.64 );
                  }
          ]]>
          </mx:Script>
          
          <actionscript_application_flickr_PhotoViewer id="largeView" 
                  selectedPhoto="{selectedPhoto}"
                  selectedPhotoInfo="{selectedPhotoInfo}"
                  width="{__largeViewWidth}" 
                  height="100%" 
                  alpha="0" 
                  hideView="hideLargeView()" />
          
          <mx:Tile id="thumbView" width="100%" height="100%" 
                          visible="true">
                  <mx:Repeater id="imageTiles" dataProvider="{__ac}">
                          <actionscript_application_flickr_Thumbnail data="{imageTiles.currentItem}" 
                                  index="{imageTiles.currentIndex}"
                                  click="showLargeView(event)" />
                  </mx:Repeater>
          </mx:Tile>
          
  </mx:Canvas>