var nullFunc = ()=>{};
var poppingState = false;
var closingGallery = false;
function onPopState(event){
    resetAppState();
    var hash = event.target.location.hash;
    poppingState = true;
    if(hash.startsWith('#js:'))
        eval(decodeURIComponent(hash.substr(4)));
    poppingState = false;
    closingGallery = false;
}

window.onpopstate = onPopState
var imgQualities = {
    'thumb': imgs_thumb,
    'small': imgs_small,
    'dcent': imgs_dcent,
    'large': imgs_large,
    'full': imgs_full
}
var qualityName = {
    'thumb': 'Thumbnail',
    'small': 'Small',
    'dcent': 'Decent',
    'large': 'Large',
    'full': 'Full'
}

function formatFileSize(bytecount){
    units = ['B', 'KB', 'MB', 'GB', 'TB'];
    magnitude = 0;
    while(bytecount>=2048){
        bytecount/=1024;
        magnitude++;
    }
    bytecount = Math.round(bytecount*10)/10;
    return `${bytecount} ${units[magnitude]}`;
}

function openGallery(image, quality){
    if(closingGallery){setTimeout(closeGallery, 50); return;}
    if(typeof(quality)==typeof(undefined)) quality = 'dcent';
    if(!poppingState)
        window.history.pushState(null, document.title,
            `#js:openGallery(${encodeURIComponent(JSON.stringify(image))}, ${encodeURIComponent(JSON.stringify(quality))})`
        );
    galleryBrowser.classList.remove('nodisplay');
    item = images[image];
    img = imgQualities[quality][image];
    galleryImage.style.backgroundImage = `url('./${img}')`;
    // Qualities highlight
    if(quality=='thumb') qualityThumb.style.background = "#619A3588";
    else qualityThumb.style.background = null;
    if(quality=='small') qualitySmall.style.background = "#619A3588";
    else qualitySmall.style.background = null;
    if(quality=='dcent') qualityDcent.style.background = "#619A3588";
    else qualityDcent.style.background = null;
    if(quality=='large') qualityLarge.style.background = "#619A3588";
    else qualityLarge.style.background = null;
    if(quality=='full') qualityFull.style.background = "#619A3588";
    else qualityFull.style.background = null;
    // Set callback
    seeThumb.setAttribute('onclick', `openGallery(${JSON.stringify(image)}, 'thumb')`);
    seeSmall.setAttribute('onclick', `openGallery(${JSON.stringify(image)}, 'small')`);
    seeDcent.setAttribute('onclick', `openGallery(${JSON.stringify(image)}, 'dcent')`);
    seeLarge.setAttribute('onclick', `openGallery(${JSON.stringify(image)}, 'large')`);
    seeFull.setAttribute('onclick', `openGallery(${JSON.stringify(image)}, 'full')`);
    // Set download targets
    downloadThumb.href = './' + imgQualities['thumb'][image];
    downloadSmall.href = './' + imgQualities['small'][image];
    downloadDcent.href = './' + imgQualities['dcent'][image];
    downloadLarge.href = './' + imgQualities['large'][image];
    downloadFull.href = './' + imgQualities['full'][image];
    // Set download names
    downloadThumb.setAttribute('download', `${name} - ${image} - ${artists[item.artist].name} - ${item.date.join('-')} (${qualityName['thumb']}).${formats[image]['thumb']}`);
    downloadSmall.setAttribute('download', `${name} - ${image} - ${artists[item.artist].name} - ${item.date.join('-')} (${qualityName['small']}).${formats[image]['small']}`);
    downloadDcent.setAttribute('download', `${name} - ${image} - ${artists[item.artist].name} - ${item.date.join('-')} (${qualityName['dcent']}).${formats[image]['dcent']}`);
    downloadLarge.setAttribute('download', `${name} - ${image} - ${artists[item.artist].name} - ${item.date.join('-')} (${qualityName['large']}).${formats[image]['large']}`);
    downloadFull.setAttribute('download', `${name} - ${image} - ${artists[item.artist].name} - ${item.date.join('-')} (${qualityName['full']}).${formats[image]['full']}`);
    // Set image sizes
    sizeThumb.innerText = `(${formatFileSize(sizes[image]['thumb'])}) - ${formats[image]['thumb']}`;
    sizeSmall.innerText = `(${formatFileSize(sizes[image]['small'])}) - ${formats[image]['small']}`;
    sizeDcent.innerText = `(${formatFileSize(sizes[image]['dcent'])}) - ${formats[image]['dcent']}`;
    sizeLarge.innerText = `(${formatFileSize(sizes[image]['large'])}) - ${formats[image]['large']}`;
    sizeFull.innerText = `(${formatFileSize(sizes[image]['full'])}) - ${formats[image]['full']}`;
}

function filterArtist(artist){
    resetAppState();
    if(!poppingState)
        window.history.pushState(null, document.title,
            `#js:filterArtist(${encodeURIComponent(JSON.stringify(artist))})`
        );
    nestedElements.classList.add('nodisplay');
    listElements.classList.remove('nodisplay');
    filterNav.classList.remove('nodisplay');
    var item = artists[artist];
    filterIcon.className = "fa fa-user";
    filterText.innerText = item.name;
    for(var key in images){
        image = images[key];
        if(image.artist == artist)
            document.getElementById('list-'+key).classList.remove('nodisplay');
        else
            document.getElementById('list-'+key).classList.add('nodisplay');
    }
}

function filterTag(tag){
    resetAppState();
    if(!poppingState)
        window.history.pushState(null, document.title,
            `#js:filterTag(${encodeURIComponent(JSON.stringify(tag))})`
        );
    nestedElements.classList.add('nodisplay');
    listElements.classList.remove('nodisplay');
    filterNav.classList.remove('nodisplay');
    var item = tags[tag];
    filterIcon.className = "fa fa-"+item.icon;
    filterText.innerText = item.name;
    for(var key in images){
        image = images[key];
        if((image.technology == tag) || (image.tags.indexOf(tag) >= 0))
            document.getElementById('list-'+key).classList.remove('nodisplay');
        else
            document.getElementById('list-'+key).classList.add('nodisplay');
    }
}

function resetAppState(skipScroll){
    nestedElements.classList.remove('nodisplay');
    listElements.classList.add('nodisplay');
    filterNav.classList.add('nodisplay');
    galleryBrowser.classList.add('nodisplay');
    if(!skipScroll)
        window.scrollTo(0, 0);
}

var clearFilters = ()=>{resetAppState(); window.history.back();}
var closeGallery = ()=>{resetAppState(true); closingGallery=true; window.history.back();}
!function onInit(){
    var hash = window.location.hash;
    poppingState = true;
    if(hash==='')
        window.history.replaceState(null, document.title, '#');
    else if(hash.startsWith('#js:'))
        eval(decodeURIComponent(hash.substr(4)));
    poppingState = false;
}();