<?xml version="1.0" encoding="utf-8"?>

<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml"
                 verticalGap="0"
                 paddingTop="2"
                 paddingBottom="2"
                 paddingLeft="2"
                 paddingRight="2"
                 horizontalScrollPolicy="off"
                 verticalScrollPolicy="off"
                 creationComplete="doFilter()">

    <mx:Script>
        <![CDATA[
        
        import mx.effects.Fade;
                
        public static var _min:Number; 
        public static var _max:Number; 

        private var _filteredOut: Boolean=false;
                
        public function set filteredOut(value:Boolean):void
        {
            if (_filteredOut == value)
                return;

            _filteredOut = value;
            
            var e:Fade = new Fade(image);
            e.alphaTo = _filteredOut ? 0.1 : 1.0;
            e.duration = 300;
            e.play();
        }

        public static function setMinMax(min:Number, max:Number):void
        {
            _min = min;
            _max = max;                  
        }

        public function doFilter():void
        {
            if (!isNaN(_min) && !isNaN(_max))
            {
                filteredOut = data != null &&
                              (data.price < _min || data.price > _max);
            }
        }
                
        private function hideWhenChanging():void
        {
            image.addEventListener("contentPathChanged", function():void { this.visible = false; });
        }

        ]]>
    </mx:Script>

    <mx:VBox backgroundColor="#FFFFFF" paddingTop="0" paddingBottom="0" paddingLeft="0" paddingRight="0" verticalGap="0" width="100%" height="100%"
        horizontalAlign="center"
        horizontalScrollPolicy="off"
        verticalScrollPolicy="off"
        id="vbox">

        <mx:Canvas width="75" height="70" clipContent="false" > 
            <mx:Image id="image" source="{data.image}" width="75" height="70"
                      visible="false" complete="Image(event.target).visible=true;" 
                      creationComplete="hideWhenChanging()" />
        </mx:Canvas>

        <mx:Label text="{data.name}" height="20"/>
        <mx:Label text="${data.price}" styleName="priceThumb" height="20"/>
    </mx:VBox>

</mx:VBox>