import Qt 4.7

BorderImage {
    id: button
    property alias textInButton: buttonText.text
    signal clicked
    opacity: 1

    function setText(string) { textInButton = string; }
    border { left: 10; top: 10; right: 10; bottom: 10 }

    MouseArea {
        id: mouseArea
        anchors.centerIn: parent;
        width:  parent.width;
        height: parent.height;
        onClicked: {
            button.clicked();
        }
    }

    Text {
        z:1
        id: buttonText
        anchors.centerIn: parent;
        font.pixelSize: parent.height * .5
        style: Text.Sunken; color: "white"; styleColor: "black"; smooth: true
    }

    Image {
        id: image1
        width: (35*parent.height)/107 +1
        height: parent.height
        anchors.left: parent.left
        source: "qrc:/button/buttonLeft.png"
        fillMode:Image.Stretch
    }

    Image {
        id: image3
        smooth: true
        width: parent.width - ((70*parent.height)/107) +1;
        height: parent.height
        anchors.horizontalCenter: parent.horizontalCenter
        source: "qrc:/button/buttonCenter.png"
        fillMode:Image.Stretch
    }

    Image {
        id: image2
        smooth: true
        width: (35*parent.height)/107 +1
        height: parent.height
        anchors.right: parent.right
        source: "qrc:/button/buttonR.png"
        fillMode:Image.Stretch
    }

    states: [
        State {
            name: "pressed";
            when: (mouseArea.pressed == true && button.enabled == true);

            PropertyChanges { target: image1; source: "qrc:/button/buttonLeftPushed.png" }
            PropertyChanges { target: image3; source: "qrc:/button/buttonCenterPushed.png" }
            PropertyChanges { target: image2; source: "qrc:/button/buttonRightPushed.png" }
        },
        State {
            name: "disabled";
            when: (button.enabled == false);

            PropertyChanges { target: image1; source: "qrc:/button/buttonLeftDisabled.png" }
            PropertyChanges { target: image3; source: "qrc:/button/buttonCenterDisabled.png" }
            PropertyChanges { target: image2; source: "qrc:/button/buttonRightDisabled.png" }
        }
    ]



/*    MouseArea {
        id: mouseArea
        anchors.centerIn: parent;
        width:  ((parent.width > buttonText.text.length*buttonText.font.pixelSize*.8) ? (parent.width) : (buttonText.text.length*buttonText.font.pixelSize*.60)) - ((70*parent.height)/107)
        height: parent.height
        onClicked: {
            button.clicked();
        }
    }

    Text {
        z:1
        id: buttonText
        anchors.centerIn: parent;
        font.pixelSize: parent.height * .5
        style: Text.Sunken; color: "white"; styleColor: "black"; smooth: true
        PropertyChanges {
            target: button;
            width: (button.width> buttonText.text.length*buttonText.font.pixelSize*.8) ? (parent.width) : (buttonText.text.length*buttonText.font.pixelSize*.8)
        }
    }

    Rectangle {
        id: shade
        anchors.centerIn: parent;
        radius: parent.height*.4;
        color: "black";
        opacity: 0
        width:  ((parent.width > buttonText.text.length*buttonText.font.pixelSize*.8) ? (parent.width) : (buttonText.text.length*buttonText.font.pixelSize*.60))
        height: parent.height
    }

    Image {
        id: image1
        width: (35*parent.height)/107 +1
        height: parent.height
        anchors.left: parent.left
        anchors.leftMargin: (parent.width - ((parent.width > buttonText.text.length*buttonText.font.pixelSize*.8) ? (parent.width) : (buttonText.text.length*buttonText.font.pixelSize*.60)))/2
        source: "qrc:/button/buttonLeft.png"
    }

    Image {
        id: image3
        smooth: true
        width: (((parent.width > buttonText.text.length*buttonText.font.pixelSize*.8) ? (parent.width) : (buttonText.text.length*buttonText.font.pixelSize*.60)) - ((70*parent.height)/107))+1
        height: parent.height
        anchors.horizontalCenter: parent.horizontalCenter
        source: "qrc:/button/buttonCenter.png"
    }

    Image {
        id: image2
        smooth: true
        width: (35*parent.height)/107 +1
        height: parent.height
        anchors.right: parent.right
        anchors.rightMargin: (parent.width - ((parent.width > buttonText.text.length*buttonText.font.pixelSize*.8) ? (parent.width) : (buttonText.text.length*buttonText.font.pixelSize*.60)))/2
        source: "qrc:/button/buttonR.png"
    }

    states: [
        State {
            name: "pressed"; when: mouseArea.pressed == true
            PropertyChanges { target: shade; opacity: 0.4 }
            PropertyChanges { target: image1; opacity: 0.5 }
            PropertyChanges { target: image3; opacity: 0.5 }
            PropertyChanges { target: image2; opacity: 0.5 }
        }
    ]
    */
}