document.addEventListener('DOMContentLoaded', function() {
  function addTextToElement() {
    const allDivs = document.querySelectorAll('div[data-acc-text]');
    
    let targetDiv = null;
    for (let div of allDivs) {
      if (div.getAttribute('data-acc-text').startsWith('ΣΥΝΤΕΛΕΣΤΕΣ ΑΝΑΠΤΥΞΗΣ ΑΝΤΙΚΕΙΜΕΝΟΥ')) {
        targetDiv = div;
        break;
      }
    }
    
    if (targetDiv) {
      // Create a new div for our content
      const newDiv = document.createElement('div');
      newDiv.style.backgroundColor = '#f8f3f2';
      newDiv.style.padding = '0px 10px';
      newDiv.style.borderRadius = '5px';
      newDiv.style.color = '#000000';
      newDiv.style.lineHeight = '1.4';
      newDiv.style.fontFamily = '"IEP Sans Charset0_v9uR77DB5F63E"';
      newDiv.style.position = 'relative';
      newDiv.style.top = '-1em';
      
      // Create a container for text and image
      const contentContainer = document.createElement('div');
      
      // Add the title information
      const titleInfo = document.createElement('p');
      titleInfo.innerHTML = "Τίτλος: Το δημογραφικό πρόβλημα<br>Έκδοση: 1.0<br>Ημερομηνία Δημιουργίας: 11-05-2024";
      titleInfo.style.margin = '0 0 10px 15px';
      // Default font size that will be updated
      titleInfo.style.fontSize = '16px';
      
      contentContainer.appendChild(titleInfo);
      
      // Add the main text content
      const textParagraph = document.createElement('p');
      textParagraph.style.borderTop = '1px dashed #ccc';
      textParagraph.style.padding = '10px';
      textParagraph.textContent = "Το παρόν αναπτύχθηκε στο πλαίσιο της Πράξης «Συγγραφή, Αξιολόγηση και Ένταξη διδακτικών βιβλίων στο Μητρώο Διδακτικών Βιβλίων και στην Ψηφιακή Βιβλιοθήκη Διδακτικών Βιβλίων» με κωδικό ΟΠΣ (MIS) 6010165, του Προγράμματος «Ανθρώπινο Δυναμικό και Κοινωνική Συνοχή 2021-2027» που υλοποιείται από το Ινστιτούτο Εκπαιδευτικής Πολιτικής και συγχρηματοδοτείται από το Ευρωπαϊκό Κοινωνικό Ταμείο.";
      textParagraph.style.margin = '0 0 10px 0';
      textParagraph.style.fontStyle = 'italic';
      // Default font size that will be updated
      textParagraph.style.fontSize = '12px';
      
      contentContainer.appendChild(textParagraph);
      
      // Create and add the image
      const logoImage = document.createElement('img');
      logoImage.src = 'logo-line.jpg';
      logoImage.style.width = '100%';
      logoImage.style.display = 'block';
      logoImage.style.marginTop = '10px';
      logoImage.alt = 'Logo Line';
      contentContainer.appendChild(logoImage);
      
      // Add the content container to our main div
      newDiv.appendChild(contentContainer);
      
      // Append the new div to the target element
      targetDiv.appendChild(newDiv);
      
      // Function to update font sizes based on slide width
      function updateFontSizes() {
        // Find the slide container - looking for primary-slide or similar container
        const slideContainer = document.querySelector('.primary-slide') || 
                              document.querySelector('.slide-container') || 
                              document.querySelector('#preso') ||
                              document.querySelector('.cs-HTML');
        
        if (slideContainer) {
          const slideWidth = slideContainer.offsetWidth;
          
          // Adjust font sizes based on slide width
          if (slideWidth < 480) {
            // Extra small slides
            titleInfo.style.fontSize = '8px';
            textParagraph.style.fontSize = '6px';
            textParagraph.style.padding = '2px';
            textParagraph.style.lineHeight = '1.2';
            titleInfo.style.margin = '5px 0 2px 2px';
            textParagraph.style.margin = '0 0 1px 0';
            logoImage.style.marginTop = '2px';
          } else if (slideWidth < 768) {
            // Small slides
            titleInfo.style.fontSize = '12px';
            textParagraph.style.fontSize = '7px';
            textParagraph.style.padding = '5px';
            titleInfo.style.margin = '0 0 5px 5px';
            logoImage.style.marginTop = '5px';
          } else if (slideWidth < 1024) {
            // Medium slides
            titleInfo.style.fontSize = '14px';
            textParagraph.style.fontSize = '8px';
            textParagraph.style.padding = '8px 0px';
            titleInfo.style.margin = '0 0 5px 10px';
            textParagraph.style.margin = '0 0 5px 0px';
            logoImage.style.marginTop = '5px';
          } else {
            // Large slides
            titleInfo.style.fontSize = '16px';
            textParagraph.style.padding = '10px';
            textParagraph.style.fontSize = '12px';
            titleInfo.style.margin = '0 0 10px 10px';
          }
        }
      }
      
      // Initial call to set font sizes
      updateFontSizes();
      
      // Add resize listener to update font sizes when window is resized
      window.addEventListener('resize', updateFontSizes);
      
      // Also check for any custom resize events that might be triggered by the Storyline player
      document.addEventListener('SlideResized', updateFontSizes);
      
      console.log("Title, text and logo added to target element with responsive font sizes");
    } else {
      console.log("Target element not found, retrying...");
      setTimeout(addTextToElement, 1000);
    }
  }
  
  // Start the process
  addTextToElement();
});