/**
 * @package    HaruTheme
 * @version    1.0.0
 * @author     Administrator <admin@harutheme.com>
 * @copyright  Copyright (c) 2017, HaruTheme
 * @license    http://opensource.org/licenses/gpl-2.0.php GPL v2 or later
 * @link       http://harutheme.com
*/

(function ($) {
    "use strict";
    var HaruFilmmaker = {
        init: function() {
            HaruFilmmaker.video.init();
            HaruFilmmaker.shortcode.init();
        }
    };

    HaruFilmmaker.video = {
        init: function() {
            // Other variables
            HaruFilmmaker.video.videoID = '';
            HaruFilmmaker.video.video_server = '';
            HaruFilmmaker.video.autoplay = 'on';
            HaruFilmmaker.video.muted = false;
            HaruFilmmaker.video.auto_next = true;
            HaruFilmmaker.video.videos_data = [];
            // Functions
            HaruFilmmaker.video.videoPlayer();
            HaruFilmmaker.video.floatingPlayer();
            HaruFilmmaker.video.videoRating();
            HaruFilmmaker.video.watchLater();
            HaruFilmmaker.video.videoSocialShare();
            HaruFilmmaker.video.videoReport();
            // 
            HaruFilmmaker.video.layoutToggle();
            // Archive Video
            HaruFilmmaker.video.archiveVideoSort();
            HaruFilmmaker.video.videoLayoutIsotope();
            HaruFilmmaker.video.videoLoadMore();
            HaruFilmmaker.video.videoInfiniteScroll();

            // Hover
            HaruFilmmaker.video.thumbnailHoverSlideshow();

            // Single
            HaruFilmmaker.video.personSingle();
            HaruFilmmaker.video.videoSingle();

            // https://github.com/GoogleChromeLabs/samesite-examples/blob/master/javascript.md
        },
        personSingle: function() {
            $('.person-gallery__popup-link').magnificPopup({
                type: 'image',
                gallery: {
                    enabled: true
                }
                // other options
            });

            $('.video-gallery-item__popup').magnificPopup({
                type: 'image',
                gallery: {
                    enabled: true
                }
                // other options
            });
        },
        videoSingle: function() {
            $('.single-video .haru-slick').each(function(){
                $(this).slick();
            });

            var $layout_wrap = $('.video-gallery-isotope');

            if ( $layout_wrap.length > 0 ) {
                $layout_wrap.isotope({
                    itemSelector: '.video-gallery-item',
                    layoutMode: 'masonry'
                });
                $layout_wrap.imagesLoaded( function() {
                    setTimeout(function() {
                        $layout_wrap.isotope('layout');
                    }, 300);  
                    $layout_wrap.addClass('isotope-loaded');
                });
            }
        },
        videoReport: function() {
            $('.video-report-button').off().on('click', function() {
                var $this           = $(this);
                var video_id        = $(this).attr('data-video_id');
                var reportWrap      = $(this).parents('.video-report-form');
                var report_content  = reportWrap.find('.video-report-content').val();

                $.ajax({
                    type : 'POST',
                    timeout : 30000,
                    url : haru_filmmaker_ajax_url,
                    data : {
                        action: 'haru_video_report',
                        video_id: video_id,
                        report_content: report_content
                    },
                    error: function(xhr,err) {
                        console.log('Have something wrong! Please try again!');
                    },
                    success: function(response) {
                        console.log(response);
                        if ( response ) {
                            if ( response.status == 'success' ) {
                                reportWrap.find('.video-report-notice').addClass('success').text(response.message);
                                reportWrap.find('.video-report-reason').hide();
                                reportWrap.find('.video-report-submit').hide();
                            } else {
                                reportWrap.find('.video-report-notice').addClass('failed').text(response.message);
                            }
                        }
                    }
                });
            });
        },
        thumbnailHoverSlideshow: function() {
            $('.video-thumbnail.slideshow, .playlist-thumbnail.slideshow, .series-thumbnail.slideshow').each(function(){
                var $self = $(this).parents('.video-item');
                var speed = $(this).data('speed');
                var currentIndex = 0,
                    items = $('img', $self),
                    itemAmt = items.length;

                if ( itemAmt == 1 ) {
                    return;
                }

                function cycleItems(currentIndex) {
                    var item = $('img', $self).eq(currentIndex);
                    items.hide();
                    item.css('display','block'); // @TODO: item.fadeIn();
                }

                $self.mouseenter(function(){
                    var autoSlide = setInterval(function() {
                        currentIndex += 1;
                        if ( currentIndex > itemAmt - 1 ) {
                            currentIndex = 0;
                            // Go to first & stop
                            clearInterval(autoSlide);
                        }
                        cycleItems(currentIndex);
                    }, speed);

                    $self.mouseleave(function(){
                        clearInterval(autoSlide);
                        // Show first thumb
                        $.each(items, function( index, item ) {
                            if ( item == items[0] ) {
                                $(item).css('display','block');
                            } else {
                                $(item).hide();
                            }
                        });
                    });
                });
            });

            $('.video-thumbnail.video:not(.video-autoplay)').each(function(){
                var $self = $(this).parents('.video-item');

                $self.hover(function(){
                    let video = $('video', this).get(0);
                    video.play();
                    video.muted = true;
                }, function() {
                    let video = $('video', this).get(0);
                    video.pause();
                });
            });
        },
        videoPlayer: function() {
            // Process for unmute video button
            if ( HaruFilmmaker.video.isiOS() ) {
                $('body').addClass('haru-ios');
            }

            HaruFilmmaker.video.displayVideoPlayerDirect();
            HaruFilmmaker.video.displayVideoPlayerPopup();
        },
        processAutoPlay: function() {
            // Check on each server serverAPI
            var serverAPI = null;
            var autoplay = null;

            if ( $('.video-player-data').length > 0 ) {
                serverAPI = $('.video-player-data').attr('data-server');
                autoplay = ($('.video-player-data').attr('data-autoplay')) == 'true' ? true : false;

                // Check on iOS and Safari
                if ( HaruFilmmaker.video.isiOS() ) {
                    autoplay == true;

                    switch ( serverAPI ) {
                        case 'vimeo':
                            HaruFilmmaker.video.muted = true;

                            break;

                        case 'youtube':
                            HaruFilmmaker.video.muted = true;

                            break;

                        case 'twitch':
                            HaruFilmmaker.video.muted = true;

                            break;

                        case 'dailymotion':
                            HaruFilmmaker.video.muted = true;

                            break;

                        case 'cloudflare':
                            HaruFilmmaker.video.muted = true;

                            break;

                        case 'facebook':
                            // @TODO: doesn't work safari & iOS
                            HaruFilmmaker.video.muted = false;

                            break;
                            
                        case 'selfhost':
                            // @TODO: check video player js library
                            HaruFilmmaker.video.muted = true;

                            break;

                        case 'google':
                            // @TODO: check video player js library
                            HaruFilmmaker.video.muted = true;

                            break;                              
                    }
                } else {
                    if ( autoplay == true ) {
                        switch ( serverAPI ) {
                            case 'vimeo':
                                // if ( HaruFilmmaker.video.isSafari() ) {
                                    HaruFilmmaker.video.muted = true;
                                // }

                                break;

                            case 'youtube':
                                // if ( HaruFilmmaker.video.isSafari() ) {
                                    HaruFilmmaker.video.muted = true;
                                // }

                                break;

                            case 'twitch':
                                // if ( HaruFilmmaker.video.isSafari() ) {
                                    HaruFilmmaker.video.muted = true;
                                // }

                                break;

                            case 'dailymotion':
                                // if ( HaruFilmmaker.video.isSafari() ) {
                                    HaruFilmmaker.video.muted = true;
                                // }

                                break;

                            case 'cloudflare':
                                HaruFilmmaker.video.muted = true;

                                break;

                            case 'facebook':
                                // @TODO: doesn't work safari & iOS
                                HaruFilmmaker.video.muted = true;

                                break;
                                
                            case 'selfhost':
                                // @TODO: check video player js library
                                HaruFilmmaker.video.muted = true;

                                break;

                            case 'google':
                                // @TODO: check video player js library
                                HaruFilmmaker.video.muted = true;

                                break;                              
                        }
                    }
                }

                if ( autoplay == true ) {
                    setTimeout(function() {
                        $('.video-player-direct').trigger('click');
                    }, 10);
                }
            }
        },
        beforeAjax: function() {
            $('.haru-ajax-overflow').addClass('active');
        },
        afterAjax: function() {
            $('.haru-ajax-overflow').removeClass('active');
        },
        displayVideoPlayerPopup: function() {
            $('.video-item-player-popup').off().on('click', function(e) {
                e.preventDefault();
                var video_id = $(this).data('id');
                var playlist_id = $(this).data('playlist');
                // var playerID = 'youtube-video'; // @TODO: need change here

                if ( HaruFilmmaker.video.videos_data[video_id] != undefined ) {
                    $('body').find('.haru-lightbox-content').remove();
                    $('body').find('.haru-lightbox').append( HaruFilmmaker.video.videos_data[video_id] );
                    $('body').find('.haru-lightbox-overlay').addClass('show-lightbox');
                    $('body').find('.haru-lightbox').addClass('show-lightbox');

                    // HaruFilmmaker.video.displayVideoPlayerDirect();
                    // HaruFilmmaker.video.getVideoPlayerPopupAjax();

                    return;
                }

                $.ajax({
                    url: haru_filmmaker_ajax_url,
                    type: "POST",
                    data: {
                        action: 'haru_video_player_popup_content',
                        video_id: video_id,
                        playlist_id: playlist_id
                    },
                    dataType: "html",
                    beforeSend: function() {
                        HaruFilmmaker.video.beforeAjax();
                    }
                }).success(function(result) {
                    HaruFilmmaker.video.afterAjax();

                    if ( result ) {
                        $('body').find('.haru-lightbox-content').remove();
                        $('body').find('.haru-lightbox').append(result);
                        $('body').find('.haru-lightbox-overlay').addClass('show-lightbox');
                        $('body').find('.haru-lightbox').addClass('show-lightbox');                       

                        // Actions after ajax
                        HaruFilmmaker.video.displayVideoPlayerDirect();
                        // HaruFilmmaker.video.getVideoPlayerPopupAjax(); // @TODO: for Playlist
                    }

                    $('.haru-lightbox-overlay').off().on('click', function(e) {
                        $('body').find('.haru-lightbox-content').remove();
                        $('body').find('.haru-lightbox-overlay').removeClass('show-lightbox');
                        $('body').find('.haru-lightbox').removeClass('show-lightbox');
                    });
                });
            });
        },
        displayVideoPlayerDirect: function() {
            // Autoplay
            HaruFilmmaker.video.processAutoPlay();

            // Check on iOS
            if ( HaruFilmmaker.video.isiOS() ) {
                $('.video-toggle-fullscreen').hide();
            }

            // @TODO: ajax Youtube playlist player.getDuration is not a function
            $('.video-player-direct').off().on('click', function(e) {
                e.preventDefault();

                var $self = $(this);
                var video_id = $(this).attr('data-video-id');
                var video_post_id = $(this).attr('data-id');
                var video_server = $(this).attr('data-video-server');
                var player_js = $(this).attr('data-player');

                HaruFilmmaker.video.videoID = video_id;
                HaruFilmmaker.video.video_server = video_server;

                // Loading icon
                $self.parents('.video-image').addClass('loading');

                // Do not use Player JS
                if( player_js == 'none' ) {
                    // Youtube
                    if ( video_server == 'youtube' ) {
                        // Do something
                        HaruFilmmaker.video.youtubeAPIReady(video_post_id, video_id);
                    }
                    // Vimeo
                    if ( video_server == 'vimeo' ) {
                        // Do something
                        HaruFilmmaker.video.vimeoAPIReady(video_post_id, video_id);
                    }
                    // Twitch
                    if ( video_server == 'twitch' ) {
                        // Do something
                        HaruFilmmaker.video.twitchAPIReady(video_post_id, video_id);
                    }
                    // Dailymotion
                    if ( video_server == 'dailymotion' ) {
                        // Do something
                        HaruFilmmaker.video.dailymotionAPIReady(video_post_id, video_id);
                    }
                    // Cloudflare
                    if ( video_server == 'cloudflare' ) {
                        // Do something
                        HaruFilmmaker.video.cloudflareAPIReady(video_post_id, video_id);
                    }
                    // Facebook
                    if ( video_server == 'facebook' ) {
                        // Do something
                        HaruFilmmaker.video.facebookAPIReady(video_post_id, video_id);
                    }
                    // Google or SelfHosted
                    if ( video_server == 'selfhost' || video_server == 'google' ) {
                        // Do something
                        HaruFilmmaker.video.selfHostAPIReady(video_post_id, video_id);
                    }
                    // Embed
                    if ( video_server == 'embed' ) {
                        // Do something like autoplay
                        $self.parents('.video-image').addClass('played');
                        $self.parents('.video-image').removeClass('loading');
                    }
                    // Other
                    if ( video_server == 'other' ) {
                        // Do something like autoplay
                        $self.parents('.video-image').addClass('played');
                        $self.parents('.video-image').removeClass('loading');
                    }
                }
                // Use JS Player
            });
        },
        youtubePlayer: function(video_post_id, video_id) {
            // https://css-tricks.com/play-button-youtube-and-vimeo-api/
            // https://developers.google.com/youtube/iframe_api_reference
            // https://chromatichq.com/blog/working-youtube-player-api-iframe-embeds
            // Failed to execute 'postMessage' on 'DOMWindow': The target origin provided (not use HTTPS)             
            var youtubeScriptId = 'youtube-api';
            var youtubeScript = document.getElementById(youtubeScriptId);

            // Load YouTube API script
            if ( youtubeScript === null ) {
                var tag = document.createElement('script');
                    tag.src = 'https://www.youtube.com/iframe_api';
                var firstScriptTag = document.getElementsByTagName('script')[0];
                    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
            }

            // Process when use in Popup
            if ( window.onYouTubeIframeAPIReady ) {
                $(document).trigger('youtubeAPIReady' + video_post_id);
            } else {
                window.onYouTubeIframeAPIReady = function() {
                    $(document).trigger('youtubeAPIReady' + video_post_id);
                };
            }
        },
        youtubeAPIReady: function(video_post_id, video_id) {
            $(document).on('youtubeAPIReady' + video_post_id, function(){
                var player;
                var playerWrap = $('#youtube-video' + video_post_id).closest('.haru-video-player');

                // Remove loading and add played video
                playerWrap.find('.video-image').removeClass('loading').addClass('played');

                // https://developers.google.com/youtube/player_parameters
                var options = {
                        autoplay:       1,
                        enablejsapi:    1,
                        iv_load_policy: 1,
                        modestbranding: 1,
                        playsinline:    1,
                        rel:            0
                    }

                player = new YT.Player('youtube-video' + video_post_id, {
                    videoId: String(HaruFilmmaker.video.videoID),
                    playerVars: options,
                    events: {
                        // Call this function when player is ready to use
                        'onReady': function() {
                            if ( HaruFilmmaker.video.muted == true ) {
                                player.mute();
                            }
                            player.playVideo(); // Autoplay

                            // Do something
                            $('.video-youtube-unmute').on('click', function() {
                                player.unMute();

                                $(this).hide(300);
                            });
                        },
                        'onStateChange': function(e){
                            if ( e.data === 0 ) {
                                // Do something
                                
                                e.target.stopVideo();
                            }
                        }
                    }
                });

                // Save to cache
                HaruFilmmaker.video.videos_data[video_post_id] = $('#youtube-video' + video_post_id).closest('.haru-lightbox-content');
            });

            HaruFilmmaker.video.youtubePlayer(video_post_id, video_id);
        },
        vimeoAPIReady: function(video_post_id, video_id) {
            // https://developer.vimeo.com/player/sdk/reference#play-a-video
            $(document).on('vimeoAPIReady' + video_post_id, function(){
                var player;
                var playerWrap = $('#vimeo-video' + video_post_id).closest('.haru-video-player');

               // Remove loading and add played video
                playerWrap.find('.video-image').removeClass('loading').addClass('played');

                // https://vimeo.zendesk.com/hc/en-us/articles/360001494447-Using-Player-Parameters
                var options = {
                        id:             String(video_id),
                        autoplay:       1,
                        muted:          HaruFilmmaker.video.muted,
                        playsinline:    true,
                    }

                player = new Vimeo.Player('vimeo-video' + video_post_id,
                    options
                );

                player.ready().then(function(){
                    // Mobile iOS @TODO: now use auto click play or must use muted
                    player.play().then(function() {
                        // The video is playing
                        }).catch(function(error) {
                            switch (error.name) {
                                case 'PasswordError':
                                    // The video is password-protected
                                    break;

                                case 'PrivacyError':
                                    // The video is private
                                    break;

                                default:
                                    // Some other error occurred
                                    break;
                        }
                    });

                    player.on('timeupdate', function(e) {
                        // Do something                         
                    });

                    player.on('play', function(e) {
                        // Do something
                    });

                    player.on('ended', function(){
                        // Do something
                    });
                });

                // Save to cache
                HaruFilmmaker.video.videos_data[video_post_id] = $('#vimeo-video' + video_post_id).closest('.haru-lightbox-content');
            });

            HaruFilmmaker.video.playerAPIReady('vimeo', video_post_id);
        },
        twitchAPIReady: function(video_post_id, video_id) {
            // https://dev.twitch.tv/docs/embed/everything
            $(document).on('twitchAPIReady' + video_post_id, function(){
                var player;
                var playerWrap = $('#twitch-video' + video_post_id).closest('.haru-video-player');

                // Remove loading and add played video
                playerWrap.find('.video-image').removeClass('loading').addClass('played');

                // https://dev.twitch.tv/docs/embed/video-and-clips#interactive-frames-for-live-streams-and-vods
                // https://discuss.dev.twitch.tv/t/twitch-embedded-player-updates-in-2020/23956
                var options = {
                        video:          String(video_id),
                        autoplay:       true,
                        playsinline:    true,
                        muted:      HaruFilmmaker.video.muted,
                        parent:     [window.location.hostname, 'www' + window.location.hostname], // require parent and https
                        controls: true
                    }

                player = new Twitch.Embed('twitch-video' + video_post_id,
                    options
                );

                player.addEventListener(Twitch.Player.READY, function() {
                    player.play();

                    player.addEventListener(Twitch.Player.PLAY, function() {
                        // Do something
                    });

                    player.addEventListener(Twitch.Player.ENDED, function() {
                        // Do something
                    });
                });

                // Save to cache
                HaruFilmmaker.video.videos_data[video_post_id] = $('#twitch-video' + video_post_id).closest('.haru-lightbox-content');
            });

            HaruFilmmaker.video.playerAPIReady('twitch', video_post_id);
        },
        dailymotionAPIReady: function(video_post_id, video_id) {
            // https://developer.dailymotion.com/player/
            $(document).on('dailymotionAPIReady' + video_post_id, function(){
                var player;
                var playerWrap = $('#dailymotion-video' + video_post_id).closest('.haru-video-player');

                // Remove loading and add played video
                playerWrap.find('.video-image').removeClass('loading').addClass('played');

                // https://developer.dailymotion.com/player/#player-oembed-params
                var options = {
                        video: String(video_id),
                        width: "100%", 
                        height: "100%",
                        params: { 
                            'autoplay': true,
                            'mute': HaruFilmmaker.video.muted,
                            'queue-enable': false,
                            'sharing-enable': false,
                            'playsinline': true,
                            'webkit-playsinline': true,
                            'ui-logo': false
                        }
                    }

                player = DM.player(document.getElementById( 'dailymotion-video' + video_post_id ), 
                    options
                );

                // https://developer.dailymotion.com/player/#player-api-events-player
                player.addEventListener('apiready', function() {
                    player.addEventListener('playing', function() {
                        // Do something
                    });

                    player.addEventListener('timeupdate', function(e){
                        // Do something          
                    });

                    player.addEventListener('video_end', function() {
                        // Do something
                    });
                });

                // Save to cache
                HaruFilmmaker.video.videos_data[video_post_id] = $('#dailymotion-video' + video_post_id).closest('.haru-lightbox-content');
            });

            HaruFilmmaker.video.playerAPIReady('dailymotion', video_post_id);
        },
        cloudflareAPIReady: function(video_post_id, video_id) {
            // https://developers.cloudflare.com/stream/viewing-videos/using-the-player-api
            $(document).on('cloudflareAPIReady' + video_post_id, function(){
                var player;
                var playerWrap = $('#cloudflare-video' + video_post_id).closest('.haru-video-player');

                // Remove loading and add played video
                playerWrap.find('.video-image').removeClass('loading').addClass('played');

                player = Stream(document.getElementById('cloudflare-video' + video_post_id));

                player.addEventListener('buffered', function() {
                    console.log('ok')
                });

                // https://developers.cloudflare.com/stream/viewing-videos/using-the-player-api
                player.muted = HaruFilmmaker.video.muted;
                player.play();
                player.addEventListener('play', function() {
                    // Do something
                });

                player.addEventListener('loadedmetadata', function() {
                    player.play().catch(() => {
                        console.log('playback failed, muting to try again');
                        player.muted = HaruFilmmaker.video.muted;
                        player.muted = true;
                        player.play();
                    });
                });

                player.addEventListener('ended', function() {
                    // Do something
                });
            });

            HaruFilmmaker.video.playerAPIReady('cloudflare');
        },
        facebookAPIReady: function(video_post_id, video_id) {
            // https://developers.facebook.com/docs/plugins/embedded-video-player/api/
            $(document).on('facebookAPIReady' + video_post_id, function(){
                var player;
                var playerWrap = $('#facebook-video' + video_post_id).closest('.haru-video-player');

                // Remove loading and add played video
                playerWrap.find('.video-image').removeClass('loading').addClass('played');

                // Set attribute for Facebook video player
                var options = {
                        'data-autoplay': 'true',
                    }
                $('#facebook-video' + video_post_id).attr( options );

                // Get Embedded Video Player API Instance: @TODO: bug now only work on second time lightbox
                FB.Event.subscribe('xfbml.ready', function(msg) {
                    if ( msg.type === 'video' && msg.id === ('facebook-video' + video_post_id) ) {
                        player = msg.instance;

                        if ( HaruFilmmaker.video.muted ) {
                            player.mute();
                        }
                        player.play();
                    }

                    var videoEventStarted = player.subscribe('startedPlaying', function(e) {
                        // Do something
                    });

                    var videoEventPause = player.subscribe('paused', function(e) {
                        // Do something
                    });

                    var videoEventFinished = player.subscribe('finishedPlaying', function(e) {
                        // Do something
                    });
                });

                // Save to cache
                HaruFilmmaker.video.videos_data[video_post_id] = $('#facebook-video' + video_post_id).closest('.haru-lightbox-content');
            });

            HaruFilmmaker.video.playerAPIReady('facebook', video_post_id);
        },
        selfHostAPIReady: function(video_post_id) {
            $(document).on('selfHostAPIReady' + video_post_id, function(){
                var player;
                var playerWrap = $('#video-player' + video_post_id).closest('.haru-video-player');

                // Remove loading and add played video
                playerWrap.find('.video-image').removeClass('loading').addClass('played');

                if ( !player ) {
                    $('#video-player' + video_post_id).mediaelementplayer({
                        stretching: 'fill', // responsive, none, fill
                        videoWidth: '100%',
                        videoHeight: '100%',
                        loop: false,
                        features: ['playpause', 'progress', 'current', 'duration', 'volume', 'fullscreen'],
                        // setDimensions: false,
                        // pluginPath: "/path/to/shims/",
                        // When using jQuery's `mediaelementplayer`, an `instance` argument
                        // is available in the `success` callback
                        success: function(mediaElement, originalNode, instance) {
                            player = mediaElement;

                            // Do something
                            player.load();

                            if ( HaruFilmmaker.video.muted == true ) {
                                player.setMuted(true);
                            }
                            
                            player.play();
                            
                            player.addEventListener('loadedmetadata', function(){

                                player.addEventListener('timeupdate', function(){
                                    // Do something
                                });
                                
                                player.addEventListener('playing', function(){
                                    // Do something
                                    $('.video-mediaelement-unmute').on('click', function() {
                                        player.setMuted(false);

                                        $(this).hide(300);
                                    });
                                });

                                player.addEventListener('ended', function(){
                                    // Do something
                                });
                            });
                        }
                    });
                }

                // Save to cache
                HaruFilmmaker.video.videos_data[video_post_id] = $('#video-player' + video_post_id).closest('.haru-lightbox-content');
            });

            HaruFilmmaker.video.playerAPIReady('selfhost', video_post_id);
        },
        playerAPIReady: function(serverAPI, video_post_id) {
            // Load serverAPI Script if need
            switch ( serverAPI ) {
                case 'vimeo':
                    if ( typeof(Vimeo) !== 'undefined' && typeof(Vimeo.Player) !== 'undefined' ) {
                        $(document).trigger('vimeoAPIReady' + video_post_id);
                    } else {
                        var script_url = 'https://player.vimeo.com/api/player.js';

                        $.getScript( script_url, function() {
                            $(document).trigger('vimeoAPIReady' + video_post_id);
                        });
                    }
                    
                    break;

                case 'twitch':
                    if ( typeof(Twitch) !== 'undefined' && typeof(Twitch.Player) !== 'undefined' ) {
                        $(document).trigger('twitchAPIReady' + video_post_id);
                    } else {
                        var script_url = 'https://embed.twitch.tv/embed/v1.js';

                        $.getScript( script_url, function() {
                            $(document).trigger('twitchAPIReady' + video_post_id);
                        });
                    }
                    
                    break;

                case 'dailymotion':
                    if ( typeof(DM) !== 'undefined' && typeof(DM.player) !== 'undefined' ) {
                        $(document).trigger('dailymotionAPIReady' + video_post_id);
                    } else {
                        var script_url = 'https://api.dmcdn.net/all.js';

                        $.getScript( script_url, function() {
                            $(document).trigger('dailymotionAPIReady' + video_post_id);
                        });
                    }
                    
                    break;

                case 'cloudflare':
                    if ( typeof(Stream) !== 'undefined' ) {
                        $(document).trigger('cloudflareAPIReady' + video_post_id);
                    } else {
                        var script_url = 'https://embed.videodelivery.net/embed/sdk.latest.js';

                        $.getScript( script_url, function() {
                            $(document).trigger('cloudflareAPIReady' + video_post_id);
                        });
                    }
                    
                    break;

                case 'facebook':
                    if ( typeof(FB) !== 'undefined' && typeof(FB.Event) !== 'undefined' ) {
                        $(document).trigger('facebookAPIReady' + video_post_id);
                    } else {
                        var script_url = 'https://connect.facebook.net/en_US/sdk.js?xfbml=1&version=v3.2';

                        $.getScript( script_url, function() {
                            $(document).trigger('facebookAPIReady' + video_post_id);
                        });
                    }
                    
                    break;
                    
                case 'selfhost':
                    $(document).trigger('selfHostAPIReady' + video_post_id);

                    break;

                case 'google':
                    $(document).trigger('selfHostAPIReady' + video_post_id);

                    break;                              
            }
        },
        isMobileOS: function() {
            var check = false;

            (function(a){if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino|android|ipad|playbook|silk/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,4))) check = true;})(navigator.userAgent||navigator.vendor||window.opera);

            return check;
        },
        isiOS: function() {
            var iOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;

            return iOS;
        },
        isSafari: function() {
            // https://stackoverflow.com/questions/9847580/how-to-detect-safari-chrome-ie-firefox-and-opera-browser/9851769
            // Safari 3.0+ "[object HTMLElementConstructor]" 
            var isSafari = /constructor/i.test(window.HTMLElement) || (function (p) { return p.toString() === "[object SafariRemoteNotification]"; })(!window['safari'] || (typeof safari !== 'undefined' && safari.pushNotification));

            return isSafari;
        },
        floatingPlayer: function() {
            if ( $('.single-video__player').length ) {
                var playerWrap = $('.single-video__player .video-player-wrap');
                var playerOffset = playerWrap.offset().top + playerWrap.outerHeight(true);

                $(window).on('scroll', function() {
                    if ( !$('body').hasClass('floating-video-disabled') ) {
                        if ( $(this).scrollTop() > playerOffset ) {
                            $('body').addClass('floating-video');
                            $('.single-video__player .video-player-container').addClass('floating-video');
                            $(document).trigger('floatingVideoEnable'); // Use this for responsive Google Ads
                        } else {
                            $('body').removeClass('floating-video');
                            $('.single-video__player .video-player-container').removeClass('floating-video');
                            $(document).trigger('floatingVideoDisable'); // Use this for responsive Google Ads
                        }
                    }
                });

                $('.video-float__close').on('click', function() {
                    $('body').addClass('floating-video-disabled');
                    $('body').removeClass('floating-video');
                    $('.single-video__player .video-player-container').removeClass('floating-video');
                });
            }
        },
        videoRating: function() {
            $('.post-rating').each(function(){
                var $rating_element  = $(this);
                var is_clicked = false;

                $rating_element.find('.action-rating').off().on('click', function(e) {
                    // Process click multitimes before ajax process
                    if ( is_clicked === true ) {
                        return;
                    }

                    is_clicked = true;

                    var post_id = $(this).data('id');
                    var post_action = $(this).attr('data-action');
                    var vote_status = $(this).attr('data-vote-status');
                    var login = $(this).attr('data-login');
                    var login_required = $(this).attr('data-login-required');

                    if ( login_required == 'yes' && login == 'false' ) {
                        return;
                    }

                    $(this).toggleClass('active').siblings('.action-rating').removeClass('active');

                    if ( $(this).hasClass('active') ) {
                        vote_status = post_action;
                    } else {
                        vote_status = '';
                    }

                    $.ajax({
                        url: haru_filmmaker_ajax_url,
                        type: "POST",
                        data: {
                            action: 'haru_ajax_voting',
                            post_id: post_id,
                            post_action: post_action,
                            vote_status: vote_status
                        },
                        dataType: "html",
                        beforeSend: function() {
                            // Do Somethings
                        }
                    }).success(function(result) {
                        // Do Somethings
                        result = JSON.parse(result);

                        $rating_element.attr('data-vote-status', result.vote_status);
                        $rating_element.find('.post-like-count').text(result.like_count);
                        $rating_element.find('.post-dislike-count').text(result.dislike_count);
                        $rating_element.find('.like-tooltip').text(result.message_like);
                        $rating_element.find('.dislike-tooltip').text(result.message_dislike);
                        $rating_element.find('.post-rating-percentage').css('width', result.like_percentage);
                        // For single rating count display
                        $('.post-rating-bar').find('.post-rating-percentage').css('width', result.like_percentage);
                        $('.post-rating-count').find('.post-like-count').text(result.like_count);
                        $('.post-rating-count').find('.post-dislike-count').text(result.dislike_count);

                        is_clicked = false;
                    });
                });
            });
        },
        videoSocialShare: function() {
            $('.single-video-share').off().on('click', function() {
                $(this).toggleClass('active');
                $(this).find('.video-social-share').toggle();
            });
        },
        archiveVideoSort: function() {
            if ( $('.order-item-current').length > 0 ) {
                $('.order-item-current').off().on('click', function(e) {
                    e.stopPropagation();

                    $(this).toggleClass('active');
                    $(this).next('.order-items').toggleClass('active');
                });

                $(document).on('click', function(e) {
                    if ( e.target.className !== 'order-item-current' ) {
                        $(document).find('.order-item-current').removeClass('active');
                        $(document).find('.order-items').removeClass('active');
                    }
                })
            }
        },
        layoutToggle: function() {
            // @TODO: Add to cookie archivelayoutcookie
            $('.toggle-layout').off().on('click', function() {
                if ( $(this).hasClass('active') ) {
                    return;
                } else {
                    $(this).addClass('active').siblings('.toggle-layout').removeClass('active');

                    var active_layout = $(this).attr('data-layout');

                    $('.layout-wrap').removeClass(function (index, css) {
                       return (css.match (/(^|\s)style-\S+/g) || []).join(' ');
                    }).addClass('style-' + active_layout);

                    HaruFilmmaker.video.videoLayoutIsotope();
                }
            });
        },

        videoLayoutIsotope: function() {
            var $layout_wrap = $('.layout-wrap');

            if ( $layout_wrap.length > 0 ) {
                $layout_wrap.isotope({
                    itemSelector: 'article',
                    layoutMode: 'fitRows'
                });
                $layout_wrap.imagesLoaded( function() {
                    setTimeout(function() {
                        $layout_wrap.isotope('layout');
                    }, 300);  
                    $layout_wrap.addClass('isotope-loaded');
                });
            }
        },
        videoLoadMore: function() {
            $('.cpt-load-more').off().on('click', function(e) {
                e.preventDefault();

                var $this          = $(this).addClass('loading');
                var link           = $(this).attr('data-href');
                var contentWrap    = '.layout-wrap';
                var element        = '.layout-wrap article.grid-item';
                var loadMoreText   = $(this).text();
                var loadingText    = $(this).attr('data-loading-text');

                $this.text(loadingText);

                $.get(link, function (data) {
                    var next_href = $('.cpt-load-more', data).attr('data-href');
                    var $newElems = $(element, data).css({ opacity: 0 });

                    $(contentWrap).append($newElems);

                    $newElems.imagesLoaded(function () {
                        // Re Init functions (@TODO: Make order archive video and playlist doesn't work)
                        HaruFilmmaker.video.init();

                        $newElems.animate({ opacity: 1 });

                        $(contentWrap).isotope('appended', $newElems);

                        setTimeout(function() {
                            $(contentWrap).isotope('layout');
                        }, 300);
                    });

                    if ( typeof(next_href) == 'undefined' ) {
                        $this.parent().hide();
                    } else {
                        $this.removeClass('loading');
                        $this.attr('data-href', next_href);
                        $this.text(loadMoreText);
                    }
                });
            });
        },
        videoInfiniteScroll: function() {
            var contentWrap = '.layout-wrap';
            var maxPag = $('#infinite_scroll_button').attr('data-max-page');
            var msgText = $('#infinite_scroll_button').attr('data-msgText');
            var finishedMsg = $('#infinite_scroll_button').attr('data-finishedMsg');

            if ( $(contentWrap).length ) {
                $(contentWrap).infinitescroll({
                    navSelector: '#infinite_scroll_button',
                    nextSelector: '#infinite_scroll_button a',
                    itemSelector: '.layout-wrap article.grid-item',
                    loading: {
                        'selector': '#infinite_scroll_loading',
                        'img': haru_filmmaker_plugin_url + '/assets/images/ajax-loader.gif',
                        'msgText': msgText,
                        'finishedMsg': finishedMsg
                    },
                    maxPage: maxPag
                }, function (newElements, data, url) {
                    var $newElems = $(newElements).css({ opacity: 0 });

                    $newElems.imagesLoaded(function () {
                        // Re Init functions
                        HaruFilmmaker.video.init();

                        $newElems.animate({ opacity: 1 });

                        $(contentWrap).isotope('appended', $newElems);

                        setTimeout(function() {
                            $(contentWrap).isotope('layout');
                        }, 300);
                    });
                });
            }
        },

        watchLater: function() {
            var watch_later_cookie = 'haruwatchlatervideos';

            $('.video-watch-later').off().on('click', function(e) {
                e.preventDefault();

                var $later = $(this);

                if ( $later.hasClass('active') ) {
                    HaruFilmmaker.video.processWatchLaterDeleteVideo($later, watch_later_cookie);
                } else {
                    HaruFilmmaker.video.processWatchLaterAddVideo($later, watch_later_cookie);
                }
            });

            $('.video-watch-later-delete').off().on('click', function() {
                var $later = $(this);
                    
                HaruFilmmaker.video.processWatchLaterDeleteVideo($later, watch_later_cookie);
            });
        },
        processWatchLaterAddVideo: function( $later, watch_later_cookie ) {
            var id = Number($later.attr('data-id'));

            // https://github.com/js-cookie/js-cookie
            if ( typeof(Cookies.get(watch_later_cookie)) !== 'undefined' ) {
                var watch_later_video_ids = Cookies.get(watch_later_cookie);
                var new_watch_later_video_ids = [];
                
                watch_later_video_ids = JSON.parse("[" + watch_later_video_ids + "]");
                
                var i;
                for ( i = 0; i < watch_later_video_ids.length; i++ ) {
                    new_watch_later_video_ids[i] = watch_later_video_ids[i];
                }

                if ( new_watch_later_video_ids.indexOf(id) === -1 ) {
                    new_watch_later_video_ids.push( id );
                    var new_watch_later_cookie = new_watch_later_video_ids.toString();

                    Cookies.set(
                        watch_later_cookie, 
                        new_watch_later_cookie, 
                        {
                            expires: 365
                        }
                    );

                    console.log( new_watch_later_video_ids );
                }

                HaruFilmmaker.video.processWatchLaterAddVideoToList( $later, watch_later_cookie );
            } else {
                Cookies.set(
                    watch_later_cookie,
                    id,
                    {
                        expires: 365
                    }
                );

                HaruFilmmaker.video.processWatchLaterAddVideoToList( $later, watch_later_cookie );
            }

            HaruFilmmaker.video.watchLater(); // To make delete video work

            $(document).find('.watch-later-status').addClass('has-videos');

            $later.addClass('active');
        },
        processWatchLaterAddVideoToList: function( $later, watch_later_cookie ) {
            var id = Number($later.attr('data-id'));

            var title = $later.attr('data-title'),
                permalink = $later.attr('data-permalink'),
                thumb = $later.attr('data-thumb');

            var watch_later_item = '<div class="video-watch-later-item video-item video-' + id + '" id="video-watch-later-' + id + '">' +
                                        '<div class="video-content">' +
                                            '<div class="video-thumb">' +
                                                '<img class="video-img" src="' + thumb + '" alt="' + title + '">' +
                                            '</div>' +
                                            '<h6 class="video-title">' +
                                                '<a href="' + permalink + '" title="' + title + '">' + title + '</a>' +
                                            '</h6>' +
                                        '</div>' +
                                        '<div class="video-watch-later-delete" data-id="' + id + '"><i class="haru-icon haru-times"></i></div>' +
                                    '</div>';

            $(document).find('.haru-watch-later-videos').prepend(watch_later_item);
            $(document).find('.haru-watch-later-videos').removeClass('empty-video');
        },
        processWatchLaterDeleteVideo: function( $later, watch_later_cookie ) {
            var id = Number($later.attr('data-id'));

            if ( typeof( Cookies.get(watch_later_cookie) ) !== 'undefined' ) {
                var watch_later_video_ids = Cookies.get(watch_later_cookie);
                var new_watch_later_video_ids = [];
                
                watch_later_video_ids = JSON.parse("[" + watch_later_video_ids + "]");
                
                var i;
                for ( i = 0; i < watch_later_video_ids.length; i++ ) {
                    new_watch_later_video_ids[i] = watch_later_video_ids[i];
                }

                if ( new_watch_later_video_ids.indexOf(id) !== -1 ) {
                    new_watch_later_video_ids.pop( id );
                    var new_watch_later_cookie = new_watch_later_video_ids.toString();

                    Cookies.set(
                        watch_later_cookie, 
                        new_watch_later_cookie, 
                        {
                            expires: 365
                        }
                    );

                    console.log( new_watch_later_video_ids );

                    if ( new_watch_later_video_ids === 'undefined' || new_watch_later_video_ids.length == 0 ) {
                        $(document).find('.watch-later-status').removeClass('has-videos');
                    }
                }

                if ( $later.hasClass('active') ) {
                    $later.removeClass('active');
                }

                $(document).find('.video-watch-later[data-id="' + id + '"]').removeClass('active');                   
                
                // Process in archive watch later page
                var $watch_later_archive_parent = $later.parents('.haru-archive-watch-later');
                if ( $watch_later_archive_parent.length > 0 ) {
                    $('.video-' + id, $watch_later_archive_parent).hide(50, function(){ 
                        $(this).remove();

                        // Process layout
                        var contentWrap    = '.layout-wrap';
                            $(contentWrap).isotope('layout');

                        if ( $watch_later_archive_parent.find('.video-item').length === 0 ) {
                            $watch_later_archive_parent.find('.haru-watch-later-videos').addClass('empty-video');
                            $watch_later_archive_parent.find('.haru-watch-later-videos').empty();

                            $(document).find('.watch-later-status').removeClass('has-videos');
                        }
                    });
                }
                
                // Process in watch later element
                var $watch_later_element_parent = $(document).find('.haru-watch-later-videos');
                $('.video-' + id, $watch_later_element_parent).hide(50, function(){ 
                    $(this).remove();

                    // Process layout
                    var contentWrap    = '.layout-wrap';
                        $(contentWrap).isotope('layout');

                    if ( $watch_later_element_parent.find('.video-item').length === 0 ) {
                        $watch_later_element_parent.addClass('empty-video');

                        $(document).find('.watch-later-status').removeClass('has-videos');
                    }
                });
            }
        }
    }

    HaruFilmmaker.shortcode = {
        init: function() {
            // Shortcode
            HaruFilmmaker.shortcode.shortcodeSingle();
            HaruFilmmaker.shortcode.shortcodeVideoFilter();
            HaruFilmmaker.shortcode.shortcodeVideoFeatured();
            HaruFilmmaker.shortcode.shortcodeVideoCreative();
            HaruFilmmaker.shortcode.shortcodeVideoOrder();
            HaruFilmmaker.shortcode.shortcodeVideoOrderSingle();
            HaruFilmmaker.shortcode.shortcodeVideoCategory();
            HaruFilmmaker.shortcode.shortcodeVideoCategorySingle();
            HaruFilmmaker.shortcode.shortcodeVideoTop();
            HaruFilmmaker.shortcode.shortcodeVideoSlideshow();
            HaruFilmmaker.shortcode.shortcodeVideoSearch();
            HaruFilmmaker.shortcode.shortcodePersonCategory();
            HaruFilmmaker.shortcode.shortcodeSubmit();
        },
        shortcodeSingle: function() {
            $('.haru-shortcode-copy').on('click', function(){
              var share_id = $(this).data('id');
              var copyText = document.getElementsByClassName('haru-shortcode-core');
              
              copyText[0].select();
              copyText[0].setSelectionRange(0, 99999);
              document.execCommand('copy');
              console.log('Copied the text: ' + copyText[0].value);
            });
        },
        shortcodeVideoFilter: function() {
            var default_filter = [];
            var array_filter = []; // Push filter to an array to process when don't have filter

            $('.haru-video-isotope').each(function(index, value) {
                // Process filter each shortcode
                $(this).find('.video-filter li').first().find('a').addClass('active');
                default_filter[index] = $(this).find('.video-filter li').first().find('a').attr('data-option-value');

                var self = $(this);
                var $layout_wrap = $(this).find('.layout-wrap'); // parent element of .item
                var $filter = $(this).find('.video-filter a');
                var masonry_options = {
                    'gutter': 0
                };

                array_filter[index] = $filter;

                // Add to process products layout style
                var layoutMode = 'fitRows';
                if (($(this).hasClass('haru-video-isotope--masonry'))) {
                    var layoutMode = 'masonry';
                }

                for (var i = 0; i < array_filter.length; i++) {
                    if (array_filter[i].length == 0) {
                        default_filter = '';
                    }
                    $layout_wrap.isotope({
                        itemSelector: 'article', // .item
                        transitionDuration: '0.4s',
                        masonry: masonry_options,
                        layoutMode: layoutMode,
                        filter: default_filter[i]
                    });
                }

                imagesLoaded(self, function() {
                    setTimeout(function() {
                        $layout_wrap.isotope('layout');
                    }, 300);
                });

                $(window).resize(function() {
                    $layout_wrap.isotope('layout');
                });

                $filter.click(function(e) {
                    e.stopPropagation();
                    e.preventDefault();

                    var $this = $(this);
                    // Don't proceed if already active
                    if ($this.hasClass('active')) {
                        return false;
                    }
                    var filters = $this.closest('ul');
                    filters.find('.active').removeClass('active');
                    $this.addClass('active');

                    var options = {
                            layoutMode: layoutMode,
                            transitionDuration: '0.4s',
                            packery: {
                                horizontal: true
                            },
                            masonry: masonry_options
                        },
                        key = filters.attr('data-option-key'),
                        value = $this.attr('data-option-value');
                        value = value === 'false' ? false : value;
                        options[key] = value;

                    $layout_wrap.isotope(options);
                });
            });
        },
        shortcodeVideoGrid: function() {
            var video_category_data = []; // Use this for video category shortcode
            var video_category_control = [];

            $('.haru-video-grid').each(function() {
                var element         = $(this);
                var element_id      = element.attr('id');
                var atts            = element.data('atts');


                if ( atts['filter'] != 'hide' ) {
                    var category        = element.find('.video-filter .filter-item:first').attr('data-category');
                    var max_pages       = parseInt(element.find('.video-control-item').attr('data-max_pages'));
                    var current_page    = parseInt(element.find('.video-control-item').attr('data-current_page'));

                    // Save first load to cache
                    var tab_data_index = element_id + '-' + category.toString().split(',').join('-') + '-page-1';
                    var tab_control_index = element_id + '-' + category.toString().split(',').join('-');

                    video_category_data[tab_data_index] = element.find('.video-category-content').clone(true);
                    video_category_control[tab_control_index] = [category, max_pages, current_page];

                    element.find('.video-filter .filter-item').off().on('click', function() {
                        // Check if already click or loading
                        if ( $(this).hasClass('active') || element.find('.video-ajax-content').hasClass('loading') ) {
                            return;
                        }

                        element.find('.video-filter .filter-item').removeClass('active');
                        $(this).addClass('active');

                        // Check cache
                        var category            = $(this).data('category');
                        var tab_control_index   = element_id + '-' + category.toString().split(',').join('-');

                        if ( video_category_control[tab_control_index] != undefined ) {
                            element.find('.video-category-content').remove();

                            var tab_data_index = element_id + '-' + category.toString().split(',').join('-') + '-page-' + video_category_control[tab_control_index][2].toString();

                            element.find('.video-ajax-content').append( video_category_data[tab_data_index] );
                            element.find('.video-control .video-control-item').attr('data-category', video_category_control[tab_control_index][0]);
                            element.find('.video-control .video-control-item').attr('data-max_pages', video_category_control[tab_control_index][1]);
                            element.find('.video-control .video-control-item').attr('data-current_page', video_category_control[tab_control_index][2]);
                            // Check show/hide control
                            if ( video_category_control[tab_control_index][1] <= 1 ) {
                                element.find('.video-control').addClass('hide');
                            } else {
                                element.find('.video-control').removeClass('hide');
                            }
                            // Check last page, first page
                            if ( video_category_control[tab_control_index][2] == video_category_control[tab_control_index][1] ) {
                                element.find('.video-control .video-control-item[data-action="prev"]').removeClass('disable');
                                element.find('.video-control .video-control-item[data-action="next"]').addClass('disable');
                            } else if ( video_category_control[tab_control_index][2] == 1 ) {
                                element.find('.video-control .video-control-item[data-action="prev"]').addClass('disable');
                                element.find('.video-control .video-control-item[data-action="next"]').removeClass('disable');
                            } else {
                                element.find('.video-control .video-control-item[data-action="prev"]').removeClass('disable');
                                element.find('.video-control .video-control-item[data-action="next"]').removeClass('disable');
                            }

                            return;
                        }

                        // Load content via ajax
                        element.find('.video-ajax-content').addClass('loading');

                        $.ajax({
                            type : "POST",
                            timeout : 30000,
                            url : haru_filmmaker_ajax_url,
                            data : {
                                action: 'haru_get_video_category', 
                                atts: atts, 
                                category: category
                            },
                            error: function(xhr,err) {
                                console.log('Have something wrong! Please try again!');
                            },
                            success: function(response) {
                                if ( response ) {
                                    element.find('.video-category-content').remove();
                                    element.find('.video-ajax-content').append( response );       

                                    // Save cache
                                    var tab_data_index      = element_id + '-' + category.toString().split(',').join('-') + '-page-1';
                                    video_category_data[tab_data_index] = response;

                                    // Do something
                                    var max_pages = parseInt(element.find('.video-category-content').attr('data-max_pages'));
                                    video_category_control[tab_control_index] = [category, max_pages, 1];
                                    // Check show/hide control
                                    if ( max_pages <= 1 ) {
                                        // Do something
                                        element.find('.video-control').addClass('hide');
                                    } else {
                                        element.find('.video-control').removeClass('hide');
                                    }
                                    // Set new value for control
                                    element.find('.video-control .video-control-item').attr('data-category', category);
                                    element.find('.video-control .video-control-item').attr('data-max_pages', max_pages);
                                    element.find('.video-control .video-control-item').attr('data-current_page', 1);
                                    // Check last page, first page
                                    element.find('.video-control .video-control-item[data-action="prev"]').addClass('disable');
                                    element.find('.video-control .video-control-item[data-action="next"]').removeClass('disable');
                                }
                                element.find('.video-ajax-content').removeClass('loading');

                                HaruFilmmaker.video.init();
                            }
                        });
                    });
                } else {
                    var category        = element.find('.video-control-item').attr('data-category');
                    var max_pages       = parseInt(element.find('.video-control-item').attr('data-max_pages'));
                    var current_page    = parseInt(element.find('.video-control-item').attr('data-current_page'));

                    // Save first load to cache
                    var tab_data_index = element_id + '-' + category.toString().split(',').join('-') + '-page-1';
                    var tab_control_index = element_id + '-' + category.toString().split(',').join('-');

                    video_category_data[tab_data_index] = element.find('.video-category-content').clone(true);
                    video_category_control[tab_control_index] = [category, max_pages, current_page];
                }

                // Next/Prev control
                element.find('.video-control .video-control-item').off().on('click', function() {
                    // Check if already click or loading
                    if ( $(this).hasClass('disable') || element.find('.video-ajax-content').hasClass('loading') ) {
                        return;
                    }

                    var category        = $(this).attr('data-category');
                    var max_pages       = parseInt($(this).attr('data-max_pages'));
                    var action          = $(this).attr('data-action');

                    if ( action == 'next' ) {
                        var current_page    = parseInt($(this).attr('data-current_page'));

                        if ( (current_page + 1) <= max_pages ) {
                            // Check cache
                            var tab_data_index = element_id + '-' + category.toString().split(',').join('-') + '-page-' + ( current_page + 1 );
                            var tab_control_index = element_id + '-' + category.toString().split(',').join('-');

                            if ( video_category_data[tab_data_index] != undefined ) {
                                element.find('.video-category-content').remove();
                                element.find('.video-ajax-content').append( video_category_data[tab_data_index] );
                                
                                // Do something
                                element.find('.video-control .video-control-item').attr('data-current_page', current_page + 1);
                                video_category_control[tab_control_index] = [category, max_pages, current_page + 1];
                                // Check last page
                                element.find('.video-control .video-control-item[data-action="prev"]').removeClass('disable');
                                if ( current_page + 1 >= max_pages ) {
                                    element.find('.video-control .video-control-item[data-action="next"]').addClass('disable');
                                }

                                return;
                            }
                        
                            // Load content via ajax
                            element.find('.video-ajax-content').addClass('loading');

                            $.ajax({
                                type : "POST",
                                timeout : 30000,
                                url : haru_filmmaker_ajax_url,
                                data : {
                                    action: 'haru_get_video_category_next', 
                                    atts: atts, 
                                    category: category,
                                    current_page: current_page
                                },
                                error: function(xhr,err) {
                                    console.log('Have something wrong! Please try again!');
                                },
                                success: function(response) {
                                    if ( response ) {
                                        element.find('.video-category-content').remove();
                                        element.find('.video-ajax-content').append( response );       

                                        // Save cache
                                        video_category_data[tab_data_index] = response;
                                        video_category_control[tab_control_index] = [category, max_pages, current_page + 1];
                                    }
                                    // Do something
                                    element.find('.video-control .video-control-item').attr('data-current_page', current_page + 1);
                                    element.find('.video-ajax-content').removeClass('loading');
                                    // Check last page
                                    element.find('.video-control .video-control-item[data-action="prev"]').removeClass('disable');
                                    if ( current_page + 1 >= max_pages ) {
                                        element.find('.video-control .video-control-item[data-action="next"]').addClass('disable');
                                    }

                                    HaruFilmmaker.video.init();
                                }
                            });
                        } else {
                            return;
                        }
                    } else if ( action == 'prev' ) {
                        var current_page    = parseInt($(this).attr('data-current_page'));

                        if ( current_page == 1 ) {
                            return;
                        }

                        // Check cache
                        var tab_data_index = element_id + '-' + category.toString().split(',').join('-') + '-page-' + ( current_page - 1 );
                        var tab_control_index = element_id + '-' + category.toString().split(',').join('-');

                        if ( video_category_data[tab_data_index] != undefined ) {
                            element.find('.video-category-content').remove();
                            element.find('.video-ajax-content').append( video_category_data[tab_data_index] );
                            
                            // Do something
                            element.find('.video-control .video-control-item').attr('data-current_page', current_page - 1);
                            video_category_control[tab_control_index] = [category, max_pages, current_page - 1];
                        }

                        // Check first page
                        element.find('.video-control .video-control-item[data-action="next"]').removeClass('disable');
                        if ( current_page - 1 <= 1 ) {
                            element.find('.video-control .video-control-item[data-action="prev"]').addClass('disable');
                        }
                    }
                });
            });
        },
        shortcodeVideoCategory: function() {
            var video_category_data = []; // Use this for video category shortcode
            var video_category_control = [];

            $('.haru-video-category').each(function() {
                var element         = $(this);
                var element_id      = element.attr('id');
                var settings            = element.data('settings');


                if ( settings['video_filter'] != 'hide' ) {
                    var category        = element.find('.video-filter .filter-item:first').attr('data-category');
                    var max_pages       = parseInt(element.find('.video-control-item').attr('data-max_pages'));
                    var current_page    = parseInt(element.find('.video-control-item').attr('data-current_page'));

                    // Save first load to cache
                    var tab_data_index = element_id + '-' + category.toString().split(',').join('-') + '-page-1';
                    var tab_control_index = element_id + '-' + category.toString().split(',').join('-');

                    video_category_data[tab_data_index] = element.find('.video-category-content').clone(true);
                    video_category_control[tab_control_index] = [category, max_pages, current_page];

                    element.find('.video-filter .filter-item').off().on('click', function() {
                        // Check if already click or loading
                        if ( $(this).hasClass('active') || element.find('.video-ajax-content').hasClass('loading') ) {
                            return;
                        }

                        element.find('.video-filter .filter-item').removeClass('active');
                        $(this).addClass('active');

                        // Check cache
                        var category            = $(this).data('category');
                        var tab_control_index   = element_id + '-' + category.toString().split(',').join('-');

                        if ( video_category_control[tab_control_index] != undefined ) {
                            element.find('.video-category-content').remove();

                            var tab_data_index = element_id + '-' + category.toString().split(',').join('-') + '-page-' + video_category_control[tab_control_index][2].toString();

                            element.find('.video-ajax-content').append( video_category_data[tab_data_index] );
                            element.find('.video-control .video-control-item').attr('data-category', video_category_control[tab_control_index][0]);
                            element.find('.video-control .video-control-item').attr('data-max_pages', video_category_control[tab_control_index][1]);
                            element.find('.video-control .video-control-item').attr('data-current_page', video_category_control[tab_control_index][2]);
                            // Check show/hide control
                            if ( video_category_control[tab_control_index][1] <= 1 ) {
                                element.find('.video-control').addClass('hide');
                            } else {
                                element.find('.video-control').removeClass('hide');
                            }
                            // Check last page, first page
                            if ( video_category_control[tab_control_index][2] == video_category_control[tab_control_index][1] ) {
                                element.find('.video-control .video-control-item[data-action="prev"]').removeClass('disable');
                                element.find('.video-control .video-control-item[data-action="next"]').addClass('disable');
                            } else if ( video_category_control[tab_control_index][2] == 1 ) {
                                element.find('.video-control .video-control-item[data-action="prev"]').addClass('disable');
                                element.find('.video-control .video-control-item[data-action="next"]').removeClass('disable');
                            } else {
                                element.find('.video-control .video-control-item[data-action="prev"]').removeClass('disable');
                                element.find('.video-control .video-control-item[data-action="next"]').removeClass('disable');
                            }

                            return;
                        }

                        // Load content via ajax
                        element.find('.video-ajax-content').addClass('loading');

                        $.ajax({
                            type : "POST",
                            timeout : 30000,
                            url : haru_filmmaker_ajax_url,
                            data : {
                                action: 'haru_get_video_category', 
                                settings: settings, 
                                category: category
                            },
                            error: function(xhr,err) {
                                console.log('Have something wrong! Please try again!');
                            },
                            success: function(response) {
                                if ( response ) {
                                    element.find('.video-category-content').remove();
                                    element.find('.video-ajax-content').append( response );       

                                    // Save cache
                                    var tab_data_index      = element_id + '-' + category.toString().split(',').join('-') + '-page-1';
                                    video_category_data[tab_data_index] = response;

                                    // Do something
                                    var max_pages = parseInt(element.find('.video-category-content').attr('data-max_pages'));
                                    video_category_control[tab_control_index] = [category, max_pages, 1];
                                    // Check show/hide control
                                    if ( max_pages <= 1 ) {
                                        // Do something
                                        element.find('.video-control').addClass('hide');
                                    } else {
                                        element.find('.video-control').removeClass('hide');
                                    }
                                    // Set new value for control
                                    element.find('.video-control .video-control-item').attr('data-category', category);
                                    element.find('.video-control .video-control-item').attr('data-max_pages', max_pages);
                                    element.find('.video-control .video-control-item').attr('data-current_page', 1);
                                    // Check last page, first page
                                    element.find('.video-control .video-control-item[data-action="prev"]').addClass('disable');
                                    element.find('.video-control .video-control-item[data-action="next"]').removeClass('disable');
                                }
                                element.find('.video-ajax-content').removeClass('loading');

                                HaruFilmmaker.video.init();
                            }
                        });
                    });
                } else {
                    var category        = element.find('.video-control-item').attr('data-category');
                    var max_pages       = parseInt(element.find('.video-control-item').attr('data-max_pages'));
                    var current_page    = parseInt(element.find('.video-control-item').attr('data-current_page'));

                    // Save first load to cache
                    var tab_data_index = element_id + '-' + category.toString().split(',').join('-') + '-page-1';
                    var tab_control_index = element_id + '-' + category.toString().split(',').join('-');

                    video_category_data[tab_data_index] = element.find('.video-category-content').clone(true);
                    video_category_control[tab_control_index] = [category, max_pages, current_page];
                }

                // Next/Prev control
                element.find('.video-control .video-control-item').off().on('click', function() {
                    // Check if already click or loading
                    if ( $(this).hasClass('disable') || element.find('.video-ajax-content').hasClass('loading') ) {
                        return;
                    }

                    var category        = $(this).attr('data-category');
                    var max_pages       = parseInt($(this).attr('data-max_pages'));
                    var action          = $(this).attr('data-action');

                    if ( action == 'next' ) {
                        var current_page    = parseInt($(this).attr('data-current_page'));

                        if ( (current_page + 1) <= max_pages ) {
                            // Check cache
                            var tab_data_index = element_id + '-' + category.toString().split(',').join('-') + '-page-' + ( current_page + 1 );
                            var tab_control_index = element_id + '-' + category.toString().split(',').join('-');

                            if ( video_category_data[tab_data_index] != undefined ) {
                                element.find('.video-category-content').remove();
                                element.find('.video-ajax-content').append( video_category_data[tab_data_index] );
                                
                                // Do something
                                element.find('.video-control .video-control-item').attr('data-current_page', current_page + 1);
                                video_category_control[tab_control_index] = [category, max_pages, current_page + 1];
                                // Check last page
                                element.find('.video-control .video-control-item[data-action="prev"]').removeClass('disable');
                                if ( current_page + 1 >= max_pages ) {
                                    element.find('.video-control .video-control-item[data-action="next"]').addClass('disable');
                                }

                                HaruFilmmaker.video.init();

                                return;
                            }
                        
                            // Load content via ajax
                            element.find('.video-ajax-content').addClass('loading');

                            $.ajax({
                                type : "POST",
                                timeout : 30000,
                                url : haru_filmmaker_ajax_url,
                                data : {
                                    action: 'haru_get_video_category_next', 
                                    settings: settings, 
                                    category: category,
                                    current_page: current_page
                                },
                                error: function(xhr,err) {
                                    console.log('Have something wrong! Please try again!');
                                },
                                success: function(response) {
                                    if ( response ) {
                                        element.find('.video-category-content').remove();
                                        element.find('.video-ajax-content').append( response );       

                                        // Save cache
                                        video_category_data[tab_data_index] = response;
                                        video_category_control[tab_control_index] = [category, max_pages, current_page + 1];
                                    }
                                    // Do something
                                    element.find('.video-control .video-control-item').attr('data-current_page', current_page + 1);
                                    element.find('.video-ajax-content').removeClass('loading');
                                    // Check last page
                                    element.find('.video-control .video-control-item[data-action="prev"]').removeClass('disable');
                                    if ( current_page + 1 >= max_pages ) {
                                        element.find('.video-control .video-control-item[data-action="next"]').addClass('disable');
                                    }

                                    HaruFilmmaker.video.init();
                                }
                            });
                        } else {
                            HaruFilmmaker.video.init();

                            return;
                        }
                    } else if ( action == 'prev' ) {
                        var current_page    = parseInt($(this).attr('data-current_page'));

                        if ( current_page == 1 ) {
                            HaruFilmmaker.video.init();
                            
                            return;
                        }

                        // Check cache
                        var tab_data_index = element_id + '-' + category.toString().split(',').join('-') + '-page-' + ( current_page - 1 );
                        var tab_control_index = element_id + '-' + category.toString().split(',').join('-');

                        if ( video_category_data[tab_data_index] != undefined ) {
                            element.find('.video-category-content').remove();
                            element.find('.video-ajax-content').append( video_category_data[tab_data_index] );
                            
                            // Do something
                            element.find('.video-control .video-control-item').attr('data-current_page', current_page - 1);
                            video_category_control[tab_control_index] = [category, max_pages, current_page - 1];
                        }

                        // Check first page
                        element.find('.video-control .video-control-item[data-action="next"]').removeClass('disable');
                        if ( current_page - 1 <= 1 ) {
                            element.find('.video-control .video-control-item[data-action="prev"]').addClass('disable');
                        }

                        HaruFilmmaker.video.init();
                    }
                });
            });
        },
        shortcodeVideoCategorySingle: function() {
            var video_category_single_data = []; // Use this for video category shortcode
            var video_category_single_control = [];

            $('.video-category-single-shortcode').each(function() {
                var element         = $(this);
                var element_id      = element.attr('id');
                var atts            = element.data('atts');

                var category        = element.find('.video-filter .filter-item:first').attr('data-category');
                var max_pages       = parseInt(element.find('.video-control-item').attr('data-max_pages'));
                var current_page    = parseInt(element.find('.video-control-item').attr('data-current_page'));

                // Save first load to cache
                var tab_data_index = element_id + '-' + category.toString().split(',').join('-') + '-page-1';
                var tab_control_index = element_id + '-' + category.toString().split(',').join('-');

                video_category_single_data[tab_data_index] = element.find('.video-category-single-content').clone(true);
                video_category_single_control[tab_control_index] = [category, max_pages, current_page];

                // Next/Prev control
                element.find('.video-control .video-control-item').off().on('click', function() {
                    // Check if already click or loading
                    if ( $(this).hasClass('disable') || element.find('.video-ajax-content').hasClass('loading') ) {
                        return;
                    }

                    var category        = $(this).attr('data-category');
                    var max_pages       = parseInt($(this).attr('data-max_pages'));
                    var action          = $(this).attr('data-action');

                    if ( action == 'next' ) {
                        var current_page    = parseInt($(this).attr('data-current_page'));

                        if ( (current_page + 1) <= max_pages ) {
                            // Check cache
                            var tab_data_index = element_id + '-' + category.toString().split(',').join('-') + '-page-' + ( current_page + 1 );
                            var tab_control_index = element_id + '-' + category.toString().split(',').join('-');

                            if ( video_category_single_data[tab_data_index] != undefined ) {
                                element.find('.video-category-single-content').remove();
                                element.find('.video-ajax-content').append( video_category_single_data[tab_data_index] );
                                
                                // Do something
                                element.find('.video-control .video-control-item').attr('data-current_page', current_page + 1);
                                video_category_single_control[tab_control_index] = [category, max_pages, current_page + 1];
                                // Check last page
                                element.find('.video-control .video-control-item[data-action="prev"]').removeClass('disable');
                                if ( current_page + 1 >= max_pages ) {
                                    element.find('.video-control .video-control-item[data-action="next"]').addClass('disable');
                                }

                                return;
                            }
                        
                            // Load content via ajax
                            element.find('.video-ajax-content').addClass('loading');

                            $.ajax({
                                type : "POST",
                                timeout : 30000,
                                url : haru_filmmaker_ajax_url,
                                data : {
                                    action: 'haru_get_video_category_single_next', 
                                    atts: atts, 
                                    category: category,
                                    current_page: current_page
                                },
                                error: function(xhr,err) {
                                    console.log('Have something wrong! Please try again!');
                                },
                                success: function(response) {
                                    if ( response ) {
                                        element.find('.video-category-single-content').remove();
                                        element.find('.video-ajax-content').append( response );       

                                        // Save cache
                                        video_category_single_data[tab_data_index] = response;
                                        video_category_single_control[tab_control_index] = [category, max_pages, current_page + 1];
                                    }
                                    // Do something
                                    element.find('.video-control .video-control-item').attr('data-current_page', current_page + 1);
                                    element.find('.video-ajax-content').removeClass('loading');
                                    // Check last page
                                    element.find('.video-control .video-control-item[data-action="prev"]').removeClass('disable');
                                    if ( current_page + 1 >= max_pages ) {
                                        element.find('.video-control .video-control-item[data-action="next"]').addClass('disable');
                                    }

                                    HaruFilmmaker.video.init();
                                }
                            });
                        } else {
                            return;
                        }
                    } else if ( action == 'prev' ) {
                        var current_page    = parseInt($(this).attr('data-current_page'));

                        if ( current_page == 1 ) {
                            return;
                        }

                        // Check cache
                        var tab_data_index = element_id + '-' + category.toString().split(',').join('-') + '-page-' + ( current_page - 1 );
                        var tab_control_index = element_id + '-' + category.toString().split(',').join('-');

                        if ( video_category_single_data[tab_data_index] != undefined ) {
                            element.find('.video-category-single-content').remove();
                            element.find('.video-ajax-content').append( video_category_single_data[tab_data_index] );
                            
                            // Do something
                            element.find('.video-control .video-control-item').attr('data-current_page', current_page - 1);
                            video_category_single_control[tab_control_index] = [category, max_pages, current_page - 1];
                        }

                        // Check first page
                        element.find('.video-control .video-control-item[data-action="next"]').removeClass('disable');
                        if ( current_page - 1 <= 1 ) {
                            element.find('.video-control .video-control-item[data-action="prev"]').addClass('disable');
                        }
                    }
                });
            });
        },
        shortcodeVideoFeatured: function() {
            var video_featured_data = []; // Use this for video featured shortcode
            var video_featured_control = [];

            $('.haru-video-featured').each(function() {
                var element         = $(this);
                var element_id      = element.attr('id');
                var settings        = element.data('settings');


                if ( settings['video_filter'] != 'hide' ) {
                    var category        = element.find('.video-filter .filter-item:first').attr('data-category');
                    var max_pages       = parseInt(element.find('.video-control-item').attr('data-max_pages'));
                    var current_page    = parseInt(element.find('.video-control-item').attr('data-current_page'));

                    // Save first load to cache
                    var tab_data_index = element_id + '-' + category.toString().split(',').join('-') + '-page-1';
                    var tab_control_index = element_id + '-' + category.toString().split(',').join('-');

                    video_featured_data[tab_data_index] = element.find('.video-featured-content').clone(true);
                    video_featured_control[tab_control_index] = [category, max_pages, current_page];

                    element.find('.video-filter .filter-item').off().on('click', function() {
                        // Check if already click or loading
                        if ( $(this).hasClass('active') || element.find('.video-ajax-content').hasClass('loading') ) {
                            return;
                        }

                        element.find('.video-filter .filter-item').removeClass('active');
                        $(this).addClass('active');

                        // Check cache
                        var category            = $(this).data('category');
                        var tab_control_index   = element_id + '-' + category.toString().split(',').join('-');

                        if ( video_featured_control[tab_control_index] != undefined ) {
                            element.find('.video-featured-content').remove();

                            var tab_data_index = element_id + '-' + category.toString().split(',').join('-') + '-page-' + video_featured_control[tab_control_index][2].toString();

                            element.find('.video-ajax-content').append( video_featured_data[tab_data_index] );
                            element.find('.video-control .video-control-item').attr('data-category', video_featured_control[tab_control_index][0]);
                            element.find('.video-control .video-control-item').attr('data-max_pages', video_featured_control[tab_control_index][1]);
                            element.find('.video-control .video-control-item').attr('data-current_page', video_featured_control[tab_control_index][2]);
                            // Check show/hide control
                            if ( video_featured_control[tab_control_index][1] <= 1 ) {
                                element.find('.video-control').addClass('hide');
                            } else {
                                element.find('.video-control').removeClass('hide');
                            }
                            // Check last page, first page
                            if ( video_featured_control[tab_control_index][2] == video_featured_control[tab_control_index][1] ) {
                                element.find('.video-control .video-control-item[data-action="prev"]').removeClass('disable');
                                element.find('.video-control .video-control-item[data-action="next"]').addClass('disable');
                            } else if ( video_featured_control[tab_control_index][2] == 1 ) {
                                element.find('.video-control .video-control-item[data-action="prev"]').addClass('disable');
                                element.find('.video-control .video-control-item[data-action="next"]').removeClass('disable');
                            } else {
                                element.find('.video-control .video-control-item[data-action="prev"]').removeClass('disable');
                                element.find('.video-control .video-control-item[data-action="next"]').removeClass('disable');
                            }

                            return;
                        }

                        // Load content via ajax
                        element.find('.video-ajax-content').addClass('loading');

                        $.ajax({
                            type : "POST",
                            timeout : 30000,
                            url : haru_filmmaker_ajax_url,
                            data : {
                                action: 'haru_get_video_featured', 
                                settings: settings, 
                                category: category
                            },
                            error: function(xhr,err) {
                                console.log('Have something wrong! Please try again!');
                            },
                            success: function(response) {
                                if ( response ) {
                                    console.log(response);
                                    element.find('.video-featured-content').remove();
                                    element.find('.video-ajax-content').append( response );       

                                    // Save cache
                                    var tab_data_index = element_id + '-' + category.toString().split(',').join('-') + '-page-1';
                                    video_featured_data[tab_data_index] = response;

                                    // Do something
                                    var max_pages = parseInt(element.find('.video-featured-content').attr('data-max_pages'));
                                    video_featured_control[tab_control_index] = [category, max_pages, 1];
                                    // Check show/hide control
                                    if ( max_pages <= 1 ) {
                                        // Do something
                                        element.find('.video-control').addClass('hide');
                                    } else {
                                        element.find('.video-control').removeClass('hide');
                                    }
                                    // Set new value for control
                                    element.find('.video-control .video-control-item').attr('data-category', category);
                                    element.find('.video-control .video-control-item').attr('data-max_pages', max_pages);
                                    element.find('.video-control .video-control-item').attr('data-current_page', 1);
                                    // Check last page, first page
                                    element.find('.video-control .video-control-item[data-action="prev"]').addClass('disable');
                                    element.find('.video-control .video-control-item[data-action="next"]').removeClass('disable');
                                }
                                element.find('.video-ajax-content').removeClass('loading');

                                HaruFilmmaker.video.init();
                            }
                        });
                    });
                } else {
                    var category        = element.find('.video-control-item').attr('data-category');
                    var max_pages       = parseInt(element.find('.video-control-item').attr('data-max_pages'));
                    var current_page    = parseInt(element.find('.video-control-item').attr('data-current_page'));

                    // Save first load to cache
                    var tab_data_index = element_id + '-' + category.toString().split(',').join('-') + '-page-1';
                    var tab_control_index = element_id + '-' + category.toString().split(',').join('-');

                    video_featured_data[tab_data_index] = element.find('.video-featured-content').clone(true);
                    video_featured_control[tab_control_index] = [category, max_pages, current_page];
                }

                // Next/Prev control
                element.find('.video-control .video-control-item').off().on('click', function() {
                    // Check if already click or loading
                    if ( $(this).hasClass('disable') || element.find('.video-ajax-content').hasClass('loading') ) {
                        return;
                    }

                    var category        = $(this).attr('data-category');
                    var max_pages       = parseInt($(this).attr('data-max_pages'));
                    var action          = $(this).attr('data-action');

                    if ( action == 'next' ) {
                        var current_page    = parseInt($(this).attr('data-current_page'));

                        if ( (current_page + 1) <= max_pages ) {
                            // Check cache
                            var tab_data_index = element_id + '-' + category.toString().split(',').join('-') + '-page-' + ( current_page + 1 );
                            var tab_control_index = element_id + '-' + category.toString().split(',').join('-');

                            if ( video_featured_data[tab_data_index] != undefined ) {
                                element.find('.video-featured-content').remove();
                                element.find('.video-ajax-content').append( video_featured_data[tab_data_index] );
                                
                                // Do something
                                element.find('.video-control .video-control-item').attr('data-current_page', current_page + 1);
                                video_featured_control[tab_control_index] = [category, max_pages, current_page + 1];
                                // Check last page
                                element.find('.video-control .video-control-item[data-action="prev"]').removeClass('disable');
                                if ( current_page + 1 >= max_pages ) {
                                    element.find('.video-control .video-control-item[data-action="next"]').addClass('disable');
                                }

                                return;
                            }
                        
                            // Load content via ajax
                            element.find('.video-ajax-content').addClass('loading');

                            $.ajax({
                                type : "POST",
                                timeout : 30000,
                                url : haru_filmmaker_ajax_url,
                                data : {
                                    action: 'haru_get_video_featured_next', 
                                    settings: settings, 
                                    category: category,
                                    current_page: current_page
                                },
                                error: function(xhr,err) {
                                    console.log('Have something wrong! Please try again!');
                                },
                                success: function(response) {
                                    if ( response ) {
                                        element.find('.video-featured-content').remove();
                                        element.find('.video-ajax-content').append( response );       

                                        // Save cache
                                        video_featured_data[tab_data_index] = response;
                                        video_featured_control[tab_control_index] = [category, max_pages, current_page + 1];
                                    }
                                    // Do something
                                    element.find('.video-control .video-control-item').attr('data-current_page', current_page + 1);
                                    element.find('.video-ajax-content').removeClass('loading');
                                    // Check last page
                                    element.find('.video-control .video-control-item[data-action="prev"]').removeClass('disable');
                                    if ( current_page + 1 >= max_pages ) {
                                        element.find('.video-control .video-control-item[data-action="next"]').addClass('disable');
                                    }

                                    HaruFilmmaker.video.init();
                                }
                            });
                        } else {
                            return;
                        }
                    } else if ( action == 'prev' ) {
                        var current_page    = parseInt($(this).attr('data-current_page'));

                        if ( current_page == 1 ) {
                            return;
                        }

                        // Check cache
                        var tab_data_index = element_id + '-' + category.toString().split(',').join('-') + '-page-' + ( current_page - 1 );
                        var tab_control_index = element_id + '-' + category.toString().split(',').join('-');

                        if ( video_featured_data[tab_data_index] != undefined ) {
                            element.find('.video-featured-content').remove();
                            element.find('.video-ajax-content').append( video_featured_data[tab_data_index] );
                            
                            // Do something
                            element.find('.video-control .video-control-item').attr('data-current_page', current_page - 1);
                            video_featured_control[tab_control_index] = [category, max_pages, current_page - 1];
                        }

                        // Check first page
                        element.find('.video-control .video-control-item[data-action="next"]').removeClass('disable');
                        if ( current_page - 1 <= 1 ) {
                            element.find('.video-control .video-control-item[data-action="prev"]').addClass('disable');
                        }
                    }
                });
            });
        },
        shortcodeVideoCreative: function() {
            var video_creative_data = []; // Use this for video creative shortcode
            var video_creative_control = [];

            $('.haru-video-creative').each(function() {
                var element         = $(this);
                var element_id      = element.attr('id');
                var settings        = element.data('settings');


                if ( settings['video_filter'] != 'hide' ) {
                    var category        = element.find('.video-filter .filter-item:first').attr('data-category');
                    var max_pages       = parseInt(element.find('.video-control-item').attr('data-max_pages'));
                    var current_page    = parseInt(element.find('.video-control-item').attr('data-current_page'));

                    // Save first load to cache
                    var tab_data_index = element_id + '-' + category.toString().split(',').join('-') + '-page-1';
                    var tab_control_index = element_id + '-' + category.toString().split(',').join('-');

                    video_creative_data[tab_data_index] = element.find('.video-creative-content').clone(true);
                    video_creative_control[tab_control_index] = [category, max_pages, current_page];

                    element.find('.video-filter .filter-item').off().on('click', function() {
                        // Check if already click or loading
                        if ( $(this).hasClass('active') || element.find('.video-ajax-content').hasClass('loading') ) {
                            return;
                        }

                        element.find('.video-filter .filter-item').removeClass('active');
                        $(this).addClass('active');

                        // Check cache
                        var category            = $(this).data('category');
                        var tab_control_index   = element_id + '-' + category.toString().split(',').join('-');

                        if ( video_creative_control[tab_control_index] != undefined ) {
                            element.find('.video-creative-content').remove();

                            var tab_data_index = element_id + '-' + category.toString().split(',').join('-') + '-page-' + video_creative_control[tab_control_index][2].toString();

                            element.find('.video-ajax-content').append( video_creative_data[tab_data_index] );
                            element.find('.video-control .video-control-item').attr('data-category', video_creative_control[tab_control_index][0]);
                            element.find('.video-control .video-control-item').attr('data-max_pages', video_creative_control[tab_control_index][1]);
                            element.find('.video-control .video-control-item').attr('data-current_page', video_creative_control[tab_control_index][2]);
                            // Check show/hide control
                            if ( video_creative_control[tab_control_index][1] <= 1 ) {
                                element.find('.video-control').addClass('hide');
                            } else {
                                element.find('.video-control').removeClass('hide');
                            }
                            // Check last page, first page
                            if ( video_creative_control[tab_control_index][2] == video_creative_control[tab_control_index][1] ) {
                                element.find('.video-control .video-control-item[data-action="prev"]').removeClass('disable');
                                element.find('.video-control .video-control-item[data-action="next"]').addClass('disable');
                            } else if ( video_creative_control[tab_control_index][2] == 1 ) {
                                element.find('.video-control .video-control-item[data-action="prev"]').addClass('disable');
                                element.find('.video-control .video-control-item[data-action="next"]').removeClass('disable');
                            } else {
                                element.find('.video-control .video-control-item[data-action="prev"]').removeClass('disable');
                                element.find('.video-control .video-control-item[data-action="next"]').removeClass('disable');
                            }

                            return;
                        }

                        // Load content via ajax
                        element.find('.video-ajax-content').addClass('loading');

                        $.ajax({
                            type : "POST",
                            timeout : 30000,
                            url : haru_filmmaker_ajax_url,
                            data : {
                                action: 'haru_get_video_creative', 
                                settings: settings, 
                                category: category
                            },
                            error: function(xhr,err) {
                                console.log('Have something wrong! Please try again!');
                            },
                            success: function(response) {
                                if ( response ) {
                                    element.find('.video-creative-content').remove();
                                    element.find('.video-ajax-content').append( response );       

                                    // Save cache
                                    var tab_data_index = element_id + '-' + category.toString().split(',').join('-') + '-page-1';
                                    video_creative_data[tab_data_index] = response;

                                    // Do something
                                    var max_pages = parseInt(element.find('.video-creative-content').attr('data-max_pages'));
                                    video_creative_control[tab_control_index] = [category, max_pages, 1];
                                    // Check show/hide control
                                    if ( max_pages <= 1 ) {
                                        // Do something
                                        element.find('.video-control').addClass('hide');
                                    } else {
                                        element.find('.video-control').removeClass('hide');
                                    }
                                    // Set new value for control
                                    element.find('.video-control .video-control-item').attr('data-category', category);
                                    element.find('.video-control .video-control-item').attr('data-max_pages', max_pages);
                                    element.find('.video-control .video-control-item').attr('data-current_page', 1);
                                    // Check last page, first page
                                    element.find('.video-control .video-control-item[data-action="prev"]').addClass('disable');
                                    element.find('.video-control .video-control-item[data-action="next"]').removeClass('disable');
                                }
                                element.find('.video-ajax-content').removeClass('loading');

                                HaruFilmmaker.video.init();
                            }
                        });
                    });
                } else {
                    var category        = element.find('.video-control-item').attr('data-category');
                    var max_pages       = parseInt(element.find('.video-control-item').attr('data-max_pages'));
                    var current_page    = parseInt(element.find('.video-control-item').attr('data-current_page'));

                    // Save first load to cache
                    var tab_data_index = element_id + '-' + category.toString().split(',').join('-') + '-page-1';
                    var tab_control_index = element_id + '-' + category.toString().split(',').join('-');

                    video_creative_data[tab_data_index] = element.find('.video-creative-content').clone(true);
                    video_creative_control[tab_control_index] = [category, max_pages, current_page];
                }

                // Next/Prev control
                element.find('.video-control .video-control-item').off().on('click', function() {
                    // Check if already click or loading
                    if ( $(this).hasClass('disable') || element.find('.video-ajax-content').hasClass('loading') ) {
                        return;
                    }

                    var category        = $(this).attr('data-category');
                    var max_pages       = parseInt($(this).attr('data-max_pages'));
                    var action          = $(this).attr('data-action');

                    if ( action == 'next' ) {
                        var current_page    = parseInt($(this).attr('data-current_page'));

                        if ( (current_page + 1) <= max_pages ) {
                            // Check cache
                            var tab_data_index = element_id + '-' + category.toString().split(',').join('-') + '-page-' + ( current_page + 1 );
                            var tab_control_index = element_id + '-' + category.toString().split(',').join('-');

                            if ( video_creative_data[tab_data_index] != undefined ) {
                                element.find('.video-creative-content').remove();
                                element.find('.video-ajax-content').append( video_creative_data[tab_data_index] );
                                
                                // Do something
                                element.find('.video-control .video-control-item').attr('data-current_page', current_page + 1);
                                video_creative_control[tab_control_index] = [category, max_pages, current_page + 1];
                                // Check last page
                                element.find('.video-control .video-control-item[data-action="prev"]').removeClass('disable');
                                if ( current_page + 1 >= max_pages ) {
                                    element.find('.video-control .video-control-item[data-action="next"]').addClass('disable');
                                }

                                return;
                            }
                        
                            // Load content via ajax
                            element.find('.video-ajax-content').addClass('loading');

                            $.ajax({
                                type : "POST",
                                timeout : 30000,
                                url : haru_filmmaker_ajax_url,
                                data : {
                                    action: 'haru_get_video_creative_next', 
                                    settings: settings, 
                                    category: category,
                                    current_page: current_page
                                },
                                error: function(xhr,err) {
                                    console.log('Have something wrong! Please try again!');
                                },
                                success: function(response) {
                                    if ( response ) {
                                        element.find('.video-creative-content').remove();
                                        element.find('.video-ajax-content').append( response );       

                                        // Save cache
                                        video_creative_data[tab_data_index] = response;
                                        video_creative_control[tab_control_index] = [category, max_pages, current_page + 1];
                                    }
                                    // Do something
                                    element.find('.video-control .video-control-item').attr('data-current_page', current_page + 1);
                                    element.find('.video-ajax-content').removeClass('loading');
                                    // Check last page
                                    element.find('.video-control .video-control-item[data-action="prev"]').removeClass('disable');
                                    if ( current_page + 1 >= max_pages ) {
                                        element.find('.video-control .video-control-item[data-action="next"]').addClass('disable');
                                    }

                                    HaruFilmmaker.video.init();
                                }
                            });
                        } else {
                            return;
                        }
                    } else if ( action == 'prev' ) {
                        var current_page    = parseInt($(this).attr('data-current_page'));

                        if ( current_page == 1 ) {
                            return;
                        }

                        // Check cache
                        var tab_data_index = element_id + '-' + category.toString().split(',').join('-') + '-page-' + ( current_page - 1 );
                        var tab_control_index = element_id + '-' + category.toString().split(',').join('-');

                        if ( video_creative_data[tab_data_index] != undefined ) {
                            element.find('.video-creative-content').remove();
                            element.find('.video-ajax-content').append( video_creative_data[tab_data_index] );
                            
                            // Do something
                            element.find('.video-control .video-control-item').attr('data-current_page', current_page - 1);
                            video_creative_control[tab_control_index] = [category, max_pages, current_page - 1];
                        }

                        // Check first page
                        element.find('.video-control .video-control-item[data-action="next"]').removeClass('disable');
                        if ( current_page - 1 <= 1 ) {
                            element.find('.video-control .video-control-item[data-action="prev"]').addClass('disable');
                        }
                    }
                });
            });
        },
        shortcodeVideoOrder: function() {
            var video_order_data = []; // Use this for video order shortcode
            var video_order_control = [];

            $('.video-order-shortcode').each(function() {
                var element         = $(this);
                var element_id      = element.attr('id');
                var atts            = element.data('atts');

                // Have Video filter
                var video_order     = element.find('.video-filter .filter-item:first').attr('data-video_order');
                var max_pages       = parseInt(element.find('.video-control-item').attr('data-max_pages'));
                var current_page    = parseInt(element.find('.video-control-item').attr('data-current_page'));

                // Save first load to cache
                var tab_data_index = element_id + '-' + video_order.toString().split(',').join('-') + '-page-1';
                var tab_control_index = element_id + '-' + video_order.toString().split(',').join('-');

                video_order_data[tab_data_index] = element.find('.video-order-content').clone(true);
                video_order_control[tab_control_index] = [video_order, max_pages, current_page];

                element.find('.video-filter .filter-item').off().on('click', function() {
                    // Check if already click or loading
                    if ( $(this).hasClass('active') || element.find('.video-ajax-content').hasClass('loading') ) {
                        return;
                    }

                    element.find('.video-filter .filter-item').removeClass('active');
                    $(this).addClass('active');

                    // Check cache
                    var video_order            = $(this).data('video_order');
                    var tab_control_index   = element_id + '-' + video_order.toString().split(',').join('-');

                    if ( video_order_control[tab_control_index] != undefined ) {
                        element.find('.video-order-content').remove();

                        var tab_data_index = element_id + '-' + video_order.toString().split(',').join('-') + '-page-' + video_order_control[tab_control_index][2].toString();

                        element.find('.video-ajax-content').append( video_order_data[tab_data_index] );
                        element.find('.video-control .video-control-item').attr('data-video_order', video_order_control[tab_control_index][0]);
                        element.find('.video-control .video-control-item').attr('data-max_pages', video_order_control[tab_control_index][1]);
                        element.find('.video-control .video-control-item').attr('data-current_page', video_order_control[tab_control_index][2]);
                        // Check show/hide control
                        if ( video_order_control[tab_control_index][1] <= 1 ) {
                            element.find('.video-control').addClass('hide');
                        } else {
                            element.find('.video-control').removeClass('hide');
                        }
                        // Check last page, first page
                        if ( video_order_control[tab_control_index][2] == video_order_control[tab_control_index][1] ) {
                            element.find('.video-control .video-control-item[data-action="prev"]').removeClass('disable');
                            element.find('.video-control .video-control-item[data-action="next"]').addClass('disable');
                        } else if ( video_order_control[tab_control_index][2] == 1 ) {
                            element.find('.video-control .video-control-item[data-action="prev"]').addClass('disable');
                            element.find('.video-control .video-control-item[data-action="next"]').removeClass('disable');
                        } else {
                            element.find('.video-control .video-control-item[data-action="prev"]').removeClass('disable');
                            element.find('.video-control .video-control-item[data-action="next"]').removeClass('disable');
                        }

                        return;
                    }

                    // Load content via ajax
                    element.find('.video-ajax-content').addClass('loading');

                    $.ajax({
                        type : "POST",
                        timeout : 30000,
                        url : haru_filmmaker_ajax_url,
                        data : {
                            action: 'haru_get_video_order', 
                            atts: atts, 
                            video_order: video_order
                        },
                        error: function(xhr,err) {
                            console.log('Have something wrong! Please try again!');
                        },
                        success: function(response) {
                            if ( response ) {
                                element.find('.video-order-content').remove();
                                element.find('.video-ajax-content').append( response );       

                                // Save cache
                                var tab_data_index      = element_id + '-' + video_order.toString().split(',').join('-') + '-page-1';
                                video_order_data[tab_data_index] = response;

                                // Do something
                                var max_pages = parseInt(element.find('.video-order-content').attr('data-max_pages'));
                                video_order_control[tab_control_index] = [video_order, max_pages, 1];
                                // Check show/hide control
                                if ( max_pages <= 1 ) {
                                    // Do something
                                    element.find('.video-control').addClass('hide');
                                } else {
                                    element.find('.video-control').removeClass('hide');
                                }
                                // Set new value for control
                                element.find('.video-control .video-control-item').attr('data-video_order', video_order);
                                element.find('.video-control .video-control-item').attr('data-max_pages', max_pages);
                                element.find('.video-control .video-control-item').attr('data-current_page', 1);
                                // Check last page, first page
                                element.find('.video-control .video-control-item[data-action="prev"]').addClass('disable');
                                element.find('.video-control .video-control-item[data-action="next"]').removeClass('disable');
                            }
                            element.find('.video-ajax-content').removeClass('loading');

                            HaruFilmmaker.video.init();
                        }
                    });
                });

                // Next/Prev control
                element.find('.video-control .video-control-item').off().on('click', function() {
                    // Check if already click or loading
                    if ( $(this).hasClass('disable') || element.find('.video-ajax-content').hasClass('loading') ) {
                        return;
                    }

                    var video_order        = $(this).attr('data-video_order');
                    var max_pages       = parseInt($(this).attr('data-max_pages'));
                    var action          = $(this).attr('data-action');

                    if ( action == 'next' ) {
                        var current_page    = parseInt($(this).attr('data-current_page'));

                        if ( (current_page + 1) <= max_pages ) {
                            // Check cache
                            var tab_data_index = element_id + '-' + video_order.toString().split(',').join('-') + '-page-' + ( current_page + 1 );
                            var tab_control_index = element_id + '-' + video_order.toString().split(',').join('-');

                            if ( video_order_data[tab_data_index] != undefined ) {
                                element.find('.video-order-content').remove();
                                element.find('.video-ajax-content').append( video_order_data[tab_data_index] );
                                
                                // Do something
                                element.find('.video-control .video-control-item').attr('data-current_page', current_page + 1);
                                video_order_control[tab_control_index] = [video_order, max_pages, current_page + 1];
                                // Check last page
                                element.find('.video-control .video-control-item[data-action="prev"]').removeClass('disable');
                                if ( current_page + 1 >= max_pages ) {
                                    element.find('.video-control .video-control-item[data-action="next"]').addClass('disable');
                                }

                                return;
                            }
                        
                            // Load content via ajax
                            element.find('.video-ajax-content').addClass('loading');

                            $.ajax({
                                type : "POST",
                                timeout : 30000,
                                url : haru_filmmaker_ajax_url,
                                data : {
                                    action: 'haru_get_video_order_next', 
                                    atts: atts, 
                                    video_order: video_order,
                                    current_page: current_page
                                },
                                error: function(xhr,err) {
                                    console.log('Have something wrong! Please try again!');
                                },
                                success: function(response) {
                                    if ( response ) {
                                        element.find('.video-order-content').remove();
                                        element.find('.video-ajax-content').append( response );       

                                        // Save cache
                                        video_order_data[tab_data_index] = response;
                                        video_order_control[tab_control_index] = [video_order, max_pages, current_page + 1];
                                    }
                                    // Do something
                                    element.find('.video-control .video-control-item').attr('data-current_page', current_page + 1);
                                    element.find('.video-ajax-content').removeClass('loading');
                                    // Check last page
                                    element.find('.video-control .video-control-item[data-action="prev"]').removeClass('disable');
                                    if ( current_page + 1 >= max_pages ) {
                                        element.find('.video-control .video-control-item[data-action="next"]').addClass('disable');
                                    }

                                    HaruFilmmaker.video.init();
                                }
                            });
                        } else {
                            return;
                        }
                    } else if ( action == 'prev' ) {
                        var current_page    = parseInt($(this).attr('data-current_page'));

                        if ( current_page == 1 ) {
                            return;
                        }

                        // Check cache
                        var tab_data_index = element_id + '-' + video_order.toString().split(',').join('-') + '-page-' + ( current_page - 1 );
                        var tab_control_index = element_id + '-' + video_order.toString().split(',').join('-');

                        if ( video_order_data[tab_data_index] != undefined ) {
                            element.find('.video-order-content').remove();
                            element.find('.video-ajax-content').append( video_order_data[tab_data_index] );
                            
                            // Do something
                            element.find('.video-control .video-control-item').attr('data-current_page', current_page - 1);
                            video_order_control[tab_control_index] = [video_order, max_pages, current_page - 1];
                        }

                        // Check first page
                        element.find('.video-control .video-control-item[data-action="next"]').removeClass('disable');
                        if ( current_page - 1 <= 1 ) {
                            element.find('.video-control .video-control-item[data-action="prev"]').addClass('disable');
                        }
                    }
                });
            });
        },
        shortcodeVideoOrderSingle: function() {
            var video_order_single_data = []; // Use this for video order shortcode
            var video_order_single_control = [];

            $('.video-order-single-shortcode').each(function() {
                var element         = $(this);
                var element_id      = element.attr('id');
                var atts            = element.data('atts');

                // Have Video filter
                var video_order     = element.find('.video-filter .filter-item:first').attr('data-video_order');
                var max_pages       = parseInt(element.find('.video-control-item').attr('data-max_pages'));
                var current_page    = parseInt(element.find('.video-control-item').attr('data-current_page'));

                // Save first load to cache
                var tab_data_index = element_id + '-' + video_order.toString().split(',').join('-') + '-page-1';
                var tab_control_index = element_id + '-' + video_order.toString().split(',').join('-');

                video_order_single_data[tab_data_index] = element.find('.video-order-single-content').clone(true);
                video_order_single_control[tab_control_index] = [video_order, max_pages, current_page];

                // Next/Prev control
                element.find('.video-control .video-control-item').off().on('click', function() {
                    // Check if already click or loading
                    if ( $(this).hasClass('disable') || element.find('.video-ajax-content').hasClass('loading') ) {
                        return;
                    }

                    var video_order        = $(this).attr('data-video_order');
                    var max_pages       = parseInt($(this).attr('data-max_pages'));
                    var action          = $(this).attr('data-action');

                    if ( action == 'next' ) {
                        var current_page    = parseInt($(this).attr('data-current_page'));

                        if ( (current_page + 1) <= max_pages ) {
                            // Check cache
                            var tab_data_index = element_id + '-' + video_order.toString().split(',').join('-') + '-page-' + ( current_page + 1 );
                            var tab_control_index = element_id + '-' + video_order.toString().split(',').join('-');

                            if ( video_order_single_data[tab_data_index] != undefined ) {
                                element.find('.video-order-single-content').remove();
                                element.find('.video-ajax-content').append( video_order_single_data[tab_data_index] );
                                
                                // Do something
                                element.find('.video-control .video-control-item').attr('data-current_page', current_page + 1);
                                video_order_single_control[tab_control_index] = [video_order, max_pages, current_page + 1];
                                // Check last page
                                element.find('.video-control .video-control-item[data-action="prev"]').removeClass('disable');
                                if ( current_page + 1 >= max_pages ) {
                                    element.find('.video-control .video-control-item[data-action="next"]').addClass('disable');
                                }

                                return;
                            }
                        
                            // Load content via ajax
                            element.find('.video-ajax-content').addClass('loading');

                            $.ajax({
                                type : "POST",
                                timeout : 30000,
                                url : haru_filmmaker_ajax_url,
                                data : {
                                    action: 'haru_get_video_order_single_next', 
                                    atts: atts, 
                                    video_order: video_order,
                                    current_page: current_page
                                },
                                error: function(xhr,err) {
                                    console.log('Have something wrong! Please try again!');
                                },
                                success: function(response) {
                                    if ( response ) {
                                        element.find('.video-order-single-content').remove();
                                        element.find('.video-ajax-content').append( response );       

                                        // Save cache
                                        video_order_single_data[tab_data_index] = response;
                                        video_order_single_control[tab_control_index] = [video_order, max_pages, current_page + 1];
                                    }
                                    // Do something
                                    element.find('.video-control .video-control-item').attr('data-current_page', current_page + 1);
                                    element.find('.video-ajax-content').removeClass('loading');
                                    // Check last page
                                    element.find('.video-control .video-control-item[data-action="prev"]').removeClass('disable');
                                    if ( current_page + 1 >= max_pages ) {
                                        element.find('.video-control .video-control-item[data-action="next"]').addClass('disable');
                                    }

                                    HaruFilmmaker.video.init();
                                }
                            });
                        } else {
                            return;
                        }
                    } else if ( action == 'prev' ) {
                        var current_page    = parseInt($(this).attr('data-current_page'));

                        if ( current_page == 1 ) {
                            return;
                        }

                        // Check cache
                        var tab_data_index = element_id + '-' + video_order.toString().split(',').join('-') + '-page-' + ( current_page - 1 );
                        var tab_control_index = element_id + '-' + video_order.toString().split(',').join('-');

                        if ( video_order_single_data[tab_data_index] != undefined ) {
                            element.find('.video-order-single-content').remove();
                            element.find('.video-ajax-content').append( video_order_single_data[tab_data_index] );
                            
                            // Do something
                            element.find('.video-control .video-control-item').attr('data-current_page', current_page - 1);
                            video_order_single_control[tab_control_index] = [video_order, max_pages, current_page - 1];
                        }

                        // Check first page
                        element.find('.video-control .video-control-item[data-action="next"]').removeClass('disable');
                        if ( current_page - 1 <= 1 ) {
                            element.find('.video-control .video-control-item[data-action="prev"]').addClass('disable');
                        }
                    }
                });
            });
        },
        shortcodeVideoTop: function() {
            var video_top_data = []; // Use this for video top shortcode
            var video_top_control = [];

            $('.video-top-shortcode').each(function() {
                var element         = $(this);
                var element_id      = element.attr('id');
                var atts            = element.data('atts');

                // Have Video filter
                var video_order_by  = element.attr('data-video_order_by'); // Different if have tab
                var max_pages       = parseInt(element.find('.video-control-item').attr('data-max_pages'));
                var current_page    = parseInt(element.find('.video-control-item').attr('data-current_page'));

                // Save first load to cache
                var tab_data_index = element_id + '-' + video_order_by.toString().split(',').join('-') + '-page-1';
                var tab_control_index = element_id + '-' + video_order_by.toString().split(',').join('-');

                video_top_data[tab_data_index] = element.find('.video-top-content').clone(true);
                video_top_control[tab_control_index] = [video_order_by, max_pages, current_page];

                // Next/Prev control
                element.find('.video-control .video-control-item').off().on('click', function() {
                    // Check if already click or loading
                    if ( $(this).hasClass('disable') || element.find('.video-ajax-content').hasClass('loading') ) {
                        return;
                    }

                    var video_order_by  = $(this).attr('data-video_order_by');
                    var max_pages       = parseInt($(this).attr('data-max_pages'));
                    var action          = $(this).attr('data-action');

                    if ( action == 'next' ) {
                        var current_page    = parseInt($(this).attr('data-current_page'));

                        if ( (current_page + 1) <= max_pages ) {
                            // Check cache
                            var tab_data_index = element_id + '-' + video_order_by.toString().split(',').join('-') + '-page-' + ( current_page + 1 );
                            var tab_control_index = element_id + '-' + video_order_by.toString().split(',').join('-');

                            if ( video_top_data[tab_data_index] != undefined ) {
                                element.find('.video-top-content').remove();
                                element.find('.video-ajax-content').append( video_top_data[tab_data_index] );
                                
                                // Do something
                                element.find('.video-control .video-control-item').attr('data-current_page', current_page + 1);
                                video_top_control[tab_control_index] = [video_order_by, max_pages, current_page + 1];
                                // Check last page
                                element.find('.video-control .video-control-item[data-action="prev"]').removeClass('disable');
                                if ( current_page + 1 >= max_pages ) {
                                    element.find('.video-control .video-control-item[data-action="next"]').addClass('disable');
                                }

                                return;
                            }
                        
                            // Load content via ajax
                            element.find('.video-ajax-content').addClass('loading');

                            $.ajax({
                                type : "POST",
                                timeout : 30000,
                                url : haru_filmmaker_ajax_url,
                                data : {
                                    action: 'haru_get_video_top_next', 
                                    atts: atts, 
                                    video_order_by: video_order_by,
                                    current_page: current_page
                                },
                                error: function(xhr,err) {
                                    console.log('Have something wrong! Please try again!');
                                },
                                success: function(response) {
                                    if ( response ) {
                                        element.find('.video-top-content').remove();
                                        element.find('.video-ajax-content').append( response );       

                                        // Save cache
                                        video_top_data[tab_data_index] = response;
                                        video_top_control[tab_control_index] = [video_order_by, max_pages, current_page + 1];
                                    }
                                    // Do something
                                    element.find('.video-control .video-control-item').attr('data-current_page', current_page + 1);
                                    element.find('.video-ajax-content').removeClass('loading');
                                    // Check last page
                                    element.find('.video-control .video-control-item[data-action="prev"]').removeClass('disable');
                                    if ( current_page + 1 >= max_pages ) {
                                        element.find('.video-control .video-control-item[data-action="next"]').addClass('disable');
                                    }

                                    HaruFilmmaker.video.init();
                                }
                            });
                        } else {
                            return;
                        }
                    } else if ( action == 'prev' ) {
                        var current_page    = parseInt($(this).attr('data-current_page'));

                        if ( current_page == 1 ) {
                            return;
                        }

                        // Check cache
                        var tab_data_index = element_id + '-' + video_order_by.toString().split(',').join('-') + '-page-' + ( current_page - 1 );
                        var tab_control_index = element_id + '-' + video_order_by.toString().split(',').join('-');

                        if ( video_top_data[tab_data_index] != undefined ) {
                            element.find('.video-top-content').remove();
                            element.find('.video-ajax-content').append( video_top_data[tab_data_index] );
                            
                            // Do something
                            element.find('.video-control .video-control-item').attr('data-current_page', current_page - 1);
                            video_top_control[tab_control_index] = [video_order_by, max_pages, current_page - 1];
                        }

                        // Check first page
                        element.find('.video-control .video-control-item[data-action="next"]').removeClass('disable');
                        if ( current_page - 1 <= 1 ) {
                            element.find('.video-control .video-control-item[data-action="prev"]').addClass('disable');
                        }
                    }
                });
            });
        },
        shortcodeVideoSlideshow: function() {
            $('.haru-video-slideshow--slick').each(function(key,item) {
                var videoSlideshowIdName = 'videoSlideshow' + key;
                var videoSlideshowNavIdName = 'videoSlideshowNav' + key;

                $(this).find('.video-list')[key].id = videoSlideshowIdName;
                $(this).find('.video-list-nav')[key].id = videoSlideshowNavIdName;

                var videoSlideshowId = '#' + videoSlideshowIdName;
                var videoSlideshowNavId = '#' + videoSlideshowNavIdName;

                $(videoSlideshowId).slick({
                    vertical: true,
                    verticalSwiping: true,
                    asNavFor: videoSlideshowNavId,
                });

                $(videoSlideshowNavId).slick({
                    vertical: true,
                    verticalSwiping: true,
                    asNavFor: videoSlideshowId,
                });
            });

            $('.haru-video-slideshow--slick-2').each(function(key,item) {
                $(this).find('.haru-slick').slick();
            });

            $('.haru-video-slideshow--slick-3').each(function(key,item) {
                $(this).find('.haru-slick').slick();
            });
        },
        shortcodeVideoSearch: function() {
            $('.video-search-shortcode').each(function() {
                var search_sc = $(this);
                
                $(this).find('.video-search-button').on('click', function() {
                    var popup_effect    = $(this).data('effect');

                    $(this).magnificPopup({
                        items: {
                          src: search_sc.find('.video-search-popup'),
                          type: 'inline'
                        },
                        removalDelay: 500, //delay removal by X to allow out-animation
                        callbacks: {
                            beforeOpen: function() {
                                this.st.mainClass = popup_effect;
                            },
                            beforeClose: function() {
                            
                            },
                        }
                        // (optionally) other options
                    }).magnificPopup('open');
                });
            });
        },
        shortcodePersonCategory: function() {
            var person_category_data = []; // Use this for person category shortcode
            var person_category_control = [];

            $('.haru-person-category').each(function() {
                var element         = $(this);
                var element_id      = element.attr('id');
                var settings        = element.data('settings');

                if ( settings['person_filter'] != 'hide' ) {
                    var category        = element.find('.person-filter .filter-item:first').attr('data-category');
                    var max_pages       = parseInt(element.find('.person-control-item').attr('data-max_pages'));
                    var current_page    = parseInt(element.find('.person-control-item').attr('data-current_page'));

                    // Save first load to cache
                    var tab_data_index = element_id + '-' + category.toString().split(',').join('-') + '-page-1';
                    var tab_control_index = element_id + '-' + category.toString().split(',').join('-');

                    person_category_data[tab_data_index] = element.find('.person-category-content').clone(true);
                    person_category_control[tab_control_index] = [category, max_pages, current_page];

                    element.find('.person-filter .filter-item').off().on('click', function() {
                        // Check if already click or loading
                        if ( $(this).hasClass('active') || element.find('.person-ajax-content').hasClass('loading') ) {
                            return;
                        }

                        element.find('.person-filter .filter-item').removeClass('active');
                        $(this).addClass('active');

                        // Check cache
                        var category            = $(this).data('category');
                        var tab_control_index   = element_id + '-' + category.toString().split(',').join('-');

                        if ( person_category_control[tab_control_index] != undefined ) {
                            element.find('.person-category-content').remove();

                            var tab_data_index = element_id + '-' + category.toString().split(',').join('-') + '-page-' + person_category_control[tab_control_index][2].toString();

                            element.find('.person-ajax-content').append( person_category_data[tab_data_index] );
                            element.find('.person-control .person-control-item').attr('data-category', person_category_control[tab_control_index][0]);
                            element.find('.person-control .person-control-item').attr('data-max_pages', person_category_control[tab_control_index][1]);
                            element.find('.person-control .person-control-item').attr('data-current_page', person_category_control[tab_control_index][2]);
                            // Check show/hide control
                            if ( person_category_control[tab_control_index][1] <= 1 ) {
                                element.find('.person-control').addClass('hide');
                            } else {
                                element.find('.person-control').removeClass('hide');
                            }
                            // Check last page, first page
                            if ( person_category_control[tab_control_index][2] == person_category_control[tab_control_index][1] ) {
                                element.find('.person-control .person-control-item[data-action="prev"]').removeClass('disable');
                                element.find('.person-control .person-control-item[data-action="next"]').addClass('disable');
                            } else if ( person_category_control[tab_control_index][2] == 1 ) {
                                element.find('.person-control .person-control-item[data-action="prev"]').addClass('disable');
                                element.find('.person-control .person-control-item[data-action="next"]').removeClass('disable');
                            } else {
                                element.find('.person-control .person-control-item[data-action="prev"]').removeClass('disable');
                                element.find('.person-control .person-control-item[data-action="next"]').removeClass('disable');
                            }

                            return;
                        }

                        // Load content via ajax
                        element.find('.person-ajax-content').addClass('loading');

                        $.ajax({
                            type : "POST",
                            timeout : 30000,
                            url : haru_filmmaker_ajax_url,
                            data : {
                                action: 'haru_get_person_category', 
                                settings: settings, 
                                category: category
                            },
                            error: function(xhr,err) {
                                console.log('Have something wrong! Please try again!');
                            },
                            success: function(response) {
                                if ( response ) {
                                    element.find('.person-category-content').remove();
                                    element.find('.person-ajax-content').append( response );       

                                    // Save cache
                                    var tab_data_index      = element_id + '-' + category.toString().split(',').join('-') + '-page-1';
                                    person_category_data[tab_data_index] = response;

                                    // Do something
                                    var max_pages = parseInt(element.find('.person-category-content').attr('data-max_pages'));
                                    person_category_control[tab_control_index] = [category, max_pages, 1];
                                    // Check show/hide control
                                    if ( max_pages <= 1 ) {
                                        // Do something
                                        element.find('.person-control').addClass('hide');
                                    } else {
                                        element.find('.person-control').removeClass('hide');
                                    }
                                    // Set new value for control
                                    element.find('.person-control .person-control-item').attr('data-category', category);
                                    element.find('.person-control .person-control-item').attr('data-max_pages', max_pages);
                                    element.find('.person-control .person-control-item').attr('data-current_page', 1);
                                    // Check last page, first page
                                    element.find('.person-control .person-control-item[data-action="prev"]').addClass('disable');
                                    element.find('.person-control .person-control-item[data-action="next"]').removeClass('disable');
                                }
                                element.find('.person-ajax-content').removeClass('loading');
                            }
                        });
                    });
                } else {
                    var category        = element.find('.person-control-item').attr('data-category');
                    var max_pages       = parseInt(element.find('.person-control-item').attr('data-max_pages'));
                    var current_page    = parseInt(element.find('.person-control-item').attr('data-current_page'));

                    // Save first load to cache
                    var tab_data_index = element_id + '-' + category.toString().split(',').join('-') + '-page-1';
                    var tab_control_index = element_id + '-' + category.toString().split(',').join('-');

                    person_category_data[tab_data_index] = element.find('.person-category-content').clone(true);
                    person_category_control[tab_control_index] = [category, max_pages, current_page];
                }

                // Next/Prev control
                element.find('.person-control .person-control-item').off().on('click', function() {
                    // Check if already click or loading
                    if ( $(this).hasClass('disable') || element.find('.person-ajax-content').hasClass('loading') ) {
                        return;
                    }

                    var category        = $(this).attr('data-category');
                    var max_pages       = parseInt($(this).attr('data-max_pages'));
                    var action          = $(this).attr('data-action');

                    if ( action == 'next' ) {
                        var current_page    = parseInt($(this).attr('data-current_page'));

                        if ( (current_page + 1) <= max_pages ) {
                            // Check cache
                            var tab_data_index = element_id + '-' + category.toString().split(',').join('-') + '-page-' + ( current_page + 1 );
                            var tab_control_index = element_id + '-' + category.toString().split(',').join('-');

                            if ( person_category_data[tab_data_index] != undefined ) {
                                element.find('.person-category-content').remove();
                                element.find('.person-ajax-content').append( person_category_data[tab_data_index] );
                                
                                // Do something
                                element.find('.person-control .person-control-item').attr('data-current_page', current_page + 1);
                                person_category_control[tab_control_index] = [category, max_pages, current_page + 1];
                                // Check last page
                                element.find('.person-control .person-control-item[data-action="prev"]').removeClass('disable');
                                if ( current_page + 1 >= max_pages ) {
                                    element.find('.person-control .person-control-item[data-action="next"]').addClass('disable');
                                }

                                return;
                            }
                        
                            // Load content via ajax
                            element.find('.person-ajax-content').addClass('loading');

                            $.ajax({
                                type : "POST",
                                timeout : 30000,
                                url : haru_filmmaker_ajax_url,
                                data : {
                                    action: 'haru_get_person_category_next', 
                                    settings: settings, 
                                    category: category,
                                    current_page: current_page
                                },
                                error: function(xhr,err) {
                                    console.log('Have something wrong! Please try again!');
                                },
                                success: function(response) {
                                    if ( response ) {
                                        element.find('.person-category-content').remove();
                                        element.find('.person-ajax-content').append( response );       

                                        // Save cache
                                        person_category_data[tab_data_index] = response;
                                        person_category_control[tab_control_index] = [category, max_pages, current_page + 1];
                                    }
                                    // Do something
                                    element.find('.person-control .person-control-item').attr('data-current_page', current_page + 1);
                                    element.find('.person-ajax-content').removeClass('loading');
                                    // Check last page
                                    element.find('.person-control .person-control-item[data-action="prev"]').removeClass('disable');
                                    if ( current_page + 1 >= max_pages ) {
                                        element.find('.person-control .person-control-item[data-action="next"]').addClass('disable');
                                    }
                                }
                            });
                        } else {
                            return;
                        }
                    } else if ( action == 'prev' ) {
                        var current_page    = parseInt($(this).attr('data-current_page'));

                        if ( current_page == 1 ) {
                            return;
                        }

                        // Check cache
                        var tab_data_index = element_id + '-' + category.toString().split(',').join('-') + '-page-' + ( current_page - 1 );
                        var tab_control_index = element_id + '-' + category.toString().split(',').join('-');

                        if ( person_category_data[tab_data_index] != undefined ) {
                            element.find('.person-category-content').remove();
                            element.find('.person-ajax-content').append( person_category_data[tab_data_index] );
                            
                            // Do something
                            element.find('.person-control .person-control-item').attr('data-current_page', current_page - 1);
                            person_category_control[tab_control_index] = [category, max_pages, current_page - 1];
                        }

                        // Check first page
                        element.find('.person-control .person-control-item[data-action="next"]').removeClass('disable');
                        if ( current_page - 1 <= 1 ) {
                            element.find('.person-control .person-control-item[data-action="prev"]').addClass('disable');
                        }
                    }
                });
            });
        },
        shortcodeSubmit: function() {
            // Do something
        },
    }

    $(document).ready(function() {
        // if ( !$('body').hasClass('elementor-editor-active') ) {
            HaruFilmmaker.init();
        // }
    });

    // $(window).on('elementor/frontend/init', () => {
    // $(document).on('frontend/element_ready/section', () => {
    //     // if ( $('body').hasClass('elementor-editor-active') ) {
    //         console.log('editor');
    //         setTimeout(function(){
    //             HaruFilmmaker.init();
    //         }, 500);
    //     // }
    // });
})(jQuery);