var map;
var markersManager;
var marker = [];

function initMap(id) {
    map = new Camea.Maps.Api(id);
    map.init().addControls().addLayerControl();
    coordsList = new Camea.Maps.CoordsList();
    markersManager = map.Factory.MarkersManager();
}

function createMarker(id, lat, lng, number) {
    var coords = new Camea.Maps.Coords(lat, lng);
    coordsList.add(coords);
    var icon = createIcon(number);
    marker[id] = map.Factory.Marker(id);
    marker[id].setCoords(coords);
    marker[id].setIcon(icon);
    marker[id].setStyle({
        cursor: "pointer",
    });
    markersManager.addMarker(marker[id]);
}

function createIcon(number) {
    var icon = new Camea.Maps.Icon();
    icon.setWidth(30);
    icon.setHeight(30);
    icon.setMinWidth(2);
    icon.setMinHeight(2);
    icon.setMinZoom(3);
    icon.setMaxZoom(21);
    icon.setLeftAnchor(0.5);
    icon.setTopAnchor(0.5);
    icon.setSrc(document.querySelector("img[name^=icon-" + number + "]").src);

    return icon;
}

function setCenter() {
    map.setCenter(coordsList);
}

function drawMarkers() {
    document.querySelectorAll("img[name^=icon]").forEach(function (el) {
        var icons = document.querySelectorAll("img[name=" + el.name + "]");
        icons.forEach(function (icon) {
            if (icon.name.split("-")[1] == "1") {
                icon.src = SMap.CONFIG.img + "/marker/drop-red.png";
            } else if (icon.name.split("-")[1] == "2") {
                icon.src = SMap.CONFIG.img + "/marker/drop-blue.png";
            } else {
                icon.src = SMap.CONFIG.img + "/marker/drop-yellow.png";
            }

            setCaption(icon, icon.name.split("-")[1]);
        });
    });
}

function setCaption(icon, i) {
    var caption = JAK.mel(
        "div",
        {},
        {
            position: "absolute",
            left: "50%",
            top: "50%",
            textAlign: "center",
            width: "22px",
            color: "white",
            fontWeight: "bold",
            fontSize: "12px",
            transform: "translate(-50%, -80%)",
        }
    );
    caption.innerHTML = i;
    icon.parentNode.appendChild(caption);
}