import QtQuick 2.0
import Ubuntu.Components 0.1

MainView {
    width: units.gu(100)
    height: units.gu(75)

    Page {
        id: mpage
        title: i18n.tr("BoxInABand")

        Column {
            id: mpane
            x: 0
            y: 0

            anchors {
                fill: parent
            }

            spacing:  units.gu(1)


            Item {

                anchors.centerIn: parent

                 Action {
                     id: play
                     text: "Play!"
                     onTriggered: mpane.state = "playing"

                 }
                 Button {
                     anchors.centerIn: parent
                     action: play
                 }
            }



            states: [
                State {
                    name: "playing"
                    PropertyChanges {
                        target: playPane
                        smooth: false
                        x: 0
                        y: 0
                        color: "orange"


                    }
                }
            ]




        }
        Rectangle {
            id: playPane
            color: "black"
            width: mpage.width
            height: mpage.height
            x: mpage.width
            y: 0
            border.color: "white"
            border.width: 5
            radius: 20
            smooth: true
            opacity: 0.8

            transitions: Transition {
                ParallelAnimation {
                    NumberAnimation { properties: x,y; duration: 500; easing.type: Easing.InOutQuad }
                    ColorAnimation { duration: 500 }
                     }

            }
            Item {

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

                 Action {
                     id: closePlay
                     text: "Close Player"
                     onTriggered: mpane.state = ""

                 }
                 Button {
                     anchors.centerIn: parent
                     action: closePlay
                 }
            }
        }
    }
}