<?xml version="1.0" encoding="utf-8"?>

<!--
	ImageMixer:
	
	Displays one of two images, using a Fade effect to switch between them. The idea is to present a control
	the mimics the Image control. For example, there is a source property and the control dispatches both
	progress and complete events.
	
	Note: This code was lifted from the PhotoViewer example shipped with Flex 1.5.
  -->

<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" 
	horizontalScrollPolicy="off" 
	verticalScrollPolicy="off">

    <mx:Metadata>
	   [Event(name="complete",type="flash.events.Event")]
	   [Event(name="progress",type="flash.events.Event")]
	</mx:Metadata>
	
    <mx:Script>
	<![CDATA[
		import flash.events.Event;
		import mx.effects.Fade;
		import mx.effects.Parallel;
	
		// activeControl is set to which Image, image1 or image2, is currently being
		// used.
        public var activeControl:Image;
        
        
        // fades out the currently active image
        public function hideImage() : void {
        	if( activeControl != null ) {
	            var e1:Fade = new Fade(activeControl);
	            e1.duration=800;
	            e1.alphaTo = 0;
	            e1.play();
        	}
        }

		/* set source
		 * This set method mimics the Image source property and determines which image
		 * should be set by comparing the activeControl.
		 */
        public function set source(src:String) : void {
            if (activeControl==image1) {
                image2.load(src);
            } else {
                image1.load(src);
            }
        }

		/* mix
		 * This method uses the Fade effect to dissolve one image into the other. Note that
		 * it dispatches the 'complete' event, much like the Image control.
		 */
        private function mix(showObj:Image, hideObj:Image) : void {
            activeControl=showObj;
            var e1:Fade = new Fade(hideObj);
            e1.duration=800;
            e1.alphaTo = 0;

            var e2:Fade = new Fade(showObj);
            e2.duration=800;
            e2.alphaTo = 1;

            var mixEffect:Parallel = new Parallel();
            mixEffect.addChild(e1);
            mixEffect.addChild(e2);
            mixEffect.play();
			
			dispatchEvent(new Event("complete"));
        }
		
		/* update
		 * This method reports the progress of the currently active image
		 */
		private function update() : void {
			dispatchEvent(new Event("progress"));
		}
    ]]>
    </mx:Script>

    <mx:Image id="image1" x="0" y="0"
    	width="100%" height="100%" scaleContent="true"
    	complete="mix(image1, image2)"
    	horizontalAlign="center"
    	verticalAlign="middle"
    	progress="update()"/>
    <mx:Image id="image2" x="0" y="0"
    	width="100%" height="100%" scaleContent="true"
    	horizontalAlign="center"
    	verticalAlign="middle"
    	complete="mix(image2, image1)"  
    	progress="update()"/>

</mx:Canvas>