var example_functions = (function () {

    var
        input = "image",
        output = "classification";

    // Click Events
    document.addEventListener("DOMContentLoaded", function (e) {

        add_event('.function-types-back-button', 'click', function_types_back_button_click);
        add_event('.info-tile-selector', 'click', load_tile);

    });


    function function_types_back_button_click(e) {
        e.preventDefault();
        var target = e.target.getAttribute("data-target")
        function_types_explorer_change_tile(target);
    }


    function load_tile(e) {
        e.preventDefault();

        var parentElement = e.srcElement;
        var parentElement = parentElement.closest('.info-tile-selector');

        // Is the button disabled, if so, don't act:
        if (!parentElement.classList.contains("disabled")) {

            if (parentElement.getAttribute("data-input")) {
                input = parentElement.getAttribute("data-input");
                clear_selected_classes(".info-tile-selector-input");
                update_output_types(input);
            }
            else if (parentElement.getAttribute("data-output")) {
                output = parentElement.getAttribute("data-output");
                clear_selected_classes(".info-tile-selector-output");
                update_input_types(output);
            }

            output = check_default_output(input, output);

            this.classList.add("selected");

            clear_tiles();
            document.querySelector("#info-" + input + "-" + output).style.display = "block";

            // On mobile, show the next tile:
            if (window.innerWidth <= 900) {

                // If clicking on an input type, flip to the output pane:
                if (parentElement.classList.contains("info-tile-selector-input")) {
                    function_types_explorer_change_tile("Output");
                }

                // If clicking on an output type, flip to the examples pane
                if (parentElement.classList.contains("info-tile-selector-output")) {
                    function_types_explorer_change_tile("Detail");
                }

            }
        }

    }

    function function_types_explorer_change_tile(selectedTile) {

        if (selectedTile == "Input") {
            show('function-types-input');
            hide('function-types-output');
            hide('function-types-detail');
            mobile_update_selected('selected-1');
        }
        if (selectedTile == "Output") {
            hide('function-types-input');
            show('function-types-output');
            hide('function-types-detail');
            mobile_update_selected('selected-2');
        }
        if (selectedTile == "Detail") {
            hide('function-types-input');
            hide('function-types-output');
            show('function-types-detail');
            mobile_update_selected('selected-3');
        }
    }

    function mobile_update_selected(selectedClass) {
        document.getElementById('function-explorer').removeAttribute('class');
        add_class("#function-explorer", selectedClass);
    }


    function check_default_output(input, output) {
        // If the output is currently Tags, Localize, Detect, or OCR, and the user selects a non-image input, switch the output to classify.

        if (input == "text" && (output == "ocr" || output == "detect" || output == "localize")) {
            clear_selected_classes(".info-tile-selector-output");
            document.getElementById("info-tile-selector-classification").classList.add("selected");
            return "classification";
        }
        if (input == "tabular" && (output == "ocr" || output == "detect" || output == "localize" || output == "search")) {
            clear_selected_classes(".info-tile-selector-output");
            document.getElementById("info-tile-selector-classification").classList.add("selected");
            return "classification";
        }
        return output;
    }


    function clear_tiles() {
        var tiles = document.getElementsByClassName("info-tile");
        for (var i = 0; i < tiles.length; i++) {
            tiles.item(i).style.display = "none";
        }
    }


    function clear_selected_classes(selectedClass) {
        var items = document.querySelectorAll(selectedClass);
        for (var i = 0; i < items.length; i++) {
            items[i].classList.remove("selected");
        }
    }

    function disable_selected_class(selectedClass) {
        var elements = document.querySelectorAll(selectedClass);
        for (var i = 0; i < elements.length; i++) {
            elements[i].classList.add('disabled');
            elements[i].style.opacity = ".2";
        }
    }

    function enable_selected_id(id) {
        if (document.getElementById(id)) {
            document.getElementById(id).style.opacity = "1";
            document.getElementById(id).classList.remove("disabled");
        }
    }

    function disable_selected_id(id) {
        if (document.getElementById(id)) {
            document.getElementById(id).style.opacity = ".2";
            document.getElementById(id).classList.add("disabled");
        }
    }

    function update_output_types(input) {

        if (input == "image") {
            enable_selected_id("info-tile-selector-classification");
            enable_selected_id("info-tile-selector-multiclass");
            enable_selected_id("info-tile-selector-tags");
            enable_selected_id("info-tile-selector-search");
            enable_selected_id("info-tile-selector-detect");
            enable_selected_id("info-tile-selector-localization");
            enable_selected_id("info-tile-selector-ocr");
        }
        else if (input == "text") {
            disable_selected_class(".info-tile-selector-output");
            enable_selected_id("info-tile-selector-classification");
            enable_selected_id("info-tile-selector-multiclass");
            enable_selected_id("info-tile-selector-tags");
            enable_selected_id("info-tile-selector-search");
        }
        else if (input == "tabular") {
            disable_selected_class(".info-tile-selector-output");
            enable_selected_id("info-tile-selector-classification");
            enable_selected_id("info-tile-selector-multiclass");
            enable_selected_id("info-tile-selector-tags");

        }
    }

    function update_input_types(output) {

        enable_selected_id("info-tile-selector-image");
        enable_selected_id("info-tile-selector-text");
        enable_selected_id("info-tile-selector-tabular");

        if (output == "search") {
            disable_selected_id("info-tile-selector-tabular");
        }
        if (output == "localization" || output == "ocr" || output == "detect") {

            disable_selected_id("info-tile-selector-text");

            disable_selected_id("info-tile-selector-tabular");

        }
    }
})();

function add_event(element, trigger, action) {
    var elements = document.querySelectorAll(element);

    for (let i = 0; i < elements.length; i++) {
        elements[i].addEventListener(trigger, action);
    }
}

function getElementObject(element) {
    if (element.toString().includes("#")) {
        return document.getElementById(element.replace("#", ""));
    }
    else if (element.toString().includes(".")) {
        return document.getElementByClassName(element.replace(".", ""));
    }
    else {
        return element;
    }
}

function add_event(element, trigger, action) {
    var elements = document.querySelectorAll(element);

    for (let i = 0; i < elements.length; i++) {
        elements[i].addEventListener(trigger, action);
    }
}

function getElementObject(element) {
    if (element.toString().includes("#")) {
        return document.getElementById(element.replace("#", ""));
    }
    else if (element.toString().includes(".")) {
        return document.getElementByClassName(element.replace(".", ""));
    }
    else {
        return element;
    }
}

function toggleClass(elementId, elementClass) {
    var element = document.getElementById(elementId);
    if (element.classList.contains(elementClass)) {
        element.classList.remove(elementClass);
    }
    else {
        element.classList.add(elementClass);
    }
}

function add_class(targetElement, targetClass) {
    var element = getElementObject(targetElement);
    element.classList.add(targetClass);
}

function remove_class(targetElement, targetClass) {
    var element = getElementObject(targetElement);
    element.classList.remove(targetClass);
}


function toggle(elementId) {
    var element = document.getElementById(elementId);
    var isVisible = element.offsetWidth > 0 || element.offsetHeight > 0;

    if (isVisible) {
        hide(elementId);
    }
    else {
        show(elementId);
    }
}

function hide(elementId) {
    document.getElementById(elementId).style.display = "none";
}

function show(elementId) {
    document.getElementById(elementId).style.display = "block";
}

function show_flex(elementId) {
    document.getElementById(elementId).style.display = "flex";
}