@(id: String, next: String)

@main("Play roulette") {

    <button id="next" class="btn btn-success">Next partner <i class="icon-forward icon-white"></i> </button><br/><br/>
    <div id="message" class="alert alert-info"></div>
    <div>
        <img id="target" width="320" height="240" style="display: inline;" src="@routes.Assets.at("images/static.gif")"/>
    </div>
    <br/>
    <div>
        <video id="live" width="320" height="240" autoplay></video>
        <canvas width="320" id="canvas" height="240" style="display: inline;"></canvas>
    </div>

    <script type="text/javascript">

        var next = '@next';

        function dataURItoBlob(dataURI) {
            var binary = atob(dataURI.split(',')[1]);
            var array = [];
            for(var i = 0; i < binary.length; i++) {
                array.push(binary.charCodeAt(i));
            }
            return new Blob([new Uint8Array(array)], {type: 'image/jpeg'});
        }

        function update() {
            if (next != "waiting") {
                $('#message').html("You are now connected to a new partner")
                $('#message').attr('class', 'alert alert-success')
                $('#next').removeAttr('disabled')
            } else {
                $('#message').html("We are searching a new partner for you ...")
                $('#message').attr('class', 'alert alert-info')
                $('#target').attr('src', '@routes.Assets.at("images/static.gif")')
                $('#next').attr('disabled', 'disabled')
            }
        }

        $(document).ready(function(e) {
            var feed;
            var video = $("#live").get()[0];
            var canvas = $("#canvas");
            var ctx = canvas.get()[0].getContext('2d');

            var WS = window['MozWebSocket'] ? MozWebSocket : WebSocket
            var socket = new WS("ws://" + location.host + "/ws/@id")
            socket.onmessage = function(event) {
                var data = event.data
                var target = $("#target").get()[0];
                var url=window.webkitURL.createObjectURL(data);
                target.onload = function() {
                    window.webkitURL.revokeObjectURL(url);
                };
                target.src = url;
                next = "running"
                $('#next').removeAttr('disabled')
            }

            var onwebcamfail = function(err) {
                console.log("error with cam")
            }

            $('#next').click(function(e) {
                e.preventDefault()
                if (next != "waiting") {
                    $.get('/next/@id', function(data) {})
                } else {
                    $('#message').html("We are searching a new partner for you ...")
                    $('#message').attr('class', 'alert alert-info')
                }
            })

            navigator.webkitGetUserMedia({video: true},
                function(stream) {
                    video.src = window.webkitURL.createObjectURL(stream);
                },onwebcamfail)
     
            var timer = setInterval(function() { 
                ctx.drawImage(video, 0, 0, 320, 240); 
                var data = canvas.get()[0].toDataURL('image/jpeg', 1.0);
                var newblob = dataURItoBlob(data);
                socket.send(newblob)
            }, 100);

            $('#next').attr('disabled', 'disabled')
            canvas.hide();
            update();

            setTimeout(function() {
                feed = new EventSource('/feed/@id')
                feed.onmessage = function(e) {
                    var data = e.data
                    next = data.replace("'", "")
                    update()
                }
            }, 1000)
        })        
    </script>
}