//AIzaSyAPYatPrCcmNcVdAO_MF0YhO3c1mgdLvuQ

var app = angular.module('batmanDelivers', ['ngSanitize', 'ui.select']);

app.controller('myCtrl', function($scope, $http, $timeout, $rootScope, $interval) {

    var map;

    $scope.stops = [{
        "Description": "Start typing to search...",

        valid: false,

        id: 1

    }, {
        "Description": "Start typing to search...",
        valid: false,
        id: 2
    }]

    var directionsService = new google.maps.DirectionsService;
    var directionsDisplay = new google.maps.DirectionsRenderer();

    initMap();
    $scope.timer = 0;
    $scope.timeTaken = 0;

    function initMap() {
        map = new google.maps.Map(document.getElementById('map-div'), {
            center: {
                lat: 51.491903,
                lng: -0.024640
            },
            mapTypeId: 'roadmap',
            zoom: 14,
            mapTypeControl: false,
            styles: [{
                    "featureType": "all",
                    "elementType": "labels.text.fill",
                    "stylers": [{
                            "saturation": 36
                        },
                        {
                            "color": "#000000"
                        },
                        {
                            "lightness": 40
                        }
                    ]
                },
                {
                    "featureType": "all",
                    "elementType": "labels.text.stroke",
                    "stylers": [{
                            "visibility": "on"
                        },
                        {
                            "color": "#000000"

                        },
                        {
                            "lightness": 16
                        }
                    ]
                },
                {

                    "featureType": "all",

                    "elementType": "labels.icon",
                    "stylers": [{
                        "visibility": "off"
                    }]
                },

                {

                    "featureType": "administrative",

                    "elementType": "geometry.fill",
                    "stylers": [{

                            "color": "#000000"
                        },

                        {

                            "lightness": 20

                        }
                    ]
                },
                {
                    "featureType": "administrative",
                    "elementType": "geometry.stroke",
                    "stylers": [{
                            "color": "#000000"
                        },
                        {
                            "lightness": 17
                        },
                        {
                            "weight": 1.2
                        }
                    ]
                },

                {

                    "featureType": "landscape",

                    "elementType": "geometry",

                    "stylers": [{
                            "color": "#000000"
                        },
                        {
                            "lightness": 20
                        }
                    ]
                },
                {

                    "featureType": "poi",
                    "elementType": "geometry",
                    "stylers": [{
                            "color": "#000000"
                        },
                        {
                            "lightness": 21

                        }

                    ]
                },
                {
                    "featureType": "road.highway",
                    "elementType": "geometry.fill",

                    "stylers": [{
                            "color": "#000000"
                        },
                        {

                            "lightness": 17
                        }
                    ]

                },
                {

                    "featureType": "road.highway",

                    "elementType": "geometry.stroke",

                    "stylers": [{

                            "color": "#000000"
                        },
                        {
                            "lightness": 29
                        },

                        {

                            "weight": 0.2
                        }
                    ]
                },
                {
                    "featureType": "road.arterial",
                    "elementType": "geometry",
                    "stylers": [{
                            "color": "#000000"
                        },
                        {
                            "lightness": 18
                        }
                    ]
                },
                {
                    "featureType": "road.local",
                    "elementType": "geometry",
                    "stylers": [{
                            "color": "#000000"
                        },
                        {
                            "lightness": 16
                        }
                    ]
                },
                {
                    "featureType": "transit",
                    "elementType": "geometry",
                    "stylers": [{
                            "color": "#000000"
                        },
                        {
                            "lightness": 19
                        }
                    ]
                },
                {
                    "featureType": "water",
                    "elementType": "geometry",
                    "stylers": [{
                            "color": "#000000"
                        },
                        {
                            "lightness": 17
                        }
                    ]
                }
            ]
        });
        $rootScope.map = map;
    }
    $scope.addStop = function() {
        $scope.stops.push({
            Description: "Start typing to search..."
        })
    }
    $scope.$on('StopChanged', function() {
        var validstops = $scope.stops.filter(function(x) {
            return x.valid;
        });

        if (validstops.length == 1) {

            map.panTo(validstops[0].$marker.getPosition());
        } else if (validstops.length > 1) {
            var bounds = new google.maps.LatLngBounds();
            console.log(validstops)
            for (var i = 0; i < validstops.length; i++) {
                bounds.extend(validstops[i].$marker.getPosition());
            }

            map.fitBounds(bounds, 100);
        }


        if (validstops.length == $scope.stops.length) {
            var waypoints = [];
            if ($scope.stops.length > 2) {
                waypoints = $scope.stops.slice(1, $scope.stops.length - 1);
            }
            calcRoute($scope.stops[0], $scope.stops[$scope.stops.length - 1], waypoints);

        }
    });

    function calcRoute(start, end, waypoints) {
        console.log(waypoints)
        directionsService.route({
            origin: start.$marker.getPosition(),
            destination: end.$marker.getPosition(),
            waypoints: waypoints.map(function(x) {
                return {
                    location: x.Description,
                    stopover: true
                };
            }),
            travelMode: 'DRIVING',
            provideRouteAlternatives: false
        }, function(response, status) {
            if (status === 'OK') {
                directionsDisplay.setMap(map);
                directionsDisplay.setDirections(response);
                directionsDisplay.setOptions({
                    suppressMarkers: true
                });
                $scope.timer = response.routes[0].overview_path.length;
                follow(response.routes[0].overview_path, start, end);
            } else {
                console.log("Need more Stops", start, end, waypoints)
            }
        });
    }

    function follow(overview_path, start, end) {

        var marker = new google.maps.Marker({
            position: overview_path[0],
            icon: {
                url: "../includes/images/car3x.png",
                scaledSize: new google.maps.Size(32, 32),
                anchor: new google.maps.Point(16, 16)
            },
            map: map,
            optimized: false
        });
        var from;
        var to;
        var heading;
        var arrOfRots = [];
        var pre = [0];
        var turn;
        var c = 0;
        var i = 1;
        var j = 1;

        function moveDriver() {
            setTimeout(function() {


                function rotateDriver() {
                    setTimeout(function() {
                        var from = new google.maps.LatLng(overview_path[j - 1].lat(), overview_path[j - 1].lng());
                        var to = new google.maps.LatLng(overview_path[j].lat(), overview_path[j].lng());
                        var heading = Math.round(google.maps.geometry.spherical.computeHeading(from, to));
                        if (Math.abs(heading) > 0) {
                            $('img[src="../includes/images/car3x.png"]').css({ 'transform': 'rotate(' + heading + 'deg)' });
                        }

                        j++;
                        if (j < 180) {
                            rotateDriver();

                        }

                    }, 500)

                }

                rotateDriver();

                j=1;
                marker.setPosition(overview_path[i]);

                i++;

                if (i < overview_path.length) {
                    moveDriver();
                }

            }, 1000)

        }
        moveDriver();

    }

});