import Qt 4.7

Rectangle {
    id: rectangle1
    radius: 10
    border.color: "#000666";
    property alias value:text1.text
    property alias index: list1.currentIndex
    property alias model: list1.model
    property bool expanded: false
    property bool disabled: false
    property int expandedHeight
    property int basicHeight
    property string startValue
    height: 20

    property variant parentField : rectangle1

    function show(Boolean){
        expanded = Boolean
    }

    function setStartValue(val, idx){
        startValue = val
        list1.currentIndex = idx
    }

    signal valueSelected(string selected);

   Keys.onPressed: {
        if (event.key == Qt.Key_Space)
            rectangle1.expanded=true;
    }

    Text {
        id: text1
        width: rectangle1.width-15
        height: rectangle1.height*0.6;
        text: list1.selected
        anchors.centerIn: parent
        font.pixelSize: rectangle1.height * .5;
        onTextChanged: { rectangle1.valueSelected(text) }
        z: expanded?0:1;
    }

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

    Image {
        id: imageDown
        z:15;
        width: 11;
        height: 0.5 * rectangle1.height;
        anchors.top: parent.top
        anchors.right: parent.right
        anchors.topMargin: 4
        anchors.rightMargin: 6
        anchors.bottomMargin: 4
        source: "qrc:/button/down_enable.png";

        MouseArea{
            id: imgMouseArea
            anchors.fill: parent
            onClicked: {
                rectangle1.show(!rectangle1.expanded)
            }
        }
    }

    MouseArea{
        id: topMouseArea
        z: 5
        anchors.fill: parent
        onClicked: {
            rectangle1.show(!rectangle1.expanded)
        }
    }

    ElementsListView{
        id: list1
        visible: false
        property string selected: rectangle1.startValue

        Keys.onPressed: {

            if ((event.key == Qt.Key_Return || event.key == Qt.Key_Enter) && currentIndex >= 0){
                selectedValue(currentIndex, model.valueOnPosition(currentIndex))
            }
            if (event.key == Qt.Key_Escape){
                rectangle1.show(!rectangle1.expanded)
                event.accepted = true
            }
        }

        function selectedValue(nr, value) {
            currentIndex = nr
            selected = value
            rectangle1.show(false)
        }

        anchors.rightMargin: 5
        anchors.leftMargin: 5
        anchors.bottomMargin: 10
        anchors.topMargin: 10
        anchors.fill: parent

        highlightResizeSpeed: 1000
        delegate: Component{
            id: list1Delegate
            Item {
                width: rectangle1.width
                height: contentText.height

                MouseArea{
                    id: listMouseArea
                    anchors.fill: parent
                    z: 1
                    onClicked: {
                        list1.selectedValue(number, content)
                    }
                    hoverEnabled: true
                    onEntered: {
                        list1.currentIndex = number
                    }
                }

                Row{
                    anchors.fill: parent

                    Text{
                        id: contentText
                        anchors.verticalCenter: parent.verticalCenter
                        anchors.leftMargin: 5
                        elide: Text.ElideRight;
                        text: content
                    }
                }
            }
        }

    }

    states: [
        State {
            name: "basic";
            when: (rectangle1.expanded == false && rectangle1.disabled == false)
            PropertyChanges { target: list1; z: 0; visible: false }
            PropertyChanges { target: text1; z: 0; visible: true }
            PropertyChanges { target: rectangle1; border.width: 1}
            PropertyChanges { target: rectangle1; height: rectangle1.basicHeight}
            PropertyChanges { target: imageDown; height: 0.5 * rectangle1.basicHeight}
            PropertyChanges { target: shadeDisable; visible: false; z:-1}
        },
        State {
            name: "expanded"
            when: (rectangle1.expanded == true && rectangle1.disabled == false)
            PropertyChanges { target: list1; z: 10; visible: true }
            PropertyChanges { target: text1; z: 10; visible: false }
            PropertyChanges { target: rectangle1; border.width: 1}
            PropertyChanges { target: rectangle1; height: rectangle1.expandedHeight}
            PropertyChanges { target: imageDown; height: 0.5 * rectangle1.basicHeight}
            PropertyChanges { target: shadeDisable; visible: false; z: -1}
            PropertyChanges { target: rectangle1; anchors.fill: parentField}
        },
        State {
            name: "disabled";
            when: rectangle1.disabled == true
            PropertyChanges { target: list1; z: 0; visible: false }
            PropertyChanges { target: text1; z: 0; visible: true }
            PropertyChanges { target: rectangle1; border.width: 1}
            PropertyChanges { target: rectangle1; expanded: false}
            PropertyChanges { target: rectangle1; height: rectangle1.basicHeight}
            PropertyChanges { target: imageDown; visible: true}
            PropertyChanges { target: shadeDisable; visible: true; z:10}
        }
    ]

}