var node = document.createElement("style");node.innerHTML = "@keyframes media-embed-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.media-embed-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 media-embed-modal-fade-in;\n}\n.media-embed-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.media-embed-modal > .row,\n.media-embed-modal > .row > .columns {\n  position: relative;\n  height: 100%;\n}\n.media-embed-modal .media-visible {\n  position: absolute;\n  left: 20px;\n  right: 20px;\n  top: 50px;\n  bottom: 220px;\n  background-size: cover;\n  background-position: center center;\n}\n.media-embed-modal .media-visible > * {\n  width: 100%;\n  height: 100%;\n}\n.media-embed-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  justify-content: center;\n}\n.media-embed-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: 0;\n  position: relative;\n  border: 1px solid black;\n}\n.media-embed-modal .thumbnails .thumbnail.active {\n  border: 1px solid white;\n}\n.media-embed-modal .thumbnails .thumbnail .filter-neutral-density {\n  opacity: 0;\n  transition: 350ms ease all;\n}\n.media-embed-modal .thumbnails .thumbnail.active .filter-neutral-density {\n  opacity: 1;\n}\n.media-embed-modal .thumbnails .thumbnail .filter-flat-dark {\n  opacity: 1;\n  transition: 350ms ease all;\n  background: rgba(0, 0, 0, 0.8);\n}\n.media-embed-modal .thumbnails .thumbnail.active .filter-flat-dark {\n  opacity: 0;\n}\n.media-embed-modal .thumbnails .thumbnail .caption {\n  position: absolute;\n  left: 10px;\n  bottom: 10px;\n  right: 10px;\n  z-index: 2;\n  text-shadow: 1px 1px 2px #000000;\n  color: #b9b9b9;\n}\n.media-embed-modal .thumbnails .thumbnail.active .caption {\n  color: #fff;\n}\n@media screen and (orientation: portrait) {\n  .media-embed-modal .media-visible {\n    height: 230px;\n    left: 0;\n    right: 0;\n  }\n  .media-embed-modal .thumbnails {\n    flex-flow: row wrap;\n    overflow-x: visible;\n    overflow-y: auto;\n    top: 290px;\n    height: auto;\n    bottom: 20px;\n  }\n  .media-embed-modal .thumbnails .thumbnail {\n    margin: 5px 10px;\n    min-height: 85px;\n    flex-grow: 1;\n  }\n}\n";document.getElementsByTagName('head')[0].appendChild(node);

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

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

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

                    var vm = {
                        medias: medias,
                        visibleItem: visibleItem,
                        toBackground: function(url){ return 'url(\'' + url + '\')'; }
                    };
                    return vm;
                },
            },
            template: "\n        <div class=\"media-embed-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=\"media-visible\" data-bind=\"style: { backgroundImage: toBackground(visibleItem().ImageUrl) }, html: visibleItem().Embed.replace('autoplay=0', 'autoplay=1')\">\n                        \n                    </div>\n                </div>\n            </div>\n            <div class=\"thumbnails\" data-bind=\"foreach: medias, click: function(){}, clickBubble: false\">\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                    <i class=\"filter-flat-dark\"></i>\n                    <span data-bind=\"text: Title\" class=\"caption\"></span>\n                </div>\n            </div>\n        </div>\n    "
        });