$(document).ready(function() {
    
    var imgW =  $(".gal .img_container").width()
    $(".gal .img_container").css('height',imgW);
    $(".alist").on("click", "li",function(){
        $(".content-wrapper").removeClass('open');   
        $(this).find(".content-wrapper").addClass('open');   
    });



      $(document).on("click", ".gal img", function() {
          var clickedSrc = $(this).attr("src");
          console.log(clickedSrc);
          $(this).closest(".gal").next(".imgzoom").find("img").attr("src", clickedSrc);
  });


    let currentSort = null;
    let currentDirection = 'asc';

  // Click handler for sort buttons
  $('.legend li.sort').click(function() {
    const sortBy = $(this).attr('data-sort');
    console.log("Sorting by:", sortBy); // Debug info

    // Toggle direction if clicking the same sort again
    if (currentSort === sortBy) {
      currentDirection = currentDirection === 'asc' ? 'desc' : 'asc';
    } else {
      currentDirection = 'asc';
    }

    currentSort = sortBy;
    console.log("Direction:", currentDirection); // Debug info

    // Get the list and all articles
    const $list = $('ul.alist');
    if ($list.length === 0) {
      console.error("List with class 'alist' not found"); // Debug info
      return;
    }

    // Get all list items
    let $articles = $list.children('li').toArray();
    console.log("Found", $articles.length, "articles"); // Debug info

    // Sort the articles
    $articles.sort(function(a, b) {
      // Find the spans with the sorting class
      const $spanA = $(a).find('span.' + sortBy);
      const $spanB = $(b).find('span.' + sortBy);

      // If either element doesn't have the required span, skip sorting
      if ($spanA.length === 0 || $spanB.length === 0) {
        return 0;
      }

      const valueA = $spanA.text().trim().toLowerCase();
      const valueB = $spanB.text().trim().toLowerCase();

      // Try sorting as numbers if possible
      const numA = parseFloat(valueA);
      const numB = parseFloat(valueB);

      let result;
      if (!isNaN(numA) && !isNaN(numB)) {
        result = numA - numB;
      } else {
        // Otherwise sort alphabetically
        result = valueA.localeCompare(valueB);
      }

      // Reverse if descending
      return currentDirection === 'desc' ? -result : result;
    });

    // Re-append in new order
    $list.empty();
    $.each($articles, function(i, item) {
      $list.append(item);
    });

    // Update UI indicators
    $('.legend li.sort').removeClass('active sort-asc sort-desc');
    $(this).addClass('active');
    $(this).addClass(currentDirection === 'asc' ? 'sort-asc' : 'sort-desc');
  });


});