gistfile1.as

<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" 
	mouseChildren="false" useHandCursor="true" buttonMode="true"
	click="launchPage()" creationComplete="init()" 	
	implements="com.candlecafe.view.component.renderers.IItemViewerRenderer">
	<mx:Script>
		<![CDATA[
			import mx.events.EffectEvent;			
			import com.candlecafe.model.PressImage;
			import mx.effects.easing.*;
			import mx.containers.Canvas;
			
			[Bindable] public function set dataProvider(value:Object):void
			{
				_dataProvider = value as PressImage;
			}
			
			public function get dataProvider():Object
			{
				return _dataProvider;
			}
			
			[Bindable] public var appearDelay:int;
			
			private var _dataProvider:PressImage;
			private var animating:Boolean;
			private var tempX:Number;
			private var tempY:Number;
			
			private function init():void
			{
				tempX = x;
				tempY = y;
				
				addEventListener(MouseEvent.ROLL_OVER, rollOverListener);
				
				zoomIn.addEventListener(EffectEvent.EFFECT_END, zoomInCompletedListener);
				zoomOut.addEventListener(EffectEvent.EFFECT_END, zoomOutCompletedListener);
			}
			
			private function rollOverListener(e:MouseEvent):void
			{				
				removeEventListener(MouseEvent.ROLL_OVER, rollOverListener);
				
				zoomIn.zoomHeightTo = 1.5;
				zoomIn.zoomWidthTo = 1.5;
				
				zoomIn.play();		
			}
			
			private function zoomInCompletedListener(e:EffectEvent):void
			{
				//we have finished the zoom. let's start listening for a roll out now
				addEventListener(MouseEvent.ROLL_OUT, rollOutListener);
			}
			
			private function zoomOutCompletedListener(e:EffectEvent):void
			{
				addEventListener(MouseEvent.ROLL_OVER, rollOverListener);
			}
			private function rollOutListener(e:MouseEvent):void
			{
				removeEventListener(MouseEvent.ROLL_OUT, rollOutListener);
				
				zoomOut.zoomHeightTo = 1.0;
				zoomOut.zoomWidthTo = 1.0;

				zoomOut.play();
			}
						
			private function launchPage():void
			{
				navigateToURL(new URLRequest(dataProvider.getThumbnailUrl()), "_blank");
			}
		
		]]>
	</mx:Script>
	
	<mx:Image id="image" source="{dataProvider.thumbnailUrl}" creationCompleteEffect="{fade}" alpha="0" scaleX="0.75" scaleY="0.75"/>
	
	<!-- ANIMATIONS -->
	<mx:Fade startDelay="{appearDelay}" id="fade" alphaFrom="0" alphaTo="1" />
	
	<mx:Zoom id="zoomIn" duration="50" target="{this}" easingFunction="{mx.effects.easing.Cubic.easeIn}">
		<mx:effectStart>
			<![CDATA[
				parent.addChildAt(this, Canvas(parent).getChildren().length - 1);			
				this.filters = [dropShadow];
			]]>
		</mx:effectStart>
	</mx:Zoom>

	<mx:Zoom id="zoomOut" duration="50" target="{this}" easingFunction="{mx.effects.easing.Cubic.easeOut}">
		<mx:effectEnd>
			<![CDATA[
				this.filters = [];
			]]>
		</mx:effectEnd>
	</mx:Zoom>
	
	<mx:DropShadowFilter id="dropShadow" blurX="5" blurY="5" color="#000000" distance="5" alpha="0.25" />

	
</mx:Canvas>