$(function () {
    var videos = $('.youtube-sub-videos a');

    $('.youtube-links').click(function () {
        $('BODY').append('<div id="youtubeLightbox"></div>').append('<a href="#youtubeLightbox" id="youtubeVideoLink" />');
        $('#youtubeVideoLink').fancybox({
            onStart: function () {
                $('#fancybox-overlay').append('<div id="dots-top-left"></div><div id="dots-bottom-right"></div>');

                $('#youtubeLightbox').append('<div id="youtube-container">' + embedYoutubeClip($(videos[0]).attr('href')) + '</div>');
                $('#fancybox-outer').css({ background: 'none' });
                $('#youtubeLightbox').append('<div id="sub-videos-container"><div id="sub-videos"><div id="sub-videos-wrapper"></div></div></div>');
                $('#youtubeLightbox').append('<div id="transcript-link-container"><a id="transcript-link" target="_blank" href="' + $(videos[0]).attr('rel') + '">View Transcript</a></div>');

                for (var i = 0; i < videos.length; i++) {
                    $('#sub-videos-wrapper').append('<div class="video" url="' + $(videos[i]).attr('href') + '" transcript="' + $(videos[i]).attr('rel') + '">' + $(videos[i]).html() + '<span>' + $(videos[i]).attr('title') + '</span></div>');
                }

                $('#sub-videos-container').prepend('<img src="/USQ/FutureStudents/images/youtube-lightbox-sep.png" width="150" height="1" alt="" class="youtube-sep" style="margin-top: 35px;" /><div class="youtube-vertical-top-arrow youtube-vertical-top-arrow-disabled"></div>');
                $('#sub-videos-container').append('<div class="youtube-vertical-bottom-arrow"></div><img src="/USQ/FutureStudents/images/youtube-lightbox-sep.png" width="150" height="1" alt="" class="youtube-sep" />');

                attachVerticalCarousel();
                $('#fancybox-close').addClass('youtube-close');

            },
            onComplete: function () {

            },
            onCleanup: function () {
                $('#dots-top-left, #dots-bottom-right').remove();
                $('#youtubeLightbox').remove();
            },
            zoomSpeedIn: 400,
            zoomSpeedOut: 400,
            width: 881,
            height: 512,
            transitionIn: 'fade',
            transitionOut: 'fade',
            overlayShow: true,
            overlayColor: '#000000',
            padding: 0,
            overlayOpacity: 0.8,
            hideOnContentClick: false
        }).trigger('click');
        return false;
    });

    function embedYoutubeClip(href) {
        return '<iframe class="youtube-player" type="text/html" width="640" height="360" src="http://www.youtube.com/embed/' + getYoutubeId(href) + '" frameborder="0"></iframe>';
    }

    function attachVerticalCarousel() {
        var atGroup = 0;
        var videoGroups = Math.floor(videos.length / 3);
        if (videos.length % 3) {
            videoGroups++;
        }
        videoGroups--;

        $('#sub-videos-container .video').click(function () {
            $('#youtube-container iframe').remove();
            $('#youtube-container').append(embedYoutubeClip($(this).attr('url')));
            $('#transcript-link').attr('href', $(this).attr('transcript'));
        });

        $('.youtube-vertical-top-arrow').click(function () {

            if ($(this).hasClass('youtube-vertical-top-arrow-disabled')) {
                return false;
            }

            if (atGroup >= 0) {
                offset = --atGroup * $('#sub-videos').height();
                $('#sub-videos-wrapper').animate({ 'margin-top': '-' + offset + 'px' }, 1000);
            }
            handleButtons();
        });

        $('.youtube-vertical-bottom-arrow').click(function () {
            if (atGroup + 1 <= videoGroups) {
                offset = ++atGroup * $('#sub-videos').height();
                $('#sub-videos-wrapper').animate({ 'margin-top': '-' + offset + 'px' }, 1000);
                handleButtons();
            }
        });

        function handleButtons() {
            if (atGroup == videoGroups) {
                if (!$('.youtube-vertical-bottom-arrow').hasClass('youtube-vertical-bottom-arrow-disabled')) {
                    $('.youtube-vertical-bottom-arrow').addClass('youtube-vertical-bottom-arrow-disabled');
                }
            } else {
                $('.youtube-vertical-bottom-arrow').removeClass('youtube-vertical-bottom-arrow-disabled');
            }

            if (atGroup == 0) {
                if (!$('.youtube-vertical-top-arrow').hasClass('youtube-vertical-top-arrow-disabled')) {
                    $('.youtube-vertical-top-arrow').addClass('youtube-vertical-top-arrow-disabled');
                }
            } else {
                $('.youtube-vertical-top-arrow').removeClass('youtube-vertical-top-arrow-disabled');
            }
        }

    }

    function getYoutubeId(url) {
        matches = url.match(/v=([\w-_]+)/);
        if (matches[1].length) {
            return matches[1];
        }
    }

});