MediaWiki:Common.js

/* ========================================
   MediaWiki:Common.js - Fixed Header Spacing
   FIXED VERSION - Addresses all positioning issues
   ======================================== */

$(document).ready(function() {
    // FIXED: Check if page has breadcrumb navigation
    var hasBreadcrumb = $('.dune-breadcrumb-nav').length > 0;
    if (hasBreadcrumb) {
        $('body').addClass('has-breadcrumb');
    }
    
    // HEADER FIX - Wait for page to load then force header
    setTimeout(function() {
        // Remove ALL existing headers and nav attempts
        $('.mw-header, #mw-header-container, nav.tab-bar, .tab-bar').remove();
        
        // Hide the page title and extra elements completely
        $('.firstHeading, h1.title, .mw-page-title-main, #firstHeading, #tagline, h3#tagline, #contentSub, .mw-content-subtitle').remove();
        
        // Remove any MediaWiki notices that might appear
        $('#siteNotice, .mw-indicators, .printfooter, .catlinks').remove();
        
        // Create the navigation bar HTML with inline styles
        var headerHTML = `
            <div id="dune-header" style="position: fixed; top: 0; left: 0; right: 0; height: 60px; background: linear-gradient(180deg, rgba(20, 18, 28, 0.95) 0%, rgba(10, 8, 16, 0.98) 100%); border-bottom: 3px solid rgba(252, 231, 200, 0.4); box-shadow: 0 2px 20px rgba(0,0,0,0.8); z-index: 99999; display: flex; align-items: center;">
                <div style="width: 100%; max-width: 1600px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; padding: 0 20px; height: 100%;">
                    <a href="/wiki/Main_Page" style="font-family: 'Orbitron', sans-serif; font-size: 22px; color: #fce7c8; text-transform: uppercase; letter-spacing: 3px; font-weight: 700; text-shadow: 0 0 15px rgba(252, 231, 200, 0.4); text-decoration: none; white-space: nowrap;">DUNE DB</a>
                    
                    <nav style="display: flex; gap: 0; margin: 0 20px; height: 100%;">
                        <a href="/wiki/Items" style="display: flex; align-items: center; padding: 0 18px; height: 100%; color: rgba(252, 231, 200, 0.8); font-family: 'Rajdhani', sans-serif; font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: 1.2px; text-decoration: none; border-left: 1px solid rgba(252, 231, 200, 0.1); border-right: 1px solid rgba(252, 231, 200, 0.1); transition: all 0.3s ease; background: transparent;" onmouseover="this.style.background='rgba(252, 231, 200, 0.1)'; this.style.color='#fce7c8';" onmouseout="this.style.background='transparent'; this.style.color='rgba(252, 231, 200, 0.8)';">◇ Items</a>
                        <a href="/wiki/Crafting" style="display: flex; align-items: center; padding: 0 18px; height: 100%; color: rgba(252, 231, 200, 0.8); font-family: 'Rajdhani', sans-serif; font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: 1.2px; text-decoration: none; border-right: 1px solid rgba(252, 231, 200, 0.1); transition: all 0.3s ease; background: transparent;" onmouseover="this.style.background='rgba(252, 231, 200, 0.1)'; this.style.color='#fce7c8';" onmouseout="this.style.background='transparent'; this.style.color='rgba(252, 231, 200, 0.8)';">⚒ Crafting</a>
                        <a href="/wiki/Building" style="display: flex; align-items: center; padding: 0 18px; height: 100%; color: rgba(252, 231, 200, 0.8); font-family: 'Rajdhani', sans-serif; font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: 1.2px; text-decoration: none; border-right: 1px solid rgba(252, 231, 200, 0.1); transition: all 0.3s ease; background: transparent;" onmouseover="this.style.background='rgba(252, 231, 200, 0.1)'; this.style.color='#fce7c8';" onmouseout="this.style.background='transparent'; this.style.color='rgba(252, 231, 200, 0.8)';">⌂ Building</a>
                        <a href="/wiki/Tech_Tree" style="display: flex; align-items: center; padding: 0 18px; height: 100%; color: rgba(252, 231, 200, 0.8); font-family: 'Rajdhani', sans-serif; font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: 1.2px; text-decoration: none; border-right: 1px solid rgba(252, 231, 200, 0.1); transition: all 0.3s ease; background: transparent;" onmouseover="this.style.background='rgba(252, 231, 200, 0.1)'; this.style.color='#fce7c8';" onmouseout="this.style.background='transparent'; this.style.color='rgba(252, 231, 200, 0.8)';">⬢ Tech Tree</a>
                        <a href="/wiki/Journeys" style="display: flex; align-items: center; padding: 0 18px; height: 100%; color: rgba(252, 231, 200, 0.8); font-family: 'Rajdhani', sans-serif; font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: 1.2px; text-decoration: none; border-right: 1px solid rgba(252, 231, 200, 0.1); transition: all 0.3s ease; background: transparent;" onmouseover="this.style.background='rgba(252, 231, 200, 0.1)'; this.style.color='#fce7c8';" onmouseout="this.style.background='transparent'; this.style.color='rgba(252, 231, 200, 0.8)';">➤ Journeys</a>
                        <a href="/wiki/Skills" style="display: flex; align-items: center; padding: 0 18px; height: 100%; color: rgba(252, 231, 200, 0.8); font-family: 'Rajdhani', sans-serif; font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: 1.2px; text-decoration: none; border-right: 1px solid rgba(252, 231, 200, 0.1); transition: all 0.3s ease; background: transparent;" onmouseover="this.style.background='rgba(252, 231, 200, 0.1)'; this.style.color='#fce7c8';" onmouseout="this.style.background='transparent'; this.style.color='rgba(252, 231, 200, 0.8)';">★ Skills</a>
                        <a href="/wiki/Map" style="display: flex; align-items: center; padding: 0 18px; height: 100%; color: rgba(252, 231, 200, 0.8); font-family: 'Rajdhani', sans-serif; font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: 1.2px; text-decoration: none; border-right: 1px solid rgba(252, 231, 200, 0.1); transition: all 0.3s ease; background: transparent;" onmouseover="this.style.background='rgba(252, 231, 200, 0.1)'; this.style.color='#fce7c8';" onmouseout="this.style.background='transparent'; this.style.color='rgba(252, 231, 200, 0.8)';">🗺 Map</a>
                    </nav>
                    
                    <div style="display: flex; align-items: center;">
                        <form action="/index.php" method="get" style="display: flex; align-items: center; gap: 0; height: 38px;">
                            <input type="search" name="search" placeholder="Search wiki..." style="background: rgba(0, 0, 2, 0.8); border: 2px solid rgba(252, 231, 200, 0.3); border-radius: 0; color: #fce7c8; padding: 0 12px; width: 200px; font-size: 13px; font-family: 'Rajdhani', sans-serif; transition: all 0.3s ease; outline: none; height: 38px; box-sizing: border-box; margin: 0; vertical-align: middle;" onfocus="this.style.borderColor='#fce7c8'; this.style.boxShadow='0 0 10px rgba(252, 231, 200, 0.3)'; this.style.width='250px';" onblur="this.style.borderColor='rgba(252, 231, 200, 0.3)'; this.style.boxShadow='none'; this.style.width='200px';">
                            <button type="submit" style="background: rgba(252, 231, 200, 0.1); border: 2px solid rgba(252, 231, 200, 0.3); border-left: none; color: #fce7c8; padding: 0 12px; cursor: pointer; font-size: 14px; transition: all 0.3s ease; height: 38px; box-sizing: border-box; margin: 0; vertical-align: middle; display: flex; align-items: center; justify-content: center;" onmouseover="this.style.background='rgba(252, 231, 200, 0.2)'; this.style.borderColor='#fce7c8';" onmouseout="this.style.background='rgba(252, 231, 200, 0.1)'; this.style.borderColor='rgba(252, 231, 200, 0.3)';"><span>🔍</span></button>
                        </form>
                    </div>
                </div>
            </div>
        `;
        
        // Check if header already exists to avoid duplicates
        if ($('#dune-header').length === 0) {
            $('body').prepend(headerHTML);
        }
        
        // CRITICAL: Force proper spacing
        $('body').css({
            'padding-top': '60px',
            'margin-top': '0',
            'overflow-y': 'auto',
            'height': 'auto'
        });
        
        // FIXED: Different spacing for pages with/without breadcrumb
        if (hasBreadcrumb) {
            // Pages with breadcrumb - content starts immediately after header
            $('#content, .mw-body, #mw-content-text, .mw-body-content, .mw-parser-output, #main-section, .main-section, #page-content').css({
                'padding-top': '0',
                'margin-top': '0'
            });
            
            // Breadcrumb should have proper spacing from header
            $('.dune-breadcrumb-nav').css({
                'margin-top': '20px',
                'margin-bottom': '20px'
            });
        } else {
            // Pages without breadcrumb - add padding to content
            $('#content, .mw-body, #mw-content-text, .mw-body-content, .mw-parser-output, #main-section, .main-section, #page-content').css({
                'padding-top': '20px',
                'margin-top': '0'
            });
        }
        
        // Force first element to start at top (unless it's breadcrumb)
        $('.mw-parser-output > *:first-child:not(.dune-breadcrumb-nav), .mw-body-content > *:first-child:not(.dune-breadcrumb-nav)').css({
            'margin-top': '0',
            'padding-top': '0'
        });
        
        // Remove sidebar space
        $('#sidebar, .columns.large-2.medium-3').css('display', 'none');
        $('#page-content, .columns.large-10.medium-9').css({
            'width': '100%',
            'max-width': '100%',
            'margin': '0',
            'padding': '0'
        });
        
        // Handle Actions button positioning
        $('#p-cactions').css({
            'position': 'fixed',
            'top': '11px',
            'right': '20px',
            'z-index': '100001',
            'margin': '0',
            'padding': '0',
            'height': '38px'
        });
        
        // Remove spacing from all column wrappers
        $('.row > .columns').css({
            'padding-top': '0',
            'margin-top': '0'
        });
        
        // FIXED: Ensure page content can scroll
        $('#content').css({
            'min-height': 'calc(100vh - 60px)',
            'position': 'relative',
            'z-index': '1'
        });
        
        // Remove any floating MediaWiki elements
        $('.mw-jump-link, .mw-redirectedfrom, #siteNotice').remove();
        
    }, 100);
});

/* ===== ACTIONS BAR → FOOTER ===== */
function initFooterActions() {
  // Grab the actions portlet (Vector & Pivot both expose #p-cactions)
  var $portlet = $('#p-cactions, .vector-menu-actions');
  if (!$portlet.length) return;                  // nothing to move

  // Build a flat list of links
  var linksHtml = '';
  $portlet.find('li a').each(function () {
    var $a = $(this);
    linksHtml += `
      <a href="${$a.attr('href')}"
         class="footer-action ${$a.parent().hasClass('selected') ? 'active' : ''}"
         title="${$a.attr('title') || ''}">
        ${$a.text()}
      </a>`;
  });

  // Assemble footer bar (only once)
  if ($('#dune-footer-actions').length === 0) {
    $('body').append(`
      <div id="dune-footer-actions">
        <div class="footer-actions-inner">${linksHtml}</div>
      </div>
    `);
  }

  // Finally hide original dropdown so hot-cat, etc. don’t double-render
  $portlet.remove();
}

// Run after MW+DOM ready
$(initFooterActions);





/* ===== RADIAL MENU CODE ===== */
function waitForRadialData(callback, attempts = 0) {
  const dataTag = document.getElementById('radialMenuData');
  if (dataTag) {
    try {
      const menuItems = JSON.parse(dataTag.innerText || dataTag.textContent);
      console.log("✅ Loaded radialMenuData:", menuItems);
      callback(menuItems);
    } catch (e) {
      console.error("❌ Failed to parse radialMenuData", e);
    }
  } else if (attempts < 20) {
    setTimeout(() => waitForRadialData(callback, attempts + 1), 100);
  } else {
    console.warn("⚠️ radialMenuData tag not found after timeout.");
  }
}

$(document).ready(function () {
  waitForRadialData(function (menuItems) {
    const isMobile = () => window.innerWidth <= 768;

    let radialItemsHTML = '';
    menuItems.forEach((item, index) => {
      const id = item.category.toLowerCase().replace(/\s+/g, '-');
      item.id = id;

      radialItemsHTML += `
        <div class="dune-radial-item-container ${item.position}">
          <a data-id="${id}" class="dune-radial-item">
            <img src="${item.icon}" alt="${item.name}" class="dune-radial-icon">
            <span class="dune-radial-tooltip">${item.name}</span>
          </a>
        </div>
      `;
    });

    const centerButtonHTML = `
      <a href="https://dunedb.com/Main_Page" class="dune-radial-center">
        <img src="https://dunedb.com/images/9/99/HomeNavIcon.png" alt="Home" class="dune-radial-icon">
        <span class="dune-radial-tooltip">Main Page</span>
      </a>
    `;

    const radialMenuHTML = `
      <div id="duneRadialMenu" class="dune-radial-menu">
        <div class="dune-radial-background">
          <div class="dune-radial-circle outer"></div>
          <div class="dune-radial-circle middle"></div>
          <div class="dune-radial-circle inner"></div>
        </div>
        ${centerButtonHTML}
        ${radialItemsHTML}
      </div>
      <div id="duneRadialOverlay" class="dune-radial-overlay"></div>
    `;

    const subcategoryContainerHTML = `<div id="duneSubcategoryContainer" class="dune-subcategory-container"></div>`;
    $('body').append(radialMenuHTML);
    $('body').append(subcategoryContainerHTML);

    if (isMobile()) {
      $('#duneRadialMenu').addClass('mobile-grid');
    }

    const showSubcategories = (itemId, event) => {
      const item = menuItems.find(i => i.id === itemId);
      if (!item || !item.subcategories) return;

      $('.dune-radial-item').removeClass('selected');
      $(`.dune-radial-item[data-id="${itemId}"]`).addClass('selected');

      let subcategoryHTML = `
        <div class="dune-subcategory-header">
          <img src="${item.icon}" alt="${item.name}" class="dune-subcategory-icon">
          <span>${item.name}</span>
        </div>
        <div class="dune-subcategory-items">
      `;

      item.subcategories.forEach((sub, index) => {
        subcategoryHTML += `
          <a href="${sub.url}" class="dune-subcategory-item" style="--item-index: ${index}">
            <span class="dune-subcategory-name">${sub.name}</span>
          </a>
        `;
      });

      subcategoryHTML += `
        </div>
        <div class="dune-subcategory-footer">
          <a href="${item.url}" class="dune-subcategory-all">View All ${item.name}</a>
        </div>
      `;

      const $subcategoryContainer = $('#duneSubcategoryContainer');
      $subcategoryContainer.html(subcategoryHTML);

      $subcategoryContainer.removeClass((index, className) => {
        return (className.match(/from-\S+/g) || []).join(' ');
      });
      $subcategoryContainer.addClass(`from-${item.position}`);
      $subcategoryContainer.addClass('active');

      event.stopPropagation();
    };

    const hideSubcategories = () => {
      $('#duneSubcategoryContainer').removeClass('active');
      $('.dune-radial-item').removeClass('selected');
    };

    const toggleRadialMenu = () => {
      if ($('#duneRadialMenu').hasClass('active')) {
        hideSubcategories();
        $('#duneRadialMenu').removeClass('active');
        $('#duneRadialOverlay').removeClass('active');
      } else {
        $('#duneRadialMenu').addClass('active');
        $('#duneRadialOverlay').addClass('active');
        $('.dune-radial-item-container').each(function (index) {
          const $item = $(this);
          setTimeout(() => {
            $item.addClass('animated');
          }, index * 50);
        });
        setTimeout(() => {
          $('.dune-radial-center').addClass('animated');
        }, menuItems.length * 50);
      }
    };

    $(document).on('click', '#duneLogoBtn, #menuRadialTrigger img', function (e) {
      console.log("✅ Radial trigger clicked");
      e.preventDefault();
      e.stopPropagation();
      toggleRadialMenu();
    });

    $(document).on('click', '.dune-radial-item', function (e) {
      e.preventDefault();
      e.stopPropagation();
      const itemId = $(this).data('id');
      if ($(this).hasClass('selected')) {
        hideSubcategories();
      } else {
        showSubcategories(itemId, e);
      }
    });

    $(document).on('click', '#duneRadialOverlay', function () {
      hideSubcategories();
      $('#duneRadialMenu').removeClass('active');
      $('#duneRadialOverlay').removeClass('active');
    });

    $(document).on('click', 'li.name.logo a[href="/Main_Page"]', function (e) {
      e.preventDefault();
      toggleRadialMenu();
    });

    $(document).on('keydown', function (e) {
      if (e.key === 'Escape') {
        if ($('#duneSubcategoryContainer').hasClass('active')) {
          hideSubcategories();
        } else if ($('#duneRadialMenu').hasClass('active')) {
          $('#duneRadialMenu').removeClass('active');
          $('#duneRadialOverlay').removeClass('active');
        }
      }
    });

    $(window).on('resize', function () {
      if (isMobile()) {
        $('#duneRadialMenu').addClass('mobile-grid');
      } else {
        $('#duneRadialMenu').removeClass('mobile-grid');
      }
    });
  });
});

/* Used-In dynamic filters & search */
mw.hook( 'wikipage.content' ).add( function ( $content ) {

  const $holder = $content.find( '#usedInFilterHolder' );
  const $table  = $content.find( '#usedInTable' );

  if ( !$holder.length || !$table.length ) return;

  const rowsData = [];
  const stations = new Set();
  const types    = new Set();

  $table.find( 'tbody tr' ).each( function () {
    const $tds     = $( this ).children( 'td' );
    const output   = $tds.eq( 0 ).text().trim();
    const type     = $tds.eq( 1 ).text().trim();
    const station  = $tds.last().text().trim();

    rowsData.push( { tr: this, output, type, station } );
    stations.add( station );
    types.add( type );
  } );

  const makeSel = ( id, label, opts ) => {
    const $sel = $( '<select>', { id, class: 'game-button', css:{margin:'6px 4px 6px 0'} } )
                  .append( $( '<option>', { value:'', text:label } ) );
    opts.forEach( o => $sel.append( $( '<option>', { value:o, text:o } ) ) );
    return $sel;
  };

  const $stationSel = makeSel( 'filterStation', 'All Stations', [ ...stations ].sort() );
  const $typeSel    = makeSel( 'filterType',    'All Types',    [ ...types ].sort() );
  const $search     = $( '<input>', {
                          type:'text',
                          placeholder:'Search…',
                          css:{ margin:'6px 0', padding:'4px', width:'140px',
                               'background':'#111', color:'#fff', border:'1px solid #555' }
                        } );

  $holder.append( $stationSel, $typeSel, $search );

  function applyFilters() {
    const sVal = $stationSel.val();
    const tVal = $typeSel.val();
    const q    = $search.val().toLowerCase();

    rowsData.forEach( ({ tr, output, type, station }) => {
      const show =
        (!sVal || station === sVal) &&
        (!tVal || type    === tVal) &&
        (!q    || output.toLowerCase().includes( q ));
      tr.style.display = show ? '' : 'none';
    } );
  }

  $stationSel.on( 'change', applyFilters );
  $typeSel   .on( 'change', applyFilters );
  $search    .on( 'input',  applyFilters );
} );

/* Lazy-load background image Blur */
document.addEventListener('DOMContentLoaded', () => {
  const hero = document.querySelector('.dune-hero');
  if (hero && !hero.style.backgroundImage) {
    hero.style.backgroundImage =
      'url(/images/7/70/Arrakis_dunes.jpg?2025)';
  }

  const radial = document.querySelector('.radial-menu-wrapper');
  if (!radial) return;
  const y = radial.offsetTop;
  window.addEventListener('scroll', () => {
    radial.classList.toggle('is-fixed', window.scrollY > y);
  });
});

/**
 * Journey System JavaScript for MediaWiki
 * Enhanced with proper task counting and initialization
 */
(function($, mw) {
    'use strict';
    
    // Only run on pages with journey system
    if (!$('.journey-main-container').length) return;
    
    window.DuneJourneySystem = {
        // Store current active journey
        currentActiveJourney: null,
        journeyData: {},
        
        // Initialize the system
        init: function() {
            var self = this;
            
            // Parse journey data from the page
            self.parseJourneyData();
            
            // Set up event listeners
            self.setupEventListeners();
            
            // Check for URL hash
            self.checkUrlHash();
        },
        
        // Parse journey data embedded in the page
        parseJourneyData: function() {
            var self = this;
            
            // Journey data is embedded as JSON in a script tag
            var dataElement = $('#journey-data-json');
            if (dataElement.length) {
                try {
                    self.journeyData = JSON.parse(dataElement.text());
                } catch (e) {
                    console.error('Failed to parse journey data:', e);
                }
            }
            
            // Alternative: Use data from HTML attributes if JSON parsing fails
            if (!self.journeyData || Object.keys(self.journeyData).length === 0) {
                if (window.journeyDataFromHTML) {
                    self.journeyData = window.journeyDataFromHTML;
                }
            }
        },
        
        // Set up all event listeners
        setupEventListeners: function() {
            var self = this;
            
            // Journey card clicks
            $(document).on('click', '.journey-card', function(e) {
                e.preventDefault();
                var journeyId = $(this).data('journey-id');
                self.loadJourneyDetails(journeyId);
            });
            
            // Objective accordion
            $(document).on('click', '.objective-header', function(e) {
                e.preventDefault();
                $(this).closest('.objective-item').toggleClass('collapsed');
            });
            
            // Task checkboxes
            $(document).on('click', '.task-checkbox', function(e) {
                e.stopPropagation();
                $(this).toggleClass('completed');
                self.updateProgress();
            });
            
            // Material checkboxes
            $(document).on('click', '.material-item', function(e) {
                var checkbox = $(this).find('.material-checkbox');
                checkbox.toggleClass('completed');
                $(this).toggleClass('checked');
                self.updateMaterialProgress();
            });
            
            // Description toggle
            $(document).on('click', '.description-toggle', function(e) {
                e.preventDefault();
                var desc = $(this).closest('.journey-description');
                if (desc.hasClass('collapsed')) {
                    desc.removeClass('collapsed').addClass('expanded');
                    $(this).text('Less');
                } else {
                    desc.addClass('collapsed').removeClass('expanded');
                    $(this).text('More');
                }
            });
            
            // Action buttons
            $('.view-items').on('click', function() {
                self.showItemPrepList();
            });
            
            $('.view-guide').on('click', function() {
                self.showVideoGuide();
            });
            
            // Popup close
            $(document).on('click', '.popup-close, .journey-popup-overlay', function(e) {
                if (e.target === this || $(e.target).hasClass('popup-close')) {
                    $('.journey-popup-overlay').removeClass('active');
                    setTimeout(function() {
                        $('.journey-popup-overlay').remove();
                    }, 300);
                }
            });
        },
        
        // Initialize task counts when journey loads
        initializeTaskCounts: function() {
            var self = this;
            
            // Count tasks for each objective on initial load
            $('.objective-item').each(function() {
                var objective = $(this);
                var totalTasks = objective.find('.task-item').length;
                var progressEl = objective.find('.objective-progress');
                
                // Set initial count (0 completed out of total)
                progressEl.text('0/' + totalTasks);
            });
        },
        
        // Load journey details via AJAX
        loadJourneyDetails: function(journeyId) {
            var self = this;
            
            // Update active card styling
            $('.journey-card').removeClass('active');
            $('.journey-card[data-journey-id="' + journeyId + '"]').addClass('active');
            
            // Show loading state
            var panel = $('#journeyDetailsPanel');
            panel.addClass('active loading');
            
            // Make AJAX request to get journey details
            $.ajax({
                url: mw.util.wikiScript('api'),
                data: {
                    action: 'parse',
                    format: 'json',
                    text: '{{JourneyDetails|id=' + journeyId + '}}',
                    contentmodel: 'wikitext'
                },
                success: function(response) {
                    if (response.parse && response.parse.text) {
                        var content = response.parse.text['*'];
                        panel.html(content);
                        panel.removeClass('loading');
                        
                        // Store current journey data
                        self.currentActiveJourney = self.findJourneyById(journeyId);
                        
                        // Initialize task counts
                        self.initializeTaskCounts();
                        
                        // Check for long descriptions
                        self.checkDescriptionLength();
                        
                        // Update URL hash
                        window.location.hash = 'journey-' + journeyId;
                    }
                },
                error: function() {
                    panel.removeClass('loading');
                    panel.html('<div class="error">Failed to load journey details</div>');
                }
            });
        },
        
        // Find journey by ID in data
        findJourneyById: function(journeyId) {
            for (var group in this.journeyData) {
                var journeys = this.journeyData[group];
                for (var i = 0; i < journeys.length; i++) {
                    if (journeys[i].id == journeyId) {
                        return journeys[i];
                    }
                }
            }
            return null;
        },
        
        // Check and add toggle to long descriptions
        checkDescriptionLength: function() {
            $('.journey-description').each(function() {
                var desc = $(this);
                var text = desc.text();
                if (text.length > 100 && !desc.find('.description-toggle').length) {
                    desc.addClass('collapsed');
                    desc.append('<button class="description-toggle">More</button>');
                }
            });
        },
        
        // Update progress counters with proper task counting
        updateProgress: function() {
            var self = this;
            
            // Update each objective's progress
            $('.objective-item').each(function() {
                var objective = $(this);
                var totalTasks = objective.find('.task-item').length;
                var completedTasks = objective.find('.task-checkbox.completed').length;
                var progressEl = objective.find('.objective-progress');
                
                // Update the progress text
                progressEl.text(completedTasks + '/' + totalTasks);
                
                // Add completed class if all tasks are done
                if (completedTasks === totalTasks && totalTasks > 0) {
                    progressEl.addClass('completed');
                } else {
                    progressEl.removeClass('completed');
                }
            });
            
            // Update overall completion
            var totalTasks = $('.task-item').length;
            var completedTasks = $('.task-checkbox.completed').length;
            var percentage = totalTasks > 0 ? Math.round((completedTasks / totalTasks) * 100) : 0;
            $('.completion-status').text(percentage + '% COMPLETE');
            
            // Save progress (if user is logged in)
            if (mw.config.get('wgUserName')) {
                self.saveProgress();
            }
        },
        
        // Save progress to user preferences
        saveProgress: function() {
            // This would save to user preferences or a custom table
            // Implementation depends on your wiki setup
        },
        
        // Show item prep list popup
        showItemPrepList: function() {
            var self = this;
            if (!self.currentActiveJourney) return;
            
            // Create popup
            var popup = self.createPopup('items-popup', 'Item Prep List');
            
            // Load materials via AJAX
            $.ajax({
                url: mw.util.wikiScript('api'),
                data: {
                    action: 'parse',
                    format: 'json',
                    text: '{{JourneyMaterials|id=' + self.currentActiveJourney.id + '}}',
                    contentmodel: 'wikitext'
                },
                success: function(response) {
                    if (response.parse && response.parse.text) {
                        var content = response.parse.text['*'];
                        popup.find('.popup-content').html(content);
                        self.showPopup(popup);
                    }
                }
            });
        },
        
        // Show video guide popup
        showVideoGuide: function() {
            var self = this;
            if (!self.currentActiveJourney) return;
            
            var popup = self.createPopup('video-popup', self.currentActiveJourney.name + ' - Video Guide');
            
            // For now, show coming soon
            var content = '<div class="video-container">' +
                         '<div style="text-align: center; padding: 50px;">' +
                         '<h3>Video Guide Coming Soon</h3>' +
                         '</div></div>';
            
            popup.find('.popup-content').html(content);
            self.showPopup(popup);
        },
        
        // Create popup structure
        createPopup: function(className, title) {
            var popup = $('<div class="journey-popup-overlay">' +
                         '<div class="journey-popup ' + className + '">' +
                         '<div class="popup-header">' +
                         '<h3 class="popup-title">' + title + '</h3>' +
                         '<button class="popup-close">×</button>' +
                         '</div>' +
                         '<div class="popup-content"></div>' +
                         '</div></div>');
            return popup;
        },
        
        // Show popup with animation
        showPopup: function(popup) {
            $('body').append(popup);
            setTimeout(function() {
                popup.addClass('active');
            }, 10);
        },
        
        // Update material progress in popup
        updateMaterialProgress: function() {
            var totalItems = $('.material-item').length;
            var checkedItems = $('.material-item.checked').length;
            
            $('.materials-progress-count').text(checkedItems + '/' + totalItems);
            var progressEl = $('.materials-progress');
            var progressText = $('.materials-progress-text');
            
            if (checkedItems === totalItems && totalItems > 0) {
                progressEl.addClass('completed');
                progressText.text('All Materials Ready!');
            } else {
                progressEl.removeClass('completed');
                progressText.text('Materials Collected');
            }
        },
        
        // Check URL hash on load
        checkUrlHash: function() {
            var hash = window.location.hash;
            if (hash && hash.startsWith('#journey-')) {
                var journeyId = hash.replace('#journey-', '');
                this.loadJourneyDetails(journeyId);
            }
        }
    };
    
    // Initialize when DOM is ready
    $(function() {
        DuneJourneySystem.init();
    });
    
})(jQuery, mediaWiki);

/**
 * Journey Card Background Image Handler
 * Extracts MediaWiki file URLs and applies them as background images
 */
(function() {
    'use strict';
    
    /**
     * Apply background images to journey cards
     */
    function applyJourneyBackgrounds() {
        // Find all journey cards with data-icon attribute
        const journeyCards = document.querySelectorAll('.journey-card[data-icon]');
        
        journeyCards.forEach(function(card) {
            const iconFile = card.getAttribute('data-icon');
            
            // Skip if no icon file specified
            if (!iconFile || iconFile === '' || iconFile === 'NULL' || iconFile === 'null') {
                return;
            }
            
            // Check if it ends with .png or .jpg
            if (!iconFile.match(/\.(png|jpg|jpeg)$/i)) {
                return;
            }
            
            // Look for the hidden MediaWiki file element
            const bgSource = card.querySelector('.journey-bg-source img');
            
            if (bgSource) {
                // Get the src URL from the img element
                const imageUrl = bgSource.getAttribute('src');
                
                if (imageUrl) {
                    // Apply as background image
                    card.style.backgroundImage = 'url(' + imageUrl + ')';
                    card.classList.add('has-background');
                    
                    // Remove the has-icon class if it exists to avoid conflicts
                    card.classList.remove('has-icon');
                }
            } else {
                // Fallback: construct URL from filename
                // This handles cases where MediaWiki might not have rendered the file yet
                const encodedFilename = encodeURIComponent(iconFile.replace(/ /g, '_'));
                const fallbackUrl = '/images/' + encodedFilename;
                
                // Check if the file exists by creating a test image
                const testImg = new Image();
                testImg.onload = function() {
                    card.style.backgroundImage = 'url(' + fallbackUrl + ')';
                    card.classList.add('has-background');
                    card.classList.remove('has-icon');
                };
                testImg.onerror = function() {
                    // If direct path fails, try the thumb path
                    const thumbUrl = '/images/thumb/' + encodedFilename + '/300px-' + encodedFilename;
                    card.style.backgroundImage = 'url(' + thumbUrl + ')';
                    card.classList.add('has-background');
                    card.classList.remove('has-icon');
                };
                testImg.src = fallbackUrl;
            }
        });
    }
    
    /**
     * Initialize when DOM is ready
     */
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', applyJourneyBackgrounds);
    } else {
        // DOM is already loaded
        applyJourneyBackgrounds();
    }
    
    // Also run after a short delay to catch any lazy-loaded images
    setTimeout(applyJourneyBackgrounds, 1000);
    
    // Make function available globally for debugging
    window.applyJourneyBackgrounds = applyJourneyBackgrounds;
})();





// Resource Page Module Loader
$(function() {
    // Only on resource pages
    if ($('.crafting-section, .recipe-table, [class*="crafted-"]').length > 0) {
        // Load dependencies first
        mw.loader.using(['jquery', 'mediawiki.api', 'mediawiki.util'], function() {
            // Load resource page module
            $.getScript('/index.php?title=MediaWiki:ResourcePage.js&action=raw&ctype=text/javascript')
                .done(function() {
                    console.log('Resource page module loaded');
                })
                .fail(function() {
                    console.error('Failed to load resource page module');
                });
        });
    }
});