function setPhotos (dir) {
  var app = new Vue({
    el: '#photolist',
    computed: {
    },
    data: function () {
      return {
        list: [],
        dispList: [],
        dispCount: 0,
        addCount: 24,
        isLoad: false
      }
    },
    methods: {
      loadMore: function() {
        var self = this;
        if (self.isLoad) {
          setTimeout(function() {
            self.dispList = self.dispList.concat(self.list.slice(self.dispCount, self.dispCount + self.addCount))
            self.dispCount += self.addCount;
          }, 50);
        }
      },
      compare: function(a, b) {
        var comparison = 0;
  
        if (b.schoolId > a.schoolId) {
          comparison = 1;
        } else if (a.schoolId > b.schoolId) {
          comparison = -1;
        }
  
        return comparison;
      }
    },
    mounted: function() {
      var self = this;
      
      $.ajax({
          url: '/group/blue-academy/tomoni/archive/photo/' + dir + '/list.json',
          dataType: 'json'
        })
        .done(function(json) {
          var list = [];
  
          for (var i = 0; i < json.length; i++) {
            for (var j = 0; j < json[i].list.length; j++) {
              var photoList = json[i].list[j].photo.reverse();
              for (var k = 0; k < photoList.length; k++) {
                list.push({
                  schoolId: json[i].list[j].schoolId,
                  src: json[i].list[j].photoPathIsRelative ? '/group/blue-academy/tomoni/archive/photo/' + dir + '/' + json[i].list[j].directroy + 'all_data/' + photoList[k] + '.jpg' : photoList[k] + '.jpg',
                  thumbSrc: json[i].list[j].photoPathIsRelative ? '/group/blue-academy/tomoni/archive/photo/' + dir + '/' + json[i].list[j].directroy + 'all_data/' + photoList[k] + '_thumb.jpg' : photoList[k] + '_thumb.jpg',
                  });
              }
            }
          }
  
          list = list.sort(self.compare);
  
          self.isLoad = true;
  
          self.list = self.list.concat(list);
          
          self.loadMore();
  
  
          var clickIndex = 0;
          
          $('#slider').slickLightbox({
            lazy: true
          }).on({
            'show.slickLightbox': function() {},
            'shown.slickLightbox': function() {
              clickIndex = $('.slick-lightbox').find('.slick-lightbox-slick-item.slick-active').attr('data-slick-index');
              
              $('.slick-lightbox').find('.slick-lightbox-close').focus();
  
              $(document).on('keydown.slicklightbox', function(e) {
                if (event.keyCode == 9) {
                  e.preventDefault();
                  var focusLen = $('.slick-lightbox').find(':_focusable').length;
                  var next = $('.slick-lightbox').find(':_focusable').index($(':focus'));
          
                  if(event.shiftKey) {
                    next--;
                    next = (next < 0) ? focusLen - 1 : next;
                  } else {
                    next++;
                    next = (next >= focusLen) ? 0 : next;
                  }
          
                  $('.slick-lightbox').find(':_focusable').eq(next).focus();
                }
              });
            },
            'hide.slickLightbox': function() {},
            'hidden.slickLightbox': function() {
              $('#slider').find('.photo-item[data-slick-id="' + clickIndex + '"]').find('a').focus();
              $(document).off('keydown.slicklightbox');
            }
          });
        })
        .fail(function(error) {
        });
    }
  });
}

/* focusable */
(function (window, $, undefined) {
  $.extend($.expr[':'], {
    _focusable: function (element, hasTabindex) {
      var map,
        mapName,
        img,
        focusableIfVisible,
        fieldset,
        nodeName = element.nodeName.toLowerCase();

      var visible = function (element) {
        var visibility = element.css('visibility');
        while (visibility === 'inherit') {
          element = element.parent();
          visibility = element.css('visibility');
        }
        return visibility !== 'hidden';
      };

      if ('area' === nodeName) {
        map = element.parentNode;
        mapName = map.name;
        if (!element.href || !mapName || map.nodeName.toLowerCase() !== 'map') {
          return false;
        }
        img = $("img[usemap='#" + mapName + "']");
        return img.length > 0 && img.is(':visible');
      }

      if (/^(input|select|textarea|button|object)$/.test(nodeName)) {
        focusableIfVisible = !element.disabled;

        if (focusableIfVisible) {
          // Form controls within a disabled fieldset are disabled.
          // However, controls within the fieldset's legend do not get disabled.
          // Since controls generally aren't placed inside legends, we skip
          // this portion of the check.
          fieldset = $(element).closest('fieldset')[0];
          if (fieldset) {
            focusableIfVisible = !fieldset.disabled;
          }
        }
      } else if ('a' === nodeName) {
        focusableIfVisible = element.href || hasTabindex;
      } else {
        focusableIfVisible = hasTabindex;
      }

      return (
        focusableIfVisible && $(element).is(':visible') && visible($(element))
      );
    }
  });
})(this, jQuery);