import QMLContactManagerAsync 1.0
import QmlContact 1.0
import Qt 4.6

Rectangle {
    id: topItem
    width: 320
    height: 480
    x: 0
    y: 0

    color: "#080808";

    Script {
        function startup() {
            manager.contacts();
        }
        function gotContacts(c) {
            if(c == undefined){
                return;
            }

            var q = c.values("Presence");

            nameModel.append({"name": c.name,
                                "presence": "Status: " + q.Presence,
                                "email": c.email,
                                "avatarSource": c.avatar ? c.avatar : "qrc:/default.svg",
                                "hasThumbnail" : c.hasThumbnail,
                                "avatarImage": c.thumbnail,
                                "interestLabel" : c.interestLabel,
                                "interest" : c.interest});

        }
    }

    Component.onCompleted: startup();

    QMLContactManagerAsync {
        id: "manager"

        manager: "memory"
        onDataChanged: print("Data changed!");
        onContactsAdded: print("Contacts added: " + contactIds);
        onContactsLoaded: gotContacts(contact);
    }

    Component {
        id: listdelegate        
        Rectangle {
            id: wrapper            
            border.width: 2
            height: mainLabel.height;
            width: mainList.width;

            property color topColor: "#333333";
            property color bottomColor: "#111111";
            property real detailsOpacity: 0

            gradient: Gradient {
                 GradientStop { position: 0.0; color: topColor }
                 GradientStop { position: 1.0; color: bottomColor }
            }

            Row {
                spacing: 2
                Item {
                    id: mainAvatar;
                    height: wrapper.height;
                    width: height;

                    Rectangle {
                        border.width: 2;
                        radius: 4;
                        anchors.fill: parent;
                        anchors.margins: 3;

                        Image {
                            id: avatar
                            anchors.fill: parent;
                            anchors.margins: 3;

                            pixmap: avatarImage
                            source: hasThumbnail ? "" : avatarSource;
                            fillMode: Image.PreserveAspectFit
                        }
                    }
                }

                Column {
                    Item {
                        id: mainLabel;
                        width: nameTxt.width
                        height: nameTxt.height + 16;
                        Text {
                            id: nameTxt
                            y: 8;
                            text: name
                            color: "white";
                        }
                    }

                    Item {
                        id: details
                        property color textColor: "#ffffdd";
                        opacity: wrapper.detailsOpacity
                        height: childrenRect.height + 6;
                        width: childrenRect.width;
                        Column {
                            Text {
                                text: interestLabel + interest
                                color: details.textColor;
                            }
                            Text {
                                text: presence
                                color: details.textColor;
                            }
                        }
                    }
                }
            }

            states: State {
                name: "Details"
                when: wrapper.ListView.isCurrentItem;
                PropertyChanges { target: wrapper; detailsOpacity: 1; }
                PropertyChanges { target: wrapper; topColor: "#999999"; }
                PropertyChanges { target: wrapper; bottomColor: "#444444"; }
                PropertyChanges { target: wrapper; height: mainLabel.height + details.height + 4; }
            }

            transitions:  [
                Transition {
                    from: ""
                    to: "Details"
                    reversible: false
                    SequentialAnimation {
                        NumberAnimation { duration: 100; properties: "detailsOpacity,height" }
                        ColorAnimation { duration: 100; properties: "topColor, bottomColor";}
                    }
                },
                Transition {
                    to: ""
                    from: "Details"
                    reversible: false
                    SequentialAnimation {
                        NumberAnimation { duration: 100; properties: "detailsOpacity,height" }
                        ColorAnimation { duration: 100; properties: "topColor, bottomColor";}
                    }
                }
            ]
            MouseArea {
                id: mr
                width: topItem.width;
                height: wrapper.height;
                anchors.centerIn: parent;
                onClicked: mainList.currentIndex = index;
            }
        }
    }

    ListView {
        id: mainList
        model: nameModel
        width: parent.width; height: parent.height
        delegate: listdelegate
        highlightFollowsCurrentItem: false
        focus: true
        anchors.fill: parent
        highlightMoveSpeed: 5000
        keyNavigationWraps: true
    }

    ListModel {
        id: nameModel
    }

    // Attach scrollbar to the right edge of the view.
    ScrollBar {
        id: verticalScrollBar
        opacity: 0
        orientation: "Vertical"
        position: mainList.visibleArea.yPosition
        pageSize: mainList.visibleArea.heightRatio
        width: 20
        height: mainList.height
        anchors.right: mainList.right
        fgColor: "white"
        // Only show the scrollbar when the view is moving.
        states: [
            State {
                name: "ShowBars"; when: mainList.moving
                PropertyChanges { target: verticalScrollBar; opacity: 1 }
            }
        ]
        transitions: [ Transition { NumberAnimation { property: "opacity"; duration: 400 } } ]
    }
}

// ![0]