//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 SlidingMarker({
            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,
            duration: 0,
            easing: "linear"
        });
        // var from;
        // var to;
        // var heading;
        // var arrOfRots = [];
        // var pre = [0];
        // var turn;
        var j = 0;

        //Distances and Measurements
        var from;
        var to;
        var MPH = 50; //Or x miles per 60 minutes

        function moveDriver() {
                        
                from = new google.maps.LatLng(overview_path[j].lat(), overview_path[j].lng());
                to = new google.maps.LatLng(overview_path[j + 1].lat(), overview_path[j + 1].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)' });
                //} 

                //Getting Distance to milliseconds
                var a = google.maps.geometry.spherical.computeDistanceBetween( from, to );//Metres
                var b = a * 0.000621371; //Miles
                var c = MPH / b; //Difference 
                var d = 60 / c; //Work out the minutes based on the difference
                var e = d * 60000; // Convert to milliseconds

                j++;

                marker.duration = e;
                marker.setPosition(overview_path[j]);
                if (j < overview_path.length) {
                    setTimeout(function(){
                        moveDriver();
                    }, e)
                }
        }
        moveDriver();

    }

});