link(href="http://vjs.zencdn.net/4.1/video-js.css", rel="stylesheet")
script(src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js")
script(src="http://vjs.zencdn.net/4.0/video.js")
script(src="/lib/videojs/playlist.js")

video(id="video", class="video-js vjs-default-skin", controls, preload="auto", data-setup='', width="#{width}", height="#{height}")
    source(src="#{s3Url}", type='video/mp4')

each video, index in videos
    button(data-videoindex="#{index}")= video.title

script(type="text/javascript").
    $(function(){
        var videos = !{videoJson};

        var player = videojs('video');

        player.playList(videos);
        player.playList(1);

        player.on("lastVideoEnded", function() {
            player.playList(0);
            player.play();
        });

        $('[data-videoindex]').click(function(e) {
            var button = $(this);
            console.log('going to jump to video: ' + button.attr('data-videoindex'));
            player.playList(button.attr('data-videoindex'));
        });
    });