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);