import Qt 4.7

Item {
    id: delegate
    property alias image: image.source
    property alias primaryText: primaryText.text
    property alias details: details.sourceComponent
    property alias buttons: buttons.sourceComponent

    width: delegate.ListView.view.width
    height: buttons.y + buttons.height + 5
    clip: true

    Rectangle {
        id: background
        anchors {
            left: parent.left
            right: parent.right
            top: parent.top
            bottom: parent.bottom
            topMargin: 5
//            bottomMargin: -5
        }

        gradient: Gradient {
            GradientStop {
                position: 0
                color: "#777777"
            }

            GradientStop {
                position: 1
                color: "#222222"
            }
        }
        border { width: 1; color: "#777777" }
        radius: 5
    }

    Image {
        id: image
        x: 10
        y: 4
    }

    BorderImage {
        id: borderImage
        anchors.fill: image
        anchors.margins: -8
        source: "qrc:/res/images/profile_pic_border.png"
        border.left: 24; border.top: 24
        border.right: 24; border.bottom: 24
        horizontalTileMode: BorderImage.Stretch
        verticalTileMode: BorderImage.Stretch
    }

    Text {
        id: primaryText
        anchors { left: image.right; right: background.right; top: background.top; margins: 5; leftMargin: 10 }
        clip: true;
        elide: Text.ElideRight
    }

    Loader {
        id: details
        state: parent.state
        anchors { left: primaryText.left; right: primaryText.right; top: primaryText.bottom }
    }

    Loader {
        id: buttons
        height: 0
        anchors { horizontalCenter: parent.horizontalCenter; top: details.bottom }

    }

    MouseArea {
        anchors.fill: parent
        onClicked: {
            if (delegate.state == 'expanded') {
                delegate.state = ''
                ListView.view.currentIndex =  -1
            } else {
                delegate.state = 'expanded'
                ListView.view.currentIndex = index
            }
        }
    }

    states: [
        State {
            name: "expanded"
            when: delegate.ListView.isCurrentItem
            PropertyChanges {
                target: buttons
                height: buttons.item.childrenRect.height
                explicit: true
            }
        },
        State {
            name: ""
            when: !delegate.ListView.isCurrentItem
            PropertyChanges {
                target: buttons.item
                visible: false
            }
        }
    ]

    transitions: [
        Transition {
            from: ""
            to: "expanded"
//            NumberAnimation { properties: "height"; duration: 100 }
            PropertyAction { target: primaryText; property: "wrapMode"; value: Text.Wrap }
            PropertyAction { target: primaryText; property: "elide"; value: Text.ElideNone }
            PropertyAction { target: buttons.item; property: "visible"; value: true }
            reversible: true
        }
    ]
}