'use strict';

(function () {
    var Core = {
        NUMBER_OF_ROUNDS: 5,
        MAX_SCORE: 1000,

        rounds: [],
        scoreSum: 0,
        realPosition: null,
        panorama: null,
        guessMap: null,
        guessMarker: null,
        resultMap: null,
        adaptGuess: false,
        googleLink: null,

        startNewGame: function () {
            for (var i = 0; i < Core.rounds.length; ++i) {
                var round = Core.rounds[i];

                round.realMarker.setMap(null);
                round.guessMarker.setMap(null);
                round.line.setMap(null);
            }

            Core.rounds = [];
            Core.scoreSum = 0;

            var distanceInfo = document.getElementById('distanceInfo');
            distanceInfo.children[0].style.display = null;
            distanceInfo.children[1].style.display = null;
            var scoreInfo = document.getElementById('scoreInfo');
            scoreInfo.children[0].style.display = null;
            scoreInfo.children[1].style.display = null;
            document.getElementById('continueButton').style.display = null;
            document.getElementById('startNewGameButton').style.display = null;

            Core.prepareNewRound();
        },

        prepareNewRound: function () {
            document.getElementById('scoreBar').style.width = null;

            if (Core.adaptGuess) {
                document.getElementById('guess').classList.remove('adapt');
            }

            document.getElementById('showGuessButton').style.visibility = null;
            document.getElementById('guess').style.visibility = null;
            document.getElementById('result').style.visibility = null;

            Core.guessMap.fitBounds(guessMapBounds);

            Core.startNewRound();
        },

        startNewRound: function () {
            Core.rounds.push({ realPosition: null, guessPosition: null, realMarker: null, guessMarker: null, line: null });

            Core.panorama.setVisible(false);
            document.getElementById('loading').style.visibility = 'visible';

            Core.getNewPosition();
        },

        getNewPosition: function () {
            var xhr = new XMLHttpRequest();
            xhr.responseType = 'json';
            xhr.onreadystatechange = function () {
                if (this.readyState == 4 && this.status == 200) {
                    Core.realPosition = this.response.position;
                    Core.rounds[Core.rounds.length - 1].realPosition = this.response.position;

                    var sv = new google.maps.StreetViewService();
                    sv.getPanorama({ location: this.response.position, preference: google.maps.StreetViewPreference.NEAREST }, Core.loadPano);
                }
            };
            xhr.open('GET', 'getNewPosition.json', true);
            xhr.send();
        },

        loadPano: function (data, status) {
            if (status !== google.maps.StreetViewStatus.OK) {
                Core.getNewPosition();
                return;
            }

            document.getElementById('loading').style.visibility = 'hidden';

            if (Core.adaptGuess) {
                document.getElementById('guess').classList.add('adapt');
            }

            Core.panorama.setVisible(true);
            Core.panorama.setPov({ heading: 0, pitch: 0 });
            Core.panorama.setZoom(0);
            Core.panorama.setPano(data.location.pano);
        },

        evaluateGuess: function () {
            var guessPosition = Core.guessMarker.getPosition().toJSON();
            Core.rounds[Core.rounds.length - 1].guessPosition = guessPosition;

            Core.guessMarker.setMap(null);
            Core.guessMarker = null;

            var distance = Util.calculateDistance(Core.realPosition, guessPosition);

            document.getElementById('guess').style.visibility = 'hidden';
            document.getElementById('result').style.visibility = 'visible';

            Core.addRealguessPair(Core.realPosition, guessPosition);

            var resultBounds = new google.maps.LatLngBounds();
            resultBounds.extend(Core.realPosition);
            resultBounds.extend(guessPosition);
            Core.resultMap.fitBounds(resultBounds);

            document.getElementById('distance').innerHTML = Util.printDistanceForHuman(distance);

            var score = Core.calculateScore(distance);
            Core.scoreSum += score;
            document.getElementById('score').innerHTML = score;

            var scoreBarProperties = Core.calculateScoreBarProperties(score, Core.MAX_SCORE);
            var scoreBar = document.getElementById('scoreBar');
            scoreBar.style.backgroundColor = scoreBarProperties.backgroundColor;
            scoreBar.style.width = scoreBarProperties.width;

            if (Core.rounds.length == Core.NUMBER_OF_ROUNDS) {
                document.getElementById('continueButton').style.display = 'none';
                document.getElementById('showSummaryButton').style.display = 'block';
            }
        },

        addRealguessPair(realPosition, guessPosition) {
            if (Core.rounds.length > 1) {
                var lastRound = Core.rounds[Core.rounds.length - 2];

                lastRound.realMarker.setVisible(false);
                lastRound.guessMarker.setVisible(false);
                lastRound.line.setVisible(false);
            }

            var round = Core.rounds[Core.rounds.length - 1];

            round.realMarker = new google.maps.Marker({
                map: Core.resultMap,
                position: realPosition,
                clickable: true,
                draggable: false
            });

            round.realMarker.addListener('click', function () {
                window.open('https://www.google.com/maps/search/?api=1&query=' + this.getPosition().toUrlValue(), '_blank');
            });

            round.guessMarker = new google.maps.Marker({
                map: Core.resultMap,
                position: guessPosition,
                clickable: false,
                draggable: false,
                label: {
                    color: '#ffffff',
                    fontFamily: 'Roboto',
                    fontSize: '18px',
                    fontWeight: '500',
                    text: '?'
                }
            });

            round.line = new google.maps.Polyline({
                map: Core.resultMap,
                path: [
                    realPosition,
                    guessPosition
                ],
                geodesic: true,
                strokeOpacity: 0,
                icons: [{
                    icon: {
                        path: 'M 0,-1 0,1',
                        strokeOpacity: 1,
                        strokeWeight: 2,
                        scale: 2
                    },
                    offset: '0',
                    repeat: '10px'
                }],
                clickable: false,
                draggable: false,
                editable: false
            });
        },

        calculateScore: function (distance) {
            var goodness = 1.0 - distance / Math.sqrt(mapArea);

            return Math.round(Math.pow(Core.MAX_SCORE, goodness));
        },

        calculateScoreBarProperties: function (score, maxScore) {
            var percent = Math.floor((score / maxScore) * 100);

            var color;
            if (percent >= 90) {
                color = '#11ca00';
            } else if (percent >= 10) {
                color = '#ea9000';
            } else {
                color = '#ca1100';
            }

            return { width: percent + '%', backgroundColor: color };
        },

        showSummary: function () {
            var distanceInfo = document.getElementById('distanceInfo');
            distanceInfo.children[0].style.display = 'none';
            distanceInfo.children[1].style.display = 'block';
            var scoreInfo = document.getElementById('scoreInfo');
            scoreInfo.children[0].style.display = 'none';
            scoreInfo.children[1].style.display = 'block';
            document.getElementById('showSummaryButton').style.display = null;
            document.getElementById('startNewGameButton').style.display = 'block';

            var resultBounds = new google.maps.LatLngBounds();

            for (var i = 0; i < Core.rounds.length; ++i) {
                var round = Core.rounds[i];

                round.realMarker.setVisible(true);
                round.guessMarker.setVisible(true);
                round.line.setVisible(true);

                resultBounds.extend(round.realPosition);
                resultBounds.extend(round.guessPosition);
            }

            Core.resultMap.fitBounds(resultBounds);

            document.getElementById('scoreSum').innerHTML = Core.scoreSum;

            var scoreBarProperties = Core.calculateScoreBarProperties(Core.scoreSum, Core.NUMBER_OF_ROUNDS * Core.MAX_SCORE);
            var scoreBar = document.getElementById('scoreBar');
            scoreBar.style.backgroundColor = scoreBarProperties.backgroundColor;
            scoreBar.style.width = scoreBarProperties.width;
        },

        rewriteGoogleLink: function () {
            if (!Core.googleLink) {
                var anchors = document.getElementById('panorama').getElementsByTagName('a');
                for (var i = 0; i < anchors.length; i++) {
                    var a = anchors[i];
                    if (a.href.indexOf('maps.google.com/maps') !== -1) {
                        Core.googleLink = a;
                        break;
                    }
                }
            }

            setTimeout(function () {
                Core.googleLink.title = 'Google Maps'
                Core.googleLink.href = 'https://maps.google.com/maps'
            }, 1);
        }
    };

    var Util = {
        EARTH_RADIUS_IN_METER: 6371000,

        deg2rad: function (deg) {
            return deg * (Math.PI / 180.0);
        },

        calculateDistance: function (position1, position2) {
            var lat1 = Util.deg2rad(position1.lat);
            var lng1 = Util.deg2rad(position1.lng);
            var lat2 = Util.deg2rad(position2.lat);
            var lng2 = Util.deg2rad(position2.lng);

            var angleCos = Math.cos(lat1) * Math.cos(lat2) * Math.cos(lng2 - lng1) +
                Math.sin(lat1) * Math.sin(lat2);

            if (angleCos > 1.0) {
                angleCos = 1.0;
            }

            var angle = Math.acos(angleCos);

            return angle * Util.EARTH_RADIUS_IN_METER;
        },

        printDistanceForHuman: function (distance) {
            if (distance < 1000) {
                return Number.parseFloat(distance).toFixed(0) + ' m';
            } else if (distance < 10000) {
                return Number.parseFloat(distance / 1000).toFixed(2) + ' km';
            } else if (distance < 100000) {
                return Number.parseFloat(distance / 1000).toFixed(1) + ' km';
            } else {
                return Number.parseFloat(distance / 1000).toFixed(0) + ' km';
            }
        }
    };

    if (!('ontouchstart' in document.documentElement)) {
        Core.adaptGuess = true;
    }

    Core.guessMap = new google.maps.Map(document.getElementById('guessMap'), {
        disableDefaultUI: true,
        clickableIcons: false,
        draggableCursor: 'crosshair'
    });

    Core.guessMap.fitBounds(guessMapBounds);

    Core.guessMap.addListener('click', function (e) {
        if (Core.guessMarker) {
            Core.guessMarker.setPosition(e.latLng);
            return;
        }

        Core.guessMarker = new google.maps.Marker({
            map: Core.guessMap,
            position: e.latLng,
            clickable: false,
            draggable: true,
            label: {
                color: '#ffffff',
                fontFamily: 'Roboto',
                fontSize: '18px',
                fontWeight: '500',
                text: '?'
            }
        });

        document.getElementById('guessButton').disabled = false;
    });

    Core.panorama = new google.maps.StreetViewPanorama(document.getElementById('panorama'), {
        disableDefaultUI: true,
        linksControl: true,
        showRoadLabels: false,
        motionTracking: false
    });

    Core.panorama.addListener('position_changed', function () {
        Core.rewriteGoogleLink();
    });

    Core.panorama.addListener('pov_changed', function () {
        Core.rewriteGoogleLink();
    });

    Core.resultMap = new google.maps.Map(document.getElementById('resultMap'), {
        disableDefaultUI: true,
        clickableIcons: false,
    });

    Core.startNewRound();

    document.getElementById('showGuessButton').onclick = function () {
        this.style.visibility = 'hidden';
        document.getElementById('guess').style.visibility = 'visible';
    }

    document.getElementById('closeGuessButton').onclick = function () {
        document.getElementById('showGuessButton').style.visibility = null;
        document.getElementById('guess').style.visibility = null;
    }

    document.getElementById('guessButton').onclick = function () {
        if (!Core.guessMarker) {
            return;
        }

        this.disabled = true;

        Core.evaluateGuess();
    }

    document.getElementById('continueButton').onclick = function () {
        Core.prepareNewRound();
    }

    document.getElementById('showSummaryButton').onclick = function () {
        Core.showSummary();
    }

    document.getElementById('startNewGameButton').onclick = function () {
        Core.startNewGame();
    }
})();