<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 PIXI = require('pixi');
    var annotCategories = [
        {
            "ts": 1421928213000,
            "colors": {
                "transgressions": "#b90000",
                "rythmique": "#af931e",
                "narration": "#4bdd71",
                "relation": "#1c28ba"
            },
            "order": [
                "transgressions",
                "rythmique",
                "narration",
                "relation"
            ],
            "defaultColor": "#536991"
        }
    ];

    function getAnnotCategories(ecode, serverUrl) {

        var url = serverUrl+"/p/api/v1/event/" + ecode;

        var jsonLoader = new PIXI.JsonLoader(url, true);
        jsonLoader.on('loaded', function(res) {
            var data = res.target.json;

            while(annotCategories.length > 0) {
                annotCategories.pop();
            }

            data.sessions.forEach(function(session) {
                var annotCat = {
                    ts: session.start_ts === null ? new Date(0) : Date.parse(session.start_ts),
                    colors: {}
                }
                var categoriesJson = session.categories_json;
                annotCat.order = categoriesJson.order;
                categoriesJson.categories.forEach(function(cat) {
                    annotCat.colors[cat.code] = annotviz.colorToHex(cat.color);
                });
                annotCat.defaultColor = categoriesJson.defaultColor || "#536991";
                annotCategories.push(annotCat);
            });
            console.log(JSON.stringify(annotCategories, null, '  '));
        });

        jsonLoader.load();
    }



    var pianorollChannel  = 'PIANOROLL';
    var annotationChannel = 'ANNOT';
    var eventCode = '{{event.code}}';
    getAnnotCategories(eventCode, 'http://' + window.location.hostname + ':8080');
    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 annotsvizview = new annotviz.AnnotsVizView({
        logger: logger,
        stageView: stageView,
        wsPianoroll: new annotviz.WsWrapper(wsUriPianoroll, logger),
        wsAnnot: new annotviz.WsWrapper(wsUriAnnotation, logger),
        annotCategories: annotCategories,
        timeBegin: 1421919000000,
    	timeEnd: 1421951400000
    });


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

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