media-modal.js

console.log("Got Here");

var CS_Media = {};


// store modal dialog's top margin - only have to set it in CSS :)
CS_Media.modalMarginTop = $(".media-modal__dialog").css("margin-top");

// Modal function for responsive modal that can handle any content
CS_Media.setupModals = function() {
    var $body = $("body");

    $(".media-modal").each(function() {
        var $this = $(this);

        $this.on("openModal", function() {
            $this.addClass("media-modal--is-open");
            $body.addClass("no-scroll");
            // center modal dialog vertically
            CS_Media.vertCenterModal();
        })
            .on("closeModal", function() {
                $this.removeClass("media-modal--is-open");
                $body.removeClass("no-scroll");
                $this.find(".media-modal__dialog").css("margin-top", CS_Media.modalMarginTop);
                $(".video-placeholder").empty();
                $(".media-placeholder").empty();
            })
            .on("click",".js-close-modal", function(e){
                e.preventDefault();
                $this.trigger("closeModal");
            });

        // ESC key can close the modal
        $body.keyup(function(e) {
            if (e.which===27) {
                $this.trigger("closeModal");
            }
        });
    });

    $body.on("click", ".js-open-modal", function(e) {
        e.preventDefault();
        // open modal by putting ID in data-id attribute or href attribute
        var $this = $(this),
            videoKey = $this.attr('href').slice(1),
            media = $this.data('media'),
            id = $this.data('id') || videoKey;

        if (videoKey) {
            $(".video-placeholder").mediaLoader("open", videoKey);
        } else if (media) {
            $(".media-placeholder").html(mediaList[media]).show();
        }

        $('#' + id).trigger("openModal");
    });
};

// center the open modal vertically
CS_Media.vertCenterModal = function() {
    var modal = $('.media-modal--is-open .media-modal__dialog'),
        windowHeight = $(window).height(),
        modalHeight = modal.outerHeight();

    // center only if window is taller than the modal
    if (windowHeight > modalHeight) {
        modal.css("margin-top", (windowHeight - modalHeight) / 2);
    } else {
        modal.css("margin-top", CS_Media.modalMarginTop);
    }
};

CS_Media.init = function() {
    CS_Media.setupModals();
    $(".video-placeholder").mediaLoader({
        mediaList: window.videoList,
        useHash: false,
        playerOptions: {
            "wmode":"transparent",
            "isVid":"true",
            "isUI":"true",
            "dynamicStreaming":"true",
            "bgcolor":"#fff",
            "autoStart":"true"
        }
    });

    $(window).on("resize",function(){
        if ($(".media-modal--is-open").length) {
            clearTimeout(CS_Media.modalResizeTimer);
            CS_Media.modalResizeTimer = setTimeout(function(){
                // keep modal vertically centered
                CS_Media.vertCenterModal();
            },30);
        }
    });
};

$(function() {
    CS_Media.init();
});