// import QtQuick 1.0 // to target S60 5th Edition or Maemo 5
import QtQuick 1.1
import com.nokia.meego 1.1
import "Constants.js" as Constants

Rectangle {

    property alias list: list
    property alias listModel: list.model
    property alias mouseArea: headerMouseArea
    property alias headerText: headerText
    property alias listContainer: listContainer

    id: rootContainer
    width: parent.width
    height: header.height + listContainer.height
    Rectangle {
        id: header
        height: Constants.appHeaderHeight
        width: parent.width
        color: "lightgrey"

        ToolIcon {
            id: arrow
            iconId: "icon-m-common-drilldown-arrow" + (theme.inverted ? "-inverse" : "")
            anchors.left: header.left
            anchors.verticalCenter: parent.verticalCenter
            anchors.leftMargin: -10
        }
        Text {
            id: headerText
            anchors.left: arrow.right
            anchors.leftMargin: -20
            font.pixelSize: Constants.expandingListViewHeaderSize
            anchors.verticalCenter: parent.verticalCenter
        }
        MouseArea {
            id: headerMouseArea
            anchors.fill: parent
            onClicked: {
                if (list.state == "close") {
                    list.state = "open";
                } else {
                    list.state = "close";
                }
            }
        }
        Rectangle {
            id: listContainer
            width: parent.width
            height: 0
            anchors.top: header.bottom
            ListView {
                id: list
                anchors.fill: parent
                clip: true
                state: "close"
                states: [
                    State {
                        name: "open"
                        PropertyChanges { target: listContainer; height: list.count * Constants.expandingListViewItemHeight > Constants.expandingListViewItemHeight * 5 ? Constants.expandingListViewItemHeight * 5 : list.count * Constants.expandingListViewItemHeight; }
                        PropertyChanges { target: arrow; rotation: 90; }
                    },
                    State {
                        name: "close"
                        PropertyChanges { target: listContainer; height: 0; }
                        PropertyChanges { target: arrow; rotation: 0; }
                    }
                ]
                transitions: [
                    Transition {
                        from: "*"; to: "open"
                        NumberAnimation { properties: "height"; easing.type: Easing.OutBounce; duration: 1000 }
                        NumberAnimation { properties: "rotation"; easing.type: Easing.OutBounce; duration: 1000 }
                    },
                    Transition {
                        from: "*"; to: "close"
                        NumberAnimation { properties: "height"; easing.type: Easing.OutBounce; duration: 1000 }
                        NumberAnimation { properties: "rotation"; easing.type: Easing.OutBounce; duration: 1000 }
                    }
                ]
            }

        }
    }
}