text: /* global H5PAdminIntegration H5PUtils */
  var H5PLibraryDetails = H5PLibraryDetails || {};
  
  (function($) {
    H5PLibraryDetails.PAGER_SIZE = 20;
    /**
     * Initializing
     */
    H5PLibraryDetails.init = function() {
      H5PLibraryDetails.$adminContainer = H5P.jQuery(
        H5PAdminIntegration.containerSelector
      );
      H5PLibraryDetails.library = H5PAdminIntegration.libraryInfo;
  
      // currentContent holds the current list if data (relevant for filtering)
      H5PLibraryDetails.currentContent = H5PLibraryDetails.library.content;
  
      // The current page index (for pager)
      H5PLibraryDetails.currentPage = 0;
  
      // The current filter
      H5PLibraryDetails.currentFilter = "";
  
      // We cache the filtered results, so we don't have to do unneccessary searches
      H5PLibraryDetails.filterCache = [];
  
      // Append library info
      H5PLibraryDetails.$adminContainer.append(
        H5PLibraryDetails.createLibraryInfo()
      );
  
      // Append node list
      H5PLibraryDetails.$adminContainer.append(
        H5PLibraryDetails.createContentElement()
      );
    };
  
    /**
     * Create the library details view
     */
    H5PLibraryDetails.createLibraryInfo = function() {
      var $libraryInfo = $('<div class="h5p-library-info"></div>');
  
      $.each(H5PLibraryDetails.library.info, function(title, value) {
        $libraryInfo.append(H5PUtils.createLabeledField(title, value));
      });
  
      return $libraryInfo;
    };
  
    /**
     * Create the content list with searching and paging
     */
    H5PLibraryDetails.createContentElement = function() {
      if (H5PLibraryDetails.library.notCached !== undefined) {
        return H5PUtils.getRebuildCache(H5PLibraryDetails.library.notCached);
      }
  
      if (H5PLibraryDetails.currentContent === undefined) {
        H5PLibraryDetails.$content = $(
          '<div class="h5p-content empty">' +
            H5PLibraryDetails.library.translations.noContent +
            "</div>"
        );
      } else {
        H5PLibraryDetails.$content = $(
          '<div class="h5p-content"><h3>' +
            H5PLibraryDetails.library.translations.contentHeader +
            "</h3></div>"
        );
        H5PLibraryDetails.createSearchElement();
        H5PLibraryDetails.createPageSizeSelector();
        H5PLibraryDetails.createContentTable();
        H5PLibraryDetails.createPagerElement();
        return H5PLibraryDetails.$content;
      }
    };
  
    /**
     * Creates the content list
     */
    H5PLibraryDetails.createContentTable = function() {
      // Remove it if it exists:
      if (H5PLibraryDetails.$contentTable) {
        H5PLibraryDetails.$contentTable.remove();
      }
  
      H5PLibraryDetails.$contentTable = H5PUtils.createTable();
  
      var i = H5PLibraryDetails.currentPage * H5PLibraryDetails.PAGER_SIZE;
      var lastIndex = i + H5PLibraryDetails.PAGER_SIZE;
  
      if (lastIndex > H5PLibraryDetails.currentContent.length) {
        lastIndex = H5PLibraryDetails.currentContent.length;
      }
      for (; i < lastIndex; i++) {
        var content = H5PLibraryDetails.currentContent[i];
        H5PLibraryDetails.$contentTable.append(
          H5PUtils.createTableRow([
            '<a href="' + content.url + '">' + content.title + "</a>"
          ])
        );
      }
  
      // Appends it to the browser DOM
      H5PLibraryDetails.$contentTable.insertAfter(H5PLibraryDetails.$search);
    };
  
    /**
     * Creates the pager element on the bottom of the list
     */
    H5PLibraryDetails.createPagerElement = function() {
      H5PLibraryDetails.$previous = $(
        '<button type="button" class="previous h5p-admin"><</button>'
      );
      H5PLibraryDetails.$next = $(
        '<button type="button" class="next h5p-admin">></button>'
      );
  
      H5PLibraryDetails.$previous.on("click", function() {
        if (H5PLibraryDetails.$previous.hasClass("disabled")) {
          return;
        }
  
        H5PLibraryDetails.currentPage--;
        H5PLibraryDetails.updatePager();
        H5PLibraryDetails.createContentTable();
      });
  
      H5PLibraryDetails.$next.on("click", function() {
        if (H5PLibraryDetails.$next.hasClass("disabled")) {
          return;
        }
  
        H5PLibraryDetails.currentPage++;
        H5PLibraryDetails.updatePager();
        H5PLibraryDetails.createContentTable();
      });
  
      // This is the Page x of y widget:
      H5PLibraryDetails.$pagerInfo = $('<span class="pager-info"></span>');
  
      H5PLibraryDetails.$pager = $(
        '<div class="h5p-content-pager"></div>'
      ).append(
        H5PLibraryDetails.$previous,
        H5PLibraryDetails.$pagerInfo,
        H5PLibraryDetails.$next
      );
      H5PLibraryDetails.$content.append(H5PLibraryDetails.$pager);
  
      H5PLibraryDetails.$pagerInfo.on("click", function() {
        var width = H5PLibraryDetails.$pagerInfo.innerWidth();
        H5PLibraryDetails.$pagerInfo.hide();
  
        // User has updated the pageNumber
        var pageNumerUpdated = function() {
          var newPageNum = $gotoInput.val() - 1;
          var intRegex = /^\d+$/;
  
          $goto.remove();
          H5PLibraryDetails.$pagerInfo.css({ display: "inline-block" });
  
          // Check if input value is valid, and that it has actually changed
          if (
            !(
              intRegex.test(newPageNum) &&
              newPageNum >= 0 &&
              newPageNum < H5PLibraryDetails.getNumPages() &&
              newPageNum != H5PLibraryDetails.currentPage
            )
          ) {
            return;
          }
  
          H5PLibraryDetails.currentPage = newPageNum;
          H5PLibraryDetails.updatePager();
          H5PLibraryDetails.createContentTable();
        };
  
        // We create an input box where the user may type in the page number
        // he wants to be displayed.
        // Reson for doing this is when user has ten-thousands of elements in list,
        // this is the easiest way of getting to a specified page
        var $gotoInput = $("<input/>", {
          type: "number",
          min: 1,
          max: H5PLibraryDetails.getNumPages(),
          on: {
            // Listen to blur, and the enter-key:
            blur: pageNumerUpdated,
            keyup: function(event) {
              if (event.keyCode === 13) {
                pageNumerUpdated();
              }
            }
          }
        }).css({ width: width });
        var $goto = $("<span/>", {
          class: "h5p-pager-goto"
        })
          .css({ width: width })
          .append($gotoInput)
          .insertAfter(H5PLibraryDetails.$pagerInfo);
  
        $gotoInput.focus();
      });
  
      H5PLibraryDetails.updatePager();
    };
  
    /**
     * Calculates number of pages
     */
    H5PLibraryDetails.getNumPages = function() {
      return Math.ceil(
        H5PLibraryDetails.currentContent.length / H5PLibraryDetails.PAGER_SIZE
      );
    };
  
    /**
     * Update the pager text, and enables/disables the next and previous buttons as needed
     */
    H5PLibraryDetails.updatePager = function() {
      H5PLibraryDetails.$pagerInfo.css({ display: "inline-block" });
  
      if (H5PLibraryDetails.getNumPages() > 0) {
        var message = H5PUtils.translateReplace(
          H5PLibraryDetails.library.translations.pageXOfY,
          {
            $x: H5PLibraryDetails.currentPage + 1,
            $y: H5PLibraryDetails.getNumPages()
          }
        );
        H5PLibraryDetails.$pagerInfo.html(message);
      } else {
        H5PLibraryDetails.$pagerInfo.html("");
      }
  
      H5PLibraryDetails.$previous.toggleClass(
        "disabled",
        H5PLibraryDetails.currentPage <= 0
      );
      H5PLibraryDetails.$next.toggleClass(
        "disabled",
        H5PLibraryDetails.currentContent.length <
          (H5PLibraryDetails.currentPage + 1) * H5PLibraryDetails.PAGER_SIZE
      );
    };
  
    /**
     * Creates the search element
     */
    H5PLibraryDetails.createSearchElement = function() {
      H5PLibraryDetails.$search = $(
        '<div class="h5p-content-search"><input placeholder="' +
          H5PLibraryDetails.library.translations.filterPlaceholder +
          '" type="search"></div>'
      );
  
      var performSeach = function() {
        var searchString = $(".h5p-content-search > input").val();
  
        // If search string same as previous, just do nothing
        if (H5PLibraryDetails.currentFilter === searchString) {
          return;
        }
  
        if (searchString.trim().length === 0) {
          // If empty search, use the complete list
          H5PLibraryDetails.currentContent = H5PLibraryDetails.library.content;
        } else if (H5PLibraryDetails.filterCache[searchString]) {
          // If search is cached, no need to filter
          H5PLibraryDetails.currentContent =
            H5PLibraryDetails.filterCache[searchString];
        } else {
          var listToFilter = H5PLibraryDetails.library.content;
  
          // Check if we can filter the already filtered results (for performance)
          if (
            searchString.length > 1 &&
            H5PLibraryDetails.currentFilter ===
              searchString.substr(0, H5PLibraryDetails.currentFilter.length)
          ) {
            listToFilter = H5PLibraryDetails.currentContent;
          }
          H5PLibraryDetails.currentContent = $.grep(listToFilter, function(
            content
          ) {
            return (
              content.title && content.title.match(new RegExp(searchString, "i"))
            );
          });
        }
  
        H5PLibraryDetails.currentFilter = searchString;
        // Cache the current result
        H5PLibraryDetails.filterCache[searchString] =
          H5PLibraryDetails.currentContent;
        H5PLibraryDetails.currentPage = 0;
        H5PLibraryDetails.createContentTable();
  
        // Display search results:
        if (H5PLibraryDetails.$searchResults) {
          H5PLibraryDetails.$searchResults.remove();
        }
        if (searchString.trim().length > 0) {
          H5PLibraryDetails.$searchResults = $(
            '<span class="h5p-admin-search-results">' +
              H5PLibraryDetails.currentContent.length +
              " hits on " +
              H5PLibraryDetails.currentFilter +
              "</span>"
          );
          H5PLibraryDetails.$search.append(H5PLibraryDetails.$searchResults);
        }
        H5PLibraryDetails.updatePager();
      };
  
      var inputTimer;
      $("input", H5PLibraryDetails.$search).on(
        "change keypress paste input",
        function() {
          // Here we start the filtering
          // We wait at least 500 ms after last input to perform search
          if (inputTimer) {
            clearTimeout(inputTimer);
          }
  
          inputTimer = setTimeout(function() {
            performSeach();
          }, 500);
        }
      );
  
      H5PLibraryDetails.$content.append(H5PLibraryDetails.$search);
    };
  
    /**
     * Creates the page size selector
     */
    H5PLibraryDetails.createPageSizeSelector = function() {
      H5PLibraryDetails.$search.append(
        '<div class="h5p-admin-pager-size-selector">' +
          H5PLibraryDetails.library.translations.pageSizeSelectorLabel +
          ':<span data-page-size="10">10</span><span class="selected" data-page-size="20">20</span><span data-page-size="50">50</span><span data-page-size="100">100</span><span data-page-size="200">200</span></div>'
      );
  
      // Listen to clicks on the page size selector:
      $(".h5p-admin-pager-size-selector > span", H5PLibraryDetails.$search).on(
        "click",
        function() {
          H5PLibraryDetails.PAGER_SIZE = $(this).data("page-size");
          $(
            ".h5p-admin-pager-size-selector > span",
            H5PLibraryDetails.$search
          ).removeClass("selected");
          $(this).addClass("selected");
          H5PLibraryDetails.currentPage = 0;
          H5PLibraryDetails.createContentTable();
          H5PLibraryDetails.updatePager();
        }
      );
    };
  
    // Initialize me:
    $(document).ready(function() {
      if (!H5PLibraryDetails.initialized) {
        H5PLibraryDetails.initialized = true;
        H5PLibraryDetails.init();
      }
    });
  })(H5P.jQuery);
  