const sand_desc = "A voxel engine featuring a GPU-accelerated falling sand simulation, rigid body physics, physics based character movement, raytracing, and real-time global illumination. C++, Custom Engine";
const sand_link = "https://github.com/kylerNat/3d_falling_sand";
const fluid_desc = "A prototype of a game with a heightmap-based fluid system and open-world tile streaming. C++, Custom Engine";
const fish_desc = "Gif from a WIP game about creating and fighting sea creatures. Features a custom multithreaded soft-body physics system. C++, Custom Engine";
const spacestitcher_desc = "Space Stitcher, a puzzle game about reconnecting space. Made from scratch in 48 hours for Ludum Dare 54. C++, Custom Engine";

const images = [
    {
        video: "breakup.mp4",
        special_thumbnail: true,
        description: sand_desc,
        link: sand_link,
    }, {
        video: "watertank.mp4",
        special_thumbnail: true,
        description: sand_desc,
        link: sand_link,
    }, {
        video: "sand.mp4",
        special_thumbnail: true,
        description: sand_desc,
        link: sand_link,
    }, {
        video: "jump.mp4",
        special_thumbnail: true,
        description: sand_desc,
        link: sand_link,
    }, {
        video: "dancy.mp4",
        special_thumbnail: true,
        description: sand_desc,
        link: sand_link,
    }, {
        video: "lighting.mp4",
        special_thumbnail: true,
        description: sand_desc,
        link: sand_link,
    }, {
        image: "Capture2.PNG",
        description: sand_desc,
        link: sand_link,
    }, {
        image: "Capture3.PNG",
        description: sand_desc,
        link: sand_link,
    }, {
        image: "capture sand.png",
        description: sand_desc,
        link: sand_link,
    }, {
        video: "forgotten-obelisk.mp4",
        description: "Forgotten Obelisk. A first-person shooter made in my voxel engine with fully destructable terrain and physics based enemies. Created in 7 days for the 2022 7DFPS game jam. C++, Custom Engine",
        link: "https://kaliuresis.itch.io/forgotten-obelisk",
    }, {
        video: "fluid1.mp4",
        special_thumbnail: true,
        description: fluid_desc,
    }, {
        video: "fluid2.mp4",
        special_thumbnail: true,
        description: fluid_desc,
    }, {
        image: "snek.gif",
        description: fish_desc,
    }, {
        image: "snaky.gif",
        description: fish_desc,
    }, {
        image: "cut.gif",
        description: fish_desc,
    }, {
        image: "chompy.gif",
        description: fish_desc,
    }, {
        image: "duckness.gif",
        description: fish_desc,
    }, {
        image: "adaptation.gif",
        description: fish_desc,
    }, {
        image: "boom.gif",
        description: fish_desc,
    }, {
        image: "lighting.gif",
        description: fish_desc,
    }, {
        image: "shocker.gif",
        description: fish_desc,
    }, {
        image: "garden.PNG",
        link:"https://kaliuresis.itch.io/gene-graph-garden",
        description: "Gene Graph Garden, a programming puzzle game about controlling the growth of a plant with a state-machine based node system. Created in 48 hours for Ludum Dare 52. C++, Custom Engine",
    }, {
        video: "spacestitcher1.mp4",
        link:"https://kaliuresis.itch.io/space-stitcher",
        description: spacestitcher_desc,
    }, {
        image: "spacestitcher2.gif",
        link:"https://kaliuresis.itch.io/space-stitcher",
        description: spacestitcher_desc,
    }, {
        image: "first person.PNG",
        description: "A mod that turns the 2D sidescroller Noita into a first person game using shader ray marching. Lua, GLSL",
        link: "https://steamcommunity.com/sharedfiles/filedetails/?id=2978090656",
    }, {
        video: "skyland.mp4",
        description: "An procedural shader created as an experiment on using shaders for pixel art. GLSL",
        link: "https://www.shadertoy.com/view/dtByDR",
    }, {
        video: "spinnnny.mp4",
        special_thumbnail: true,
        description: "A shader of twisty fbm noise inspired by the Balatro background. GLSL",
        link: "https://www.shadertoy.com/view/43B3RK",
    }, {
        video: "hamis.mp4",
        special_thumbnail: true,
        description: "A raymarched scene of a h\u00E4mis from Noita walking through fungal caverns. All animation and geometry are procedurally generated in a single-pass stateless shader. GLSL",
        link: "https://www.shadertoy.com/view/lfjXDt",
    },
];

function create_image_or_video(i, thumbnail)
{
    let im;
    if(images[i].image) {
        im = document.createElement("img");
        im.src = "images/"+images[i].image;
        im.alt = images[i].image;
        im.width = 640;
        im.height = 360;
    } else if(images[i].video) {
        im = document.createElement("video");
        im.loop = true;
        // im.playsinline = true;
        im.setAttribute("playsinline","");
        im.setAttribute("webkit-playsinline","");
        im.autoplay = true;
        im.muted = true;
        if(thumbnail && images[i].special_thumbnail)
            im.src = "images/thumbnails/"+images[i].video;
        else
            im.src = "images/"+images[i].video;
        if(!thumbnail) im.controls = true;
        im.width = 640;
        im.height = 360;
    }

    return im;
}

function setup_images()
{
    let viewer = document.getElementById("viewer");
    viewer.addEventListener("click", hide_viewer);

    let gallery = document.getElementById("gallery");
    for(let i = 0; i < images.length; i++) {
        let im = create_image_or_video(i, true);
        if(im) {
            im.onclick=function() {
                let viewer_image = document.getElementById("viewer_image");
                while(viewer_image.firstChild) viewer_image.removeChild(viewer_image.firstChild);

                let im = create_image_or_video(i);
                if(im) viewer_image.appendChild(im);

                if(images[i].link)
                {
                    let link = document.createElement("a");
                    link.href = images[i].link;
                    link.text = images[i].link;
                    viewer_image.appendChild(link);
                }

                let desc = document.createElement("div");
                if(images[i].description)
                    desc.textContent = images[i].description;
                viewer_image.appendChild(desc);

                show_viewer()
            };
            gallery.appendChild(im);
        }
    }
}

function hide_viewer(e)
{
    if(e.target == e.currentTarget) {
        let viewer = document.getElementById("viewer");
        viewer.style.display = "none";

        let gallery = document.getElementById("gallery");
        for(const child of gallery.children) {
            if(child.play) child.play();
        }
    }
}

function show_viewer()
{
    let viewer = document.getElementById("viewer");
    viewer.style.display = "block";

    let gallery = document.getElementById("gallery");
    for(const child of gallery.children) {
        if(child.pause) child.pause();
    }
}

function load_random_image()
{
    let i = Math.floor(Math.random()*images.length);
    let im = create_image_or_video(i);
    im.width = 1024;
    im.height = 576;
    if(im.controls) im.controls = null;


    let a = document.createElement("a");
    a.href = "portfolio.html";

    let zone = document.getElementById("random_image_zone");
    a.appendChild(im);
    zone.appendChild(a);
}