var youTubePlayer;
var youTubeVideoId = "";
var youTubeIndex = 1;
var youTubeMaxIndex = 1;
var youTubeLoaded = false;

$(document).ready(function () {
    youTubeLoaded = false;
    youTubeIndex = parseInt($("#YouTubeIndex").val());
    youTubeMaxIndex = parseInt($("#YouTubeMaxIndex").val());
    youTubeVideoId = $(".youtube_container .scrollableArea img[data-index=" + youTubeIndex + "]").attr("data-videoid");

    $("div#YouTubeSlide").smoothDivScroll({});
    moveToThumbnail();

    $(".youtube_container .scrollableArea img").click(function () {
        deselectVideoThumb(youTubeIndex);
        var videoId = $(this).attr("data-videoid");
        youTubeIndex = parseInt($(this).attr("data-index"));
        showVideoPlayer(videoId);
    });

    //When mouse rolls over
    $(".youtube_container .scrollableArea img").mouseover(function () {
        var index = parseInt($(this).attr("data-index"));
        if (index != youTubeIndex) {
            selectVideoThumb(index);
        }
    });


    //When mouse is removed
    $(".youtube_container .scrollableArea img").mouseout(function () {
        var index = parseInt($(this).attr("data-index"));
        if (index != youTubeIndex) {
            deselectVideoThumb(index);
        }
    });

    if ((!youTubeLoaded) && (navigator.userAgent.indexOf("MSIE") > -1)) {
        onYouTubePlayerAPIReady();
    }
});

function onYouTubePlayerAPIReady() {
    try {
        youTubeLoaded = true;
        youTubePlayer = new YT.Player('YouTubeDisplay', {
            videoId: youTubeVideoId,
            width: "798",
            height: "450",
            playerVars: { 'modestbranding': 1, 'autoplay': 1, 'controls': 1, 'autohide': 1, 'rel': 0, 'showinfo': 0, 'egm': 1, 'iv_load_policy': 3, 'showsearch': 0 },
            events: {
                'onReady': onPlayerReady,
                'onStateChange': onPlayerStateChange,
                'onError': onPlayerError
            }
        });
    } catch (err) {
        //youTubeLoaded = false;
    }
}

function onPlayerReady(evt) {
    evt.target.playVideo();
}
function onPlayerError(evt) {
    //alert(evt.data);
}
function onPlayerStateChange(evt) {
    var data = youTubePlayer.data;
    if (evt.data == YT.PlayerState.ENDED) {
        deselectVideoThumb(youTubeIndex);
        if (youTubeIndex >= youTubeMaxIndex) {
            youTubeIndex = 1;
        } else {
            youTubeIndex++;
        }

        var videoId = $(".youtube_container .scrollableArea img[data-index=" + youTubeIndex + "]").attr("data-videoid");
        showVideoPlayer(videoId);
    }
}

function showVideoPlayer(videoId) {
    selectVideoThumb(youTubeIndex);
    moveToThumbnail();
    try {
        youTubePlayer.clearVideo();
        youTubePlayer.loadVideoById(videoId);

    } catch (ex) {
        // Quick fix for iOS
        var t = setTimeout(function () { youTubePlayer.loadVideoById(videoId); }, 500);
    }
}

function moveToThumbnail() {
    $("#YouTubeSlide").smoothDivScroll("moveToElement", "number", youTubeIndex);
}

function selectVideoThumb(index) {
    if (index == youTubeIndex) {
        $(".youtube_container .scrollableArea img[data-index=" + index + "]").parent().addClass("select");
    }
    $(".youtube_container .scrollableArea img[data-index=" + index + "]").animate({
        width: '120px',
        height: '90px',
        opacity: '1',
        left: '0px',
        top: '0px'
    }, {
        queue: false,
        duration: 300,
        easing: 'jswing',
        complete: function () {
            $(".youtube_container .scrollableArea img[data-index=" + index + "]").parent().find(".title").css("display", "block");
        }
    });
}

function deselectVideoThumb(index) {
    if (index == youTubeIndex) {
        $(".youtube_container .scrollableArea img[data-index=" + index + "]").parent().removeClass("select");
    }
    $(".youtube_container .scrollableArea img[data-index=" + index + "]").animate({
        width: '97px',
        height: '72px',
        opacity: '0.65',
        left: '18px',
        top: '11px'
    }, {
        queue: false,
        duration: 300,
        easing: 'jswing',
        complete: function () {
            $(".youtube_container .scrollableArea img[data-index=" + index + "]").parent().find(".title").css("display", "none");
        }
    });
}