License text 

/*
 * DO NOT ALTER OR REMOVE COPYRIGHT NOTICES OR THIS FILE HEADER 
 * Copyright  2008, 2010 Oracle and/or its affiliates.  All rights reserved. 
 * Use is subject to license terms.
 * 
 * This file is available and licensed under the following license:
 * 
 * Redistribution and use in source and binary forms, with or without 
 * modification, are permitted provided that the following conditions are met: 
 * 
 *   * Redistributions of source code must retain the above copyright notice, 
 *     this list of conditions and the following disclaimer. 
 *
 *   * Redistributions in binary form must reproduce the above copyright notice,
 *     this list of conditions and the following disclaimer in the documentation
 *     and/or other materials provided with the distribution.
 *
 *   * Neither the name of Oracle Corporation nor the names of its contributors 
 *     may be used to endorse or promote products derived from this software 
 *     without specific prior written permission. 
 *
 * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS 
 * "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT 
 * LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR 
 * A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT 
 * OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, 
 * SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, 
 * PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; 
 * OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, 
 * WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR 
 * OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF 
 * ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. 
 */

    

package rippleeffect.view;

import javafx.animation.Timeline;
import javafx.animation.KeyFrame;
import javafx.animation.Interpolator;
import javafx.scene.Node;
import javafx.scene.Group;
import javafx.scene.CustomNode;
import javafx.scene.shape.Rectangle;
import javafx.scene.paint.Color;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.scene.effect.Reflection;
import javafx.scene.effect.DisplacementMap;
import javafx.scene.effect.FloatMap;

import java.lang.Math;

public def imageWidth = 370;
public def imageHeight = 235;

// To display image with ripple effect
public class ImageCanvas extends CustomNode {
    public var width = 370.0;
    public var height = 450.0;
    override var blocksMouse = true;
    // Instantiate the FloatMap as per size of the image
    var floatMap = FloatMap {
        width: imageWidth + 50 as Integer,
        height: imageHeight + 50 as Integer
    };
    var  sampleX:Number = 1.0;
    var  sampleY:Number = 1.0;
    var rippleTimeline:Timeline = Timeline {
        repeatCount: Timeline.INDEFINITE
        autoReverse: true
        keyFrames: [ 
            KeyFrame {
                time: 3s
                values: [ sampleX => 100.0 tween Interpolator.LINEAR ] 
            },
            KeyFrame {
                time: 2s
                values: [ sampleY => 100.0 tween Interpolator.LINEAR ] 
            },
            KeyFrame {
                time: 6s
                values: [ sampleX => -100.0 tween Interpolator.LINEAR ] 
            },
            KeyFrame {
                time: 4s
                values: [ sampleY => -100.0 tween Interpolator.LINEAR ] 
            },
            KeyFrame {
                time: 9s
                values: [ sampleX => 100.0 tween Interpolator.LINEAR ] 
            },
            KeyFrame {
                time: 8s
                values: [ sampleY => 200.0 tween Interpolator.LINEAR ] 
            }
        ]
    };
    
    public var url:String = null;
    function getImage(imageURL:String):Image {
       if(url == null) { return null; }
       var paused = rippleTimeline.paused;
       rippleTimeline.pause();
       var image = Image { 
            url: imageURL 
            backgroundLoading: false
        };

        if(not paused) {
            rippleTimeline.play();
        }
        
        return image;
    }

    function createDisplacementMap(xAmp:Number, yAmp:Number):DisplacementMap {
        DisplacementMap {
            input: Reflection {
                bottomOpacity: 0.8
                topOpacity: 1.0
                fraction: 1.0
                topOffset: 0
            }
            mapData: createMapData(floatMap, xAmp, yAmp)
        }
    }

    override function create(): Node {
       var originalImageView = ImageView { 
          image: bind getImage(url) 
        };
       var reflectionImageView = ImageView {
          image: bind originalImageView.image
          effect: bind createDisplacementMap(sampleX/9000.0, sampleY/9000.0)
        };

        var background = Rectangle {
            x: 0
            y: 0
            width: imageWidth + 2
            height: imageHeight * 2 + 2
            arcWidth: 20
            arcHeight: 20
        }
                        
        var controlPanel : ControlPanel = ControlPanel { 
            translateY: height - 65 
            opacity: 0.2
            onMouseEntered:function(e) { 
                controlPanel.opacity = 1.0;
            }
            onMouseExited:function(e) { 
                controlPanel.opacity = 0.2;
            }
            onPlay:function(play:Boolean) {
                if(play) { 
                    rippleTimeline.play();
                } else {
                    rippleTimeline.pause();
                }   
            }
        }   
        
        return Group { 
            content: [ background, reflectionImageView, originalImageView, controlPanel ] 
        };
    }
    
    function createMapData(map:FloatMap, xAmp:Number, yAmp:Number):FloatMap {
        var w = map.width;
        var h = map.height;
        for (x in [ 0..(w-1) ]) {
            var angle = Math.PI * 2.0 * (x + 0.5) / (w / 4.0);
            var xval = (Math.sin(angle) * xAmp) as Number;
            for(y in [ 0..(h-1) ]) {
                map.setSample(x, y, 0, xval);
            }
        }
        for (y in [ 0..(h-1) ]) {
            var angle = Math.PI * 2.0 * (y + 0.5) / (h/4.0);
            var yval = (Math.sin(angle) * yAmp) as Number;
            for (x in [ 0..(w-1) ]) {
                map.setSample(x, y, 1, yval);
            }
        }
        return map;
    }

    public function play() {
        rippleTimeline.play();
    }

    public function pause() {
        rippleTimeline.pause();
    }
}