<%@ jet package="cruise.ui.jfx.templates.impl" 
imports="java.util.* cruise.model.abstractObjects.BackingObject cruise.umple.compiler.* cruise.ui.jfx.* "
class="PopUp" skeleton="../jfx.skeleton" %>
<% String preffix=JFXProvider.properties.getProperty(cruise.model.Constants.PACKAGE_PREFIX);%>
package main;
import javafx.stage.StageStyle.TRANSPARENT;
import javafx.scene.Cursor;
import javafx.scene.Node;
import javafx.scene.layout.Resizable;
import javafx.scene.paint.Color;
import javafx.scene.paint.Paint;
import javafx.scene.shape.Rectangle;
import javafx.stage.AppletStageExtension;
import javafx.stage.Stage;
import javafx.scene.Group;
import javafx.scene.Scene;
import <%=preffix%>.components.Button;
import javafx.scene.paint.LinearGradient;
import javafx.scene.paint.Stop;

public class PopUp {

    public var size = 12.0;
    public var onClose: function();
    var applet = __PROFILE__ == "browser";
    def mobile = __PROFILE__ == "mobile";
    def show: Boolean = bind not mobile and not stage.fullScreen;
    def border: Number = bind if (show) size / 4 else 0;
    def draggable = applet and AppletStageExtension.appletDragSupported;
    public var header: Node;
    def width: Number = bind stage.scene.width - border - border on replace {
                def panel = content as Resizable;
                panel.width = width
            }
    def offset = 27;//bind max(size, label.height) + size / 2;
    def height: Number = bind stage.scene.height - border - border - offset on replace {
                def panel = content as Resizable;
                panel.height = height
            }
    public var foreground: Paint = Color.WHITE;
    public var background:Paint=LinearGradient {
			        endY: 0
			        stops: [
			            Stop {offset: 0 color: Color.rgb(0, 0, 0, 0.8)}
			            Stop {offset: 1 color: Color.rgb(255, 127, 0, 0.8)}
			        ]
}
    public var content: Node;
    public var title: String;
    public def stage: Stage = Stage {
                onClose: bind onClose
                style: TRANSPARENT
                title: "Clamors"
                visible: true
                scene: Scene {
                    width: 650
                    height: 510
                    content: [Rectangle {
                            width: bind stage.scene.width
                            height: bind stage.scene.height
                            arcWidth: bind 15
                            arcHeight: bind 15
                            fill: bind background
                        } Rectangle {
                            visible: bind show and (not applet or draggable)
                            x: bind border
                            y: bind border
                            width: bind width
                            height: bind offset
                            arcWidth: bind size
                            arcHeight: bind size
                            fill: bind foreground
                            opacity: 0.1
                        }
                        Group {
                            cursor: Cursor.HAND
                            blocksMouse: true
                            visible: bind not applet
                            translateX: bind stage.scene.width - border
                            translateY: bind border + size * 0.75
                            content: [
                                Button {
                                    foreground: foreground
                                    background: background
                                    rotate: 45
                                    translateX: bind -16 * 0.75
                                    translateY: 5
                                    onMouseClicked: function (event) {
                                        stage.close()
                                    }
                                }
                            ]
                        }
                        Group {
                            translateX: bind border + size / 4
                            translateY: bind border + size / 4
                            content: bind header
                        }
                        Group {
                            blocksMouse: true
                            translateX: bind border
                            translateY: bind border + offset
                            content: bind content
                        }
                    ]
                }
            }
}