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
        }

        PlayerButtons{
            id: buttons
            anchors.left: parent.left
            anchors.right: parent.right
            anchors.top: progress.bottom
            anchors.bottom: parent.bottom

            model: musicModel
            spacing: 20
        }
    }
}