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