import Qt 4.7

Rectangle {
    id: rectangle1
    radius: 10
    border.color: "#000666";
    property int maxValue:500;
    property int minValue:0;
    property alias value:text_input1.text

    TextInput {
        id: text_input1
        x: 1
        width: rectangle1.width-15
        height: rectangle1.height*0.6;
        text: "0"
        anchors.centerIn: parent
        validator: IntValidator{bottom: 0; top: 500;}
        transformOrigin: Item.Left
        selectByMouse: true;
        font.pixelSize: rectangle1.height * .5;
        onCursorPositionChanged:  moveCursorSelection(cursorPosition);
        focus: rectangle1.focus;
 /*       Keys.onPressed: {
            if ((event.key == Qt.Key_Enter) || (event.key == Qt.Key_Return))
                rectangle1.enterPressed(text_input1.text)
        }
*/
    }

    Rectangle {
        id: shadeDisable
        anchors.centerIn: parent;
        radius: parent.radius
        color: "grey";
        opacity: 0
        width:  parent.width;
        height: parent.height;
    }

    Image {
        id: imageUp
        z:4;
        anchors.right: parent.right
        anchors.top: parent.top
        anchors.rightMargin: 2
        anchors.topMargin: 2
        width: 11;
        height: 6;

        source: "qrc:/button/up_enable.png";
    }

    Image {
        id: imageDown
        z:4;
        width: 11;
        height: 6;
        anchors.right: parent.right
        anchors.bottom: parent.bottom
        anchors.rightMargin: 2
        anchors.bottomMargin: 2
        source: "qrc:/button/down_enable.png";
    }

    MouseArea {
        id: mouseAreaUp
        anchors.right: parent.right
        anchors.top: parent.top
        anchors.rightMargin: 2
        anchors.topMargin: 2
        width: 11;
        height: rectangle1/2;
        onClicked: {
            console.log("t1");
            //rectangle.clicked();
        }
    }

    MouseArea {
        id: mouseAreaDown
        anchors.right: parent.right
        anchors.top: parent.top
        anchors.rightMargin: 2
        anchors.topMargin: 2
        width: 11;
        height: rectangle1/2;
        onClicked: {
            console.log("t2");
            //rectangle.clicked();
        }

    }

    states: [
        State {
            name: "DisableState"; when: rectangle1.enabled==false;
            PropertyChanges { target: shadeDisable; z: 3; opacity: 0.5 }
        }
    ]
}