import QtQuick 1.0

Item {
    width: 600
    height: 600
    property int itemWidth: 50


    ListView {
        id: view
        model: new Array(1,2,3,4,5,6,7,8)
        delegate: item
        anchors {
            top: parent.top;
            topMargin: 10;
            horizontalCenter:
            parent.horizontalCenter;
            bottom:
            parent.bottom;
        }
        width: model.length * itemWidth + (model.length - 1) * spacing
        spacing: 2
        orientation: Qt.Horizontal
        snapMode: ListView.SnapOneItem
        highlightRangeMode: ListView.ApplyRange
        interactive: false
        Component.onCompleted: currentIndex = -1;
        onWidthChanged: {
            console.log("view width changed to " + width)
        }
    }


    Component {
        id: item

        Rectangle {
            width: itemWidth
            height: 50
            color: "red"
            x: {
                if (ListView.isCurrentItem) {
                    if (view.flickingHorizontally) {
                        (view.width/2) - (width/2)
                    } else {
                        (view.width/2)-(width/2)
                    }
                } else {
                    if ( view.currentIndex==-1) {
                        index * (width + view.spacing)
                    } else {
                        if ( index < view.currentIndex) {
                            index * (width + view.spacing) + (width/2)
                        } else {
                            index * (width + view.spacing) - (width/2) - view.spacing
                        }
                    }
                }
            }
            y: ListView.isCurrentItem ? 200 : 0
            Behavior on x { SpringAnimation { spring: 4; damping: 0.4 } }
            Behavior on y { SpringAnimation { spring: 4; damping: 0.4 } }

            Text {
                id: t
                text: x
            }
            onXChanged: {
                t.text = x
            }

            MouseArea {
                anchors.fill: parent
                onClicked: {
                    if (!ListView.isCurrentItem)
                        view.currentIndex = index;
                    else
                        view.currentIndex = -1;
                }
            }
        }
    }
}