/*
 * ProgressBar.fx
 *
 * Created on Jan 3, 2009, 12:14:46 PM
 */

package progressbar;

import javafx.stage.Stage;
import javafx.scene.Scene;

import javafx.scene.CustomNode;
import javafx.scene.Group;
import javafx.scene.Node;
import javafx.scene.paint.Color;
import javafx.scene.paint.Paint;
import javafx.scene.text.Text;
import javafx.scene.text.Font;
import javafx.scene.layout.Resizable;
import javafx.scene.shape.Rectangle;
import javafx.scene.shape.Ellipse;
import javafx.scene.effect.GaussianBlur;
import javafx.scene.text.TextOrigin;

import java.lang.Math;
import javafx.animation.Timeline;
import javafx.animation.KeyFrame;
import javafx.animation.Interpolator;



/**
 * @author jclarke
 */

public class ProgressBar extends CustomNode, Resizable {
    public var min : Number;
    public var max : Number = 100.0;
    public var value: Number;
    public var background: Paint = Color.rgb(118,149,178);
    public var foreground: Paint = Color.rgb(216,219,225);
    public var font = bind Font{
        name: "Courier Bold Italic"
        size: height - borderWidth * 8};
    public var arcWidth:Number = 20;
    public var arcHeight: Number = 50;
    public var borderStroke: Color = Color.BLACK;
    public var borderWidth: Number = 1;
    public var fontPaint: Paint = Color.LIGHTGRAY;
    public var showPercentage = true;

    var progressText: Text;
    var backgroundText: Text;
    var progessBar: Rectangle;
    var range = bind Math.abs(max - min);
    var percentComplete: Number = bind if(max != 0) { (
                                            value - min) / max
                                        } else {0.0;
                                        };
    var currentX = bind percentComplete * width;
    var blurX:Number = 30;
    var progressString:String = bind "%%{%.0f (percentComplete*100)}";
    var progressValue = bind "{%.2f value}";
    var progressHeight = bind height - borderWidth * 4;

    
    var blurAnim = Timeline {
        repeatCount: Timeline.INDEFINITE
        autoReverse: true
        keyFrames: [
            at(0s) { blurX => 0.0 }
            at(2s) { blurX => currentX - progressHeight/2 tween Interpolator.EASEBOTH }
        ]
    };
    
    var playing = bind visible on replace {
        if(playing) {
            blurAnim.play();
        }else { 
            blurAnim.stop();
        }
    }



    public override function create(): Node {
        return Group {
            content: [
                Rectangle { //background
                    width: bind width
                    height: bind height
                    fill: bind background
                    stroke: bind borderStroke
                    strokeWidth: bind borderWidth
                    arcWidth: bind arcWidth
                    arcHeight: bind arcHeight
                    cache: true
                },
                backgroundText = Text { // Text over Background
                    translateX: bind (width - backgroundText.layoutBounds.width)/2
                    translateY: bind (height - backgroundText.layoutBounds.height)/2
                    textOrigin: TextOrigin.TOP
                    font: bind font
                    fill: bind foreground
                    content: bind if(showPercentage) progressString else progressValue
                    cache: true
                },
                Group {
                    content: [
                        progessBar = Rectangle { // Progress
                            translateX: bind borderWidth
                            translateY: bind borderWidth*2
                            width: bind currentX
                            height: bind progressHeight
                            fill: bind foreground
                            arcWidth: bind arcWidth
                            arcHeight: bind arcHeight
                        },
                        Ellipse {
                            centerX: bind blurX
                            centerY:  bind height/2
                            radiusX: bind progressHeight
                            radiusY: bind progressHeight/2
                            fill: Color.rgb(255,255,255,.7)
                            effect: GaussianBlur{ radius: 30 }
                        },
                        Text { // Text Over Progress Bar, this has to be in progressBar coordinate space
                            x: bind (width - backgroundText.layoutBounds.width)/2
                            y: bind (height - backgroundText.layoutBounds.height)/2
                            textOrigin: TextOrigin.TOP
                            font: bind font
                            fill: bind background
                            content: bind if(showPercentage) progressString else progressValue
                            clip: bind progessBar
                         }
                    ]
               }
            ]

        };
    }
}

function run(args:String[]):Void {

    var stage:Stage = Stage {
    	title: "Progress Bar"
        scene: Scene {
            width: 920
            height: 60
            content: ProgressBar {
            	translateX: 10
                translateY:10
                width: 890
                height: 35
                value: 50
            }
        }
    }

}