var node = document.createElement("style");node.innerHTML = "@keyframes photo-gallery-modal-fade-in {\n  0% {\n    opacity: 0;\n    transform: scale(1.2);\n  }\n  100% {\n    opacity: 1;\n    transform: scale(1);\n  }\n}\n.photo-gallery-modal {\n  position: fixed;\n  left: 0;\n  right: 0;\n  top: 0;\n  bottom: 0;\n  background: rgba(0, 0, 0, 0.8);\n  color: #fff;\n  z-index: 300;\n  animation: 350ms photo-gallery-modal-fade-in;\n}\n.photo-gallery-modal .close-button {\n  position: absolute;\n  right: 10px;\n  top: 10px;\n  font-style: normal;\n  font-size: 30px;\n  line-height: 30px;\n  z-index: 3;\n}\n.photo-gallery-modal > .row,\n.photo-gallery-modal > .row > .columns {\n  position: relative;\n  height: 100%;\n}\n.photo-gallery-modal .slick-list,\n.photo-gallery-modal .slick-track {\n  height: 100%;\n}\n.photo-gallery-modal .photo-visible {\n  position: absolute;\n  left: 20px;\n  right: 20px;\n  top: 50px;\n  bottom: 220px;\n}\n.photo-gallery-modal .photo-visible .slick-slide {\n  height: 100%;\n  background-size: cover;\n  background-position: center center;\n  position: relative;\n}\n.photo-gallery-modal .photo-visible .slick-next {\n  right: 5px;\n}\n.photo-gallery-modal .photo-visible .slick-prev {\n  left: 5px;\n}\n.photo-gallery-modal .photo-visible .slick-arrow {\n  width: 60px;\n  height: 52px;\n  z-index: 1;\n}\n.photo-gallery-modal .photo-visible .slick-arrow:before {\n  font-size: 60px;\n}\n@media screen and (orientation: portrait) {\n  .photo-gallery-modal .photo-visible .slick-arrow {\n    width: 30px;\n    height: 27px;\n  }\n  .photo-gallery-modal .photo-visible .slick-arrow:before {\n    font-size: 30px;\n  }\n}\n.photo-gallery-modal .photo-visible .caption {\n  position: absolute;\n  right: 20px;\n  left: 20px;\n  bottom: 40px;\n}\n.photo-gallery-modal .photo-visible .caption h5,\n.photo-gallery-modal .photo-visible .caption h6 {\n  text-transform: uppercase;\n  margin: 0 12%;\n}\n.photo-gallery-modal .photo-visible .caption h5 {\n  font-family: 'vitesselight', sans-serif;\n  font-size: 1.2em;\n  font-weight: normal;\n}\n.photo-gallery-modal .photo-visible .caption h6 {\n  font-family: \"Roboto Condensed\", sans-serif;\n  font-size: 1.7em;\n  font-style: italic;\n}\n.photo-gallery-modal .thumbnails {\n  position: absolute;\n  left: 10px;\n  right: 10px;\n  bottom: 50px;\n  height: 150px;\n  display: flex;\n  flex-flow: row nowrap;\n  overflow-x: auto;\n  -webkit-overflow-scrolling: touch;\n}\n.photo-gallery-modal .thumbnails .thumbnail {\n  width: 320px;\n  min-width: 160px;\n  background-size: cover;\n  background-position: center center;\n  margin: 0 10px;\n  flex-grow: 1;\n  position: relative;\n}\n.photo-gallery-modal .thumbnails .thumbnail .filter-neutral-density {\n  opacity: 1;\n  transition: 350ms ease all;\n}\n.photo-gallery-modal .thumbnails .thumbnail.active .filter-neutral-density {\n  opacity: 0;\n}\n@media screen and (orientation: portrait) {\n  .photo-gallery-modal .photo-visible {\n    left: 0;\n    right: 0;\n  }\n  .photo-gallery-modal .photo-visible .caption {\n    bottom: 10px;\n  }\n  .photo-gallery-modal .photo-visible .caption h5,\n  .photo-gallery-modal .photo-visible .caption h6 {\n    margin: 0 10px;\n  }\n}\n";document.getElementsByTagName('head')[0].appendChild(node);

        ko.components.register('photo-gallery-modal', {
            viewModel: {
                createViewModel: function(params, componentInfo) {
                    var medias = params.images;
                    var trigger = params.trigger;
                    var visibleItem = ko.observable(null);

                    $('body').on('click', trigger, function(){
                        var index = $(this).data('index') != null ? 
                            $(this).data('index') :
                            $(this).index();
                        visibleItem(medias[index]);
                    });

                    ko.computed(function(){
                        $("html").toggleClass("noscroll", !!visibleItem());
                    });

                    var vm = {
                        medias: medias,
                        visibleItem: visibleItem,
                        toBackground: function(url){ return 'url(\'' + url + '\')'; }
                    };
                    vm.visibleIndex = ko.computed({
                        read: function(){
                            return vm.medias.indexOf(vm.visibleItem());
                        },
                        write: function(newValue){
                            vm.visibleItem(vm.medias[newValue]);
                        }
                    });
                    return vm;
                },
            },
            template: "\n        <div class=\"photo-gallery-modal\" data-bind=\"\n            if: visibleItem, \n            visible: visibleItem, \n            click: function(){ visibleItem(null); }\">\n\n            <i class=\"close-button\" data-bind=\"click: function(){ visibleItem(null); }\">\n                &times;\n            </i>\n\n            <div class=\"row\" data-bind=\"click: function(){}, clickBubble: false\">\n                <div class=\"small-12 columns\">\n                    <div class=\"photo-visible\" data-bind=\"foreach: medias,slick: {visibleIndex}\">\n                        <div data-bind=\"with: $data, style: { backgroundImage: $parent.toBackground($data.ImageUrl) }\">\n                            <i class=\"filter-neutral-density\"></i>\n                            <div class=\"caption\">\n                                <h5>Now Viewing:</h5>\n                                <h6><span data-bind=\"text: $data.Title\"></span></h6>\n                            </div>\n                        </div>\n                    </div>\n                    <div class=\"thumbnails\" data-bind=\"foreach: medias\">\n                        <div class=\"thumbnail\" data-bind=\"\n                            style: { backgroundImage: $parent.toBackground(ImageUrl) }, \n                            css: { active: $data === $parent.visibleItem() }, \n                            click: function(){ $parent.visibleItem($data); }\">\n                            <i class=\"filter-neutral-density\"></i>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </div>\n    "
        });
    var script = document.createElement("script");script.src = "/common/js/slick.js";document.getElementsByTagName("head")[0].appendChild(script);