var properties = {
    "data": [
        {
            "id": 1,
            "title": "Beautiful single home",
            "price": 2505.11,
            "listing_for": "Sale",
            'author': 'Jhon Doe',
            'date': '5 days ago',
            "is_featured": true,
            "latitude": 51.541599,
            "longitude": -0.112588,
            "address": "123 Kathal St. Tampa City, ",
            "area": 1000,
            "room": 4,
            "bathroom": 3,
            "balcony": 3,
            "lounge": 1,
            "garage": 1,
            "image": "img/properties/properties-1.png",
            "type_icon": "img/building.png"
        },
        {
            "id": 2,
            "title": "Modern Family Home",
            "price": 2505.11,
            "listing_for": "Rent",
            'author': 'Jhon Doe',
            'date': '5 days ago',
            "is_featured": false,
            "latitude": 51.538395,
            "longitude": -0.097418,
            "address": "123 Kathal St. Tampa City, ",
            "area": 2500,
            "room": 4,
            "bathroom": 3,
            "balcony": 3,
            "lounge": 1,
            "garage": 1,
            "image": "img/properties/properties-2.png",
            "type_icon": "img/building.png"
        },
        {
            "id": 3,
            "title": "Sweet Family home",
            "price": 2505.11,
            "listing_for": "Rent",
            'author': 'Jhon Doe',
            'date': '5 days ago',
            "is_featured": true,
            "latitude": 51.539212,
            "longitude": -0.118403,
            "address": "123 Kathal St. Tampa City, ",
            "area": 2123,
            "room": 4,
            "bathroom": 3,
            "balcony": 3,
            "lounge": 1,
            "garage": 1,
            "image": "img/properties/properties-3.png",
            "type_icon": "img/building.png"
        },
        {
            "id": 4,
            "title": "Park avenue",
            "price": 2505.11,
            "listing_for": "Sale",
            'author': 'Jhon Doe',
            'date': '5 days ago',
            "is_featured": true,
            "latitude": 51.522340,
            "longitude": -0.037894,
            "address": "123 Kathal St. Tampa City, ",
            "area": 2123,
            "room": 4,
            "bathroom": 3,
            "balcony": 3,
            "lounge": 1,
            "garage": 1,
            "image": "img/properties/properties-5.png",
            "type_icon": "img/building.png"
        },
        {
            "id": 5,
            "title": "Masons Villas",
            "price": 2505.11,
            "listing_for": "Rent",
            'author': 'Jhon Doe',
            'date': '5 days ago',
            "is_featured": false,
            "latitude": 51.513965,
            "longitude": -0.038837,
            "address": "123 Kathal St. Tampa City, ",
            "area": 2123,
            "room": 4,
            "bathroom": 3,
            "balcony": 3,
            "lounge": 1,
            "garage": 1,
            "image": "img/properties/properties-5.png",
            "type_icon": "img/building.png"
        },
        {
            "id": 6,
            "title": "Big Head House",
            "price": 2505.11,
            "listing_for": "Sale",
            'author': 'Jhon Doe',
            'date': '5 days ago',
            "is_featured": false,
            "latitude": 51.503965,
            "longitude": -0.058837,
            "address": "123 Kathal St. Tampa City, ",
            "area": 2123,
            "room": 4,
            "bathroom": 3,
            "balcony": 3,
            "lounge": 1,
            "garage": 1,
            "image": "img/properties/properties-6.png",
            "type_icon": "img/building.png"
        },
        {
            "id": 7,
            "title": "155/A Valley Street 7",
            "price": 2505.11,
            "listing_for": "Rent",
            'author': 'Jhon Doe',
            'date': '5 days ago',
            "is_featured": false,
            "latitude": 51.555385,
            "longitude": -0.128274,
            "address": "123 Kathal St. Tampa City, ",
            "area": 2123,
            "room": 4,
            "bathroom": 3,
            "balcony": 3,
            "lounge": 1,
            "garage": 1,
            "image": "img/properties/properties-5.png",
            "type_icon": "img/building.png"
        },
        {
            "id": 8,
            "title": "4552 Lynn Avenue 1",
            "price": 2505.11,
            "listing_for": "Sale",
            'author': 'Jhon Doe',
            'date': '5 days ago',
            "is_featured": false,
            "latitude": 51.560935,
            "longitude": -0.111365,
            "address": "123 Kathal St. Tampa City, ",
            "area": 2123,
            "room": 4,
            "bathroom": 3,
            "balcony": 3,
            "lounge": 1,
            "garage": 1,
            "image": "img/properties/properties-4.png",
            "type_icon": "img/building.png"
        },
        {
            "id": 9,
            "title": "4552 Lynn Avenue 2",
            "price": 2505.11,
            "listing_for": "Sale",
            'author': 'Jhon Doe',
            'date': '5 days ago',
            "is_featured": false,
            "latitude": 51.543803,
            "longitude": -0.036607,
            "address": "123 Kathal St. Tampa City, ",
            "area": 2123,
            "room": 4,
            "bathroom": 3,
            "balcony": 3,
            "lounge": 1,
            "garage": 1,
            "image": "img/properties/properties-3.png",
            "type_icon": "img/building.png"
        },
        {
            "id": 10,
            "title": "4552 Lynn Avenue 3",
            "price": 2505.11,
            "listing_for": "Sale",
            'author': 'Jhon Doe',
            'date': '5 days ago',
            "is_featured": false,
            "latitude": 51.527306,
            "longitude": -0.140977,
            "address": "123 Kathal St. Tampa City, ",
            "area": 2123,
            "room": 4,
            "bathroom": 3,
            "balcony": 3,
            "lounge": 1,
            "garage": 1,
            "image": "img/properties/properties-2.png",
            "type_icon": "img/building.png"
        },
        {
            "id": 11,
            "title": "4552 Lynn Avenue 4",
            "price": 2505.11,
            "listing_for": "Sale",
            'author': 'Jhon Doe',
            'date': '5 days ago',
            "is_featured": false,
            "latitude": 51.558907,
            "longitude": -0.041842,
            "address": "123 Kathal St. Tampa City, ",
            "area": 2123,
            "room": 4,
            "bathroom": 3,
            "balcony": 3,
            "lounge": 1,
            "garage": 1,
            "image": "img/properties/properties-1.png",
            "type_icon": "img/building.png"
        },
        {
            "id": 12,
            "title": "Sweet Family home",
            "price": 2505.11,
            "listing_for": "Sale",
            'author': 'Jhon Doe',
            'date': '5 days ago',
            "is_featured": true,
            "latitude": 51.550644,
            "longitude": -0.103493,
            "address": "123 Kathal St. Tampa City, ",
            "area": 2123,
            "room": 4,
            "bathroom": 3,
            "balcony": 3,
            "lounge": 1,
            "garage": 1,
            "image": "img/properties/properties-6.png",
            "type_icon": "img/building.png"
        },
        {
            "id": 13,
            "title": "Sweet Family home",
            "price": 2505.11,
            "listing_for": "Sale",
            'author': 'Jhon Doe',
            'date': '5 days ago',
            "is_featured": false,
            "latitude": 51.532112,
            "longitude": -0.051885,
            "address": "123 Kathal St. Tampa City, ",
            "area": 2123,
            "room": 4,
            "bathroom": 3,
            "balcony": 3,
            "lounge": 1,
            "garage": 1,
            "image": "img/properties/properties-5.png",
            "type_icon": "img/building.png"
        },
        {
            "id": 14,
            "title": "4552 Lynn Avenue 7",
            "price": 2505.11,
            "listing_for": "Sale",
            'author': 'Jhon Doe',
            'date': '5 days ago',
            "is_featured": true,
            "latitude": 51.531311,
            "longitude": -0.052314,
            "address": "123 Kathal St. Tampa City, ",
            "area": 2123,
            "room": 4,
            "bathroom": 3,
            "balcony": 3,
            "lounge": 1,
            "garage": 1,
            "image": "img/properties/properties-4.png",
            "type_icon": "img/building.png"
        },
        {
            "id": 15,
            "title": "Park avenue",
            "price": 2505.11,
            "listing_for": "Sale",
            'author': 'Jhon Doe',
            'date': '5 days ago',
            "is_featured": false,
            "latitude": 51.530189,
            "longitude": -0.078750,
            "address": "123 Kathal St. Tampa City, ",
            "area": 2123,
            "room": 4,
            "bathroom": 3,
            "balcony": 3,
            "lounge": 1,
            "garage": 1,
            "image": "img/properties/properties-3.png",
            "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 description = 'lorem ipsum dolor sit amet, cfeugiat congue qmper lorem ipsum dolor sit amet';
    if (property.description) {
        description = property.description
    }

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

    var Beds = 5;
    if (property.bedroom) {
        Beds = 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>" +
        "<div class='map-content'>" +
        "<div class='map-content-top'><h4><a href='properties-details.html'>" + title + "</a></h4>" +
        "<p class='address'> <i class='fa fa-map-marker'></i>" + address + "</p></div>" +
        "<p class='description'>" + description + "</p>" +
        "<div class='map-properties-fetures'> " +
        "<span><i class='flaticon-square-layouting-with-black-square-in-east-area'></i>  " + area + " sqft<sup>2</sup></span> " +
        "<span><i class='flaticon-bed'></i>  " + Beds + " Bed</span> " +
        "<span><i class='flaticon-holidays'></i>  " + bathroom + " Bath</span> " +
        "<span><i class='flaticon-vehicle'></i>    " + garage + " Garages</span> " +
        "</div>" +
        "<div class='map-properties-btns'><a href='properties-details.html' class='border-button-sm border-button-theme' style='margin-right:5px;'>$" + price + "</a><a href='properties-details.html' class='button-sm button-theme'>Details</a></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 description = 'lorem ipsum dolor sit amet, cfeugiat congue qmper lorem ipsum dolor sit amet';
    if (property.description) {
        description = property.description
    }

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

    var Beds = 5;
    if (property.bedroom) {
        Beds = 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="property-tag button alt featured">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-6 col-xs-12 property-hover" id="'+property.id+'"><div class="property">\n' +
            '                            <!-- Property img -->\n' +
            '                            <div class="property-img">\n' +
                                                is_featured +
            '                                <div class="property-tag button sale">For '+listing_for+'</div>\n' +
            '                                <div class="property-price">$'+price+'</div>\n' +
            '                                <img src="'+image+'" alt="fp" class="img-fluid">\n' +
            '                                <div class="property-overlay">\n' +
            '                                    <a href="properties-details.html" class="overlay-link">\n' +
            '                                        <i class="fa fa-link"></i>\n' +
            '                                    </a>\n' +
            '                                    <a class="overlay-link property-video" title="Lexus GS F">\n' +
            '                                        <i class="fa fa-video-camera"></i>\n' +
            '                                    </a>\n' +
            '                                    <div class="property-magnify-gallery">\n' +
            '                                        <a href="'+image+'" class="overlay-link">\n' +
            '                                            <i class="fa fa-expand"></i>\n' +
            '                                        </a>\n' +
            '\n' +
            '                                        <a href="img/properties/properties-2.png" class="hidden"></a>\n' +
            '                                        <a href="img/properties/properties-3.png" class="hidden"></a>\n' +
            '                                    </div>\n' +
            '                                </div>\n' +
            '                            </div>\n' +
            '                            <!-- Property content -->\n' +
            '                            <div class="property-content">\n' +
            '                                <!-- info -->\n' +
            '                                <div class="info">\n' +
            '                                    <!-- title -->\n' +
            '                                    <h1 class="title">\n' +
            '                                        <a href="properties-details.html">'+title+'</a>\n' +
            '                                    </h1>\n' +
            '                                    <!-- Property address -->\n' +
            '                                    <h3 class="property-address">\n' +
            '                                        <a href="properties-details.html">\n' +
            '                                            <i class="fa fa-map-marker"></i>'+address+',\n' +
            '                                        </a>\n' +
            '                                    </h3>\n' +
            '                                    <!-- Facilities List -->\n' +
            '                                    <ul class="facilities-list clearfix">\n' +
            '                                        <li>\n' +
            '                                            <i class="flaticon-square-layouting-with-black-square-in-east-area"></i>\n' +
            '                                            <span>'+area+' sq ft</span>\n' +
            '                                        </li>\n' +
            '                                        <li>\n' +
            '                                            <i class="flaticon-bed"></i>\n' +
            '                                            <span>'+Beds+' Beds</span>\n' +
            '                                        </li>\n' +
            '                                        <li>\n' +
            '                                            <i class="flaticon-monitor"></i>\n' +
            '                                            <span>TV </span>\n' +
            '                                        </li>\n' +
            '                                        <li>\n' +
            '                                            <i class="flaticon-holidays"></i>\n' +
            '                                            <span> '+bathroom+' Baths</span>\n' +
            '                                        </li>\n' +
            '                                        <li>\n' +
            '                                            <i class="flaticon-vehicle"></i>\n' +
            '                                            <span>'+garage+' Garage</span>\n' +
            '                                        </li>\n' +
            '                                        <li>\n' +
            '                                            <i class="flaticon-building"></i>\n' +
            '                                            <span> '+balcony+' Balcony</span>\n' +
            '                                        </li>\n' +
            '                                    </ul>\n' +
            '                                </div>\n' +
            '                                <!-- Property footer -->\n' +
            '                                <div class="property-footer">\n' +
            '                                <span class="left">\n' +
            '                                    <a href="#"><i class="fa fa-user"></i>'+author+'</a>\n' +
            '                                </span>\n' +
            '                                    <span class="right">\n' +
            '                                    <i class="fa fa-calendar"></i>' + date +
            '                                </span>\n' +
            '                                </div>\n' +
            '                            </div>\n' +
            '                        </div>';
            '                        </div>';
    }
    else{
        element = '<div class="property row g-0 fp2 clearfix property-hover" id="'+property.id+'">\n' +
            '                    <div class="col-lg-5 col-md-5 col-sm-12">\n' +
            '                        <!-- Property img -->\n' +
            '                        <div class="property-img">\n' +
                                        is_featured +
            '                            <div class="property-tag button sale">For '+listing_for+'</div>\n' +
            '                            <div class="property-price">$'+price+'</div>\n' +
            '                            <img src="img/properties/properties-list-1.png" alt="fp-list" class="img-responsive hp-1">\n' +
            '                            <div class="property-overlay">\n' +
            '                                <a href="properties-details.html" class="overlay-link">\n' +
            '                                    <i class="fa fa-link"></i>\n' +
            '                                </a>\n' +
            '                                <a class="overlay-link property-video" title="Lexus GS F">\n' +
            '                                    <i class="fa fa-video-camera"></i>\n' +
            '                                </a>\n' +
            '                                <div class="property-magnify-gallery">\n' +
            '                                    <a href="img/properties/properties-1.png" class="overlay-link">\n' +
            '                                        <i class="fa fa-expand"></i>\n' +
            '                                    </a>\n' +
            '                                    <a href="img/properties/properties-2.png" class="hidden"></a>\n' +
            '                                    <a href="img/properties/properties-3.png" class="hidden"></a>\n' +
            '                                </div>\n' +
            '                            </div>\n' +
            '                        </div>\n' +
            '                    </div>\n' +
            '                    <div class="col-lg-7 col-md-7 col-sm-12 property-content">\n' +
            '                        <div class="info">\n' +
            '                            <!-- title -->\n' +
            '                            <h1 class="title">\n' +
            '                                <a href="properties-details.html">'+title+'</a>\n' +
            '                            </h1>\n' +
            '                            <!-- Property address -->\n' +
            '                            <h3 class="property-address">\n' +
            '                                <a href="properties-details.html">\n' +
            '                                    <i class="fa fa-map-marker"></i> '+address+',\n' +
            '                                </a>\n' +
            '                            </h3>\n' +
            '                            <!-- Facilities List -->\n' +
            '                            <ul class="facilities-list clearfix">\n' +
            '                                <li>\n' +
            '                                    <i class="flaticon-square-layouting-with-black-square-in-east-area"></i>\n' +
            '                                    <span>'+area+' sq ft</span>\n' +
            '                                </li>\n' +
            '                                <li>\n' +
            '                                    <i class="flaticon-bed"></i>\n' +
            '                                    <span>'+Beds+' Beds</span>\n' +
            '                                </li>\n' +
            '                                <li>\n' +
            '                                    <i class="flaticon-monitor"></i>\n' +
            '                                    <span>TV </span>\n' +
            '                                </li>\n' +
            '                                <li>\n' +
            '                                    <i class="flaticon-holidays"></i>\n' +
            '                                    <span> '+bathroom+' Baths</span>\n' +
            '                                </li>\n' +
            '                                <li>\n' +
            '                                    <i class="flaticon-vehicle"></i>\n' +
            '                                    <span>'+garage+' Garage</span>\n' +
            '                                </li>\n' +
            '                                <li>\n' +
            '                                    <i class="flaticon-building"></i>\n' +
            '                                    <span> '+balcony+' Balcony</span>\n' +
            '                                </li>\n' +
            '                            </ul>\n' +
            '                            <!-- Property footer -->\n' +
            '                        </div>\n' +
            '                        <div class="property-footer">\n' +
            '                            <span class="left">\n' +
            '                                <a href="#"><i class="fa fa-user"></i>'+author+'</a>\n' +
            '                            </span>\n' +
            '                            <span class="right">\n' +
            '                                <i class="fa fa-calendar"></i>' + date +
            '                            </span>\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('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
        attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
    }).addTo(map);


    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/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-hover').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');
}