var properties = {
    "data": [
        {
            "id": 1,
            "title": "Real Luxury Villa",
            "listing_for": "Sale",
            "is_featured": true,
            'author': 'Jhon Doe',
            'date': '5 days ago',
            "latitude": 51.541599,
            "longitude": -0.112588,
            "address": "123 Kathal St. Tampa City",
            "area": 2,
            "bathroom": 3,
            "garage": 1,
            "image": "img/properties/properties-1.jpg",
            "type_icon": "img/building.png",
        },
        {
            "id": 2,
            "title": "Park Avenue",
            "listing_for": "Rent",
            "is_featured": false,
            'author': 'Jhon Doe',
            'date': '5 days ago',
            "latitude": 51.538395,
            "longitude": -0.097418,
            "address": "123 Kathal St. Tampa City,",
            "area": 2,
            "room": 4,
            "bathroom": 3,
            "lounge": 1,
            "garage": 1,
            "image": "img/properties/properties-2.jpg",
            "type_icon": "img/building.png",
        },
        {
            "id": 3,
            "title": "Park Avenue",
            "listing_for": "Rent",
            "is_featured": true,
            'author': 'Jhon Doe',
            'date': '5 days ago',
            "latitude": 51.539212,
            "longitude": -0.118403,
            "address": "123 Kathal St. Tampa City,",
            "area": 2,
            "room": 4,
            "bathroom": 3,
            "balcony": 3,
            "lounge": 1,
            "garage": 1,
            "image": "img/properties/properties-3.jpg",
            "type_icon": "img/building.png",
        },
        {
            "id": 4,
            "title": "Big Head House",
            "listing_for": "Sale",
            "is_featured": true,
            'author': 'Jhon Doe',
            'date': '5 days ago',
            "latitude": 51.522340,
            "longitude": -0.037894,
            "address": "123 Kathal St. Tampa City,",
            "area": 2,
            "room": 4,
            "bathroom": 3,
            "balcony": 3,
            "lounge": 1,
            "garage": 1,
            "image": "img/properties/properties-4.jpg",
            "type_icon": "img/building.png",
        },
        {
            "id": 5,
            "title": "Big Head House",
            "listing_for": "Rent",
            "is_featured": false,
            'author': 'Jhon Doe',
            'date': '5 days ago',
            "latitude": 51.513965,
            "longitude": -0.038837,
            "address": "123 Kathal St. Tampa City,",
            "area": 2,
            "room": 4,
            "bathroom": 3,
            "balcony": 3,
            "lounge": 1,
            "garage": 1,
            "image": "img/properties/properties-5.jpg",
            "type_icon": "img/building.png",
        },
        {
            "id": 6,
            "title": "Modern Family Home",
            "listing_for": "Sale",
            "is_featured": false,
            'author': 'Jhon Doe',
            'date': '5 days ago',
            "latitude": 51.503965,
            "longitude": -0.058837,
            "address": "123 Kathal St. Tampa City,",
            "area": 2,
            "room": 4,
            "bathroom": 3,
            "balcony": 3,
            "lounge": 1,
            "garage": 1,
            "image": "img/properties/properties-6.jpg",
            "type_icon": "img/building.png",
        },
        {
            "id": 7,
            "title": "Modern Family Home",
            "listing_for": "Rent",
            "is_featured": false,
            'author': 'Jhon Doe',
            'date': '5 days ago',
            "latitude": 51.555385,
            "longitude": -0.128274,
            "address": "123 Kathal St. Tampa City,",
            "area": 2,
            "room": 4,
            "bathroom": 3,
            "balcony": 3,
            "lounge": 1,
            "garage": 1,
            "image": "img/properties/properties-1.jpg",
            "type_icon": "img/building.png",
        },
        {
            "id": 8,
            "title": "Relaxing Apartment",
            "listing_for": "Sale",
            "is_featured": false,
            'author': 'Jhon Doe',
            'date': '5 days ago',
            "latitude": 51.560935,
            "longitude": -0.111365,
            "address": "123 Kathal St. Tampa City,",
            "area": 2,
            "room": 4,
            "bathroom": 3,
            "balcony": 3,
            "lounge": 1,
            "garage": 1,
            "image": "img/properties/properties-2.jpg",
            "type_icon": "img/building.png",
        },
        {
            "id": 9,
            "title": "Relaxing Apartment",
            "listing_for": "Sale",
            "is_featured": false,
            'author': 'Jhon Doe',
            'date': '5 days ago',
            "latitude": 51.543803,
            "longitude": -0.036607,
            "address": "123 Kathal St. Tampa City,",
            "area": 2,
            "room": 4,
            "bathroom": 3,
            "balcony": 3,
            "lounge": 1,
            "garage": 1,
            "image": "img/properties/properties-3.jpg",
            "type_icon": "img/building.png",
        },
        {
            "id": 10,
            "title": "Modern Family Home",
            "listing_for": "Sale",
            "is_featured": false,
            'author': 'Jhon Doe',
            'date': '5 days ago',
            "latitude": 51.527306,
            "longitude": -0.140977,
            "address": "123 Kathal St. Tampa City,",
            "area": 2,
            "room": 4,
            "bathroom": 3,
            "balcony": 3,
            "lounge": 1,
            "garage": 1,
            "image": "img/properties/properties-4.jpg",
            "type_icon": "img/building.png",
        },
        {
            "id": 11,
            "title": "Park Avenue",
            "listing_for": "Sale",
            "is_featured": false,
            'author': 'Jhon Doe',
            'date': '5 days ago',
            "latitude": 51.558907,
            "longitude": -0.041842,
            "address": "123 Kathal St. Tampa City,",
            "area": 2,
            "room": 4,
            "bathroom": 3,
            "balcony": 3,
            "lounge": 1,
            "garage": 1,
            "image": "img/properties/properties-5.jpg",
            "type_icon": "img/building.png",
        },
        {
            "id": 12,
            "title": "Park Avenue",
            "listing_for": "Sale",
            "is_featured": true,
            'author': 'Jhon Doe',
            'date': '5 days ago',
            "latitude": 51.550644,
            "longitude": -0.103493,
            "address": "123 Kathal St. Tampa City,",
            "area": 2,
            "room": 4,
            "bathroom": 3,
            "balcony": 3,
            "lounge": 1,
            "garage": 1,
            "image": "img/properties/properties-6.jpg",
            "type_icon": "img/building.png",
        },
        {
            "id": 13,
            "title": "Park Avenue",
            "listing_for": "Sale",
            "is_featured": false,
            'author': 'Jhon Doe',
            'date': '5 days ago',
            "latitude": 51.532112,
            "longitude": -0.051885,
            "address": "123 Kathal St. Tampa City,",
            "area": 2,
            "room": 4,
            "bathroom": 3,
            "balcony": 3,
            "lounge": 1,
            "garage": 1,
            "image": "img/properties/properties-1.jpg",
            "type_icon": "img/building.png",
        },
        {
            "id": 14,
            "title": "Modern Family Home",
            "listing_for": "Sale",
            "is_featured": true,
            'author': 'Jhon Doe',
            'date': '5 days ago',
            "latitude": 51.531311,
            "longitude": -0.052314,
            "address": "123 Kathal St. Tampa City,",
            "area": 2,
            "room": 4,
            "bathroom": 3,
            "balcony": 3,
            "lounge": 1,
            "garage": 1,
            "image": "img/properties/properties-2.jpg",
            "type_icon": "img/building.png",
        },
        {
            "id": 15,
            "title": "Relaxing Apartment",
            "listing_for": "Sale",
            "is_featured": false,
            'author': 'Jhon Doe',
            'date': '5 days ago',
            "latitude": 51.530189,
            "longitude": -0.078750,
            "address": "123 Kathal St. Tampa City,",
            "area": 2,
            "room": 4,
            "bathroom": 3,
            "balcony": 3,
            "lounge": 1,
            "garage": 1,
            "image": "img/properties/properties-3.jpg",
            "type_icon": "img/building.png",
        }

    ]
};

function drawInfoWindow(property) {
    var image = 'img/logo.png';
    if (property.image) {
        image = property.image
    }

    var title = 'N/A';
    if (property.title) {
        title = property.title
    }

    var address = '';
    if (property.address) {
        address = property.address
    }

    var area = 1000;
    if (property.area) {
        area = property.area
    }

    var bedroom = 5;
    if (property.bedroom) {
        bedroom = property.bedroom
    }

    var bathroom = 5;
    if (property.bathroom) {
        bathroom = property.bathroom
    }

    var garage = 1;
    if (property.garage) {
        garage = property.garage
    }

    var price = 253.33;
    if (property.price) {
        price = property.price
    }

    var ibContent = '';
    ibContent =
        "<div class='map-properties'>" +
        "<div class='map-img'>" +
        "<img src='" + image + "'/><div class=\"price-ratings-box\">\n" +

        "                                </div>" +
        "</div>" +
        "<div class='map-content'>" +
        "<h4><a href='properties-details.html'>" + title + "</a></h4>" +
        "<p class='address'> <i class='flaticon-pin'></i>" + address + "</p>" +
        "<div class='map-properties-fetures'> " +
        "<span><i class='flaticon-area'></i>  " + area + " sqft</span> " +
        "<span><i class='flaticon-hotel'></i>  " + bedroom + " Beds</span> " +
        "<span><i class='flaticon-bathroom'></i>  " + bathroom + " Baths</span> " +
        "</div>" +
        "</div>";
    return ibContent;
}

function insertPropertyToArray(property, layout) {
    var image = 'img/logo.png';
    if (property.image) {
        image = property.image
    }

    var title = 'N/A';
    if (property.title) {
        title = property.title
    }

    var listing_for = 'Sale';
    if (property.listing_for) {
        listing_for = property.listing_for
    }

    var address = '';
    if (property.address) {
        address = property.address
    }

    var area = 1000;
    if (property.area) {
        area = property.area
    }

    var bedroom = 5;
    if (property.bedroom) {
        bedroom = property.bedroom
    }

    var bathroom = 5;
    if (property.bathroom) {
        bathroom = property.bathroom
    }

    var garage = 1;
    if (property.garage) {
        garage = property.garage
    }

    var balcony = 1;
    if (property.balcony) {
        balcony = property.balcony
    }

    var lounge = 1;
    if (property.lounge) {
        lounge = property.lounge
    }

    var price = 253.33;
    if (property.price) {
        price = property.price
    }

    var is_featured = '';
    if (property.is_featured) {
        is_featured = '<div class="tag">Featured</div> ';
    }

    var date = '';
    if (property.date) {
        date = property.date;
    }

    var author = '';
    if (property.author) {
        author = property.author;
    }

    var element = '';

    if(layout == 'grid_layout'){
        element = '<div class="col-lg-6 col-md-6 col-sm-12"><div class="property-box">\n' +
            '                            <div class="property-thumbnail">\n' +
            '                                <a href="properties-details.html" class="property-img">\n' +
            '                                     '+is_featured+'  \n' +
            '                                    <div class="price-box"><span>$'+price+'</span> month</div>\n' +
            '                                    <img class="d-block w-100" src="'+image+'" alt="properties">\n' +
            '                                </a>\n' +
            '                            </div>\n' +
            '                            <div class="detail">\n' +
            '                                <h1 class="title">\n' +
            '                                    <a href="properties-details.html">'+title+'</a>\n' +
            '                                </h1>\n' +
            '                                <div class="location">\n' +
            '                                    <a href="properties-details.html">\n' +
            '                                        <i class="flaticon-pin"></i>'+address+
            '                                    </a>\n' +
            '                                </div>\n' +
            '                                <ul class="facilities-list clearfix">\n' +
            '                                    <li>\n' +
            '                                        <i class="flaticon-bed"></i> '+bedroom+' Beds\n' +
            '                                    </li>\n' +
            '                                    <li>\n' +
            '                                        <i class="flaticon-bathroom"></i> '+bathroom+' Baths\n' +
            '                                    </li>\n' +
            '                                    <li>\n' +
            '                                        <i class="flaticon-ui"></i> Sq Ft:'+area+'\n' +
            '                                    </li>\n' +
            '                                    <li>\n' +
            '                                        <i class="flaticon-car"></i> '+garage+' Garage\n' +
            '                                    </li>\n' +
            '                                </ul>\n' +
            '                            </div>\n' +
            '                        </div></div>';
    }
    else{
        element = '<div class="property-box-2" >\n' +
            '                    <div class="row">\n' +
            '                        <div class="col-lg-5 col-md-5 col-pad">\n' +
            '                            <div class="property-thumbnail">\n' +
            '                                <a href="properties-details.html" class="property-img">\n' +
            '                                    <img src="'+image+'" alt="properties" class="img-fluid">\n' +
            '                                    '+is_featured+'\n' +
            '                                    <div class="price-box"><span>$'+price+'</span> month</div>\n' +
            '                                </a>\n' +
            '                            </div>\n' +
            '                        </div>\n' +
            '                        <div class="col-lg-7 col-md-7 col-pad align-self-center">\n' +
            '                            <div class="detail">\n' +
            '                                <h3 class="title">\n' +
            '                                    <a href="properties-details.html">'+title+'</a>\n' +
            '                                </h3>\n' +
            '                                <h5 class="location">\n' +
            '                                    <a href="properties-details.html">\n' +
            '                                        <i class="flaticon-pin"></i>'+address +
            '                                    </a>\n' +
            '                                </h5>\n' +
            '                                <ul class="facilities-list clearfix">\n' +
            '                                    <li>\n' +
            '                                        <i class="flaticon-bed"></i> '+bedroom+' Beds\n' +
            '                                    </li>\n' +
            '                                    <li>\n' +
            '                                        <i class="flaticon-bathroom"></i> '+bathroom+' Baths\n' +
            '                                    </li>\n' +
            '                                    <li>\n' +
            '                                        <i class="flaticon-ui"></i> Sq Ft:'+area+'\n' +
            '                                    </li>\n' +
            '                                    <li>\n' +
            '                                        <i class="flaticon-car"></i> '+garage+' Garage\n' +
            '                                    </li>\n' +
            '                                </ul>\n' +
            '                            </div>\n' +
            '                        </div>\n' +
            '                    </div>\n' +
            '                </div>';
    }
    return element;
}

function animatedMarkers(map, propertiesMarkers, properties, layout) {
    var bounds = map.getBounds();
    var propertiesArray = [];
    $.each(propertiesMarkers, function (key, value) {
        if (bounds.contains(propertiesMarkers[key].getLatLng())) {
            propertiesArray.push(insertPropertyToArray(properties.data[key], layout));
            setTimeout(function () {
                if (propertiesMarkers[key]._icon != null) {
                    propertiesMarkers[key]._icon.className = 'leaflet-marker-icon leaflet-zoom-animated leaflet-clickable bounce-animation marker-loaded';
                }
            }, key * 50);
        }
        else {
            if (propertiesMarkers[key]._icon != null) {
                propertiesMarkers[key]._icon.className = 'leaflet-marker-icon leaflet-zoom-animated leaflet-clickable';
            }
        }
    });
    $('.fetching-properties').html(propertiesArray);
}

function generateMap(latitude, longitude, mapProvider, layout) {

    var map = L.map('map', {
        center: [latitude, longitude],
        zoom: 14,
        scrollWheelZoom: false
    });

    L.tileLayer.provider(mapProvider).addTo(map);
    var markers = L.markerClusterGroup({
        showCoverageOnHover: false,
        zoomToBoundsOnClick: false
    });
    var propertiesMarkers = [];

    $.each(properties.data, function (index, property) {
        var icon = '<img src="img/logos/black-logo.png">';
        if (property.type_icon) {
            icon = '<img src="' + property.type_icon + '">';
        }
        var color = '';
        var markerContent =
            '<div class="map-marker ' + color + '">' +
            '<div class="icon">' +
            icon +
            '</div>' +
            '</div>';

        var _icon = L.divIcon({
            html: markerContent,
            iconSize: [36, 46],
            iconAnchor: [18, 32],
            popupAnchor: [130, -28],
            className: ''
        });

        var marker = L.marker(new L.LatLng(property.latitude, property.longitude), {
            title: property.title,
            icon: _icon
        });

        propertiesMarkers.push(marker);
        marker.bindPopup(drawInfoWindow(property));
        markers.addLayer(marker);
        marker.on('popupopen', function () {
            this._icon.className += ' marker-active';
        });
        marker.on('popupclose', function () {
            this._icon.className = 'leaflet-marker-icon leaflet-zoom-animated leaflet-clickable marker-loaded';
        });
    });

    map.addLayer(markers);
    animatedMarkers(map, propertiesMarkers, properties, layout);
    map.on('moveend', function () {
        animatedMarkers(map, propertiesMarkers, properties, layout);
    });

    $('.fetching-properties .property-box-2, .fetching-properties .property-box').hover(
        function () {
            propertiesMarkers[$(this).attr('id') - 1]._icon.className = 'leaflet-marker-icon leaflet-zoom-animated leaflet-clickable marker-loaded marker-active';
        },
        function () {
            propertiesMarkers[$(this).attr('id') - 1]._icon.className = 'leaflet-marker-icon leaflet-zoom-animated leaflet-clickable marker-loaded';
        }
    );



    $('.geolocation').on("click", function () {
        map.locate({setView: true})
    });
    $('#map').removeClass('fade-map');
}