$(document).ready(function(){

    $(".alist li").click(function(){
    console.log("lolololol");
     var ctnt = $(this).find('.content-wrapper')[0]
     $(ctnt).toggleClass("open")   
    });
    var $limit = 45;
//    $("#articles ul li a span").each(function(){
//        if ($(this).text().length > $limit){
//            var cut = $(this).text().substring(0, $limit) + " ...";
//            $(this).html(cut);
//        }
//    });

//    wimg = $(".img_container").width();
//    console.log(wimg);
//    $(".img_container").css("height",wimg);
//    
//    $(window).resize(function(){
//       wimg = $(".img_container").width();
//       console.log(wimg);
//       $(".img_container").css("height",wimg);
//    })
//

    $('#gal .img_container img').click(function(){
    //        $(" #gal .img_container").removeClass("fullImg");
            $(this).parent().toggleClass("fullImg");
    });

    function sortArticles(columnClass) {
        const $list = $('.alist');
        const $listItems = $list.children('li');

        // Sort the list items based on the text of the specified column
        $listItems.sort(function(a, b) {
            const aText = $(a).find('.' + columnClass).text().trim().toLowerCase();
            const bText = $(b).find('.' + columnClass).text().trim().toLowerCase();
            
            return aText.localeCompare(bText);
        });

        // Detach and reappend sorted items to maintain DOM structure
        $list.empty().append($listItems);
    }

    // Add click event to legend spans
    //$('.legend li span').on('click', function() {
        //// Get the class corresponding to the clicked span
        //const columnClass = $(this).text().toLowerCase().replace(/\s+/g, '');
        
        //// If the column exists in the article items, sort by that column
        //if ($('.alist li').first().find('.' + columnClass).length > 0) {
            //sortArticles(columnClass);
        //}
    //});

 const sortState = {};

    // Function to sort articles
    function sortArticles(columnClass) {
        const $list = $('.alist');
        const $listItems = $list.children('li');

        // Determine sort direction
        if (!sortState[columnClass]) {
            sortState[columnClass] = 'asc';
        } else {
            sortState[columnClass] = (sortState[columnClass] === 'asc') ? 'desc' : 'asc';
        }

        // Sort the list items based on the text of the specified column
        $listItems.sort(function(a, b) {
            const aText = $(a).find('.' + columnClass).text().trim().toLowerCase();
            const bText = $(b).find('.' + columnClass).text().trim().toLowerCase();
            
            // Special handling for period (numeric sorting)
            if (columnClass === 'period') {
                const aNum = parseInt(aText);
                const bNum = parseInt(bText);
                return sortState[columnClass] === 'asc' 
                    ? aNum - bNum 
                    : bNum - aNum;
            }
            
            // Default alphabetical sorting
            return sortState[columnClass] === 'asc'
                ? aText.localeCompare(bText)
                : bText.localeCompare(aText);
        });

        // Detach and reappend sorted items to maintain DOM structure
        $list.empty().append($listItems);

        // Optional: Visual indication of sort direction
        $('.legend li ').removeClass('sort-asc sort-desc');
    $(`.legend li[data-sort="${columnClass}"]`).addClass(sortState[columnClass] === 'asc' ? 'sort-asc' : 'sort-desc');
        //$(`.legend li:contains("${columnClass}")`).addClass(sortState[columnClass] === 'asc' ? 'sort-asc' : 'sort-desc');
        //$(`.legend li `).attr('data-sort').addClass(sortState[columnClass] === 'asc' ? 'sort-asc' : 'sort-desc');
    }

    // Add click event to legend spans
    $('.legend li ').on('click', function() {
        // Get the class corresponding to the clicked span
        //const columnClass = $(this).text().toLowerCase().replace(/\s+/g, '');
        const columnClass = $(this).attr("data-sort")
        
        // If the column exists in the article items, sort by that column
        if ($('.alist li').first().find('.' + columnClass).length > 0) {
            sortArticles(columnClass);
        }
    });


})