{content contentplaceholderid="layoutscript"}
<script src="/scripts/uuid.min.js" type="text/javascript"></script>
	<script src="/layouts/html5/608/vbxlayout.min.js"></script>
{/content}

{content contentplaceholderid="init"}
<script type="text/javascript">
    var animateFromRight = false;
    var ctaButtonShown = false;

    VBX.Layout.init({
        video: { id: 'video1', platform: VBX.Layout.VideoPlayerPlatform.VIDEOJS },
        menu: { id: 'menu1', iconSize: 32, overflow: 'moreApp', overflowFunction: showMoreApp, share: 'embedApp', shareFunction: showEmbedApp, addShareIfNoVideo: true },
        container: { id: 'apps1', overlaysVideo: getPlayerConfigurations()['screenType'] == null || getPlayerConfigurations()['screenType'] == 'default', closeButton: true, rollPrompt: 'rollPrompt', rollPromptFunction: showRollPrompt, completeAllowSkipRollApp: false, appSelectedCallback: onAppSelected, appCloseCallback: onAppClose, appIframeCreatedCallback: onAppIframeCreated },
        ready: onJoltReady,
        skipImage: { id: 'skipImage' }
    });

    function updateAnimation() {
        var ctaButton = document.querySelector('#cta-button');

        if (animateFromRight) {
            var ctaButtonWidth = ctaButton.clientWidth;
            ctaButton.style.right = '-300px';
            ctaButtonShown = false;
        } else {
            ctaButton.style.right = '8px';
            ctaButtonShown = true;
        }
    }

    function showCta() {
        var ctaButton = document.querySelector('#cta-button');
        TweenLite.to(ctaButton, 0.5, { right: 8, ease: Cubic.easeIn });
    }

    function hideCta() {
        var ctaButton = document.querySelector('#cta-button');
        var ctaButtonWidth = ctaButton.clientWidth;
        TweenLite.to(ctaButton, 0.5, { right: -1 * ctaButtonWidth, ease: Cubic.easeIn });
    }

    function getBorderRadius(borderRadius) {
        return borderRadius + 'px';
    }

    function getButtonPadding(buttonPadding) {
        return '0.4em ' + buttonPadding + 'px 0 ' + buttonPadding + 'px';
    }

    function onJoltReady() {
        onReady();

        VBX.Layout.listen('animateFromRight', function (value) {
            animateFromRight = value;
            updateAnimation();
        });

        if (VBX.Layout.isState('touchscreen')) {
            if (animateFromRight) {
                VBX.listen(document.querySelector('#video1'), ['click'], function (e) {
                    if (ctaButtonShown) {
                        hideCta();
                    } else {
                        showCta();
                    }
                    ctaButtonShown = !ctaButtonShown;
                }, true);
            }
        } else {
            VBX.Layout.onState('mouseover', function () {
                if (animateFromRight) {
                    showCta();
                }
            });

            VBX.Layout.onState('mouseout', function () {
                if (animateFromRight) {
                    hideCta();
                }
            });
        }
    }
</script>
{/content}

{content contentplaceholderid="skipImage"}
<div id="skipImage" class="skip-image-container">
    <img data-vbx-src="skipImageUrl" class="skip-image" />
</div>
{/content}

{content contentplaceholderid="css"}
<link href="/layouts/html5/608/jolt.min.css" rel="stylesheet">
{/content}

{content contentplaceholderid="title"}
<div id="title1" data-vbx-class="backgroundOpacity(hideTitleBackground)" data-vbx-style-background-color="getTitleBarBackgroundColor(titleBarBackgroundColor, hideTitleBackground:false)" class="show-title-background menu-on-top">
    <div id="cta-button" data-vbx="ctaButton(ctaText,ctaButtonUrl:)"
         data-vbx-class="ctaButtonClass(ctaText,ctaButtonUrl:)"
         data-vbx-style-background-color="ctaButtonBackgroundColor(ctaButtonBackgroundColor)"
         data-vbx-style-color="ctaButtonTextColor(ctaButtonBackgroundColor,ctaButtonButtonTextFormatColor:null)"
         data-vbx-style-border-radius="getBorderRadius(ctaButtonCornerRadius)"
         data-vbx-style-padding="getButtonPadding(ctaButtonPadding)"
         onclick="VBX.Layout.clickCtaButton(); return false;"></div>
    <img id="custom-logo" class="custom-logo" data-vbx-class="customLogoClass(customLogoUrl, scaleLogoToTitleBar, customLogoLink)" data-vbx-src="customLogoUrl" onclick="VBX.Layout.clickCustomLogo();" />
    <div class="title" data-vbx-class="titleClass(customLogoUrl,hideTitleText:false)" data-vbx="title" data-vbx-style-color="titleTextFormatColor" data-vbx-href="titleLink"></div>
</div>
{/content}

{content contentplaceholderid="video"}
<div id="video1"></div>
{/content}

{content contentplaceholderid="branding"}
{/content}

{content contentplaceholderid="menu"}
<div id="menu1">

</div>
{/content}

{content contentplaceholderid="share"}
<div id="shareButtons" class="share-buttons">
    <div class="share-button cc-button" onclick="VBX.Layout.clickClosedCaptionsButton()"></div>
    <div class="share-button share-facebook" data-vbx-class="facebookButtonClass(showFacebookButton)" onclick="VBX.Layout.shareFacebook(this)"></div>
    <div class="share-button share-twitter" data-vbx-class="twitterButtonClass(showTwitterButton)" onclick="VBX.Layout.shareTwitter(this)"></div>
    <div class="share-button share-player" data-vbx-class="shareButtonClass(showShareButton)" onclick="showEmbedApp(this)"></div>
    <div class="share-button fullscreen-button" onclick="VBX.Layout.toggleFullScreen()"></div>
</div>
{/content}