// Include php configuration file.
// 
class Stack extends Array {
    isEmpty() {
        return this.length === 0;
    }
    peek() {
        if (this.length === 0)
            return null;
        return this[this.length - 1];
    }
}

class DownloadImages {
    Images = [];
    get Count() {
        return this.Images.length;
    }
    addImage(filename, path) {
        if (!this.inList(filename, path)) {
            var image = { filename: filename, path: path }
            this.Images.push(image);
            this.countChanged(this);
        }

    }
    removeImage(filename, path) {
        for (var i = 0; i < this.Images.length; i++) {
            if (filename === this.Images[i].filename && path === this.Images[i].path) {
                this.Images.splice(i, 1);
                this.countChanged(this);
                return i;
            }
        }
        return false;
    }
    clearImages() {
        this.Images = [];
        this.countChanged(this);
    }
    inList(filename, path) {
        for (var i = 0; i < this.Images.length; i++) {
            if (filename === this.Images[i].filename && path === this.Images[i].path) {
                return true;
            }
        }
        return false;
    }
    countChanged(downloadImages) { return; }
}

var images = [];
var autoCompletes = [];
var downloadImages = new DownloadImages();
var downloadInProgress = false;
var navPath = new Stack();
var player;
var playerReady = false;

function fetchDirectory(directory) {
    if (navPath.length === 0) {
        navPath.push(directory);
    }
    var state = { page: directory };
    //history.pushState(state, null, null);
    jQuery.getJSON('/json.php?path=' + directory).done(buildGallery);
}

function fetchCatalogs(catalogsDirectory) {
    jQuery.getJSON('/json.php?path=' + catalogsDirectory).done(buildCatalogs);
}

function buildGallery(data) {
    var selectedImages = [];
    var galleryDiv = $('#gallery');
    var count = 0;
    data.Images.sort(function (a, b) {
        var fa = a.title.toLowerCase();
        var fb = b.title.toLowerCase();
        if (fa > fb) {
            return 1;
        }
        if (fa < fb) {
            return -1;
        }
        return 0;
    });
    data.Directories.sort(function (a, b) {
        var fa = a.title.toLowerCase();
        var fb = b.title.toLowerCase();
        if (fa > fb) {
            return 1;
        }
        if (fa < fb) {
            return -1;
        }
        return 0;
    });
    galleryDiv.empty();
    if (navPath.length > 1) {
        $('#searcharea').show();
        $('#downloadbutton').show();
        $('#cleardownloadbutton').show();
        $('#backbutton').show();
    } else {
        $('#searcharea').hide();
        $('#downloadbutton').hide();
        $('#cleardownloadbutton').hide();
        $('#backbutton').hide();
    }
    for (var i = 0; i < data.Directories.length; i++) {
        var title = data.Directories[i].title;
        var path = data.Directories[i].path;
        var thumbnailPath = data.Directories[i].thumbnailPath;
        var id = title === "Go Back" ? "Back" : i;
        galleryDiv.append('<div class="gallerycell" id="folder' + id + '" path="' + path + '" filename="' + title + '"><div><img src="' + '/thumbnail.php?url=' + thumbnailPath + '&mwidth=200&mheight=200' + '" loading="eager" path="' + path + '" filename="' + title + '"></div><div class="imagetitle" id="foldertitle' + i + '" path="' + path + '" filename="' + title + '">' + title + "</div></div>");
    }

    $('[id^=folder]').on("click", folderClicked);

    for (var i = 0; i < data.Images.length; i++) {
        var loadingMode = "eager";
        /*
            data object:{
                Directories array [
                    title: "folder name"
                    path: "path"
                    thumnailPath: "thumbnail path"
                ]
                Images array[
                    title: "Image Name"
                    short_title: "Shortend Title"
                    search_string: "search text"
                    path: "image path"
                    filename: "image file name"
                ]
            }
            
        */
        var title = data.Images[i].title;
        var search_string = data.Images[i].search_string;
        var short_title = data.Images[i].short_title;
        var path = data.Images[i].path;
        var filename = data.Images[i].filename;
        var filePath = path.slice(-1) == "/" ? path + filename : path + "/" + filename;
        var divId = "image" + count;
        var checkboxId = "checkbox" + count;
        var titleId = "title" + count;
        var checked = "";
        if (downloadImages.Count > 0) {
            if (downloadImages.inList(filename, path)) {
                selectedImages.push(divId);
            }
        }
        var div = galleryDiv.append(
            '<div class="gallerycell" id="' + divId + '" path="' + path + '" filename="' + filename + '"><div><input type="checkbox" ' + checked + ' class="imagecheckbox" id="' + checkboxId + '" path="' + path + '" filename="' + filename + '"/><span class="checkmark"></span><a href="' + filePath + '"><img src="/thumbnail.php?url=' + filePath + '&mwidth=200&mheight=200" loading="' + loadingMode + '" alt="' + title + '" title="' + title + '"></a></div><div class="imagetitle" id="' + titleId + '" path="' + path + '" filename="' + filename + '">' + title + '</div></div>');
        images.push({
            title: title,
            short_title: short_title,
            filename: filename,
            path: path,
            search_string: search_string,
            index: count
        });
        autoCompletes.push(title);
        count++;
    }
    $('#products').on("dragstart", (event) => { return false });
    $('div.gallerycell > div > a').on("click", (event) => { return false; });
    $('.gallerycell').on("dblclick", (event) => {
        var galleryDiv = $(event.target).closest(".gallerycell[id^=image]:visible");
        $.fancybox.open($(".gallerycell[id^=image]:visible").find("div > a"), {
            buttons: [
                "zoom",
                "download",
                "close"
            ]
        }, $("[id^=image]:visible").index(galleryDiv));
    });
    if (data.Images.length !== 0) {
        $('html, body').animate({
            scrollTop: $('#products').offset().top
        }, 350);
    }
}

function buildCatalogs(data) {
    data.Images.sort(function (a, b) {
        var fa = a.title.toLowerCase();
        var fb = b.title.toLowerCase();
        if (fa > fb) {
            return 1;
        }
        if (fa < fb) {
            return -1;
        }
        return 0;
    });
    var catalogsList = $('div .catalogslist');
    for (var i = 0; i < data.Images.length; i++) {
        var title = data.Images[i].title;
        var search_string = data.Images[i].search_string;
        var short_title = data.Images[i].short_title;
        var path = data.Images[i].path;
        var filename = data.Images[i].filename;
        var filePath = path.slice(-1) == "/" ? path + filename : path + "/" + filename;
        var catalog = "<div class='catalogcell'><div class='catalogicon'><a href='" + filePath + "' data-fancybox='catalogs'><img src='/thumbnail.php?url=" + filePath + "&mwidth=300&mheight=300' alt='View our " + title + " Catalog'><br /><span class='catalogtitle'>" + title + "</span></a></div></div>";
        catalogsList.append(catalog);
    }
}

function searchChanged(event) {
    var searchValue = $(event.target).val();
    var imagesFound = 0;
    for (var i = 0; i < images.length; i++) {
        if (searchValue == "") {
            // $('#image' + images[i].index).show();
            // $('#image' + images[i].index + ' > div > a').attr("data-fancybox", "gallery");
            $('.gallerycell[id^=image]').show();

            imagesFound++;
        } else if (images[i].search_string.indexOf(searchValue.toUpperCase()) == -1) {
            $('#image' + images[i].index).hide();
            //$('#image' + images[i].index + ' > div > a').removeAttr("data-fancybox");
        } else {
            imagesFound++;
            $('#image' + images[i].index).show();
        }
    }
    if (imagesFound !== 0) {
        $('html, body').animate({
            scrollTop: $('#products').offset().top
        }, 250);
    }
}

function setCookie(cname, cvalue, exdays) {
    var d = new Date();
    d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
    var expires = "expires=" + d.toUTCString();
    document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}

function getCookie(cname) {
    var name = cname + "=";
    var ca = document.cookie.split(';');
    for (var i = 0; i < ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0) == ' ') {
            c = c.substring(1);
        }
        if (c.indexOf(name) == 0) {
            return c.substring(name.length, c.length);
        }
    }
    return "";
}

function folderClicked(event) {
    $('#searchbox').val("");
    var selectedItem = $(event.target).closest("[id^=folder][class=gallerycell]");
    var path = selectedItem.attr("path");
    var folderName = selectedItem.attr("filename");
    var folderId = selectedItem.attr('id');
    navPath.push(folderName);
    fetchDirectory(path);
}

function goBack(event) {
    if (navPath.length == 1) {
        return;
    }
    navPath.pop();
    var path = "";
    for (var i=0; i<navPath.length; i++){
        path += navPath[i]+"/";
    }
    fetchDirectory(path);
    $('#searchbox').val("");
}

function checkboxClicked(event) {
    var checked = $(event.target).prop("checked");
    var id = $(event.target).attr("id");
    var path = $(event.target).attr("path");
    var filename = $(event.target).attr("filename");
    if (checked) {
        downloadImages.addImage(filename, path);
        //downloadImages[imageId]
    } else {
        var index = downloadImages.removeImage(filename, path);
    }
}

function fetchDownloadImages() {
    var request;
    var totalSize;
    var progressSize;
    var startTime;
    if (downloadImages.Count > 0) {
        $("#downloaddialog").dialog({
            autoOpen: true,
            modal: true,
            resizable: false,
            show: "blind",
            hide: "blind",
            width: 'auto',
            height: 'auto',
            closeOnEscape: false,
            open: function () {
                $(".ui-dialog-titlebar-close", $(this).parent()).hide();
                $("#downloaddialog-message").text("Preparing your download.");
                $("#downloaddialog-detail").html("Depending on the number of images selected this may take a few minutes.");
                $('#downloaddialog-progresstext').text("Please do not close this window until the download completes.");
                $("#downloadprogress").progressbar({ value: false });
                $(this).resizable({
                    disabled: true
                });
            },
            buttons: [
                {
                    text: "Cancel",
                    iconPosition: "end",
                    click: function () {
                        request.abort();
                        $(this).dialog("close");
                    }
                }
            ]
        });
        request = new XMLHttpRequest();
        request.open('POST', "/download.php");
        request.responseType = 'blob';
        request.onload = function () {
            var link = document.createElement("a");
            var href = window.URL.createObjectURL(request.response);
            link.href = href;
            link.download = "froggtoggs_images.zip";
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
            $("#downloaddialog-detail").html("Click <a href='" + href + "' download='froggtoggs_images.zip'>here</a> if the file does not download automatically after a few seconds.");
        };
        request.addEventListener("loadstart", function (e) {
            $("#downloaddialog-message").text();
            startTime = new Date().getTime();
        });
        request.addEventListener("progress", function (e) {
            var elapsedTime = (new Date().getTime()) - startTime;
            var bytesPerTime = e.loaded / elapsedTime;
            var estimatedTotalTime = e.total / bytesPerTime;
            var timeLeftMillis = (estimatedTotalTime - elapsedTime);
            var timeLeftSeconds = Math.floor((timeLeftMillis / 1000) % 60);
            var timeLeftMinutes = Math.floor((timeLeftMillis / (1000 * 60)) % 60);
            var timeLeftHours = Math.floor((timeLeftMillis / (1000 * 60 * 60)) % 24);
            var timeLeftString = "";
            if (timeLeftHours > 0)
                timeLeftString += timeLeftHours + " hours ";
            if (timeLeftMinutes > 0)
                timeLeftString += timeLeftMinutes + " minutes ";
            timeLeftString += timeLeftSeconds + " seconds remaining.";
            var downloadProgressString = (e.loaded / 1048576).toFixed(2) + " MB transferred of " + (e.total / 1048576).toFixed(2) + " MB total.";
            $('#downloaddialog-message').text("Download in progress.");
            $('#downloaddialog-detail').text(timeLeftString);
            $('#downloaddialog-progresstext').text(downloadProgressString);
            $('#downloadprogress').progressbar("value", (e.loaded / e.total) * 100);
        });
        request.addEventListener("load", function (e) {
            $('#downloaddialog-message').text("Download complete.");
            $('#downloaddialog-progresstext').text((e.total / 1048576).toFixed(2) + " MB transferred.");
            $("#downloaddialog").dialog("option", "buttons", [
                {
                    text: "Close",
                    iconPosition: "end",
                    click: function () {
                        $(this).dialog("close");
                    }
                }
            ]);
            $("#downloaddialog").dialog("option", "closeOnEscape", true);
        });
        request.addEventListener("error", function (e) {
            $("#downloaddialog-message").text("Error");
            $("#downloaddialog-detail").html("Something went wrong. Please try again later.");
            $('#downloaddialog-progresstext').text("If this persists, please contact us at <a href='mailto:itdept@froggtoggs.com'>itdept@froggtoggs.com</a> and let us know.");
            $("#downloaddialog").dialog("option", "buttons", [
                {
                    text: "Close",
                    iconPosition: "end",
                    click: function () {
                        $(this).dialog("close");
                    }
                }
            ]);
        });
        request.addEventListener("abort", function (e) {
        });
        
        var requestData = { DownloadImages: downloadImages.Images };
        // console.log(JSON.stringify(requestData));
        request.send(JSON.stringify(requestData));
    }
}

function clearDownloadImages() {
    selection.clearSelection();
    clearSelectedCells();
    downloadImages.clearImages();
}

function selectCell(div) {
    $(div).addClass('selectedcell');
    $(div).find('div > input').prop('checked', true);
    var path = $(div).attr('path');
    var filename = $(div).attr('filename');
    downloadImages.addImage(filename, path);
}

function selectAllCells(){
    var temp = downloadImages.countChanged;
    window.downloadImages.countChanged = (event) => { return true; }
    $(document).find("div[id^=image].gallerycell:visible:not(.selectedcell)").each((index, item) => {
        var path = $(item).attr("path");
        var fileName = $(item).attr("filename");
        selectCell(item);
        window.downloadImages.addImage(fileName, path);
        return true;
    });
    window.downloadImages.countChanged = temp;
    window.downloadImages.countChanged(window.downloadImages);
}

function deselectCell(div) {
    // console.log(div);
    $(div).removeClass('selectedcell');
    // console.log(div);
    $(div).find('div > input').prop('checked', false);
    // console.log(div);
    var path = $(div).attr('path');
    var filename = $(div).attr('filename');
    downloadImages.removeImage(filename, path);
}

function clearSelectedCells() {
    $("div[id^=image].gallerycell.selectedcell > div > input").prop("checked", false);
    $("div[id^=image].gallerycell.selectedcell").removeClass("selectedcell");
}

function onScrollHandler() {
    // console.log(window.scrollY);
    if (window.scrollY > 1100) {
        $('#titleline').hide();
    } else {
        $('#titleline').show();
    }
}

function onPlayerReady(event) {
    player.cuePlaylist({
        list: "PLqFYfgFQrwwdbeg-ll7PW7oumLogD92bm"
    });

}

function onPlayerStateChange(event) {
    if (event.data === 5) {
        event.target.playVideo();
    }
    return;
}

function initYouTubePlayer() {
    // console.log("Youtube Player Created.");
    player = new YT.Player("youtubeplayer", {
        playerVars: {
            "playsinline": 1
        },
        events: {
            "onReady": onPlayerReady,
            "onStateChange": onPlayerStateChange
        }
    });
}

function onYouTubeIframeAPIReady() {
    playerReady = true;
}

function openImagePreview(event, ui){
    // console.log(event);
    // console.log(ui.target);
    // console.log($(ui.target).closest(".gallerycell[id^=image]:visible").attr("id"));
    //console.log($(".gallerycell[id^=image]:visible").find("div > a"));
    var targetAnchor = $(ui.target).closest(".gallerycell[id^=image]:visible").find("div > a");
    // console.log(targetAnchor);
    var visibleImages = $(".gallerycell[id^=image]:visible div > a");
    // console.log(visibleImages.index(targetAnchor));
    var imageIndex = visibleImages.index(targetAnchor);
    $.fancybox.open(visibleImages, {
        buttons: [
            "zoom",
            "download",
            "close"
        ]
    }, imageIndex);
}

function openSelectedImagePreview(event, ui){
    // console.log(event);
    // console.log(ui.target);
    // console.log($(ui.target).closest(".gallerycell[id^=image]:visible").attr("id"));
    //console.log($(".gallerycell[id^=image]:visible").find("div > a"));
    var targetAnchor = $(ui.target).closest(".gallerycell[id^=image]:visible").find("div > a");
    // console.log(targetAnchor);
    var selectedImages = $(".gallerycell.selectedcell[id^=image] div > a");
    // console.log(selectedImages.index(targetAnchor));
    //var imageIndex = selectedImages.index(targetAnchor);
    $.fancybox.open(selectedImages, {
        buttons: [
            "zoom",
            "download",
            "close"
        ]
    }, 0);
}

function downloadOneImage(event, ui){
    // console.log(ui);
    var targetAnchor = $(ui.target).closest(".gallerycell[id^=image]:visible").find("div > a");
    // console.log(targetAnchor);
    // var anchor = $("#");
    // console.log(anchor);
    // anchor.attr("href", targetAnchor.attr("href"));
    // anchor.attr("download","image.png");
    // anchor.click();
    //anchor.remove();
    var link = document.createElement("a");
    var href = targetAnchor.attr("href");
    link.href = href;
    link.download = "";
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);

}

function openImageNewTab(event, ui){
    var targetAnchor = $(ui.target).closest(".gallerycell[id^=image]:visible").find("div > a");
    window.open(targetAnchor.attr("href"),"_blank");
}

function clearSearchBox(event, ui){
    $("#searchbox").val("").change();
}

function selectItem(event, ui){
    selection.select(document.getElementById($(ui.target).closest(".gallerycell[id^=image]:visible").attr("id")));
    selectCell($(ui.target).closest(".gallerycell[id^=image]:visible"));
    // console.log(selection);
}

function unselectItem(event, ui){
    selection.deselect(document.getElementById($(ui.target).closest(".gallerycell[id^=image]:visible").attr("id")));
    deselectCell($(ui.target).closest(".gallerycell[id^=image]:visible"));
    // console.log(selection);
}

function requestImage(){
    $('#request-form').validate({
        debug:true,
        rules: {
            "name": {
                required: true,
                minlength: 2
            },
            "email": {
                required: true,
                email: true
            },
            "item-name": {
                required: true,
                minlength: 5
            }
        },
        messages: {
            "name": {
                required: "Please enter your name.<br />",
                minlength: "Name must consist of at least 2 characters.<br />"
            },
            "email": {
                required: "Please enter your email address.<br />",
                email: "Please enter a valid email address.<br />",
            },
            "item-name": {
                required: "Please enter an item name or number.<br />",
                minlength: "Item name must be at least 5 characters.<br />"
            }
        },
        errorPlacement: function(error, element) { 
            error.appendTo(element.parent().parent());
        },
    });
    $("#requestdialog").dialog({
        autoOpen: true, 
        height:'auto', 
        width:'auto', 
        buttons:[
            {
                id: "requestdialog-submit",
                text: "Send",
                click: function(){
                    //submitHandler: function(form) {
                        // do other things for a valid form
                        var form = $("#request-form");
                        if (form.valid()){
                            $.ajax({
                                type: "POST",
                                url: "request.php",
                                data: $(form).serialize(),
                                success: function(data){
                                    var dataObj = JSON.parse(data);
                                    //console.log(data);
                                    if(dataObj.status == "success"){
                                        form.find("input[type=text], input[type=email], textarea").val("");
                                        //$("#requestdialog").dialog("close");
                
                                    } else {
                                        // console.log("Failure");
                                        //$("#requestdialog").dialog("close");
                                    }
                                }
                            });
                            $("#requestdialog").dialog("close");
                        }
                    //},
            
                    //console.log($('#request-form').submit());
                    //$(this).dialog("close");
                },
            },
            // {
            //     text: "Cancel",
            //     click: function(){
            //         $(this).dialog("close");
            //     },
            //     class: "ui-state-error"
            // }
            // Send:function(){ 
            //     $(this).dialog("close");
            // }, 
            // Cancel:function(){ 
            //     $(this).dialog("close");
            // }
        ],
        close: function(){
            var form = $("#request-form");
            form[0].reset();
            //form[0].reset();
            //allFields.removeClass("ui-state-error");
        }
    });
}
function refreshCaptcha(){
	var img = document.images['captchaimg'];
	img.src = img.src.substring(0,img.src.lastIndexOf("?"))+"?rand="+Math.random()*1000;
}
$(document).ready(function () {
    // $(window).on('popstate', function(e) {
    //     //e.preventDefault();
    //     console.log(e);
    //     console.log(e.state);
    //     if (navPath.length > 1) {
    //         goBack();
    //         return true;
    //     }
    //     var leave = confirm("Are you sure you want to leave this page?");
    //     console.log(leave);
    //     if (leave) {
    //         history.pushState(null, null, navPath[navPath.length-1]);
    //         console.log(history.state);
    //         return true;
    //     } else {
    //         history.pushState(null, null, navPath[navPath.length - 1]);
    //         console.log(history.state);
    //         return false;
    //     }
    //     // if (leave) {
    //     //     return true;
    //     // } else {
    //     //     history.pushState(null, null, navPath[navPath.length - 1]);
    //     // }
    //     // return false;
    // });
    fetchDirectory('/Images');
    fetchCatalogs('/Catalogs');
    $('#youtubeplayer').on('click', initYouTubePlayer);
    $('input[type=search]').on('search', searchChanged);
    $('input[type=search]').on('change', searchChanged);
    downloadImages.countChanged = (dlImage) => {
        if (dlImage.Count > 0) {
            $("#downloadbutton").removeClass('disabled');
            $("#cleardownloadbutton").removeClass("disabled");
            $('#downloadbutton').html('Download (' + dlImage.Count + ')');
        } else {
            $("#downloadbutton").addClass('disabled');
            $("#cleardownloadbutton").addClass("disabled");
            $('#downloadbutton').html('Download');
        }
    }
    $(document).keydown(function (e) {
        if (navPath.length == 1) {
            return true;
        }
        // CTRL+F JUMP TO SEARCH BAR
        if (e.keyCode == 70 && e.ctrlKey) {
            var element = document.getElementById("products");
            element.scrollIntoView();
            $(document).find('#searchbox').focus();
            return false;
        }
        // CTRL+A - SELECT ALL VISIBLE CELLS
        if (e.keyCode == 65 && e.ctrlKey) {
            selectAllCells();
            return false;
        }
        // ESC clear all selected cells
        if (e.keyCode == 27) {
            window.clearDownloadImages();
            selection.cancel();
        }
        return true;
    });
    var infoPopup = getCookie("info_popup");
    if (infoPopup == "") {
        $("#infodialog").dialog({
            autoOpen: true,
            modal: true,
            show: "blind",
            hide: "blind",
            width: 'auto',
            height: 'auto',
            closeOnEscape: true,
            dragable: false,
            closeText: "",
            buttons: [{
                text: " ",
                icon: "ui-icon-check",
                dragable: false,
                click: function () {
                    $(this).dialog("close");
                }
            }],
            close: function () {
                var hideInfoDialog = $("#hideinfodialog")[0].checked;
                if (hideInfoDialog) {
                    setCookie("info_popup", "hidden", 365);
                }
            },
            open: function (e, ui) {
                $(document).one("keydown", (event)=>{
                    if (event.keyCode === 27) {
                        $(this).dialog("close");
                    }
                    return true;
                });
                var pane = $(this).dialog("widget").find(".ui-dialog-buttonpane");
                // console.log(pane);
                $("<label class='shut-up' ><input id='hideinfodialog' type='checkbox'/> Don't show this again.</label>").prependTo(pane);
                $("<div class='infodialogcopyright'>Use only with permission, all images &copy; 1996 - 2024 frogg toggs<sup>&reg;</sup></div>").prependTo(pane);
            }
        });
    }
    window.selection = new SelectionArea({
        selectionAreaClass: 'selection-area',
        selectionContainerClass: 'selection-area-container',
        container: '.gallery',
        selectables: ['div[class=gallerycell][id^=image]'],
        startAreas: ['.gallery'],
        boundaries: ['.gallery'],
        behaviour: {
            overlap: 'invert',
            intersect: 'touch',
            startThreshold: 0,
            scrolling: {
                speedDivider: 10,
                manualSpeed: 750
            }
        },
        features: {
            touch: true,
            range: true,
            singleTap: {
                allow: true,
                intersect: 'native'
            }
        }
    }).on('beforestart', ({store,  event }) => {
        if (event.button === 1) {
            return false;
        }
        if (event.button === 2){
            return false;
        }
        var isGalleryCell = event.composedPath().some((item) => {
            return $(item).hasClass("gallerycell") && $(item).attr('id') !== undefined && $(item).attr('id').indexOf("image") === 0;
        });
        if (!event.ctrlKey && !event.metaKey && !event.shiftKey && !isGalleryCell) {
            clearDownloadImages();
        }
        var gallerycell = $(event.target).closest(".gallerycell[id^=image]:visible");
        var imageId = gallerycell.attr("id");
        var selectionIndex = selection.getSelection().findIndex((element) => { return $(element).attr("id") == imageId; });
        if (selectionIndex > -1 && (event.ctrlKey || event.metaKey)) {
            deselectCell(gallerycell);
        }
        return true;
    }).on('start', ({ store, event }) => {
        // if (!event.ctrlKey && !event.metaKey) {
        //     clearDownloadImages();
        //     return false;
        // }
        // console.log(event);
        // console.log(store);
        return true;
    }).on('move', ({ store: { changed: { added, removed } } }) => {
        for (const el of added) {
            // console.log(el);
            selectCell(el);
        }
        for (const el of removed) {
            deselectCell(el);
        }
    }).on('stop', () => {
    });
    $.getScript("https://www.youtube.com/iframe_api");
    // $.getScript("/js/jquery.ui-contextmenu.min.js");
    var menuTitle = {title: "Menu",cmd:"header", isHeader: true};
    var previewImage = {title: "Open <kbd>Double Click</kbd>", cmd: "preview", action: openImagePreview, uiIcon: "ui-icon-circle-zoomin", hide: true, data:{}};
    var previewImageNewWindow = {title: "Open In New Tab <kbd>Middle Mouse</kbd>", cmd: "previewnewwindow", action: openImageNewTab, uiIcon: "ui-icon-circle-zoomin", hide: true, data:{}};
    var download = {title: "Download Selected Image(s)", cmd: "download", action: fetchDownloadImages, uiIcon: "ui-icon-arrowthickstop-1-s", tooltip: "Download Selected Image(s)", disabled: false};
    var downloadOne = {title: "Download", cmd: "downloadone", action: downloadOneImage, uiIcon: "ui-icon-arrowthickstop-1-s", tooltip: "Download Selected Image(s)", hide: false, disabled: false};
    var previewSelected = {title: "Preview Selected Image(s)", cmd: "previewselected", action: openSelectedImagePreview, uiIcon: "ui-icon-circle-zoomin", tooltip:"Preview Selected Image(s)", disabled: false, hide: true};
    var select = {title: "Select <kbd>Click</kbd>", cmd: "select", action: selectItem, uiIcon: "ui-icon-plusthick", hide: false, disabled: false};
    var unselect = {title: "Unselect <kbd>CTRL+Click</kbd>", cmd:"unselect", action: unselectItem, uiIcon:"ui-icon-minusthick", disabled: false, hide: false};
    var selectAll = {title: "Select All <kbd>Ctrl+A</kbd>", cmd:"selectall", action: selectAllCells, uiIcon: "ui-icon-blank", disabled: false};
    var clearSelection = {title: "Clear Selection <kbd>Esc</kbd>", cmd:"clearselection", action: clearDownloadImages, uiIcon: "ui-icon-closethick", disabled: false};
    var clearFilter = {title: "Clear Filter", cmd:"clearfilter", action: clearSearchBox, uiIcon: "ui-icon-closethick", disabled: false};
    var seperator = {title: "---", cmd:"seperator", disabled: true};
    var back = {title: "Back", cmd:"back", action: goBack, uiIcon: "ui-icon-arrowreturnthick-1-w", disabled: false};
    $(document).contextmenu({
        delegate: ".products",
        autoFocus: true,
        preventContextMenuForPopup: true,
        preventSelect: true,
        taphold: true,
        addClass: "contextmenu",
        menu: [
            menuTitle,
            previewImage,
            previewImageNewWindow,
            downloadOne,
            select,
            unselect,
            seperator,
            previewSelected,
            download,
            seperator,
            selectAll,
            clearSelection,
            clearFilter,
            seperator,
            back
        ],
        // select: function(event, ui){
        //     var $target = ui.target;
        //     switch(ui.cmd){
        //         case "selectall":
        //             selectAllCells();
        //             break;
        //         case "clear":
        //             clearSelectedCells();
        //             break;
        //         case "download":
        //             fetchDownloadImages();
        //             break;
        //     }
        // },
        beforeOpen: function(event, ui){
            var $menu = ui.menu,
                $target = ui.target;
            var galleryDiv = $(ui.target).closest(".gallerycell[id^=image]:visible");
            // console.log(galleryDiv);
            previewImage.hide = galleryDiv.length === 0;
            downloadOne.hide = previewImage.hide;
            previewImageNewWindow.hide = previewImage.hide;
            if (!previewImage.hide){
                // console.log(galleryDiv.find(".gallerycell div[id^=title]"));
                menuTitle.title = galleryDiv.find("div[id^=title]").text();
            } else {
                menuTitle.title = "Menu";
            }
            var imagesOnScreen = $(".gallerycell[id^=image]").length;
            var imagesNotSelected = $(".gallerycell:not(.selectedcell):visible").length  === 0;
            if (imagesOnScreen === 0){
                return false;

            }
            $(document).contextmenu("updateEntry", menuTitle.cmd, {title: menuTitle.title});
            $(document).contextmenu("updateEntry", previewImage.cmd, {hide: previewImage.hide});
            $(document).contextmenu("updateEntry", previewSelected.cmd, {disabled: downloadImages.Count === 0})
            $(document).contextmenu("updateEntry", download.cmd, {disabled: downloadImages.Count === 0});
            $(document).contextmenu("updateEntry", select.cmd, {hide: galleryDiv.hasClass("selectedcell") || previewImage.hide});
            $(document).contextmenu("updateEntry", unselect.cmd, {hide: !galleryDiv.hasClass("selectedcell") || previewImage.hide});
            $(document).contextmenu("updateEntry", selectAll.cmd, {disabled: imagesNotSelected});
            $(document).contextmenu("updateEntry", clearSelection.cmd, {disabled: downloadImages.Count === 0});
            $(document).contextmenu("updateEntry", clearFilter.cmd, {disabled: $("#searchbox").val() === ""});
            $(document).contextmenu("updateEntry", downloadOne.cmd, {hide: downloadOne.hide});
            $(document).contextmenu("updateEntry", previewImageNewWindow.cmd, {hide: previewImageNewWindow.hide});
        },
    });
});