extract mapmaker step 1

app/assets/javascripts/application.js

@@ -20,9 +20,6 @@
 //= require ./src/Metamaps.Router
 //= require ./src/Metamaps.Backbone
 //= require ./src/Metamaps.Views
-//= require ./src/JIT
-//= require ./src/Metamaps
-//= require ./src/Metamaps.JIT
 //= require_directory ./shims
 //= require_directory ./require
 //= require_directory ./famous

app/assets/javascripts/pages/Metamaps.Account.js

@@ -0,0 +1,117 @@
+if (typeof Metamaps === 'undefined') Metamaps = {};
+
+Metamaps.Account = {
+    listenersInitialized: false,
+    init: function () {
+        var self = Metamaps.Account;
+
+
+    },
+    initListeners: function(){
+        var self = Metamaps.Account;
+
+        $('#user_image').change(self.showImagePreview);
+        self.listenersInitialized = true;
+    },
+    toggleChangePicture: function(){
+        var self = Metamaps.Account;
+
+        $('.userImageMenu').toggle();
+        if (!self.listenersInitialized) self.initListeners();
+    },
+    openChangePicture: function(){
+        var self = Metamaps.Account;
+
+        $('.userImageMenu').show();
+        if (!self.listenersInitialized) self.initListeners();
+    },
+    closeChangePicture: function(){
+        var self = Metamaps.Account;
+
+        $('.userImageMenu').hide();
+    },
+    showLoading: function(){
+        var self = Metamaps.Account;
+
+        var loader = new CanvasLoader('accountPageLoading');
+        loader.setColor('#4FC059'); // 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
+        $('#accountPageLoading').show();
+    },
+    showImagePreview: function(){
+        var self = Metamaps.Account;
+
+        var file = $('#user_image')[0].files[0];
+
+        var reader = new FileReader();
+
+        reader.onload = function(e) {
+            var $canvas = $('<canvas>').attr({
+                width: 84,
+                height: 84
+            });
+            var context = $canvas[0].getContext('2d');
+            var imageObj = new Image();
+
+            imageObj.onload = function() {
+                $('.userImageDiv canvas').remove();
+                $('.userImageDiv img').hide();
+
+                var imgWidth = imageObj.width;
+                var imgHeight = imageObj.height;
+
+                var dimensionToMatch = imgWidth > imgHeight ? imgHeight : imgWidth;
+                // draw cropped image
+                var nonZero = Math.abs(imgHeight - imgWidth) / 2;
+                var sourceX = dimensionToMatch === imgWidth ? 0 : nonZero;
+                var sourceY = dimensionToMatch === imgHeight ? 0 : nonZero;
+                var sourceWidth = dimensionToMatch;
+                var sourceHeight = dimensionToMatch;
+                var destX = 0;
+                var destY = 0;
+                var destWidth = 84;
+                var destHeight = 84;
+
+                context.drawImage(imageObj, sourceX, sourceY, sourceWidth, sourceHeight, destX, destY, destWidth, destHeight);
+                $('.userImageDiv').prepend($canvas);
+            };
+            imageObj.src = reader.result;
+        };
+
+        if (file) {
+            reader.readAsDataURL(file);
+            $('.userImageMenu').hide();
+            $('#remove_image').val('0');
+        }
+    },
+    removePicture: function(){
+        var self = Metamaps.Account;
+
+        $('.userImageDiv canvas').remove();
+        $('.userImageDiv img').attr('src', '/assets/user.png').show();
+        $('.userImageMenu').hide();
+
+        var input = $('#user_image');
+        input.replaceWith(input.val('').clone(true));
+        $('#remove_image').val('1');
+    },
+    changeName: function(){
+        $('.accountName').hide();
+        $('.changeName').show();
+    },
+    showPass: function(){
+        $(".toHide").show();
+        $(".changePass").hide();
+    },
+    hidePass: function(){
+        $(".toHide").hide();
+        $(".changePass").show();
+
+        $('#current_password').val('');
+        $('#user_password').val('');
+        $('#user_password_confirmation').val('');
+    }
+};

app/assets/javascripts/pages/Metamaps.Admin.js

@@ -0,0 +1,48 @@
+if (typeof Metamaps === 'undefined') Metamaps = {};
+
+Metamaps.Admin = {
+    selectMetacodes: [],
+    allMetacodes: [],
+    init: function () {
+        var self = Metamaps.Admin;
+
+        $('#metacodes_value').val(self.selectMetacodes.toString());
+    },
+    selectAll: function () {
+        var self = Metamaps.Admin; 
+
+        $('.editMetacodes li').removeClass('toggledOff');
+        self.selectMetacodes = self.allMetacodes.slice(0);
+        $('#metacodes_value').val(self.selectMetacodes.toString());
+    },
+    deselectAll: function () {
+        var self = Metamaps.Admin; 
+
+        $('.editMetacodes li').addClass('toggledOff');
+        self.selectMetacodes = [];
+        $('#metacodes_value').val(0);
+    },
+    liClickHandler: function () {
+        var self = Metamaps.Admin;
+
+        if ($(this).attr('class') != 'toggledOff') {
+          $(this).addClass('toggledOff');
+          var value_to_remove = $(this).attr('id');
+          self.selectMetacodes.splice(self.selectMetacodes.indexOf(value_to_remove), 1);
+          $('#metacodes_value').val(self.selectMetacodes.toString());
+        }
+        else if ($(this).attr('class') == 'toggledOff') {
+          $(this).removeClass('toggledOff');
+          self.selectMetacodes.push($(this).attr('id'));
+          $('#metacodes_value').val(self.selectMetacodes.toString());
+        }
+    },
+    validate: function () {
+        var self = Metamaps.Admin;
+
+        if (self.selectMetacodes.length == 0) {
+          alert('Would you pretty please select at least one metacode for the set?');
+          return false;
+        }
+    }
+};

app/assets/javascripts/src/Metamaps.Backbone.js

@@ -1,3 +1,5 @@
+if (typeof Metamaps === 'undefined') Metamaps = {};
+
 Metamaps.Backbone = {};
 Metamaps.Backbone.Map = Backbone.Model.extend({
     urlRoot: '/maps',
@@ -174,7 +176,7 @@ Metamaps.Backbone.MapsCollection = Backbone.Collection.extend({
     },
     getMaps: function () {
 
-        var self = this;
+        var Metamaps.Backbone = this;
 
         if (this.page != "loadedAll") {
             var numBefore = this.length;
@@ -183,18 +185,18 @@ Metamaps.Backbone.MapsCollection = Backbone.Collection.extend({
                 data: { page: this.page },
                 success: function (collection, response, options) {
                     // you can pass additional options to the event you trigger here as well
-                    if (collection.length - numBefore < 20) self.page = "loadedAll";
-                    else self.page += 1;
-                    self.trigger('successOnFetch');
+                    if (collection.length - numBefore < 20) Metamaps.Backbone.page = "loadedAll";
+                    else Metamaps.Backbone.page += 1;
+                    Metamaps.Backbone.trigger('successOnFetch');
                 },
                 error: function (collection, response, options) {
                     // you can pass additional options to the event you trigger here as well
-                    self.trigger('errorOnFetch');
+                    Metamaps.Backbone.trigger('errorOnFetch');
                 }
             });
         }
         else {
-            self.trigger('successOnFetch');
+            Metamaps.Backbone.trigger('successOnFetch');
         }
     }
 });
@@ -217,4 +219,445 @@ Metamaps.Backbone.Mapper = Backbone.Model.extend({
 Metamaps.Backbone.MapperCollection = Backbone.Collection.extend({
     model: Metamaps.Backbone.Mapper,
     url: '/users'
-});
+});
+
+
+
+
+Metamaps.Backbone.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;
+    }
+
+});
+Metamaps.Backbone.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;
+    }
+});
+
+Metamaps.Backbone.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 = {
+                topicid: this.id
+            };
+
+            $(document).trigger(Metamaps.JIT.events.removeTopic, [removeTopicData]);
+        });
+        this.on('noLongerPrivate', function(){
+            var newTopicData = {
+                mappingid: this.getMapping().id,
+                topicid: 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,
+            topic_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();
+        }
+    }
+});
+
+Metamaps.Backbone.TopicCollection = Backbone.Collection.extend({
+    model: Metamaps.Backbone.Topic,
+    url: '/topics'
+});
+
+Metamaps.Backbone.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,
+                synapseid: this.id
+            };
+
+            $(document).trigger(Metamaps.JIT.events.newSynapse, [newSynapseData]);
+        });
+        this.on('nowPrivate', function(){
+            $(document).trigger(Metamaps.JIT.events.removeSynapse, [{
+                synapseid: this.id
+            }]);
+        });
+
+        this.on('change:desc', Metamaps.Filter.checkSynapses, this);
+    },
+    prepareLiForFilter: function () {
+        var li = '';
+        li += '<li data-id="' + this.get('desc') + '">';      
+        li += '<img src="/assets/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 () {
+        return [
+                this.getTopic1().get('node').id,
+                this.getTopic2().get('node').id
+            ];
+    },
+    getMapping: function () {
+        
+        if (!Metamaps.Active.Map) return false;
+        
+        return Metamaps.Mappings.findWhere({
+            map_id: Metamaps.Active.Map.id,
+            synapse_id: this.isNew() ? this.cid : this.id
+        });
+    },
+    createEdge: function () {
+        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 = 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();
+        }
+    }
+});
+
+Metamaps.Backbone.SynapseCollection = Backbone.Collection.extend({
+    model: Metamaps.Backbone.Synapse,
+    url: '/synapses'
+});
+
+Metamaps.Backbone.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('category') === 'Topic') return Metamaps.Topic.get(this.get('topic_id'));
+        else return false;
+    },
+    getSynapse: function () {
+        if (this.get('category') === 'Synapse') return Metamaps.Synapse.get(this.get('synapse_id'));
+        else return false;
+    }
+});
+
+Metamaps.Backbone.MappingCollection = Backbone.Collection.extend({
+    model: Metamaps.Backbone.Mapping,
+    url: '/mappings'
+});
+
+//attach collection event listeners
+Metamaps.Backbone.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();
+        });
+    }
+}
+
+Metamaps.Backbone.init = function () {
+    
+    Metamaps.Metacodes = Metamaps.Metacodes ? new Metamaps.Backbone.MetacodeCollection(Metamaps.Metacodes) : new Metamaps.Backbone.MetacodeCollection();
+
+    Metamaps.Topics = Metamaps.Topics ? new Metamaps.Backbone.TopicCollection(Metamaps.Topics) : new Metamaps.Backbone.TopicCollection();
+
+    Metamaps.Synapses = Metamaps.Synapses ? new Metamaps.Backbone.SynapseCollection(Metamaps.Synapses) : new Metamaps.Backbone.SynapseCollection();
+
+    Metamaps.Mappers = Metamaps.Mappers ? new Metamaps.Backbone.MapperCollection(Metamaps.Mappers) : new Metamaps.Backbone.MapperCollection();
+
+    // this is for topic view
+    Metamaps.Creators = Metamaps.Creators ? new Metamaps.Backbone.MapperCollection(Metamaps.Creators) : new Metamaps.Backbone.MapperCollection();
+
+    if (Metamaps.Active.Map) {
+        Metamaps.Mappings = Metamaps.Mappings ? new Metamaps.Backbone.MappingCollection(Metamaps.Mappings) : new Metamaps.Backbone.MappingCollection();
+
+        Metamaps.Active.Map = new Metamaps.Backbone.Map(Metamaps.Active.Map);
+    }
+
+    if (Metamaps.Active.Topic) Metamaps.Active.Topic = new Metamaps.Backbone.Topic(Metamaps.Active.Topic);
+
+    Metamaps.Backbone.attachCollectionEvents();
+};

app/assets/javascripts/src/Metamaps.GlobalUI.js

@@ -1,39 +1,4 @@
-var Metamaps = {}; // this variable declaration defines a Javascript object that will contain all the variables and functions used by us, broken down into 'sub-modules' that look something like this
-/*
-
-* unless you are on a page with the Javascript InfoVis Toolkit (Topic or Map) the only section in the metamaps 
-* object will be these
-GlobalUI
-Active
-Maps
-Mappers
-Backbone
-
-* all these get added when you are on a page with the Javascript Infovis Toolkit
-Settings
-Touch
-Mouse
-Selected
-Metacodes
-Topics
-Synapses
-Mappings
-Create
-TopicCard
-SynapseCard
-Visualize
-Util
-Realtime
-Control
-Filter
-Listeners
-Organize
-Map
-Mapper
-Topic
-Synapse
-JIT 
-*/
+if (typeof Metamaps === 'undefined') Metamaps = {};
 
 Metamaps.Active = {
     Map: null,
@@ -42,31 +7,6 @@ Metamaps.Active = {
 };
 Metamaps.Maps = {};
 
-$(document).ready(function () {
-
-    for (var prop in Metamaps) {
-
-        // this runs the init function within each sub-object on the Metamaps one
-        if (Metamaps.hasOwnProperty(prop) &&
-            Metamaps[prop].hasOwnProperty('init') &&
-            typeof (Metamaps[prop].init) == 'function'
-        ) {
-            Metamaps[prop].init();
-        }
-    }
-
-    // initialize the famous ui
-    var callFamous = function(){
-        if (Metamaps.Famous) {
-            Metamaps.Famous.build();
-        }
-        else {
-            setTimeout(callFamous, 100);
-        }
-    }
-    callFamous();
-});
-
 Metamaps.GlobalUI = {
     notifyTimeout: null,
     lightbox: null,
@@ -76,6 +16,7 @@ Metamaps.GlobalUI = {
         self.Search.init();
         self.CreateMap.init();
         self.Account.init();
+        self.CheatSheet.init();
 
         //bind lightbox clicks
         $('.openLightbox').click(function (event) {
@@ -362,6 +303,31 @@ Metamaps.GlobalUI.Account = {
     }
 };
 
+Mapmaker.GlobalUI.CheatSheet = {
+    init: function () {
+        // tab the cheatsheet
+        $('#cheatSheet').tabs();
+        $('#quickReference').tabs().addClass("ui-tabs-vertical ui-helper-clearfix");
+        $("#quickReference .ui-tabs-nav li").removeClass("ui-corner-top").addClass("ui-corner-left");
+        
+        // id = the id of a vimeo video
+        var switchVideo = function (element, id) {
+            $('.tutorialItem').removeClass("active");
+            $(element).addClass("active");
+            $('#tutorialVideo').attr('src','//player.vimeo.com/video/'+id);
+        };
+
+        $('#gettingStarted').click(function() {
+            //switchVideo(this,'88334167');
+        });
+        $('#upYourSkillz').click(function() {
+            //switchVideo(this,'100118167');
+        });
+        $('#advancedMapping').click(function() {
+            //switchVideo(this,'88334167');
+        });
+    }
+};
 
 
 Metamaps.GlobalUI.Search = {

app/assets/javascripts/src/Metamaps.Router.js

@@ -1,3 +1,5 @@
+if (typeof Metamaps === 'undefined') Metamaps = {};
+
 (function () {
 
     Metamaps.currentPage = "";

app/assets/javascripts/src/Metamaps.Views.js

@@ -1,3 +1,5 @@
+if (typeof Metamaps === 'undefined') Metamaps = {};
+
 (function () {
     Metamaps.Views = {};
 

app/views/admin/_adminpanel.html.erb

@@ -1,3 +1,4 @@
+<%= javascript_include_tag "pages/Metamaps.Admin" %>
 <%= link_to 'Metacode Sets', metacode_sets_path, { :class => 'button', 'data-bypass' => 'true' }%>
 <%= link_to 'New Set', new_metacode_set_path, { :class => 'button', 'data-bypass' => 'true' }%>
 <%= link_to 'Metacodes', metacodes_path, { :class => 'button', 'data-bypass' => 'true' }%>

app/views/layouts/application.html.erb

@@ -13,6 +13,7 @@
   <meta name="viewport" content="width=device-width, user-scalable=no">
 
   <%= stylesheet_link_tag    "application", :media => "all" %>
+  <script type="text/javascript" src="//website.com/mapmaker.js"></script>
   <%= javascript_include_tag "application" %>
 
   <!-- typekit for vinyl font -->
@@ -64,6 +65,34 @@
       });
     </script>
   <![endif]-->
+
+  <script>
+  $(document).ready(function () {
+
+      for (var prop in Metamaps) {
+
+          // this runs the init function within each sub-object on the Metamaps one
+          if (Metamaps.hasOwnProperty(prop) &&
+              Metamaps[prop].hasOwnProperty('init') &&
+              typeof (Metamaps[prop].init) == 'function'
+          ) {
+              Metamaps[prop].init();
+          }
+      }
+
+      // initialize the famous ui
+      var callFamous = function(){
+          if (Metamaps.Famous) {
+              Metamaps.Famous.build();
+          }
+          else {
+              setTimeout(callFamous, 100);
+          }
+      }
+      callFamous();
+  });
+  </script>
+
 </head>
 
 <body data-env="<%= Rails.env %>" class="<%= authenticated? ? "authenticated" : "unauthenticated" %>">

app/views/users/edit.html.erb

@@ -5,6 +5,8 @@
   #%>
   
 <% content_for :title, @user.name + "'s Settings | Metamaps" %> 
+
+<%= javascript_include_tag "pages/Metamaps.Admin" %>
 <div id="yield">
 <%= form_for @user, url: user_url, :html =>{ :multipart => true, :class => "edit_user centerGreyForm"} do |form| %>
   <h3>Edit Account</h3>