@extends('layouts.master')

@section('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">@include('layouts.svg.corner')</div>
                <div class="right-corner corner">@include('layouts.svg.corner')</div>
                x
            </div>

            <div class="placeholder">

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

                @include('layouts.partials.home.image')

            </div>

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

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

            <div class="left-corner corners">@include('layouts.svg.corner')</div>
        </a>

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

            <div class="right-corner corners">@include('layouts.svg.corner')</div>
        </a>

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

            function onYouTubePlayerAPIReady() {
                player = new YT.Player('ytplayer', {
                    height: '360',
                    width: '640',
                    videoId: '{{ \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>


@endsection