FX

package displayshelf;

import javafx.animation.*;
import javafx.stage.*;
import javafx.scene.*;
import javafx.scene.shape.*;
import javafx.scene.paint.*;
import javafx.scene.effect.*;
import javafx.scene.image.*;
import javafx.scene.input.*;
import javafx.scene.text.*;

var inBrowser = "true".equals(FX.getArgument("isApplet") as String);
var draggable = AppletStageExtension.appletDragSupported;
var dragRect:Rectangle = Rectangle { x: 0 y: 0 width: 600 height: 25 fill: Color.DARKGRAY
    onMouseDragged:function(e:MouseEvent):Void {
        stage.x += e.dragX;
        stage.y += e.dragY;
    }
};
var dragTextVisible = bind inBrowser and draggable and dragRect.hover;
var dragControl:Group = Group {
    content:[
        dragRect,
        Text { x: 430 y: 17 content: "Drag out of Browser" fill: Color.WHITE visible: bind dragTextVisible},
        ImageView { x: 570 y: 8 image: Image { url: "{__DIR__}images/close_rollover.png" }
            visible: bind not inBrowser
        },
        ImageView { x: 570 y: 8 image: Image { url: "{__DIR__}images/dragOut_rollover.png" }
            visible: bind inBrowser and draggable
        },
        Rectangle { x: 570 y: 8 width: 10 height: 10 fill: Color.TRANSPARENT
            onMouseClicked: function(e:MouseEvent):Void { stage.close(); }
        }
        ]
};

var images = [
    "DSC_0026_2.jpg",
    "DSC_0040_2.jpg",
    "DSC_0068_2.jpg",
    "DSC_0083_2.jpg",
    "DSC_0094_2.jpg",
    "DSC_0129_2.jpg",
    "DSC_0152_2.jpg",
    "DSC_0162_2.jpg",
    "DSC_0172_2.jpg",
    "DSC_0178_2.jpg",
    "DSC_0199_2.jpg",
    "DSC_0277_2.jpg",
    "DSC_0290_2.jpg",
    "DSC_0425_2.jpg"
    ];

var half = images.size()/2;

var shelf:DisplayShelf;
shelf = DisplayShelf {
    spacing: 50
    scaleSmall: 0.7
    leftOffset: -110
    rightOffset: 110
    perspective: true
    content: bind for(i in images) {
        var item:Item = Item {
            angle: 45
            position: indexof i - half
            image:Image { url: "{__DIR__}photos/{i}" }
            shelf: bind shelf
        };
        item;
    }
    
    onKeyPressed:function(e:KeyEvent):Void {
        if(e.code == KeyCode.VK_LEFT) {
            shelf.shift(1);
        }
        if(e.code == KeyCode.VK_RIGHT) {
            shelf.shift(-1);
        }
    }
}

var width = 600;
shelf.translateX = width/2 - 200/2;
shelf.translateY = 50;


var stage:Stage = Stage {
    title: "Display Shelf"
    visible: true
    resizable: false
    style: StageStyle.UNDECORATED
    scene: Scene {
        content: [
            Rectangle {
                width: width
                height: 300
                fill: LinearGradient {
                    startX: 0 startY: 0
                    endX: 0 endY: 1
                    proportional: true
                    stops: [
                        Stop { offset: 0.0 color: Color.rgb(150,150,150) }
                        Stop { offset: 1.0 color: Color.rgb(30,30,30)},
                    ]
                }
            },
            shelf,
            dragControl,
        ]
    }
    extensions: [
        AppletStageExtension {
            shouldDragStart: function(e): Boolean {
                return inBrowser and e.primaryButtonDown and dragRect.hover;
            }
            onDragStarted: function() {
                inBrowser = false;
            }
            onAppletRestored: function() {
                inBrowser = true;
            }
            useDefaultClose: false
        }
    ]
}

shelf.requestFocus();
stage;