import QtQuick 1.0

Rectangle {
    id: slideControl

    clip: true

    property ListModel listModel
    property Component listComponent

    signal slideChanged(int slide)

    property alias currentIndex: myPathView.currentIndex

    PathView {
        id: myPathView

        width: parent.width
        anchors.top: parent.top
        anchors.bottom: parent.bottom

        Keys.onRightPressed: if (!moving && interactive) incrementCurrentIndex()
        Keys.onLeftPressed: if (!moving && interactive) decrementCurrentIndex()

        flickDeceleration: 500;

        onCurrentIndexChanged: slideChanged(currentIndex)

        preferredHighlightBegin: 0.5
        preferredHighlightEnd: 0.5
        focus: true
        interactive: true
        model: listModel
        delegate: listComponent
        path: Path {
            startX: - slideControl.width * listModel.count / 2 + slideControl.width / 2
            startY: slideControl.height / 2
            PathLine {
                x: slideControl.width * listModel.count / 2 + slideControl.width / 2
                y: slideControl.height / 2
            }
        }
    }

    Rectangle {
        id: slideIndicator

        width: parent.width
        height: 27
        anchors.top: parent.top

        Image {
            width: parent.width
            height: slideIndicator.height
            anchors.top: parent.top
            anchors.horizontalCenter: parent.horizontalCenter
            source: "../images/topbar.png"
            smooth: true
        }

        Row {
            anchors.centerIn: parent
            z: 2
            Repeater {
                model: listModel.count
                delegate: Rectangle {
                    width: 16
                    height: slideIndicator.height
                    color: "transparent"
                    Rectangle {
                        anchors.centerIn: parent
                        width: 6; height: 6
                        radius: 3
                        color: (myPathView.currentIndex == index ? "#ffffff" : "#838689")
                        MouseArea {
                            anchors.fill: parent
                            onClicked: myPathView.currentIndex = index
                        }
                    }
                }
            }
        }
        color: "transparent"
    }
}