(function() {
   var $, win;
   $ = this.jQuery || window.jQuery;
   win = $(window);

   $.fn.wpjCarousel = function(options) {
      options = $.extend(
         {
            itemsOnPage: 1,
            gutter: 0,
            controlsText: ['<i class="fc icons_caret-left"></i>', '<i class="fc icons_caret-right"></i>'],
            responsive: null
            /*
             * 644: {
             *     itemsOnPage: 1,
             *     gutter: 0
             * }
             * */
         },
         options || {}
      );

      var container = this,
         html_container = container.find('.container'),
         gallery = container.find('[data-wpj-carousel]'),
         items = gallery.children(),
         items_count = items.length,
         item_width = 0,
         step = item_width,
         gutter = options.gutter,
         itemsOnPage = options.itemsOnPage,
         position = 0,
         prev_button,
         next_button;

      var init = function() {
         container.addClass('wpj-carousel-container');
         gallery.addClass('wpj-carousel-gallery');
         createNavigation();
         updateValues();
      };

      var updateValues = function() {
         // todo: onresize: position (pokud budu odrollovaný, nepřesáhnout stránku
         // todo 2: dědit gutter
         var win_width = win.width(),
            container_width = html_container ? html_container.width() : container.width();

         if(container_width === 0) {
            const $some_container = $('main').find('.container');
            if ($some_container[0]) {
               container_width = $some_container.width();
            }
         }

         gutter = options.gutter;
         itemsOnPage = options.itemsOnPage;

         if (options.responsive) {
            $.each(options.responsive, function(index, value) {
               if (win_width >= index) {
                  gutter = value.gutter ? value.gutter : options.gutter;
                  itemsOnPage = value.itemsOnPage ? value.itemsOnPage : options.itemsOnPage;
               }
            });
         }

         item_width = (container_width + gutter) / itemsOnPage;
         step = item_width;

         items.css({
            width: item_width,
            paddingRight: gutter
         });

         updateNavigation();
      };

      var createNavigation = function() {
         var navigation =
            '<div class="wpj-carousel-controls">' +
            '<button data-controls="prev" tabindex="-1" aria-hidden="true">' +
            options.controlsText[0] +
            '</button>' +
            '<button data-controls="next" tabindex="-1" aria-hidden="true">' +
            options.controlsText[1] +
            '</button>' +
            '</div>';

         container.append(navigation);

         prev_button = container.find('button[data-controls="prev"]');
         next_button = container.find('button[data-controls="next"]');

         prev_button.on('click', function() {
            move('prev');
         });
         next_button.on('click', function() {
            move('next');
         });

         updateNavigation();
      };

      var move = function(direction) {
         position = direction === 'prev' ? position - 1 : position + 1;

         if (position <= 0) {
            position = 0;
         } else if (position >= items_count - itemsOnPage) {
            position = items_count - itemsOnPage;
         }

         var move_step = position * step * -1;
         gallery.css({
            left: move_step
         });

         updateNavigation();
      };

      var updateNavigation = function() {
         if (position > 0) {
            prev_button.removeClass('disabled');
         } else {
            prev_button.addClass('disabled');
         }

         if (position < items_count - itemsOnPage) {
            next_button.removeClass('disabled');
         } else {
            next_button.addClass('disabled');
         }
      };

      win.on('resize', function(e) {
         updateValues();
      });

      gallery.on('touchstart', function(e) {
         var touch_start = e.changedTouches[0].clientX;

         $(this).on('touchend', function(e) {
            var touch_end = e.changedTouches[0].clientX;
            var distance = touch_end - touch_start;

            if (distance < -30) {
               move('next');
            } else if (distance > 30) {
               move('prev');
            }

            gallery.off('touchmove touchend');
         });
      });

      init();

      return this;
   };
}.call(this));