//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: 11,
            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/car.svg",
                rotation: 0  
            },
            map: map,
            optimized: false
        });
        var from;
        var to;
        var heading;
        var arrOfRots  = [];
        var pre = [0];
        var turn;
        var c = 0;
        var i = c;

        //Rotating marker/icon
        // $('img[src="../includes/images/car.svg"]').css({
        //     'transform': 'rotate(' + heading + 'deg)'
        // });

        $interval(function(){
            //Smooth Movements from turn to turn
            for(i ; i < overview_path.length; ){
                i++;
                from = new google.maps.LatLng(overview_path[c].lat(), overview_path[c].lng());
                to = new google.maps.LatLng(overview_path[c + i].lat(), overview_path[c + i].lng()); 
                heading = Math.round(google.maps.geometry.spherical.computeHeading(from, to));
                pre.push(heading); //Pushing the heading so the next index can compare to it.
                //arrOfRots.push(heading) These will be used to create the curved polyline.
                turn = Math.abs(pre[0] - heading);
                if(turn > 45 && turn < 135) {
                    c += i;
                    console.log(turn);
                    break;
                } else {
                    pre.splice(0, 1); //Removes the current previous heading, so a new one can be added.
                }
                c += i;
            }
            marker.setPosition(overview_path[c]); 
             //Instead of setPosition draw a curved polyline using the array of rotations;
        }, 1000)
        //arrOfRots.push(heading);
        //$scope.timeTaken++;

    }

	
     
});