{% extends "base/base.html" %}

{% block title %}{{ section.title }}{% endblock %}
{% block javascript %}
<script type="text/javascript">
        var url = '/api/v1/lisa/tts/google/';
        //var url = '/api/v1/lisa/tts/pico/';
        var source;
        var context = new webkitAudioContext();
        var analyser = context.createAnalyser();
        var canvas=document.getElementById('canvas1');
        var canvasContext=canvas.getContext('2d');
        var isFinished = false;

        function playSound(buffer) {
            source = context.createBufferSource();
            source.buffer = buffer;
            source.connect(analyser);
            analyser.connect(context.destination);
            source.onended = function() {
                isFinished = true;
            }
            source.start(0);
        }

        function readme(message) {
            var request = new XMLHttpRequest();
            request.open('POST', url, true);
            request.responseType = 'arraybuffer';
            request.onload = function(){
                context.decodeAudioData(request.response, function(buffer) {
                    playSound(buffer);
                });
            };
            var data = new FormData();
            data.append('message', message);
            data.append('lang', '{{ lang }}');
            request.send(data);
        }

        function draw() {
            window.webkitRequestAnimationFrame(draw);
            render();
        }
        var separator=2;
        var height=canvas.height=100;
        var width=canvas.width=200;
        var spacer=2;

        function clear() {
            canvasContext.beginPath();
            canvasContext.clearRect(0, 0, width, height);
            canvasContext.fill();
        }

        function render(){
            var freqByteData = new Uint8Array(analyser.frequencyBinCount);
            analyser.getByteFrequencyData(freqByteData);
            canvasContext.beginPath();
            canvasContext.clearRect(0, 0, width, height);
            canvasContext.fillStyle = '#1ab2ff';
            canvasContext.lineCap = 'round';
            canvasContext.fill();
            for(var i=0;i<analyser.frequencyBinCount;i++){
                canvasContext.fillRect(i*2,height,1,-freqByteData[i]/2);
            }
        }

    var sock = null;
    var wsuri = "{{ websocket }}://"+$(location).attr('host')+"/websocket";

    window.onload = function() {

        sock = new WebSocket(wsuri);

        sock.onopen = function() {
            console.log("connected to " + wsuri);
        }

        sock.onclose = function(e) {
            console.log("connection closed (" + e.code + ")");
        }

        sock.onmessage = function(e) {
            console.log("message received: " + e.data);
            var JsonData = jQuery.parseJSON(e.data);
            $('#chat').append('<li class="lisa"><strong>Lisa</strong> > '+JsonData.body+'</li>');
            readme(JsonData.body);
            draw();
        }
    };

    function send() {
        var msg = document.getElementById('message').value;
        $('#chat').append('<li class="me"><strong>Me</strong> > '+msg+'</li>');
        sock.send(msg);

        $('#message').onwebkitspeechchange = function(e) {
            console.log(e); // SpeechInputEvent
            document.getElementById('sendit').send();

        }
    };

</script>

{% endblock %}

{% block content %}
<div class=span12>
    <div style="height: 200px; width: 600px;overflow:auto;">
        <ul id="chat">
        </ul>
    </div>
    <p>
        Message:
        <input id="message" type="text" value="Hello, world!" lang="fr-FR"  x-webkit-speech  speech  onwebkitspeechchange="send();">
    </p>
    <button id="sendit" onclick='send();'>Send Message</button>
    <div class="alert alert-info alert-block">
        <h4>Sorry for english users !</h4>
        I'm sorry for english users, I know a demo should be written in english, but as the project isn't well known
        enough, I use it to show my project to my friends. Don't worry, english language is included in the plugins and
        in the core. I use the gettext to do the translation. LISA was thinked with only one language at a time.<br />
        To change the language, it needs to change the parameter in the json and reload the LISA engine.<br />
        For those who don't know the French, even if you don't understand the answer, you can ask "Hello",
        "il y a quoi au cinéma", "état du trafic SNCF", "il est quelle heure" for example.<br />
        <br/>Sorry for this, I will change it for an english version when the project will be stable enough to do more
        marketing about it.
    </div>
<div class=span10>
    <canvas id='canvas1'>
    </canvas>
</div>
{% endblock %}
