$(function () {

    var rightArea = $('.rightarea');
    //Empty the right area
    createRightAreaDiv("");

    var markersArray = [];
    var zoomLevel = 5;
    var imageMapLoadingGif = $('#imageMapLoadingGif');
    var taxiCompanyCoverageMap = document.getElementById('taxiCompanyCoverageMap');
    var taxiCompanyCoverageMapInfo = $('#taxiCompanyCoverageMapInfo');
    var spinnerHtml = "<img src='../Images/Icons/spinner.gif' />";

    showTaxiComanyCoverageMapInfo(spinnerHtml);

    var map = initializeMap();
    getMarkers(map);

    showTaxiComanyCoverageMapInfo('Du ser nu alla städer som taxibolagen täcker.');


    function setMarkers(_markersArray, myMap) {

        imageMapLoadingGif.hide();

        taxiCompanyCoverageMap.style.opacity = 1; //For real browsers;
        taxiCompanyCoverageMap.style.filter = "alpha(opacity=100)"; //For IE;

        var infowindow = new google.maps.InfoWindow();

        var marker, i;
        //Loops through all taxi companies received from the server
        for (i = 0; i < _markersArray.length; i++) {

            marker = new google.maps.Marker({
                position: new google.maps.LatLng(_markersArray[i].ApproximateLatitude, _markersArray[i].ApproximateLongitude),
                map: myMap
            });


            markersArray.push(marker);

            //Adds clickevent listener
            google.maps.event.addListener(marker, 'click', (function (marker, i) {
                return function () {

                    var logoImageHtmlString = "";
                    var urlHtmlString = "";
                    var telHtmlString = "";
                    var emailHtmlString = "";
                    var taxiCompaniesStr = "<div>";
                    var taxiCompaniesCounter = 0;
                    var divHeight = 130;
                    var taxiCompanyIdsArray = [];

                    //This loop is just for creating the div that is showed on click
                    for (var j = 0; j < _markersArray.length; j++) {

                        //If there are multiple taxicompanies on the same location
                        if (_markersArray[i].ApproximateLatitude === _markersArray[j].ApproximateLatitude && _markersArray[i].ApproximateLongitude === _markersArray[j].ApproximateLongitude && taxiCompanyIdsArray.indexOf(_markersArray[j].TaxiCompanyId) === -1) {

                            //This is to prevent that the same taxi company will be added multiple times
                            taxiCompanyIdsArray.push(_markersArray[j].TaxiCompanyId);

                            taxiCompaniesStr += "<div style='margin-bottom:10px;'>";

                            if (markersArray[j].LogoImage !== "") {
                                logoImageHtmlString = "<div><a href='" + _markersArray[j].URL + "' target='_blank'><img src='" + _markersArray[j].LogoImage + "' style='height: 45px;'></img></a></div>";
                            }

                            if (markersArray[j].Tel !== "") {
                                telHtmlString = "<div>Tel: " + _markersArray[j].Tel + "</div>";
                            }

                            if (markersArray[j].Email !== "") {
                                emailHtmlString = "<div>Mail: " + _markersArray[j].Email + "</div>";
                            }

                            if (markersArray[j].LogoImage !== "") {
                                urlHtmlString = "<a href='" + _markersArray[j].URL + "' target='_blank'>" + _markersArray[j].URL + "</a>";
                            }

                            taxiCompaniesStr += (logoImageHtmlString +
                                "<h3>" + _markersArray[j].Company + "</h3>" +
                                telHtmlString +
                                emailHtmlString +
                                urlHtmlString +
                                "</hr>");

                            taxiCompaniesStr += "</div>";
                            //Keeps track of how many taxi companies that are in the div
                            taxiCompaniesCounter++;
                        }
                    }

                    taxiCompaniesStr += "</div>";

                    //Sets the height of the div depending on the amount of taxi companies
                    var contentString = "<div style='width: 250px; height: " + divHeight * taxiCompaniesCounter + "px;'>" +
                        taxiCompaniesStr +
                        "</div>";

                    infowindow.setContent(contentString);
                    infowindow.open(myMap, marker);
                };
            })(marker, i));
        }
    }

    function getMarkers(myMap) {
        var r = $.Deferred();
        var taxiGroupId = 1;
        if (window.location.href.includes('svea')) {
            taxiGroupId = 2;
        }

        $.ajax({
            type: "POST",
            url: "/WebServices/Internal/wsTaxiCompany.asmx/GetTaxiCompanyCoverageMapMarkers",
            data: "{ zoomLevel: " + zoomLevel + ", taxiGroupId:" + taxiGroupId + "}",
            async: true,
            dataType: "json",
            headers: { "Content-Type": "application/json", "Accept": "application/json" },
            success: function (data) {
                setMarkers(data.d, myMap);
                r.resolve();
            },
            error: function (xhr, ajaxOptions, thrownError) {
                //console.log(xhr.status);
                //console.log(xhr.responseText + " " + thrownError);
            }
        });

        return r;
    }

    function initializeMap() {
        //Creates the map
        var map = new google.maps.Map(taxiCompanyCoverageMap, {
            zoom: zoomLevel,
            center: new google.maps.LatLng(62, 15),
            mapTypeId: google.maps.MapTypeId.ROADMAP
        });

        //Adds zoom event listener
        google.maps.event.addListener(map, 'zoom_changed', function () {

            var _zoom = map.getZoom();

            //-------------------------------
            //IF YOU CHANGE THE ZOOM VALUE HERE, YOU HAVE TO CHANGE IT IN GeTaxiCompanyCoverageMapMarkers in TaxiCompanyDAL TOO
            //-------------------------------

            //If the user zooms in
            if (_zoom >= 8 && zoomLevel < 8) {

                //clear markers
                deleteOverlays();

                zoomLevel = _zoom;

                showTaxiComanyCoverageMapInfo(spinnerHtml);

                getMarkers(map).done(function() {
                    showTaxiComanyCoverageMapInfo('Du ser nu alla orter som taxibolagen täcker.');
                });


            }//If the user zooms out
            else if (_zoom < 8 && zoomLevel >= 8) {

                //clear markers
                deleteOverlays();

                zoomLevel = _zoom;

                showTaxiComanyCoverageMapInfo(spinnerHtml);

                getMarkers(map).done(function() {
                    showTaxiComanyCoverageMapInfo('Du ser nu alla städer som taxibolagen täcker.');
                });

            }
        });

        return map;
    }

    // Deletes all markers in the array by removing references to them
    function deleteOverlays() {
        if (markersArray) {
            for (var i = 0; i < markersArray.length; i++) {
                markersArray[i].setMap(null);
            }
            markersArray.length = 0;
        }
    }

    function showTaxiComanyCoverageMapInfo(text) {
        taxiCompanyCoverageMapInfo.text(createRightAreaDiv(text));
    }

    function createRightAreaDiv(text) {
        rightArea.html("");
        var rightAreaHtmlString =
            "<div>" +
            "<div id='taxiCompanyCoverageMapInfo' style='min-height:45px;'>" +
                "<img src='http://maps.google.com/mapfiles/marker.png' style='margin-right: 10px;' /><p style='padding-left: 30px; margin-top: -30px;'>" + text + "</p>" +
                "</div>" +
            "</div>";
        rightArea.append(rightAreaHtmlString);
    }
});