(function($) {
    /**
     * Toggles the visibility of an element and updates the content of another element.
     *
     * @param {string} divid - The ID of the element to toggle.
     * @return {boolean} - Returns false to prevent default behavior.
     */
    window.showdiv = function(divid) {
        var storyContainer = $("#storyid-" + divid);
        var description = storyContainer.find(".description");
        var summary = storyContainer.find(".summary");
        var generatedSummary = storyContainer.find(".generated.summary"); // Targeting the generated summary
      
        // If the summary is generated, toggle the description and hide the generated summary
        if (generatedSummary.length > 0) {
          // Toggle only the description
          description.toggle();
          generatedSummary.toggle(); // Toggle the visibility of the generated summary
        } else {
          // If the summary is not generated (i.e., it comes from the XML),
          // toggle the description but ensure the original summary stays visible
          description.toggle();
          summary.show(); // Ensure the original summary remains visible
        }
      
        // Update the link text based on the visibility of the description
        var moreLink = storyContainer.find(".read-more");
        moreLink.html(description.is(':visible') ? "Show Less" : "Read More");
      
        return false; // Prevent default action of the anchor tag
    };
      
    /**
     * Process story content with style tags
     * Extract styles and apply them to the page
     */
    function processStoryStyles() {
        // Find all story-content divs
        $('.story-content').each(function () {
          var storyId = $(this).data('story-id');
          var storyContent = $(this).data('story-content');
      
          // Create a temporary div to parse the HTML content
          var tempDiv = document.createElement('div');
          tempDiv.innerHTML = storyContent;
      
          // Extract style tags
          var styleTags = tempDiv.getElementsByTagName('style');
          var stylesArray = [];
      
          // Convert the HTMLCollection to an array to avoid issues when removing elements
          for (var i = 0; i < styleTags.length; i++) {
            stylesArray.push(styleTags[i]);
          }
      
          // Process each style tag
          stylesArray.forEach(function (styleTag) {
            // Extract the style content
            var styleContent = styleTag.innerHTML;
      
            // Create a new style element and add to the head
            var newStyle = document.createElement('style');
            newStyle.textContent = styleContent;
            document.head.appendChild(newStyle);
      
            // Remove the style tag from the temp div
            styleTag.parentNode.removeChild(styleTag);
          });
      
          // Replace the data attribute div with the processed content
          $(this).html(tempDiv.innerHTML);
          $(this).removeAttr('data-story-content');
        });
    }
      
    // Run when the document is ready
    $(document).ready(function () {
        processStoryStyles();
    });
      
    // Debug Display Behaviors
    var acc = document.getElementsByClassName("drawer");
    var i;
      
    for (i = 0; i < acc.length; i++) {
        acc[i].addEventListener("click", function () {
          /* Toggle between adding and removing the "active" class,
              to highlight the button that controls the panel */
          this.classList.toggle("active");
      
          /* Toggle between hiding and showing the active panel */
          var panel = this.nextElementSibling;
          if (panel.style.display === "block") {
            panel.style.display = "none";
          } else {
            panel.style.display = "block";
          }
        });
    }
})(jQuery);