import QtQuick 1.0

Rectangle {
    id: wholeScreen
    width: 400
    height: 300
//    color: "lightyellow"
    property bool elementIsDown: false

    ListModel {
        id: someModel
        ListElement { }
        ListElement { }
        ListElement { }
        ListElement { }
        ListElement { }
    }

    function calcXFromIndex(index) {
        var effectiveIndex = index
        if ((index > 2) && elementIsDown) {
            effectiveIndex -= 1
        }

        return effectiveIndex * 60

    }

    Rectangle {
        id: row
        anchors.top: parent.top
        anchors.left: parent.left
        anchors.right: anchors.right
        height: 100
        color: "white"
        Repeater {
            id: rep
            model:  someModel
            Rectangle {
                width: 40
                height: 40
                x: calcXFromIndex(index)
                Text {
                    id: t
                    anchors.fill: parent
                    text: x.toString()
                }
                onXChanged: {
                    //                    if (index == 3) {
                    console.log("x changed to " + x)
                    t.text = index + ": " + x
                    //                    }
                }

                color: "red"
                Behavior on x { SpringAnimation { spring: 4; damping: 0.4 } }
                Behavior on y { SpringAnimation { spring: 4; damping: 0.4 } }
            }
        }
    }

    Rectangle {
        id: rectMove
        anchors.top: row.bottom
        anchors.bottom: parent.bottom
        anchors.left: parent.left
        anchors.right: parent.horizontalCenter
        anchors.topMargin: 60
        color: "blue"

        MouseArea {
            anchors.fill: parent
            onClicked: {
                var targetElement = row.children[2]
                if (!elementIsDown) {
                    targetElement.y += 50
                } else {
                    targetElement.y -= 50
                }

                elementIsDown = !elementIsDown
            }
        }
    }

    Rectangle {
        anchors.top: rectMove.top
        anchors.bottom: rectMove.bottom
        anchors.left: rectMove.right
        anchors.right: parent.right
        color: "red"

        MouseArea {
            anchors.fill: parent
            onClicked: {
                someModel.insert (3, {})
            }
        }
    }
}