
// function utubePlayer(){
var video_array = "";
var video_array_with_data = "";
var com_id_data = "";
function set_variables(data, com_id, data2) {
    video_array = data;
    com_id_data = com_id;
    video_array_with_data = data2;
}


function catSlider() {

    jQuery("#mjCatContainer").lightSlider({
        loop: false,
        item: 6,
        pager: false,
        keyPress: true
    });

    jQuery("#mjCatContainerSide").lightSlider({
        loop: false,
        item: 4,
        vertical: true,
        pager: false,
        verticalHeight: 500,
        keyPress: true
    });

    jQuery("#mjRightPlaylist").lightSlider({
        loop: false,
        item: 5,
        keyPress: true,
        pager: false,
        vertical: true,
        verticalHeight: 390,
    });

    jQuery("#mjBottomPlaylist").lightSlider({
        loop: false,
        autoWidth: true,
        pager: false,
        thumbMargin: 5,
        item: 5,
        keyPress: true,

    });
}

// 2. This code loads the IFrame Player API code asynchronously.
var tag = document.createElement('script');

tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

// 3. This function creates an <iframe> (and YouTube player)
//    after the API code downloads.
var player;
function onYouTubeIframeAPIReady() {
    player = new YT.Player('player', {
        height: '390',
        width: '640',
        videoId: 'M7lc1UVf-VE',
        events: {
            'onReady': onPlayerReady,
            'onStateChange': onPlayerStateChange
        },
        playerVars: {
            'autoplay': 0,
            'rel': 0,
            'wmode': "transparent",
            'controls': 1,
            'enablejsapi': 1,
            'iv_load_policy': 3,
            'modestbranding': 0,
            'showinfo': 1,
            'autohide': 1,
            //playlist:['aAtkxOpX8Zg','NENDZsGBTeQ','aAtkxOpX8Zg','NENDZsGBTeQ','aAtkxOpX8Zg','NENDZsGBTeQ']
        }
    });
}

// 4. The API will call this function when the video player is ready.
function onPlayerReady(event) {
    //event.target.playVideo();
    catSlider();
    event.target.cuePlaylist(video_array);

    get_video_data(video_array[0])
    getCategories();

    //  for (var i = 0; i <= 8; i++) {
    //   jQuery('#mjCatContainer').append(
    //    '<li class="catSliderElement" style="cursor:pointer;" data-cat-id="'+i+'" >' +
    //    '<img style="width:60px;height:60px;display: block;margin: auto;" src="http://localhost/modal/home-icon.png">' +
    //    '<h4 style="text-align:center">Home Lones</h4>'+
    //    '</li>' );
    // }

    // for (var i = 0; i <= 8; i++) {
    //   jQuery('#mjCatContainerSide').append(
    //    '<li style="cursor:pointer;" class="catSliderElement" data-cat-id="'+i+'">' +
    //    '<img style="width:60px;height:60px;display: block;margin: auto;" src="http://localhost/modal/home-icon.png">' +
    //    '<h4 style="text-align:center">Home Lones</h4>'+
    //    '</li>' );
    // }

    jQuery.each(video_array_with_data, function (i, e) {

        // jQuery('#mj-cntainer').append(
        //   '<div data-video-id="'+video_array[i]+'" class="mj-thumbnail" style="width:150px;display:inline-grid"><img class="mj-thumbnail"  src="https://img.youtube.com/vi/'+video_array[i]+'/default.jpg"  data-video-id="'+video_array[i]+'"><br><strong style="display:inline;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">TITLE sdsds sa das w sa das das </strong></div>'
        //    );
        // jQuery('#mj-player-list').append(
        //   '<div data-video-id="'+video_array[i]+'" class="row mj-thumbnail" style="margin-bottom:2px;background-color: whitesmoke;"><div class="col-md-6"><img class="mj-thumbnail" style="width:100%"   src="https://img.youtube.com/vi/'+video_array[i]+'/default.jpg"  data-video-id="'+video_array[i]+'"></div><div class="col-md-6" ><strong style="display:inline;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">TITLE</strong></div></div>'
        //    );

        //  });


        // jQuery('#mj-cntainer').append(
        //           '<div data-video-id="'+video_array[i]+'" class="mj-thumbnail" style="width:150px;display:inline-grid;margin-right:5px;"><img class="mj-thumbnail"  src="https://img.youtube.com/vi/'+video_array[i]+'/default.jpg" style="width:150px;"  data-video-id="'+video_array[i]+'"><br><strong style="display:inline;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">TITLE sdsds sa das w sa das das </strong></div>'
        //            );
        //         jQuery('#mj-player-list').append(
        //           '<div data-video-id="'+video_array[i]+'" class="row mj-thumbnail" style="margin-bottom:2px;background-color: whitesmoke;"><div class="col-md-6"><img class="mj-thumbnail" style="width:100%"   src="https://img.youtube.com/vi/'+video_array[i]+'/default.jpg"  data-video-id="'+video_array[i]+'"></div><div class="col-md-6" ><strong style="display:inline;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">TITLE</strong></div></div>'
        //            );



        jQuery('#mjBottomPlaylist').append(
                '<li><div data-video-id="' + video_array_with_data[i].video_id + '" class="mj-thumbnail" style="width:150px;display:inline-grid;margin-right:5px;"><img class="mj-thumbnail"  src="https://img.youtube.com/vi/' + video_array_with_data[i].video_id + '/default.jpg" style="width:150px;"  data-video-id="' + video_array_with_data[i].video_id + '"><br><h5 style="display:inline;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">' + video_array_with_data[i].title + '</h5></div></li>'
                );
        jQuery('#mjRightPlaylist').append(
                '<li><div class="col-md-6"><img class="mj-thumbnail" style="width:100%"   src="https://img.youtube.com/vi/' + video_array_with_data[i].video_id + '/default.jpg"  data-video-id="' + video_array_with_data[i].video_id + '"></div><div class="col-md-6" ><strong style="display:inherit;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">' + video_array_with_data[i].title + '</strong></div></div></li>'
                );

    });

    jQuery('#innerModalData').show();

    jQuery('#widgetLoader').hide();
}

// 5. The API calls this function when the player's state changes.
//    The function indicates that when playing a video (state=1),
//    the player should play for six seconds and then stop.
var done = false;


function onPlayerStateChange(event) {
    if (event.data == YT.PlayerState.PLAYING && !done) {
        //setTimeout(stopVideo, 6000);
        done = true;
    }
}


function stopVideo() {
    player.stopVideo();
}


jQuery(document).on("click", ".mj-thumbnail", function () {
    var url = jQuery(this).attr('data-video-id');
    //player.cueVideoById(url);
    player.loadVideoById(url, 0, 'default');
    get_video_data(url);

    jQuery.ajax({
        url: 'https://www.googleapis.com/youtube/v3/videos',
        method: 'GET',
        //dataType: 'json',
        data: {'id': url, 'part': 'snippet.title'},
        success: function (data2) {
            console.log("ssss" + data2);

        }
    });

});

function get_video_data(url) {
    jQuery.ajax({
        url: 'http://localhost/widget/server/video_details.php',
        method: 'GET',
        dataType: 'json',
        data: {'video_id': url},
        success: function (data2) {
            console.log(data2[0].title);
            jQuery('.mj-widget-modal #mj-widget-video-title').text(data2[0].title);
            jQuery('.mj-widget-modal #mj-widget-video-description').text(data2[0].description);
        }
    });
}



jQuery(document).on("click", ".catSliderElement", function () {
    var category = jQuery(this).data('cat-id');
    jQuery.ajax({
        url: 'http://localhost/widget/server/category_details.php',
        method: 'GET',
        dataType: 'json',
        data: {'category_id': category},
        success: function (data) {
            var new_video_array = [];

            jQuery.each(data, function (i, e) {
                // console.log(data[i].video_id);
                new_video_array.push(data[i].video_id);
            });


            player.cuePlaylist(new_video_array);
            jQuery('#mjBottomPlaylist').html('');
            jQuery('#mjRightPlaylist').html('');
            jQuery.each(new_video_array, function (i, e) {

                jQuery('#mjBottomPlaylist').append(
                        '<li><div data-video-id="' + new_video_array[i] + '" class="mj-thumbnail" style="width:150px;display:inline-grid;margin-right:5px;"><img class="mj-thumbnail"  src="https://img.youtube.com/vi/' + new_video_array[i] + '/default.jpg" style="width:150px;"  data-video-id="' + new_video_array[i] + '"><br><strong style="display:inline;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">TITLE sdsds sa das w sa das das </strong></div></li>'
                        );
                jQuery('#mjRightPlaylist').append(
                        '<li><div class="col-md-6"><img class="mj-thumbnail" style="width:100%"   src="https://img.youtube.com/vi/' + new_video_array[i] + '/default.jpg"  data-video-id="' + new_video_array[i] + '"></div><div class="col-md-6" ><strong style="display:inline;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">TITLE</strong></div></div></li>'
                        );

            });
            //catSlider();
            jQuery("#mjRightPlaylist").lightSlider({
                loop: false,
                pager: false,
                keyPress: true,
                vertical: true,
                verticalHeight: 390,
            });

            jQuery("#mjBottomPlaylist").lightSlider({
                loop: false,
                autoWidth: true,
                thumbMargin: 5,
                pager: false,
                keyPress: true,

            });

        }
    });

});

function getCategories() {
    console.log("com " + com_id_data);

    jQuery.ajax({
        url: 'http://localhost/widget/server/categories.php',
        method: 'GET',
        dataType: 'json',
        data: {'com_id': com_id_data},
        success: function (data) {
            console.log(data);

            jQuery.each(data, function (i, e) {

                jQuery('#mjCatContainer').append(
                        '<li class="catSliderElement" style="cursor:pointer;" data-cat-id="' + data[i].cat_id + '" >' +
                        '<img style="width:60px;height:60px;display: block;margin: auto;" src="http://localhost/modal/home-icon.png">' +
                        '<h4 style="text-align:center">' + data[i].category + '</h4>' +
                        '</li>');

                jQuery('#mjCatContainerSide').append(
                        '<li style="cursor:pointer;" class="catSliderElement" data-cat-id="' + data[i].cat_id + '">' +
                        '<img style="width:60px;height:60px;display: block;margin: auto;" src="http://localhost/modal/home-icon.png">' +
                        '<h4 style="text-align:center">' + data[i].category + '</h4>' +
                        '</li>');


            });
            catSlider();


        }
    });
}