import QtQuick 2.0
import QtGraphicalEffects 1.0

Item{
    id: container

    property int margins: 20

    Rectangle{
        id: coverBorder
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.top: parent.top
        anchors.topMargin: container.margins
        height: parent.height-controlPannel.height-2*container.margins
        width: height
        color: "blue"
        Image{
            id: cover
            anchors.centerIn: parent
            height: parent.height-10
            width: height
            source: musicModel.pCurrentItem.pImageSource
            fillMode: Image.PreserveAspectCrop
            layer.enabled: true
            layer.effect: OpacityMask{
                maskSource: coverBorder
            }
        }
    }

    RoundButton{
        id: backNavigation
        anchors.left: parent.left
        anchors.top: parent.top
        anchors.margins: container.margins
        onClicked: {
            musicModel.navigateBack();
        }
    }

    Rectangle {
        id: controlPannel

        anchors.left: parent.left
        anchors.right: parent.right
        anchors.bottom: parent.bottom
        color: "#99ffffff"
        height: 140

        MediaProgress{
           id: progress
           anchors.top: parent.top
           anchors.left: parent.left
           anchors.right: parent.right
           anchors.margins: container.margins

           model: musicModel
        }

        Item{
            anchors.left: parent.left
            anchors.right: parent.right
            anchors.top: progress.bottom
            anchors.bottom: parent.bottom
            Row{
                id: buttons
                spacing: 20
                anchors.centerIn: parent

                RoundButton{
                    id: previous
                    anchors.verticalCenter: parent.verticalCenter

                    width: 60
                    imageSource: "qrc:/icon_previous"

                    enabled: musicModel.pHasPrevious

                    onClicked:{
                        musicModel.playPrevious();
                    }
                }
                RoundButton{
                    id: playPause
                    anchors.verticalCenter: parent.verticalCenter
                    width: 80
                    imageSource: musicModel.pIsPlaying ? "qrc:/icon_pause" : "qrc:/icon_play"

                    onClicked:{
                        musicModel.playPause();
                    }
                }
                RoundButton{
                    id: stop
                    anchors.verticalCenter: parent.verticalCenter

                    width: 60
                    imageSource: "qrc:/icon_stop"

                    enabled: musicModel.pIsPlaying

                    onClicked:{
                        musicModel.stopMusic();
                    }
                }
                RoundButton{
                    id: next
                    anchors.verticalCenter: parent.verticalCenter

                    width: 60
                    imageSource: "qrc:/icon_next"

                    enabled: musicModel.pHasNext

                    onClicked:{
                        musicModel.playNext();
                    }
                }
            } //Row
        }// Item
    }
}