import QtQuick 2.5
import fbx.application 1.0

Application {
    color: "black"

    ListModel {
        id: model
        ListElement {
            name: "FreeBox"
            img: "FBXV1.jpg"
        }
        ListElement {
            name: "Freebox V4"
            img: "FBXv4.jpg"
        }
        ListElement {
            name: "Freebox V5"
            img: "FBXv5.jpg"
        }
        ListElement {
            name: "Freebox Crystal"
            img: "FBXCrystal.jpg"
        }
        ListElement {
            name: "Freebox V6"
            img: "FBXV6.jpg"
        }
        ListElement {
            name: "Freebox Mini 4K"
            img: "FBXMini.jpg"
        }
    }

    GridView {
        id: grille
        width: parent.width/2
        height: parent.height/2
        focus: true
        anchors.centerIn: parent
        cellWidth: 90
        cellHeight: 90
        highlight: Rectangle {color : "red"; radius: 3}
        model: model
        delegate: Column{
            Text { text: name; anchors.horizontalCenter: parent.horizontalCenter; color: "white" }
            Image { source: img;  anchors.horizontalCenter: parent.horizontalCenter; width: 50; fillMode: Image.PreserveAspectFit}
        }

        Keys.onPressed: {
            if(event.key === Qt.Key_Return)
            {
                rect.state = "ShowImage"
                rect.focus = true
            }
        }
    }

    Rectangle{
        id: rect
        anchors.centerIn: parent
        color: "black"
        border.color: "white"
        border.width: 2
        state: "HideImage"
        Image{
            id: imgRect
            anchors.centerIn: parent
            width: parent.width - 40
            fillMode: Image.PreserveAspectFit
            source: model.get(grille.currentIndex).img
        }
        states:[
            State{
                name: "ShowImage"
                PropertyChanges {
                    target: rect;
                    width: 800;
                    height: 600;
                }
            },
            State{
                name: "HideImage"
                PropertyChanges {
                    target: rect;
                    width: 0;
                    height: 0;
                }
            }
        ]
        transitions:[
            Transition{
                from: "HideImage"
                to: "ShowImage"
                SequentialAnimation{
                    NumberAnimation { properties: "width, height"; duration: 200; easing.type: Easing.InOutQuad}
                    NumberAnimation { target: imgRect; property: "opacity"; to: 1}
                }
            },
            Transition {
                from: "ShowImage"
                to: "HideImage"
                SequentialAnimation{
                    NumberAnimation { target: imgRect; property: "opacity"; to: 0}
                    NumberAnimation { properties: "width, height"; duration: 200; easing.type: Easing.InOutQuad}
                }
            }
        ]
        Keys.onPressed: {
            if(event.key === Qt.Key_Return)
            {
                rect.state = "HideImage"
                grille.focus = true
            }
        }
    }
}