import Qt 4.7

Rectangle {
    id: page
    width: 640; height: 480; color: "#343434"

    // A target region.  Clicking in here sets the state to the default state
    Rectangle {
        id: initialPosition
        anchors { left: parent.left; top: parent.top; leftMargin: 10; topMargin: 20 }
        width: 64; height: 64; radius: 6
        color: "Transparent"; border.color: "Gray"
        MouseArea { anchors.fill: parent; onClicked: page.state = '' }
    }

    // Another target region.  Clicking in here sets the state to 'Position1'
    Rectangle {
        id: position1
        anchors { right: parent.right; verticalCenter: parent.verticalCenter; rightMargin: 20 }
        width: 64; height: 64; radius: 6
        color: "Transparent"; border.color: "Gray"
        MouseArea { anchors.fill: parent; onClicked: page.state = 'Position1' }
    }

    // Another target region.  Clicking in here sets the state to 'Position2'
    Rectangle {
        id: position2
        anchors { left: parent.left; bottom: parent.bottom; leftMargin: 10; bottomMargin: 20 }
        width: 64; height: 64; radius: 6
        color: "Transparent"; border.color: "Gray"
        MouseArea { anchors.fill: parent; onClicked: page.state = 'Position2' }
    }

    // The image which will be moved when my state changes
    Image { id: user; source: "user.png"; x: initialPosition.x; y: initialPosition.y }

    states: [
        // In state 'Position1', change the 'user' item position to rect2's position.
        State {
            name: "Position1"
            PropertyChanges { target: user; x: position1.x; y: position1.y }
        },

        // In state 'Position2', change the 'user' item position to rect3's position.
        State {
            name: "Position2"
            PropertyChanges { target: user; x: position2.x; y: position2.y  }
        }
    ]
}