<?xml version="1.0" encoding="utf-8"?>
<!--
	FavoritesPanel
	
	The FavoritesPanel displays small thumbnails of photos which the user
	wants to remember. Photos are saved either by dragging them from
	the GalleryPanel or by picking the "Favorites" button on the PhotoViewer.
	
	FavoritesPanel implements the ISlideShow interface which requires the
	nextPhoto and prevPhoto methods be defined.
-->
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" xmlns="*" 
		implements="com.adobe.flickr.interfaces.ISlideShow"
		xmlns:ui="ui.favorites.*"
		initialize="initComp()" 
		dragEnter="handleDragEnter(event)"
		dragDrop="handleDragDrop(event)" >
		
	<mx:Metadata>
		[Event(name="enlarge",type="com.adobe.flickr.events.EnlargeEvent")]
	</mx:Metadata>
	
	<mx:states>
		<mx:State name="hasPhotos" >
			<mx:SetProperty target="{noPhotos}" name="visible" value="false" />
			<mx:SetProperty target="{imageTiles}" name="visible" value="true" />
		</mx:State>
	</mx:states>
	
	<mx:Script>
	<![CDATA[
		import mx.controls.Alert;
		import com.adobe.flickr.events.TrashcanEvent;
		import com.adobe.flickr.UserData;
		import com.adobe.flickr.events.*;
		import mx.collections.ArrayCollection;
		import mx.managers.DragManager;
		import mx.events.DragEvent;
		
		[Bindable] private var ac:ArrayCollection = new ArrayCollection();
		[Bindable] public  var selectedPhoto:*;
		
		private var __userData:UserData;
		
		private function initComp() : void
		{
			__userData = new UserData();
			var saved:Array = __userData.loadFavorites();
			if( saved != null ) {
				for(var i:int=0; i < saved.length; i++) {
					ac.addItem(saved[i]);
				}
			}
			
			if( ac.length > 0 ) currentState = "hasPhotos";
		}
		
		public function get photos() : ArrayCollection
		{
			return ac;
		}
		
		private var _selectedItem:actionscript_application_flickr_Thumbnail = null;
		public function get selectedItem() : actionscript_application_flickr_Thumbnail
		{
			return _selectedItem;
		}
		
		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 set selectedIndex( index:int ) : void
		{
			selectedItem = imageTiles.getChildAt(index) as actionscript_application_flickr_Thumbnail;
			selectedPhoto = ac.getItemAt(index);
		}
		
		private function handleDragEnter( event:mx.events.DragEvent ) : void
		{
			if( event.dragSource.hasFormat("thumbnail") ) {
				var dropTarget:Canvas = event.currentTarget as Canvas;
				mx.managers.DragManager.acceptDragDrop(dropTarget);
			}
		}
		
		private function handleDragDrop( event:mx.events.DragEvent ) : void
		{
			var photo:Object = event.dragSource.dataForFormat('thumbnail');
			
			ac.addItem(photo);
			
			__userData.saveFavorites(ac);
			
			if( ac.length > 0 ) currentState = "hasPhotos";
		}
		
		public function deleteItems( event:TrashcanEvent ) : void
		{
			for(var i:int=0; i < ac.length; i++) {
				var item:* = ac.getItemAt(i);
				if( event.items[0].id == item.id ) {
					ac.removeItemAt(i);
					break;
				}
			}
			
			__userData.saveFavorites(ac);
			
			if( ac.length == 0 ) currentState = '';
		}
		
		public function nextPhoto() : void
		{
			if( selectedItem == null ) return;
			
			var index:int = selectedItem.index;
			if( ++index >= ac.length ) index = 0;
			
			selectedItem = imageTiles.getChildAt(index) as actionscript_application_flickr_Thumbnail;
			selectedPhoto = ac.getItemAt(index);
			
			dispatchEvent( new EnlargeEvent(this,selectedPhoto) );
		}
		
		public function prevPhoto() : void
		{
			if( selectedItem == null ) return;
			
			var index:int = selectedItem.index;
			if( --index < 0 ) index = ac.length - 1;
			
			selectedItem = imageTiles.getChildAt(index) as actionscript_application_flickr_Thumbnail;
			selectedPhoto = ac.getItemAt(index);
			
			dispatchEvent( new EnlargeEvent(this,selectedPhoto) );
		}
		
		public function addPhoto( event:FavoriteEvent ) : void
		{
			var photo:* = event.photo;
			
			ac.addItem(photo);
			
			__userData.saveFavorites(ac);
			
			if( ac.length > 0 ) currentState = "hasPhotos";
		}
		
		private function showLargeView( event:flash.events.MouseEvent ) : void
		{
			selectedItem = event.currentTarget as actionscript_application_flickr_Thumbnail;
			
			selectedPhoto = event.currentTarget.data;
			dispatchEvent( new EnlargeEvent(this,selectedPhoto) );
		}
		
	]]>
	</mx:Script>
	
	<mx:Text id="noPhotos"
		text="Drag photos here"
		styleName="noPhotoLabel"
		visible="true"
		selectable="false"
		alpha=".5"
		left="4" top="20" right="4" bottom="4"
		/>
	
	<mx:Tile id="imageTiles" left="4" top="4" right="4" bottom="4" 
			horizontalGap="10" verticalGap="10"
			visible="false">
		<mx:Repeater id="rep" dataProvider="{ac}">
			<actionscript_application_flickr_Thumbnail data="{rep.currentItem}" 
				index="{rep.currentIndex}"
				photoSize="small"
				click="showLargeView(event)" />
		</mx:Repeater>
	</mx:Tile>
	
</mx:Canvas>