import QtQuick 2.0
 import QtQuick.Controls 1.4
 import QtQuick.Controls.Styles 1.4
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();
        }
    }

    ProgressBar{
        anchors.top: parent.top
        anchors.right: parent.right
        anchors.margins: container.margins
        /*anchors.bottom: buttons.top
        anchors.left: parent.left
        anchors.right: parent.right
        anchors.leftMargin: 40
        anchors.rightMargin: 40
        anchors.topMargin: 10
        anchors.bottomMargin: 10
        */
        z:99

        value: musicModel.pProgress
        style:ProgressBarStyle {
            background: Rectangle {
                radius: 2
                color: "magenta"
                border.color: "gray"
                border.width: 1
                implicitWidth: 200
                implicitHeight: 24
            }
            progress: Rectangle {
                color: "lightsteelblue"
                border.color: "steelblue"
            }
        }
    }

    Rectangle {
        id: controlPannel

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


        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();
                }
            }
        }
    }
}