const itemSlider = {
  load: function (options) {

    // Url desde donde se van a obtener los datos de las imágenes
    var getImagesFromUrl = options.url;

    // Contenedor principal de las imágenes
    var mainImages = options.mainSliderImages;

    // Navegador de las imágenes. Es el que aparece debajo para navegarlas.
    var navImages = options.mainNavSliderImages;

    // Construye un img que se agrega al navegador que aparece debajo
    var buildNavContainer = (mediaData) => {
      var img = $('<img>');

      img.attr('src', mediaData.navImage);

      return img;
    };

    // Construye un div contenedor para la imagen principal
    var buildMainDivContainer = (mediaData) => {
      var div = $('<div>');
      var a = $('<a>');
      var img = $('<img>');

      div.append(a);
      a.append(img);

      a.attr('data-fancybox', 'gallery');
      img.attr('src', mediaData.mainImage);

      return div;
    };

    // Agrega un video para mostrar. Se agregan tanto la imagen principal como la del navegador
    var addVideo = (videoData) => {
      var theMainDiv = buildMainDivContainer(videoData);
      var theNavContainer = buildNavContainer(videoData);

      theMainDiv.find('a').attr('href', videoData.popupUrl);
      mainImages.append(theMainDiv);
      navImages.append(theNavContainer);
    };

    // Agrega una imagen para mostrar. Se agregan tanto la imagen principal como la del navegador
    var addImage = (imageData) => {
        var theDiv = buildMainDivContainer(imageData);
        var theNavContainer = buildNavContainer(imageData);

        if (imageData != '')
            theDiv.find('a').attr('data-src', imageData.popupUrl);

        mainImages.append(theDiv);
        navImages.append(theNavContainer);
    };

    // Se obtienen las imágenes del servidor.
    $.get(getImagesFromUrl)
      .done((mediaResources) => {

        mainImages.empty();
        navImages.empty();

        $(mediaResources).each((index, theResource) => {
          switch (theResource.type) {
            case 'video':
              addVideo(theResource);
              break;

            case 'image':
              addImage(theResource);
              break;

            default:
              break;
          }
        });

        // Avisa que las imágenes fueron cargadas así se realizan otras inicializaciones.
        if (mediaResources.length > 0)
            $(document).trigger('itemsSlider.PackageImagesLoaded');

        if (mediaResources.length <= 1)
            navImages.hide();
    });
  }
}