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

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


    //GLOBAL VARIABLES
    var key = 'AIzaSyAPYatPrCcmNcVdAO_MF0YhO3c1mgdLvuQ';
    var distance;
    var map;
    var mapReset = false;
    $scope.routeStarted = false;


    //UI VARIABLES
    $scope.warning = '';
    $scope.timer = 0;
    $scope.predictedTime = 0;
    $scope.speed = 50; //Average MPH


    //UI ARRAYS
    $scope.settings = [{
            description: 'Enable Time Prediction',
            enabled: true,
            showOnRouteLoad: true,
            showOnPageLoad: false,
            template: $sce.trustAsHtml("<span>Prediction: {{predictedTime}} (Mins)</span>")
        },
        {
            description: 'Enable Speed Manipulation',
            enabled: true,
            showOnRouteLoad: true,
            showOnPageLoad: false,
            template: $sce.trustAsHtml("<span>Manipulate Speed:</span> <div id='slider'></div>")
        },
        {
            description: 'Enable Speed Display',
            enabled: true,
            showOnRouteLoad: true,
            showOnPageLoad: false,
            template: $sce.trustAsHtml("<p>View Speed: {{speed}} (MPH)</p>")
        },
        {
            description: 'Enable Additional Stops',
            enabled: true,
            showOnRouteLoad: false,
            showOnPageLoad: true,
            template: $sce.trustAsHtml("<p class='add-stop' ng-click='addStop()'>Additional Stop</p>")
        },
        {
            description: 'Reset Map',
            enabled: true,
            showOnRouteLoad: false,
            showOnPageLoad: true,
            template: $sce.trustAsHtml("<p ng-click='resetMap()'>Reset Map</p>")
        }
    ]
    $scope.stops = [
        {
            Description: "Start typing to search...",
            lbl: "Pickup",
            valid: false,
            id: 1

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


    //INIT MAP
    var directionsService = new google.maps.DirectionsService;
    var directionsDisplay = new google.maps.DirectionsRenderer();
    initMap();


    //FUNCTIONS
    $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();
            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 refreshSettings(completed){
        newSettings = [];
        $scope.settings.forEach(function(s, i){
            if(completed && !s.showOnPageLoad){
                s.showOnRouteLoad = true;
            } else {
                s.showOnRouteLoad = false;
            }
            newSettings.push(s);
            if (i == $scope.settings.length - 1){
                $scope.settings = newSettings;
            }
        })
    }
    function getTime() {
        var speed = $scope.speed / distance; //Difference
        setTimeout(function() {
          $scope.$apply(function() {
              $scope.predictedTime = (60 / speed).toFixed(1); //Work out the minutes based on the difference
          });
        }, 500)
    }
    function initMap() {
        map = new google.maps.Map(document.getElementById('map-div'), {
            scrollwheel: false,
            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;
    }
    function calcRoute(start, end, 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') {
                distance = response.routes[0].legs[0].distance.value * 0.000621371;
                if (distance < 35) {
                    directionsDisplay.setMap(map);
                    directionsDisplay.setDirections(response);
                    directionsDisplay.setOptions({
                        suppressMarkers: true
                    });
                    slider();
                    getTime();
                    refreshSettings();
                    follow(response.routes[0].overview_path);
                } else {
                    $scope.warning = 'Destination Too Far Away!';
                    setTimeout(function() {
                        $scope.warning = " ";
                    }, 1000)
                }
            } 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 pre = [0];
        var j = 0;
        var rotateTime = 0;
        var heading;
        var metres;

        function moveDriver() {
            $scope.routeStarted = true;
            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());

            $scope.stops.forEach(function(stop) {
                if (stop.valid) {
                    var stopLatLng = new google.maps.LatLng(stop.$marker.position.lat(), stop.$marker.position.lng());
                    var distance = google.maps.geometry.spherical.computeDistanceBetween(from, stopLatLng); //Metres
                    if (distance < 50) {
                        stop.$marker.setMap(null);
                        stop.valid = false;
                        //Delete Marker
                    } else {
                        //Already removed
                    }
                }

            })

            var heading = Math.round(google.maps.geometry.spherical.computeHeading(from, to));
            pre.push(heading);
            var turn = Math.abs(pre[0]) - Math.abs(pre[1]);
            if (Math.abs(turn) > 40 && Math.abs(turn) < 140) {
                if ($scope.speed < 100) {
                    rotateTime = 1500; //secs
                } else {
                    rotateTime = 500; //secs
                }
                if (heading < 0) {
                    //Turning left
                    setTimeout(function() {
                        $('img[src="../includes/images/car3x.png"]').css({
                            'transform': 'rotate(' + heading + 'deg)'
                        });
                    }, rotateTime)
                } else {
                    setTimeout(function() {
                        $('img[src="../includes/images/car3x.png"]').css({
                            'transform': 'rotate(' + heading + 'deg)'
                        });
                    }, rotateTime)
                }
            } else {
                rotateTime = 0;
                $('img[src="../includes/images/car3x.png"]').css({
                    'transform': 'rotate(' + heading + 'deg)'
                });

            }
            //** Make batman do skid over roundabouts

            //Getting Distance to milliseconds
            var metres = google.maps.geometry.spherical.computeDistanceBetween(from, to); //Metres
            var miles = metres * 0.000621371; //Miles
            var speed = $scope.speed / 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 + rotateTime;
            setTimeout(function() {
                marker.setPosition(overview_path[j]);
            }, rotateTime)
            if (j < overview_path.length - 1 && mapReset != true) {
                map.setZoom(16);
                map.panTo(marker.getPosition());
                setTimeout(function() {
                    pre.shift();
                    moveDriver();
                }, speedPerMilli + rotateTime)
            } else {
                refreshSettings(true);
                $scope.routeStarted = false;
                $scope.warning = 'Route Completed!';
                setTimeout(function() {
                  $scope.warning = " ";
                }, 1000)
            }
        }
        moveDriver();

    }


    //UI FUNCTIONS
    $scope.checkRouteSetting = function(setting){
        if (setting.enabled == true && setting.showOnRouteLoad == false){
            return true;
        } else {
            return false;
        }
    }
    $scope.resetMap = function() {
        initMap();
        mapReset = true;
        $scope.stops = [{
            Description: "Start typing to search...",
            lbl: "Pickup",
            valid: false,
            id: 1

        }, {
            Description: "Start typing to search...",
            lbl: "Drop",
            valid: false,
            id: 2
        }]
        $scope.warning = 'Map Reset!';
        setTimeout(function() {
            $scope.warning = " ";
            mapReset = false;
        }, 1000)
    }
    $scope.addStop = function() {
        if ($scope.stops.length < 4) {
            if ($scope.routeStarted) {
              $scope.warning = 'Route Has Started!';
              setTimeout(function() {
                $scope.warning = " ";
              }, 1000)
            } else {
              $scope.stops.splice($scope.stops.length - 1, 0, {
                  Description: "Start typing to search...",
                  lbl: "Stop"
              })
            }
        } else {
            $scope.warning = 'Reached Stop Limit!';
            setTimeout(function() {
                $scope.warning = '';
            }, 500)
        }

    }
    $scope.checkStop = function(i) {
        if (i == 0 || i == $scope.stops.length - 1) {
            return true;
        } else {
            return false;
        }
    }
    $scope.enableSettings = function() {
        if ($('.settings').css('display') == 'none') {
            $('.settings').slideDown("slow");
        } else {
            $('.settings').slideUp("slow");
        }
    }
    $scope.changeSetting = function(change, i) {
        if (change == 'enable') {
            $scope.settings[i].enabled = true;
            $scope.warning = 'Setting Enabled, Click X To Disable!';
            $(".setting" + i).css("text-decoration", "none");
            setTimeout(function() {
              $scope.warning = " ";
            }, 1000)
        } else {
            $scope.settings[i].enabled = false;
            $scope.warning = 'Setting Disabled, Click X To Enable!';
            $(".setting" + i).css("text-decoration", "line-through");
            setTimeout(function() {
              $scope.warning = " ";
            }, 1000)
        }
    }
    $scope.removeStop = function(i) {
        //TODO: STOP REMOVES PICKUP
        $scope.stops.splice(stop, 1);
    }
    function slider() {
        $("#slider").slider({
            animate: "fast",
            animate: true,
            value: 50,
            min: 20,
            max: 300,
            step: 1,
            slide: function(event, ui) {
                $scope.$apply(function() {
                    $scope.speed = ui.value;
                    getTime();
                });
            }
        });
    }


});