<?php $__env->startSection('editable_content'); ?>

    <div class="ajax-container home loaded-animation">

        <section class="video home-block animation-part preFlight">

            <div id="ytplayer"></div>
            <div id="close-home-video">
                <div class="left-corner corner"><?php echo $__env->make('layouts.svg.corner', array_except(get_defined_vars(), array('__data', '__path')))->render(); ?></div>
                <div class="right-corner corner"><?php echo $__env->make('layouts.svg.corner', array_except(get_defined_vars(), array('__data', '__path')))->render(); ?></div>
                x
            </div>

            <div class="placeholder">

                <span id="home-play" class="hidePlayButton">
                    <img alt="youtube-play" src="/img/youtubeButton.svg"/>
                </span>

                <?php echo $__env->make('layouts.partials.home.image', array_except(get_defined_vars(), array('__data', '__path')))->render(); ?>

            </div>

            <h1 id="text-video-block">
                <small><?php echo KommaLang::get('welcomeAt'); ?></small>
                <span><?php echo \Config::get('business.name'); ?></span>
            </h1>
        </section>

        <a data-pjax data-code-name="services" class="our-work home-block animation-part"
           href="/<?php echo $links->services->route; ?>"
           data-url="<?php echo $links->services->route; ?>">
            <figure></figure>
            <h1>
                <small><?php echo KommaLang::get('discover'); ?></small>
                <span><?php echo $links->services->name; ?></span>
            </h1>

            <div class="left-corner corners"><?php echo $__env->make('layouts.svg.corner', array_except(get_defined_vars(), array('__data', '__path')))->render(); ?></div>
        </a>

        <a data-pjax data-code-name="ourStudio" class="our-studio home-block animation-part"
           href="/<?php echo $links->creativity->route; ?>"
           data-url="<?php echo $links->creativity->route; ?>">
            <figure></figure>
            <h1>
                <small><?php echo KommaLang::get('watch'); ?></small>
                <span><?php echo $links->ourStudio->name; ?></span>
            </h1>

            <div class="right-corner corners"><?php echo $__env->make('layouts.svg.corner', array_except(get_defined_vars(), array('__data', '__path')))->render(); ?></div>
        </a>

        <script src="/js/homeAnimations.js"></script>
        <script>

            function onYouTubePlayerAPIReady() {
                player = new YT.Player('ytplayer', {
                    height: '360',
                    width: '640',
                    videoId: '<?php echo \Config::get('business.video_home'); ?>',
                    playerVars: {
                        modestbranding: 0,
                        showinfo: 0,
                        rel: 0,
                        controls: 0,
                        disablekb: 1
                    },
                    events: {
                        'onStateChange': onPlayerStateChange,
                    }
                });
            }

            function onPlayerStateChange(state) {

//                if (state.data === YT.PlayerState.ENDED || state.data === YT.PlayerState.PAUSED) {
//                    closeVideo();
//                }
                if (state.data === YT.PlayerState.ENDED) {
                    closeVideo();
                }
            }

            var playButtonHome = document.getElementById('home-play');
            var closeButtonHome = document.getElementById('close-home-video');
            var rocketContainer = document.querySelector('.home .video');

            function closeVideo() {

                player.pauseVideo();

                playButtonHome.classList.remove('hidePlayButton');
                document.getElementById('rocket').classList.remove('showVideo');
                document.getElementById('text-video-block').classList.remove('showVideo');
                document.getElementById('ytplayer').classList.remove('showVideo');
                document.getElementById('rocket').classList.add('allowMouseAnimation');
                closeButtonHome.classList.remove('show');

                if (rocketContainer) {
                    rocketContainer.classList.remove('preFlight');
                }

            }

            setTimeout(function () {
                playButtonHome.classList.remove('hidePlayButton');
            }, 1400);

            closeButtonHome.addEventListener('click', function () {
                closeVideo();
            }, false);


            playButtonHome.addEventListener('click', function () {
                playButtonHome.classList.add('hidePlayButton');
                document.getElementById('rocket').classList.add('showVideo');
                document.getElementById('text-video-block').classList.add('showVideo');

                setTimeout(function () {
                    player.playVideo();
                    document.getElementById('ytplayer').classList.add('showVideo');
                    closeButtonHome.classList.add('show');

                }, 1200);

                setTimeout(function () {
                    document.getElementById('rocket').classList.remove('showVideo');

                    if (rocketContainer) {
                        rocketContainer.classList.add('preFlight');
                        document.getElementById('rocket').classList.remove('allowMouseAnimation');
                    }

                    }, 1500);

            }, false);

        </script>

    </div>


<?php $__env->stopSection(); ?>

<?php echo $__env->make('layouts.master', array_except(get_defined_vars(), array('__data', '__path')))->render(); ?>