import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Controls 2.4

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Das Schmalter")

    Page {
        id: app
        state: "off"
        anchors.fill: parent

        Button {
            id: onOffBt

            width: 400
            height: width
            anchors.centerIn: parent

            background: Item {
                id: lamp
                Image {
                    id: lampOn0
                    source: "on0.png"
                    anchors.fill: parent
                    scale: 0
                }
                Image {
                    id: lampOn1
                    source: "on1.png"
                    anchors.fill: parent
                    scale: 0
                    Behavior on scale {
                        SequentialAnimation {
                            PauseAnimation {
                                duration: 200
                            }
                            NumberAnimation {
                                duration: 200
                                properties: "scale"
                                from: app.state === "on" ? 0:1
                                to: app.state === "on" ? 1:0
                                target: lampOn1
                            }
                        }
                    }
                }
                Image {
                    id: lampOn2
                    source: "on2.png"
                    anchors.fill: parent
                    scale: 0
                    Behavior on scale {
                        SequentialAnimation {
                            PauseAnimation {
                                duration: 400
                            }
                            NumberAnimation {
                                duration: 200
                                properties: "scale"
                                from: app.state === "on" ? 0:1
                                to: app.state === "on" ? 1:0
                                target: lampOn2
                            }
                        }
                    }
                }
                Image {
                    id: lampOn3
                    source: "on3.png"
                    anchors.fill: parent
                    scale: 0
                    Behavior on scale {
                        SequentialAnimation {
                            PauseAnimation {
                                duration: 600
                            }
                            NumberAnimation {
                                duration: 200
                                properties: "scale"
                                from: app.state === "on" ? 0:1
                                to: app.state === "on" ? 1:0
                                target: lampOn3
                            }
                        }
                    }
                }
                Image {
                    id: lampOn4
                    source: "on4.png"
                    anchors.fill: parent
                    scale: 0
                    Behavior on scale {
                        SequentialAnimation {
                            PauseAnimation {
                                duration: 800
                            }
                            NumberAnimation {
                                duration: 200
                                properties: "scale"
                                from: app.state === "on" ? 0:1
                                to: app.state === "on" ? 1:0
                                target: lampOn4
                            }
                        }
                    }
                }
                Image {
                    id: lampOn5
                    source: "on5.png"
                    anchors.fill: parent
                    scale: 0
                    Behavior on scale {
                        SequentialAnimation {
                            PauseAnimation {
                                duration: 1000
                            }
                            NumberAnimation {
                                duration: 200
                                properties: "scale"
                                from: app.state === "on" ? 0:1
                                to: app.state === "on" ? 1:0
                                target: lampOn5
                            }
                        }
                    }
                }
                Image {
                    id: lampOff
                    source: "off.png"
                    anchors.fill: parent
                    scale: 1
                }
            }
            onClicked: {
                if (app.state === "on") {
                    app.state = "off"
                } else {
                    app.state = "on"
                }
            }
        }

        states: [
            State {
                name: "on"
                PropertyChanges {
                    target: lampOn0
                    scale: 1
                }
                PropertyChanges {
                    target: lampOn1
                    scale: 1
                }
                PropertyChanges {
                    target: lampOn2
                    scale: 1
                }
                PropertyChanges {
                    target: lampOn3
                    scale: 1
                }
                PropertyChanges {
                    target: lampOn4
                    scale: 1
                }
                PropertyChanges {
                    target: lampOn5
                    scale: 1
                }
                PropertyChanges {
                    target: lampOff
                    scale: 0
                }
            },
            State {
                name: "off"
            }
        ]
    }
}