import QtQuick 1.0

Rectangle {
    id: rectangle5
    width: 500
    height: 500

    ListModel {
        id: myModel;
        ListElement { artist: "foo 1"; duration: 7.36 }
        ListElement { artist: "foo 2"; duration: 4.45 }
        ListElement { artist: "foo 3"; duration: 6.64 }
        ListElement { artist: "foo 4"; duration: 1.24 }
        ListElement { artist: "foo 5"; duration: 3.32 }
        ListElement { artist: "foo 6"; duration: 9.51 }
        ListElement { artist: "foo 1"; duration: 7.36 }
        ListElement { artist: "foo 2"; duration: 4.45 }
        ListElement { artist: "foo 3"; duration: 6.64 }
        ListElement { artist: "foo 4"; duration: 1.24 }
        ListElement { artist: "foo 5"; duration: 3.32 }
        ListElement { artist: "foo 6"; duration: 9.51 }
    }

    VisualDataModel {
        id: visualModel
        model: myModel
        delegate: Component {
            Rectangle {
                id: rectangle1
                x: 100
                y: 0
                width: 218
                height: 34
                gradient: Gradient {
                    GradientStop {
                        position: 0
                        color: "#2eaf2c"
                    }

                    GradientStop {
                        position: 1
                        color: "#000000"
                    }
                }
                border.color: "#000000"
                Text { anchors.centerIn: parent; text: "Artist: " + artist + " duration: " + duration }

                MouseArea {
                    anchors.fill:  parent
                    onClicked: list_view1.currentIndex = index
                }
            }
        }
    }

    Component {
        id: highlight
        Rectangle {
            width: 1280; height: 40
            color: "lightsteelblue"; radius: 5
            opacity: 1.0
            SpringAnimation on y {
                to: list_view1.currentItem.y
                spring:  3
                damping: 0.2
            }
        }
    }

    ListView {
        id: list_view1
        x: 29
        y: 124
        width: 439
        height: 253
        clip: true
        model: visualModel
        highlight: highlight
        highlightFollowsCurrentItem: true
    }
}