import QtQuick 2.5
import fbx.application 1.0

Application {
    color: "pink"
    Rectangle {
        id: rect
        focus: true
        anchors.bottom: parent.bottom
        anchors.left: parent.left
        anchors.bottomMargin: 10
        anchors.leftMargin: 10
        color: "black"
        border.color: "white"
        border.width: 2
        state: "hidemessage"

        Text{
            id: text
            text: "Bonjour aux lecteurs d'Univers Freebox !\nComment allez vous ?"
            color: "white"
            font.pixelSize: 20
            anchors.top: parent.top
            anchors.left: parent.left
            anchors.topMargin: 3
            anchors.leftMargin: 6
            wrapMode: Text.WordWrap
            height: parent.height
            width: parent.width
            opacity: 0
        }

        states:[
            State{
                name: "showmessage"
                PropertyChanges {
                    target: rect;
                    width: 500;
                    height: 250;
                }
            },
            State{
                name: "hidemessage"
                PropertyChanges {
                    target: rect;
                    width: 0;
                    height: 0;
                }
            }
        ]

        transitions:[
            Transition{
                from: "hidemessage"
                to: "showmessage"
                SequentialAnimation{
                    NumberAnimation { properties: "width, height"; duration: 200; easing.type: Easing.InOutQuad}
                    NumberAnimation { target: text; property: "opacity"; to: 1}
                }
            },
            Transition {
                from: "showmessage"
                to: "hidemessage"
                SequentialAnimation{
                    NumberAnimation { target: text; property: "opacity"; to: 0}
                    NumberAnimation { properties: "width, height"; duration: 200; easing.type: Easing.InOutQuad}
                }
            }
        ]

        Keys.onPressed: {
            if(event.key == Qt.Key_Left)
            {
                rect.state = "showmessage"
            }
            else if(event.key == Qt.Key_Right)
            {
                rect.state = "hidemessage"
            }
        }
    }
}