//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) {
            //Set Markers as null ****
            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);
            } else {
                console.log("Need more Stops", start, end, waypoints)
            }
        });
    }

    function follow(overview_path) {
        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"
        });
        //Distances and Measurements
        var j = 0;
        var MPH = 50; //Or x miles per 60 minutes
        var rotateTime;
        function moveDriver() {
                
                map.setZoom(15);
                map.panTo(marker.getPosition());
                
                var from = new google.maps.LatLng(overview_path[j].lat(), overview_path[j].lng());
                var 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) > 75 && Math.abs(heading) < 105) {
                    console.log('yes', heading);
                    $('img[src="../includes/images/car3x.png"]').css({ 'transition-duration': '3s' });
                } 
                             
                $('img[src="../includes/images/car3x.png"]').css({ 'transform': 'rotate(' + heading + 'deg)' });
                    //Getting Distance to milliseconds
                    var metres = google.maps.geometry.spherical.computeDistanceBetween( from, to );//Metres
                    var miles = metres * 0.000621371; //Miles
                    var speed = MPH / miles; //Difference 
                    var speedPerHour = 60 / speed; //Work out the minutes based on the difference
                    var speedPerMilli = speedPerHour * 60000; // Convert to milliseconds

                    j++;

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

    }

});