const highlightStyle = new ol.style.Style({
    fill: new ol.style.Fill({
        color: "rgba(0,0,125,0.1)"
    }),
    stroke: new ol.style.Stroke({
        color: "#3399CC",
        width: 2
    })
});

const nohighlightstyle = new ol.style.Style({
    stroke: new ol.style.Stroke({
        color: "#3399CC",
        width: 1
    })
});

const kmlSource = new ol.source.Vector({
    url: "/static/maps/areas.kml",
    format: new ol.format.KML({
        extractStyles: false
    })
})

const vector = new ol.layer.Vector({
    source: kmlSource,
    style: function (feature) {
        var style = nohighlightstyle;
        return style;
    }
});

const tiles = new ol.layer.Tile({
    source: new ol.source.OSM()
});

const map = new ol.Map({
    layers: [tiles, vector],
    target: "map",
    view: new ol.View({
        center: ol.proj.fromLonLat([17.5, 42.5]),
        zoom: 4,
        multiWorld: true
    })
});

var tableRows = document.getElementsByTagName('tr');
var highlights = [];
var maptiles = {};

maptiles["1"] = [
    
    "10012877",
    
    "10012866",
    
    "10012865",
    
    "10012864",
    
    "10012876",
    
    "10012082",
    
    "10012867",
    
    "10012880",
    
    "10012879",
    
    "10012878",
    
    "10012872",
    
    "10012874",
    
    "10012873",
    
    "10012875",
    
    "10012891",
    
    "10012893",
    
    "10012889",
    
    "10012898",
    
    "10012901",
    
    "10012899",
    
    "10012888",
    
    "10012896",
    
    "10012903",
    
    "10012897",
    
    "10012892",
    
    "10012886",
    
    "10012900",
    
    "10012890",
    
    "10012894",
    
    "10012868",
    
    "10012881",
    
    "10012882",
    
    "10012072",
    
    "10012895",
    
    "10012887",
    
];

maptiles["2"] = [
    
    "10012074",
    
];

maptiles["3"] = [
    
    "10016691",
    
    "10021009",
    
    "10021176",
    
    "10021191",
    
    "10021762",
    
    "10021747",
    
    "10021761",
    
    "10021745",
    
    "10021153",
    
    "10016692",
    
    "10016728",
    
    "10016689",
    
    "10016688",
    
    "10016687",
    
    "10021202",
    
    "10021203",
    
    "10021178",
    
    "10021201",
    
    "10021175",
    
    "10021024",
    
    "10021017",
    
    "10021173",
    
    "10021185",
    
    "10021014",
    
    "10021169",
    
    "10021206",
    
    "10021170",
    
    "10021166",
    
    "10021015",
    
    "10021023",
    
    "10021163",
    
    "10021172",
    
    "10021184",
    
    "10021211",
    
    "10021199",
    
    "10021171",
    
    "10021165",
    
    "10021181",
    
    "10021016",
    
    "10021208",
    
    "10021192",
    
    "10021205",
    
    "10021189",
    
    "10021018",
    
    "10021200",
    
    "10021213",
    
    "10021204",
    
    "10021174",
    
    "10021210",
    
    "10021182",
    
    "10021207",
    
    "10021012",
    
    "10021167",
    
    "10021212",
    
    "10021021",
    
    "10021188",
    
    "10021177",
    
    "10021164",
    
    "10021186",
    
    "10021187",
    
    "10021013",
    
    "10021196",
    
    "10021020",
    
    "10021197",
    
    "10021194",
    
    "10021019",
    
    "10021180",
    
    "10021010",
    
    "10021193",
    
    "10021011",
    
    "10021198",
    
    "10021183",
    
    "10021209",
    
    "10021168",
    
    "10021190",
    
    "10021179",
    
    "10021195",
    
    "10021022",
    
];

maptiles["4"] = [
    
    "10021379",
    
];

maptiles["5"] = [
    
    "10021512",
    
    "10021379",
    
    "10021506",
    
    "10021527",
    
    "10021491",
    
    "10021539",
    
    "10021505",
    
    "10021363",
    
    "10021337",
    
    "10021356",
    
    "10021340",
    
    "10021339",
    
    "10021341",
    
    "10021370",
    
    "10021371",
    
    "10021376",
    
    "10021369",
    
    "10021384",
    
    "10021383",
    
    "10021542",
    
    "10021368",
    
    "10021366",
    
    "10021359",
    
    "10021357",
    
    "10021346",
    
    "10021362",
    
    "10021354",
    
    "10021511",
    
    "10021513",
    
    "10021516",
    
    "10021344",
    
    "10021381",
    
    "10021525",
    
    "10021380",
    
    "10021517",
    
    "10021358",
    
    "10021348",
    
    "10021540",
    
    "10021378",
    
    "10021514",
    
    "10021547",
    
    "10021361",
    
    "10021546",
    
    "10021382",
    
    "10021534",
    
    "10021372",
    
    "10021529",
    
    "10021515",
    
    "10021352",
    
    "10021545",
    
    "10021510",
    
    "10021342",
    
    "10021360",
    
    "10021347",
    
    "10021544",
    
    "10021345",
    
    "10021374",
    
    "10021343",
    
    "10021350",
    
    "10021526",
    
    "10021375",
    
    "10021353",
    
    "10021355",
    
    "10021537",
    
    "10021543",
    
    "10021373",
    
    "10021538",
    
    "10021548",
    
    "10021377",
    
    "10021351",
    
    "10021349",
    
    "10021536",
    
    "10021541",
    
];

maptiles["6"] = [
    
    "10021334",
    
    "10021333",
    
    "10021332",
    
    "10021335",
    
];

maptiles["7"] = [
    
];

maptiles["8"] = [
    
    "10017985",
    
    "10017986",
    
];

maptiles["9"] = [
    
    "10021338",
    
    "10021470",
    
    "10021369",
    
    "10021384",
    
    "10021386",
    
    "10021385",
    
    "10021389",
    
    "10021469",
    
    "10021284",
    
    "10021226",
    
    "10021311",
    
    "10021267",
    
    "10021367",
    
    "10021262",
    
    "10021292",
    
    "10021391",
    
    "10021336",
    
    "10021287",
    
    "10021260",
    
    "10021392",
    
    "10021277",
    
    "10021468",
    
    "10021222",
    
    "10021395",
    
    "10021283",
    
    "10021280",
    
    "10021393",
    
    "10021266",
    
    "10021394",
    
    "10021282",
    
    "10021286",
    
    "10021388",
    
    "10021467",
    
    "10021264",
    
    "10021368",
    
    "10021255",
    
    "10021230",
    
    "10021364",
    
    "10021265",
    
    "10021258",
    
    "10021257",
    
    "10021263",
    
    "10021254",
    
    "10021229",
    
    "10021278",
    
    "10021279",
    
    "10021387",
    
    "10021256",
    
    "10021276",
    
    "10021365",
    
    "10021285",
    
    "10021281",
    
    "10021227",
    
    "10021366",
    
    "10021390",
    
    "10021223",
    
];

maptiles["10"] = [
    
    "10015026",
    
];


for (var i = 0; i < tableRows.length; i += 1) {
    if ( tableRows[i].id != "header" ) {
        tableRows[i].addEventListener('mouseover', function(e) {
            highlights = maptiles[this.id];
            updateMapSize();
        });
    }
}

function updateMapSize() {
    var extent = ol.extent.createEmpty();
    kmlSource.forEachFeature(function(feature){
        feature.setStyle(nohighlightstyle);
        for (let i = 0; i < highlights.length; i++) {
            if (feature.get("name") == highlights[i]) {
                ol.extent.extend(extent, feature.getGeometry().getExtent());
                feature.setStyle(highlightStyle);
            }
        }
    });
    map.getView().fit(extent);
}