searchBar = "";

window.onload = function() {
	// Get the first element with the class "hs-callout-type-note"
	var element = document.getElementsByClassName("hs-callout-type-note")[0];

	if(element) {
		// Extract the text from the element and remove any leading/trailing white space
		var text = element.textContent.trim();

		//remove the styling of the container
		element.style.borderLeftWidth = 0;
		element.style.backgroundColor = "transparent";

		// Check if the text is a URL
		var urlPattern = new RegExp('^(https?:\\/\\/)?'+ // protocol
		  '((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|'+ // domain name and extension
		  '((\\d{1,3}\\.){3}\\d{1,3}))'+ // OR ip (v4) address
		  '(\\:\\d+)?'+ // port
		  '(\\/[-a-z\\d%_.~+]*)*'+ // path
		  '(\\?[;&a-z\\d%_.~+=-]*)?'+ // query string
		  '(\\#[-a-z\\d_]*)?$','i'); // fragment locator

		if(urlPattern.test(text)) {
		  // Replace the content of the element with an iframe
		  element.innerHTML = '<iframe src="' + text + '" style="width: 100%; height: 100%; min-height: 800px;" frameborder="0"></iframe>';
		}
	}
	

	console.log('LOG Start container overlay');
   // Container for search and maximize buttons
    let container = document.createElement('div');
    container.style.position = 'fixed';
    container.style.top = '10px';
    container.style.right = '10px';
    container.style.zIndex = '10000'; // High z-index
    container.style.backgroundColor = '#f9f9f9'; // Light background
    container.style.padding = '10px';
    container.style.borderRadius = '8px';
    container.style.boxShadow = '0 4px 8px rgba(0, 0, 0, 0.1)'; // Drop shadow

    // Search box
    let searchBox = document.createElement('input');
    searchBox.type = 'text';
    searchBox.placeholder = 'Stichwort eingeben...';
    searchBox.style.marginRight = '10px';

    // Search button
    let searchButton = document.createElement('button');
    searchButton.textContent = 'Suchen';
    searchButton.style.backgroundColor = '#187d88'; // Blue color
    searchButton.style.color = 'white';
    searchButton.style.border = 'none';
    searchButton.style.borderRadius = '4px';
    searchButton.style.padding = '5px 10px';
    searchButton.style.cursor = 'pointer';
    searchButton.style.transition = 'background-color 0.3s'; // Transition for hover effect

    searchButton.addEventListener('mouseover', function() {
        this.style.backgroundColor = '#086d78'; // Darken on hover
    });

    searchButton.addEventListener('mouseout', function() {
        this.style.backgroundColor = '#187d88'; // Reset color
    });

	searchButton.addEventListener('click', function() {
		let keyword = searchBox.value;
		let regEx = new RegExp(keyword, 'gi');
		
		// Reset previously highlighted text
		document.querySelectorAll('.highlighted').forEach(function(el) {
			el.outerHTML = el.innerHTML;
		});
		
		let content = document.querySelector('.kb-article');
		content.innerHTML = content.innerHTML.replace(regEx, match => `<span class="highlighted" style="background-color: yellow;">${match}</span>`);
	});

	function syncInputValues() {
		// Get the original input element by its class
		let originalInput = document.querySelector('.kb-search__box .kb-search__input');

		// Get the created search box
		let searchBox = document.querySelector('input[placeholder="Stichwort eingeben..."]');

		// Check if both elements exist
		if (originalInput && searchBox) {
			// Add an event listener to the original input
			originalInput.addEventListener('input', function() {
				// Update the value of the search box with the value of the original input
				searchBox.value = this.value;
			});
		}
	}





	// Maximize button
    let maximizeButton = document.createElement('button');
    maximizeButton.textContent = 'Artikel maximieren';
    maximizeButton.style.backgroundColor = '#187d88'; // Blue color
    maximizeButton.style.color = 'white';
    maximizeButton.style.border = 'none';
    maximizeButton.style.borderRadius = '4px';
    maximizeButton.style.padding = '5px 10px';
	maximizeButton.style.marginLeft = '10px';
    maximizeButton.style.cursor = 'pointer';
    maximizeButton.style.transition = 'background-color 0.3s'; // Transition for hover effect

    maximizeButton.addEventListener('mouseover', function() {
        this.style.backgroundColor = '#086d78'; // Darken on hover
    });

    maximizeButton.addEventListener('mouseout', function() {
        this.style.backgroundColor = '#187d88'; // Reset color
    });
	
	maximizeButton.addEventListener('click', function() {
		document.body.classList.toggle('maximized');
	});
	
	// Add elements to the container
    container.appendChild(maximizeButton);

    // Add container to the page
    document.body.appendChild(container);
	console.log('END container overlay');

	// Funktion, die aufgerufen wird, wenn sich die Klassen des Body-Elements ändern
	function handleClassChange() {
		let body = document.body;
		let kbContentDiv = document.querySelector('.kb-content');

		if (body.classList.contains('sidebar-is-sticky') && body.classList.contains('maximized')) {
			kbContentDiv.style.paddingLeft = '240px';
		} else {
			kbContentDiv.style.paddingLeft = ''; // Entfernen Sie den paddingLeft-Stil, falls Sie zum ursprünglichen Zustand zurückkehren möchten
		}
	}

	// Erstellen Sie den MutationObserver
	let observer = new MutationObserver(mutations => {
		mutations.forEach(mutation => {
			if (mutation.attributeName === "class") {
				handleClassChange();
			}
		});
	});

	// Starten Sie die Überwachung von Klassenänderungen am Body-Element
	observer.observe(document.body, {
		attributes: true,
		attributeFilter: ['class']
	});


	



	// Get the search bar container
    searchBar = document.querySelector('.kb-search__bar');

    // Create the new search button
    let searchButtonInner = document.createElement('button');
    searchButtonInner.textContent = 'Suchen';
    searchButtonInner.style.backgroundColor = '#187d88'; // Blue color
    searchButtonInner.style.color = 'white';
    searchButtonInner.style.border = 'none';
    searchButtonInner.style.borderRadius = '4px';
    searchButtonInner.style.padding = '5px 10px';
    searchButtonInner.style.marginLeft = '10px';
	searchButtonInner.style.marginRight = '10px';
    searchButtonInner.style.cursor = 'pointer';
    searchButtonInner.style.transition = 'background-color 0.3s'; // Transition for hover effect

    searchButtonInner.addEventListener('mouseover', function() {
        this.style.backgroundColor = '#086d78'; // Darken on hover
    });

    searchButtonInner.addEventListener('mouseout', function() {
        this.style.backgroundColor = '#187d88'; // Reset color
    });
	
	console.log("searchbar" + searchBar);
	
	searchButtonInner.addEventListener('click', function() {
		let keyword = document.querySelector('.kb-search__box .kb-search__input').value;
		let regEx = new RegExp(keyword, 'gi');
		
		console.log("LOG keyword " + keyword);
		
		// Reset previously highlighted text
		document.querySelectorAll('.highlighted').forEach(function(el) {
			el.outerHTML = el.innerHTML;
		});
		
		let content = document.querySelector('.kb-article');
		content.innerHTML = content.innerHTML.replace(regEx, match => `<span class="highlighted" style="background-color: yellow;">${match}</span>`);
	});

    // Append the new search button to the search bar container
    searchBar.appendChild(searchButtonInner);

	// Call the function to set up the synchronization
	//syncInputValues();

	console.log('LOG TOC');
	
	// Finden Sie das kb-article div und alle seine h3 und h4 Überschriften
	articleDiv = document.querySelector('.kb-article');
	let headings = articleDiv.querySelectorAll('h3, h4');

	if (!headings.length) {
		console.log("Keine Überschriften im Artikel gefunden.");
	} else {
		// Erstellen Sie das Inhaltsverzeichnis
		let toc = document.createElement('div');
		toc.style.border = '1px solid #ccc';  // Optional: Ein einfacher Stil für das TOC
		toc.style.padding = '10px';
		toc.style.marginBottom = '20px';
		toc.innerHTML = '<strong>Inhaltsverzeichnis</strong><br>';

		headings.forEach((heading, index) => {
			// Jeder Überschrift eine eindeutige ID geben, wenn sie keine hat
			if (!heading.id) {
				heading.id = 'heading-' + index;
			}

			// Erstellen Sie einen Link für das Inhaltsverzeichnis
			let link = document.createElement('a');
			link.href = '#' + heading.id;
			link.textContent = heading.textContent;
			link.style.display = 'block';   // Jeder Link in einer eigenen Zeile

			// Fügen Sie den Link zum TOC hinzu
			toc.appendChild(link);
		});

		// Finden Sie das erste h2-Element und fügen Sie das TOC danach ein
		let firstH2 = articleDiv.querySelector('h2');
		if (firstH2 && firstH2.nextSibling) {
			articleDiv.insertBefore(toc, firstH2.nextSibling);
		} else {
			console.log("Es wurde kein h2 im Artikel gefunden. Das TOC wird am Anfang des Artikels eingefügt.");
			articleDiv.insertBefore(toc, articleDiv.firstChild);
		}
	}

	console.log('LOG img alt text');
	
	articleDiv = document.querySelector('.kb-article');
	
    // Select all images
    let images = articleDiv.querySelectorAll('img');

/*
    images.forEach(function(img) {
        // Get the alt text
        let altText = img.getAttribute('alt');

        // If alt text exists and has at least one " ", create a caption
        if (altText && altText.includes(" ")) {
            let caption = document.createElement('div');
            caption.className = 'image-caption';  // Add a class for styling
            caption.innerText = altText;

            // Insert the caption after the image
            img.parentNode.insertBefore(caption, img.nextSibling);
        }
    });
*/

};