// GUROCHAN GALLERY/IMAGE EXPANDER V [0.12], Jank Edition
// Latest version always available at https://pastebin.com/whRbEqhw
// [CHANGELOG]
// V 0.12A
//   Added sort by image count in gallery mode
// [TODO]
// - fix scrolling page to match gallery with expanded images
// - account for auto update images
// - add a 'hide posts without images' function
// - save your spot as a cookie

settings={
    fromLocation:true,
    preloadImages:true,
    keybinds:{
        nextImage:"d",
        prevImage:"a",
        toggleGallery:"g",
        expandAll:"x",
        scrollToTop:"t",
        scrollToBottom:"y"
    }
}

thumbGen=0;
currentImg=0;
img=[];
imgC=0;
preload=[];
galleryOpen=0;
expanded=0;
expandedImg=[];
firstOpen=1;
start=0;

// CSS
$("<style type='text/css'>"+
    "#gallery{ width:100vw; height:100vh; position:fixed; left:0; top:0; z-index:999; } #bigimg{ display:inline-block; background:#a8a8a826; height:100vh; width:400px; } #bigimg>img{ width:100%; height:100%; object-fit:contain; } #thumbs{ display:inline-block; background:#0b0b0b57; width:200px; height:100vh; float:right; overflow:scroll; } .galleryThumb{ display:inline-block; width:100%; height:200px; background:grey; margin-bottom:0px; } .galleryThumb>img{ width:100%; height:100%; object-fit:contain; } .activeThumb{ background: #444242; }  #galleryStats { position: absolute; right: 210px; bottom: 10px; text-align:right; font-size:15px; }"+
    "</style>").appendTo("head");

// HTML
$("body").append('<div id="gallery">'+
    '<div id="galleryStats"></div>'+
    '<div id="bigimg"> <img src=""/> </div>'+
    '<div id="thumbs"> </div>'+
    '</div>');


$("#gallery").hide();
$("#bigimg").width($(window).width()-201);

// this could be a css flex element instead of an on resize function
$( window ).resize(function() {
    $("#bigimg").width($(window).width()-201);
});

// hacky image preloading
$.fn.preload = function() {
    this.each(function(){
        $('<img/>')[0].src = this;
    });
}

i=0;
$(".post-image").each(function(){
    img.push($(this));
    preload.push($(this).parent().attr("href"));
    image=$(this).context.attributes['src'].nodeValue;
    $("#thumbs").append("<div id='gThumb-"+i+"'class='galleryThumb'><img src='"+image+"' /></div>");
    i++;
});
imgC=i-1;


function nextImg(){
    start=$(window).scrollTop();
    next="";
    ii=0;
    $(".post-image").each(function(){
        ii++
        if(this.y>start) {
            next=this;
            return false;
        }
    })
    if(ii!=0) ii--
    return ii;
}


function galleryGo(index,doScroll){
    if(firstOpen){
       if(settings.preloadImages) $(preload.slice(index)).preload();
       firstOpen=0;
    }
    doScroll=(typeof(doScroll) === "undefined"?1:doScroll);
    $("#bigimg>img").attr("src",img[index].parent().attr("href"));
    $(".activeThumb").removeClass("activeThumb");
    $("#gThumb-"+index).addClass("activeThumb");
    currentImg=index;
    if(doScroll) scrollTo(index);
    $("html, body").animate({ scrollTop: img[index].offset().top-200+"px" }); // [TODO] this breaks with expand images because offset() is calculated at page load.
    $("#galleryStats").text("Image "+(currentImg+1)+" of "+(imgC+1));
}

function scrollTo(id){
    $("#thumbs").scrollTop(id*220-200);
}

function expandAll(){
    if(expanded){
        $(expandedImg).each(function(){
            this.click();
        });
    }else{
        start=(settings.fromLocation?$(window).scrollTop():0);
        $(".post-image").each(function(){
            if(this.y>start){
                $(this).click()
                expandedImg.push($(this)); // keep track of expanded images
            }
        })
    }
    expanded=(expanded?0:1);
}

$("#thumbs").on("click", ".galleryThumb", function(){
    id=this.id;
    index=id.substr(id.indexOf("-")+1);
    galleryGo(parseInt(index),0);
    console.log(id,index);
});

// Catalog
if(active_page=="catalog"){
    $(".mix").each(function(){
        // add a data attribute for number of images
        infoStr=$(this).find(".replies strong").text();
        images=parseInt(infoStr.substring(infoStr.lastIndexOf(":")+2));
        $(this).attr("data-images",images)
    });
    // add a sort option for the new data attribute, calls existing sorting function
    $("#sort_by").append('<option value="images:desc">Image Count</option>');
    // [TODO] Override default method for remembering sort to include script options
}


// Shortcuts
$(document).keydown(function(e){
    if( $("input, textarea").is(":focus")) return; // dont run if input is focussed
    if(active_page=="catalog") return; // dont run in catalog
    switch(e.key.toLowerCase()){
        case settings.keybinds.nextImage:
        case "arrowright":
            if(!galleryOpen) break;
            currentImg=(currentImg==imgC?0:currentImg+1);
            galleryGo(currentImg)
            break;
        case settings.keybinds.prevImage:
        case "arrowleft":
            if(!galleryOpen) break;
            currentImg=(currentImg==0?imgC:currentImg-1);
            galleryGo(currentImg)
            break;
        case settings.keybinds.toggleGallery:
            galleryOpen=(galleryOpen?0:1);
            if(galleryOpen){
                galleryGo(nextImg());
            }
            $("#gallery").toggle()
            break;
        case "escape":
            if(galleryOpen){
                $("#gallery").hide();
                galleryOpen=0;
            }
            break;
        case settings.keybinds.expandAll:
            expandAll();
            break;
        case settings.keybinds.scrollToTop:
            $("html, body").animate({ scrollTop: "0px" });
            break;
        case settings.keybinds.scrollToBottom:
        case "y":
            $("html, body").animate({ scrollTop: $(document).height()+"px" });
            break;
    }
});