import QtQuick 2.0

Rectangle {
    id: backgroundRect
    width: 150
    height: 30
    radius: 0

    property alias image: img.source
    property alias text: text.text
    property alias color: backgroundRect.color
    signal clicked

    color: "red"
    // Pre-compute this to avoid binding color to itself
    property color darkerColor
    Component.onCompleted: {
	    darkerColor = Qt.darker(color)
    }

    z: 2

    Image {
        id: img
        width: height
        anchors.top: parent.top
        anchors.topMargin: 2
        anchors.bottom: parent.bottom
        anchors.bottomMargin: 2
        anchors.left: parent.left
        anchors.leftMargin: 5
        smooth: true
        source: "qrc:/qtquickplugin/images/template_image.png"
    }

    MouseArea {
        id: mouseArea
        anchors.fill: parent
        onClicked: parent.clicked()
    }

    Text {
        id: text
        text: "Button text"
        font.bold: true
        horizontalAlignment: Text.AlignHCenter
        verticalAlignment: Text.AlignVCenter
        anchors.right: parent.right
        anchors.rightMargin: 0
        anchors.left: img.right
        anchors.leftMargin: 5
        anchors.top: parent.top
        anchors.topMargin: 0
        anchors.bottom: parent.bottom
        anchors.bottomMargin: 0
        color: "white"
        font.pixelSize: 12
    }

    states: State {
        name: "pressed"; when: mouseArea.pressed
        PropertyChanges { target: backgroundRect; color: darkerColor }
    }
}