<html>
<head>
    <meta charset="UTF-8">
    <title>Piano Roll {{event.label}}</title>
    <link href="{{ config['STATIC_URL'] }}/css/annotviz.min.css" rel="stylesheet">
</head>
<body>
    <h1>Piano Roll {{event.label}}</h1>
    <noscript>You must enable JavaScript</noscript>
    <div id="canvasContainer"></div>
    <p>
        <a href="#" onclick="stop(); return false;">stop intervals</a> -
        <a href="#" onclick="start(); return false;">start intervals</a> -
        temps écoulé : <span id="timeStarted"></span>
    </p>
    <pre id="log"></pre>
    <script src="{{ config['STATIC_URL'] }}/js/libs-annotviz.min.js"></script>
    <script src="{{ config['STATIC_URL'] }}/js/annotviz.min.js"></script>
    <script>

    var pianorollChannel  = 'PIANOROLL';
    var annotationChannel = 'ANNOT';
    var eventCode = '{{event.code}}';
    var wsUri = 'ws://' + window.location.hostname + ':8090/broadcast';

    wsUriPianoroll = wsUri + '?channel=' + pianorollChannel + '&event_code=' + eventCode;
    wsUriAnnotation = wsUri + '?channel=' + annotationChannel + '&event_code=' + eventCode;

    var logger = new annotviz.ConsoleLogger(true);

    var stageView = new annotviz.StageView({
        logger: logger
    });

    var serverUrl = "http://" + window.location.hostname + ":8080";
    var annotsvizview = new annotviz.AnnotsVizView({
        urlCategories: serverUrl + "/p/api/v1/event/",
        serverUrl: serverUrl,
        logger: logger,
        stageView: stageView,
        wsPianoroll: new annotviz.WsWrapper(wsUriPianoroll, logger),
        wsAnnot: new annotviz.WsWrapper(wsUriAnnotation, logger),
        timeBegin: Date.parse("2015-01-23T09:30:00+01:00"),
        timeEnd: Date.parse("2015-01-23T18:30:00+01:00"),
        eventCode: eventCode,
        eventCodeSessionDay1: "atelier2",
        channel: annotationChannel
    });


    function stop() {
        stageView.stop();
    }
    function start() {
        stageView.start();
    }

    window.onload = function() {
        stageView.init();
        start();
    }
</script>
</body>
</html>
