metamaps--metamaps/app/assets/javascripts/src/Metamaps.js.erb

// TODO document this user agent function

var labelType, useGradients, nativeTextSupport, animate;

(function () {
    var ua = navigator.userAgent,
        iStuff = ua.match(/iPhone/i) || ua.match(/iPad/i),
        typeOfCanvas = typeof HTMLCanvasElement,
        nativeCanvasSupport = (typeOfCanvas == 'object' || typeOfCanvas == 'function'),
        textSupport = nativeCanvasSupport && (typeof document.createElement('canvas').getContext('2d').fillText == 'function');
    //I'm setting this based on the fact that ExCanvas provides text support for IE
    //and that as of today iPhone/iPad current text support is lame
    labelType = (!nativeCanvasSupport || (textSupport && !iStuff)) ? 'Native' : 'HTML';
    nativeTextSupport = labelType == 'Native';
    useGradients = nativeCanvasSupport;
    animate = !(iStuff || !nativeCanvasSupport);
})();

// TODO eliminate these 5 top-level variables
Metamaps.panningInt = null;
Metamaps.tempNode = null;
Metamaps.tempInit = false;
Metamaps.tempNode2 = null;
Metamaps.VERSION = '<%= METAMAPS_VERSION %>'

Metamaps.Settings = {
    embed: false, // indicates that the app is on a page that is optimized for embedding in iFrames on other web pages
    sandbox: false, // puts the app into a mode (when true) where it only creates data locally, and isn't writing it to the database
    colors: {
        background: '#344A58',
        synapses: {
            normal: '#888888',
            hover: '#888888',
            selected: '#FFFFFF'
        },
        topics: {
            selected: '#FFFFFF'
        },
        labels: {
            background: '#18202E',
            text: '#DDD'
        }
    },
};

Metamaps.Touch = {
    touchPos: null, // this stores the x and y values of a current touch event
    touchDragNode: null // this stores a reference to a JIT node that is being dragged
};

Metamaps.Mouse = {
    didPan: false,
    didBoxZoom: false,
    changeInX: 0,
    changeInY: 0,
    edgeHoveringOver: false,
    boxStartCoordinates: false,
    boxEndCoordinates: false,
    synapseStartCoordinates: [],
    synapseEndCoordinates: null,
    lastNodeClick: 0,
    lastCanvasClick: 0,
    DOUBLE_CLICK_TOLERANCE: 300
};

Metamaps.Selected = {
    reset: function () {
        var self = Metamaps.Selected;

        self.Nodes = [];
        self.Edges = [];
    },
    Nodes: [],
    Edges: []
};

/*
 *
 *   BACKBONE
 *
 */
Metamaps.Backbone.init = function () {
    var self = Metamaps.Backbone;

    self.Metacode = Backbone.Model.extend({
        initialize: function () {
            var image = new Image();
            image.crossOrigin = "Anonymous";
            image.src = this.get('icon');
            this.set('image',image);
        },
        prepareLiForFilter: function () {
            var li = '';
            li += '<li data-id="' + this.id.toString() + '">';      
            li += '<img src="' + this.get('icon') + '" data-id="' + this.id.toString() + '"';
            li += ' alt="' + this.get('name') + '" />';      
            li += '<p>' + this.get('name').toLowerCase() + '</p></li>';
            return li;
        }

    });
    self.MetacodeCollection = Backbone.Collection.extend({
        model: this.Metacode,
        url: '/metacodes',
        comparator: function (a, b) {
            a = a.get('name').toLowerCase();
            b = b.get('name').toLowerCase();
            return a > b ? 1 : a < b ? -1 : 0;
        }
    });

    self.Topic = Backbone.Model.extend({
        urlRoot: '/topics',
        blacklist: ['node', 'created_at', 'updated_at', 'user_name', 'user_image', 'map_count', 'synapse_count'],
        toJSON: function (options) {
            return _.omit(this.attributes, this.blacklist);
        },
        save: function (key, val, options) {

            var attrs;

            // Handle both `"key", value` and `{key: value}` -style arguments.
            if (key == null || typeof key === 'object') {
                attrs = key;
                options = val;
            } else {
                (attrs = {})[key] = val;
            }

            var newOptions = options || {};
            var s = newOptions.success;

            var permBefore = this.get('permission');

            newOptions.success = function (model, response, opt) {
                if (s) s(model, response, opt);
                model.trigger('saved');

                if (permBefore === 'private' && model.get('permission') !== 'private') {
                    model.trigger('noLongerPrivate');
                }
                else if (permBefore !== 'private' && model.get('permission') === 'private') {
                    model.trigger('nowPrivate');
                }
            };
            return Backbone.Model.prototype.save.call(this, attrs, newOptions);
        },
        initialize: function () {
            if (this.isNew()) {
                this.set({
                    "user_id": Metamaps.Active.Mapper.id,
                    "desc": '',
                    "link": '',
                    "permission": Metamaps.Active.Map ? Metamaps.Active.Map.get('permission') : 'commons'
                });
            }

            this.on('changeByOther', this.updateCardView);
            this.on('change', this.updateNodeView);
            this.on('saved', this.savedEvent);
            this.on('nowPrivate', function(){
                var removeTopicData = {
                    mappableid: this.id
                };

                $(document).trigger(Metamaps.JIT.events.removeTopic, [removeTopicData]);
            });
            this.on('noLongerPrivate', function(){
                var newTopicData = {
                    mappingid: this.getMapping().id,
                    mappableid: this.id
                };

                $(document).trigger(Metamaps.JIT.events.newTopic, [newTopicData]);
            });

            this.on('change:metacode_id', Metamaps.Filter.checkMetacodes, this);

        },
        authorizeToEdit: function (mapper) {
            if (mapper && (this.get('permission') === "commons" || this.get('user_id') === mapper.get('id'))) return true;
            else return false;
        },
        authorizePermissionChange: function (mapper) {
            if (mapper && this.get('user_id') === mapper.get('id')) return true;
            else return false;
        },
        getDate: function () {

        },
        getMetacode: function () {
            return Metamaps.Metacodes.get(this.get('metacode_id'));
        },
        getMapping: function () {

            if (!Metamaps.Active.Map) return false;

            return Metamaps.Mappings.findWhere({
                map_id: Metamaps.Active.Map.id,
                mappable_type: "Topic",
                mappable_id: this.isNew() ? this.cid : this.id
            });
        },
        createNode: function () {
            var mapping;
            var node = {
                adjacencies: [],
                id: this.isNew() ? this.cid : this.id,
                name: this.get('name')
            };

            if (Metamaps.Active.Map) {
                mapping = this.getMapping();
                node.data = {
                    $mapping: null,
                    $mappingID: mapping.id
                };
            }

            return node;
        },
        updateNode: function () {
            var mapping;
            var node = this.get('node');
            node.setData('topic', this);

            if (Metamaps.Active.Map) {
                mapping = this.getMapping();
                node.setData('mapping', mapping);
            }

            return node;
        },
        savedEvent: function() {
            Metamaps.Realtime.sendTopicChange(this);
        },
        updateViews: function() {
            var onPageWithTopicCard = Metamaps.Active.Map || Metamaps.Active.Topic;
            var node = this.get('node');
            // update topic card, if this topic is the one open there
            if (onPageWithTopicCard && this == Metamaps.TopicCard.openTopicCard) {
                Metamaps.TopicCard.showCard(node);
            }

            // update the node on the map
            if (onPageWithTopicCard && node) {
                node.name = this.get('name');
                Metamaps.Visualize.mGraph.plot();
            }
        },
        updateCardView: function() {
            var onPageWithTopicCard = Metamaps.Active.Map || Metamaps.Active.Topic;
            var node = this.get('node');
            // update topic card, if this topic is the one open there
            if (onPageWithTopicCard && this == Metamaps.TopicCard.openTopicCard) {
                Metamaps.TopicCard.showCard(node);
            }
        },
        updateNodeView: function() {
            var onPageWithTopicCard = Metamaps.Active.Map || Metamaps.Active.Topic;
            var node = this.get('node');

            // update the node on the map
            if (onPageWithTopicCard && node) {
                node.name = this.get('name');
                Metamaps.Visualize.mGraph.plot();
            }
        }
    });

    self.TopicCollection = Backbone.Collection.extend({
        model: self.Topic,
        url: '/topics'
    });

    self.Synapse = Backbone.Model.extend({
        urlRoot: '/synapses',
        blacklist: ['edge', 'created_at', 'updated_at'],
        toJSON: function (options) {
            return _.omit(this.attributes, this.blacklist);
        },
        save: function (key, val, options) {

            var attrs;

            // Handle both `"key", value` and `{key: value}` -style arguments.
            if (key == null || typeof key === 'object') {
                attrs = key;
                options = val;
            } else {
                (attrs = {})[key] = val;
            }

            var newOptions = options || {};
            var s = newOptions.success;

            var permBefore = this.get('permission');

            newOptions.success = function (model, response, opt) {
                if (s) s(model, response, opt);
                model.trigger('saved');

                if (permBefore === 'private' && model.get('permission') !== 'private') {
                    model.trigger('noLongerPrivate');
                }
                else if (permBefore !== 'private' && model.get('permission') === 'private') {
                    model.trigger('nowPrivate');
                }
            };
            return Backbone.Model.prototype.save.call(this, attrs, newOptions);
        },
        initialize: function () {
            if (this.isNew()) {
                this.set({
                    "user_id": Metamaps.Active.Mapper.id,
                    "permission": Metamaps.Active.Map ? Metamaps.Active.Map.get('permission') : 'commons',
                    "category": "from-to"
                });
            }

            this.on('changeByOther', this.updateCardView);
            this.on('change', this.updateEdgeView);
            this.on('saved', this.savedEvent);
            this.on('noLongerPrivate', function(){
                var newSynapseData = {
                    mappingid: this.getMapping().id,
                    mappableid: this.id
                };

                $(document).trigger(Metamaps.JIT.events.newSynapse, [newSynapseData]);
            });
            this.on('nowPrivate', function(){
                $(document).trigger(Metamaps.JIT.events.removeSynapse, [{
                    mappableid: this.id
                }]);
            });

            this.on('change:desc', Metamaps.Filter.checkSynapses, this);
        },
        prepareLiForFilter: function () {
            var li = '';
            li += '<li data-id="' + this.get('desc') + '">';      
            li += '<img src="<%= asset_path('synapse16.png') %>"';
            li += ' alt="synapse icon" />';      
            li += '<p>' + this.get('desc') + '</p></li>';
            return li;
        },
        authorizeToEdit: function (mapper) {
            if (mapper && (this.get('permission') === "commons" || this.get('user_id') === mapper.get('id'))) return true;
            else return false;
        },
        authorizePermissionChange: function (mapper) {
            if (mapper && this.get('user_id') === mapper.get('id')) return true;
            else return false;
        },
        getTopic1: function () {
            return Metamaps.Topics.get(this.get('node1_id'));
        },
        getTopic2: function () {
            return Metamaps.Topics.get(this.get('node2_id'));
        },
        getDirection: function () {
            var t1 = this.getTopic1(),
                t2 = this.getTopic2();

            return t1 && t2 ? [
                    t1.get('node').id,
                    t2.get('node').id
                ] : false;
        },
        getMapping: function () {

            if (!Metamaps.Active.Map) return false;

            return Metamaps.Mappings.findWhere({
                map_id: Metamaps.Active.Map.id,
                mappable_type: "Synapse",
                mappable_id: this.isNew() ? this.cid : this.id
            });
        },
        createEdge: function (providedMapping) {
            var mapping, mappingID;
            var synapseID = this.isNew() ? this.cid : this.id;

            var edge = {
                nodeFrom: this.get('node1_id'),
                nodeTo: this.get('node2_id'),
                data: {
                    $synapses: [],
                    $synapseIDs: [synapseID],
                }
            };

            if (Metamaps.Active.Map) {
                mapping = providedMapping || this.getMapping();
                mappingID = mapping.isNew() ? mapping.cid : mapping.id;
                edge.data.$mappings = [];
                edge.data.$mappingIDs = [mappingID];
            }

            return edge;
        },
        updateEdge: function () {
            var mapping;
            var edge = this.get('edge');
            edge.getData('synapses').push(this);

            if (Metamaps.Active.Map) {
                mapping = this.getMapping();
                edge.getData('mappings').push(mapping);
            }

            return edge;
        },
        savedEvent: function() {
            Metamaps.Realtime.sendSynapseChange(this);
        },
        updateViews: function() {
            this.updateCardView();
            this.updateEdgeView();
        },
        updateCardView: function() {
            var onPageWithSynapseCard = Metamaps.Active.Map || Metamaps.Active.Topic;
            var edge = this.get('edge');

            // update synapse card, if this synapse is the one open there
            if (onPageWithSynapseCard && edge == Metamaps.SynapseCard.openSynapseCard) {
                Metamaps.SynapseCard.showCard(edge);
            }
        },
        updateEdgeView: function() {
            var onPageWithSynapseCard = Metamaps.Active.Map || Metamaps.Active.Topic;
            var edge = this.get('edge');

            // update the edge on the map
            if (onPageWithSynapseCard && edge) {
                Metamaps.Visualize.mGraph.plot();
            }
        }
    });

    self.SynapseCollection = Backbone.Collection.extend({
        model: self.Synapse,
        url: '/synapses'
    });

    self.Mapping = Backbone.Model.extend({
        urlRoot: '/mappings',
        blacklist: ['created_at', 'updated_at'],
        toJSON: function (options) {
            return _.omit(this.attributes, this.blacklist);
        },
        initialize: function () {
            if (this.isNew()) {
                this.set({
                    "user_id": Metamaps.Active.Mapper.id,
                    "map_id": Metamaps.Active.Map ? Metamaps.Active.Map.id : null
                });
            }
        },
        getMap: function () {
            return Metamaps.Map.get(this.get('map_id'));
        },
        getTopic: function () {
            if (this.get('mappable_type') === 'Topic') return Metamaps.Topic.get(this.get('mappable_id'));
            else return false;
        },
        getSynapse: function () {
            if (this.get('mappable_type') === 'Synapse') return Metamaps.Synapse.get(this.get('mappable_id'));
            else return false;
        }
    });

    self.MappingCollection = Backbone.Collection.extend({
        model: self.Mapping,
        url: '/mappings'
    });

    Metamaps.Metacodes = Metamaps.Metacodes ? new self.MetacodeCollection(Metamaps.Metacodes) : new self.MetacodeCollection();

    Metamaps.Topics = Metamaps.Topics ? new self.TopicCollection(Metamaps.Topics) : new self.TopicCollection();

    Metamaps.Synapses = Metamaps.Synapses ? new self.SynapseCollection(Metamaps.Synapses) : new self.SynapseCollection();

    Metamaps.Mappers = Metamaps.Mappers ? new self.MapperCollection(Metamaps.Mappers) : new self.MapperCollection();

    // this is for topic view
    Metamaps.Creators = Metamaps.Creators ? new self.MapperCollection(Metamaps.Creators) : new self.MapperCollection();

    if (Metamaps.Active.Map) {
        Metamaps.Mappings = Metamaps.Mappings ? new self.MappingCollection(Metamaps.Mappings) : new self.MappingCollection();

        Metamaps.Active.Map = new self.Map(Metamaps.Active.Map);
    }

    if (Metamaps.Active.Topic) Metamaps.Active.Topic = new self.Topic(Metamaps.Active.Topic);

    //attach collection event listeners
    self.attachCollectionEvents = function () {

        Metamaps.Topics.on("add remove", function(topic){
            Metamaps.Map.InfoBox.updateNumbers();
            Metamaps.Filter.checkMetacodes();
            Metamaps.Filter.checkMappers();
        });

        Metamaps.Synapses.on("add remove", function(synapse){
            Metamaps.Map.InfoBox.updateNumbers();
            Metamaps.Filter.checkSynapses();
            Metamaps.Filter.checkMappers();
        });

        if (Metamaps.Active.Map) {
            Metamaps.Mappings.on("add remove", function(mapping){
                Metamaps.Map.InfoBox.updateNumbers();
                Metamaps.Filter.checkSynapses();
                Metamaps.Filter.checkMetacodes();
                Metamaps.Filter.checkMappers();
            });
        }
    }
    self.attachCollectionEvents();
}; // end Metamaps.Backbone.init


/*
 *
 *   CREATE
 *
 */
Metamaps.Create = {
    isSwitchingSet: false, // indicates whether the metacode set switch lightbox is open
    selectedMetacodeSet: null,
    selectedMetacodeSetIndex: null,
    selectedMetacodeNames: [],
    newSelectedMetacodeNames: [],
    selectedMetacodes: [],
    newSelectedMetacodes: [],
    init: function () {
        var self = Metamaps.Create;
        self.newTopic.init();
        self.newSynapse.init();

        //////
        //////
        //// SWITCHING METACODE SETS

        $('#metacodeSwitchTabs').tabs({
            selected: self.selectedMetacodeSetIndex
        }).addClass("ui-tabs-vertical ui-helper-clearfix");
        $("#metacodeSwitchTabs .ui-tabs-nav li").removeClass("ui-corner-top").addClass("ui-corner-left");
        $('.customMetacodeList li').click(self.toggleMetacodeSelected); // within the custom metacode set tab
    },
    toggleMetacodeSelected: function () {
        var self = Metamaps.Create;

        if ($(this).attr('class') != 'toggledOff') {
            $(this).addClass('toggledOff');
            var value_to_remove = $(this).attr('id');
            var name_to_remove = $(this).attr('data-name');
            self.newSelectedMetacodes.splice(self.newSelectedMetacodes.indexOf(value_to_remove), 1);
            self.newSelectedMetacodeNames.splice(self.newSelectedMetacodeNames.indexOf(name_to_remove), 1);
        } else if ($(this).attr('class') == 'toggledOff') {
            $(this).removeClass('toggledOff');
            self.newSelectedMetacodes.push($(this).attr('id'));
            self.newSelectedMetacodeNames.push($(this).attr('data-name'));
        }
    },
    updateMetacodeSet: function (set, index, custom) {

        if (custom && Metamaps.Create.newSelectedMetacodes.length == 0) {
            alert('Please select at least one metacode to use!');
            return false;
        }

        var codesToSwitchToIds;
        var metacodeModels = new Metamaps.Backbone.MetacodeCollection();
        Metamaps.Create.selectedMetacodeSetIndex = index;
        Metamaps.Create.selectedMetacodeSet = "metacodeset-" + set;

        if (!custom) {
            codesToSwitchToIds = $('#metacodeSwitchTabs' + set).attr('data-metacodes').split(',');
            $('.customMetacodeList li').addClass('toggledOff');
            Metamaps.Create.selectedMetacodes = [];
            Metamaps.Create.selectedMetacodeNames = [];
            Metamaps.Create.newSelectedMetacodes = [];
            Metamaps.Create.newSelectedMetacodeNames = [];
        }
        else if (custom) {
            // uses .slice to avoid setting the two arrays to the same actual array
            Metamaps.Create.selectedMetacodes = Metamaps.Create.newSelectedMetacodes.slice(0);
            Metamaps.Create.selectedMetacodeNames = Metamaps.Create.newSelectedMetacodeNames.slice(0);
            codesToSwitchToIds = Metamaps.Create.selectedMetacodes.slice(0);
        }

        // sort by name
        for (var i = 0; i < codesToSwitchToIds.length; i++) {
            metacodeModels.add( Metamaps.Metacodes.get(codesToSwitchToIds[i]) );
        };
        metacodeModels.sort();

        $('#metacodeImg, #metacodeImgTitle').empty();
        $('#metacodeImg').removeData('cloudcarousel');
        var newMetacodes = "";
        metacodeModels.each(function(metacode){
            newMetacodes += '<img class="cloudcarousel" width="40" height="40" src="' + metacode.get('icon') + '" data-id="' + metacode.id + '" title="' + metacode.get('name') + '" alt="' + metacode.get('name') + '"/>';
        });

        $('#metacodeImg').empty().append(newMetacodes).CloudCarousel({
            titleBox: $('#metacodeImgTitle'),
            yRadius: 40,
            xRadius: 190,
            xPos: 170,
            yPos: 40,
            speed: 0.3,
            mouseWheel: true,
            bringToFront: true
        });

        Metamaps.GlobalUI.closeLightbox();
        $('#topic_name').focus();

        var mdata = {
            "metacodes": {
                "value": custom ? Metamaps.Create.selectedMetacodes.toString() : Metamaps.Create.selectedMetacodeSet
            }
        };
        $.ajax({
            type: "POST",
            dataType: 'json',
            url: "/user/updatemetacodes",
            data: mdata,
            success: function (data) {
                console.log('selected metacodes saved');
            },
            error: function () {
                console.log('failed to save selected metacodes');
            }
        });
    },

    cancelMetacodeSetSwitch: function () {
        var self = Metamaps.Create;
        self.isSwitchingSet = false;

        if (self.selectedMetacodeSet != "metacodeset-custom") {
            $('.customMetacodeList li').addClass('toggledOff');
            self.selectedMetacodes = [];
            self.selectedMetacodeNames = [];
            self.newSelectedMetacodes = [];
            self.newSelectedMetacodeNames = [];
        } else { // custom set is selected
            // reset it to the current actual selection
            $('.customMetacodeList li').addClass('toggledOff');
            for (var i = 0; i < self.selectedMetacodes.length; i++) {
                $('#' + self.selectedMetacodes[i]).removeClass('toggledOff');
            };
            // uses .slice to avoid setting the two arrays to the same actual array
            self.newSelectedMetacodeNames = self.selectedMetacodeNames.slice(0);
            self.newSelectedMetacodes = self.selectedMetacodes.slice(0);
        }
        $('#metacodeSwitchTabs').tabs("option", "active", self.selectedMetacodeSetIndex);
        $('#topic_name').focus();
    },
    newTopic: {
        init: function () {

            $('#topic_name').keyup(function () {
                Metamaps.Create.newTopic.name = $(this).val();
            });

            var topicBloodhound = new Bloodhound({
                datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
                queryTokenizer: Bloodhound.tokenizers.whitespace,
                remote: {
                    url: '/topics/autocomplete_topic?term=%QUERY',
                    wildcard: '%QUERY',
                },
            });

            // initialize the autocomplete results for the metacode spinner
            $('#topic_name').typeahead(
                {
                    highlight: true,
                    minLength: 2,
                },
                [{
                    name: 'topic_autocomplete',
                    limit: 8,
                    display: function (s) { return s.label; },
                    templates: {
                        suggestion: function(s) {
                            return Hogan.compile($('#topicAutocompleteTemplate').html()).render(s);
                        },
                    },
                    source: topicBloodhound,
                }]
            );

            // tell the autocomplete to submit the form with the topic you clicked on if you pick from the autocomplete
            $('#topic_name').bind('typeahead:select', function (event, datum, dataset) {
                Metamaps.Topic.getTopicFromAutocomplete(datum.id);
            });

            // initialize metacode spinner and then hide it
            $("#metacodeImg").CloudCarousel({
                titleBox: $('#metacodeImgTitle'),
                yRadius: 40,
                xRadius: 190,
                xPos: 170,
                yPos: 40,
                speed: 0.3,
                mouseWheel: true,
                bringToFront: true
            });
            $('.new_topic').hide();
        },
        name: null,
        newId: 1,
        beingCreated: false,
        metacode: null,
        x: null,
        y: null,
        addSynapse: false,
        open: function () {
            $('#new_topic').fadeIn('fast', function () {
                $('#topic_name').focus();
            });
            Metamaps.Create.newTopic.beingCreated = true;
            Metamaps.Create.newTopic.name = "";
        },
        hide: function () {
            $('#new_topic').fadeOut('fast');
            $("#topic_name").typeahead('val', '');
            Metamaps.Create.newTopic.beingCreated = false;
        }
    },
    newSynapse: {
        init: function () {
            var self = Metamaps.Create.newSynapse;

            var synapseBloodhound = new Bloodhound({
                datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
                queryTokenizer: Bloodhound.tokenizers.whitespace,
                remote: {
                    url: '/search/synapses?term=%QUERY',
                    wildcard: '%QUERY',
                },
            });
            var existingSynapseBloodhound = new Bloodhound({
                datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
                queryTokenizer: Bloodhound.tokenizers.whitespace,
                remote: {
                    url: '/search/synapses?topic1id=%TOPIC1&topic2id=%TOPIC2',
                    prepare: function(query, settings) {
                      var self = Metamaps.Create.newSynapse;
                      if (Metamaps.Selected.Nodes.length < 2) {
                        settings.url = settings.url.replace("%TOPIC1", self.topic1id).replace("%TOPIC2", self.topic2id);
                        return settings;
                      } else {
                        return null;
                      }
                    },
                },
            });

            // initialize the autocomplete results for synapse creation
            $('#synapse_desc').typeahead(
                {
                    highlight: true,
                    minLength: 2,
                },
                [{
                    name: 'synapse_autocomplete',
                    display: function(s) { return s.label; },
                    templates: {
                        suggestion: function(s) {
                            return Hogan.compile("<div class='genericSynapseDesc'>{{label}}</div>").render(s);
                        },
                    },
                    source: synapseBloodhound,
                },
                {
                    name: 'existing_synapses',
                    limit: 50,
                    display: function(s) { return s.label; },
                    templates: {
                        suggestion: function(s) {
                            return Hogan.compile($('#synapseAutocompleteTemplate').html()).render(s);
                        },
                        header: "<h3>Existing synapses</h3>"
                    },
                    source: existingSynapseBloodhound,
                }]
          );

            $('#synapse_desc').keyup(function (e) {
              var ESC = 27, BACKSPACE = 8, DELETE = 46;
              if (e.keyCode === BACKSPACE && $(this).val() === "" ||
                  e.keyCode === DELETE && $(this).val() === "" ||
                  e.keyCode === ESC) {
                Metamaps.Create.newSynapse.hide();
              }//if
              Metamaps.Create.newSynapse.description = $(this).val();
            });

            $('#synapse_desc').focusout(function() {
              if (Metamaps.Create.newSynapse.beingCreated) {
                Metamaps.Synapse.createSynapseLocally();
              }
            });

            $('#synapse_desc').bind('typeahead:select', function (event, datum, dataset) {
                if (datum.id) { // if they clicked on an existing synapse get it
                    Metamaps.Synapse.getSynapseFromAutocomplete(datum.id);
                }
                else {
                    Metamaps.Create.newSynapse.description = datum.value;
                    Metamaps.Synapse.createSynapseLocally();
                }
            });
        },
        beingCreated: false,
        description: null,
        topic1id: null,
        topic2id: null,
        newSynapseId: null,
        open: function () {
            $('#new_synapse').fadeIn(100, function () {
                $('#synapse_desc').focus();
            });
            Metamaps.Create.newSynapse.beingCreated = true;
        },
        hide: function () {
            $('#new_synapse').fadeOut('fast');
            $("#synapse_desc").typeahead('val', '');
            Metamaps.Create.newSynapse.beingCreated = false;
            Metamaps.Create.newTopic.addSynapse = false;
            Metamaps.Create.newSynapse.topic1id = 0;
            Metamaps.Create.newSynapse.topic2id = 0;
            Metamaps.Mouse.synapseStartCoordinates = [];
            Metamaps.Visualize.mGraph.plot();
        },
    }
}; // end Metamaps.Create


////////////////// TOPIC AND SYNAPSE CARDS //////////////////////////


/*
 *
 *   TOPICCARD
 *
 */
Metamaps.TopicCard = {
    openTopicCard: null, //stores the topic that's currently open
    authorizedToEdit: false, // stores boolean for edit permission for open topic card
    init: function () {
        var self = Metamaps.TopicCard;

        // initialize best_in_place editing
        $('.authenticated div.permission.canEdit .best_in_place').best_in_place();

        Metamaps.TopicCard.generateShowcardHTML = Hogan.compile($('#topicCardTemplate').html());

        // initialize topic card draggability and resizability
        $('.showcard').draggable({
            handle: ".metacodeImage"
        });

        embedly('on', 'card.rendered', self.embedlyCardRendered);
    },
    /**
     * Will open the Topic Card for the node that it's passed
     * @param {$jit.Graph.Node} node
     */
    showCard: function (node) {
        var self = Metamaps.TopicCard;

        var topic = node.getData('topic');

        self.openTopicCard = topic;
        self.authorizedToEdit = topic.authorizeToEdit(Metamaps.Active.Mapper);
        //populate the card that's about to show with the right topics data
        self.populateShowCard(topic);
        $('.showcard').fadeIn('fast');
    },
    hideCard: function () {
        var self = Metamaps.TopicCard;

        $('.showcard').fadeOut('fast');
        self.openTopicCard = null;
        self.authorizedToEdit = false;
    },
    embedlyCardRendered: function (iframe) {
        var self = Metamaps.TopicCard;

        $('#embedlyLinkLoader').hide();

        // means that the embedly call returned 404 not found
        if ($('#embedlyLink')[0]) {
            $('#embedlyLink').css('display', 'block').fadeIn('fast');
            $('.embeds').addClass('nonEmbedlyLink');
        }

        $('.CardOnGraph').addClass('hasAttachment');
        if (self.authorizedToEdit) {
            $('.embeds').append('<div id="linkremove"></div>');
            $('#linkremove').click(self.removeLink);
        }
    },
    removeLink: function () {
        var self = Metamaps.TopicCard;
        self.openTopicCard.save({
            link: null
        });
        $('.embeds').empty().removeClass('nonEmbedlyLink');
        $('#addLinkInput input').val("");
        $('.attachments').removeClass('hidden');
        $('.CardOnGraph').removeClass('hasAttachment');
    },
    bindShowCardListeners: function (topic) {
        var self = Metamaps.TopicCard;
        var showCard = document.getElementById('showcard');

        var authorized = self.authorizedToEdit;

        // get mapper image
        var setMapperImage = function (mapper) {
            $('.contributorIcon').attr('src', mapper.get('image'));
        };
        Metamaps.Mapper.get(topic.get('user_id'), setMapperImage);

        // starting embed.ly
        var resetFunc = function () {
            $('#addLinkInput input').val("");
            $('#addLinkInput input').focus();
        };
        var inputEmbedFunc = function (event) {

            var element = this;
            setTimeout(function () {
                var text = $(element).val();
                if (event.type=="paste" || (event.type=="keyup" && event.which==13)){
                  // TODO evaluate converting this to '//' no matter what (infer protocol)
                  if (text.slice(0, 7) !== 'http://' &&
                      text.slice(0, 8) !== 'https://' &&
                      text.slice(0, 2) !== '//') {
                        text='//'+text;
                    }
                    topic.save({
                        link: text
                    });
                    var embedlyEl = $('<a/>', {
                        id: 'embedlyLink',
                        'data-card-description': '0',
                        href: text
                    }).html(text);
                    $('.attachments').addClass('hidden');
                    $('.embeds').append(embedlyEl);
                    $('.embeds').append('<div id="embedlyLinkLoader"></div>');
                    var loader = new CanvasLoader('embedlyLinkLoader');
                    loader.setColor('#4fb5c0'); // default is '#000000'
                    loader.setDiameter(28); // default is 40
                    loader.setDensity(41); // default is 40
                    loader.setRange(0.9); // default is 1.3
                    loader.show(); // Hidden by default
                    var e = embedly('card', document.getElementById('embedlyLink'));
                    if (!e) {
                        self.handleInvalidLink();
                    }
                }
            }, 100);
        };
        $('#addLinkReset').click(resetFunc);
        $('#addLinkInput input').bind("paste keyup",inputEmbedFunc);

        // initialize the link card, if there is a link
        if (topic.get('link') && topic.get('link') !== '') {
            var loader = new CanvasLoader('embedlyLinkLoader');
            loader.setColor('#4fb5c0'); // default is '#000000'
            loader.setDiameter(28); // default is 40
            loader.setDensity(41); // default is 40
            loader.setRange(0.9); // default is 1.3
            loader.show(); // Hidden by default
            var e = embedly('card', document.getElementById('embedlyLink'));
            if (!e) {
                self.handleInvalidLink();
            }
        }


        var selectingMetacode = false;
        // attach the listener that shows the metacode title when you hover over the image
        $('.showcard .metacodeImage').mouseenter(function () {
            $('.showcard .icon').css('z-index', '4');
            $('.showcard .metacodeTitle').show();
        });
        $('.showcard .linkItem.icon').mouseleave(function () {
            if (!selectingMetacode) {
                $('.showcard .metacodeTitle').hide();
                $('.showcard .icon').css('z-index', '1');
            }
        });

        var metacodeLiClick = function () {
            selectingMetacode = false;
            var metacodeId = parseInt($(this).attr('data-id'));
            var metacode = Metamaps.Metacodes.get(metacodeId);
            $('.CardOnGraph').find('.metacodeTitle').html(metacode.get('name'))
                .append('<div class="expandMetacodeSelect"></div>')
                .attr('class', 'metacodeTitle mbg' + metacode.id);
            $('.CardOnGraph').find('.metacodeImage').css('background-image', 'url(' + metacode.get('icon') + ')');
            topic.save({
                metacode_id: metacode.id
            });
            Metamaps.Visualize.mGraph.plot();
            $('.metacodeSelect').hide().removeClass('onRightEdge onBottomEdge');
            $('.metacodeTitle').hide();
            $('.showcard .icon').css('z-index', '1');
        };

        var openMetacodeSelect = function (event) {
            var windowWidth;
            var showcardLeft;
            var TOPICCARD_WIDTH = 300;
            var METACODESELECT_WIDTH = 404;
            var distanceFromEdge;

            var MAX_METACODELIST_HEIGHT = 270;
            var windowHeight;
            var showcardTop;
            var topicTitleHeight;
            var distanceFromBottom;

            if (!selectingMetacode) {
                selectingMetacode = true;

                // this is to make sure the metacode
                // select is accessible onscreen, when opened
                // while topic card is close to the right
                // edge of the screen
                windowWidth = $(window).width();
                showcardLeft = parseInt($('.showcard').css('left'));
                distanceFromEdge = windowWidth - (showcardLeft + TOPICCARD_WIDTH);
                if (distanceFromEdge < METACODESELECT_WIDTH) {
                    $('.metacodeSelect').addClass('onRightEdge');
                }

                // this is to make sure the metacode
                // select is accessible onscreen, when opened
                // while topic card is close to the bottom
                // edge of the screen
                windowHeight = $(window).height();
                showcardTop = parseInt($('.showcard').css('top'));
                topicTitleHeight = $('.showcard .title').height() + parseInt($('.showcard .title').css('padding-top')) + parseInt($('.showcard .title').css('padding-bottom'));
                heightOfSetList = $('.showcard .metacodeSelect').height();
                distanceFromBottom = windowHeight - (showcardTop + topicTitleHeight);
                if (distanceFromBottom < MAX_METACODELIST_HEIGHT) {
                    $('.metacodeSelect').addClass('onBottomEdge');
                }

                $('.metacodeSelect').show();
                event.stopPropagation();
            }
        };

        var hideMetacodeSelect = function () {
            selectingMetacode = false;
            $('.metacodeSelect').hide().removeClass('onRightEdge onBottomEdge');
            $('.metacodeTitle').hide();
            $('.showcard .icon').css('z-index', '1');
        };

        if (authorized) {
            $('.showcard .metacodeTitle').click(openMetacodeSelect);
            $('.showcard').click(hideMetacodeSelect);
            $('.metacodeSelect > ul > li').click(function (event){
                event.stopPropagation();
            });
            $('.metacodeSelect li li').click(metacodeLiClick);

            var bipName = $(showCard).find('.best_in_place_name');
            bipName.bind("best_in_place:activate", function () {
                var $el = bipName.find('textarea');
                var el = $el[0];

                $el.attr('maxlength', '140');

                $('.showcard .title').append('<div class="nameCounter forTopic"></div>');

                var callback = function (data) {
                    $('.nameCounter.forTopic').html(data.all + '/140');
                };
                Countable.live(el, callback);
            });
            bipName.bind("best_in_place:deactivate", function () {
                $('.nameCounter.forTopic').remove();
            });

            //bind best_in_place ajax callbacks
            bipName.bind("ajax:success", function () {
                var name = Metamaps.Util.decodeEntities($(this).html());
                topic.set("name", name);
                topic.trigger('saved');
            });

            $(showCard).find('.best_in_place_desc').bind("ajax:success", function () {
                this.innerHTML = this.innerHTML.replace(/\r/g, '');
                var desc = $(this).html() === $(this).data('nil') ? "" : $(this).html();
                topic.set("desc", desc);
                topic.trigger('saved');
            });
        }


        var permissionLiClick = function (event) {
            selectingPermission = false;
            var permission = $(this).attr('class');
            topic.save({
                permission: permission
            });
            $('.showcard .mapPerm').removeClass('co pu pr minimize').addClass(permission.substring(0, 2));
            $('.showcard .permissionSelect').remove();
            event.stopPropagation();
        };

        var openPermissionSelect = function (event) {
            if (!selectingPermission) {
                selectingPermission = true;
                $(this).addClass('minimize'); // this line flips the drop down arrow to a pull up arrow
                if ($(this).hasClass('co')) {
                    $(this).append('<ul class="permissionSelect"><li class="public"></li><li class="private"></li></ul>');
                } else if ($(this).hasClass('pu')) {
                    $(this).append('<ul class="permissionSelect"><li class="commons"></li><li class="private"></li></ul>');
                } else if ($(this).hasClass('pr')) {
                    $(this).append('<ul class="permissionSelect"><li class="commons"></li><li class="public"></li></ul>');
                }
                $('.showcard .permissionSelect li').click(permissionLiClick);
                event.stopPropagation();
            }
        };

        var hidePermissionSelect = function () {
            selectingPermission = false;
            $('.showcard .yourTopic .mapPerm').removeClass('minimize'); // this line flips the pull up arrow to a drop down arrow
            $('.showcard .permissionSelect').remove();
        };
        // ability to change permission
        var selectingPermission = false;
        if (topic.authorizePermissionChange(Metamaps.Active.Mapper)) {
            $('.showcard .yourTopic .mapPerm').click(openPermissionSelect);
            $('.showcard').click(hidePermissionSelect);
        }

        $('.links .mapCount').unbind().click(function(event){
            $('.mapCount .tip').toggle();
            $('.showcard .hoverTip').toggleClass('hide');
            event.stopPropagation();
        });
        $('.mapCount .tip').unbind().click(function(event){
            event.stopPropagation();
        });
        $('.showcard').unbind('.hideTip').bind('click.hideTip', function(){
            $('.mapCount .tip').hide();
            $('.showcard .hoverTip').removeClass('hide');
        });

        $('.mapCount .tip li a').click(Metamaps.Router.intercept);

        var originalText = $('.showMore').html();
        $('.mapCount .tip .showMore').unbind().toggle(
            function(event){
                $('.extraText').toggleClass("hideExtra");
                $('.showMore').html('Show less...');
            },
            function(event){
                $('.extraText').toggleClass("hideExtra");
                $('.showMore').html(originalText);
            });

        $('.mapCount .tip showMore').unbind().click(function(event){
            event.stopPropagation();
        });
    },
    handleInvalidLink: function() {
        var self = Metamaps.TopicCard;

        self.removeLink();
        Metamaps.GlobalUI.notifyUser("Invalid link");
    },
    populateShowCard: function (topic) {
        var self = Metamaps.TopicCard;

        var showCard = document.getElementById('showcard');

        $(showCard).find('.permission').remove();

        var topicForTemplate = self.buildObject(topic);
        var html = self.generateShowcardHTML.render(topicForTemplate);

        if (topic.authorizeToEdit(Metamaps.Active.Mapper)) {
            var perm = document.createElement('div');

            var string = 'permission canEdit';
            if (topic.authorizePermissionChange(Metamaps.Active.Mapper)) string += ' yourTopic';
            perm.className = string;
            perm.innerHTML = html;
            showCard.appendChild(perm);
        } else {
            var perm = document.createElement('div');
            perm.className = 'permission cannotEdit';
            perm.innerHTML = html;
            showCard.appendChild(perm);
        }

        Metamaps.TopicCard.bindShowCardListeners(topic);
    },
    generateShowcardHTML: null, // will be initialized into a Hogan template within init function
    //generateShowcardHTML
    buildObject: function (topic) {
        var self=Metamaps.TopicCard;

        var nodeValues = {};

        var authorized = topic.authorizeToEdit(Metamaps.Active.Mapper);

        if (!authorized) {

        } else {

        }

        var desc_nil = "Click to add description...";

        nodeValues.attachmentsHidden = '';
        if (topic.get('link') && topic.get('link')!== '') {
            nodeValues.embeds = '<a href="' + topic.get('link') + '" id="embedlyLink" target="_blank" data-card-description="0">';
            nodeValues.embeds += topic.get('link');
            nodeValues.embeds += '</a><div id="embedlyLinkLoader"></div>';
            nodeValues.attachmentsHidden = 'hidden';
            nodeValues.hasAttachment = "hasAttachment";
        }
        else {
            nodeValues.embeds = '';
            nodeValues.hasAttachment = '';
        }

        if (authorized) {
            nodeValues.attachments = '<div class="addLink"><div id="addLinkIcon"></div>';
            nodeValues.attachments += '<div id="addLinkInput"><input placeholder="Enter or paste a link"></input>';
            nodeValues.attachments += '<div id="addLinkReset"></div></div></div>';
        } else {
            nodeValues.attachmentsHidden = 'hidden';
            nodeValues.attachments = '';
        }

        var inmapsAr = topic.get("inmaps");
        var inmapsLinks = topic.get("inmapsLinks");
        nodeValues.inmaps ='';
        if (inmapsAr.length < 6) {
            for (i = 0; i < inmapsAr.length; i++) {
                var url = "/maps/" + inmapsLinks[i];
                nodeValues.inmaps += '<li><a href="' + url + '">'  + inmapsAr[i]+ '</a></li>';
            }
        }
        else {
            for (i = 0; i < 5; i++){
                var url = "/maps/" + inmapsLinks[i];
                nodeValues.inmaps += '<li><a href="' + url + '">' + inmapsAr[i] + '</a></li>';
            }
            extra = inmapsAr.length - 5;
            nodeValues.inmaps += '<li><span class="showMore">See ' + extra + ' more...</span></li>'
            for (i = 5; i < inmapsAr.length; i++){
                var url = "/maps/" + inmapsLinks[i];
                nodeValues.inmaps += '<li class="hideExtra extraText"><a href="' + url + '">' + inmapsAr[i]+ '</a></li>';
            }
        }
        nodeValues.permission = topic.get("permission");
        nodeValues.mk_permission = topic.get("permission").substring(0, 2);
        nodeValues.map_count = topic.get("map_count").toString();
        nodeValues.synapse_count = topic.get("synapse_count").toString();
        nodeValues.id = topic.isNew() ? topic.cid : topic.id;
        nodeValues.metacode = topic.getMetacode().get("name");
        nodeValues.metacode_class = 'mbg' + topic.get('metacode_id');
        nodeValues.imgsrc = topic.getMetacode().get("icon");
        nodeValues.name = topic.get("name");
        nodeValues.userid = topic.get("user_id");
        nodeValues.username = topic.get("user_name");
        nodeValues.date = topic.getDate();
        // the code for this is stored in /views/main/_metacodeOptions.html.erb
        nodeValues.metacode_select = $('#metacodeOptions').html();
        nodeValues.desc_nil = desc_nil;
        nodeValues.desc = (topic.get("desc") == "" && authorized) ? desc_nil : topic.get("desc");
        return nodeValues;
    }
}; // end Metamaps.TopicCard


/*
 *
 *   SYNAPSECARD
 *
 */
Metamaps.SynapseCard = {
    openSynapseCard: null,
    showCard: function (edge, e) {
        var self = Metamaps.SynapseCard;

        //reset so we don't interfere with other edges, but first, save its x and y
        var myX = $('#edit_synapse').css('left');
        var myY = $('#edit_synapse').css('top');
        $('#edit_synapse').remove();

        //so label is missing while editing
        Metamaps.Control.deselectEdge(edge);

        var index = edge.getData("displayIndex") ? edge.getData("displayIndex") : 0;
        var synapse = edge.getData('synapses')[index]; // for now, just get the first synapse

        //create the wrapper around the form elements, including permissions
        //classes to make best_in_place happy
        var edit_div = document.createElement('div');
        edit_div.innerHTML = '<div id="editSynUpperBar"></div><div id="editSynLowerBar"></div>';
        edit_div.setAttribute('id', 'edit_synapse');
        if (synapse.authorizeToEdit(Metamaps.Active.Mapper)) {
            edit_div.className = 'permission canEdit';
            edit_div.className += synapse.authorizePermissionChange(Metamaps.Active.Mapper) ? ' yourEdge' : '';
        } else {
            edit_div.className = 'permission cannotEdit';
        }
        $('#wrapper').append(edit_div);

        self.populateShowCard(edge, synapse);

        //drop it in the right spot, activate it
        $('#edit_synapse').css('position', 'absolute');
        if (e) {
            $('#edit_synapse').css('left', e.clientX);
            $('#edit_synapse').css('top', e.clientY);
        } else {
            $('#edit_synapse').css('left', myX);
            $('#edit_synapse').css('top', myY);
        }
        //$('#edit_synapse_name').click(); //required in case name is empty
        //$('#edit_synapse_name input').focus();
        $('#edit_synapse').show();

        self.openSynapseCard = edge;
    },

    hideCard: function () {
        $('#edit_synapse').remove();
        Metamaps.SynapseCard.openSynapseCard = null;
    },

    populateShowCard: function (edge, synapse) {
        var self = Metamaps.SynapseCard;

        self.add_synapse_count(edge);
        self.add_desc_form(synapse);
        self.add_drop_down(edge, synapse);
        self.add_user_info(synapse);
        self.add_perms_form(synapse);
        self.add_direction_form(synapse);
    },
    add_synapse_count: function (edge) {
        var count = edge.getData("synapses").length;

        $('#editSynUpperBar').append('<div id="synapseCardCount">' + count + '</div>')
    },
    add_desc_form: function (synapse) {
        var data_nil = 'Click to add description.';

        // TODO make it so that this would work even in sandbox mode,
        // currently with Best_in_place it won't

        //desc editing form
        $('#editSynUpperBar').append('<div id="edit_synapse_desc"></div>');
        $('#edit_synapse_desc').attr('class', 'best_in_place best_in_place_desc');
        $('#edit_synapse_desc').attr('data-object', 'synapse');
        $('#edit_synapse_desc').attr('data-attribute', 'desc');
        $('#edit_synapse_desc').attr('data-type', 'textarea');
        $('#edit_synapse_desc').attr('data-nil', data_nil);
        $('#edit_synapse_desc').attr('data-url', '/synapses/' + synapse.id);
        $('#edit_synapse_desc').html(synapse.get("desc"));

        //if edge data is blank or just whitespace, populate it with data_nil
        if ($('#edit_synapse_desc').html().trim() == '') {
            if (synapse.authorizeToEdit(Metamaps.Active.Mapper)) {
                $('#edit_synapse_desc').html(data_nil);
            }
            else {
                $('#edit_synapse_desc').html("(no description)");
            }
        }

        $('#edit_synapse_desc').bind("ajax:success", function () {
            var desc = $(this).html();
            if (desc == data_nil) {
                synapse.set("desc", '');
            } else {
                synapse.set("desc", desc);
            }
            synapse.trigger('saved');
            Metamaps.Control.selectEdge(synapse.get('edge'));
            Metamaps.Visualize.mGraph.plot();
        });
    },
    add_drop_down: function (edge, synapse) {
        var list, i, synapses, l, desc;

        synapses = edge.getData("synapses");
        l = synapses.length;

        if (l > 1) {
            // append the element that you click to show dropdown select
            $('#editSynUpperBar').append('<div id="dropdownSynapses"></div>');
            $('#dropdownSynapses').click(function(e){
                e.preventDefault();
                e.stopPropagation(); // stop it from immediately closing it again
                $('#switchSynapseList').toggle();
            });
            // hide the dropdown again if you click anywhere else on the synapse card
            $('#edit_synapse').click(function(){
                $('#switchSynapseList').hide();
            });

            // generate the list of other synapses
            list = '<ul id="switchSynapseList">';
            for (i = 0; i < l; i++) {
                if (synapses[i] !== synapse) { // don't add the current one to the list
                    desc = synapses[i].get('desc');
                    desc = desc === "" || desc === null ? "(no description)" : desc;
                    list += '<li data-synapse-index="' + i + '">' + desc + '</li>';
                }
            }
            list += '</ul>'
            // add the list of the other synapses
            $('#editSynLowerBar').append(list);

            // attach click listeners to list items that
            // will cause it to switch the displayed synapse
            // when you click it
            $('#switchSynapseList li').click(function(e){
                e.stopPropagation();
                var index = parseInt($(this).attr('data-synapse-index'));
                edge.setData('displayIndex', index);
                Metamaps.Visualize.mGraph.plot();
                Metamaps.SynapseCard.showCard(edge, false);
            });
        }
    },
    add_user_info: function (synapse) {
        var u = '<div id="edgeUser" class="hoverForTip">';
        u += '<a href="/explore/mapper/' + synapse.get("user_id") + '"> <img src="" width="24" height="24" /></a>'
        u += '<div class="tip">' + synapse.get("user_name") + '</div></div>';
        $('#editSynLowerBar').append(u);

        // get mapper image
        var setMapperImage = function (mapper) {
            $('#edgeUser img').attr('src', mapper.get('image'));
        };
        Metamaps.Mapper.get(synapse.get('user_id'), setMapperImage);
    },

    add_perms_form: function (synapse) {
        //permissions - if owner, also allow permission editing
        $('#editSynLowerBar').append('<div class="mapPerm ' + synapse.get("permission").substring(0, 2) + '"></div>');

        // ability to change permission
        var selectingPermission = false;
        var permissionLiClick = function (event) {
            selectingPermission = false;
            var permission = $(this).attr('class');
            synapse.save({
                permission: permission
            });
            $('#edit_synapse .mapPerm').removeClass('co pu pr minimize').addClass(permission.substring(0, 2));
            $('#edit_synapse .permissionSelect').remove();
            event.stopPropagation();
        };

        var openPermissionSelect = function (event) {
            if (!selectingPermission) {
                selectingPermission = true;
                $(this).addClass('minimize'); // this line flips the drop down arrow to a pull up arrow
                if ($(this).hasClass('co')) {
                    $(this).append('<ul class="permissionSelect"><li class="public"></li><li class="private"></li></ul>');
                } else if ($(this).hasClass('pu')) {
                    $(this).append('<ul class="permissionSelect"><li class="commons"></li><li class="private"></li></ul>');
                } else if ($(this).hasClass('pr')) {
                    $(this).append('<ul class="permissionSelect"><li class="commons"></li><li class="public"></li></ul>');
                }
                $('#edit_synapse .permissionSelect li').click(permissionLiClick);
                event.stopPropagation();
            }
        };

        var hidePermissionSelect = function () {
            selectingPermission = false;
            $('#edit_synapse.yourEdge .mapPerm').removeClass('minimize'); // this line flips the pull up arrow to a drop down arrow
            $('#edit_synapse .permissionSelect').remove();
        };

        if (synapse.authorizePermissionChange(Metamaps.Active.Mapper)) {
            $('#edit_synapse.yourEdge .mapPerm').click(openPermissionSelect);
            $('#edit_synapse').click(hidePermissionSelect);
        }
    }, //add_perms_form

    add_direction_form: function (synapse) {
        //directionality checkboxes
        $('#editSynLowerBar').append('<div id="edit_synapse_left"></div>');
        $('#editSynLowerBar').append('<div id="edit_synapse_right"></div>');

        var edge = synapse.get('edge');

        //determine which node is to the left and the right
        //if directly in a line, top is left
        if (edge.nodeFrom.pos.x < edge.nodeTo.pos.x ||
            edge.nodeFrom.pos.x == edge.nodeTo.pos.x &&
            edge.nodeFrom.pos.y < edge.nodeTo.pos.y) {
            var left = edge.nodeTo.getData("topic");
            var right = edge.nodeFrom.getData("topic");
        } else {
            var left = edge.nodeFrom.getData("topic");
            var right = edge.nodeTo.getData("topic");
        }

        /*
         * One node is actually on the left onscreen. Call it left, & the other right.
         * If category is from-to, and that node is first, check the 'right' checkbox.
         * Else check the 'left' checkbox since the arrow is incoming.
         */

        var directionCat = synapse.get('category'); //both, none, from-to
        if (directionCat == 'from-to') {
            var from_to = [synapse.get("node1_id"), synapse.get("node2_id")];
            if (from_to[0] == left.id) {
                //check left checkbox
                $('#edit_synapse_left').addClass('checked');
            } else {
                //check right checkbox
                $('#edit_synapse_right').addClass('checked');
            }
        } else if (directionCat == 'both') {
            //check both checkboxes
            $('#edit_synapse_left').addClass('checked');
            $('#edit_synapse_right').addClass('checked');
        }

        if (synapse.authorizeToEdit(Metamaps.Active.Mapper)) {
            $('#edit_synapse_left, #edit_synapse_right').click(function () {

                $(this).toggleClass('checked');

                var leftChecked = $('#edit_synapse_left').is('.checked');
                var rightChecked = $('#edit_synapse_right').is('.checked');

                var dir = synapse.getDirection();
                var dirCat = 'none';
                if (leftChecked && rightChecked) {
                    dirCat = 'both';
                } else if (!leftChecked && rightChecked) {
                    dirCat = 'from-to';
                    dir = [right.id, left.id];
                } else if (leftChecked && !rightChecked) {
                    dirCat = 'from-to';
                    dir = [left.id, right.id];
                }

                synapse.save({
                    category: dirCat,
                    node1_id: dir[0],
                    node2_id: dir[1]
                });
                Metamaps.Visualize.mGraph.plot();
            });
        } // if
    } //add_direction_form
}; // end Metamaps.SynapseCard


////////////////////// END TOPIC AND SYNAPSE CARDS //////////////////////////////////


/*
 *
 *   VISUALIZE
 *
 */
Metamaps.Visualize = {
    mGraph: null, // a reference to the graph object.
    cameraPosition: null, // stores the camera position when using a 3D visualization
    type: "ForceDirected", // the type of graph we're building, could be "RGraph", "ForceDirected", or "ForceDirected3D"
    loadLater: false, // indicates whether there is JSON that should be loaded right in the offset, or whether to wait till the first topic is created
    init: function () {
        var self = Metamaps.Visualize;
        // disable awkward dragging of the canvas element that would sometimes happen
        $('#infovis-canvas').on('dragstart', function (event) {
            event.preventDefault();
        });

        // prevent touch events on the canvas from default behaviour
        $("#infovis-canvas").bind('touchstart', function (event) {
            event.preventDefault();
            self.mGraph.events.touched = true;
        });

        // prevent touch events on the canvas from default behaviour
        $("#infovis-canvas").bind('touchmove', function (event) {
            //Metamaps.JIT.touchPanZoomHandler(event);
        });

        // prevent touch events on the canvas from default behaviour
        $("#infovis-canvas").bind('touchend touchcancel', function (event) {
            lastDist = 0;
            if (!self.mGraph.events.touchMoved && !Metamaps.Touch.touchDragNode) Metamaps.TopicCard.hideCurrentCard();
            self.mGraph.events.touched = self.mGraph.events.touchMoved = false;
            Metamaps.Touch.touchDragNode = false;
        });
    },
    computePositions: function () {
        var self = Metamaps.Visualize,
            mapping;

        if (self.type == "RGraph") {
            var i, l, startPos, endPos, topic, synapse;

            self.mGraph.graph.eachNode(function (n) {
                topic = Metamaps.Topics.get(n.id);
                topic.set({ node: n }, { silent: true });
                topic.updateNode();

                n.eachAdjacency(function (edge) {
                    if(!edge.getData('init')) {
                        edge.setData('init', true);

                        l = edge.getData('synapseIDs').length;
                        for (i = 0; i < l; i++) {
                            synapse = Metamaps.Synapses.get(edge.getData('synapseIDs')[i]);
                            synapse.set({ edge: edge }, { silent: true });
                            synapse.updateEdge();
                        }
                    }
                });

                var pos = n.getPos();
                pos.setc(-200, -200);
            });
            self.mGraph.compute('end');
        } else if (self.type == "ForceDirected") {
            var i, l, startPos, endPos, topic, synapse;

            self.mGraph.graph.eachNode(function (n) {
                topic = Metamaps.Topics.get(n.id);
                topic.set({ node: n }, { silent: true });
                topic.updateNode();
                mapping = topic.getMapping();

                n.eachAdjacency(function (edge) {
                    if(!edge.getData('init')) {
                        edge.setData('init', true);

                        l = edge.getData('synapseIDs').length;
                        for (i = 0; i < l; i++) {
                            synapse = Metamaps.Synapses.get(edge.getData('synapseIDs')[i]);
                            synapse.set({ edge: edge }, { silent: true });
                            synapse.updateEdge();
                        }
                    }
                });

                startPos = new $jit.Complex(0, 0);
                endPos = new $jit.Complex(mapping.get('xloc'), mapping.get('yloc'));
                n.setPos(startPos, 'start');
                n.setPos(endPos, 'end');
            });
        } else if (self.type == "ForceDirected3D") {
            self.mGraph.compute();
        }
    },
    /**
     * render does the heavy lifting of creating the engine that renders the graph with the properties we desire
     *
     */
    render: function () {
        var self = Metamaps.Visualize, RGraphSettings, FDSettings;

        if (self.type == "RGraph" && (!self.mGraph || self.mGraph instanceof $jit.ForceDirected)) {

            RGraphSettings = $.extend(true, {}, Metamaps.JIT.ForceDirected.graphSettings);

            $jit.RGraph.Plot.NodeTypes.implement(Metamaps.JIT.ForceDirected.nodeSettings);
            $jit.RGraph.Plot.EdgeTypes.implement(Metamaps.JIT.ForceDirected.edgeSettings);

            RGraphSettings.width = $(document).width();
            RGraphSettings.height = $(document).height();
            RGraphSettings.background = Metamaps.JIT.RGraph.background;
            RGraphSettings.levelDistance = Metamaps.JIT.RGraph.levelDistance;

            self.mGraph = new $jit.RGraph(RGraphSettings);

        } else if (self.type == "ForceDirected" && (!self.mGraph || self.mGraph instanceof $jit.RGraph)) {

            FDSettings = $.extend(true, {}, Metamaps.JIT.ForceDirected.graphSettings);

            $jit.ForceDirected.Plot.NodeTypes.implement(Metamaps.JIT.ForceDirected.nodeSettings);
            $jit.ForceDirected.Plot.EdgeTypes.implement(Metamaps.JIT.ForceDirected.edgeSettings);

            FDSettings.width = $('body').width();
            FDSettings.height = $('body').height();

            self.mGraph = new $jit.ForceDirected(FDSettings);

        } else if (self.type == "ForceDirected3D" && !self.mGraph) {
            // init ForceDirected3D
            self.mGraph = new $jit.ForceDirected3D(Metamaps.JIT.ForceDirected3D.graphSettings);
            self.cameraPosition = self.mGraph.canvas.canvases[0].camera.position;
        }
        else {
            self.mGraph.graph.empty();
        }

        function runAnimation() {
            Metamaps.Loading.hide();
            // load JSON data, if it's not empty
            if (!self.loadLater) {
                //load JSON data.
                var rootIndex = 0;
                if (Metamaps.Active.Topic) {
                    var node = _.find(Metamaps.JIT.vizData, function(node){
                        return node.id === Metamaps.Active.Topic.id;
                    });
                    rootIndex = _.indexOf(Metamaps.JIT.vizData, node);
                }
                self.mGraph.loadJSON(Metamaps.JIT.vizData, rootIndex);
                //compute positions and plot.
                self.computePositions();
                self.mGraph.busy = true;
                if (self.type == "RGraph") {
                    self.mGraph.fx.animate(Metamaps.JIT.RGraph.animate);
                } else if (self.type == "ForceDirected") {
                    self.mGraph.animate(Metamaps.JIT.ForceDirected.animateSavedLayout);
                } else if (self.type == "ForceDirected3D") {
                    self.mGraph.animate(Metamaps.JIT.ForceDirected.animateFDLayout);
                }
            }
        }
        // hold until all the needed metacode images are loaded
        // hold for a maximum of 80 passes, or 4 seconds of waiting time
        var tries = 0;
        function hold() {
            var unique = _.uniq(Metamaps.Topics.models, function (metacode) { return metacode.get('metacode_id'); }),
                requiredMetacodes = _.map(unique, function (metacode) { return metacode.get('metacode_id'); }),
                loadedCount = 0;

            _.each(requiredMetacodes, function (metacode_id) {
                var metacode = Metamaps.Metacodes.get(metacode_id),
                    img = metacode ? metacode.get('image') : false;

                if (img && (img.complete || (typeof img.naturalWidth !== "undefined" && img.naturalWidth !== 0))) {
                    loadedCount += 1;
                }
            });

            if (loadedCount === requiredMetacodes.length || tries > 80) runAnimation();
            else setTimeout(function(){ tries++; hold() }, 50);
        }
        hold();

        // update the url now that the map is ready
        clearTimeout(Metamaps.Router.timeoutId);
        Metamaps.Router.timeoutId = setTimeout(function(){
            var m = Metamaps.Active.Map;
            var t = Metamaps.Active.Topic;

            if (m && window.location.pathname !== "/maps/" + m.id) {
                Metamaps.Router.navigate("/maps/" + m.id);
            }
            else if (t && window.location.pathname !== "/topics/" + t.id) {
                Metamaps.Router.navigate("/topics/" + t.id);
            }
        }, 800);

    }
}; // end Metamaps.Visualize


/*
 *
 *   UTIL
 *
 */
Metamaps.Util = {
    // helper function to determine how many lines are needed
    // Line Splitter Function
    // copyright Stephen Chapman, 19th April 2006
    // you may copy this code but please keep the copyright notice as well
    splitLine: function (st, n) {
        var b = '';
        var s = st ? st : '';
        while (s.length > n) {
            var c = s.substring(0, n);
            var d = c.lastIndexOf(' ');
            var e = c.lastIndexOf('\n');
            if (e != -1) d = e;
            if (d == -1) d = n;
            b += c.substring(0, d) + '\n';
            s = s.substring(d + 1);
        }
        return b + s;
    },
    nowDateFormatted: function () {
        var date = new Date(Date.now());
        var month = (date.getMonth() + 1) < 10 ? '0' + (date.getMonth() + 1) : (date.getMonth() + 1);
        var day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();
        var year = date.getFullYear();

        return month + '/' + day + '/' + year;
    },
    decodeEntities: function (desc) {
        var str, temp = document.createElement('p');
        temp.innerHTML = desc; //browser handles the topics
        str = temp.textContent || temp.innerText;
        temp = null; //delete the element;
        return str;
    }, //decodeEntities
    getDistance: function (p1, p2) {
        return Math.sqrt(Math.pow((p2.x - p1.x), 2) + Math.pow((p2.y - p1.y), 2));
    },
    coordsToPixels: function (coords) {
        if (Metamaps.Visualize.mGraph) {
            var canvas = Metamaps.Visualize.mGraph.canvas,
                s = canvas.getSize(),
                p = canvas.getPos(),
                ox = canvas.translateOffsetX,
                oy = canvas.translateOffsetY,
                sx = canvas.scaleOffsetX,
                sy = canvas.scaleOffsetY;
            var pixels = {
              x: (coords.x / (1/sx)) + p.x + s.width/2 + ox,
              y: (coords.y / (1/sy)) + p.y + s.height/2 + oy
            };
            return pixels;
        }
        else {
            return {
                x: 0,
                y: 0
            };
        }
    },
    pixelsToCoords: function (pixels) {
        var coords;
        if (Metamaps.Visualize.mGraph) {
            var canvas = Metamaps.Visualize.mGraph.canvas,
                s = canvas.getSize(),
                p = canvas.getPos(),
                ox = canvas.translateOffsetX,
                oy = canvas.translateOffsetY,
                sx = canvas.scaleOffsetX,
                sy = canvas.scaleOffsetY;
            coords = {
                x: (pixels.x - p.x - s.width/2 - ox) * (1/sx),
                y: (pixels.y - p.y - s.height/2 - oy) * (1/sy),
            };
        }
        else {
            coords = {
                x: 0,
                y: 0
            };
        }
        return coords;
    },
    getPastelColor: function () {
        var r = (Math.round(Math.random()* 127) + 127).toString(16);
        var g = (Math.round(Math.random()* 127) + 127).toString(16);
        var b = (Math.round(Math.random()* 127) + 127).toString(16);
        return Metamaps.Util.colorLuminance('#' + r + g + b, -0.4);
    },
    // darkens a hex value by 'lum' percentage
    colorLuminance: function (hex, lum) {

        // validate hex string
        hex = String(hex).replace(/[^0-9a-f]/gi, '');
        if (hex.length < 6) {
            hex = hex[0]+hex[0]+hex[1]+hex[1]+hex[2]+hex[2];
        }
        lum = lum || 0;

        // convert to decimal and change luminosity
        var rgb = "#", c, i;
        for (i = 0; i < 3; i++) {
            c = parseInt(hex.substr(i*2,2), 16);
            c = Math.round(Math.min(Math.max(0, c + (c * lum)), 255)).toString(16);
            rgb += ("00"+c).substr(c.length);
        }

        return rgb;
    },
    generateOptionsList: function (data) {
        var newlist = "";
        for (var i = 0; i < data.length; i++) {
            newlist = newlist + '<option value="' + data[i]['id'] + '">' + data[i]['1'][1] + '</option>';
        }
        return newlist;
    },
    checkURLisImage: function (url) {
        // when the page reloads the following regular expression will be screwed up
        // please replace it with this one before you save: /*backslashhere*.(jpeg|jpg|gif|png)$/
        return (url.match(/\.(jpeg|jpg|gif|png)$/) != null);
    },
    checkURLisYoutubeVideo: function (url) {
        return (url.match(/^https?:\/\/(?:www\.)?youtube.com\/watch\?(?=[^?]*v=\w+)(?:[^\s?]+)?$/) != null);
    }
}; // end Metamaps.Util

/*
 *
 *   REALTIME
 *
 */
Metamaps.Realtime = {
    videoId: 'video-wrapper',
    socket: null,
    webrtc: null,
    readyToCall: false,
    mappersOnMap: {},
    disconnected: false,
    chatOpen: false,
    status: true, // stores whether realtime is True/On or False/Off,
    broadcastingStatus: false,
    inConversation: false,
    localVideo: null,
    init: function () {
        var self = Metamaps.Realtime;

        self.addJuntoListeners();

        self.socket = new SocketIoConnection({ url: '<%= ENV['REALTIME_SERVER'] %>' });
        self.socket.on('connect', function () {
            console.log('connected');
            if (!self.disconnected) {
              self.startActiveMap();
            } else self.disconnected = false;
        });
        self.socket.on('disconnect', function () {
          self.disconnected = true;
        });

        if (Metamaps.Active.Mapper) {

          self.webrtc = new SimpleWebRTC({
            connection: self.socket,
            localVideoEl: self.videoId,
            remoteVideosEl: '',
            detectSpeakingEvents: true,
            autoAdjustMic: false, //true,
            autoRequestMedia: false,
            localVideo: {
                autoplay: true,
                mirror: true,
                muted: true
            },
            media: {
              video: true,
              audio: true
            },
            nick: Metamaps.Active.Mapper.id
          });

          var
            $video = $('<video></video>').attr('id', self.videoId);
          self.localVideo = {
              $video: $video,
              view: new Metamaps.Views.videoView($video[0], $('body'), 'me', true, {
                  DOUBLE_CLICK_TOLERANCE: 200,
                  avatar: Metamaps.Active.Mapper ? Metamaps.Active.Mapper.get('image') : ''
              })
          };

          self.room = new Metamaps.Views.room({
            webrtc: self.webrtc,
            socket: self.socket,
            username: Metamaps.Active.Mapper ? Metamaps.Active.Mapper.get('name') : '',
            image: Metamaps.Active.Mapper ? Metamaps.Active.Mapper.get('image') : '',
            room: 'global',
            $video: self.localVideo.$video,
            myVideoView: self.localVideo.view,
            config: { DOUBLE_CLICK_TOLERANCE: 200 }
          });
          self.room.videoAdded(self.handleVideoAdded);

          self.room.chat.$container.hide();
          $('body').prepend(self.room.chat.$container);
        } // if Metamaps.Active.Mapper
    },
    addJuntoListeners: function () {
      var self = Metamaps.Realtime;

      $(document).on(Metamaps.Views.chatView.events.openTray, function () {
        $('.main').addClass('compressed');
        self.chatOpen = true;
        self.positionPeerIcons();
      });
      $(document).on(Metamaps.Views.chatView.events.closeTray, function () {
        $('.main').removeClass('compressed');
        self.chatOpen = false;
        self.positionPeerIcons();
      });
      $(document).on(Metamaps.Views.chatView.events.videosOn, function () {
        $('#wrapper').removeClass('hideVideos');
      });
      $(document).on(Metamaps.Views.chatView.events.videosOff, function () {
        $('#wrapper').addClass('hideVideos');
      });
      $(document).on(Metamaps.Views.chatView.events.cursorsOn, function () {
        $('#wrapper').removeClass('hideCursors');
      });
      $(document).on(Metamaps.Views.chatView.events.cursorsOff, function () {
        $('#wrapper').addClass('hideCursors');
      });
    },
    handleVideoAdded: function (v, id) {
      var self = Metamaps.Realtime;
      self.positionVideos();
      v.setParent($('#wrapper'));
      v.$container.find('.video-cutoff').css({
        border: '4px solid ' + self.mappersOnMap[id].color
      });
      $('#wrapper').append(v.$container);
    },
    positionVideos: function () {
      var self = Metamaps.Realtime;
      var videoIds = Object.keys(self.room.videos);
      var numOfVideos = videoIds.length;
      var numOfVideosToPosition = _.filter(videoIds, function (id) {
        return !self.room.videos[id].manuallyPositioned;
      }).length;

      var screenHeight = $(document).height();
      var screenWidth = $(document).width();
      var topExtraPadding = 20;
      var topPadding = 30;
      var leftPadding = 30;
      var videoHeight = 150;
      var videoWidth = 180;
      var column = 0;
      var row = 0;
      var yFormula = function () {
        var y = topExtraPadding + (topPadding + videoHeight)*row + topPadding;
        if (y + videoHeight > screenHeight) {
          row = 0;
          column += 1;
          y = yFormula();
        }
        row++;
        return y;
      };
      var xFormula = function () {
        var x = (leftPadding + videoWidth)*column + leftPadding;
        return x;
      };

      // do self first
      var myVideo = Metamaps.Realtime.localVideo.view;
      if (!myVideo.manuallyPositioned) {
        myVideo.$container.css({
          top: yFormula() + 'px',
          left: xFormula() + 'px'
        });
      }
      videoIds.forEach(function (id) {
        var video = self.room.videos[id];
        if (!video.manuallyPositioned) {
          video.$container.css({
            top: yFormula() + 'px',
            left: xFormula() + 'px'
          });
        }
      });
    },
    startActiveMap: function () {
        var self = Metamaps.Realtime;

        if (Metamaps.Active.Map && Metamaps.Active.Mapper) {
            var commonsMap = Metamaps.Active.Map.get('permission') === 'commons';
            var publicMap = Metamaps.Active.Map.get('permission') === 'public';

            if (commonsMap) {
                self.turnOn();
                self.setupSocket();
            }
            else if (publicMap) {
                self.attachMapListener();
            }
            self.room.addMessages(new Metamaps.Backbone.MessageCollection(Metamaps.Messages), true);
        }
    },
    endActiveMap: function () {
        var self = Metamaps.Realtime;

        $(document).off('mousemove');
        self.socket.removeAllListeners();
        if (self.inConversation) self.leaveCall();
        self.socket.emit('endMapperNotify');
        $(".collabCompass").remove();
        self.status = false;
        self.room.leave();
        self.room.chat.$container.hide();
        self.room.chat.close();
    },
    reenableRealtime: function() {
        var confirmString = "The layout of your map has fallen out of sync with the saved copy. ";
        confirmString += "To save your changes without overwriting the map, hit 'Cancel' and ";
        confirmString += "then use 'Save to new map'. ";
        confirmString += "Do you want to discard your changes and enable realtime?";
        var c = confirm(confirmString);
        if (c) {
            Metamaps.Router.maps(Metamaps.Active.Map.id);
        }
    },
    turnOn: function (notify) {
        var self = Metamaps.Realtime;

        if (notify) self.sendRealtimeOn();
        //$(".rtMapperSelf").removeClass('littleRtOff').addClass('littleRtOn');
        //$('.rtOn').addClass('active');
        //$('.rtOff').removeClass('active');
        self.status = true;
        //$(".sidebarCollaborateIcon").addClass("blue");
        $(".collabCompass").show();
        self.room.chat.$container.show();
        self.room.room = 'map-' + Metamaps.Active.Map.id;
        self.checkForACallToJoin();

        self.activeMapper = {
            id: Metamaps.Active.Mapper.id,
            name: Metamaps.Active.Mapper.get('name'),
            username: Metamaps.Active.Mapper.get('name'),
            image: Metamaps.Active.Mapper.get('image'),
            color: Metamaps.Util.getPastelColor(),
            self: true
        };
        self.localVideo.view.$container.find('.video-cutoff').css({
          border: '4px solid ' + self.activeMapper.color
        });
        self.room.chat.addParticipant(self.activeMapper);
    },
    checkForACallToJoin: function () {
      var self = Metamaps.Realtime;
      self.socket.emit('checkForCall', { room: self.room.room, mapid: Metamaps.Active.Map.id });
    },
    promptToJoin: function () {
      var self = Metamaps.Realtime;

      var notifyText = 'There\'s a conversation happening, want to join?';
      notifyText += ' <button type="button" class="toast-button button" onclick="Metamaps.Realtime.joinCall()">Yes</button>';
      notifyText += ' <button type="button" class="toast-button button btn-no" onclick="Metamaps.GlobalUI.clearNotify()">No</button>';
      Metamaps.GlobalUI.notifyUser(notifyText, true);
      self.room.conversationInProgress();
    },
    conversationHasBegun: function () {
      var self = Metamaps.Realtime;

      if (self.inConversation) return;
      var notifyText = 'There\'s a conversation starting, want to join?';
      notifyText += ' <button type="button" class="toast-button button" onclick="Metamaps.Realtime.joinCall()">Yes</button>';
      notifyText += ' <button type="button" class="toast-button button btn-no" onclick="Metamaps.GlobalUI.clearNotify()">No</button>';
      Metamaps.GlobalUI.notifyUser(notifyText, true);
      self.room.conversationInProgress();
    },
    countOthersInConversation: function () {
      var self = Metamaps.Realtime;
      var count = 0;

      for (var key in self.mappersOnMap) {
        if (self.mappersOnMap[key].inConversation) count++;
      }
      return count;
    },
    mapperJoinedCall: function (id) {
      var self = Metamaps.Realtime;
      var mapper = self.mappersOnMap[id];

      if (mapper) {
        if (self.inConversation) {
          var username = mapper.name;
          var notifyText = username + ' joined the call';
          Metamaps.GlobalUI.notifyUser(notifyText);
        }

        mapper.inConversation = true;
        self.room.chat.mapperJoinedCall(id);
      }
    },
    mapperLeftCall: function (id) {
      var self = Metamaps.Realtime;
      var mapper = self.mappersOnMap[id];

      if (mapper) {
        if (self.inConversation) {
          var username = mapper.name;
          var notifyText = username + ' left the call';
          Metamaps.GlobalUI.notifyUser(notifyText);
        }

        mapper.inConversation = false;
        self.room.chat.mapperLeftCall(id);

        if ((self.inConversation && self.countOthersInConversation() === 0) ||
            (!self.inConversation && self.countOthersInConversation() === 1)) {
          self.callEnded();
        }
      }
    },
    callEnded: function () {
      var self = Metamaps.Realtime;

      self.room.conversationEnding();
      self.room.leaveVideoOnly();
      self.inConversation = false;
      self.localVideo.view.$container.hide().css({
        top: '72px',
        left: '30px'
      });
      self.localVideo.view.audioOn();
      self.localVideo.view.videoOn();
      self.webrtc.webrtc.localStreams.forEach(function (stream) {
        stream.getTracks().forEach(function (track) {
          track.stop();
        });
      });
      self.webrtc.webrtc.localStreams = [];
    },
    invitedToCall: function (inviter) {
      var self = Metamaps.Realtime;

      self.room.chat.sound.stop('sessioninvite');
      self.room.chat.sound.play('sessioninvite');

      var username = self.mappersOnMap[inviter].name;
      var notifyText = "<img src='<%= asset_path('junto_spinner_darkgrey.gif') %>' style='display: inline-block; margin-top: -12px; vertical-align: top;' />";
      notifyText += username + ' is inviting you to a conversation. Join live?';
      notifyText += ' <button type="button" class="toast-button button" onclick="Metamaps.Realtime.acceptCall(' + inviter + ')">Yes</button>';
      notifyText += ' <button type="button" class="toast-button button btn-no" onclick="Metamaps.Realtime.denyCall(' + inviter + ')">No</button>';
      Metamaps.GlobalUI.notifyUser(notifyText, true);
    },
    invitedToJoin: function (inviter) {
      var self = Metamaps.Realtime;

      self.room.chat.sound.stop('sessioninvite');
      self.room.chat.sound.play('sessioninvite');

      var username = self.mappersOnMap[inviter].name;
      var notifyText = username + ' is inviting you to the conversation. Join?';
      notifyText += ' <button type="button" class="toast-button button" onclick="Metamaps.Realtime.joinCall()">Yes</button>';
      notifyText += ' <button type="button" class="toast-button button btn-no" onclick="Metamaps.Realtime.denyInvite(' + inviter + ')">No</button>';
      Metamaps.GlobalUI.notifyUser(notifyText, true);
    },
    acceptCall: function (userid) {
      var self = Metamaps.Realtime;
      self.room.chat.sound.stop('sessioninvite');
      self.socket.emit('callAccepted', {
        mapid: Metamaps.Active.Map.id,
        invited: Metamaps.Active.Mapper.id,
        inviter: userid
      });
      $.post('/maps/' + Metamaps.Active.Map.id + '/events/conversation');
      self.joinCall();
      Metamaps.GlobalUI.clearNotify();
    },
    denyCall: function (userid) {
      var self = Metamaps.Realtime;
      self.room.chat.sound.stop('sessioninvite');
      self.socket.emit('callDenied', {
        mapid: Metamaps.Active.Map.id,
        invited: Metamaps.Active.Mapper.id,
        inviter: userid
      });
      Metamaps.GlobalUI.clearNotify();
    },
    denyInvite: function (userid) {
      var self = Metamaps.Realtime;
      self.room.chat.sound.stop('sessioninvite');
      self.socket.emit('inviteDenied', {
        mapid: Metamaps.Active.Map.id,
        invited: Metamaps.Active.Mapper.id,
        inviter: userid
      });
      Metamaps.GlobalUI.clearNotify();
    },
    inviteACall: function (userid) {
      var self = Metamaps.Realtime;
      self.socket.emit('inviteACall', {
        mapid: Metamaps.Active.Map.id,
        inviter: Metamaps.Active.Mapper.id,
        invited: userid
      });
      self.room.chat.invitationPending(userid);
      Metamaps.GlobalUI.clearNotify();
    },
    inviteToJoin: function (userid) {
      var self = Metamaps.Realtime;
      self.socket.emit('inviteToJoin', {
        mapid: Metamaps.Active.Map.id,
        inviter: Metamaps.Active.Mapper.id,
        invited: userid
      });
      self.room.chat.invitationPending(userid);
    },
    callAccepted: function (userid) {
      var self = Metamaps.Realtime;

      var username = self.mappersOnMap[userid].name;
      Metamaps.GlobalUI.notifyUser('Conversation starting...');
      self.joinCall();
      self.room.chat.invitationAnswered(userid);
    },
    callDenied: function (userid) {
      var self = Metamaps.Realtime;

      var username = self.mappersOnMap[userid].name;
      Metamaps.GlobalUI.notifyUser(username + ' didn\'t accept your invitation');
      self.room.chat.invitationAnswered(userid);
    },
    inviteDenied: function (userid) {
      var self = Metamaps.Realtime;

      var username = self.mappersOnMap[userid].name;
      Metamaps.GlobalUI.notifyUser(username + ' didn\'t accept your invitation');
      self.room.chat.invitationAnswered(userid);
    },
    joinCall: function () {
      var self = Metamaps.Realtime;

      self.webrtc.off('readyToCall');
      self.webrtc.once('readyToCall', function () {
        self.videoInitialized = true;
        self.readyToCall = true;
        self.localVideo.view.manuallyPositioned = false;
        self.positionVideos();
        self.localVideo.view.$container.show();
        if (self.localVideo && self.status) {
          $('#wrapper').append(self.localVideo.view.$container);
        }
        self.room.join();
      });
      self.inConversation = true;
      self.socket.emit('mapperJoinedCall', {
        mapid: Metamaps.Active.Map.id,
        id: Metamaps.Active.Mapper.id
      });
      self.webrtc.startLocalVideo();
      Metamaps.GlobalUI.clearNotify();
      self.room.chat.mapperJoinedCall(Metamaps.Active.Mapper.id);
    },
    leaveCall: function () {
      var self = Metamaps.Realtime;

      self.socket.emit('mapperLeftCall', {
        mapid: Metamaps.Active.Map.id,
        id: Metamaps.Active.Mapper.id
      });

      self.room.chat.mapperLeftCall(Metamaps.Active.Mapper.id);
      self.room.leaveVideoOnly();
      self.inConversation = false;
      self.localVideo.view.$container.hide();

      // if there's only two people in the room, and we're leaving
      // we should shut down the call locally
      if (self.countOthersInConversation() === 1) {
        self.callEnded();
      }
    },
    turnOff: function (silent) {
        var self = Metamaps.Realtime;

        if (self.status) {
            if (!silent) self.sendRealtimeOff();
            //$(".rtMapperSelf").removeClass('littleRtOn').addClass('littleRtOff');
            //$('.rtOn').removeClass('active');
            //$('.rtOff').addClass('active');
            self.status = false;
            //$(".sidebarCollaborateIcon").removeClass("blue");
            $(".collabCompass").hide();
            $('#' + self.videoId).remove();
        }
    },
    setupSocket: function () {
        var self = Metamaps.Realtime;
        var socket = Metamaps.Realtime.socket;
        var myId = Metamaps.Active.Mapper.id;

        socket.emit('newMapperNotify', {
            userid: myId,
            username: Metamaps.Active.Mapper.get("name"),
            userimage: Metamaps.Active.Mapper.get("image"),
            mapid: Metamaps.Active.Map.id
        });

        socket.on(myId + '-' + Metamaps.Active.Map.id + '-invitedToCall', self.invitedToCall); // new call
        socket.on(myId + '-' + Metamaps.Active.Map.id + '-invitedToJoin', self.invitedToJoin); // call already in progress
        socket.on(myId + '-' + Metamaps.Active.Map.id + '-callAccepted', self.callAccepted);
        socket.on(myId + '-' + Metamaps.Active.Map.id + '-callDenied', self.callDenied);
        socket.on(myId + '-' + Metamaps.Active.Map.id + '-inviteDenied', self.inviteDenied);

        // receive word that there's a conversation in progress
        socket.on('maps-' + Metamaps.Active.Map.id + '-callInProgress', self.promptToJoin);
        socket.on('maps-' + Metamaps.Active.Map.id + '-callStarting', self.conversationHasBegun);

        socket.on('maps-' + Metamaps.Active.Map.id + '-mapperJoinedCall', self.mapperJoinedCall);
        socket.on('maps-' + Metamaps.Active.Map.id + '-mapperLeftCall', self.mapperLeftCall);

        // if you're the 'new guy' update your list with who's already online
        socket.on(myId + '-' + Metamaps.Active.Map.id + '-UpdateMapperList', self.updateMapperList);

        // receive word that there's a new mapper on the map
        socket.on('maps-' + Metamaps.Active.Map.id + '-newmapper', self.newPeerOnMap);

        // receive word that a mapper left the map
        socket.on('maps-' + Metamaps.Active.Map.id + '-lostmapper', self.lostPeerOnMap);

        // receive word that there's a mapper turned on realtime
        socket.on('maps-' + Metamaps.Active.Map.id + '-newrealtime', self.newCollaborator);

        // receive word that there's a mapper turned on realtime
        socket.on('maps-' + Metamaps.Active.Map.id + '-lostrealtime', self.lostCollaborator);

        //
        socket.on('maps-' + Metamaps.Active.Map.id + '-topicDrag', self.topicDrag);

        //
        socket.on('maps-' + Metamaps.Active.Map.id + '-newTopic', self.newTopic);

        //
        socket.on('maps-' + Metamaps.Active.Map.id + '-newMessage', self.newMessage);

        //
        socket.on('maps-' + Metamaps.Active.Map.id + '-removeTopic', self.removeTopic);

        //
        socket.on('maps-' + Metamaps.Active.Map.id + '-newSynapse', self.newSynapse);

        //
        socket.on('maps-' + Metamaps.Active.Map.id + '-removeSynapse', self.removeSynapse);

        // update mapper compass position
        socket.on('maps-' + Metamaps.Active.Map.id + '-updatePeerCoords', self.updatePeerCoords);

        // deletions
        socket.on('deleteTopicFromServer', self.removeTopic);
        socket.on('deleteSynapseFromServer', self.removeSynapse);

        socket.on('topicChangeFromServer', self.topicChange);
        socket.on('synapseChangeFromServer', self.synapseChange);
        self.attachMapListener();

        // local event listeners that trigger events
        var sendCoords = function (event) {
            var pixels = {
                x: event.pageX,
                y: event.pageY
            };
            var coords = Metamaps.Util.pixelsToCoords(pixels);
            self.sendCoords(coords);
        };
        $(document).mousemove(sendCoords);

        var zoom = function (event, e) {
            if (e) {
                var pixels = {
                    x: e.pageX,
                    y: e.pageY
                };
                var coords = Metamaps.Util.pixelsToCoords(pixels);
                self.sendCoords(coords);
            }
            self.positionPeerIcons();
        };
        $(document).on(Metamaps.JIT.events.zoom, zoom);

        $(document).on(Metamaps.JIT.events.pan, self.positionPeerIcons);

        var sendTopicDrag = function (event, positions) {
            self.sendTopicDrag(positions);
        };
        $(document).on(Metamaps.JIT.events.topicDrag, sendTopicDrag);

        var sendNewTopic = function (event, data) {
            self.sendNewTopic(data);
        };
        $(document).on(Metamaps.JIT.events.newTopic, sendNewTopic);

        var sendDeleteTopic = function (event, data) {
            self.sendDeleteTopic(data);
        };
        $(document).on(Metamaps.JIT.events.deleteTopic, sendDeleteTopic);

        var sendRemoveTopic = function (event, data) {
            self.sendRemoveTopic(data);
        };
        $(document).on(Metamaps.JIT.events.removeTopic, sendRemoveTopic);

        var sendNewSynapse = function (event, data) {
            self.sendNewSynapse(data);
        };
        $(document).on(Metamaps.JIT.events.newSynapse, sendNewSynapse);

        var sendDeleteSynapse = function (event, data) {
            self.sendDeleteSynapse(data);
        };
        $(document).on(Metamaps.JIT.events.deleteSynapse, sendDeleteSynapse);

        var sendRemoveSynapse = function (event, data) {
            self.sendRemoveSynapse(data);
        };
        $(document).on(Metamaps.JIT.events.removeSynapse, sendRemoveSynapse);

        var sendNewMessage = function (event, data) {
            self.sendNewMessage(data);
        };
        $(document).on(Metamaps.Views.room.events.newMessage, sendNewMessage);

    },
    attachMapListener: function(){
        var self = Metamaps.Realtime;
        var socket = Metamaps.Realtime.socket;

        socket.on('mapChangeFromServer', self.mapChange);
    },
    sendRealtimeOn: function () {
        var self = Metamaps.Realtime;
        var socket = Metamaps.Realtime.socket;

        // send this new mapper back your details, and the awareness that you're online
        var update = {
            username: Metamaps.Active.Mapper.get("name"),
            userid: Metamaps.Active.Mapper.id,
            mapid: Metamaps.Active.Map.id
        };
        socket.emit('notifyStartRealtime', update);
    },
    sendRealtimeOff: function () {
        var self = Metamaps.Realtime;
        var socket = Metamaps.Realtime.socket;

        // send this new mapper back your details, and the awareness that you're online
        var update = {
            username: Metamaps.Active.Mapper.get("name"),
            userid: Metamaps.Active.Mapper.id,
            mapid: Metamaps.Active.Map.id
        };
        socket.emit('notifyStopRealtime', update);
    },
    updateMapperList: function (data) {
        var self = Metamaps.Realtime;
        var socket = Metamaps.Realtime.socket;

        // data.userid
        // data.username
        // data.userimage
        // data.userrealtime

        self.mappersOnMap[data.userid] = {
            id: data.userid,
            name: data.username,
            username: data.username,
            image: data.userimage,
            color: Metamaps.Util.getPastelColor(),
            realtime: data.userrealtime,
            inConversation: data.userinconversation,
            coords: {
                x: 0,
                y: 0
            }
        };

        if (data.userid !== Metamaps.Active.Mapper.id) {
            self.room.chat.addParticipant(self.mappersOnMap[data.userid]);
            if (data.userinconversation) self.room.chat.mapperJoinedCall(data.userid);

            // create a div for the collaborators compass
            self.createCompass(data.username, data.userid, data.userimage, self.mappersOnMap[data.userid].color, !self.status);
        }
    },
    newPeerOnMap: function (data) {
        var self = Metamaps.Realtime;
        var socket = Metamaps.Realtime.socket;

        // data.userid
        // data.username
        // data.userimage
        // data.coords
        var firstOtherPerson = Object.keys(self.mappersOnMap).length === 0;

        self.mappersOnMap[data.userid] = {
            id: data.userid,
            name: data.username,
            username: data.username,
            image: data.userimage,
            color: Metamaps.Util.getPastelColor(),
            realtime: true,
            coords: {
                x: 0,
                y: 0
            },
        };

        // create an item for them in the realtime box
        if (data.userid !== Metamaps.Active.Mapper.id && self.status) {
            self.room.chat.sound.play('joinmap');
            self.room.chat.addParticipant(self.mappersOnMap[data.userid]);

            // create a div for the collaborators compass
            self.createCompass(data.username, data.userid, data.userimage, self.mappersOnMap[data.userid].color, !self.status);

            var notifyMessage = data.username + ' just joined the map';
            if (firstOtherPerson) {
              notifyMessage += ' <button type="button" class="toast-button button" onclick="Metamaps.Realtime.inviteACall(' + data.userid + ')">Suggest A Video Call</button>';
            }
            Metamaps.GlobalUI.notifyUser(notifyMessage);

            // send this new mapper back your details, and the awareness that you've loaded the map
            var update = {
                userToNotify: data.userid,
                username: Metamaps.Active.Mapper.get("name"),
                userimage: Metamaps.Active.Mapper.get("image"),
                userid: Metamaps.Active.Mapper.id,
                userrealtime: self.status,
                userinconversation: self.inConversation,
                mapid: Metamaps.Active.Map.id
            };
            socket.emit('updateNewMapperList', update);
        }
    },
    createCompass: function(name, id, image, color, hide) {
        var str =  '<img width="28" height="28" src="'+image+'" /><p>'+name+'</p>';
        str += '<div id="compassArrow'+id+'" class="compassArrow"></div>';
        $('#compass' + id).remove();
        $('<div/>', {
            id: 'compass' + id,
            class: 'collabCompass'
        }).html(str).appendTo('#wrapper');
        if (hide) {
            $('#compass' + id).hide();
        }
        $('#compass' + id + ' img').css({
            'border': '2px solid ' + color
        });
        $('#compass' + id + ' p').css({
            'background-color': color
        });
    },
    lostPeerOnMap: function (data) {
        var self = Metamaps.Realtime;
        var socket = Metamaps.Realtime.socket;

        // data.userid
        // data.username

        delete self.mappersOnMap[data.userid];
        self.room.chat.sound.play('leavemap');
        //$('#mapper' + data.userid).remove();
        $('#compass' + data.userid).remove();
        self.room.chat.removeParticipant(data.username);

        Metamaps.GlobalUI.notifyUser(data.username + ' just left the map');

        if ((self.inConversation && self.countOthersInConversation() === 0) ||
            (!self.inConversation && self.countOthersInConversation() === 1)) {
          self.callEnded();
        }
    },
    newCollaborator: function (data) {
        var self = Metamaps.Realtime;
        var socket = Metamaps.Realtime.socket;

        // data.userid
        // data.username

        self.mappersOnMap[data.userid].realtime = true;

        //$('#mapper' + data.userid).removeClass('littleRtOff').addClass('littleRtOn');
        $('#compass' + data.userid).show();

        Metamaps.GlobalUI.notifyUser(data.username + ' just turned on realtime');
    },
    lostCollaborator: function (data) {
        var self = Metamaps.Realtime;
        var socket = Metamaps.Realtime.socket;

        // data.userid
        // data.username

        self.mappersOnMap[data.userid].realtime = false;

        //$('#mapper' + data.userid).removeClass('littleRtOn').addClass('littleRtOff');
        $('#compass' + data.userid).hide();

        Metamaps.GlobalUI.notifyUser(data.username + ' just turned off realtime');
    },
    updatePeerCoords: function (data) {
        var self = Metamaps.Realtime;
        var socket = Metamaps.Realtime.socket;

        self.mappersOnMap[data.userid].coords={x: data.usercoords.x,y:data.usercoords.y};
        self.positionPeerIcon(data.userid);
    },
    positionPeerIcons: function () {
        var self = Metamaps.Realtime;
        var socket = Metamaps.Realtime.socket;

        if (self.status) { // if i have realtime turned on
            for (var key in self.mappersOnMap) {
                var mapper = self.mappersOnMap[key];
                if (mapper.realtime) {
                    self.positionPeerIcon(key);
                }
            }
        }
    },
    positionPeerIcon: function (id) {
        var self = Metamaps.Realtime;
        var socket = Metamaps.Realtime.socket;

        var boundary = self.chatOpen ? '#wrapper' : document;
        var mapper = self.mappersOnMap[id];
        var xMax=$(boundary).width();
        var yMax=$(boundary).height();
        var compassDiameter=56;
        var compassArrowSize=24;

        var origPixels = Metamaps.Util.coordsToPixels(mapper.coords);
        var pixels = self.limitPixelsToScreen(origPixels);
        $('#compass' + id).css({
            left: pixels.x + 'px',
            top: pixels.y + 'px'
        });
        /* showing the arrow if the collaborator is off of the viewport screen */
        if (origPixels.x !== pixels.x || origPixels.y !== pixels.y) {

            var dy = origPixels.y - pixels.y; //opposite
            var dx = origPixels.x - pixels.x; // adjacent
            var ratio = dy / dx;
            var angle = Math.atan2(dy, dx);

            $('#compassArrow' + id).show().css({
                transform: 'rotate(' + angle + 'rad)',
                "-webkit-transform": 'rotate(' + angle + 'rad)',
            });

            if (dx > 0) {
                $('#compass' + id).addClass('labelLeft');
            }
        } else {
            $('#compassArrow' + id).hide();
            $('#compass' + id).removeClass('labelLeft');
        }
    },
    limitPixelsToScreen: function (pixels) {
        var self = Metamaps.Realtime;
        var socket = Metamaps.Realtime.socket;

        var boundary = self.chatOpen ? '#wrapper' : document;
        var xLimit, yLimit;
        var xMax=$(boundary).width();
        var yMax=$(boundary).height();
        var compassDiameter=56;
        var compassArrowSize=24;

        xLimit = Math.max(0 + compassArrowSize, pixels.x);
        xLimit = Math.min(xLimit, xMax - compassDiameter);
        yLimit = Math.max(0 + compassArrowSize, pixels.y);
        yLimit = Math.min(yLimit, yMax - compassDiameter);

        return {x:xLimit,y:yLimit};
    },
    sendCoords: function (coords) {
        var self = Metamaps.Realtime;
        var socket = Metamaps.Realtime.socket;

        var map = Metamaps.Active.Map;
        var mapper = Metamaps.Active.Mapper;

        if (self.status && map.authorizeToEdit(mapper) && socket) {
            var update = {
                usercoords: coords,
                userid: Metamaps.Active.Mapper.id,
                mapid: Metamaps.Active.Map.id
            };
            socket.emit('updateMapperCoords', update);
        }
    },
    sendTopicDrag: function (positions) {
        var self = Metamaps.Realtime;
        var socket = self.socket;

        if (Metamaps.Active.Map && self.status) {
            positions.mapid = Metamaps.Active.Map.id;
            socket.emit('topicDrag', positions);
        }
    },
    topicDrag: function (positions) {
        var self = Metamaps.Realtime;
        var socket = self.socket;

        var topic;
        var node;

        if (Metamaps.Active.Map && self.status) {
            for (var key in positions) {
                topic = Metamaps.Topics.get(key);
                if (topic) node = topic.get('node');
                if (node) node.pos.setc(positions[key].x, positions[key].y);
            } //for
            Metamaps.Visualize.mGraph.plot();
        }
    },
    sendTopicChange: function (topic) {
        var self = Metamaps.Realtime;
        var socket = self.socket;

        var data = {
            topicId: topic.id
        }

        socket.emit('topicChangeFromClient', data);
    },
    topicChange: function (data) {
        var topic = Metamaps.Topics.get(data.topicId);
        if (topic) {
            var node = topic.get('node');
            topic.fetch({
                success: function (model) {
                    model.set({ node: node });
                    model.trigger('changeByOther');
                }
            });
        }
    },
    sendSynapseChange: function (synapse) {
        var self = Metamaps.Realtime;
        var socket = self.socket;

        var data = {
            synapseId: synapse.id
        }

        socket.emit('synapseChangeFromClient', data);
    },
    synapseChange: function (data) {
        var synapse = Metamaps.Synapses.get(data.synapseId);
        if (synapse) {
            // edge reset necessary because fetch causes model reset
            var edge = synapse.get('edge');
            synapse.fetch({
                success: function (model) {
                    model.set({ edge: edge });
                    model.trigger('changeByOther');
                }
            });
        }
    },
    sendMapChange: function (map) {
        var self = Metamaps.Realtime;
        var socket = self.socket;

        var data = {
            mapId: map.id
        }

        socket.emit('mapChangeFromClient', data);
    },
    mapChange: function (data) {
        var map = Metamaps.Active.Map;
        var isActiveMap = map && data.mapId === map.id;
        if (isActiveMap) {
            var permBefore = map.get('permission');
            var idBefore = map.id;
            map.fetch({
                success: function (model, response) {

                    var idNow = model.id;
                    var permNow = model.get('permission');
                    if (idNow !== idBefore) {
                        Metamaps.Map.leavePrivateMap(); // this means the map has been changed to private
                    }
                    else if (permNow === 'public' && permBefore === 'commons') {
                        Metamaps.Map.commonsToPublic();
                    }
                    else if (permNow === 'commons' && permBefore === 'public') {
                        Metamaps.Map.publicToCommons();
                    }
                    else {
                        model.fetchContained();
                        model.trigger('changeByOther');
                    }
                }
            });
        }
    },
    // newMessage
    sendNewMessage: function (data) {
        var self = Metamaps.Realtime;
        var socket = self.socket;

        var message = data.attributes;
        message.mapid = Metamaps.Active.Map.id;
        socket.emit('newMessage', message);
    },
    newMessage: function (data) {
        var self = Metamaps.Realtime;
        var socket = self.socket;

        self.room.addMessages(new Metamaps.Backbone.MessageCollection(data));
    },
    // newTopic
    sendNewTopic: function (data) {
        var self = Metamaps.Realtime;
        var socket = self.socket;

        if (Metamaps.Active.Map && self.status) {
            data.mapperid = Metamaps.Active.Mapper.id;
            data.mapid = Metamaps.Active.Map.id;
            socket.emit('newTopic', data);
        }
    },
    newTopic: function (data) {
        var topic, mapping, mapper, mapperCallback, cancel;

        var self = Metamaps.Realtime;
        var socket = self.socket;

        if (!self.status) return;

        function waitThenRenderTopic() {
            if (topic && mapping && mapper) {
                Metamaps.Topic.renderTopic(mapping, topic, false, false);
            }
            else if (!cancel) {
                setTimeout(waitThenRenderTopic, 10);
            }
        }

        mapper = Metamaps.Mappers.get(data.mapperid);
        if (mapper === undefined) {
            mapperCallback = function (m) {
                Metamaps.Mappers.add(m);
                mapper = m;
            };
            Metamaps.Mapper.get(data.mapperid, mapperCallback);
        }
        $.ajax({
            url: "/topics/" + data.mappableid + ".json",
            success: function (response) {
                Metamaps.Topics.add(response);
                topic = Metamaps.Topics.get(response.id);
            },
            error: function () {
                cancel = true;
            }
        });
        $.ajax({
            url: "/mappings/" + data.mappingid + ".json",
            success: function (response) {
                Metamaps.Mappings.add(response);
                mapping = Metamaps.Mappings.get(response.id);
            },
            error: function () {
                cancel = true;
            }
        });

        waitThenRenderTopic();
    },
    // removeTopic
    sendDeleteTopic: function (data) {
        var self = Metamaps.Realtime;
        var socket = self.socket;

        if (Metamaps.Active.Map) {
            socket.emit('deleteTopicFromClient', data);
        }
    },
    // removeTopic
    sendRemoveTopic: function (data) {
        var self = Metamaps.Realtime;
        var socket = self.socket;

        if (Metamaps.Active.Map) {
            data.mapid = Metamaps.Active.Map.id;
            socket.emit('removeTopic', data);
        }
    },
    removeTopic: function (data) {
        var self = Metamaps.Realtime;
        var socket = self.socket;

        if (!self.status) return;

        var topic = Metamaps.Topics.get(data.mappableid);
        if (topic) {
            var node = topic.get('node');
            var mapping = topic.getMapping();
            Metamaps.Control.hideNode(node.id);
            Metamaps.Topics.remove(topic);
            Metamaps.Mappings.remove(mapping);
        }
    },
    // newSynapse
    sendNewSynapse: function (data) {
        var self = Metamaps.Realtime;
        var socket = self.socket;

        if (Metamaps.Active.Map) {
            data.mapperid = Metamaps.Active.Mapper.id;
            data.mapid = Metamaps.Active.Map.id;
            socket.emit('newSynapse', data);
        }
    },
    newSynapse: function (data) {
        var topic1, topic2, node1, node2, synapse, mapping, cancel;

        var self = Metamaps.Realtime;
        var socket = self.socket;

        if (!self.status) return;

        function waitThenRenderSynapse() {
            if (synapse && mapping && mapper) {
                topic1 = synapse.getTopic1();
                node1 = topic1.get('node');
                topic2 = synapse.getTopic2();
                node2 = topic2.get('node');

                Metamaps.Synapse.renderSynapse(mapping, synapse, node1, node2, false);
            }
            else if (!cancel) {
                setTimeout(waitThenRenderSynapse, 10);
            }
        }

        mapper = Metamaps.Mappers.get(data.mapperid);
        if (mapper === undefined) {
            mapperCallback = function (m) {
                Metamaps.Mappers.add(m);
                mapper = m;
            };
            Metamaps.Mapper.get(data.mapperid, mapperCallback);
        }
        $.ajax({
            url: "/synapses/" + data.mappableid + ".json",
            success: function (response) {
                Metamaps.Synapses.add(response);
                synapse = Metamaps.Synapses.get(response.id);
            },
            error: function () {
                cancel = true;
            }
        });
        $.ajax({
            url: "/mappings/" + data.mappingid + ".json",
            success: function (response) {
                Metamaps.Mappings.add(response);
                mapping = Metamaps.Mappings.get(response.id);
            },
            error: function () {
                cancel = true;
            }
        });
        waitThenRenderSynapse();
    },
    // deleteSynapse
    sendDeleteSynapse: function (data) {
        var self = Metamaps.Realtime;
        var socket = self.socket;

        if (Metamaps.Active.Map) {
            data.mapid = Metamaps.Active.Map.id;
            socket.emit('deleteSynapseFromClient', data);
        }
    },
    // removeSynapse
    sendRemoveSynapse: function (data) {
        var self = Metamaps.Realtime;
        var socket = self.socket;

        if (Metamaps.Active.Map) {
            data.mapid = Metamaps.Active.Map.id;
            socket.emit('removeSynapse', data);
        }
    },
    removeSynapse: function (data) {
        var self = Metamaps.Realtime;
        var socket = self.socket;

        if (!self.status) return;

        var synapse = Metamaps.Synapses.get(data.mappableid);
        if (synapse) {
            var edge = synapse.get('edge');
            var mapping = synapse.getMapping();
            if (edge.getData("mappings").length - 1 === 0) {
                Metamaps.Control.hideEdge(edge);
            }

            var index = _.indexOf(edge.getData("synapses"), synapse);
            edge.getData("mappings").splice(index, 1);
            edge.getData("synapses").splice(index, 1);
            if (edge.getData("displayIndex")) {
                delete edge.data.$displayIndex;
            }
            Metamaps.Synapses.remove(synapse);
            Metamaps.Mappings.remove(mapping);
        }
    },
}; // end Metamaps.Realtime