//import QtQuick 1.1
import Qt 4.7

Rectangle {
    id: root
    width: 360
    height: 300
    color: "pink"

    ListModel {
        id: defaultModel
    }

    ListModel {
        id: colorModel
        ListElement { value: "0_Black" }
        ListElement { value: "1_Blue" }
        ListElement { value: "2_Brown" }
        ListElement { value: "3_Gold" }
        ListElement { value: "4_Green" }
        ListElement { value: "5_Navy" }
        ListElement { value: "6_Orange" }
        ListElement { value: "7_Pink" }
        ListElement { value: "8_Purple" }
        ListElement { value: "9_Red" }
        ListElement { value: "10_White" }
        ListElement { value: "11_Yellow" }
    }

    Component.onCompleted: {
        for (var i = 0; i < 30; i++) {
            defaultModel.append({"value" : i});
        }
        pView.currentIndex = 2;
        lView.currentIndex = 2;
        pView2.currentIndex = 2;
    }

    PathView {
        id: pView

        model: defaultModel
        preferredHighlightBegin: (height / 2) / (40 * pView.count)
        preferredHighlightEnd: preferredHighlightBegin
        highlightRangeMode: PathView.StrictlyEnforceRange
        clip: true
        delegate: defaultDelegate
        highlight: defaultHighlight
        width: 100
        height: root.height - 40
        path: Path {
             startX: 50; startY: 5
             PathLine {
                 x: 50
                 y: 40 * pView.count
             }
        }
    }

    ListView {
        id: lView
        anchors.left: pView.right
        anchors.top:  pView.top

        model: colorModel
        preferredHighlightBegin: Math.floor((height - 40) / 2)
        preferredHighlightEnd: preferredHighlightBegin + 40
        highlightRangeMode: ListView.StrictlyEnforceRange
        clip: true
        delegate: defaultDelegate
        highlight: defaultHighlight
        width: 100
        height: root.height - 40
    }

    PathView {
        id: pView2
        anchors.left: lView.right
        anchors.top:  pView.top

        model: colorModel
        preferredHighlightBegin: (height / 2) / (40 * pView2.count)
        preferredHighlightEnd: preferredHighlightBegin
        highlightRangeMode: PathView.StrictlyEnforceRange
        clip: true
        delegate: defaultDelegate
        highlight: defaultHighlight
        width: 100
        height: root.height - 40
        path: Path {
             startX: 50; startY: 5
             PathLine {
                 x: 50
                 y: 40 * pView2.count
             }
        }
    }

    Rectangle {
        id: rotate
        anchors.bottom: setModel.top
        width: parent.width
        height: 40
        Text { text: "Rotate" }
        MouseArea {
            anchors.fill: parent
            onClicked: {
              if(root.width == 360) {
                    root.width = 640;
                    root.height = 360;
              } else {
                  root.width = 360;
                  root.height = 640;
              }
            }
        }
    }

    Rectangle {
        id: setModel
        anchors.bottom: parent.bottom
        width: parent.width
        height: 40
        Text { text: "Set model" }
        MouseArea {
            anchors.fill: parent
            onClicked: {
                pView2.model = defaultModel;
                lView.model = defaultModel;
//                pView2.currentIndex = 4;
            }
        }
    }

    Component {
        id: defaultDelegate

        Item {
            width: 100
            height: 40
            Text {
                anchors.horizontalCenter: parent.horizontalCenter
                anchors.verticalCenter: parent.verticalCenter
                text: value
                elide: Text.ElideRight
                horizontalAlignment: "AlignHCenter"
            }
        }
    }

    Component {
        id: defaultHighlight

        Rectangle {
            width: 100
            height: 40
            color: "green"
        }
    }
}