<script type="text/javascript" src="https://rawgithub.com/FZambia/centrifuge/0.5/javascript/centrifuge.js"></script>
<script type="text/javascript">
    'use strict';

    var tagsToReplace = {
        '&': '&amp;',
        '<': '&lt;',
        '>': '&gt;'
    };

    function replaceTag(tag) {
        return tagsToReplace[tag] || tag;
    }

    function safe_tags_replace(str) {
        return str.replace(/[&<>]/g, replaceTag);
    }

    $(function() {

        var channel = "public:chat";

        var centrifuge = new Centrifuge({
            url: '{{protocol}}://{{centrifuge_address}}{{endpoint}}',
            token: '{{auth_data["token"]}}',
            project: '{{auth_data["project"]}}',
            user: '{{auth_data["user"]}}',
            timestamp: '{{auth_data["timestamp"]}}',
            info: '{% raw auth_data["info"] %}',
            //protocols_whitelist: ["xhr-polling"],
            debug: true
        });

        centrifuge.on('connect', function(){

            draw_message('connected');

            var subscription = centrifuge.subscribe(channel, function(message) {
                var client_id;
                if (message["client"] !== null){
                    client_id = message["client"]["client_id"];
                } else {
                    client_id = null;
                }
                var msg = safe_tags_replace(message.data["input"].toString()) + ' <span class="muted">from ' + client_id + '</span>';
                draw_message(msg);
            });

            subscription.on('subscribe:success', function(){
                subscription.presence(function(message) {
                    var count = 0;
                    for (var key in message.data){
                        count++;
                    }
                    draw_message('Now in this room: ' + count + ' clients');
                });

            });

            subscription.on('join', function(message) {
                console.log(message);
                draw_message('Someone joined channel ' + message.channel + ' (uid ' + message.data["client_id"] + ')');
            });

            subscription.on('leave', function(message) {
                draw_message('Someone left channel ' + message.channel + ' (uid ' + message.data["client_id"] + ')');
            })

        });

        centrifuge.on('error', function(error_message) {
            console.log(error_message);
        });

        centrifuge.on('disconnect', function(){
            draw_message('disconnected');
        });

        centrifuge.connect();

        function draw_message(text) {
            var date = new Date();
            var container = $('#messages');
            container.prepend($('<li/>').html([
                date.toString(),
                ' '+text
            ].join(':')));
        }

        $('form').submit(function(event) {
            event.preventDefault();
            var input = $(this).find('input[type="text"]');

            if (centrifuge.isConnected() === true) {
                var subscription = centrifuge.publish(channel, {"input": input.val()}, function() {
                    console.log('message successfully sent');
                });
                console.log(subscription);
                input.val('');
            }
        });
    });
</script>
