<?xml version="1.0" encoding="utf-8"?>
<s:Image xmlns:fx="http://ns.adobe.com/mxml/2009" 
         xmlns:s="library://ns.adobe.com/flex/spark" 
         xmlns:mx="library://ns.adobe.com/flex/mx"
         implements="de.dtele.ui.components.viewer.IResourceViewer"
         enableLoadingState="true"
         width="100%"
         height="100%"
         smooth="true"
         smoothingQuality="high"
         add="onAdd(event)"
         remove="onRemove(event)">
  
  <fx:Metadata>
    /**
     * Allows for viewing image resources
     * 
     * By default image display is limited to GIF, JPEG and PNG file formats.
     * 
     * @see spark.components.Image
     * 
     * @author Mathias Brodala
     */
  </fx:Metadata>
  
  <fx:Script>
    <![CDATA[
      import de.dtele.data.IResource;
      
      import mx.events.FlexEvent;
      
      public function view(resource:IResource):void {
        
        this.source = resource.fullUrl;
        
        this.dispatchEvent(new Event(Event.COMPLETE));
      }
      
      /**
       * Sets up the listener for parent resizes
       */
      protected function onAdd(e:FlexEvent):void {
        
        this.parent.addEventListener(Event.RESIZE, this.onParentResize);
      }
      
      /**
       * Removes the listener for parent resizes
       */
      protected function onRemove(event:FlexEvent):void {
        
        this.parent.removeEventListener(Event.RESIZE, this.onParentResize);
      }
      
      /**
       * Forces layout recalculation upon parent resize
       */
      protected function onParentResize(e:Event):void {
        
        // Re-setting these values forces resizing, manually calling
        // any of the invalidate*() or validate*() methods does not work
        this.percentWidth = this.percentHeight = 100;
      }

    ]]>
  </fx:Script>
  
</s:Image>