import Qt 4.7

Rectangle {
    id: root
    SystemPalette { id: palette }

    color: palette.window

    onHeightChanged: {
        console.log("root height changed, height: " + height + ", width: " + width)
    }

    onStateChanged: {
        console.log("root state changed, state: " + state)
    }

    Map {
        id: map;
        anchors { left: parent.left; right: panel.left; top: parent.top; bottom: parent.bottom }
    }

    Panel {
        id: panel
        x: panelSelectorButtonsBar.x
        anchors.top: parent.top
        width: (parent.width - panelSelectorButtonsBar.width ) / 2
    }

    Rectangle {
        id: panelSelectorButtonsBar
        color: "gray"
        anchors { bottom: parent.bottom; right: parent.right }
        width: root.height / 4
        height: root.height

        onHeightChanged: { console.log("panelSelectorButtonsBar, h:" + height) }
        onWidthChanged: { console.log("panelSelectorButtonsBar, w:" + width) }

        Grid {
            id: panelSelectorButtons
            anchors { fill: parent; leftMargin: 1 }
            spacing: 2
            rows: 4
            columns: 1

            PanelSelectorButton {
                id: profile
                image: "qrc:/res/user_info.png"
                text: "Profile"
                onButtonClicked: { panel.setView("qrc:/ProfileView.qml") }
            }

            PanelSelectorButton {
                id: friends
                image: "qrc:/res/friend_list.png"
                text: "Friends"
                onButtonClicked: { panel.setView("qrc:/FriendsView.qml") }
            }

            PanelSelectorButton {
                id: navigate
                image: "qrc:/res/routing.png"
                text: "Routing"
                onButtonClicked: { panel.setView("qrc:/RoutingView.qml") }
            }

            PanelSelectorButton {
                id: locations
                image: "qrc:/res/location_search.png"
                text: "Locations"
                onButtonClicked: { panel.setView("qrc:/LocationsView.qml") }
            }
        }
    }

    LoginWidget {
        id: loginDialog
    }

    states: [
        State {
            name: "portrait"
            when: height > width
            AnchorChanges {
                target: map
                anchors.right: right
                anchors.bottom: panelSelectorButtonsBar.top
            }
            AnchorChanges {
                target: panel
                anchors.left: root.left
                anchors.right: root.right
            }
            PropertyChanges {
                target: panelSelectorButtonsBar
                width: root.width
                height: root.width / 4
            }
            PropertyChanges {
                target: panelSelectorButtons
                columns: 4
                rows: 1
            }

        }
    ]
    transitions: [
        Transition {
            from: ""
            to: "portrait"
            reversible: true
        }
    ]

}