import QtQuick 2.5
import QtQuick.Controls 1.4
//import Qt.labs.controls 1.0
import QtQuick.Controls 2.0
import QtQuick.Controls.Styles 1.3
import QtGraphicalEffects 1.0
import ApplicationLauncher 1.0

Button {
    property double buttGreyed: 0.0 //Saturation -1.0 greyed ... 0.0 colored
    property int imgBorder: 20 // in percent of parent.height defaults to 20%
    property string menuQML // next UI to goto
    property string menuImage // Image name
//    property string menuText // Text to display in Button Box
    property alias menuText: menTXT.text

    signal itemClicked

    width: parent.width
    height: parent.height

    background: Rectangle {
        id: backrectBUTT
        border.width: 0.0
    }

    Rectangle {
        id: buttRECT
        anchors.centerIn: parent
        //border.color: "red"
        //border.width: 2

        width: backrectBUTT.width  - backrectBUTT.width * (parent.imgBorder / 100.0)
        height: backrectBUTT.height - backrectBUTT.height * (parent.imgBorder / 100.0)

        Image {
            id: idIMG
            anchors.centerIn: parent
            anchors.fill: parent
            source: menuImage
            fillMode: Image.PreserveAspectFit
            sourceSize: Qt.size(backrectBUTT.width ,
                                backrectBUTT.height  )

            width: backrectBUTT.width
            height: backrectBUTT.height

            onStatusChanged: {
                if (status == Image.Ready) {
                    console.log(menuImage + '---' + backrectBUTT.width + '  ' + backrectBUTT.height + '==' + paintedWidth + '  ' + paintedHeight);
                }
            }

            Item {
                anchors.centerIn: parent
                width: idIMG.paintedWidth
                height: idIMG.paintedHeight

                Text {
                    id: menTXT
                    anchors.bottom: parent.bottom
                    anchors.bottomMargin: 3
                    x: 2
                    width: parent.width - 2 * x
                    color: "white"
                    font.pixelSize: (parent.height * 0.21) / 2
                    wrapMode: Text.WordWrap
                    text: menuText

                }
            }
        }

        HueSaturation {
            id: idSaturation
            anchors.fill: idIMG
            source: idIMG
            hue: 0.0
            saturation: buttGreyed
            lightness: 0.0
        }
    }

    onClicked: {
        sysinfo.beep();
        itemClicked();
    }
}