import QtQuick 2.0
import QtQuick.Controls 1.4
import QtGraphicalEffects 1.0

Rectangle {
    anchors.fill: parent
    color: "blue"

    Image {
        source: 'images/backdrop.jpg'
        anchors.fill: parent
    }

    Rectangle {
        id: logo

        anchors.horizontalCenter: parent.horizontalCenter
        anchors.top: parent.top
        anchors.topMargin: 20

        color: Qt.rgba(1, 1, 1, 0.5)

        width: parent.width
        height: logoImage.height

        Image {
            id: logoImage
            source: 'images/logo.png'
            anchors.horizontalCenter: parent.horizontalCenter
        }
    }

    Column {
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.verticalCenter: parent.verticalCenter
        width: parent.width
        spacing: 10

        Rectangle {
            id: button
            anchors.horizontalCenter: parent.horizontalCenter

            width: parent.width - 50
            height: 50
            radius: 10

            color: "#9e9e9e"

            border.color: "#333333"
            border.width: 2

            layer.enabled: true
            layer.effect: DropShadow {
                transparentBorder: true
                horizontalOffset: 5
                verticalOffset: 5
                radius: 5.0
                samples: 5
            }

            Text {
                text: "New Game"
                font.pointSize: 18
                font.bold: true
                height: 30

                anchors.horizontalCenter: parent.horizontalCenter
                anchors.verticalCenter: parent.verticalCenter
            }

            MouseArea {
                anchors.fill: parent
                onPressed: button.color = "#555555"
                onReleased: button.color = "#9e9e9e"
                onClicked: {
                    appPage.source = "Board.qml"
                }
            }
        }

        Button {
            text: "Quit"
            width: parent.width - 50
            height: 50
            onClicked: Qt.quit()

            anchors.horizontalCenter: parent.horizontalCenter
        }
    }

    Rectangle {
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.bottom: parent.bottom
        anchors.bottomMargin: 20

        color: Qt.rgba(1, 1, 1, 0.5)
        width: parent.width
        height: 20

        Text {
            text: "v" + appVersion
            anchors.verticalCenter: parent.verticalCenter
            anchors.right: parent.right
            anchors.rightMargin: 20
        }
    }
}