<?xml version="1.0" encoding="utf-8"?>
<!--
	PhotoDetails
-->
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" xmlns="*"  >
	
	<mx:Metadata>
		[Event(name="search",type="com.adobe.flickr.events.SearchEvent")]
	</mx:Metadata>
	
	<mx:Script>
	<![CDATA[
		import mx.collections.ArrayCollection;
		import mx.utils.ArrayUtil;
		import com.adobe.flickr.events.SearchEvent;
	
		[Bindable] private var __tags:ArrayCollection;
		
		// override the setter of data 
		
		override public function set data( value:Object ): void
		{			
			// make sure none of these aren't null
			if( value.description == null ) value.description = "None Given";
			if( value.dates.taken == null ) value.dates.taken = "Unknown";
			if( value.owner.username == null ) value.owner.username = "Unknown";
			
			super.data = value;
			
			// make sure the previous tags are gone
			tagList.removeAllChildren();
			
			// the tags.tag is an ArrayCollection, possibly empty
			__tags = data.tags.tag;
		}
		
		private function doTagSearch( event:flash.events.MouseEvent ) : void
		{
			dispatchEvent( new SearchEvent(event.currentTarget.label) );
		}
		
		private function doUserSearch( event:flash.events.MouseEvent ) : void
		{
			var sl:SearchEvent = new SearchEvent(null,null,data.owner.username,data.owner.nsid);
			dispatchEvent( sl );
		}
		
		private function setHtmlStyles( event:flash.events.Event ) : void
		{
		}
	]]>
	</mx:Script>
	
	<mx:Label x="10" y="10" text="Taken by:" styleName="photoDetailLabel"/>
	<mx:LinkButton y="10" label="{data.owner.username}" left="95"
			click="doUserSearch(event)"/>
	
	<mx:Label text="Description:" top="35" left="10" styleName="photoDetailLabel">
	</mx:Label>
	<mx:TextArea htmlText="{data.description}" editable="false" height="118" 
	             backgroundAlpha="0" borderStyle="none"
	             creationComplete="setHtmlStyles(event)"
	             top="35" left="95" right="10">
	</mx:TextArea>
	
	<mx:Label text="Date Taken:" left="10" top="161" styleName="photoDetailLabel">
	</mx:Label>
	<mx:Text text="{data.dates.taken}" left="93" right="12" top="161">
	</mx:Text>
	
	<mx:Label text="Tags:" left="10" top="187" styleName="photoDetailLabel">
	</mx:Label>
	<mx:Tile id="tagList" styleName="photoDetailTagList"
			verticalGap="0" horizontalGap="0" 
			left="15" top="213" right="10" bottom="10" >
		<mx:Repeater id="tagRepeater" dataProvider="{__tags}" recycleChildren="false" >
			<mx:LinkButton label="{tagRepeater.currentItem.raw}" click="doTagSearch(event)" />
		</mx:Repeater>
	</mx:Tile>
	
</mx:Canvas>