/****************************************************************************

**

** Copyright (C) 2010 Nokia Corporation and/or its subsidiary(-ies).

** All rights reserved.

** Contact: Nokia Corporation (qt-info@nokia.com)

**

** This file is part of the Qt Mobility Components.

**

** $QT_BEGIN_LICENSE:BSD$

** You may use this file under the terms of the BSD license as follows:

**

** "Redistribution and use in source and binary forms, with or without

** modification, are permitted provided that the following conditions are

** met:

**   * Redistributions of source code must retain the above copyright

**     notice, this list of conditions and the following disclaimer.

**   * Redistributions in binary form must reproduce the above copyright

**     notice, this list of conditions and the following disclaimer in

**     the documentation and/or other materials provided with the

**     distribution.

**   * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor

**     the names of its contributors may be used to endorse or promote

**     products derived from this software without specific prior written

**     permission.

**

** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS

** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT

** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR

** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT

** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,

** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT

** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,

** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY

** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT

** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE

** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."

** $QT_END_LICENSE$

**

****************************************************************************/

import QmlContactModel 1.0

import "contents"

    width: 360

    height: 640

    QmlContactModel {

        id: "myModel"

            height: 36;

            property color topColor: "#999999";

            property color bottomColor: "#444444";

            property real detailsOpacity: 1

            property int littleDetailsMode: 0;

            property int bigDetailsMode: 0;

            MouseArea {

                id: mr

                width: topItem.width;

                height: wrapper.height;

                anchors.centerIn: parent;

                onClicked: { littleDetailsMode = !littleDetailsMode; mainList.currentIndex = index; }

            }

                        anchors.margins: 2;

                            anchors.margins: 2;

                            pixmap: model.decoration

                            source: model.avatar;

                            text: display

                            color: "white"

                                text: model.interestLabel + ": " + model.interest

                                text: model.presenceAvailable ? model.presenceText + " [" + model.presenceMessage + "]" : " ";

                Item {

                    id: "buttonBox"

                    x: wrapper.width - 6 - childrenRect.width;

                    y: 4;

                    height:childrenRect.height

                    opacity: details.opacity;

                    Column {

                        // Buttons

                        MediaButton {

                            id: dialButton;

                            text: "Dial";

                        }

                        MediaButton {

                            id: textButton

                            text: "Send Text";

                        }

                        Item {

                            height:childrenRect.height

                            width: childrenRect.width

                            MediaButton {

                                id: viewButton

                                text: "More..."

                                opacity: 0;

                                onClicked: wrapper.bigDetailsMode = 1;

                            }

                            MediaButton {

                                id: smallAgainButton

                                text: "Back";

                                anchors.top:viewButton.top;

                                opacity: 0;

                                onClicked: wrapper.bigDetailsMode = 0;

                            }

                        }

                    }

                }

            states: [

                    State {

                        name: "List";

                        when: mainList.currentIndex != index || wrapper.littleDetailsMode == 0

                        PropertyChanges { target: wrapper; detailsOpacity: 0; }

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

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

                        PropertyChanges { target: buttonBox; x: wrapper.width + 6; }

                    },

                    State {

                        name: "MiniDetails"

                        when: (mainList.currentIndex == index) && (wrapper.littleDetailsMode == 1) && (wrapper.bigDetailsMode == 0);

                        PropertyChanges { target: viewButton; opacity: 1; }

                        PropertyChanges { target: smallAgainButton; opacity: 0; }

                        PropertyChanges { target: wrapper; height: Math.max(mainLabel.height + details.height + 4, buttonBox.height + 8); }

                        PropertyChanges { target: mainList; explicit: true; contentY: wrapper.y } // XXX I don't think this should be here

                    },

                    State {

                        name: "Details"

                        when: (mainList.currentIndex == index) && (wrapper.bigDetailsMode == 1);

                        PropertyChanges { target: wrapper; height: mainList.height; }

                        PropertyChanges { target: viewButton; opacity: 0; }

                        PropertyChanges { target: smallAgainButton; opacity: 1; }

                        PropertyChanges { target: mainAvatar; height: 96; }

                        PropertyChanges { target: mainList; explicit: true; contentY: wrapper.y }

                        PropertyChanges { target: mainList; interactive: false; }

                    }

            ]

                    from: "List"

                    to: "MiniDetails"

                        ParallelAnimation {

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

                            NumberAnimation { duration: 150; properties: "x"; }

                        }

                    }

                },

                Transition {

                    from: "MiniDetails"

                    to: "Details"

                    reversible: false

                    ParallelAnimation {

                        NumberAnimation { duration: 250; properties: "contentY,opacity"; }

                        SequentialAnimation {

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

                            ParallelAnimation {

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

                                NumberAnimation { duration: 150; properties: "x"; }

                            }

                        }

                    to: "MiniDetails"

                    reversible: false

                    ParallelAnimation {

                        NumberAnimation { duration: 250; properties: "contentY,opacity"; }

                        SequentialAnimation {

                            ParallelAnimation {

                                NumberAnimation { duration: 150; properties: "x"; }

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

                            }

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

                        }

                    }

                },

                Transition {

                    from: "MiniDetails"

                    to: "List"

                        NumberAnimation { duration: 100; properties: "x"; }

                        ParallelAnimation{

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

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

                        }

        model: myModel