import Qt 4.7
import MapPlugin 1.0

Rectangle {
    id: mapRect
    clip: true

    property alias centerLatitude: map.centerLatitude
    property alias centerLongitude: map.centerLongitude
    property alias gpsLocationLatitude: map.gpsLocationLatitude
    property alias gpsLocationLongitude: map.gpsLocationLongitude

    ParallelAnimation {
        id: panAnimation
        running: false
        property alias latitude: animLatitude.to
        property alias longitude: animLongitude.to
        PropertyAnimation {
            id: animLatitude
            target: mapRect
            property: "centerLatitude"
            from: map.centerLatitude
            duration: 500
            easing.type: Easing.InOutCubic
        }
        PropertyAnimation {
            id: animLongitude
            target: mapRect
            property: "centerLongitude"
            from: map.centerLongitude
            duration: 500
            easing.type: Easing.InOutCubic
        }
    }

    function panTo(latitude, longitude) {
        console.log("Map.panTo", latitude, longitude)
        if (!panAnimation.running) {
            panAnimation.latitude = latitude
            panAnimation.longitude = longitude
            panAnimation.running = true
        }
    }

    color: palette.window

    GeoMap {
        id: map
        anchors.fill: parent
        mapType: "StreetMap"
        zoomLevel: 5.0
    }

    Rectangle {
        color: "#222222"
        width: logo.width + 20
        height: logo.height + 20
        x: -10
        y: -10
        radius: 10
        Image {
            id: logo
            source: "qrc:/res/ixonos_logo.png"
            anchors.centerIn: parent
            anchors.horizontalCenterOffset: 3
            anchors.verticalCenterOffset: 5
        }
    }

    MouseArea {
        property int prevMouseX: 0
        property int prevMouseY: 0
        anchors.fill: map
        onPressed: {
            prevMouseX = mouse.x
            prevMouseY = mouse.y;
        }
        onMousePositionChanged: {
            if (mouse.buttons & Qt.LeftButton) {
                var diffX = mouse.x - prevMouseX
                var diffY = mouse.y - prevMouseY
                map.pan(-diffX, -diffY)
                prevMouseX = mouse.x
                prevMouseY = mouse.y
            }
        }
        onClicked: {
            map.onClicked(mouseX, mouseY)
        }
    }

    Keys.onPressed: {
        if (event.key == Qt.Key_F7)
            map.zoomIn()
        else if (event.key == Qt.Key_F8)
            map.zoomOut()
    }

    Image {
        id: sight
        x: parent.width/2 - width/2
        y: parent.height/2 - height/2
        opacity: 1.0
        source: "qrc:/res/sight.png"
    }

    Rectangle {
        id: gpsDistance
        x: 5
        y: parent.height - height - 5
        width: zoomIn.width
        height: zoomIn.height / 2
        radius: 10
        opacity: 1
        color: palette.button
        border.color: palette.highlight
        border.width: 3

        Text {
            anchors.fill: parent
            verticalAlignment: "AlignVCenter"
            horizontalAlignment: "AlignHCenter"
            text: map.distanceToGpsLocationText
            color: palette.text
            font.pixelSize: height / 3
        }
    }

    Rectangle {
        id: gpsLocation
        x: 5
        y: parent.height - height - gpsDistance.height - 10
        width: zoomIn.width
        height: zoomIn.height
        radius: 10
        opacity: 1
        color: palette.button
        border.color: palette.highlight
        border.width: 3

        Image {
            source: "qrc:/res/gps_position.png"
            anchors.verticalCenter: parent.verticalCenter
            anchors.horizontalCenter: parent.horizontalCenter
        }

        Image {
             source: "qrc:/res/gps_position_dir.png"
             anchors.verticalCenter: parent.verticalCenter
             anchors.horizontalCenter: parent.horizontalCenter
             rotation: map.angleToGpsLocation
             opacity: map.distanceToGpsLocation < 1.0 ? 0.0 : 1.0
        }

        MouseArea {
            id: mouseArea3
            anchors.fill: parent
            onClicked: ParallelAnimation {
                PropertyAnimation {
                    target: map
                    property: "centerLatitude"
                    from: map.centerLatitude
                    to: map.gpsLocationLatitude
                    duration: 500
                    easing.type: Easing.InOutCubic
                }
                PropertyAnimation {
                    target: map
                    property: "centerLongitude"
                    from: map.centerLongitude
                    to: map.gpsLocationLongitude
                    duration: 500
                    easing.type: Easing.InOutCubic
                }
            }
        }
        states: [
            State {
                name: "active"
                when: mouseArea3.pressed
                PropertyChanges {
                    target: gpsLocation
                    opacity: 1.0
                }
            }
        ]
    }

    Image {
        id: zoomIn
        x: 5
        y: 33
        opacity: 1.0
        source: "qrc:/res/zoom_in.png"

        MouseArea {
            id: mouseArea1
            anchors.fill: parent
            onClicked: {
               map.zoomIn()
            }
        }

        states: [
            State {
                name: "active"
                when: mouseArea1.pressed
                PropertyChanges {
                    target: zoomIn
                    opacity: 1.0
                }
            }
        ]
    }

    Image {
        id: zoomOut
        x: 5
        y: zoomIn.y + zoomIn.height + 5
        opacity: 1.0
        source: "qrc:/res/zoom_out.png"

        MouseArea {
            id: mouseArea2
            anchors.fill: parent
            onClicked: {
                map.zoomOut()
            }
        }
        states: [
            State {
                name: "active"
                when: mouseArea2.pressed
                PropertyChanges {
                    target: zoomOut
                    opacity: 1.0
                }
            }
        ]
    }
}