package beispiel;

import beispiel.Uhrzeit;
import java.lang.Math;
import javafx.scene.*;
import javafx.scene.effect.*;
import javafx.scene.input.MouseEvent;
import javafx.scene.paint.*;
import javafx.scene.shape.*;
import javafx.scene.text.Text;
import javafx.scene.transform.*;
import javafx.stage.Stage;

def radius: Number = 80;
def mitte: Number = 125;
def farbe1 = Color.rgb(150,150,180);
def farbe2 = Color.rgb(230,230,250);

def zeit: Uhrzeit = Uhrzeit{ };


var ttX:Number = 0;
var ttY:Number = 0;
var ttO:Number = 0;



Stage {
    title: bind zeit.titel
    width:  250
    height: 400
    resizable: true


    scene:  Scene {
      
        // Inhalt des Scenegraphs nach rechts unten verschoben
        content: Group {
            transforms: Translate { x: mitte, y: mitte }
            content: [

                 // Gehauese
                 Circle {
                      radius:radius+20,
                      fill:  LinearGradient {
                         stops: [ Stop {offset: 0.7 color: Color.LIGHTGRAY}
                                  Stop {offset: 1.0 color: Color.BLACK}  ]
                                  }
                      stroke: Color.BLACK,
                      strokeWidth: 1
                      onMouseMoved: function( e: MouseEvent ):Void {
                         ttX = e.sceneX;
                         ttY = e.sceneY;
                      }
                      onMouseEntered: function( e: MouseEvent ):Void {
                          ttO = 1;
                      }
                      onMouseExited: function( e: MouseEvent ):Void {
                          ttO = 0;
                      }
                 }
               
                 // Striche
                 for ( i in [0..59] ) {
                    var winkel = i / 30.0 * Math.PI;
                    var breite = 1;
                    Line  {
                        strokeWidth: breite
                        startX: (radius + 4) * Math.cos( winkel);
                        startY: (radius + 4) * Math.sin( winkel);
                        endX  : (radius + 8) * Math.cos( winkel);
                        endY  : (radius + 8) * Math.sin( winkel);
                    }
                 }
                 // Gruppe für Zeiger mit Schatteneffekt
                 Group {
                    effect:  DropShadow { offsetX: 3 offsetY: 3 color: Color.color(0.2, 0.2, 0.4) };
                    content : [
                     
                         // Stundenzeiger
                        Path {
                            transforms: Rotate { angle: bind (zeit.stunden + zeit.minuten / 60.0) * 30 - 90 }
                            fill: Color.BLACK,
                            elements: [ MoveTo { x: 0, y : 0},
                                        LineTo { x: 4, y: 4},
                                        LineTo { x: radius-5 y: 0},
                                        LineTo { x: 4 y: -4} ]
                        }
                        // Sekundenzeiger
                        Line {
                            transforms: Rotate { angle: bind zeit.sekunden * 6-90 }
                            startX: 5 endX: radius
                            strokeWidth: 2 stroke: Color.RED
                        }
                    ]                   
                } // Ende Zeigergruppe
                 Text {
                     x: bind ttX -mitte;
                     y: bind ttY -mitte;
                     content: "Hello World"
                     opacity: bind ttO;
                 }
            ]  // Ende Group content
            effect:  Reflection {fraction: 0.9  topOpacity: 0.5 topOffset: 2.5}
        } // Ende Group
        // Hintergrund für ganze Scene
        fill: LinearGradient {
            startX: 0.0, startY: 0.0, endX: 0.0, endY: 1.0, proportional: true
            stops: [
                Stop {offset: 0.0 color: Color.WHITE},
                Stop {offset: 1.0 color: Color.BLACK} ]
                }
    } // Ende Scene
} // Ende Stage