var openHelp = document.getElementById("helpButton");
openHelp.onclick = function() {
    Swal.fire({
        title: 'Οδηγίες',
        html: `Παρατηρούμε τον χάρτη αναγλύφου της Ελλάδας που κάνει εμφανή τις περιοχές με βουνά και τις πεδιάδες της Ελλάδας. <br><br> Υπάρχει δυνατότητα εμφάνισης των θέσεων και των ονομάτων βουνών της Ελλάδας, όπως και των μεγαλύτερων πεδιάδων της.`,
        showConfirmButton: false,
        showCloseButton: true,
        heightAuto: false
    })
}


// Initialize the map
var map = L.map('map').setView([39.0742, 21.8243], 7); // Set view to Greece

let mountainsShown = false;
let valleysShown = false;

// Add the tile layer (map background)
L.tileLayer('assets/tiles//{z}/{x}/{y}.png.tile', {
    attribution: '&copy; <a href="https://openstreetmap.org/copyright">OpenStreetMap</a> | &copy; <a href="https://opentopomap.org">OpenTopoMap</a> (<a href="https://creativecommons.org/licenses/by-sa/3.0/">CC-BY-SA</a>)',
    maxZoom: 8,
    minZoom: 7,

}).addTo(map);

// Set the maximum bounds
var maxBounds = L.latLngBounds(
    L.latLng(34.3, 18.3), // southwest corner
    L.latLng(43, 29.5) // northeast corner
);
map.setMaxBounds(maxBounds);

// Custom icon for mountain markers
var mountainIcon = L.icon({
    iconUrl: 'assets/images/empty.png', // replace with the path to your mountain icon
    iconSize: [1, 1],
    iconAnchor: [1, 1],
    popupAnchor: [1, 1]
});

// Custom icon for valley markers
var valleyIcon = L.icon({
    iconUrl: 'assets/images/empty.png', // replace with the path to your valley icon
    iconSize: [1, 1],
    iconAnchor: [1, 1],
    popupAnchor: [1, 1]
});

// Mountain markers data
var mountainMarkers = [
    { name: 'Παπίκιο', coords: [41.21931103735058, 25.336974975975668], height: 1510 },
    { name: 'Φαλακρό', coords: [41.28540312653078, 24.090590764394353], height: 2232 },
    { name: 'Παγγαίο', coords: [40.91712613749605, 24.062869689354976], height: 1956 },
    { name: 'Κερδύλια', coords: [40.77171091874907, 23.623402154813935], height: 1092 },
    { name: 'Χολομώντας', coords: [40.47121198304702, 23.373694442518698], height: 1165 },
    { name: 'Βέρμιο', coords: [40.57174900332476, 22.00877421747063], height: 2065 },
    { name: 'Όλυμπος', coords: [40.08609245173583, 22.343725480907963], height: 1918 },
    { name: 'Πήλιο', coords: [39.36383928317408, 23.112659348847295], height: 1624 },
    { name: 'Σμόλικας (Πίνδος)', coords: [40.08604077179309, 20.921304764599725], height: 2637 },
    { name: 'Ακαρνανικά όρη', coords: [38.77560494066961, 20.965285071699384], height: 1589 },
    { name: 'Βαρδούσια (Κόρακας)', coords: [38.61260753029805, 22.113667195147038], height: 2495 },
    { name: 'Παρνασσός', coords: [38.5396393321961, 22.601937127939234], height: 2456 },
    { name: 'Δίρφυς', coords: [38.59238811187214, 23.91942163794794], height: 1743 },
    { name: 'Αροάνια (Χελμός)', coords: [38.01336154350347, 22.18988395106415], height: 2355 },
    { name: 'Μαίναλο', coords: [37.61869249534027, 22.667272539530362   ], height: 1980 },
    { name: 'Πάρνωνας (Μαλεβός)', coords: [37.15589890242065, 22.14621653685553   ], height: 1934 },
    { name: 'Ταΰγετος', coords: [36.9648, 22.3712], height: 2407 },
    { name: 'Λευκά Όρη', coords: [35.3310535971463, 24.02960810461829], height: 2453 },
    { name: 'Ίδη (Ψηλορείτης)', coords: [35.22817649796249, 24.831620350272598], height: 2456 },
    { name: 'Δίκτη', coords: [35.14292414091042, 25.507207482254895], height: 2148 },
];

// Valley markers data
var valleyMarkers = [
    { name: 'Θεσσαλονίκης - Γιαννιτσών', coords: [40.729359835550795, 22.363331020097274] },
    { name: 'Θεσσαλίας', coords: [39.5459703913268, 22.132704586718482] },
    { name: 'Σερρών', coords: [41.045025058294186, 23.46155213142492] },
    { name: 'Κωπαΐδας', coords: [38.427902628802606, 23.088156953573517] },
    { name: 'Έβρου', coords: [40.88396763485041, 26.21573713056535] },
    { name: 'Ξάνθης - Κομοτηνής', coords: [41.05330611226496, 25.119866009529623] },
    { name: 'Δράμας', coords: [41.107827994257725, 24.101214795487657] },
    { name: 'Ηλείας', coords: [37.918593143236855, 21.243145486543096] }
];

var mountainMarkersOnMap = [];

function showMountains() {
    mountainMarkers.forEach(function(mountain) {
      let marker = L.tooltip(mountain.coords, {
        permanent: true,
        direction: 'top',
        offset: [0, 0],
        className: "tooltipMountain"
      })
        .setContent(mountain.name)
        .addTo(map);

      mountainMarkersOnMap.push(marker);
    });

  }

function hideMountains() {
  mountainMarkersOnMap.forEach(function(marker) {
    marker.remove();
  });
  mountainMarkersOnMap = [];
}

//function to toggle mountains
function toggleMountains() {
    if (mountainsShown) {
        hideMountains();
        mountainsShown = false;
        document.getElementById('showMountains').classList.remove('buttonMountain');
    } else {
        showMountains();
        mountainsShown = true;
        document.getElementById('showMountains').classList.add('buttonMountain');
    }
}

let valleyMarkersOnMap = [];

// Function to show valleys
function showValleys() {
    valleyMarkers.forEach(function(valley) {
        let marker = L.marker(valley.coords, { icon: valleyIcon })
            //.bindPopup(valley.name)
            .addTo(map)
            .bindTooltip(valley.name, { permanent: true, direction: 'top', offset: [0, 0] , className: "tooltipValley"});
        valleyMarkersOnMap.push(marker);
    });
}

// Function to hide valleys
function hideValleys() {
    valleyMarkersOnMap.forEach(function(marker) {
        marker.remove();
      });
      valleyMarkersOnMap = [];
}

// Function to toggle valleys
function toggleValleys() {
    if (valleysShown) {
        hideValleys();
        valleysShown = false;
        document.getElementById('showValleys').classList.remove('buttonValley');
    } else {
        showValleys();
        valleysShown = true;
        document.getElementById('showValleys').classList.add('buttonValley');
    }
}

// Add event listeners to buttons
document.getElementById('showMountains').addEventListener('click', toggleMountains);
document.getElementById('showValleys').addEventListener('click', toggleValleys);
