/*
    This file is part of Gabriel's Qt/QML CardBoard Sample (or short GQQCS)

    GQQCS is free software: you can redistribute it and/or modify
    it under the terms of the GNU General Public License as published by
    the Free Software Foundation, either version 3 of the License, or
    (at your option) any later version.

    GQQCS is distributed in the hope that it will be useful,
    but WITHOUT ANY WARRANTY; without even the implied warranty of
    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
    GNU General Public License for more details.

    You should have received a copy of the GNU General Public License
    along with Foobar.  If not, see <http://www.gnu.org/licenses/>.

    Updated: 07/08/2015 by: Gabriel F.
*/

import QtQuick 2.4

Item {
    id: root
    anchors.fill: parent
    opacity: 0.0
    visible: false

    property var fadeInEndCallback: function() { console.log("Menu fadeInEndCallback()") }
    property var fadeOutCallback: function() { console.log("Menu fadeOutCallback()") }

    property var nextVideo: b1T

    property double yScroll: 0

    function showDetail() {
        if (nextVideo.nome == "Logo") {

        } else if (nextVideo.nome == "Inicio")  {
            root.hide()
        } else if (nextVideo.nome == "Sobre")  {
            sobre.show()
        } else {
            if (nextVideo.video.length > 0) {
                videoTitle.show()
                videoTitle.titulo = nextVideo.titulo
                detail.videoFile = nextVideo.video
                detail.timerCount = nextVideo.videoCountdown
            }
            nextVideo.zero()
        }
    }

    function fixArrows() {
        arrowFor(b1T,arrowBlue)
        arrowFor(b1B,arrowOrange)
        arrowFor(b2T,arrowGreen)
        arrowFor(b2B,arrowRed)
        arrowFor(b3T,arrowWhite)
        arrowFor(b3B,arrowBlack)
    }

    function arrowFor(target,arrow) {
        var c = cursor.mapToItem(root,0,0)
        var t = target.mapToItem(root,0,0)
        var vX = t.x + target.width*.5 - c.x
        var vY = t.y + target.height*.5 - c.y

        var cA = vY/vX

        var p1x, p1y, p2x, p2y, d1, d2;

        // Vertical line
        p1x = (vX > 0 ? 1 : -1)*leftBlock.width*0.5
        p1y = cA*p1x
        d1 = Math.sqrt(Math.pow(p1x,2)+Math.pow(p1y,2))

        // Horizontal line
        p2y = ((vY > 0 ? 1 : -1)*leftBlock.height*0.5)+(vY > 0 ? 0 : +10)
        p2x = p2y/cA
        d2 = Math.sqrt(Math.pow(p2x,2)+Math.pow(p2y,2))

        if (d1 < d2) {
            arrow.x = p1x*0.9
            arrow.y = p1y*0.9
        } else {
            arrow.x = p2x*0.9
            arrow.y = p2y*0.9
        }
        arrow.opacity = vX < leftBlock.width*0.5 && vX > -leftBlock.width*0.5 && vY < leftBlock.height*0.5 && vY > -leftBlock.height*0.5 ? 0.0 : 1.0
    }

    function testInside(pos,comp) {
        var gComp = comp.mapToItem(root,0,0)
        if (pos.x > gComp.x && pos.y > gComp.y) {
            if (pos.x < gComp.x + comp.width && pos.y < gComp.y + comp.height) {
                if (!cursorTimer.running) {
                    comp.border.width = comp.width*.08
                    nextVideo = comp
                    comp.loading = 0
                    cursorTimer.start()
                }
                return true
            }
            return false
        }
        return false
    }

    Timer {
        id: cursorTimer
        interval: 100
        running: false
        repeat: true
        onTriggered: {
            counter += 100
            nextVideo.loading = counter/5000
            if (counter > 5000) {
                if (!sobre.visible && !videoTitle.visible && !detail.visible) {
                    showDetail()
                }
                cursorTimer.stop()
                counter = 0
            }
        }
        property int counter: 0
    }

    function testCursor() {
        var gCursor = cursor.mapToItem(root, 0, 0)
        if (!useGyro) { gCursor.x = currentTouch.x; gCursor.y = currentTouch.y }
        var majorTest = false
        fixArrows()

        if (useGyro || (!useGyro && currentTouch.t)) {
            if (!testInside(gCursor,b1T))    { b1T.zero()         } else { majorTest = true }
            if (!testInside(gCursor,b1B))    { b1B.zero()         } else { majorTest = true }
            if (!testInside(gCursor,b2T))    { b2T.zero()         } else { majorTest = true }
            if (!testInside(gCursor,b2B))    { b2B.zero()         } else { majorTest = true }
            if (!testInside(gCursor,b3T))    { b3T.zero()         } else { majorTest = true }
            if (!testInside(gCursor,b3B))    { b3B.zero()         } else { majorTest = true }
        }

        if (!majorTest) { nextVideo.zero(); cursorTimer.counter = 0; cursorTimer.stop() }
    }

    function updateMenuPositionGyro() {
            var vX = mainRoot.rotXY.x
            var minX = -(leftImage.width - leftBlock.width)
            if (vX > -20 && vX < 20) {
                if (vX > -1.0 && vX < 1.0) { vX = 0 }
                vX = vX * 1.5
                leftImage.x = leftImage.x + vX > 0 ? 0 : leftImage.x + vX < minX ? minX : leftImage.x + vX
            }

            var pY = mainRoot.rotXY.y
            var minY = -(leftImage.height - leftBlock.height)

            leftImage.y = (1-pY)*minY
            yScroll = pY

            testCursor()
    }

    function getPosImage() {
        return [leftImage.x,leftImage.y]
    }

    function updateMenuPositionTouch() {
        var xDiff = mainRoot.accumTouch.x + mainRoot.accumTouchTemp.x
        var yDiff = mainRoot.accumTouch.y + mainRoot.accumTouchTemp.y
        var minX = -(leftImage.width - leftBlock.width)
        var minY = -(leftImage.height - leftBlock.height)
        leftImage.x = xDiff > 0 ? 0 : xDiff < minX ? minX : xDiff
        leftImage.y = yDiff > 0 ? 0 : yDiff < minY ? minY : yDiff
        if (yDiff > 0 || yDiff < minY) { mainRoot.hitwall() }
        if (xDiff > 0 || xDiff < minX) { mainRoot.hitwall() }
        yScroll = 1 - (-leftImage.y/(leftImage.height - leftBlock.height))
        testCursor()
    }

    NumberAnimation {
        id: fadeIn
        target: root
        property: "opacity"
        duration: 1000
        easing.type: Easing.InOutQuad
        to: 1.0

        onStarted: { root.visible = true }
        onStopped: { fadeInEndCallback() }
    }

    NumberAnimation {
        id: fadeOut
        target: root
        property: "opacity"
        duration: 1000
        easing.type: Easing.InOutQuad
        to: 0.0

        onStopped: {
            root.visible = false
            fadeOutCallback()
        }
    }

    function show() { fadeIn.start() }
    function hide() { fadeOut.start() }

    Item {
        id: masterStereoView
        anchors.fill: parent
        Item {
            id: leftBlock
            clip: true
            width: stereo ? parent.width/2 : parent.width
            height: parent.height
            anchors.verticalCenter: parent.verticalCenter
            anchors.left: parent.left
            rotation: 0
            Image {
                id: leftImage
                width: mainRoot.width*2.5
                height: width*0.5625
                fillMode: Image.PreserveAspectCrop
                source: "qrc:/images/blender_L.jpg"
                x: - (width*0.5 - parent.width*0.5)
                y: - (height*0.5 - parent.height*0.5)
                Item {
                    anchors.fill: parent

                    Rectangle {
                        anchors.centerIn: parent
                        width: parent.width*0.08
                        height: width*0.7
                        color: "#ccffffff"
                        radius: height*0.1
                        Image {
                            id: menuCenterLogo
                            width: parent.width
                            height: width
                            fillMode: Image.PreserveAspectFit
                            anchors.centerIn: parent
                            source: "qrc:/images/logo.svg"
                        }
                    }
                }
            }

            Item {
                id: leftHotspots
                width: leftImage.width
                height: leftImage.height
                x: leftImage.x
                y: leftImage.y

                Item {
                    anchors.fill: parent

                    FloatButton {
                        id: b1T
                        x: parent.width*0.132
                        y: parent.height*0.200
                        imageFile: "qrc:/images/Icon_interrogacao.svg"
                        descricao: localeHelper.getSymbol("Option1Label")
                        video: "templateVideo"
                        nome: "Option1"
                        titulo: localeHelper.getSymbol("Option1Title")
                        videoCountdown: 28
                    }

                    FloatButton {
                        id: b1B
                        x: parent.width*0.132
                        y: parent.height*0.698
                        imageFile: "qrc:/images/Icon_interrogacao.svg"
                        descricao: localeHelper.getSymbol("Option2Label")
                        nome: "Option2"
                        video: "templateVideo"
                        titulo: localeHelper.getSymbol("Option2Title")
                        videoCountdown: 12
                        useTop: true
                    }

                    FloatButton {
                        id: b2T
                        x: parent.width*0.466
                        y: parent.height*0.200
                        imageFile: "qrc:/images/Icon_interrogacao.svg"
                        descricao: localeHelper.getSymbol("Option3Label")
                        nome: "Option3"
                        video: "templateVideo"
                        titulo: localeHelper.getSymbol("Option3Title")
                        videoCountdown: 62
                    }

                    FloatButton {
                        id: b2B
                        x: parent.width*0.466
                        y: parent.height*0.698
                        imageFile: "qrc:/images/Icon_interrogacao.svg"
                        descricao: localeHelper.getSymbol("Option4Label")
                        nome: "Option4"
                        video: "templateVideo"
                        titulo: localeHelper.getSymbol("Option4Title")
                        videoCountdown: 30
                        useTop: true
                    }

                    FloatButton {
                        id: b3T
                        x: parent.width*0.784
                        y: parent.height*0.200
                        imageFile: "qrc:/images/Icon_home.svg"
                        descricao: localeHelper.getSymbol("AboutTitle")
                        nome: "Sobre"
                        video: ""
                    }

                    FloatButton {
                        id: b3B
                        x: parent.width*0.787
                        y: parent.height*0.699
                        imageFile: "qrc:/images/Icon_home.svg"
                        descricao: localeHelper.getSymbol("StartTitle")
                        nome: "Inicio"
                        video: ""
                        useTop: true
                    }
                }
            }

            Rectangle {
                id: cursor
                width: 10
                opacity: 0.7
                height: width
                radius: 5
                color: useGyro ? "white" : "#00000000"
                anchors.centerIn: parent                

                Rectangle { id: arrowBlue;    width: 20; height: 20; radius: 10; color: "steelblue" }
                Rectangle { id: arrowRed;     width: 20; height: 20; radius: 10; color: "red" }
                Rectangle { id: arrowOrange;  width: 20; height: 20; radius: 10; color: "orange" }
                Rectangle { id: arrowBlack;   width: 20; height: 20; radius: 10; color: "black" }
                Rectangle { id: arrowWhite;   width: 20; height: 20; radius: 10; color: "white" }
                Rectangle { id: arrowGreen;   width: 20; height: 20; radius: 10; color: "green" }

            }
        }
        Item {
            id: rightBlock
            visible: stereo
            clip: true
            width: parent.width/2
            height: parent.height
            anchors.verticalCenter: parent.verticalCenter
            anchors.right: parent.right
            rotation: leftBlock.rotation
            Image {
                id: rightImage
                width: leftImage.width
                height: leftImage.height
                fillMode: Image.PreserveAspectCrop
                source: "qrc:/images/blender_R.jpg"
                x: leftImage.x
                y: leftImage.y

                Item {
                    anchors.fill: parent

                    Rectangle {
                        anchors.centerIn: parent
                        width: parent.width*0.08
                        height: width*0.7
                        color: "#ccffffff"
                        radius: height*0.1
                        Image {
                            width: parent.width
                            height: width
                            fillMode: Image.PreserveAspectFit
                            anchors.centerIn: parent
                            source: menuCenterLogo.source
                        }
                    }
                }
            }

            Item {
                id: rightHotspots
                width: rightImage.width
                height: rightImage.height
                x: rightImage.x
                y: rightImage.y

                Item {
                    anchors.fill: parent

                    FloatButton {
                        id: b1TR
                        x: b1T.x
                        y: b1T.y
                        imageFile: b1T.imageFile
                        descricao: b1T.descricao
                        border.width: b1T.border.width
                        loading: b1T.loading
                    }

                    FloatButton {
                        id: b1BR
                        x: b1B.x
                        y: b1B.y
                        imageFile: b1B.imageFile
                        descricao: b1B.descricao
                        border.width: b1B.border.width
                        useTop: true
                        loading: b1B.loading
                    }

                    FloatButton {
                        id: b2TR
                        x: b2T.x
                        y: b2T.y
                        imageFile: b2T.imageFile
                        descricao: b2T.descricao
                        border.width: b2T.border.width
                        loading: b2T.loading
                    }

                    FloatButton {
                        id: b2BR
                        x: b2B.x
                        y: b2B.y
                        imageFile: b2B.imageFile
                        descricao: b2B.descricao
                        border.width: b2B.border.width
                        useTop: true
                        loading: b2B.loading
                    }

                    FloatButton {
                        id: b3TR
                        x: b3T.x
                        y: b3T.y
                        imageFile: b3T.imageFile
                        descricao: b3T.descricao
                        border.width: b3T.border.width
                        loading: b3T.loading
                    }

                    FloatButton {
                        id: b3BR
                        x: b3B.x
                        y: b3B.y
                        imageFile:  b3B.imageFile
                        descricao: b3B.descricao
                        border.width: b3B.border.width
                        useTop: true
                        loading: b3B.loading
                    }
                }
            }
        }
    }

    Text {
        id: rotUpdate
        font.pixelSize: parent.height*0.05
        text: "0"
        opacity: 0.5
        color: "white"
        visible: false
    }
}