import QtQuick 2.0

Rectangle {
  id: qmlBrowser

  width: 500
  height: 350

  ListModel {
      id: myModel
      ListElement {
          name: "Bill Jones 1"
      }
      ListElement {
          name: "Jane Doe 2"
      }
      ListElement {
          name: "John Smith 3"
      }
      ListElement {
          name: "Bill Jones 4"
      }
      ListElement {
          name: "Jane Doe 5"
      }
      ListElement {
          name: "John Smith 6"
      }
      ListElement {
          name: "John Smith 7"
      }
      ListElement {
          name: "John Smith 8"
      }
  }

  Component {
    id: delegate

    Text {
        id: nameText
        height: 33
        width: parent.width

        text: "index: " + index + "   text: " + name
        font.pointSize: 16
        color: PathView.isCurrentItem ? "red" : "black"
    }
  }

  PathView {
    id: contentList
    anchors.fill: parent

    property int  maxPathItemCount:      7
    property real itemHeight:            34
    
    delegate:                 delegate
    model:                    myModel
    currentIndex:             5
    pathItemCount:            maxPathItemCount
    highlightMoveDuration:    0

    path: Path {
      startX: 30 + contentList.width / 2; startY: 30
      PathLine { relativeX: 0; relativeY: contentList.itemHeight * contentList.maxPathItemCount }
    }

    focus: true
    Keys.onLeftPressed: decrementCurrentIndex()
    Keys.onRightPressed: incrementCurrentIndex()
  }
}