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;

            }

/*

            print("Got contacts: " + c.name);

            print(" Available actions: " + c.availableActions);

            print(" details: " + c.details);detailsOpacity

*/

            var o = c.values("OnlineAccount");

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

            nameModel.append({"name": c.name, "accountPath": "Account: " + o.AccountPath, "presence": "Status: " + q.Presence, "email": c.email, "avatarSource": "qrc:/default.svg"});

/*

            var j;

            for(j in c.details){                

                var o = c.values(c.details[j]);

                var i;

                for(i in o){

                    print(" "+ c.details[j] + "/" + i + ": " + o[i]);

                }

            }

*/

        }

        function clickedList(index) {

            mainList.currentIndex = index;

        }

    }

    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: 30;

            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 }

             }

            Item {

                id: mainAvatar;

                anchors.left: parent.left;

                anchors.top: parent.top;

                width: avatarFrame.width;

                height: avatarFrame.height;

                anchors.leftMargin:4;

                Rectangle {

                    id: avatarFrame;

                    border.width: 2;

                    radius: 4;

                    height: wrapper.height-6

                    width: height;

                    x: 3; y: 3;

                }

                Image {

                    id: avatar

                    anchors.fill: avatarFrame;

                    anchors.leftMargin: 3;

                    anchors.rightMargin: 3;

                    anchors.topMargin: 3;

                    anchors.bottomMargin: 3;

                    source: avatarSource

                    fillMode: Image.PreserveAspectFit

                }

            }

            Item {

                id: mainLabel;

                height: nameTxt.height + 16;

                property real contactId: 0;

                anchors.left: mainAvatar.right;

                anchors.right: parent.right;

                anchors.leftMargin:8;

                anchors.rightMargin: 4;

                anchors.topMargin: 4;

                anchors.bottomMargin: 4;

                Text {

                    x:8; y:8;

                    anchors.left: parent.left;

                    anchors.right: parent.right;

                    id: nameTxt

                    text: name

                    color: "white";

                }

            }

            Item {

                id: details

                property color textColor: "#ffffdd";

                anchors.top: mainLabel.bottom;

                anchors.bottom: parent.bottom;

                anchors.left: mainAvatar.right;

                anchors.right: parent.right;

                anchors.leftMargin:8;

                anchors.rightMargin: 4;

                anchors.bottomMargin: 4;

                opacity: wrapper.detailsOpacity

                Column {

                    Text {

                        id: emailId

                        text: email

                        color: details.textColor;

                    }

                    Row {

                        spacing: 5

                        Text {

                            id: accountPathId

                            text: accountPath

                            color: details.textColor;

                        }

                        Text {

                            id: presenceId

                            text: presence

                            color: details.textColor;

                        }

                    }

                }

            }

            states: State {

                name: "Details"

                PropertyChanges { target: wrapper; detailsOpacity: 1; }

                PropertyChanges { target: wrapper; topColor: "#666666"; }

                PropertyChanges { target: wrapper; bottomColor: "#222222"; }

                PropertyChanges { target: wrapper; height: mainLabel.height + emailId.height + accountPathId.height + presenceId.height; }

            }

            transitions: Transition {

                from: ""

                to: "Details"

                reversible: true

                ParallelAnimation {

                    ColorAnimation { duration: 150; properties: "topColor, bottomColor";}

                    NumberAnimation { duration: 100; properties: "detailsOpacity,height" }

                }

            }

            MouseArea {

                id: mr

                width: topItem.width;

                height: wrapper.height;

                anchors.centerIn: parent;

                onClicked: wrapper.state == "" ? wrapper.state = "Details" :  wrapper.state = "";

            }

        }

    }

    Component {

        id: listhighlight

        Rectangle {

            width: parent.width-8

            height: 40

            color: "lightsteelblue"

            radius: 5

        }

    }

    ListView {

        id: mainList

        model: nameModel

        width: parent.width; height: parent.height

        delegate: listdelegate

        highlight: listhighlight

        highlightFollowsCurrentItem: true

        focus: true

        anchors.fill: parent

        highlightMoveSpeed: 5000

    }

    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]