<?xml version="1.0" encoding="utf-8"?>
  <!--
          Thumbnail
          
          The Thumbnail displays a small version of an image. Thumbnails can be in one of 
          two sizes (see photoSize property): small (75x75) or large (100x100). 
          
          Thumbnails are boxes within which the image is displayed. The border around an image
          can be colored to indicate it has been selected.
          
          Thumbnails have two states: loading and image. In the loading state, "Loading.." is
          displayed, indicating that a request for the thumbnail has been made but it has not
          yet completely downloaded. When the download completes the state is switched to
          image.
  -->
  <mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" xmlns="*"
          width="{thumbWidth+margin}" height="{thumbHeight+margin}"
          horizontalScrollPolicy="off"
          verticalScrollPolicy="off"
          mouseDown="__isDown=true"
          mouseUp="__isDown=false"
          mouseOut="handleMouseOut(event)">
          
          <mx:states>
                  <mx:State name="imageState">
                          <mx:RemoveChild target="{loading}" />
                          <mx:SetProperty target="{img}" name="visible" value="true" />
                  </mx:State>
          </mx:states>
                  
          <mx:Script>
          <![CDATA[
                  import mx.core.DragSource;
                  import mx.managers.DragManager;
                  
                  [Bindable] public var thumbWidth:int  = 100;
                  [Bindable] public var thumbHeight:int = 100;
                  [Bindable] public var margin:int      = 12;
                  [Bindable] public var index:int       = 0;
                  
                  [Bindable] private var __thumbURL:String;
                  [Bindable] private var __thumbTitle:String;
                  
                  private var __isDown:Boolean = false;
                  
                  /*
  		 * setters and getters
  		 */
                  
                  private var __photoSize:String = "_t";
                  public function set photoSize( s:String ) : void
                  {
                          if( s == "large" ) {
                                  thumbWidth = 100;
                                  thumbHeight= 100;
                                  margin = 12;
                                  __photoSize = "_t";
                          } else {
                                  thumbWidth = 55;
                                  thumbHeight= 55;
                                  margin = 12;
                                  __photoSize = "_s";
                          }
                  }
                  
                  private var __selected:Boolean = false;
                  public function set selected( b:Boolean ) : void {
                          __selected = b;
                          if( b ) setStyle("backgroundAlpha",.8);
                          else setStyle("backgroundAlpha",0);
                  }
                  public function get selected() : Boolean {
                          return __selected;
                  }
                  
                  /*
  		 * override of data setter
  		 */
                  
                  override public function set data(value:Object):void 
                  {
                          super.data = value;
                          
                          // this value may be null if the TileList is displaying less images than it can hold.
                          // the remainders show nothing
                          if( value == null ) {
                                  return;
                          }
                          
                          var testURL:String = "http://static.flickr.com/"+data.server+"/"+data.id+"_"+data.secret+__photoSize+".jpg";
                          
                          // if we are supposed to show what we already have, make sure we are in the
                          // image state; otherwise reset to the base state
                          if( testURL == __thumbURL ) {
                                  currentState = "imageState";
                          } else {
                                  currentState = "";
                          }
                          
                          __thumbURL = testURL;
                          __thumbTitle = data.title + "\nby "+data.ownername;
                  }
                  
                  /*
  		 * private methods
  		 */                
                  
                  // when the mouse is being pressed down and it leaves this component
                  // this will count as a Drag operation...
                  
                  private function handleMouseOut( event:flash.events.MouseEvent ) : void
                  {
                          if( __isDown ) {
                                  // set the dragInitiator as the Tile container, not the
                                  // Thumbnail itself.
                                  var dragInitiator:Canvas=Canvas(event.currentTarget.parent.parent);
  
                                  // add the data object (information about the photo) as the
                                  // thumbnail data for the drag operation.
                                  var ds:DragSource = new DragSource();
                                  ds.addData( data, "thumbnail" );
                                  
                                  // build the drag proxy as an Image
                                  var proxy:Image = new Image();
                                  proxy.source = __thumbURL;
                                  proxy.width = thumbWidth;
                                  proxy.height = thumbHeight;
                                  proxy.scaleContent = true;
                                  
                                  // let the DragManager do its job
                                  mx.managers.DragManager.doDrag( dragInitiator,
                                          ds, event, proxy );
                          }
                          
                          __isDown = false;
                  }
                  
                  // when the image has finished loading switch to the imageState
                  
                  private function completeLoad() : void
                  {
                          currentState = "imageState";
                  }
          ]]>
          </mx:Script>
          
          <!-- whenever the mouse moves over and out of the area we want to fade it
               slightly to give the user some feedback.
          -->
  
          <mx:Parallel id="darken">
                  <mx:Fade alphaFrom=".4" alphaTo=".2" duration="500" target="{frame}" />
          </mx:Parallel>
          <mx:Parallel id="brighten">
                  <mx:Fade alphaFrom=".2" alphaTo=".4" duration="500" target="{frame}" />
          </mx:Parallel>
                          
          <mx:Canvas id="frame" x="0" y="0" styleName="thumbnailFrame" 
                          width="{thumbWidth+margin}" 
                          height="{thumbHeight+margin}"
                          alpha=".2"
                          visible="true"
                         rollOverEffect="brighten"
                         rollOutEffect="darken"
                  />
          
          <mx:Label id="loading" styleName="loadingLabelSmall"
                          width="{thumbWidth+margin}" 
                          y="{thumbHeight/2-5}" 
                          text="Loading..."
                          visible="true" />
                          
          <mx:Image  id="img" alpha="1" horizontalAlign="center" verticalAlign="middle"
                     x="{margin/2}" y="{margin/2}"
             source="{__thumbURL}" 
             toolTip="{__thumbTitle}"
             height="{thumbHeight}" width="{thumbWidth}" scaleContent="true"
             visible="false" complete="completeLoad()"
             >
        <!--<mx:filters>
                <f:DropShadowFilter xmlns:f="flash.filters.*" />
        </mx:filters> -->
      </mx:Image>
  
  </mx:Canvas>