var awesomeStoreLocator = (function()
{
    var jQueryASL;
    var locatorUuid = '';
    var scriptTag;
    var forceRefresh;
    var spfy = false;
    var spfyWidgetCss;
    var spfyCustomJs;
    var spfyCustomCss;
    var locations = [];
    var styles = false;
    var tabsActive = true;
    // !!! must be synchronized with Locator.php ($allMessages)
    var messages =
    {
        mapLoadingMessage: 'Awesome\u0020Store\u0020Locator\u0020is\u0020loading...',
        mapErrorMessage: 'Map\u0020could\u0020not\u0020be\u0020loaded.',
        mapNotActiveMessage: 'Map is not active.<br />Please contact support@awesomestorelocator.com.',
        autodetectMyLocationMessage: 'Autodetect\u0020my\u0020location',
        hideRouteAndDirectionsMessage: 'Hide\u0020route\u0020\u0026\u0020directions',
        showRouteAndDirectionsMessage: 'Show\u0020route\u0020\u0026\u0020directions',
        showOnMap: 'Show\u0020on\u0020map',
        kmMessage: 'km',
        miMessage: 'mi',
        startLocationMessage: 'or\u0020manually\u0020enter\u0020your\u0020location\u003A',
        poweredBy: 'Powered by <a href="https://www.awesomestorelocator.com/" target="_blank" title="Awesome Store Locator">AwesomeStoreLocator.com</a>',
        tabLocations: 'Locations',
        tabMap: 'Map',
        backToList: 'Back to list',
        directionsUnavailable: 'Directions are not available.',
        enterYourLocation: 'Enter your location',
        //
        openingHours: 'Opening\u0020hours',
        openingHoursMonday: 'Mon',
        openingHoursTuesday: 'Tue',
        openingHoursWednesday: 'Wed',
        openingHoursThursday: 'Thu',
        openingHoursFriday: 'Fri',
        openingHoursSaturday: 'Sat',
        openingHoursSunday: 'Sun',
    };
    var cdnAssetsBase = 'https\u003A\/\/js.awesomestorelocator.com\/';
    //
    var map;
    var onlyShowOnMap = false;
    var defaultCss = true;
    var unitsSelectedClass = 'aslUnitsSelected';

    //
    var DISTANCE_UNIT_KILOMETERS = 1;
    var DISTANCE_UNIT_MILES = 2;
    var unit = '1';// DISTANCE_UNIT_KILOMETERS;
    var oneKmInMiles = 0.621371;
    var renderArray = [];
    var markers = [];

    var directionsService, distances, container, routeDirections, autodetect, autodetectSpinner, geocoder, bounds, markerKeys, startLocation, startLocationAddress, startLocationMarker;

    var distance = 0;
    var radius = 300; // kilometers
    var distancesHtml = '';
    var distancesArray = [];
    var bottomWidget;// = '<span class="aslLocationShowRouteAndDirections aslLocationBtn" data-alt="' + messages.hideRouteAndDirectionsMessage + '">' + messages.showRouteAndDirectionsMessage + '</span>';
    var distanceUnitTranslation;// = ['', messages.kmMessage, messages.miMessage];

    var readyStateChange = "onreadystatechange";

    var that = this;

    function loadScript(scriptSrc, callback)
    {
        var c = document.createElement("script");
        c.type = "text/javascript", c.async = !0, c.src = scriptSrc;
        var d = document.getElementsByTagName("script")[0];
        d.parentNode.insertBefore(c, d), c.addEventListener ? c.addEventListener("load", callback, !1) : c.attachEvent(readyStateChange, readyHandler = function()
        {
            /complete|loaded/.test(c.readyState) && (callback(), c.detachEvent(readyStateChange, readyHandler))
        })
    }

    function loadCss(cssSrc, callback)
    {
        var c = document.createElement("link");
        c.type = "text/css", c.rel = 'stylesheet', c.media = 'all', c.async = !0, c.href = cssSrc;
        var d = document.getElementsByTagName("head")[0];
        d.parentNode.insertBefore(c, d), c.addEventListener ? c.addEventListener("load", callback, !1) : c.attachEvent(readyStateChange, readyHandler = function()
        {
            /complete|loaded/.test(c.readyState) && (callback(), c.detachEvent(readyStateChange, readyHandler))
        })
    }

    function getLocatorUuid()
    {
        for(var a, b = document.getElementsByTagName("script"), c = 0; c < b.length; c++)
        {
            if(a = b[c].getAttribute("data-awesome-store-locator-uuid"))
            {
                scriptTag = b[c];
                return a;
            }
        }
    }

    function getForceRefresh()
    {
        return (scriptTag && scriptTag.getAttribute('data-awesome-store-locator-force-refresh') !== null);
    }

    /*
     * success: init --> load jquery --> load locations --> load gmaps --> load css --> init map --> documentReady
     * failure: init --> load jquery --> load locations --> show error
     * */
    function init()
    {
        // get locator uuid
        var locatorUuidFromTag = getLocatorUuid();
        if(locatorUuid == '')
        {
            locatorUuid = locatorUuidFromTag;
        }
        forceRefresh = getForceRefresh();
        initSpfy();
        // load jQuery
        loadScript('//ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js', function()
        {
            jQueryASL = jQuery.noConflict(true);
            loadLocations();
        });
    }

    function initSpfy()
    {
        if(scriptTag && scriptTag.getAttribute('data-awesome-store-locator-spfy') !== null)
        {
            spfy = true;
            spfyCustomJs = scriptTag.getAttribute('data-awesome-store-locator-spfy-custom-js');
            spfyCustomCss = scriptTag.getAttribute('data-awesome-store-locator-spfy-custom-css');
            spfyWidgetCss = scriptTag.getAttribute('data-awesome-store-locator-spfy-widget-css');
        }
    }

    function processCss()
    {
        // load font awesome
        loadCss('https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css');
        // load css
        var cssSrc;
        if(spfy)
        {
            cssSrc = defaultCss ? spfyWidgetCss : spfyCustomCss;
        } else
        {
            cssSrc = defaultCss ? cdnAssetsBase + 'widget.css' : cdnAssetsBase + 'css/' + getDir(locatorUuid) + '/' + locatorUuid + '.css';
        }
        loadCss(cssSrc, function()
        {
            // init global vars
            initGlobalVars();
            // remove loading msg
            container.siblings('.aslContainerMapLoading').remove();
            // show container
            container.show();
            // init map
            initMap();
        });
    }

    // !!! must be synchronized with AppService::getDir()
    function getDir(uuid)
    {
        if(typeof uuid != 'string' || uuid.length < 2)
        {
            return uuid;
        }
        return [uuid[0], uuid[1]].join('/');
    }

    var loadLocations = function()
    {
        var breakCacheRandom = forceRefresh ? '?' + Date.now() : '';
        var locationsSrc;
        if(spfy)
        {
            locationsSrc = spfyCustomJs;
        } else
        {
            locationsSrc = cdnAssetsBase + 'js/' + getDir(locatorUuid) + '/' + locatorUuid + '.js' + breakCacheRandom;
        }

        jQueryASL.ajax
        (
                {
                    url: locationsSrc,
                    dataType: 'json'
                }
        ).done(function(data)
        {
            if(data.hasOwnProperty('active') && !!data.active)
            {
                // is active
                locations = data.hasOwnProperty('locations') ? data.locations : [];
                if(data.hasOwnProperty('messages'))
                {
                    var overrideMessages = data.messages;
                    for(key in overrideMessages)
                    {
                        messages[key] = overrideMessages[key];
                    }
                }

                // default css - default true
                defaultCss = data.hasOwnProperty('defaultCss') ? !!data.defaultCss : true;
                // powered by default true
                var poweredBy = data.hasOwnProperty('poweredBy') ? !!data.poweredBy : true;
                // styles - default false
                styles = (data.hasOwnProperty('styles') && data.styles != false) ? data.styles : false;

                bottomWidget = '<span class="aslLocationShowRouteAndDirections aslLocationBtn aslLocationBtnSmall" data-alt="' + messages.hideRouteAndDirectionsMessage + '">' + messages.showRouteAndDirectionsMessage + '</span><span class="aslLocationBtn aslLocationBtnSmall aslShowOnMap">' + messages.showOnMap + '</span>';
                distanceUnitTranslation = ['', messages.kmMessage, messages.miMessage];

                var html = '<p class="aslContainerMapLoading">' + messages.mapLoadingMessage + '</p><div class="aslContainer" style="display: none;"><div class="aslTabs"><ul class="aslNav"><li class="active aslTabLocations"><a>' + messages.tabLocations + '</a></li><li class="aslTabMap"><a>' + messages.tabMap + '</a></li></ul><div class="aslClearBoth"></div></div><div class="aslSidebar">';
                html += '<div class="aslSidebarTop"><a class="aslLocationBtn aslLocationAutodetect" href="#">';
                html += '<i class="fa fa-spinner fa-spin aslLocationAutodetectSpinner" style="display: none;"></i> ' + messages.autodetectMyLocationMessage + '</a> <span class="aslUnitsContainer">';
                html += '<span class="aslUnitsKm">' + messages.kmMessage + '</span><span class="aslUnitsDivider">|</span>';
                html += '<span class="aslUnitsMi">' + messages.miMessage + '</span></span><div class="aslStartLocation"><span>' + messages.startLocationMessage + '</span><br/>';
                html += '<input type="text" placeholder="' + messages.enterYourLocation + '" class="aslLocationFormControl aslStartLocationAddress"/></div></div><div class="aslDistances"></div><div class="aslRouteDirections"></div></div>';
                html += '<div class="aslMapContainer"><div class="aslBackToList aslLocationBtn">' + messages.backToList + '</div><div class="aslMap""></div></div><div class="aslPoweredBy"' + (!poweredBy ? 'style="display: none;"' : '') + '>' + messages.poweredBy + '</div></div>';

                jQueryASL('.awesomeStoreLocator[data-awesome-store-locator-uuid=' + locatorUuid + ']').html(html);

                // load google maps
                "object" == typeof window.google && "object" == typeof window.google.maps && "object" == typeof window.google.maps.places ? processCss() : loadScript(window.location.protocol + "//www.google.com/jsapi", function()
                {
                    google.load("maps", "3",
                            {
                                other_params: "libraries=places,geometry\u0026key\u003DAIzaSyC4k3YeldPhQlYoIWdPd1kONCBt8m85jxc",
                                callback: processCss
                            });
                });
            } else
            {
                // is not active
                showNotActive();
            }
        }).fail(function(data, a, b)
        {
            console.log(data, a, b);
            showError();
        });
    };

    function showError()
    {
        jQueryASL('.awesomeStoreLocator[data-awesome-store-locator-uuid=' + locatorUuid + ']').html('<p>' + messages.mapErrorMessage + '</p>').show();
    }

    function showNotActive()
    {
        jQueryASL('.awesomeStoreLocator[data-awesome-store-locator-uuid=' + locatorUuid + ']').html('<p>' + messages.mapNotActiveMessage + '</p>');
    }

    function initGlobalVars()
    {
        directionsService = new google.maps.DirectionsService();
        container = jQueryASL('.awesomeStoreLocator[data-awesome-store-locator-uuid=' + locatorUuid + ']').find('.aslContainer');
        distances = container.find('.aslDistances');
        routeDirections = container.find('.aslRouteDirections');
        autodetect = container.find('.aslLocationAutodetect');
        autodetectSpinner = container.find('.aslLocationAutodetectSpinner');
        geocoder = new google.maps.Geocoder();
        bounds = new google.maps.LatLngBounds();
    }

    var frequencyReduce = function(delay, callback)
    {
        var timer;
        return function()
        {
            clearTimeout(timer);
            timer = setTimeout(callback, delay);
        };
    };

    var mapResize = function()
    {
        map.fitBounds(bounds);

        var center = map.getCenter();
        google.maps.event.trigger(map, "resize");
        map.setCenter(center);
    };

    function notEmpty(array, key)
    {
        return array.hasOwnProperty(key) && array[key];
    }

    function getInfoWindowContent(data)
    {
        var content = '<div class="aslInfoWindow">';

        content += notEmpty(data, 'title') ? '<h4>' + data.title + '</h4>' : '';
        content += notEmpty(data, 'address') ? '<span> ' + data.address + '</span>' : '';
        content += notEmpty(data, 'phone') ? '<span><i class="fa fa-phone"></i> ' + data.phone + '</span>' : '';
        content += notEmpty(data, 'email') ? '<span><i class="fa fa-envelope-o"></i> ' + data.email + '</span>' : '';
        content += notEmpty(data, 'website') ? '<span><i class="fa fa-link"></i> <a href="' + data.website + '" target="_blank">' + data.website + '</a></span>' : '';

        if(data.hasOwnProperty('showOpeningHours') && data.showOpeningHours)
        {
            content += '<h5><i class="fa fa-clock-o"></i> ' + messages.openingHours + '</h5>';
            content += notEmpty(data, 'openingHoursMonday') ? '<span>' + messages.openingHoursMonday + ': ' + data.openingHoursMonday + '</span>' : '';
            content += notEmpty(data, 'openingHoursTuesday') ? '<span>' + messages.openingHoursTuesday + ': ' + data.openingHoursTuesday + '</span>' : '';
            content += notEmpty(data, 'openingHoursWednesday') ? '<span>' + messages.openingHoursWednesday + ': ' + data.openingHoursWednesday + '</span>' : '';
            content += notEmpty(data, 'openingHoursThursday') ? '<span>' + messages.openingHoursThursday + ': ' + data.openingHoursThursday + '</span>' : '';
            content += notEmpty(data, 'openingHoursFriday') ? '<span>' + messages.openingHoursFriday + ': ' + data.openingHoursFriday + '</span>' : '';
            content += notEmpty(data, 'openingHoursSaturday') ? '<span>' + messages.openingHoursSaturday + ': ' + data.openingHoursSaturday + '</span>' : '';
            content += notEmpty(data, 'openingHoursSunday') ? '<span>' + messages.openingHoursSunday + ': ' + data.openingHoursSunday + '</span>' : '';
        }

        content += notEmpty(data, 'customField1') ? '<span>' + data.customField1 + '</span>' : '';
        content += notEmpty(data, 'customField2') ? '<span>' + data.customField2 + '</span>' : '';
        content += notEmpty(data, 'customField3') ? '<span>' + data.customField3 + '</span>' : '';
        content += notEmpty(data, 'customField4') ? '<span>' + data.customField4 + '</span>' : '';
        content += notEmpty(data, 'customField5') ? '<span>' + data.customField5 + '</span>' : '';

        content += '</div>';

        return content;
    }

    function initMap()
    {
        // init map
        map = new google.maps.Map(container.find('.aslMap')[0], {
            "mapTypeId": google.maps.MapTypeId.ROADMAP,
            "minZoom": 3
        });

        if(styles !== false)
        {
            map.setOptions({styles: styles});
        }

        // resize after 500ms
        google.maps.event.addDomListener(window, "resize", frequencyReduce(500, function()
        {
            mapResize();
        }), false);

        //create empty LatLngBounds object
        bounds = new google.maps.LatLngBounds();
        var infowindow = new google.maps.InfoWindow();

        for(var i in locations)
        {
            var marker = new google.maps.Marker({
                position: new google.maps.LatLng(locations[i].latitude, locations[i].longitude, true),
                map: map,
                data: locations[i].data,
                latitude: locations[i].latitude,
                longitude: locations[i].longitude
            });

            //extend the bounds to include each marker's position
            bounds.extend(marker.position);

            google.maps.event.addListener(marker, 'click', (function(marker, i)
            {
                return function()
                {
                    infowindow.setContent(getInfoWindowContent(locations[i].data));
                    infowindow.open(map, marker);
                }
            })(marker, i));

            markers.push(marker);
        }

        // now fit the map to the newly inclusive bounds
        map.fitBounds(bounds);

        markerKeys = Object.keys(markers);

        documentReady();
    }

    var autodetectSpinnerHide = function()
    {
        autodetectSpinner.hide();
        autodetect.removeAttr('disabled');
    };

    var autodetectSpinnerShow = function()
    {
        autodetectSpinner.show();
    };

    var degreesToRad = function(x)
    {
        return x * Math.PI / 180;
    };

    var formatDistance = function(x)
    {
        return x.toFixed(1);
    };

    var getDistance = function(p1, p2)
    {
        var R = 6378137; // Earth’s mean radius in meter
        var dLat = degreesToRad(p2.lat() - p1.lat());
        var dLong = degreesToRad(p2.lng() - p1.lng());
        var a = Math.sin(dLat / 2) * Math.sin(dLat / 2) +
                Math.cos(degreesToRad(p1.lat())) * Math.cos(degreesToRad(p2.lat())) *
                Math.sin(dLong / 2) * Math.sin(dLong / 2);
        var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
        var d = R * c;
        if(unit == DISTANCE_UNIT_KILOMETERS)
        {
            return formatDistance(d / 1000); // returns the distance in kilometers
        } else
        {
            return formatDistance((d / 1000) * oneKmInMiles); // returns the distance in miles
        }
    };

    var computeTotalDistanceKilometers = function(result)
    {
        var total = 0;
        var myroute = result.routes[0];
        for(var i = 0; i < myroute.legs.length; i++)
        {
            // Note that regardless of what unit system you use, the distance.value field always contains a value expressed in meters.
            total += myroute.legs[i].distance.value;
        }
        return total / 1000;
    };

    var showRoute = function(routeId)
    {
        for(var i in renderArray)
        {
            if(i == routeId)
            {
                renderArray[i].setMap(map);
                map.fitBounds(renderArray[i].getDirections().routes[0].bounds);
            } else
            {
                renderArray[i].setMap(null);
            }
        }
    };

    var showDirections = function(routeId, locationContainer, show)
    {
        //if(routeId >= 0 && routeId < renderArray.length)
        //{
        if(show)
        {
            updateDistanceGoogle(routeId, true);
        } else
        {
            routeDirections.slideUp();
        }
        //}
    };

    var toggleAltText = function(element)
    {
        var tempText = element.text();
        element.text(element.attr('data-alt'));
        element.attr('data-alt', tempText);
    };

    var recalculateDistances = function(targetDistanceUnit)
    {
        var conversionFactor = targetDistanceUnit == DISTANCE_UNIT_MILES ? oneKmInMiles : (1 / oneKmInMiles);
        container.find('.aslLocationDistanceNumber').each(function(i, item)
        {
            item = jQueryASL(item);
            item.attr('data-distance', (formatDistance(item.attr('data-distance') * conversionFactor)));
            item.text(item.attr('data-distance'));
        });
        container.find('.aslLocationDistanceUnit').text(distanceUnitTranslation[targetDistanceUnit]);
    };

    var updateDistancesManual = function()
    {
        // reset scroll
        distances.animate({scrollTop: 0}, 500);
        for(var i = 0; i < markerKeys.length; i++)
        {
            distancesArray[i] = getDistance(startLocation, markers[markerKeys[i]].getPosition());
        }
        showDistances();
    };

    var updateDistanceGoogle = function(i, showRouteAndDirections)
    {
        onlyShowOnMap = !showRouteAndDirections;
        if(i >= 0 && i < markerKeys.length)
        {
            var request =
            {
                origin: startLocation,
                destination: markers[markerKeys[i]].getPosition(),
                travelMode: google.maps.TravelMode.DRIVING,
                unitSystem: unit == DISTANCE_UNIT_KILOMETERS ? google.maps.UnitSystem.METRIC : google.maps.UnitSystem.IMPERIAL
            };
            directionsService.route(request, directionResults);
        }
    };

    function geocodeLatLng(lat, lng)
    {
        var latlng = {lat: lat, lng: lng};
        geocoder.geocode({'location': latlng}, function(results, status)
        {
            if(status === google.maps.GeocoderStatus.OK)
            {
                startLocationAddress = results[0].formatted_address;
                container.find('.aslStartLocationAddress').val(startLocationAddress);
            }
        });
    }


    // Used as callback for the above request for current 'i'
    function directionResults(result, status)
    {
        google.maps.event.trigger(markers[routeId], 'click');
        if(status == google.maps.DirectionsStatus.OK)
        {

            routeDirections.empty();
            distanceKm = computeTotalDistanceKilometers(result);
            distance = unit == DISTANCE_UNIT_KILOMETERS ? distanceKm : distanceKm * oneKmInMiles;
            distancesArray[routeId] = formatDistance(distance);

            if(typeof renderArray[routeId] == 'object')
            {
                renderArray[routeId].setMap(null);
            }
            // Create a unique DirectionsRenderer 'i'
            renderArray[routeId] = new google.maps.DirectionsRenderer(
                    {
                        draggable: true,
                        map: map,
                        panel: onlyShowOnMap ? null : container.find('.aslRouteDirections')[0]
                        //preserveViewport: true
                    }
            );

            // Use this new renderer with the result
            renderArray[routeId].setDirections(result);
            if(!onlyShowOnMap)
            {
                showRouteDirections(routeId);
            }
            onlyShowOnMap = false;
        } else
        {
            if(typeof renderArray[routeId] == 'object')
            {
                renderArray[routeId].setMap(null);
            }

            routeDirections.empty();
            routeDirections.html('<span>' + messages.directionsUnavailable + '</span>');
            // scroll to route
            var locationContainer = container.find('.aslLocationContainer[data-i=' + routeId + ']');
            distances.animate({scrollTop: locationContainer.offset().top + distances.scrollTop() - distances.offset().top}, 500);
            routeDirections.appendTo(locationContainer).hide().slideDown();
        }
    }

    function showDistances()
    {
        distancesHtml = [];
        bounds = new google.maps.LatLngBounds();
        // try with radius
        getDistances(true);
        if(bounds.isEmpty())
        {
            // ignore radius and show all results
            getDistances(false);
        }
        if(typeof startLocation != 'undefined')
        {
            bounds.extend(startLocation);
            startLocationMarker = new google.maps.Marker({
                map: map,
                position: startLocation
            });
        }
        distancesHtml.sort(function(a, b)
        {
            return a.distance - b.distance;
        });
        distancesHtml = distancesHtml.map(function(elem)
        {
            return elem.html;
        }).join("");
        container.find('.aslStartLocationAddress').html(startLocationAddress);
        distances.html(distancesHtml);
        if(container.find('.aslRouteDirections').length < 1)
        {
            distances.after('<div class="aslRouteDirections"></div>');
            routeDirections = container.find('.aslRouteDirections');
        }
        map.fitBounds(bounds);
        autodetectSpinnerHide();
    }

    var getDistances = function(limitByRadius)
    {
        for(i = 0; i < distancesArray.length; i++)
        {
            distance = distancesArray[i];
            if(!limitByRadius || distance < radius)
            {
                bounds.extend(markers[markerKeys[i]].getPosition());
                markers[markerKeys[i]].setMap(map);
                var locationTitle = notEmpty(markers[markerKeys[i]].data, 'title') ? markers[markerKeys[i]].data.title : (notEmpty(markers[markerKeys[i]].data, 'address') ? markers[markerKeys[i]].data.address : '');
                distancesHtml.push({
                    html: '<div data-i="' + i + '" class="aslLocationContainer"><h3 class="aslLocationTitle">' + locationTitle + '</h3><img class="aslLocationImage" src="https://maps.googleapis.com/maps/api/streetview?size=270x150&location=' + markers[markerKeys[i]].latitude + ',' + markers[markerKeys[i]].longitude + '\u0026key\u003DAIzaSyC4k3YeldPhQlYoIWdPd1kONCBt8m85jxc"/><span class="aslLocationDistance">Distance: <span class="aslLocationDistanceNumber" data-distance="' + distance + '">' + distance + '</span> <span class="aslLocationDistanceUnit">' + distanceUnitTranslation[unit] + '</span></span>' + bottomWidget + '</div>',
                    distance: distance
                });
            } else
            {
                markers[markerKeys[i]].setMap(null);
            }
        }
    };

    var showRouteDirections = function(routeId)
    {
        if(typeof routeId !== 'undefined')
        {
            var locationContainer = container.find('.aslLocationContainer[data-i=' + routeId + ']');
            locationContainer.find('.aslLocationDistanceNumber').attr('data-distance', distancesArray[routeId]).text(distancesArray[routeId]);
            // scroll to route
            distances.animate({scrollTop: locationContainer.offset().top + distances.scrollTop() - distances.offset().top}, 500);
            routeDirections.appendTo(locationContainer).hide().slideDown();
        }
    };

    // This example adds a search box to a map, using the Google Place Autocomplete
    // feature. People can enter geographical searches. The search box will return a
    // pick list containing a mix of places and predicted search terms.
    var documentReady = function()
    {
        jQueryASL(document).ready(function()
        {
            if(container.find('.aslTabs').is(':visible'))
            {
                // hide map container
                tabsActive = true;
                container.find('.aslMapContainer').hide();
            }

            // Create the search box and link it to the UI element.
            var input = container.find('.aslStartLocationAddress')[0];
            var mapControls = container.find('.mapControls')[0];
            //map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);

            var autocomplete = new google.maps.places.Autocomplete(input);
            autocomplete.bindTo('bounds', map);

            // Listen for the event fired when the user selects a prediction and retrieve
            // more details for that place.
            autocomplete.addListener('place_changed', function()
            {
                autodetectSpinnerShow();
                // hide directions
                routeDirections.html('');
                // hide old start location
                if(typeof startLocationMarker != 'undefined')
                {
                    startLocationMarker.setMap(null);
                }
                if(typeof autocomplete.getPlace().geometry != 'undefined')
                {
                    startLocationAddress = autocomplete.getPlace().adr_address;
                    startLocation = autocomplete.getPlace().geometry.location;
                    // hide all old routes
                    showRoute(-1);
                    updateDistancesManual();
                } else
                {
                    autodetectSpinnerHide()
                }
            });

            distances.on('click', '.aslLocationShowRouteAndDirections', function()
            {
                var locationContainer = jQueryASL(this).closest('.aslLocationContainer');
                routeId = locationContainer.attr('data-i');
                jQueryASL(this).toggleClass('showOrHide');
                toggleAltText(jQueryASL(this));
                var show = jQueryASL(this).hasClass('showOrHide');
                if(show)
                {
                    // remove other showOrHide classes
                    container.find('.showOrHide').not(this).each(function(item)
                    {
                        toggleAltText(jQueryASL(this));
                        jQueryASL(this).removeClass('showOrHide');
                    });
                }
                showDirections(routeId, locationContainer, show);
                showRoute(routeId);
            });
            container.on('click', '.aslLocationAutodetect', function(event)
            {
                autodetectSpinnerShow();
                event.preventDefault();
                if(navigator.geolocation)
                {
                    navigator.geolocation.getCurrentPosition
                    (
                            function(position)
                            {
                                var pos = {
                                    lat: position.coords.latitude,
                                    lng: position.coords.longitude
                                };

                                map.setCenter(pos);
                                startLocation = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);//map.getCenter();
                                geocodeLatLng(position.coords.latitude, position.coords.longitude);
                                // hide all old routes
                                showRoute(-1);
                                updateDistancesManual();
                            },
                            function(error)
                            {
                                //handleLocationError(true, infoWindow, map.getCenter());
                                // try ip
                                jQueryASL.ajax
                                (
                                        {
                                            url: 'https://freegeoip.app/json/',
                                            dataType: 'json'
                                        }
                                ).done(function(data)
                                {
                                    if(typeof data !== 'undefined' && data.hasOwnProperty('longitude') && data.hasOwnProperty('latitude'))
                                    {
                                        var pos = {
                                            lat: data.latitude,
                                            lng: data.longitude
                                        };

                                        map.setCenter(pos);
                                        startLocation = new google.maps.LatLng(data.latitude, data.longitude);//map.getCenter();
                                        geocodeLatLng(data.latitude, data.longitude);
                                        // hide all old routes
                                        showRoute(-1);
                                        updateDistancesManual();
                                    }
                                    autodetectSpinnerHide();
                                });
                            },
                            {
                                enableHighAccuracy: true,
                                timeout: 5000
                            }
                    );
                } else
                {
                    // Browser doesn't support Geolocation
                    //handleLocationError(false, infoWindow, map.getCenter());
                    autodetectSpinnerHide();
                }
            });

            container.on('click', '.aslShowOnMap', function(event)
            {
                event.preventDefault();
                if(tabsActive)
                {
                    //jQueryASL(this).siblings('.aslLocationShowRouteAndDirections').trigger('click');
                    var locationContainer = jQueryASL(this).closest('.aslLocationContainer');
                    var show = jQueryASL(this).siblings('.aslLocationShowRouteAndDirections').hasClass('showOrHide');
                    routeId = locationContainer.attr('data-i');
                    updateDistanceGoogle(routeId, show);
                    showRoute(routeId);
                    // remove other showOrHide classes
                    container.find('.showOrHide').not(jQueryASL(this).siblings('.aslLocationShowRouteAndDirections')).each(function(item)
                    {
                        toggleAltText(jQueryASL(this));
                        jQueryASL(this).removeClass('showOrHide');
                    });
                    container.find('.aslTabMap').trigger('click');
                }
            });

            container.on('click', '.aslUnitsKm', function(event)
            {
                event.preventDefault();
                if(unit == DISTANCE_UNIT_MILES)
                {
                    unit = DISTANCE_UNIT_KILOMETERS;
                    container.find('.aslUnitsMi').removeClass(unitsSelectedClass);
                    jQueryASL(this).addClass(unitsSelectedClass);
                    recalculateDistances(DISTANCE_UNIT_KILOMETERS);
                }
            });
            container.on('click', '.aslUnitsMi', function(event)
            {
                event.preventDefault();
                if(unit == DISTANCE_UNIT_KILOMETERS)
                {
                    unit = DISTANCE_UNIT_MILES;
                    container.find('.aslUnitsKm').removeClass(unitsSelectedClass);
                    jQueryASL(this).addClass(unitsSelectedClass);
                    recalculateDistances(DISTANCE_UNIT_MILES);
                }
            });
            container.on('click', '.aslTabLocations', function(event)
            {
                event.preventDefault();
                if(!jQueryASL(this).hasClass('active'))
                {
                    jQueryASL(this).siblings('li').removeClass('active');
                    jQueryASL(this).addClass('active');
                    container.find('.aslMapContainer').hide();
                    container.find('.aslSidebar').show();//slideDown();
                }
            });
            container.on('click', '.aslTabMap', function(event)
            {
                event.preventDefault();
                if(!jQueryASL(this).hasClass('active'))
                {
                    jQueryASL(this).siblings('li').removeClass('active');
                    jQueryASL(this).addClass('active');
                    container.find('.aslSidebar').hide();
                    container.find('.aslMapContainer').show();//.slideDown();
                    // trigger map resize
                    mapResize();
                }
            });
            container.on('click', '.aslBackToList', function(event)
            {
                container.find('.aslTabLocations').trigger('click');
            });
            container.on('click', 'table.adp-directions', function(event)
            {
                container.find('.aslTabMap:visible').trigger('click');
            });
            container.find('.aslLocationAutodetect').trigger('click');
            // end of d.ready
        });
        jQueryASL(window).resize(function()
        {
            if(!container.find('.aslTabs').is(':visible'))
            {
                // width >= 400
                container.find('.aslSidebar').show();
                container.find('.aslMapContainer').show();
                tabsActive = false;
            } else
            {
                // width < 400
                if(container.find('.aslSidebar').is(':visible') && container.find('.aslMapContainer').is(':visible'))
                {
                    container.find('.aslTabLocations').removeClass('active').trigger('click');
                }
                tabsActive = true;
            }
        });
    };


    init();
})();