<?xml version="1.0" encoding="utf-8"?>
<!--
Copyright 2010 Chet Haase

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
               xmlns:s="library://ns.adobe.com/flex/spark" 
               xmlns:mx="library://ns.adobe.com/flex/mx"
               xmlns:components="components.*"
               width="500" height="400" viewSourceURL="srcview/index.html">
    <fx:Declarations>
        <s:GlowFilter id="glow" color="0xffaa00" blurX="20" blurY="20"/>
    </fx:Declarations>
    <fx:Script>
        <![CDATA[
            import mx.events.EffectEvent;
            
            import spark.effects.Animate;
            import spark.effects.animation.MotionPath;
            import spark.effects.animation.SimpleMotionPath;
            import spark.filters.DropShadowFilter;
            import spark.filters.ShaderFilter;
            
            [Embed("images/GoldenGate.jpg")]
            [Bindable]private var GoldenGate:Class;
            
            [Embed("images/Harbor.jpg")]
            [Bindable]private var Harbor:Class;
            
            [Embed("images/SanFrancisco.jpg")]
            [Bindable]private var SanFrancisco:Class;
            
            [Embed("images/SouthGoldenGate.jpg")]
            [Bindable]private var SouthGoldenGate:Class;
            
            [Embed("images/GoldenGateSunset.jpg")]
            [Bindable]private var GoldenGateSunset:Class;
            
            [Embed("shaders/Grayscaler.pbj", 
                    mimeType="application/octet-stream")]
            private static var GrayscalerShaderClass:Class;
            
            private var currentThumbnailIndex:int = -1;
            
            private function addFilters():void
            {
                for (var i:int = 0; i < thumbnails.numElements; ++i)
                {
                    var img:Image = Image(thumbnails.getElementAt(i));
                    var shadow:DropShadowFilter = 
                        new spark.filters.DropShadowFilter();
                    shadow.blurX = 6;
                    shadow.blurY = 6;
                    shadow.quality = 2;
                    shadow.color = 0x808080;
                    shadow.distance = 5;
                    shadow.angle = 45 + ((thumbnails.numElements - i) * 
                        90 / (thumbnails.numElements));
                    var newShader:Shader = new Shader(new GrayscalerShaderClass());
                    var grayFilter:ShaderFilter = new ShaderFilter(newShader);
                    img.filters = [grayFilter, shadow];
                }
            }
            
            private function changePicture(event:MouseEvent):void
            {
                var image:Image = Image(event.currentTarget);
                picture.source = image.source;
                if (currentThumbnailIndex >= 0)
                {
                    var oldSelectedThumbnail:Image = 
                        Image(thumbnails.getElementAt(currentThumbnailIndex));
                    var glowIndex:int = oldSelectedThumbnail.filters.indexOf(glow);
                    var oldFilters:Array = oldSelectedThumbnail.filters;
                    oldFilters.splice(glowIndex, 1);
                    oldSelectedThumbnail.filters = oldFilters;
                }
                var filters:Array = image.filters;
                filters.splice(1, 0, glow);
                image.filters = filters;
                currentThumbnailIndex = thumbnails.getElementIndex(image);
            }
            
            // Keeps track of currently running animations
            private var currentAnims:Dictionary = new Dictionary();
            
            private function effectEnd(event:EffectEvent):void
            {
                delete currentAnims[event.effectInstance.target];
            }
            
            private function runColorizingAnim(image:Image, 
                                               endVal:Number):void
            {
                var target:ShaderFilter = ShaderFilter(image.filters[0]);
                var runningAnim:Animate = currentAnims[target];
                if (runningAnim != null)
                {
                    runningAnim.stop();
                    delete currentAnims[target];
                }
                var anim:Animate = new Animate(target);
                anim.duration = 250;
                anim.motionPaths = new <MotionPath>[
                    new SimpleMotionPath("colorization", null, endVal)];
                anim.play();
                anim.addEventListener(EffectEvent.EFFECT_END, effectEnd);
                currentAnims[target] = anim;
            }
            
            private function mouseOverHandler(event:MouseEvent):void
            {
                runColorizingAnim(Image(event.currentTarget), 1);
            }
            
            private function mouseOutHandler(event:MouseEvent):void
            {
                runColorizingAnim(Image(event.currentTarget), 0);
            }
        ]]>
    </fx:Script>
    <s:Rect width="100%" height="100%">
        <s:fill>
            <s:LinearGradient rotation="90">
                <s:GradientEntry color="0x404040"/>
                <s:GradientEntry color="0xf0f0f0"/>
            </s:LinearGradient>
        </s:fill>
    </s:Rect>
    <components:ReflexionContainer 
        id="picture" source="{Harbor}" 
        imageWidth="400" imageHeight="200"
        x="50" y="50"/>
    <s:TileGroup id="thumbnails" bottom="10" horizontalCenter="0" 
                 requestedRowCount="1" horizontalGap="15"  
                 columnWidth="75" rowHeight="50"
                 creationComplete="addFilters()">
        <mx:Image source="{GoldenGate}" click="changePicture(event)"  
                  mouseOver="mouseOverHandler(event)" 
                  mouseOut="mouseOutHandler(event)"/>
        <mx:Image source="{Harbor}" click="changePicture(event)" 
                  mouseOver="mouseOverHandler(event)" mouseOut="mouseOutHandler(event)"/>
        <mx:Image source="{SouthGoldenGate}" click="changePicture(event)" 
                  mouseOver="mouseOverHandler(event)" mouseOut="mouseOutHandler(event)"/>
        <mx:Image source="{SanFrancisco}" click="changePicture(event)" 
                  mouseOver="mouseOverHandler(event)" mouseOut="mouseOutHandler(event)"/>
        <mx:Image source="{GoldenGateSunset}" click="changePicture(event)" 
                  mouseOver="mouseOverHandler(event)" mouseOut="mouseOutHandler(event)"/>
    </s:TileGroup>
</s:Application>