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