<div class="wrapper">
    <div class="screen" id="screen-1" data-video="vid/bird.mp4" data-autoslide="15000">
        <img src="img/bird.jpg" class="big-image" />
        <h1 class="video-title" style="color:#000">Image 1 </h1>
    </div>
    <div class="screen" id="screen-2" data-video="vid/satellite.mp4" data-autoslide="15000">
        <img src="img/satellite.jpg" class="big-image" />
        <h1 class="video-title" style="color:#000">Image 2 /h1>
    </div>
    <div class="screen" id="screen-3" data-video="vid/camera.mp4" data-autoslide="15000">
        <img src="img/camera.jpg" class="big-image" />
        <h1 class="video-title" style="color:#000">Image 3 </h1>
    </div>
    <div class="screen" id="screen-4" data-video="vid/spider.mp4" data-autoslide="15000">
        <img src="img/spider.jpg" class="big-image" />
        <h1 class="video-title" style="color:#000">Image 4 </h1>
    </div>
    <div class="screen" id="screen-5" data-video="vid/dandelion.mp4" data-autoslide="15000">
        <img src="img/dandelion.jpg" class="big-image" />
        <h1 class="video-title" style="color:#000">Image 5</h1>
    </div>
</div>

<nav id="next-btn">
    <a href="#" class="next-icon"></a>
</nav>

$(function() {

        // Use Modernizr to detect for touch devices,
        // which don't support autoplay and may have less bandwidth,
        // so just give them the poster images instead
        var screenIndex = 1,
            numScreens = $('.screen').length,
            isTransitioning = false,
            transitionDur = 1000,
            BV,
            videoPlayer,
            isTouch = Modernizr.touch,
            $bigImage = $('.big-image'),
            $window = $(window);

        if (!isTouch) {
            // initialize BigVideo
            BV = new $.BigVideo({forceAutoplay:isTouch});
            BV.init();
            showVideo();

            BV.getPlayer().addEvent('loadeddata', function() {
                onVideoLoaded();
            });

            // adjust image positioning so it lines up with video
            $bigImage
                .css('position','relative')
                .imagesLoaded(adjustImagePositioning);
            // and on window resize
            $window.on('resize', adjustImagePositioning);
        }

        // Next button click goes to next div
        $('#next-btn').on('click', function(e) {
            e.preventDefault();
            if (!isTransitioning) {
                next();
            }
        });

        function showVideo() {
            BV.show($('#screen-'+screenIndex).attr('data-video'),{ambient:true});
        }

        function next() {
            isTransitioning = false;

            // update video index, reset image opacity if starting over
            if (screenIndex === numScreens) {
                $bigImage.css('opacity',1);
                screenIndex = 1;
            } else {
                screenIndex++;
            }

            if (!isTouch) {
                $('#big-video-wrap').transit({'left':'-100%'},transitionDur)
            }

            (Modernizr.csstransitions)?
                $('.wrapper').transit(
                    {'left':'-'+(100*(screenIndex-1))+'%'},
                    transitionDur,
                    onTransitionComplete):
                onTransitionComplete();
        }

        function onVideoLoaded() {
            $('#screen-'+screenIndex).find('.big-image').transit({'opacity':0},500)
        }

        function onTransitionComplete() {
            isTransitioning = false;
            if (!isTouch) {
                $('#big-video-wrap').css('left',0);
                showVideo();
            }
        }

        function adjustImagePositioning() {
            $bigImage.each(function(){
                var $img = $(this),
                    img = new Image();

                img.src = $img.attr('src');

                var windowWidth = $window.width(),
                    windowHeight = $window.height(),
                    r_w = windowHeight / windowWidth,
                    i_w = img.width,
                    i_h = img.height,
                    r_i = i_h / i_w,
                    new_w, new_h, new_left, new_top;

                if( r_w > r_i ) {
                    new_h   = windowHeight;
                    new_w   = windowHeight / r_i;
                }
                else {
                    new_h   = windowWidth * r_i;
                    new_w   = windowWidth;
                }

                $img.css({
                    width   : new_w,
                    height  : new_h,
                    left    : ( windowWidth - new_w ) / 2,
                    top     : ( windowHeight - new_h ) / 2
                })

            });

        }
    });