hide the permission box, unless you're the one who can change the permission

.agignore

@@ -1 +0,0 @@
-app/assets/javascripts/metamaps.secret.bundle.js

.babelrc

@@ -1,10 +0,0 @@
-{
-  "presets": [
-    "react",
-    "es2015"
-  ],
-  "plugins": [
-    "lodash",
-    "transform-class-properties"
-  ]
-}

.buildpacks

@@ -1,2 +1 @@
-https://github.com/heroku/heroku-buildpack-nodejs.git
 https://github.com/heroku/heroku-buildpack-ruby.git

.codeclimate.yml

@@ -1,38 +0,0 @@
----
-engines:
-  brakeman:
-    enabled: true
-  bundler-audit:
-    enabled: true
-  duplication:
-    enabled: true
-    config:
-      languages:
-        count_threshold: 3 # rule of three
-        ruby:
-          mass_threshold: 36 # default: 18
-        javascript:
-          mass_threshold: 80 # default: 40
-  eslint:
-    enabled: true
-    channel: "eslint-3"
-  fixme:
-    enabled: true
-  rubocop:
-    enabled: true
-    exclude_fingerprints:
-      - 74f18007b920e8d81148d2f6a2756534
-ratings:
-  paths:
-  - 'Gemfile.lock'
-  - '**.erb'
-  - '**.rb'
-  - '**.js'
-  - '**.jsx'
-exclude_paths:
-- app/assets/images/
-- app/assets/javascripts/lib/
-- frontend/src/patched/
-- db/
-- script/
-- spec/

.eslintignore

@@ -1,3 +0,0 @@
-**/*{.,-}min.js
-frontend/src/patched/*
-app/assets/javascripts/lib/*

.eslintrc.js

@@ -1,26 +0,0 @@
-module.exports = {
-  "sourceType": "module",
-  "parser": "babel-eslint",
-  "parserOptions": {
-    "ecmaFeatures": {
-      "jsx": true
-    }
-  },
-  "extends": "standard",
-  "installedESLint": true,
-  "env": {
-    "es6": true,
-    "node": true
-  },
-  "plugins": [
-    "promise",
-    "standard",
-    "react"
-  ],
-  "rules": {
-    "react/jsx-uses-react": [2],
-    "react/jsx-uses-vars": [2],
-    "space-before-function-paren": [2, "never"],
-    "yoda": [2, "never", { "exceptRange": true }]
-  }
-}

.example-env

@@ -1,27 +1,21 @@
-# Node JS env
-export NODE_REALTIME_PORT='5000' # should match REALTIME_SERVER, below
-
-# Rails env
 export DB_USERNAME='postgres'
 export DB_PASSWORD='3112'
 export DB_HOST='localhost'
 export DB_PORT='5432'
-export DB_NAME='metamaps'
+export DB_NAME='metamap002'
 
-export REALTIME_SERVER='http://localhost:5000'
+export REALTIME_SERVER='http://localhost:5001'
 export MAILER_DEFAULT_URL='localhost:3000'
 export DEVISE_MAILER_SENDER='team@metamaps.cc'
-
 export DEVISE_SECRET_KEY='f71c467e526f23d614b3b08866cad4788c502bed869c282f06e73ee6c94675b62fe1f6d52fa7ba8196b33031f0d2f3b67e27ea07693c52ecebccb01700cad614'
-export SECRET_KEY_BASE='267c8a84f63963282f45bc3010eaddf027abfab58fc759d6e239c8005f85ee99d6d01b1ab6394cdee9ca7f8c9213a0cf91d3d8d3350f096123e2caccbcc0924f'
 
 # # you can safely leave these blank, unless you're deploying an instance, in
 # # which case you'll need to set them up
 #
-# export S3_REGION
 # export S3_BUCKET_NAME
 # export AWS_ACCESS_KEY_ID
 # export AWS_SECRET_ACCESS_KEY
+# export SSO_KEY
 #
 # export SMTP_DOMAIN
 # export SMTP_PASSWORD

.gitignore

@@ -7,15 +7,11 @@
 #assety stuff
 public/assets
 public/metamaps_mobile
-public/api/index.html
 vendor/
 node_modules
-npm-debug.log
-app/assets/javascripts/webpacked
 
 #secrets and config
 .env
-*.swp
 
 # Ignore bundler config
 .bundle
@@ -23,7 +19,6 @@ app/assets/javascripts/webpacked
 # Ignore all logfiles and tempfiles.
 log/*.log
 tmp
-.tmp
 
 coverage
 
@@ -31,5 +26,3 @@ coverage
 */.DS_Store
 .DS_Store?
 .vagrant
-gentle/
-startserver.sh

.nvmrc

@@ -1 +0,0 @@
-6.2.2

.rubocop.yml

@@ -1,29 +0,0 @@
-AllCops:
-  TargetRubyVersion: 2.3
-  Exclude:
-    - 'db/**/*'
-    - 'tmp/**/*'
-    - 'bin/**/*'
-    - 'vendor/**/*'
-    - 'app/assets/javascripts/node_modules/**/*'
-    - 'Vagrantfile'
-
-Rails:
-  Enabled: true
-
-Metrics/LineLength:
-  Max: 120
-
-Metrics/AbcSize:
-  Max: 16
-
-Style/Documentation:
-  Enabled: false
-
-Style/EmptyMethod:
-  EnforcedStyle: expanded
-
-# I like this cop, but occasionally code is more readable without a guard clause,
-# and I don't want to write rubocop:disable comments every time that happens
-Style/GuardClause:
-  Enabled: false

.ruby-version

@@ -1 +1 @@
-2.3.0
+ruby-2.1.3

.simplecov

@@ -1,7 +1,3 @@
 if ENV['COVERAGE'] == 'on'
-  SimpleCov.start 'rails' do
-    add_group 'Policies', 'app/policies'
-    add_group 'Services', 'app/services'
-    add_group 'Serializers', 'app/serializers'
-  end
+  SimpleCov.start 'rails'
 end

.travis.yml

@@ -5,7 +5,7 @@ cache:
   directories:
   - app/assets/javascripts/node_modules
 rvm:
-  - 2.3.0
+  - 2.1.3
 before_script:
   - echo "Rspec setup"
   - export RAILS_ENV=test
@@ -16,10 +16,6 @@ before_script:
   - . $HOME/.nvm/nvm.sh
   - nvm install stable
   - nvm use stable
-  - npm install --no-optional
+  - (cd app/assets/javascripts && npm install)
 script:
-  - bundle exec rspec && bundle exec brakeman -q -z && npm test
-addons:
-  code_climate:
-    repo_token: 479d3bf56798fbc7fff3fc8151a5ed09e8ac368fd5af332c437b9e07dbebb44e
-  postgresql: "9.4"
+  - bundle exec rspec && (cd app/assets/javascripts && npm test)

Gemfile

@@ -1,44 +1,50 @@
-# frozen_string_literal: true
-
 source 'https://rubygems.org'
-ruby '2.3.0'
+ruby '2.1.3'
 
-gem 'rails', '~> 5.0.0'
+gem 'rails', '4.2.4'
 
-gem 'active_model_serializers'
-gem 'aws-sdk', '~> 2.7.0'
-gem 'best_in_place'
-gem 'delayed_job'
-gem 'delayed_job_active_record'
+gem 'active_model_serializers', '~> 0.8.1'
+gem 'aws-sdk', '< 2.0'
+gem 'best_in_place' #in-place editing
+gem 'delayed_job', '~> 4.0.2'
+gem 'delayed_job_active_record', '~> 4.0.1'
 gem 'devise'
 gem 'doorkeeper'
-gem 'dotenv-rails'
+gem 'dotenv'
 gem 'exception_notification'
+gem 'formtastic'
+gem 'formula'
 gem 'httparty'
 gem 'json'
-gem 'kaminari'
-gem 'mailboxer'
+gem 'kaminari' # pagination
 gem 'paperclip'
 gem 'pg'
-gem 'puma'
 gem 'pundit'
 gem 'pundit_extra'
-gem 'rack-attack'
 gem 'rack-cors'
-gem 'redis', '~> 3.3.3'
+gem 'rails3-jquery-autocomplete'
+gem 'redis'
 gem 'slack-notifier'
 gem 'snorlax'
-gem 'sucker_punch'
+gem 'uservoice-ruby'
 
-# asset stuff
 gem 'jquery-rails'
 gem 'jquery-ui-rails'
-gem 'sass-rails'
-gem 'uglifier'
+gem 'jbuilder'
+
+group :assets do
+  gem 'coffee-rails'
+  gem 'sass-rails'
+  gem 'uglifier'
+  # gem 'therubyracer'
+end
+
+group :production do
+ gem 'rails_12factor'
+end
 
 group :test do
-  gem 'brakeman', require: false
-  gem 'factory_bot_rails'
+  gem 'factory_girl_rails'
   gem 'json-schema'
   gem 'rspec-rails'
   gem 'shoulda-matchers'
@@ -48,10 +54,8 @@ end
 group :development, :test do
   gem 'better_errors'
   gem 'binding_of_caller'
-  gem 'faker'
   gem 'pry-byebug'
   gem 'pry-rails'
-  gem 'rubocop', '~> 0.48.1' # match code climate https://github.com/tootsuite/mastodon/issues/1758
-  gem 'timecop'
+  gem 'quiet_assets'
   gem 'tunemygc'
 end

Gemfile.lock

@@ -1,350 +1,308 @@
 GEM
   remote: https://rubygems.org/
   specs:
-    actioncable (5.0.5)
-      actionpack (= 5.0.5)
-      nio4r (>= 1.2, < 3.0)
-      websocket-driver (~> 0.6.1)
-    actionmailer (5.0.5)
-      actionpack (= 5.0.5)
-      actionview (= 5.0.5)
-      activejob (= 5.0.5)
+    actionmailer (4.2.4)
+      actionpack (= 4.2.4)
+      actionview (= 4.2.4)
+      activejob (= 4.2.4)
       mail (~> 2.5, >= 2.5.4)
-      rails-dom-testing (~> 2.0)
-    actionpack (5.0.5)
-      actionview (= 5.0.5)
-      activesupport (= 5.0.5)
-      rack (~> 2.0)
-      rack-test (~> 0.6.3)
-      rails-dom-testing (~> 2.0)
+      rails-dom-testing (~> 1.0, >= 1.0.5)
+    actionpack (4.2.4)
+      actionview (= 4.2.4)
+      activesupport (= 4.2.4)
+      rack (~> 1.6)
+      rack-test (~> 0.6.2)
+      rails-dom-testing (~> 1.0, >= 1.0.5)
       rails-html-sanitizer (~> 1.0, >= 1.0.2)
-    actionview (5.0.5)
-      activesupport (= 5.0.5)
+    actionview (4.2.4)
+      activesupport (= 4.2.4)
       builder (~> 3.1)
       erubis (~> 2.7.0)
-      rails-dom-testing (~> 2.0)
-      rails-html-sanitizer (~> 1.0, >= 1.0.3)
-    active_model_serializers (0.10.6)
-      actionpack (>= 4.1, < 6)
-      activemodel (>= 4.1, < 6)
-      case_transform (>= 0.2)
-      jsonapi-renderer (>= 0.1.1.beta1, < 0.2)
-    activejob (5.0.5)
-      activesupport (= 5.0.5)
-      globalid (>= 0.3.6)
-    activemodel (5.0.5)
-      activesupport (= 5.0.5)
-    activerecord (5.0.5)
-      activemodel (= 5.0.5)
-      activesupport (= 5.0.5)
-      arel (~> 7.0)
-    activesupport (5.0.5)
-      concurrent-ruby (~> 1.0, >= 1.0.2)
+      rails-dom-testing (~> 1.0, >= 1.0.5)
+      rails-html-sanitizer (~> 1.0, >= 1.0.2)
+    active_model_serializers (0.8.3)
+      activemodel (>= 3.0)
+    activejob (4.2.4)
+      activesupport (= 4.2.4)
+      globalid (>= 0.3.0)
+    activemodel (4.2.4)
+      activesupport (= 4.2.4)
+      builder (~> 3.1)
+    activerecord (4.2.4)
+      activemodel (= 4.2.4)
+      activesupport (= 4.2.4)
+      arel (~> 6.0)
+    activesupport (4.2.4)
       i18n (~> 0.7)
+      json (~> 1.7, >= 1.7.7)
       minitest (~> 5.1)
+      thread_safe (~> 0.3, >= 0.3.4)
       tzinfo (~> 1.1)
-    addressable (2.5.2)
-      public_suffix (>= 2.0.2, < 4.0)
-    arel (7.1.4)
-    ast (2.3.0)
-    aws-sdk (2.7.0)
-      aws-sdk-resources (= 2.7.0)
-    aws-sdk-core (2.7.0)
-      aws-sigv4 (~> 1.0)
-      jmespath (~> 1.0)
-    aws-sdk-resources (2.7.0)
-      aws-sdk-core (= 2.7.0)
-    aws-sigv4 (1.0.2)
+    addressable (2.3.8)
+    arel (6.0.3)
+    aws-sdk (1.66.0)
+      aws-sdk-v1 (= 1.66.0)
+    aws-sdk-v1 (1.66.0)
+      json (~> 1.4)
+      nokogiri (>= 1.4.4)
     bcrypt (3.1.11)
-    best_in_place (3.1.1)
+    best_in_place (3.1.0)
       actionpack (>= 3.2)
       railties (>= 3.2)
-    better_errors (2.3.0)
+    better_errors (2.1.1)
       coderay (>= 1.0.0)
-      erubi (>= 1.0.0)
+      erubis (>= 2.6.6)
       rack (>= 0.9.0)
     binding_of_caller (0.7.2)
       debug_inspector (>= 0.0.1)
-    brakeman (3.7.2)
-    builder (3.2.3)
-    byebug (9.1.0)
-    carrierwave (1.1.0)
-      activemodel (>= 4.0.0)
-      activesupport (>= 4.0.0)
-      mime-types (>= 1.16)
-    case_transform (0.2)
-      activesupport
-    climate_control (0.2.0)
+    builder (3.2.2)
+    byebug (8.2.2)
+    climate_control (0.0.3)
+      activesupport (>= 3.0)
     cocaine (0.5.8)
       climate_control (>= 0.0.3, < 1.0)
-    coderay (1.1.2)
-    concurrent-ruby (1.0.5)
-    debug_inspector (0.0.3)
-    delayed_job (4.1.3)
-      activesupport (>= 3.0, < 5.2)
-    delayed_job_active_record (4.1.2)
-      activerecord (>= 3.0, < 5.2)
-      delayed_job (>= 3.0, < 5)
-    devise (4.3.0)
+    coderay (1.1.1)
+    coffee-rails (4.1.1)
+      coffee-script (>= 2.2.0)
+      railties (>= 4.0.0, < 5.1.x)
+    coffee-script (2.4.1)
+      coffee-script-source
+      execjs
+    coffee-script-source (1.10.0)
+    concurrent-ruby (1.0.1)
+    debug_inspector (0.0.2)
+    delayed_job (4.0.6)
+      activesupport (>= 3.0, < 5.0)
+    delayed_job_active_record (4.0.3)
+      activerecord (>= 3.0, < 5.0)
+      delayed_job (>= 3.0, < 4.1)
+    devise (3.5.6)
       bcrypt (~> 3.0)
       orm_adapter (~> 0.1)
-      railties (>= 4.1.0, < 5.2)
+      railties (>= 3.2.6, < 5)
       responders
+      thread_safe (~> 0.1)
       warden (~> 1.2.3)
-    diff-lcs (1.3)
+    diff-lcs (1.2.5)
     docile (1.1.5)
-    doorkeeper (4.2.6)
-      railties (>= 4.2)
-    dotenv (2.2.1)
-    dotenv-rails (2.2.1)
-      dotenv (= 2.2.1)
-      railties (>= 3.2, < 5.2)
-    erubi (1.6.1)
+    doorkeeper (3.1.0)
+      railties (>= 3.2)
+    dotenv (2.1.0)
     erubis (2.7.0)
-    exception_notification (4.2.2)
-      actionmailer (>= 4.0, < 6)
-      activesupport (>= 4.0, < 6)
-    execjs (2.7.0)
-    factory_bot (4.8.2)
+    exception_notification (4.1.4)
+      actionmailer (~> 4.0)
+      activesupport (~> 4.0)
+    execjs (2.6.0)
+    ezcrypto (0.7.2)
+    factory_girl (4.5.0)
       activesupport (>= 3.0.0)
-    factory_bot_rails (4.8.2)
-      factory_bot (~> 4.8.2)
+    factory_girl_rails (4.6.0)
+      factory_girl (~> 4.5.0)
       railties (>= 3.0.0)
-    faker (1.8.4)
-      i18n (~> 0.5)
-    ffi (1.9.18)
-    globalid (0.4.0)
-      activesupport (>= 4.2.0)
-    httparty (0.15.6)
+    formtastic (3.1.3)
+      actionpack (>= 3.2.13)
+    formula (1.1.1)
+      rails (> 3.0.0)
+    globalid (0.3.6)
+      activesupport (>= 4.1.0)
+    httparty (0.13.7)
+      json (~> 1.8)
       multi_xml (>= 0.5.2)
-    i18n (0.9.3)
-      concurrent-ruby (~> 1.0)
-    jmespath (1.3.1)
-    jquery-rails (4.3.1)
+    i18n (0.7.0)
+    jbuilder (2.4.1)
+      activesupport (>= 3.0.0, < 5.1)
+      multi_json (~> 1.2)
+    jquery-rails (4.1.1)
       rails-dom-testing (>= 1, < 3)
       railties (>= 4.2.0)
       thor (>= 0.14, < 2.0)
-    jquery-ui-rails (6.0.1)
+    jquery-ui-rails (5.0.5)
       railties (>= 3.2.16)
-    json (2.1.0)
-    json-schema (2.8.0)
-      addressable (>= 2.4)
-    jsonapi-renderer (0.1.3)
-    kaminari (1.0.1)
-      activesupport (>= 4.1.0)
-      kaminari-actionview (= 1.0.1)
-      kaminari-activerecord (= 1.0.1)
-      kaminari-core (= 1.0.1)
-    kaminari-actionview (1.0.1)
-      actionview
-      kaminari-core (= 1.0.1)
-    kaminari-activerecord (1.0.1)
-      activerecord
-      kaminari-core (= 1.0.1)
-    kaminari-core (1.0.1)
+    json (1.8.3)
+    json-schema (2.6.1)
+      addressable (~> 2.3.8)
+    kaminari (0.16.3)
+      actionpack (>= 3.0.0)
+      activesupport (>= 3.0.0)
     loofah (2.0.3)
       nokogiri (>= 1.5.9)
-    mail (2.6.6)
+    mail (2.6.4)
       mime-types (>= 1.16, < 4)
-    mailboxer (0.15.1)
-      carrierwave (>= 0.5.8)
-      rails (>= 5.0.0)
     method_source (0.8.2)
-    mime-types (3.1)
+    mime-types (3.0)
       mime-types-data (~> 3.2015)
-    mime-types-data (3.2016.0521)
-    mimemagic (0.3.2)
-    mini_portile2 (2.3.0)
-    minitest (5.11.1)
-    multi_xml (0.6.0)
-    nio4r (2.1.0)
-    nokogiri (1.8.1)
-      mini_portile2 (~> 2.3.0)
+    mime-types-data (3.2016.0221)
+    mimemagic (0.3.0)
+    mini_portile2 (2.0.0)
+    minitest (5.8.4)
+    multi_json (1.11.2)
+    multi_xml (0.5.5)
+    nokogiri (1.6.7.2)
+      mini_portile2 (~> 2.0.0.rc2)
+    oauth (0.5.1)
     orm_adapter (0.5.0)
-    paperclip (5.2.0)
-      activemodel (>= 4.2.0)
-      activesupport (>= 4.2.0)
+    paperclip (4.3.5)
+      activemodel (>= 3.2.0)
+      activesupport (>= 3.2.0)
       cocaine (~> 0.5.5)
       mime-types
-      mimemagic (~> 0.3.0)
-    parser (2.4.0.2)
-      ast (~> 2.3)
-    pg (0.21.0)
-    powerpack (0.1.1)
-    pry (0.10.4)
+      mimemagic (= 0.3.0)
+    pg (0.18.4)
+    pry (0.10.3)
       coderay (~> 1.1.0)
       method_source (~> 0.8.1)
       slop (~> 3.4)
-    pry-byebug (3.5.0)
-      byebug (~> 9.1)
+    pry-byebug (3.3.0)
+      byebug (~> 8.0)
       pry (~> 0.10)
-    pry-rails (0.3.6)
-      pry (>= 0.10.4)
-    public_suffix (3.0.0)
-    puma (3.10.0)
+    pry-rails (0.3.4)
+      pry (>= 0.9.10)
     pundit (1.1.0)
       activesupport (>= 3.0.0)
-    pundit_extra (0.3.0)
-    rack (2.0.3)
-    rack-attack (5.0.1)
-      rack
-    rack-cors (1.0.1)
+    pundit_extra (0.1.1)
+    quiet_assets (1.1.0)
+      railties (>= 3.1, < 5.0)
+    rack (1.6.4)
+    rack-cors (0.4.0)
     rack-test (0.6.3)
       rack (>= 1.0)
-    rails (5.0.5)
-      actioncable (= 5.0.5)
-      actionmailer (= 5.0.5)
-      actionpack (= 5.0.5)
-      actionview (= 5.0.5)
-      activejob (= 5.0.5)
-      activemodel (= 5.0.5)
-      activerecord (= 5.0.5)
-      activesupport (= 5.0.5)
-      bundler (>= 1.3.0)
-      railties (= 5.0.5)
-      sprockets-rails (>= 2.0.0)
-    rails-dom-testing (2.0.3)
-      activesupport (>= 4.2.0)
-      nokogiri (>= 1.6)
+    rails (4.2.4)
+      actionmailer (= 4.2.4)
+      actionpack (= 4.2.4)
+      actionview (= 4.2.4)
+      activejob (= 4.2.4)
+      activemodel (= 4.2.4)
+      activerecord (= 4.2.4)
+      activesupport (= 4.2.4)
+      bundler (>= 1.3.0, < 2.0)
+      railties (= 4.2.4)
+      sprockets-rails
+    rails-deprecated_sanitizer (1.0.3)
+      activesupport (>= 4.2.0.alpha)
+    rails-dom-testing (1.0.7)
+      activesupport (>= 4.2.0.beta, < 5.0)
+      nokogiri (~> 1.6.0)
+      rails-deprecated_sanitizer (>= 1.0.1)
     rails-html-sanitizer (1.0.3)
       loofah (~> 2.0)
-    railties (5.0.5)
-      actionpack (= 5.0.5)
-      activesupport (= 5.0.5)
-      method_source
+    rails3-jquery-autocomplete (1.0.15)
+      rails (>= 3.2)
+    rails_12factor (0.0.3)
+      rails_serve_static_assets
+      rails_stdout_logging
+    rails_serve_static_assets (0.0.5)
+    rails_stdout_logging (0.0.4)
+    railties (4.2.4)
+      actionpack (= 4.2.4)
+      activesupport (= 4.2.4)
       rake (>= 0.8.7)
       thor (>= 0.18.1, < 2.0)
-    rainbow (2.2.2)
-      rake
-    rake (12.3.0)
-    rb-fsevent (0.10.2)
-    rb-inotify (0.9.10)
-      ffi (>= 0.5.0, < 2)
-    redis (3.3.3)
-    responders (2.4.0)
-      actionpack (>= 4.2.0, < 5.3)
-      railties (>= 4.2.0, < 5.3)
-    rspec-core (3.6.0)
-      rspec-support (~> 3.6.0)
-    rspec-expectations (3.6.0)
+    rake (11.1.1)
+    redis (3.2.2)
+    responders (2.1.1)
+      railties (>= 4.2.0, < 5.1)
+    rspec-core (3.4.4)
+      rspec-support (~> 3.4.0)
+    rspec-expectations (3.4.0)
       diff-lcs (>= 1.2.0, < 2.0)
-      rspec-support (~> 3.6.0)
-    rspec-mocks (3.6.0)
+      rspec-support (~> 3.4.0)
+    rspec-mocks (3.4.1)
       diff-lcs (>= 1.2.0, < 2.0)
-      rspec-support (~> 3.6.0)
-    rspec-rails (3.6.1)
-      actionpack (>= 3.0)
-      activesupport (>= 3.0)
-      railties (>= 3.0)
-      rspec-core (~> 3.6.0)
-      rspec-expectations (~> 3.6.0)
-      rspec-mocks (~> 3.6.0)
-      rspec-support (~> 3.6.0)
-    rspec-support (3.6.0)
-    rubocop (0.48.1)
-      parser (>= 2.3.3.1, < 3.0)
-      powerpack (~> 0.1)
-      rainbow (>= 1.99.1, < 3.0)
-      ruby-progressbar (~> 1.7)
-      unicode-display_width (~> 1.0, >= 1.0.1)
-    ruby-progressbar (1.9.0)
-    sass (3.5.1)
-      sass-listen (~> 4.0.0)
-    sass-listen (4.0.0)
-      rb-fsevent (~> 0.9, >= 0.9.4)
-      rb-inotify (~> 0.9, >= 0.9.7)
-    sass-rails (5.0.6)
-      railties (>= 4.0.0, < 6)
+      rspec-support (~> 3.4.0)
+    rspec-rails (3.4.2)
+      actionpack (>= 3.0, < 4.3)
+      activesupport (>= 3.0, < 4.3)
+      railties (>= 3.0, < 4.3)
+      rspec-core (~> 3.4.0)
+      rspec-expectations (~> 3.4.0)
+      rspec-mocks (~> 3.4.0)
+      rspec-support (~> 3.4.0)
+    rspec-support (3.4.1)
+    sass (3.4.21)
+    sass-rails (5.0.4)
+      railties (>= 4.0.0, < 5.0)
       sass (~> 3.1)
       sprockets (>= 2.8, < 4.0)
       sprockets-rails (>= 2.0, < 4.0)
       tilt (>= 1.1, < 3)
-    shoulda-matchers (3.1.2)
+    shoulda-matchers (3.1.1)
       activesupport (>= 4.0.0)
-    simplecov (0.15.0)
+    simplecov (0.11.2)
       docile (~> 1.1.0)
-      json (>= 1.8, < 3)
+      json (~> 1.8)
       simplecov-html (~> 0.10.0)
-    simplecov-html (0.10.2)
-    slack-notifier (2.3.1)
+    simplecov-html (0.10.0)
+    slack-notifier (1.5.1)
     slop (3.6.0)
-    snorlax (0.1.6)
+    snorlax (0.1.5)
       rails (> 4.1)
-    sprockets (3.7.1)
+    sprockets (3.5.2)
       concurrent-ruby (~> 1.0)
       rack (> 1, < 3)
-    sprockets-rails (3.2.1)
+    sprockets-rails (3.0.4)
       actionpack (>= 4.0)
       activesupport (>= 4.0)
       sprockets (>= 3.0.0)
-    sucker_punch (2.0.3)
-      concurrent-ruby (~> 1.0.0)
-    thor (0.20.0)
-    thread_safe (0.3.6)
-    tilt (2.0.8)
-    timecop (0.9.1)
-    tunemygc (1.0.69)
-    tzinfo (1.2.4)
+    thor (0.19.1)
+    thread_safe (0.3.5)
+    tilt (2.0.2)
+    tunemygc (1.0.65)
+    tzinfo (1.2.2)
       thread_safe (~> 0.1)
-    uglifier (3.2.0)
-      execjs (>= 0.3.0, < 3)
-    unicode-display_width (1.3.0)
-    warden (1.2.7)
+    uglifier (2.7.2)
+      execjs (>= 0.3.0)
+      json (>= 1.8.0)
+    uservoice-ruby (0.0.11)
+      ezcrypto (>= 0.7.2)
+      json (>= 1.7.5)
+      oauth (>= 0.4.7)
+    warden (1.2.6)
       rack (>= 1.0)
-    websocket-driver (0.6.5)
-      websocket-extensions (>= 0.1.0)
-    websocket-extensions (0.1.2)
 
 PLATFORMS
   ruby
 
 DEPENDENCIES
-  active_model_serializers
-  aws-sdk (~> 2.7.0)
+  active_model_serializers (~> 0.8.1)
+  aws-sdk (< 2.0)
   best_in_place
   better_errors
   binding_of_caller
-  brakeman
-  delayed_job
-  delayed_job_active_record
+  coffee-rails
+  delayed_job (~> 4.0.2)
+  delayed_job_active_record (~> 4.0.1)
   devise
   doorkeeper
-  dotenv-rails
+  dotenv
   exception_notification
-  factory_bot_rails
-  faker
+  factory_girl_rails
+  formtastic
+  formula
   httparty
+  jbuilder
   jquery-rails
   jquery-ui-rails
   json
   json-schema
   kaminari
-  mailboxer
   paperclip
   pg
   pry-byebug
   pry-rails
-  puma
   pundit
   pundit_extra
-  rack-attack
+  quiet_assets
   rack-cors
-  rails (~> 5.0.0)
-  redis (~> 3.3.3)
+  rails (= 4.2.4)
+  rails3-jquery-autocomplete
+  rails_12factor
+  redis
   rspec-rails
-  rubocop (~> 0.48.1)
   sass-rails
   shoulda-matchers
   simplecov
   slack-notifier
   snorlax
-  sucker_punch
-  timecop
   tunemygc
   uglifier
-
-RUBY VERSION
-   ruby 2.3.0p0
-
-BUNDLED WITH
-   1.16.1
+  uservoice-ruby

Procfile

@@ -1,3 +1,3 @@
-web: bundle exec puma -p $PORT
+web: bundle exec rails server -p $PORT
 worker:  bundle exec rake jobs:work
 

README.md

@@ -1,62 +1,79 @@
 Metamaps
 =======
 
-[![Build Status](https://travis-ci.org/metamaps/metamaps.svg?branch=develop)](https://travis-ci.org/metamaps/metamaps)
-[![Code Climate](https://codeclimate.com/github/metamaps/metamaps/badges/gpa.svg)](https://codeclimate.com/github/metamaps/metamaps)
+[![Join the chat at https://gitter.im/metamaps/metamaps](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/metamaps/metamaps?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
+[![Build Status](https://travis-ci.org/metamaps/metamaps.svg)](https://travis-ci.org/metamaps/metamaps)
 
-## What is Metamaps?
+Welcome to the Metamaps GitHub repo.
 
-Metamaps is a free and open-source technology for changemakers, innovators, educators and students. It enables individuals and communities to build and visualize their shared knowledge and unlock their collective intelligence.
+## About
 
-You can find a version of this software running at [metamaps.cc][site-beta], where the technology is being tested in an open beta.
+Metamaps is a free and AGPL open source technology for changemakers, innovators, educators and students. It enables individuals and communities to build and visualize their shared knowledge and unlock their collective intelligence. You can find out about more about the project at the [blog][site-blog].
 
-Metamaps is developed and maintained by a distributed, nomadic community comprised of technologists, artists and storytellers. You can get in touch by using whichever of these channels you prefer:
+You can find a version of this software running at [metamaps.cc][site-beta], where the technology is being tested in a private beta.
 
-## How do I learn more?
-     
-- Contact: [team@metamaps.cc](mailto:team@metamaps.cc) or [@metamapps](https://twitter.com/metamapps) on Twitter
-- User Documentation: [docs.metamaps.cc](https://docs.metamaps.cc)
-- User Community: [hylo.com/c/metamaps](https://www.hylo.com/c/metamaps)
-- To see what we're developing, or to weigh in on what you'd like to see developed, see our [Metamaps Feedback and Features](https://trello.com/b/uFOA6a2x/metamaps-feedback-feature-ideas-requests) board on trello
-- To follow along with, or contribute,to our design process, see our [Metamaps Design](https://trello.com/b/8HlCikOX/metamaps-design) board on trello
-- To follow along with, or contribute to, our development process, see our [Github Issues and Pull Requests](https://github.com/metamaps/metamaps/issues)
-- Request an invite to the open beta [here](https://metamaps.cc/request)
+Metamaps is created and maintained by a distributed, nomadic community comprised of technologists, artists and storytellers. You can get in touch with us at team@metamaps.cc or @metamapps on twitter.
 
-<!-- markdown hack to split two lists -->
+To get connected with the community interested in Metamaps, join our [Google+ community][community].
+
+## Installation
+
+If you are on Mac or Ubuntu you can use the following instructions to quickly get a local copy of metamaps up and running using a Vagrant virtualbox. Don't be intimidated, it's easy!
+```
+git clone git@github.com:metamaps/metamaps.git
+```
+Now ensure you have VirtualBox and Vagrant installed on your computer
+```
+cd metamaps
+./bin/configure.sh
+```
+This will do all the setup steps to make Metamaps work with a bit of behind the scenes ninja magick.
+
+To start servers which will run metamaps you can then run:
+```
+./bin/start
+```
+To stop them:
+```
+./bin/stop
+```
+With your webservers running, open a web browser and go to `http://localhost:3000`
+
+You can sign in with the default account
+email: `user@user.com`
+password: `toolsplusconsciousness`
+OR create a new account at `/join`, and use access code `qwertyui`
+
+Start mapping and programming!
+
+We haven't figured out Vagrant for Windows yet, but we have a set of manual instructions here:
+
+- [For Windows][windows-installation]
+
+## Contributing
+
+Cloning this repository directly is primarily for those wishing to contribute to our codebase. Check out our [contributing instructions][contributing] to get involved.
+
+## Community
 
-- To send us a personal message get in touch with us via email, Twitter, or Hylo
 - If you would like to report a bug, please check the [issues][contributing-issues] section in our [contributing instructions][contributing].
-- If you would like to get set up as a developer, that's great! Read on for help getting your development environment set up.
-
-## Installation for local use or development of Metamaps
-
-First off is getting the code downloaded to your computer. You can download a zip file from github, but if you've got `git` you can just run `git clone https://github.com/metamaps/metamaps` in your terminal.
-
-There are instructions for setup on various platforms, with particular support for Mac and Ubuntu, which can be found here:
-- [Mac Install Walkthrough][mac-installation]
-- [Ubuntu Install Walkthrough][ubuntu-installation]
-
-If you prefer to isolate your install in a virtual machine, you may find it simpler to setup using Vagrant:
-- [Vagrant installation][vagrant-installation]
-
-We don't promise support for Windows, but at one point we had it running and we've kept those docs available for reference
-- [Outdated Windows Walkthrough][windows-installation]
+- To participate in discussions and a public forum about Metamaps, join the [Google+ community][community]
+- For contributors, read more instructions in [CONTRIBUTING.md][contributing].
 
 ## Licensing information
-
 This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License as published by the Free Software Foundation, either version 3 of the License, or(at your option) any later version.
 
 This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU Affero General Public License for more details.
 
 The license can be read [here][license].
 
-Copyright (c) 2017 Connor Turland
+Copyright (c) 2015 Connor Turland
 
+
+[site-blog]: http://blog.metamaps.cc
 [site-beta]: http://metamaps.cc
+[community]: https://plus.google.com/u/0/communities/115060009262157699234
 [license]: https://github.com/metamaps/metamaps/blob/develop/LICENSE
 [contributing]: https://github.com/metamaps/metamaps/blob/develop/doc/CONTRIBUTING.md
 [contributing-issues]: https://github.com/metamaps/metamaps/blob/develop/doc/CONTRIBUTING.md#reporting-bugs-and-other-issues
-[mac-installation]: https://github.com/metamaps/metamaps/blob/develop/doc/MacInstallation.md
-[ubuntu-installation]: https://github.com/metamaps/metamaps/blob/develop/doc/UbuntuInstallation.md
-[vagrant-installation]: https://github.com/metamaps/metamaps/blob/develop/doc/VagrantInstallation.md
 [windows-installation]: https://github.com/metamaps/metamaps/blob/develop/doc/WindowsInstallation.md

Rakefile

@@ -1,6 +1,4 @@
 #!/usr/bin/env rake
-# frozen_string_literal: true
-
 # Add your own tasks in files placed in lib/tasks ending in .rake,
 # for example lib/tasks/capistrano.rake, and they will automatically be available to Rake.
 

Vagrantfile

@@ -9,7 +9,7 @@ sudo apt-get install git curl -y
 
 # rvm and ruby
 su - vagrant -c 'curl -sSL https://rvm.io/mpapis.asc | gpg --import -'
-su - vagrant -c 'curl -sSL https://get.rvm.io | bash -s stable --ruby=2.3.0'
+su - vagrant -c 'curl -sSL https://get.rvm.io | bash -s stable --ruby=2.1.3'
 
 # install some other deps
 sudo apt-get install nodejs -y
@@ -31,15 +31,15 @@ sudo -u postgres psql -c "ALTER USER postgres WITH PASSWORD '3112';"
 
 SCRIPT
 
-VAGRANTFILE_API_VERSION = '2'
+VAGRANTFILE_API_VERSION = "2"
 
 Vagrant.configure(VAGRANTFILE_API_VERSION) do |config|
-  config.vm.box = 'trusty64'
-  config.vm.box_url = 'http://cloud-images.ubuntu.com/vagrant/trusty/current/trusty-server-cloudimg-amd64-vagrant-disk1.box'
+  config.vm.box = "trusty64"
+  config.vm.box_url = "http://cloud-images.ubuntu.com/vagrant/trusty/current/trusty-server-cloudimg-amd64-vagrant-disk1.box"
   config.vm.network :forwarded_port, guest: 3000, host: 3000
-  config.vm.network :forwarded_port, guest: 5000, host: 5000
-  config.vm.network 'private_network', ip: '10.0.1.11'
-  config.vm.synced_folder '.', '/vagrant', nfs: true
+  config.vm.network :forwarded_port, guest: 5001, host: 5001
+  config.vm.network "private_network", ip: "10.0.1.11"
+  config.vm.synced_folder ".", "/vagrant", :nfs => true
 
-  config.vm.provision 'shell', inline: $script
+  config.vm.provision "shell", inline: $script
 end

app/assets/config/manifest.js

@@ -1,7 +0,0 @@
-// eslint-disable spaced-comment
-// JS and CSS bundles
-//= link_directory ../javascripts .js
-//= link_directory ../stylesheets .css
-
-// Other
-//= link_tree ../images

app/assets/javascripts/Metamaps.ServerData.js.erb

@@ -1,21 +0,0 @@
-/* global Metamaps */
-
-/* erb variables from rails */
-Metamaps.ServerData = Metamaps.ServerData || {}
-Metamaps.ServerData['junto_spinner_darkgrey.gif'] = '<%= asset_path('junto_spinner_darkgrey.gif') %>'
-Metamaps.ServerData['user.png'] = '<%= asset_path('user.png') %>'
-Metamaps.ServerData['icons/wildcard.png'] = '<%= asset_path('icons/wildcard.png') %>'
-Metamaps.ServerData['topic_description_signifier.png'] = '<%= asset_path('topic_description_signifier.png') %>'
-Metamaps.ServerData['topic_link_signifier.png'] = '<%= asset_path('topic_link_signifier.png') %>'
-Metamaps.ServerData['synapse16.png'] = '<%= asset_path('synapse16.png') %>'
-Metamaps.ServerData['sounds/MM_sounds.mp3'] = '<%= asset_path 'sounds/MM_sounds.mp3' %>'
-Metamaps.ServerData['sounds/MM_sounds.ogg'] = '<%= asset_path 'sounds/MM_sounds.ogg' %>'
-Metamaps.ServerData['exploremaps_sprite.png'] = '<%= asset_path 'exploremaps_sprite.png' %>'
-Metamaps.ServerData['map_control_sprite.png'] = '<%= asset_path 'map_control_sprite.png' %>'
-Metamaps.ServerData['user_sprite.png'] = '<%= asset_path 'user_sprite.png' %>'
-Metamaps.ServerData.Metacodes = <%= Metacode.all.to_json.gsub(%r[(icon.*?)(\"},)], '\1?purple=stupid\2').html_safe %>
-Metamaps.ServerData.REALTIME_SERVER = '<%= ENV['REALTIME_SERVER'] %>'
-Metamaps.ServerData.RAILS_ENV = '<%= ENV['RAILS_ENV'] %>'
-Metamaps.ServerData.VERSION = '<%= METAMAPS_VERSION %>'
-Metamaps.ServerData.BUILD = '<%= METAMAPS_BUILD %>'
-Metamaps.ServerData.LAST_UPDATED = '<%= METAMAPS_LAST_UPDATED %>'

app/assets/javascripts/README-testing-js.md

@@ -0,0 +1,9 @@
+Change directories to where this file is, and then run 
+
+    npm install
+
+to set up your testing environment. Then use
+
+    npm test
+
+to see the results of testing the current javascript files.

app/assets/javascripts/application-secret.js

@@ -1,23 +0,0 @@
-// This is a manifest file that'll be compiled into application.js, which will include all the files
-// listed below.
-//
-// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
-// or vendor/assets/javascripts of plugins, if any, can be referenced here using a relative path.
-//
-// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
-// the compiled file.
-//
-// WARNING: THE FIRST BLANK LINE MARKS THE END OF WHAT'S TO BE PROCESSED, ANY BLANK LINE SHOULD
-// GO AFTER THE REQUIRES BELOW.
-//
-/* eslint-disable spaced-comment */
-//= require jquery
-//= require jquery-ui
-//= require jquery_ujs
-//= require action_cable
-//= require_directory ./lib
-//= require ./cloudcarousel-secret
-//= require ./metamaps.secret.bundle
-//= require ./Metamaps.ServerData
-//= require homepageVimeoFallback
-/* eslint-enable spaced-comment */

app/assets/javascripts/application.js

@@ -9,14 +9,41 @@
 //
 // WARNING: THE FIRST BLANK LINE MARKS THE END OF WHAT'S TO BE PROCESSED, ANY BLANK LINE SHOULD
 // GO AFTER THE REQUIRES BELOW.
-//
-/* eslint-disable spaced-comment */
+//  
 //= require jquery
 //= require jquery-ui
 //= require jquery_ujs
-//= require action_cable
+//= require ./orderedLibraries/underscore
+//= require ./orderedLibraries/backbone
 //= require_directory ./lib
-//= require ./webpacked/metamaps.bundle
-//= require ./Metamaps.ServerData
-//= require homepageVimeoFallback
-/* eslint-enable spaced-comment */
+//= require ./src/Metamaps.GlobalUI
+//= require ./src/Metamaps.Router
+//= require ./src/Metamaps.Backbone
+//= require ./src/Metamaps.Views
+//= require ./src/views/chatView
+//= require ./src/views/videoView
+//= require ./src/views/room
+//= require ./src/JIT
+//= require ./src/check-canvas-support
+//= require ./src/Metamaps
+//= require ./src/Metamaps.Create
+//= require ./src/Metamaps.TopicCard
+//= require ./src/Metamaps.SynapseCard
+//= require ./src/Metamaps.Visualize
+//= require ./src/Metamaps.Util
+//= require ./src/Metamaps.Realtime
+//= require ./src/Metamaps.Control
+//= require ./src/Metamaps.Filter
+//= require ./src/Metamaps.Listeners
+//= require ./src/Metamaps.Organize
+//= require ./src/Metamaps.Topic
+//= require ./src/Metamaps.Synapse
+//= require ./src/Metamaps.Map
+//= require ./src/Metamaps.Account
+//= require ./src/Metamaps.Mapper
+//= require ./src/Metamaps.Admin
+//= require ./src/Metamaps.Import
+//= require ./src/Metamaps.JIT
+//= require_directory ./shims
+//= require_directory ./require
+//= require_directory ./famous

app/assets/javascripts/cloudcarousel-secret.js

@@ -1,438 +0,0 @@
-//////////////////////////////////////////////////////////////////////////////////
-// CloudCarousel V1.0.5
-// (c) 2011 by R Cecco. <http://www.professorcloud.com>
-// MIT License
-//
-// Reflection code based on plugin by Christophe Beyls <http://www.digitalia.be>
-//
-// Please retain this copyright header in all versions of the software
-//////////////////////////////////////////////////////////////////////////////////
-var matched, browser;
-
-jQuery.uaMatch = function( ua ) {
-    ua = ua.toLowerCase();
-
-    var match = /(chrome)[ \/]([\w.]+)/.exec( ua ) ||
-        /(webkit)[ \/]([\w.]+)/.exec( ua ) ||
-        /(opera)(?:.*version|)[ \/]([\w.]+)/.exec( ua ) ||
-        /(msie) ([\w.]+)/.exec( ua ) ||
-        ua.indexOf("compatible") < 0 && /(mozilla)(?:.*? rv:([\w.]+)|)/.exec( ua ) ||
-        [];
-
-    return {
-        browser: match[ 1 ] || "",
-        version: match[ 2 ] || "0"
-    };
-};
-
-matched = jQuery.uaMatch( navigator.userAgent );
-browser = {};
-
-if ( matched.browser ) {
-    browser[ matched.browser ] = true;
-    browser.version = matched.version;
-}
-
-// Chrome is Webkit, but Webkit is also Safari.
-if ( browser.chrome ) {
-    browser.webkit = true;
-} else if ( browser.webkit ) {
-    browser.safari = true;
-}
-
-jQuery.browser = browser;
-
-(function($) {
-
-	// START Reflection object.
-	// Creates a reflection for underneath an image.
-	// IE uses an image with IE specific filter properties, other browsers use the Canvas tag.	
-	// The position and size of the reflection gets updated by updateAll() in Controller.
-	function Reflection(img, reflHeight, opacity) {				
-		
-		var	reflection, cntx, imageWidth = img.width, imageHeight = img.width, gradient, parent;
-	
-		parent = $(img.parentNode);
-		this.element = reflection = parent.append("<canvas class='reflection' style='position:absolute'/>").find(':last')[0];
-        if ( !reflection.getContext &&  $.browser.msie) {
-			this.element = reflection = parent.append("<img class='reflection' style='position:absolute'/>").find(':last')[0];					
-			reflection.src = img.src;			
-			reflection.style.filter = "flipv progid:DXImageTransform.Microsoft.Alpha(opacity=" + (opacity * 100) + ", style=1, finishOpacity=0, startx=0, starty=0, finishx=0, finishy=" + (reflHeight / imageHeight * 100) + ")";	
-			
-        } else {							
-			cntx = reflection.getContext("2d");
-			try {
-				
-				
-				$(reflection).attr({width: imageWidth, height: reflHeight});
-				cntx.save();
-				cntx.translate(0, imageHeight-1);
-				cntx.scale(1, -1);				
-				cntx.drawImage(img, 0, 0, imageWidth, imageHeight);				
-				cntx.restore();
-				cntx.globalCompositeOperation = "destination-out";
-				gradient = cntx.createLinearGradient(0, 0, 0, reflHeight);
-				gradient.addColorStop(0, "rgba(255, 255, 255, " + (1 - opacity) + ")");
-				gradient.addColorStop(1, "rgba(255, 255, 255, 1.0)");
-				cntx.fillStyle = gradient;
-				cntx.fillRect(0, 0, imageWidth, reflHeight);				
-			} catch(e) {			
-				return;
-			}		
-		}
-		// Store a copy of the alt and title attrs into the reflection
-		$(reflection).attr({ 'alt': $(img).attr('alt'), title: $(img).attr('title')} );	
-				
-	}	//END Reflection object
-
-	// START Item object.
-	// A wrapper object for items within the carousel.
-	var	Item = function(imgIn, options)
-	{								
-		this.orgWidth = imgIn.width;			
-		this.orgHeight = imgIn.height;		
-		this.image = imgIn;
-		this.reflection = null;					
-		this.alt = imgIn.alt;
-		this.title = imgIn.title;
-		this.imageOK = false;		
-		this.options = options;				
-						
-		this.imageOK = true;	
-		
-		if (this.options.reflHeight > 0)
-		{													
-			this.reflection = new Reflection(this.image, this.options.reflHeight, this.options.reflOpacity);					
-		}
-		$(this.image).css('position','absolute');	// Bizarre. This seems to reset image width to 0 on webkit!					
-	};// END Item object
-	
-	
-	// Controller object.
-	// This handles moving all the items, dealing with mouse clicks etc.	
-	var Controller = function(container, images, options)
-	{						
-		var	items = [], funcSin = Math.sin, funcCos = Math.cos, ctx=this;
-		this.controlTimer = 0;
-		this.stopped = false;
-		//this.imagesLoaded = 0;
-		this.container = container;
-		this.xRadius = options.xRadius;
-		this.yRadius = options.yRadius;
-		this.showFrontTextTimer = 0;
-		this.autoRotateTimer = 0;
-		if (options.xRadius === 0)
-		{
-			this.xRadius = ($(container).width()/2.3);
-		}
-		if (options.yRadius === 0)
-		{
-			this.yRadius = ($(container).height()/6);
-		}
-
-		this.xCentre = options.xPos;
-		this.yCentre = options.yPos;
-		this.frontIndex = 0;	// Index of the item at the front
-		
-		// Start with the first item at the front.
-		this.rotation = this.destRotation = Math.PI/2;
-		this.timeDelay = 1000/options.FPS;
-								
-		// Turn on the infoBox
-		if(options.altBox !== null)
-		{
-			$(options.altBox).css('display','block');	
-			$(options.titleBox).css('display','block');	
-		}
-		// Turn on relative position for container to allow absolutely positioned elements
-		// within it to work.
-		$(container).css({ position:'relative', overflow:'hidden'} );
-	
-		$(options.buttonLeft).css('display','inline');
-		$(options.buttonRight).css('display','inline');
-		
-		// Setup the buttons.
-		$(options.buttonLeft).bind('mouseup',this,function(event){
-			event.data.rotate(-1);	
-			return false;
-		});
-		$(options.buttonRight).bind('mouseup',this,function(event){
-			event.data.rotate(1);	
-			return false;
-		});
-		
-		// START METAMAPS CODE
-		// Add code that makes tab and shift+tab scroll through metacodes
-		$('.new_topic').bind('keydown',this,function(event){
-            if (event.keyCode == 9 && event.shiftKey) {
-        $(container).show()
-				event.data.rotate(-1);
-                event.preventDefault();
-                event.stopPropagation();
-			} else if (event.keyCode == 9) {
-				$(container).show()
-				event.data.rotate(1);
-                event.preventDefault();
-                event.stopPropagation();
-            }
-		});
-		// END METAMAPS CODE
-		
-		// You will need this plugin for the mousewheel to work: http://plugins.jquery.com/project/mousewheel
-		if (options.mouseWheel)
-		{
-			// START METAMAPS CODE
-			/*$('body').bind('mousewheel',this,function(event, delta) {					 
-					 if (Metamaps.Create.newTopic.beingCreated && 
-					     !Metamaps.Create.isSwitchingSet &&
-					     !Metamaps.Create.newTopic.pinned) {
-					 	event.data.rotate(delta);
-					 	return false;
-					 }
-				 });*/
-			// END METAMAPS CODE
-			// ORIGINAL CODE
-			// $(container).bind('mousewheel',this,function(event, delta) {
-			// 	event.data.rotate(delta);
-			// 	return false;
-			// });
-			//
-		}
-		$(container).unbind('mouseover click').bind('mouseover click',this,function(event){
-			
-			clearInterval(event.data.autoRotateTimer);		// Stop auto rotation if mouse over.
-			var	text = $(event.target).attr('alt');		
-			// If we have moved over a carousel item, then show the alt and title text.
-		
-			if ( text !== undefined && text !== null )
-			{
-					
-				clearTimeout(event.data.showFrontTextTimer);			
-				$(options.altBox).html( ($(event.target).attr('alt') ));
-				//$(options.titleBox).html( ($(event.target).attr('title') ));							
-				if ( options.bringToFront && event.type == 'click' )				
-				{
-					$(options.titleBox).html( ($(event.target).attr('title') ));
-					// START METAMAPS CODE
-					Metamaps.Create.newTopic.metacode = $(event.target).attr('data-id');
-					// END METAMAPS CODE
-					var	idx = $(event.target).data('itemIndex');	
-					var	frontIndex = event.data.frontIndex;
-					//var	diff = idx - frontIndex;                    
-					var diff = (idx - frontIndex) % images.length;
-					if (Math.abs(diff) > images.length / 2) {
-						diff += (diff > 0 ? -images.length : images.length);
-					}
-
-					event.data.rotate(-diff);
-				}
-			}
-		});
-		// START METAMAPS CODE - initialize newTopic.metacode
-		var first = $(this.container).find('img').get(0)
-		Metamaps.Create.newTopic.metacode = $(first).data('id')
-		// END METAMAPS CODE
-
-		// If we have moved out of a carousel item (or the container itself),
-		// restore the text of the front item in 1 second.
-		$(container).bind('mouseout',this,function(event){
-				var	context = event.data;				
-				clearTimeout(context.showFrontTextTimer);				
-				context.showFrontTextTimer = setTimeout( function(){context.showFrontText();},1000);
-				context.autoRotate();	// Start auto rotation.
-		});
-
-		// Prevent items from being selected as mouse is moved and clicked in the container.
-		$(container).bind('mousedown',this,function(event){	
-			
-			event.data.container.focus();
-			return false;
-		});
-		container.onselectstart = function () { return false; };		// For IE.
-
-		this.innerWrapper = $(container).wrapInner('<div style="position:absolute;width:100%;height:100%;"/>').children()[0];
-	
-		// Shows the text from the front most item.
-		this.showFrontText = function()
-		{	
-			if ( items[this.frontIndex] === undefined ) { return; }	// Images might not have loaded yet.
-                        // METAMAPS CODE
-			Metamaps.Create.newTopic.setMetacode($(items[this.frontIndex].image).attr('data-id'))
-			// NOT METAMAPS CODE
-			//$(options.titleBox).html( $(items[this.frontIndex].image).attr('title'));
-			//$(options.altBox).html( $(items[this.frontIndex].image).attr('alt'));				
-		};
-						
-		this.go = function()
-		{				
-			if(this.controlTimer !== 0) { return; }
-			var	context = this;
-			this.controlTimer = setTimeout( function(){context.updateAll();},this.timeDelay);					
-		};
-		
-		this.stop = function()
-		{
-			clearTimeout(this.controlTimer);
-			this.controlTimer = 0;
-			// METAMAPS CODE
-			$(container).hide()
-			// END METAMAPS CODE
-		};
-		
-		
-		// Starts the rotation of the carousel. Direction is the number (+-) of carousel items to rotate by.
-		this.rotate = function(direction)
-		{	
-			this.frontIndex -= direction;
-			if (this.frontIndex == -1) this.frontIndex = items.length - 1;
-			this.frontIndex %= items.length;					 			
-			this.destRotation += ( Math.PI / items.length ) * ( 2*direction );
-			this.showFrontText();
-			this.go();			
-		};
-		
-		
-		this.autoRotate = function()
-		{			
-			if ( options.autoRotate !== 'no' )
-			{
-				var	dir = (options.autoRotate === 'right')? 1 : -1;
-				this.autoRotateTimer = setInterval( function(){ctx.rotate(dir); }, options.autoRotateDelay );
-			}
-		};
-		
-		// This is the main loop function that moves everything.
-		this.updateAll = function()
-		{											
-			var	minScale = options.minScale;	// This is the smallest scale applied to the furthest item.
-			var smallRange = (1-minScale) * 0.5;
-			var	w,h,x,y,scale,item,sinVal;
-			
-			var	change = (this.destRotation - this.rotation);				
-			var	absChange = Math.abs(change);
-	
-			this.rotation += change * options.speed;
-			if ( absChange < 0.001 ) { this.rotation = this.destRotation; }			
-			var	itemsLen = items.length;
-			var	spacing = (Math.PI / itemsLen) * 2; 
-			//var	wrapStyle = null;
-			var	radians = this.rotation;
-			var	isMSIE = $.browser.msie;
-		
-			// Turn off display. This can reduce repaints/reflows when making style and position changes in the loop.
-			// See http://dev.opera.com/articles/view/efficient-javascript/?page=3			
-			this.innerWrapper.style.display = 'none';		
-			
-			var	style;
-			var	px = 'px', reflHeight;	
-			var context = this;
-			for (var i = 0; i<itemsLen ;i++)
-			{
-				item = items[i];
-								
-				sinVal = funcSin(radians);
-				
-				scale = ((sinVal+1) * smallRange) + minScale;
-				
-				x = this.xCentre + (( (funcCos(radians) * this.xRadius) - (item.orgWidth*0.5)) * scale);
-				y = this.yCentre + (( (sinVal * this.yRadius)  ) * scale);		
-		
-        if (item.imageOK)
-				{
-					var	img = item.image;
-          
-          img.style.zIndex = "" + (scale * 100)>>0;	// >>0 = Math.foor(). Firefox doesn't like fractional decimals in z-index.
-          w = img.width = item.orgWidth * scale;					
-					h = img.height = item.orgHeight * scale;
-					img.style.left = x + px ;
-					img.style.top = y + px;
-					if (item.reflection !== null)
-					{																										
-						reflHeight = options.reflHeight * scale;						
-						style = item.reflection.element.style;
-						style.left = x + px;
-						style.top = y + h + options.reflGap * scale + px;
-						style.width = w + px;								
-						if (isMSIE)
-						{											
-							style.filter.finishy = (reflHeight / h * 100);				
-						}else
-						{								
-							style.height = reflHeight + px;															
-						}																													
-					}					
-				}
-				radians += spacing;
-			}
-			// Turn display back on.					
-			this.innerWrapper.style.display = 'block';
-
-			// If we have a preceptable change in rotation then loop again next frame.
-			if ( absChange >= 0.001 )
-			{				
-				this.controlTimer = setTimeout( function(){context.updateAll();},this.timeDelay);		
-			}else
-			{
-				// Otherwise just stop completely.				
-				this.stop();
-			}
-		}; // END updateAll		
-		
-		// Create an Item object for each image	
-//		func = function(){return;ctx.updateAll();} ;
-
-		// Check if images have loaded. We need valid widths and heights for the reflections.
-		this.checkImagesLoaded = function()
-		{
-			var	i;
-			for(i=0;i<images.length;i++) {
-				if ( (images[i].width === undefined) || ( (images[i].complete !== undefined) && (!images[i].complete)  ))
-				{
-					return;					
-				}				
-			}
-			for(i=0;i<images.length;i++) {				
-				 items.push( new Item( images[i], options ) );	
-				 $(images[i]).data('itemIndex',i);
-			}
-			// If all images have valid widths and heights, we can stop checking.			
-			clearInterval(this.tt);
-			// METAMAPS COMMENT this.showFrontText();
-			this.autoRotate();	
-			this.updateAll();
-			
-		};
-
-		this.tt = setInterval( function(){ctx.checkImagesLoaded();},50);	
-	}; // END Controller object
-	
-	// The jQuery plugin part. Iterates through items specified in selector and inits a Controller class for each one.
-	$.fn.CloudCarousel = function(options) {
-			
-		this.each( function() {			
-			
-			options = $.extend({}, {
-							   reflHeight:0,
-							   reflOpacity:0.5,
-							   reflGap:0,
-							   minScale:0.5,
-							   xPos:0,
-							   yPos:0,
-							   xRadius:0,
-							   yRadius:0,
-							   altBox:null,
-							   titleBox:null,
-							   FPS: 30,
-							   autoRotate: 'no',
-							   autoRotateDelay: 1500,
-							   speed:0.2,
-							   mouseWheel: false,
-								 bringToFront: false
-			},options );									
-			// Create a Controller for each carousel.		
-			$(this).data('cloudcarousel', new Controller( this, $('.cloudcarousel',$(this)), options) );
-		});				
-		return this;
-	};
-
-})(jQuery);

app/assets/javascripts/homepageVimeoFallback.js.erb

@@ -1,29 +0,0 @@
-/* global $ */
-
-$(document).ready(function() {
-  if (window.location.pathname === '/') {
-    $.ajax({
-      type: 'GET',
-      url: 'https://i.vimeocdn.com/video/',
-      error: function(e) {
-        $('.homeVideo').hide()
-        $('.homeVideo').replaceWith($('<video/>', {
-          poster: '<%= asset_path('metamaps-intro-poster.webp') %>',
-          width: '560',
-          height: '315',
-          class: 'homeVideo',
-          controls: ''
-        }))
-        $('.homeVideo').append($('<source/>', {
-          src: 'https://metamaps.cc/videos/metamaps-intro.mp4',
-          type: 'video/mp4'
-        }))
-        $('.homeVideo').append(
-          '<p>You can watch our instruction video at ' +
-          '<a href="https://metamaps.cc/videos/metamaps-intro.mp4">' +
-          'https://metamaps.cc/videos/metamaps-intro.mp4</a>.'
-        )
-      }
-    })
-  }// if
-})

app/assets/javascripts/lib/ajaxq.js

@@ -1,161 +0,0 @@
-// AjaxQ jQuery Plugin
-// Copyright (c) 2012 Foliotek Inc.
-// MIT License
-// https://github.com/Foliotek/ajaxq
-// Uses CommonJS, AMD or browser globals to create a jQuery plugin.
-
-(function (factory) {
-    if (typeof define === 'function' && define.amd) {
-        // AMD. Register as an anonymous module.
-        define(['jquery'], factory);
-    } else if (typeof module === 'object' && module.exports) {
-        // Node/CommonJS
-        module.exports = factory(require('jquery'));
-    } else {
-        // Browser globals
-        factory(jQuery);
-    }
-}(function ($) {
-    var queues = {};
-    var activeReqs = {};
-
-    // Register an $.ajaxq function, which follows the $.ajax interface, but allows a queue name which will force only one request per queue to fire.
-    // opts can be the regular $.ajax settings plainObject, or a callback returning the settings object, to be evaluated just prior to the actual call to $.ajax.
-    $.ajaxq = function(qname, opts) {
-
-        if (typeof opts === "undefined") {
-            throw ("AjaxQ: queue name is not provided");
-        }
-
-        // Will return a Deferred promise object extended with success/error/callback, so that this function matches the interface of $.ajax
-        var deferred = $.Deferred(),
-            promise = deferred.promise();
-
-        promise.success = promise.done;
-        promise.error = promise.fail;
-        promise.complete = promise.always;
-
-        // Check whether options are to be evaluated at call time or not.
-        var deferredOpts = typeof opts === 'function';
-        // Create a deep copy of the arguments, and enqueue this request.
-        var clonedOptions = !deferredOpts ? $.extend(true, {}, opts) : null;
-        enqueue(function() {
-            // Send off the ajax request now that the item has been removed from the queue
-            var jqXHR = $.ajax.apply(window, [deferredOpts ? opts() : clonedOptions]);
-
-            // Notify the returned deferred object with the correct context when the jqXHR is done or fails
-            // Note that 'always' will automatically be fired once one of these are called: http://api.jquery.com/category/deferred-object/.
-            jqXHR.done(function() {
-                deferred.resolve.apply(this, arguments);
-            });
-            jqXHR.fail(function() {
-                deferred.reject.apply(this, arguments);
-            });
-
-            jqXHR.always(dequeue); // make sure to dequeue the next request AFTER the done and fail callbacks are fired
-
-            return jqXHR;
-        });
-
-        return promise;
-
-
-        // If there is no queue, create an empty one and instantly process this item.
-        // Otherwise, just add this item onto it for later processing.
-        function enqueue(cb) {
-            if (!queues[qname]) {
-                queues[qname] = [];
-                var xhr = cb();
-                activeReqs[qname] = xhr;
-            }
-            else {
-                queues[qname].push(cb);
-            }
-        }
-
-        // Remove the next callback from the queue and fire it off.
-        // If the queue was empty (this was the last item), delete it from memory so the next one can be instantly processed.
-        function dequeue() {
-            if (!queues[qname]) {
-                return;
-            }
-            var nextCallback = queues[qname].shift();
-            if (nextCallback) {
-                var xhr = nextCallback();
-                activeReqs[qname] = xhr;
-            }
-            else {
-                delete queues[qname];
-                delete activeReqs[qname];
-            }
-        }
-    };
-
-    // Register a $.postq and $.getq method to provide shortcuts for $.get and $.post
-    // Copied from jQuery source to make sure the functions share the same defaults as $.get and $.post.
-    $.each( [ "getq", "postq" ], function( i, method ) {
-        $[ method ] = function( qname, url, data, callback, type ) {
-
-            if ( $.isFunction( data ) ) {
-                type = type || callback;
-                callback = data;
-                data = undefined;
-            }
-
-            return $.ajaxq(qname, {
-                type: method === "postq" ? "post" : "get",
-                url: url,
-                data: data,
-                success: callback,
-                dataType: type
-            });
-        };
-    });
-
-    var isQueueRunning = function(qname) {
-        return (queues.hasOwnProperty(qname) && queues[qname].length > 0) || activeReqs.hasOwnProperty(qname);
-    };
-
-    var isAnyQueueRunning = function() {
-        for (var i in queues) {
-            if (isQueueRunning(i)) return true;
-        }
-        return false;
-    };
-
-    $.ajaxq.isRunning = function(qname) {
-        if (qname) return isQueueRunning(qname);
-        else return isAnyQueueRunning();
-    };
-
-    $.ajaxq.getActiveRequest = function(qname) {
-        if (!qname) throw ("AjaxQ: queue name is required");
-
-        return activeReqs[qname];
-    };
-
-    $.ajaxq.abort = function(qname) {
-        if (!qname) throw ("AjaxQ: queue name is required");
-        
-        var current = $.ajaxq.getActiveRequest(qname);
-        delete queues[qname];
-        delete activeReqs[qname];
-        if (current) current.abort();
-    };
-
-    $.ajaxq.clear = function(qname) {
-        if (!qname) {
-            for (var i in queues) {
-                if (queues.hasOwnProperty(i)) {
-                    queues[i] = [];
-                }
-            }
-        }
-        else {
-            if (queues[qname]) {
-                queues[qname] = [];
-            }
-        }
-    };
-
-}));

app/assets/javascripts/lib/attachMediaStream.js

@@ -0,0 +1,39 @@
+var attachMediaStream = function (stream, el, options) {
+      var URL = window.URL;
+      var opts = {
+          autoplay: true,
+          mirror: false,
+          muted: false
+      };
+      var element = el || document.createElement('video');
+      var item;
+
+      if (options) {
+          for (item in options) {
+              opts[item] = options[item];
+          }
+      }
+
+      if (opts.autoplay) element.autoplay = 'autoplay';
+      if (opts.muted) element.muted = true;
+      if (opts.mirror) {
+          ['', 'moz', 'webkit', 'o', 'ms'].forEach(function (prefix) {
+              var styleName = prefix ? prefix + 'Transform' : 'transform';
+              element.style[styleName] = 'scaleX(-1)';
+          });
+      }
+
+      // this first one should work most everywhere now
+      // but we have a few fallbacks just in case.
+      if (URL && URL.createObjectURL) {
+          element.src = URL.createObjectURL(stream);
+      } else if (element.srcObject) {
+          element.srcObject = stream;
+      } else if (element.mozSrcObject) {
+          element.mozSrcObject = stream;
+      } else {
+          return false;
+      }
+
+      return element;
+  };

app/assets/javascripts/lib/best_in_place.js

@@ -1,685 +0,0 @@
-/*
- * BestInPlace (for jQuery)
- * version: 3.0.0.alpha (2014)
- *
- * By Bernat Farrero based on the work of Jan Varwig.
- * Examples at http://bernatfarrero.com
- *
- * Licensed under the MIT:
- * http://www.opensource.org/licenses/mit-license.php
- *
- * @requires jQuery
- *
- * Usage:
- *
- * Attention.
- * The format of the JSON object given to the select inputs is the following:
- * [["key", "value"],["key", "value"]]
- * The format of the JSON object given to the checkbox inputs is the following:
- * ["falseValue", "trueValue"]
-
- */
-//= require jquery.autosize
-
-function BestInPlaceEditor(e) {
-    'use strict';
-    this.element = e;
-    this.initOptions();
-    this.bindForm();
-    this.initPlaceHolder();
-    jQuery(this.activator).bind('click', {editor: this}, this.clickHandler);
-}
-
-BestInPlaceEditor.prototype = {
-    // Public Interface Functions //////////////////////////////////////////////
-
-    activate: function () {
-        'use strict';
-        var to_display;
-        if (this.isPlaceHolder()) {
-            to_display = "";
-        } else if (this.original_content) {
-            to_display = this.original_content;
-        } else {
-            switch (this.formType) {
-                case 'input':
-                case 'textarea':
-                    if (this.display_raw) {
-                        to_display = this.element.html().replace(/&/gi, '&');
-                    }
-                    else {
-                        var value = this.element.data('bipValue');
-                        if (typeof value === 'undefined') {
-                            to_display = '';
-                        } else if (typeof value === 'string') {
-                            to_display = this.element.data('bipValue').replace(/&/gi, '&');
-                        } else {
-                            to_display = this.element.data('bipValue');
-                        }
-                    }
-                    break;
-                case 'select':
-                    to_display = this.element.html();
-
-            }
-        }
-
-        this.oldValue = this.isPlaceHolder() ? "" : this.element.html();
-        this.display_value = to_display;
-        jQuery(this.activator).unbind("click", this.clickHandler);
-        this.activateForm();
-        this.element.trigger(jQuery.Event("best_in_place:activate"));
-    },
-
-    abort: function () {
-        'use strict';
-        this.activateText(this.oldValue);
-        jQuery(this.activator).bind('click', {editor: this}, this.clickHandler);
-        this.element.trigger(jQuery.Event("best_in_place:abort"));
-        this.element.trigger(jQuery.Event("best_in_place:deactivate"));
-    },
-
-    abortIfConfirm: function () {
-        'use strict';
-        if (!this.useConfirm) {
-            this.abort();
-            return;
-        }
-
-        if (confirm(BestInPlaceEditor.defaults.locales[''].confirmMessage)) {
-            this.abort();
-        }
-    },
-
-    update: function () {
-        'use strict';
-        var editor = this,
-            value = this.getValue();
-
-        // Avoid request if no change is made
-        if (this.formType in {"input": 1, "textarea": 1} && value === this.oldValue) {
-            this.abort();
-            return true;
-        }
-
-        editor.ajax({
-            "type": this.requestMethod(),
-            "dataType": BestInPlaceEditor.defaults.ajaxDataType,
-            "data": editor.requestData(),
-            "success": function (data, status, xhr) {
-                editor.loadSuccessCallback(data, status, xhr);
-            },
-            "error": function (request, error) {
-                editor.loadErrorCallback(request, error);
-            }
-        });
-
-
-        switch (this.formType) {
-            case "select":
-                this.previousCollectionValue = value;
-
-                // search for the text for the span
-                $.each(this.values, function(index, arr){ if (String(arr[0]) === String(value)) editor.element.html(arr[1]); });
-                break;
-
-            case "checkbox":
-                $.each(this.values, function(index, arr){ if (String(arr[0]) === String(value)) editor.element.html(arr[1]); });
-                break;
-
-            default:
-                if (value !== "") {
-                    if (this.display_raw) {
-                        editor.element.html(value);
-                    } else {
-                        editor.element.text(value);
-                    }
-                } else {
-                    editor.element.html(this.placeHolder);
-                }
-        }
-
-        editor.element.data('bipValue', value);
-        editor.element.attr('data-bip-value', value);
-
-        editor.element.trigger(jQuery.Event("best_in_place:update"));
-
-
-    },
-
-    activateForm: function () {
-        'use strict';
-        alert(BestInPlaceEditor.defaults.locales[''].uninitializedForm);
-    },
-
-    activateText: function (value) {
-        'use strict';
-        this.element.html(value);
-        if (this.isPlaceHolder()) {
-            this.element.html(this.placeHolder);
-        }
-    },
-
-    // Helper Functions ////////////////////////////////////////////////////////
-
-    initOptions: function () {
-        // Try parent supplied info
-        'use strict';
-        var self = this;
-        self.element.parents().each(function () {
-            var $parent = jQuery(this);
-            self.url = self.url || $parent.data("bipUrl");
-            self.activator = self.activator || $parent.data("bipActivator");
-            self.okButton = self.okButton || $parent.data("bipOkButton");
-            self.okButtonClass = self.okButtonClass || $parent.data("bipOkButtonClass");
-            self.cancelButton = self.cancelButton || $parent.data("bipCancelButton");
-            self.cancelButtonClass = self.cancelButtonClass || $parent.data("bipCancelButtonClass");
-            self.skipBlur = self.skipBlur || $parent.data("bipSkipBlur");
-        });
-
-        // Load own attributes (overrides all others)
-        self.url = self.element.data("bipUrl") || self.url || document.location.pathname;
-        self.collection = self.element.data("bipCollection") || self.collection;
-        self.formType = self.element.data("bipType") || "input";
-        self.objectName = self.element.data("bipObject") || self.objectName;
-        self.attributeName = self.element.data("bipAttribute") || self.attributeName;
-        self.activator = self.element.data("bipActivator") || self.element;
-        self.okButton = self.element.data("bipOkButton") || self.okButton;
-        self.okButtonClass = self.element.data("bipOkButtonClass") || self.okButtonClass || BestInPlaceEditor.defaults.okButtonClass;
-        self.cancelButton = self.element.data("bipCancelButton") || self.cancelButton;
-        self.cancelButtonClass = self.element.data("bipCancelButtonClass") || self.cancelButtonClass || BestInPlaceEditor.defaults.cancelButtonClass;
-        self.skipBlur = self.element.data("bipSkipBlur") || self.skipBlur || BestInPlaceEditor.defaults.skipBlur;
-        self.isNewObject = self.element.data("bipNewObject");
-        self.dataExtraPayload = self.element.data("bipExtraPayload");
-
-        // Fix for default values of 0
-        if (self.element.data("bipPlaceholder") == null) {
-          self.placeHolder = BestInPlaceEditor.defaults.locales[''].placeHolder;
-        } else {
-          self.placeHolder = self.element.data("bipPlaceholder");
-        }
-
-        self.inner_class = self.element.data("bipInnerClass");
-        self.html_attrs = self.element.data("bipHtmlAttrs");
-        self.original_content = self.element.data("bipOriginalContent") || self.original_content;
-
-        // if set the input won't be satinized
-        self.display_raw = self.element.data("bip-raw");
-
-        self.useConfirm = self.element.data("bip-confirm");
-
-        if (self.formType === "select" || self.formType === "checkbox") {
-            self.values = self.collection;
-            self.collectionValue = self.element.data("bipValue") || self.collectionValue;
-        }
-    },
-
-    bindForm: function () {
-        'use strict';
-        this.activateForm = BestInPlaceEditor.forms[this.formType].activateForm;
-        this.getValue = BestInPlaceEditor.forms[this.formType].getValue;
-    },
-
-
-    initPlaceHolder: function () {
-        'use strict';
-        // TODO add placeholder for select and checkbox
-        if (this.element.html() === "") {
-            this.element.addClass('bip-placeholder');
-            this.element.html(this.placeHolder);
-        }
-    },
-
-    isPlaceHolder: function () {
-        'use strict';
-        // TODO: It only work when form is deactivated.
-        // Condition will fail when form is activated
-        return this.element.html() === "" || this.element.html() === this.placeHolder;
-    },
-
-    getValue: function () {
-        'use strict';
-        alert(BestInPlaceEditor.defaults.locales[''].uninitializedForm);
-    },
-
-    // Trim and Strips HTML from text
-    sanitizeValue: function (s) {
-        'use strict';
-        return jQuery.trim(s);
-    },
-
-    requestMethod: function() {
-        'use strict';
-        return this.isNewObject ? 'post' : BestInPlaceEditor.defaults.ajaxMethod;
-    },
-
-    /* Generate the data sent in the POST request */
-    requestData: function () {
-        'use strict';
-        // To prevent xss attacks, a csrf token must be defined as a meta attribute
-        var csrf_token = jQuery('meta[name=csrf-token]').attr('content'),
-            csrf_param = jQuery('meta[name=csrf-param]').attr('content');
-
-        var data = {}
-        data['_method'] = this.requestMethod()
-
-        data[this.objectName] = this.dataExtraPayload || {}
-
-        data[this.objectName][this.attributeName] = this.getValue()
-
-        if (csrf_param !== undefined && csrf_token !== undefined) {
-            data[csrf_param] = csrf_token
-        }
-        return jQuery.param(data);
-    },
-
-    ajax: function (options) {
-        'use strict';
-        options.url = this.url;
-        options.beforeSend = function (xhr) {
-            xhr.setRequestHeader("Accept", "application/json");
-        };
-        return jQuery.ajax(options);
-    },
-
-    // Handlers ////////////////////////////////////////////////////////////////
-
-    loadSuccessCallback: function (data, status, xhr) {
-        'use strict';
-        data = jQuery.trim(data);
-        //Update original content with current text.
-        if (this.display_raw) {
-          this.original_content = this.element.html();
-        } else {
-          this.original_content = this.element.text();
-        }
-
-        if (data && data !== "") {
-            var response = jQuery.parseJSON(data);
-            if (response !== null && response.hasOwnProperty("display_as")) {
-                this.element.data('bip-original-content', this.element.text());
-                this.element.html(response.display_as);
-            }
-            if (this.isNewObject && response && response[this.objectName]) {
-                if (response[this.objectName]["id"]) {
-                    this.isNewObject = false
-                    this.url += "/" + response[this.objectName]["id"] // in REST a POST /thing url should become PUT /thing/123
-                }
-            }
-        }
-        this.element.toggleClass('bip-placeholder', this.isPlaceHolder());
-
-        this.element.trigger(jQuery.Event("best_in_place:success"), [data, status, xhr]);
-        this.element.trigger(jQuery.Event("ajax:success"), [data, status, xhr]);
-
-        // Binding back after being clicked
-        jQuery(this.activator).bind('click', {editor: this}, this.clickHandler);
-        this.element.trigger(jQuery.Event("best_in_place:deactivate"));
-
-        if (this.collectionValue !== null && this.formType === "select") {
-            this.collectionValue = this.previousCollectionValue;
-            this.previousCollectionValue = null;
-        }
-    },
-
-    loadErrorCallback: function (request, error) {
-        'use strict';
-        this.activateText(this.oldValue);
-
-        this.element.trigger(jQuery.Event("best_in_place:error"), [request, error]);
-        this.element.trigger(jQuery.Event("ajax:error"), request, error);
-
-        // Binding back after being clicked
-        jQuery(this.activator).bind('click', {editor: this}, this.clickHandler);
-        this.element.trigger(jQuery.Event("best_in_place:deactivate"));
-    },
-
-    clickHandler: function (event) {
-        'use strict';
-        event.preventDefault();
-        event.data.editor.activate();
-    },
-
-    setHtmlAttributes: function () {
-        'use strict';
-        var formField = this.element.find(this.formType);
-
-        if (this.html_attrs) {
-            var attrs = this.html_attrs;
-            $.each(attrs, function (key, val) {
-                formField.attr(key, val);
-            });
-        }
-    },
-
-    placeButtons: function (output, field) {
-        'use strict';
-        if (field.okButton) {
-            output.append(
-                jQuery(document.createElement('input'))
-                    .attr('type', 'submit')
-                    .attr('class', field.okButtonClass)
-                    .attr('value', field.okButton)
-            );
-        }
-        if (field.cancelButton) {
-            output.append(
-                jQuery(document.createElement('input'))
-                    .attr('type', 'button')
-                    .attr('class', field.cancelButtonClass)
-                    .attr('value', field.cancelButton)
-            );
-        }
-    }
-};
-
-
-// Button cases:
-// If no buttons, then blur saves, ESC cancels
-// If just Cancel button, then blur saves, ESC or clicking Cancel cancels (careful of blur event!)
-// If just OK button, then clicking OK saves (careful of blur event!), ESC or blur cancels
-// If both buttons, then clicking OK saves, ESC or clicking Cancel or blur cancels
-BestInPlaceEditor.forms = {
-    "input": {
-        activateForm: function () {
-            'use strict';
-            var output = jQuery(document.createElement('form'))
-                .addClass('form_in_place')
-                .attr('action', 'javascript:void(0);')
-                .attr('style', 'display:inline');
-            var input_elt = jQuery(document.createElement('input'))
-                .attr('type', 'text')
-                .attr('name', this.attributeName)
-                .val(this.display_value);
-
-            // Add class to form input
-            if (this.inner_class) {
-                input_elt.addClass(this.inner_class);
-            }
-
-            output.append(input_elt);
-            this.placeButtons(output, this);
-
-            this.element.html(output);
-            this.setHtmlAttributes();
-
-            this.element.find("input[type='text']")[0].select();
-            this.element.find("form").bind('submit', {editor: this}, BestInPlaceEditor.forms.input.submitHandler);
-            if (this.cancelButton) {
-                this.element.find("input[type='button']").bind('click', {editor: this}, BestInPlaceEditor.forms.input.cancelButtonHandler);
-            }
-            if (!this.okButton) {
-                this.element.find("input[type='text']").bind('blur', {editor: this}, BestInPlaceEditor.forms.input.inputBlurHandler);
-            }
-            this.element.find("input[type='text']").bind('keyup', {editor: this}, BestInPlaceEditor.forms.input.keyupHandler);
-            this.blurTimer = null;
-            this.userClicked = false;
-        },
-
-        getValue: function () {
-            'use strict';
-            return this.sanitizeValue(this.element.find("input").val());
-        },
-
-        // When buttons are present, use a timer on the blur event to give precedence to clicks
-        inputBlurHandler: function (event) {
-            'use strict';
-            if (event.data.editor.okButton) {
-                event.data.editor.blurTimer = setTimeout(function () {
-                    if (!event.data.editor.userClicked) {
-                        event.data.editor.abort();
-                    }
-                }, 500);
-            } else {
-                if (event.data.editor.cancelButton) {
-                    event.data.editor.blurTimer = setTimeout(function () {
-                        if (!event.data.editor.userClicked) {
-                            event.data.editor.update();
-                        }
-                    }, 500);
-                } else {
-                    event.data.editor.update();
-                }
-            }
-        },
-
-        submitHandler: function (event) {
-            'use strict';
-            event.data.editor.userClicked = true;
-            clearTimeout(event.data.editor.blurTimer);
-            event.data.editor.update();
-        },
-
-        cancelButtonHandler: function (event) {
-            'use strict';
-            event.data.editor.userClicked = true;
-            clearTimeout(event.data.editor.blurTimer);
-            event.data.editor.abort();
-            event.stopPropagation(); // Without this, click isn't handled
-        },
-
-        keyupHandler: function (event) {
-            'use strict';
-            if (event.keyCode === 27) {
-                event.data.editor.abort();
-                event.stopImmediatePropagation();
-            }
-        }
-    },
-
-    "select": {
-        activateForm: function () {
-            'use strict';
-            var output = jQuery(document.createElement('form'))
-                    .attr('action', 'javascript:void(0)')
-                    .attr('style', 'display:inline'),
-                selected = '',
-                select_elt = jQuery(document.createElement('select'))
-                    .attr('class', this.inner_class !== null ? this.inner_class : ''),
-                currentCollectionValue = this.collectionValue,
-                key, value,
-                a = this.values;
-
-            $.each(a, function(index, arr){
-                key = arr[0];
-                value = arr[1];
-                var option_elt = jQuery(document.createElement('option'))
-                    .val(key)
-                    .html(value);
-
-                if (currentCollectionValue) {
-                  if (String(key) === String(currentCollectionValue)) option_elt.attr('selected', 'selected');
-                }
-                select_elt.append(option_elt);
-            });
-            output.append(select_elt);
-
-            this.element.html(output);
-            this.setHtmlAttributes();
-            this.element.find("select").bind('change', {editor: this}, BestInPlaceEditor.forms.select.blurHandler);
-            this.element.find("select").bind('blur', {editor: this}, BestInPlaceEditor.forms.select.blurHandler);
-            this.element.find("select").bind('keyup', {editor: this}, BestInPlaceEditor.forms.select.keyupHandler);
-            this.element.find("select")[0].focus();
-
-            // automatically click on the select so you
-            // don't have to click twice
-            try {
-              var e = document.createEvent("MouseEvents");
-              e.initMouseEvent("mousedown", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
-              this.element.find("select")[0].dispatchEvent(e);
-            }
-            catch(e) {
-              // browser doesn't support this, e.g. IE8
-            }
-        },
-
-        getValue: function () {
-            'use strict';
-            return this.sanitizeValue(this.element.find("select").val());
-        },
-
-        blurHandler: function (event) {
-            'use strict';
-            event.data.editor.update();
-        },
-
-        keyupHandler: function (event) {
-            'use strict';
-            if (event.keyCode === 27) {
-                event.data.editor.abort();
-            }
-        }
-    },
-
-    "checkbox": {
-        activateForm: function () {
-            'use strict';
-            this.collectionValue = !this.getValue();
-            this.setHtmlAttributes();
-            this.update();
-        },
-
-        getValue: function () {
-            'use strict';
-            return this.collectionValue;
-        }
-    },
-
-    "textarea": {
-        activateForm: function () {
-            'use strict';
-            // grab width and height of text
-            var width = this.element.css('width');
-            var height = this.element.css('height');
-
-            // construct form
-            var output = jQuery(document.createElement('form'))
-                .addClass('form_in_place')
-                .attr('action', 'javascript:void(0);')
-                .attr('style', 'display:inline');
-            var textarea_elt = jQuery(document.createElement('textarea'))
-                .attr('name', this.attributeName)
-                .val(this.sanitizeValue(this.display_value));
-
-            if (this.inner_class !== null) {
-                textarea_elt.addClass(this.inner_class);
-            }
-
-            output.append(textarea_elt);
-
-            this.placeButtons(output, this);
-
-            this.element.html(output);
-            this.setHtmlAttributes();
-
-            // set width and height of textarea
-            jQuery(this.element.find("textarea")[0]).css({'min-width': width, 'min-height': height});
-            jQuery(this.element.find("textarea")[0]).autosize();
-
-            this.element.find("textarea")[0].focus();
-            this.element.find("form").bind('submit', {editor: this}, BestInPlaceEditor.forms.textarea.submitHandler);
-
-            if (this.cancelButton) {
-                this.element.find("input[type='button']").bind('click', {editor: this}, BestInPlaceEditor.forms.textarea.cancelButtonHandler);
-            }
-
-            if (!this.skipBlur) {
-                this.element.find("textarea").bind('blur', {editor: this}, BestInPlaceEditor.forms.textarea.blurHandler);
-            }
-            this.element.find("textarea").bind('keyup', {editor: this}, BestInPlaceEditor.forms.textarea.keyupHandler);
-            this.blurTimer = null;
-            this.userClicked = false;
-        },
-
-        getValue: function () {
-            'use strict';
-            return this.sanitizeValue(this.element.find("textarea").val());
-        },
-
-        // When buttons are present, use a timer on the blur event to give precedence to clicks
-        blurHandler: function (event) {
-            'use strict';
-            if (event.data.editor.okButton) {
-                event.data.editor.blurTimer = setTimeout(function () {
-                    if (!event.data.editor.userClicked) {
-                        event.data.editor.abortIfConfirm();
-                    }
-                }, 500);
-            } else {
-                if (event.data.editor.cancelButton) {
-                    event.data.editor.blurTimer = setTimeout(function () {
-                        if (!event.data.editor.userClicked) {
-                            event.data.editor.update();
-                        }
-                    }, 500);
-                } else {
-                    event.data.editor.update();
-                }
-            }
-        },
-
-        submitHandler: function (event) {
-            'use strict';
-            event.data.editor.userClicked = true;
-            clearTimeout(event.data.editor.blurTimer);
-            event.data.editor.update();
-        },
-
-        cancelButtonHandler: function (event) {
-            'use strict';
-            event.data.editor.userClicked = true;
-            clearTimeout(event.data.editor.blurTimer);
-            event.data.editor.abortIfConfirm();
-            event.stopPropagation(); // Without this, click isn't handled
-        },
-
-        keyupHandler: function (event) {
-            'use strict';
-            if (event.keyCode === 27) {
-                event.data.editor.abortIfConfirm();
-            }
-        }
-    }
-};
-
-BestInPlaceEditor.defaults = {
-    locales: {},
-    ajaxMethod: "put",  //TODO Change to patch when support to 3.2 is dropped
-    ajaxDataType: 'text',
-    okButtonClass: '',
-    cancelButtonClass: '',
-    skipBlur: false
-};
-
-// Default locale
-BestInPlaceEditor.defaults.locales[''] = {
-    confirmMessage: "Are you sure you want to discard your changes?",
-    uninitializedForm: "The form was not properly initialized. getValue is unbound",
-    placeHolder: '-'
-};
-
-jQuery.fn.best_in_place = function () {
-    'use strict';
-    function setBestInPlace(element) {
-        if (!element.data('bestInPlaceEditor')) {
-            element.data('bestInPlaceEditor', new BestInPlaceEditor(element));
-            return true;
-        }
-    }
-
-    jQuery(this.context).delegate(this.selector, 'click', function () {
-        var el = jQuery(this);
-        if (setBestInPlace(el)) {
-            el.click();
-        }
-    });
-
-    this.each(function () {
-        setBestInPlace(jQuery(this));
-    });
-
-    return this;
-};
-
-
-

app/assets/javascripts/lib/bip.js

@@ -0,0 +1,780 @@
+/*
+        BestInPlace (for jQuery)
+        version: 0.1.0 (01/01/2011)
+        @requires jQuery >= v1.4
+        @requires jQuery.purr to display pop-up windows
+
+        By Bernat Farrero based on the work of Jan Varwig.
+        Examples at http://bernatfarrero.com
+
+        Licensed under the MIT:
+          http://www.opensource.org/licenses/mit-license.php
+
+        Usage:
+
+        Attention.
+        The format of the JSON object given to the select inputs is the following:
+        [["key", "value"],["key", "value"]]
+        The format of the JSON object given to the checkbox inputs is the following:
+        ["falseValue", "trueValue"]
+*/
+
+
+function BestInPlaceEditor(e) {
+  this.element = e;
+  this.initOptions();
+  this.bindForm();
+  this.initNil();
+  jQuery(this.activator).bind('click', {editor: this}, this.clickHandler);
+}
+
+BestInPlaceEditor.prototype = {
+  // Public Interface Functions //////////////////////////////////////////////
+
+  activate : function() {
+    var to_display = "";
+    if (this.isNil()) {
+      to_display = "";
+    }
+    else if (this.original_content) {
+      to_display = this.original_content;
+    }
+    else {
+      if (this.sanitize) {
+        to_display = this.element.text();
+      } else {
+        to_display = this.element.html();
+      }
+    }
+
+    this.oldValue = this.isNil() ? "" : this.element.html();
+    this.display_value = to_display;
+    jQuery(this.activator).unbind("click", this.clickHandler);
+    this.activateForm();
+    this.element.trigger(jQuery.Event("best_in_place:activate"));
+  },
+
+  abort : function() {
+    this.activateText(this.oldValue);
+    jQuery(this.activator).bind('click', {editor: this}, this.clickHandler);
+    this.element.trigger(jQuery.Event("best_in_place:abort"));
+    this.element.trigger(jQuery.Event("best_in_place:deactivate"));
+  },
+
+  abortIfConfirm : function () {
+    if (!this.useConfirm) {
+      this.abort();
+      return;
+    }
+
+    if (confirm("Are you sure you want to discard your changes?")) {
+      this.abort();
+    }
+  },
+
+  update : function() {
+    var editor = this;
+    if (this.formType in {"input":1, "textarea":1} && this.getValue() == this.oldValue)
+    { // Avoid request if no change is made
+      this.abort();
+      return true;
+    }
+    editor.ajax({
+      "type"       : "post",
+      "dataType"   : "text",
+      "data"       : editor.requestData(),
+      "success"    : function(data){ editor.loadSuccessCallback(data); },
+      "error"      : function(request, error){ editor.loadErrorCallback(request, error); }
+    });
+    if (this.formType == "select") {
+      var value = this.getValue();
+      this.previousCollectionValue = value;
+
+      jQuery.each(this.values, function(i, v) {
+        if (value == v[0]) {
+          editor.element.html(v[1]);
+        }
+      }
+    );
+    } else if (this.formType == "checkbox") {
+      editor.element.html(this.getValue() ? this.values[1] : this.values[0]);
+    } else {
+      if (this.getValue() !== "") {
+        editor.element.text(this.getValue());
+      } else {
+        editor.element.html(this.nil);
+      }
+    }
+    editor.element.trigger(jQuery.Event("best_in_place:update"));
+  },
+
+  activateForm : function() {
+    alert("The form was not properly initialized. activateForm is unbound");
+  },
+
+  activateText : function(value){
+    this.element.html(value);
+    if(this.isNil()) this.element.html(this.nil);
+  },
+
+  // Helper Functions ////////////////////////////////////////////////////////
+
+  initOptions : function() {
+    // Try parent supplied info
+    var self = this;
+    self.element.parents().each(function(){
+      $parent = jQuery(this);
+      self.url               = self.url               || $parent.attr("data-url");
+      self.collection        = self.collection        || $parent.attr("data-collection");
+      self.formType          = self.formType          || $parent.attr("data-type");
+      self.objectName        = self.objectName        || $parent.attr("data-object");
+      self.attributeName     = self.attributeName     || $parent.attr("data-attribute");
+      self.activator         = self.activator         || $parent.attr("data-activator");
+      self.okButton          = self.okButton          || $parent.attr("data-ok-button");
+      self.okButtonClass     = self.okButtonClass     || $parent.attr("data-ok-button-class");
+      self.cancelButton      = self.cancelButton      || $parent.attr("data-cancel-button");
+      self.cancelButtonClass = self.cancelButtonClass || $parent.attr("data-cancel-button-class");
+      self.nil               = self.nil               || $parent.attr("data-nil");
+      self.inner_class       = self.inner_class       || $parent.attr("data-inner-class");
+      self.html_attrs        = self.html_attrs        || $parent.attr("data-html-attrs");
+      self.original_content  = self.original_content  || $parent.attr("data-original-content");
+      self.collectionValue   = self.collectionValue   || $parent.attr("data-value");
+    });
+
+    // Try Rails-id based if parents did not explicitly supply something
+    self.element.parents().each(function(){
+      var res = this.id.match(/^(\w+)_(\d+)$/i);
+      if (res) {
+        self.objectName = self.objectName || res[1];
+      }
+    });
+
+    // Load own attributes (overrides all others)
+    self.url               = self.element.attr("data-url")                 || self.url      || document.location.pathname;
+    self.collection        = self.element.attr("data-collection")          || self.collection;
+    self.formType          = self.element.attr("data-type")                || self.formtype || "input";
+    self.objectName        = self.element.attr("data-object")              || self.objectName;
+    self.attributeName     = self.element.attr("data-attribute")           || self.attributeName;
+    self.activator         = self.element.attr("data-activator")           || self.element;
+    self.okButton          = self.element.attr("data-ok-button")           || self.okButton;
+    self.okButtonClass     = self.element.attr("data-ok-button-class")     || self.okButtonClass || "";
+    self.cancelButton      = self.element.attr("data-cancel-button")       || self.cancelButton;
+    self.cancelButtonClass = self.element.attr("data-cancel-button-class") || self.cancelButtonClass || "";
+    self.nil               = self.element.attr("data-nil")                 || self.nil      || "—";
+    self.inner_class       = self.element.attr("data-inner-class")         || self.inner_class   || null;
+    self.html_attrs        = self.element.attr("data-html-attrs")          || self.html_attrs;
+    self.original_content  = self.element.attr("data-original-content")    || self.original_content;
+    self.collectionValue   = self.element.attr("data-value")               || self.collectionValue;
+
+    if (!self.element.attr("data-sanitize")) {
+      self.sanitize = true;
+    }
+    else {
+      self.sanitize = (self.element.attr("data-sanitize") == "true");
+    }
+
+    if (!self.element.attr("data-use-confirm")) {
+      self.useConfirm = true;
+    } else {
+      self.useConfirm = (self.element.attr("data-use-confirm") != "false");
+    }
+
+    if ((self.formType == "select" || self.formType == "checkbox") && self.collection !== null)
+    {
+      self.values = jQuery.parseJSON(self.collection);
+    }
+
+  },
+
+  bindForm : function() {
+    this.activateForm = BestInPlaceEditor.forms[this.formType].activateForm;
+    this.getValue     = BestInPlaceEditor.forms[this.formType].getValue;
+  },
+
+  initNil: function() {
+    if (this.element.html() === "")
+    {
+      this.element.html(this.nil);
+    }
+  },
+
+  isNil: function() {
+    // TODO: It only work when form is deactivated.
+    //       Condition will fail when form is activated
+    return this.element.html() === "" || this.element.html() === this.nil;
+  },
+
+  getValue : function() {
+    alert("The form was not properly initialized. getValue is unbound");
+  },
+
+  // Trim and Strips HTML from text
+  sanitizeValue : function(s) {
+   return jQuery.trim(s);
+  },
+
+  /* Generate the data sent in the POST request */
+  requestData : function() {
+    // To prevent xss attacks, a csrf token must be defined as a meta attribute
+    csrf_token = jQuery('meta[name=csrf-token]').attr('content');
+    csrf_param = jQuery('meta[name=csrf-param]').attr('content');
+
+    var data = "_method=put";
+    data += "&" + this.objectName + '[' + this.attributeName + ']=' + encodeURIComponent(this.getValue());
+
+    if (csrf_param !== undefined && csrf_token !== undefined) {
+      data += "&" + csrf_param + "=" + encodeURIComponent(csrf_token);
+    }
+    return data;
+  },
+
+  ajax : function(options) {
+    options.url = this.url;
+    options.beforeSend = function(xhr){ xhr.setRequestHeader("Accept", "application/json"); };
+    return jQuery.ajax(options);
+  },
+
+  // Handlers ////////////////////////////////////////////////////////////////
+
+  loadSuccessCallback : function(data) {
+    data = jQuery.trim(data);
+
+    if(data && data!=""){
+      var response = jQuery.parseJSON(jQuery.trim(data));
+      if (response !== null && response.hasOwnProperty("display_as")) {
+        this.element.attr("data-original-content", this.element.text());
+        this.original_content = this.element.text();
+        this.element.html(response["display_as"]);
+      }
+
+      this.element.trigger(jQuery.Event("best_in_place:success"), data);
+      this.element.trigger(jQuery.Event("ajax:success"), data);
+    } else {
+      this.element.trigger(jQuery.Event("best_in_place:success"));
+      this.element.trigger(jQuery.Event("ajax:success"));
+    }
+
+    // Binding back after being clicked
+    jQuery(this.activator).bind('click', {editor: this}, this.clickHandler);
+    this.element.trigger(jQuery.Event("best_in_place:deactivate"));
+
+    if (this.collectionValue !== null && this.formType == "select") {
+      this.collectionValue = this.previousCollectionValue;
+      this.previousCollectionValue = null;
+    }
+  },
+
+  loadErrorCallback : function(request, error) {
+    this.activateText(this.oldValue);
+
+    this.element.trigger(jQuery.Event("best_in_place:error"), [request, error]);
+    this.element.trigger(jQuery.Event("ajax:error"), request, error);
+
+    // Binding back after being clicked
+    jQuery(this.activator).bind('click', {editor: this}, this.clickHandler);
+    this.element.trigger(jQuery.Event("best_in_place:deactivate"));
+  },
+
+  clickHandler : function(event) {
+    event.preventDefault();
+    event.data.editor.activate();
+  },
+
+  setHtmlAttributes : function() {
+    var formField = this.element.find(this.formType);
+
+    if(this.html_attrs){
+      var attrs = jQuery.parseJSON(this.html_attrs);
+      for(var key in attrs){
+        formField.attr(key, attrs[key]);
+      }
+    }
+  }
+};
+
+
+// Button cases:
+// If no buttons, then blur saves, ESC cancels
+// If just Cancel button, then blur saves, ESC or clicking Cancel cancels (careful of blur event!)
+// If just OK button, then clicking OK saves (careful of blur event!), ESC or blur cancels
+// If both buttons, then clicking OK saves, ESC or clicking Cancel or blur cancels
+BestInPlaceEditor.forms = {
+  "input" : {
+    activateForm : function() {
+      var output = jQuery(document.createElement('form'))
+                   .addClass('form_in_place')
+                   .attr('action', 'javascript:void(0);')
+                   .attr('style', 'display:inline');
+      var input_elt = jQuery(document.createElement('input'))
+                      .attr('type', 'text')
+                      .attr('name', this.attributeName)
+                      .val(this.display_value);
+      if(this.inner_class !== null) {
+        input_elt.addClass(this.inner_class);
+      }
+      output.append(input_elt);
+      if(this.okButton) {
+        output.append(
+          jQuery(document.createElement('input'))
+          .attr('type', 'submit')
+          .attr('class', this.okButtonClass)
+          .attr('value', this.okButton)
+        )
+      }
+      if(this.cancelButton) {
+        output.append(
+          jQuery(document.createElement('input'))
+          .attr('type', 'button')
+          .attr('class', this.cancelButtonClass)
+          .attr('value', this.cancelButton)
+        )
+      }
+
+      this.element.html(output);
+      this.setHtmlAttributes();
+      // START METAMAPS CODE
+      //this.element.find("input[type='text']")[0].select();
+      this.element.find("input[type='text']")[0].focus();
+      // END METAMAPS CODE
+      this.element.find("form").bind('submit', {editor: this}, BestInPlaceEditor.forms.input.submitHandler);
+      if (this.cancelButton) {
+        this.element.find("input[type='button']").bind('click', {editor: this}, BestInPlaceEditor.forms.input.cancelButtonHandler);
+      }
+      this.element.find("input[type='text']").bind('blur', {editor: this}, BestInPlaceEditor.forms.input.inputBlurHandler);
+      // START METAMAPS CODE
+      this.element.find("input[type='text']").bind('keydown', {editor: this}, BestInPlaceEditor.forms.input.keydownHandler);  
+      // END METAMAPS CODE
+      this.element.find("input[type='text']").bind('keyup', {editor: this}, BestInPlaceEditor.forms.input.keyupHandler);
+      this.blurTimer = null;
+      this.userClicked = false;
+    },
+
+    getValue : function() {
+      return this.sanitizeValue(this.element.find("input").val());
+    },
+
+    // When buttons are present, use a timer on the blur event to give precedence to clicks
+    inputBlurHandler : function(event) {
+      if (event.data.editor.okButton) {
+        event.data.editor.blurTimer = setTimeout(function () {
+          if (!event.data.editor.userClicked) {
+            event.data.editor.abort();
+          }
+        }, 500);
+      } else {
+        if (event.data.editor.cancelButton) {
+          event.data.editor.blurTimer = setTimeout(function () {
+            if (!event.data.editor.userClicked) {
+              event.data.editor.update();
+            }
+          }, 500);
+        } else {
+          event.data.editor.update();
+        }
+      }
+    },
+
+    submitHandler : function(event) {
+      event.data.editor.userClicked = true;
+      clearTimeout(event.data.editor.blurTimer);
+      event.data.editor.update();
+    },
+
+    cancelButtonHandler : function(event) {
+      event.data.editor.userClicked = true;
+      clearTimeout(event.data.editor.blurTimer);
+      event.data.editor.abort();
+      event.stopPropagation(); // Without this, click isn't handled
+    },
+
+    keyupHandler : function(event) {
+      if (event.keyCode == 27) {
+        event.data.editor.abort();
+      }
+      // START METAMAPS CODE
+      else if (event.keyCode == 13 && !event.shiftKey) {
+        event.data.editor.update();
+      }
+      // END METAMAPS CODE
+    }
+  },
+
+  "date" : {
+    activateForm : function() {
+      var that      = this,
+          output    = jQuery(document.createElement('form'))
+                      .addClass('form_in_place')
+                      .attr('action', 'javascript:void(0);')
+                      .attr('style', 'display:inline'),
+          input_elt = jQuery(document.createElement('input'))
+                      .attr('type', 'text')
+                      .attr('name', this.attributeName)
+                      .attr('value', this.sanitizeValue(this.display_value));
+      if(this.inner_class !== null) {
+        input_elt.addClass(this.inner_class);
+      }
+      output.append(input_elt)
+
+      this.element.html(output);
+      this.setHtmlAttributes();
+      this.element.find('input')[0].select();
+      this.element.find("form").bind('submit', {editor: this}, BestInPlaceEditor.forms.input.submitHandler);
+      this.element.find("input").bind('keyup', {editor: this}, BestInPlaceEditor.forms.input.keyupHandler);
+
+      this.element.find('input')
+        .datepicker({
+            onClose: function() {
+              that.update();
+            }
+          })
+        .datepicker('show');
+    },
+
+    getValue :  function() {
+      return this.sanitizeValue(this.element.find("input").val());
+    },
+
+    submitHandler : function(event) {
+      event.data.editor.update();
+    },
+
+    // START METAMAPS CODE
+    keydownHandler : function(event) {
+      if (event.keyCode == 13 && !event.shiftKey) {
+        event.preventDefault();
+        event.stopPropagation();
+        return false;
+      }
+    },
+    // END METAMAPS CODE
+
+    keyupHandler : function(event) {
+      if (event.keyCode == 27) {
+        event.data.editor.abort();
+      }
+    }
+  },
+
+  "select" : {
+    activateForm : function() {
+      var output     = jQuery(document.createElement('form'))
+                       .attr('action', 'javascript:void(0)')
+                       .attr('style', 'display:inline');
+          selected   = '',
+          oldValue   = this.oldValue,
+          select_elt = jQuery(document.createElement('select'))
+                      .attr('class', this.inned_class !== null ? this.inner_class : '' ),
+          currentCollectionValue = this.collectionValue;
+
+      jQuery.each(this.values, function (index, value) {
+        var option_elt = jQuery(document.createElement('option'))
+                         // .attr('value', value[0])
+                         .val(value[0])
+                         .html(value[1]);
+        if(value[0] == currentCollectionValue) {
+          option_elt.attr('selected', 'selected');
+        }
+        select_elt.append(option_elt);
+      });
+      output.append(select_elt);
+
+      this.element.html(output);
+      this.setHtmlAttributes();
+      this.element.find("select").bind('change', {editor: this}, BestInPlaceEditor.forms.select.blurHandler);
+      this.element.find("select").bind('blur', {editor: this}, BestInPlaceEditor.forms.select.blurHandler);
+      this.element.find("select").bind('keyup', {editor: this}, BestInPlaceEditor.forms.select.keyupHandler);
+      this.element.find("select")[0].focus();
+    },
+
+    getValue : function() {
+      return this.sanitizeValue(this.element.find("select").val());
+      // return this.element.find("select").val();
+    },
+
+    blurHandler : function(event) {
+      event.data.editor.update();
+    },
+
+    keyupHandler : function(event) {
+      if (event.keyCode == 27) event.data.editor.abort();
+    }
+  },
+
+  "checkbox" : {
+    activateForm : function() {
+      this.collectionValue = !this.getValue();
+      this.setHtmlAttributes();
+      this.update();
+    },
+
+    getValue : function() {
+      return this.collectionValue;
+    }
+  },
+
+  "textarea" : {
+    activateForm : function() {
+      // grab width and height of text
+      width = this.element.css('width');
+      height = this.element.css('height');
+
+      // construct form
+      var output   = jQuery(document.createElement('form'))
+                     .attr('action', 'javascript:void(0)')
+                     .attr('style', 'display:inline')
+                     .append(jQuery(document.createElement('textarea'))
+                             .val(this.sanitizeValue(this.display_value)));
+      if(this.okButton) {
+        output.append(
+          jQuery(document.createElement('input'))
+          .attr('type', 'submit')
+          .attr('value', this.okButton)
+        );
+      }
+      if(this.cancelButton) {
+        output.append(
+          jQuery(document.createElement('input'))
+          .attr('type', 'button')
+          .attr('value', this.cancelButton)
+        )
+      }
+
+      this.element.html(output);
+      this.setHtmlAttributes();
+
+      // set width and height of textarea
+      jQuery(this.element.find("textarea")[0]).css({ 'min-width': width, 'min-height': height });
+      jQuery(this.element.find("textarea")[0]).elastic();
+
+      this.element.find("textarea")[0].focus();
+      this.element.find("form").bind('submit', {editor: this}, BestInPlaceEditor.forms.textarea.submitHandler);
+      if (this.cancelButton) {
+        this.element.find("input[type='button']").bind('click', {editor: this}, BestInPlaceEditor.forms.textarea.cancelButtonHandler);
+      }
+      this.element.find("textarea").bind('blur', {editor: this}, BestInPlaceEditor.forms.textarea.blurHandler);
+      // START METAMAPS CODE
+      this.element.find("textarea").bind('keydown', {editor: this}, BestInPlaceEditor.forms.textarea.keydownHandler);  
+      // END METAMAPS CODE
+      this.element.find("textarea").bind('keyup', {editor: this}, BestInPlaceEditor.forms.textarea.keyupHandler);
+      this.blurTimer = null;
+      this.userClicked = false;
+    },
+
+    getValue :  function() {
+      return this.sanitizeValue(this.element.find("textarea").val());
+    },
+
+    // When buttons are present, use a timer on the blur event to give precedence to clicks
+    blurHandler : function(event) {
+      if (event.data.editor.okButton) {
+        event.data.editor.blurTimer = setTimeout(function () {
+          if (!event.data.editor.userClicked) {
+            event.data.editor.abortIfConfirm();
+          }
+        }, 500);
+      } else {
+        if (event.data.editor.cancelButton) {
+          event.data.editor.blurTimer = setTimeout(function () {
+            if (!event.data.editor.userClicked) {
+              event.data.editor.update();
+            }
+          }, 500);
+        } else {
+          event.data.editor.update();
+        }
+      }
+    },
+
+    submitHandler : function(event) {
+      event.data.editor.userClicked = true;
+      clearTimeout(event.data.editor.blurTimer);
+      event.data.editor.update();
+    },
+
+    cancelButtonHandler : function(event) {
+      event.data.editor.userClicked = true;
+      clearTimeout(event.data.editor.blurTimer);
+      event.data.editor.abortIfConfirm();
+      event.stopPropagation(); // Without this, click isn't handled
+    },
+      
+    // START METAMAPS CODE
+    keydownHandler : function(event) {
+      if (event.keyCode == 13 && !event.shiftKey) {
+        event.preventDefault();
+        event.stopPropagation();
+        return false;
+      }
+    },
+    // END METAMAPS CODE
+      
+    keyupHandler : function(event) {
+      if (event.keyCode == 27) {
+        event.data.editor.abortIfConfirm();
+      }
+      // START METAMAPS CODE
+      else if (event.keyCode == 13 && !event.shiftKey) {
+        event.data.editor.update();
+      }
+      // END METAMAPS CODE
+    }
+  }
+};
+
+jQuery.fn.best_in_place = function() {
+
+  function setBestInPlace(element) {
+    if (!element.data('bestInPlaceEditor')) {
+      element.data('bestInPlaceEditor', new BestInPlaceEditor(element));
+      return true;
+    }
+  }
+
+  jQuery(this.context).delegate(this.selector, 'click', function () {
+    var el = jQuery(this);
+    if (setBestInPlace(el))
+      el.click();
+  });
+
+  this.each(function () {
+    setBestInPlace(jQuery(this));
+  });
+
+  return this;
+};
+
+
+
+/**
+* @name             Elastic
+* @descripton           Elastic is Jquery plugin that grow and shrink your textareas automaticliy
+* @version            1.6.5
+* @requires           Jquery 1.2.6+
+*
+* @author             Jan Jarfalk
+* @author-email         jan.jarfalk@unwrongest.com
+* @author-website         http://www.unwrongest.com
+*
+* @licens             MIT License - http://www.opensource.org/licenses/mit-license.php
+*/
+
+(function(jQuery){
+  if (typeof jQuery.fn.elastic !== 'undefined') return;
+
+  jQuery.fn.extend({
+    elastic: function() {
+      //  We will create a div clone of the textarea
+      //  by copying these attributes from the textarea to the div.
+      var mimics = [
+        'paddingTop',
+        'paddingRight',
+        'paddingBottom',
+        'paddingLeft',
+        'fontSize',
+        'lineHeight',
+        'fontFamily',
+        'width',
+        'fontWeight'];
+
+      return this.each( function() {
+
+        // Elastic only works on textareas
+        if ( this.type != 'textarea' ) {
+          return false;
+        }
+
+        var $textarea = jQuery(this),
+          $twin   = jQuery('<div />').css({'position': 'absolute','display':'none','word-wrap':'break-word'}),
+          lineHeight  = parseInt($textarea.css('line-height'),10) || parseInt($textarea.css('font-size'),'10'),
+          minheight = parseInt($textarea.css('height'),10) || lineHeight*3,
+          maxheight = parseInt($textarea.css('max-height'),10) || Number.MAX_VALUE,
+          goalheight  = 0,
+          i       = 0;
+
+        // Opera returns max-height of -1 if not set
+        if (maxheight < 0) { maxheight = Number.MAX_VALUE; }
+
+        // Append the twin to the DOM
+        // We are going to meassure the height of this, not the textarea.
+        $twin.appendTo($textarea.parent());
+
+        // Copy the essential styles (mimics) from the textarea to the twin
+        i = mimics.length;
+        while(i--){
+          $twin.css(mimics[i].toString(),$textarea.css(mimics[i].toString()));
+        }
+
+
+        // Sets a given height and overflow state on the textarea
+        function setHeightAndOverflow(height, overflow){
+          curratedHeight = Math.floor(parseInt(height,10));
+          if($textarea.height() != curratedHeight){
+            $textarea.css({'height': curratedHeight + 'px','overflow':overflow});
+
+          }
+        }
+
+
+        // This function will update the height of the textarea if necessary
+        function update() {
+
+          // Get curated content from the textarea.
+          var textareaContent = $textarea.val().replace(/&/g,'&amp;').replace(/  /g, '&nbsp;').replace(/<|>/g, '&gt;').replace(/\n/g, '<br />');
+
+          // Compare curated content with curated twin.
+          var twinContent = $twin.html().replace(/<br>/ig,'<br />');
+
+          if(textareaContent+'&nbsp;' != twinContent){
+
+            // Add an extra white space so new rows are added when you are at the end of a row.
+            $twin.html(textareaContent+'&nbsp;');
+
+            // Change textarea height if twin plus the height of one line differs more than 3 pixel from textarea height
+            if(Math.abs($twin.height() + lineHeight - $textarea.height()) > 3){
+
+              var goalheight = $twin.height()+lineHeight;
+              if(goalheight >= maxheight) {
+                setHeightAndOverflow(maxheight,'auto');
+              } else if(goalheight <= minheight) {
+                setHeightAndOverflow(minheight,'hidden');
+              } else {
+                setHeightAndOverflow(goalheight,'hidden');
+              }
+
+            }
+
+          }
+
+        }
+
+        // Hide scrollbars
+        $textarea.css({'overflow':'hidden'});
+
+        // Update textarea size on keyup, change, cut and paste
+        $textarea.bind('keyup change cut paste', function(){
+          update();
+        });
+
+        // Compact textarea on blur
+        // Lets animate this....
+        $textarea.bind('blur',function(){
+          if($twin.height() < maxheight){
+            if($twin.height() > minheight) {
+              $textarea.height($twin.height());
+            } else {
+              $textarea.height(minheight);
+            }
+          }
+        });
+
+        // And this line is to catch the browser paste event
+        $textarea.on("input paste", function(e){ setTimeout( update, 250); });
+
+        // Run update once when elastic is initialized
+        update();
+
+      });
+
+        }
+    });
+})(jQuery);

app/assets/javascripts/lib/canvas-to-blob.min.js

@@ -1,2 +0,0 @@
-!function(t){"use strict";var e=t.HTMLCanvasElement&&t.HTMLCanvasElement.prototype,o=t.Blob&&function(){try{return Boolean(new Blob)}catch(t){return!1}}(),n=o&&t.Uint8Array&&function(){try{return 100===new Blob([new Uint8Array(100)]).size}catch(t){return!1}}(),r=t.BlobBuilder||t.WebKitBlobBuilder||t.MozBlobBuilder||t.MSBlobBuilder,a=/^data:((.*?)(;charset=.*?)?)(;base64)?,/,i=(o||r)&&t.atob&&t.ArrayBuffer&&t.Uint8Array&&function(t){var e,i,l,u,b,c,d,B,f;if(e=t.match(a),!e)throw new Error("invalid data URI");for(i=e[2]?e[1]:"text/plain"+(e[3]||";charset=US-ASCII"),l=!!e[4],u=t.slice(e[0].length),b=l?atob(u):decodeURIComponent(u),c=new ArrayBuffer(b.length),d=new Uint8Array(c),B=0;B<b.length;B+=1)d[B]=b.charCodeAt(B);return o?new Blob([n?d:c],{type:i}):(f=new r,f.append(c),f.getBlob(i))};t.HTMLCanvasElement&&!e.toBlob&&(e.mozGetAsFile?e.toBlob=function(t,o,n){t(n&&e.toDataURL&&i?i(this.toDataURL(o,n)):this.mozGetAsFile("blob",o))}:e.toDataURL&&i&&(e.toBlob=function(t,e,o){t(i(this.toDataURL(e,o)))})),"function"==typeof define&&define.amd?define(function(){return i}):"object"==typeof module&&module.exports?module.exports=i:t.dataURLtoBlob=i}(window);
-//# sourceMappingURL=canvas-to-blob.min.js.map

app/assets/javascripts/lib/cloudcarousel.js

@@ -156,48 +156,43 @@ jQuery.browser = browser;
 			event.data.rotate(-1);	
 			return false;
 		});
-		$(options.buttonRight).bind('mouseup',this,function(event){
+		$(options.buttonRight).bind('mouseup',this,function(event){															
 			event.data.rotate(1);	
 			return false;
 		});
 		
-		// START METAMAPS CODE
 		// Add code that makes tab and shift+tab scroll through metacodes
 		$('.new_topic').bind('keydown',this,function(event){
-			if (event.keyCode == 9) {
-				if (event.shiftKey) {
-					event.data.rotate(-1)
-				} else {
-					event.data.rotate(1)
-				}
-				event.preventDefault();
-				event.stopPropagation();
-				Metamaps.Create.newTopic.metacode = $(items[event.data.frontIndex].image).attr('data-id');
-			}
+            if (event.keyCode == 9 && event.shiftKey) {
+				event.data.rotate(-1);
+                event.preventDefault();
+                event.stopPropagation();
+			} else if (event.keyCode == 9) {
+				event.data.rotate(1);
+                event.preventDefault();
+                event.stopPropagation();
+            }
 		});
-		// END METAMAPS CODE
 		
 		// You will need this plugin for the mousewheel to work: http://plugins.jquery.com/project/mousewheel
 		if (options.mouseWheel)
 		{
 			// START METAMAPS CODE
 			$('body').bind('mousewheel',this,function(event, delta) {					 
-					if (Metamaps.Create.newTopic.beingCreated && 
-					    !Metamaps.Create.isSwitchingSet &&
-					    !Metamaps.Create.newTopic.pinned) {
-						event.data.rotate(delta);
-						return false;
-					}
-				});
+					 if (Metamaps.Create.newTopic.beingCreated && !Metamaps.Create.isSwitchingSet) {
+					 	event.data.rotate(delta);
+					 	return false;
+					 }
+				 });
 			// END METAMAPS CODE
-			// ORIGINAL CODE
-			// $(container).bind('mousewheel',this,function(event, delta) {
-			// 	event.data.rotate(delta);
-			// 	return false;
-			// });
-			//
+			/* ORIGINAL CODE
+			$(container).bind('mousewheel',this,function(event, delta) {					 
+					 event.data.rotate(delta);
+					 return false;
+				 });
+			*/
 		}
-		$(container).unbind('mouseover click').bind('mouseover click',this,function(event){
+		$(container).bind('mouseover click',this,function(event){
 			
 			clearInterval(event.data.autoRotateTimer);		// Stop auto rotation if mouse over.
 			var	text = $(event.target).attr('alt');		
@@ -211,27 +206,22 @@ jQuery.browser = browser;
 				//$(options.titleBox).html( ($(event.target).attr('title') ));							
 				if ( options.bringToFront && event.type == 'click' )				
 				{
-					$(options.titleBox).html( ($(event.target).attr('title') ));
-					// START METAMAPS CODE
-					Metamaps.Create.newTopic.metacode = $(event.target).attr('data-id');
-					// END METAMAPS CODE
+                    $(options.titleBox).html( ($(event.target).attr('title') ));
+				    // METAMAPS CODE
+			        Metamaps.Create.newTopic.metacode = $(event.target).attr('data-id');
+			        // NOT METAMAPS CODE
 					var	idx = $(event.target).data('itemIndex');	
 					var	frontIndex = event.data.frontIndex;
 					//var	diff = idx - frontIndex;                    
-					var diff = (idx - frontIndex) % images.length;
-					if (Math.abs(diff) > images.length / 2) {
-						diff += (diff > 0 ? -images.length : images.length);
-					}
-
+                    var        diff = (idx - frontIndex) % images.length;
+                    if (Math.abs(diff) > images.length / 2) {
+                        diff += (diff > 0 ? -images.length : images.length);
+                    }
+                    
 					event.data.rotate(-diff);
 				}
 			}
 		});
-		// START METAMAPS CODE - initialize newTopic.metacode
-		var first = $(this.container).find('img').get(0)
-		Metamaps.Create.newTopic.metacode = $(first).data('id')
-		// END METAMAPS CODE
-
 		// If we have moved out of a carousel item (or the container itself),
 		// restore the text of the front item in 1 second.
 		$(container).bind('mouseout',this,function(event){
@@ -255,6 +245,11 @@ jQuery.browser = browser;
 		this.showFrontText = function()
 		{	
 			if ( items[this.frontIndex] === undefined ) { return; }	// Images might not have loaded yet.
+            // METAMAPS CODE
+			Metamaps.Create.newTopic.metacode = $(items[this.frontIndex].image).attr('data-id');
+        //$('img.cloudcarousel').css({"background":"none", "width":"","height":""});
+        //$(items[this.frontIndex].image).css({"width":"45px","height":"45px"});
+			// NOT METAMAPS CODE
 			$(options.titleBox).html( $(items[this.frontIndex].image).attr('title'));
 			$(options.altBox).html( $(items[this.frontIndex].image).attr('alt'));				
 		};
@@ -428,4 +423,4 @@ jQuery.browser = browser;
 		return this;
 	};
 
-})(jQuery);
+})(jQuery);

app/assets/javascripts/lib/jquery.purr.js

@@ -0,0 +1,180 @@
+/**
+ * jquery.purr.js
+ * Copyright (c) 2008 Net Perspective (net-perspective.com)
+ * Licensed under the MIT License (http://www.opensource.org/licenses/mit-license.php)
+ * 
+ * @author R.A. Ray
+ * @projectDescription	jQuery plugin for dynamically displaying unobtrusive messages in the browser. Mimics the behavior of the MacOS program "Growl."
+ * @version 0.1.0
+ * 
+ * @requires jquery.js (tested with 1.2.6)
+ * 
+ * @param fadeInSpeed 					int - Duration of fade in animation in miliseconds
+ * 													default: 500
+ *	@param fadeOutSpeed  				int - Duration of fade out animationin miliseconds
+ 														default: 500
+ *	@param removeTimer  				int - Timeout, in miliseconds, before notice is removed once it is the top non-sticky notice in the list
+ 														default: 4000
+ *	@param isSticky 						bool - Whether the notice should fade out on its own or wait to be manually closed
+ 														default: false
+ *	@param usingTransparentPNG 	bool - Whether or not the notice is using transparent .png images in its styling
+ 														default: false
+ */
+
+( function( $ ) {
+	
+	$.purr = function ( notice, options )
+	{ 
+		// Convert notice to a jQuery object
+		notice = $( notice );
+		
+		// Add a class to denote the notice as not sticky
+		if ( !options.isSticky )
+		{
+			notice.addClass( 'not-sticky' );
+		};
+		
+		// Get the container element from the page
+		var cont = document.getElementById( 'purr-container' );
+		
+		// If the container doesn't yet exist, we need to create it
+		if ( !cont )
+		{
+			cont = '<div id="purr-container"></div>';
+		}
+		
+		// Convert cont to a jQuery object
+		cont = $( cont );
+		
+		// Add the container to the page
+		$( 'body' ).append( cont );
+			
+		notify();
+
+		function notify ()
+		{	
+			// Set up the close button
+			var close = document.createElement( 'a' );
+			$( close ).attr(	
+				{
+					className: 'close',
+					href: '#close',
+					innerHTML: 'Close'
+				}
+			)
+				.appendTo( notice )
+					.click( function ()
+						{
+							removeNotice();
+							
+							return false;
+						}
+					);
+			
+			// Add the notice to the page and keep it hidden initially
+			notice.appendTo( cont )
+				.hide();
+				
+			if ( jQuery.browser.msie && options.usingTransparentPNG )
+			{
+				// IE7 and earlier can't handle the combination of opacity and transparent pngs, so if we're using transparent pngs in our
+				// notice style, we'll just skip the fading in.
+				notice.show();
+			}
+			else
+			{
+				//Fade in the notice we just added
+				notice.fadeIn( options.fadeInSpeed );
+			}
+			
+			// Set up the removal interval for the added notice if that notice is not a sticky
+			if ( !options.isSticky )
+			{
+				var topSpotInt = setInterval( function ()
+				{
+					// Check to see if our notice is the first non-sticky notice in the list
+					if ( notice.prevAll( '.not-sticky' ).length == 0 )
+					{ 
+						// Stop checking once the condition is met
+						clearInterval( topSpotInt );
+						
+						// Call the close action after the timeout set in options
+						setTimeout( function ()
+							{
+								removeNotice();
+							}, options.removeTimer
+						);
+					}
+				}, 200 );	
+			}
+		}
+
+		function removeNotice ()
+		{
+			// IE7 and earlier can't handle the combination of opacity and transparent pngs, so if we're using transparent pngs in our
+			// notice style, we'll just skip the fading out.
+			if ( jQuery.browser.msie && options.usingTransparentPNG )
+			{
+				notice.css( { opacity: 0	} )
+					.animate( 
+						{ 
+							height: '0px' 
+						}, 
+						{ 
+							duration: options.fadeOutSpeed, 
+							complete:  function ()
+								{
+									notice.remove();
+								} 
+							} 
+					);
+			}
+			else
+			{
+				// Fade the object out before reducing its height to produce the sliding effect
+				notice.animate( 
+					{ 
+						opacity: '0'
+					}, 
+					{ 
+						duration: options.fadeOutSpeed, 
+						complete: function () 
+							{
+								notice.animate(
+									{
+										height: '0px'
+									},
+									{
+										duration: options.fadeOutSpeed,
+										complete: function ()
+											{
+												notice.remove();
+											}
+									}
+								);
+							}
+					} 
+				);
+			}
+		};
+	};
+	
+	$.fn.purr = function ( options )
+	{
+		options = options || {};
+		options.fadeInSpeed = options.fadeInSpeed || 500;
+		options.fadeOutSpeed = options.fadeOutSpeed || 500;
+		options.removeTimer = options.removeTimer || 4000;
+		options.isSticky = options.isSticky || false;
+		options.usingTransparentPNG = options.usingTransparentPNG || false;
+		
+		this.each( function() 
+			{
+				new $.purr( this, options );
+			}
+		);
+		
+		return this;
+	};
+})( jQuery );
+

app/assets/javascripts/lib/socketIoConnection.js

@@ -0,0 +1,23 @@
+function SocketIoConnection(config) {
+    this.connection = io.connect(config.url, config.socketio);
+}
+
+SocketIoConnection.prototype.on = function (ev, fn) {
+    this.connection.on(ev, fn);
+};
+
+SocketIoConnection.prototype.emit = function () {
+    this.connection.emit.apply(this.connection, arguments);
+};
+
+SocketIoConnection.prototype.removeAllListeners = function () {
+    this.connection.removeAllListeners();
+};
+
+SocketIoConnection.prototype.getSessionid = function () {
+    return this.connection.socket.sessionid;
+};
+
+SocketIoConnection.prototype.disconnect = function () {
+    return this.connection.disconnect();
+};

app/assets/javascripts/lib/uservoice.js

@@ -0,0 +1,41 @@
+var USERVOICE;
+if(USERVOICE == undefined) {
+  USERVOICE = {};
+}
+
+USERVOICE.load = function (name, id, email, sso_token) {
+// Include the UserVoice JavaScript SDK (only needed once on a page)
+UserVoice=window.UserVoice||[];(function(){var uv=document.createElement('script');uv.type='text/javascript';uv.async=true;uv.src='//widget.uservoice.com/wybK0nSMNuhlWkIKzTyWg.js';var s=document.getElementsByTagName('script')[0];s.parentNode.insertBefore(uv,s)})();
+
+//
+// UserVoice Javascript SDK developer documentation:
+// https://www.uservoice.com/o/javascript-sdk
+//
+
+// Set colors
+UserVoice.push(['set', {
+  accent_color: '#448dd6',
+  trigger_color: 'white',
+  trigger_background_color: 'rgba(46, 49, 51, 0.6)'
+}]);
+
+// Identify the user and pass traits
+// To enable, replace sample data with actual user traits and uncomment the line
+if (name) {
+  UserVoice.push(['setSSO', sso_token]);
+  UserVoice.push(['identify', {
+    'email': email, // User’s email address
+    'name': name, // User’s real name
+    'id': id, // Optional: Unique id of the user 
+  }]);
+}
+
+// Add default trigger to the bottom-left corner of the window:
+UserVoice.push(['addTrigger', { mode: 'contact', trigger_position: 'bottom-left' }]);
+
+// Or, use your own custom trigger:
+//UserVoice.push(['addTrigger', '#barometer_tab', { mode: 'contact' }]);
+
+// Autoprompt for Satisfaction and SmartVote (only displayed under certain conditions)
+UserVoice.push(['autoprompt', {}]);
+};

app/assets/javascripts/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "metamaps-frontend",
+  "version": "1.0.0",
+  "description": "Metamaps frontend - currently just tests",
+  "scripts": {
+    "test": "mocha test || echo 'Run `npm install` to setup testing'"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/metamaps/metamaps.git"
+  },
+  "author": "",
+  "license": "AGPL-3.0",
+  "bugs": {
+    "url": "https://github.com/metamaps/metamaps/issues"
+  },
+  "homepage": "https://github.com/metamaps/metamaps#readme",
+  "devDependencies": {
+    "chai": "^3.5.0",
+    "mocha": "^2.4.5"
+  }
+}

app/assets/javascripts/require/require.js

@@ -0,0 +1,36 @@
+/*
+ RequireJS 2.1.11 Copyright (c) 2010-2014, The Dojo Foundation All Rights Reserved.
+ Available via the MIT or new BSD license.
+ see: http://github.com/jrburke/requirejs for details
+*/
+var requirejs,require,define;
+(function(ca){function G(b){return"[object Function]"===M.call(b)}function H(b){return"[object Array]"===M.call(b)}function v(b,c){if(b){var d;for(d=0;d<b.length&&(!b[d]||!c(b[d],d,b));d+=1);}}function U(b,c){if(b){var d;for(d=b.length-1;-1<d&&(!b[d]||!c(b[d],d,b));d-=1);}}function s(b,c){return ga.call(b,c)}function j(b,c){return s(b,c)&&b[c]}function B(b,c){for(var d in b)if(s(b,d)&&c(b[d],d))break}function V(b,c,d,g){c&&B(c,function(c,h){if(d||!s(b,h))g&&"object"===typeof c&&c&&!H(c)&&!G(c)&&!(c instanceof
+RegExp)?(b[h]||(b[h]={}),V(b[h],c,d,g)):b[h]=c});return b}function t(b,c){return function(){return c.apply(b,arguments)}}function da(b){throw b;}function ea(b){if(!b)return b;var c=ca;v(b.split("."),function(b){c=c[b]});return c}function C(b,c,d,g){c=Error(c+"\nhttp://requirejs.org/docs/errors.html#"+b);c.requireType=b;c.requireModules=g;d&&(c.originalError=d);return c}function ha(b){function c(a,e,b){var f,n,c,d,g,h,i,I=e&&e.split("/");n=I;var m=l.map,k=m&&m["*"];if(a&&"."===a.charAt(0))if(e){n=
+I.slice(0,I.length-1);a=a.split("/");e=a.length-1;l.nodeIdCompat&&R.test(a[e])&&(a[e]=a[e].replace(R,""));n=a=n.concat(a);d=n.length;for(e=0;e<d;e++)if(c=n[e],"."===c)n.splice(e,1),e-=1;else if(".."===c)if(1===e&&(".."===n[2]||".."===n[0]))break;else 0<e&&(n.splice(e-1,2),e-=2);a=a.join("/")}else 0===a.indexOf("./")&&(a=a.substring(2));if(b&&m&&(I||k)){n=a.split("/");e=n.length;a:for(;0<e;e-=1){d=n.slice(0,e).join("/");if(I)for(c=I.length;0<c;c-=1)if(b=j(m,I.slice(0,c).join("/")))if(b=j(b,d)){f=b;
+g=e;break a}!h&&(k&&j(k,d))&&(h=j(k,d),i=e)}!f&&h&&(f=h,g=i);f&&(n.splice(0,g,f),a=n.join("/"))}return(f=j(l.pkgs,a))?f:a}function d(a){z&&v(document.getElementsByTagName("script"),function(e){if(e.getAttribute("data-requiremodule")===a&&e.getAttribute("data-requirecontext")===i.contextName)return e.parentNode.removeChild(e),!0})}function g(a){var e=j(l.paths,a);if(e&&H(e)&&1<e.length)return e.shift(),i.require.undef(a),i.require([a]),!0}function u(a){var e,b=a?a.indexOf("!"):-1;-1<b&&(e=a.substring(0,
+b),a=a.substring(b+1,a.length));return[e,a]}function m(a,e,b,f){var n,d,g=null,h=e?e.name:null,l=a,m=!0,k="";a||(m=!1,a="_@r"+(M+=1));a=u(a);g=a[0];a=a[1];g&&(g=c(g,h,f),d=j(p,g));a&&(g?k=d&&d.normalize?d.normalize(a,function(a){return c(a,h,f)}):c(a,h,f):(k=c(a,h,f),a=u(k),g=a[0],k=a[1],b=!0,n=i.nameToUrl(k)));b=g&&!d&&!b?"_unnormalized"+(Q+=1):"";return{prefix:g,name:k,parentMap:e,unnormalized:!!b,url:n,originalName:l,isDefine:m,id:(g?g+"!"+k:k)+b}}function q(a){var e=a.id,b=j(k,e);b||(b=k[e]=new i.Module(a));
+return b}function r(a,e,b){var f=a.id,n=j(k,f);if(s(p,f)&&(!n||n.defineEmitComplete))"defined"===e&&b(p[f]);else if(n=q(a),n.error&&"error"===e)b(n.error);else n.on(e,b)}function w(a,e){var b=a.requireModules,f=!1;if(e)e(a);else if(v(b,function(e){if(e=j(k,e))e.error=a,e.events.error&&(f=!0,e.emit("error",a))}),!f)h.onError(a)}function x(){S.length&&(ia.apply(A,[A.length,0].concat(S)),S=[])}function y(a){delete k[a];delete W[a]}function F(a,e,b){var f=a.map.id;a.error?a.emit("error",a.error):(e[f]=
+!0,v(a.depMaps,function(f,c){var d=f.id,g=j(k,d);g&&(!a.depMatched[c]&&!b[d])&&(j(e,d)?(a.defineDep(c,p[d]),a.check()):F(g,e,b))}),b[f]=!0)}function D(){var a,e,b=(a=1E3*l.waitSeconds)&&i.startTime+a<(new Date).getTime(),f=[],c=[],h=!1,k=!0;if(!X){X=!0;B(W,function(a){var i=a.map,m=i.id;if(a.enabled&&(i.isDefine||c.push(a),!a.error))if(!a.inited&&b)g(m)?h=e=!0:(f.push(m),d(m));else if(!a.inited&&(a.fetched&&i.isDefine)&&(h=!0,!i.prefix))return k=!1});if(b&&f.length)return a=C("timeout","Load timeout for modules: "+
+f,null,f),a.contextName=i.contextName,w(a);k&&v(c,function(a){F(a,{},{})});if((!b||e)&&h)if((z||fa)&&!Y)Y=setTimeout(function(){Y=0;D()},50);X=!1}}function E(a){s(p,a[0])||q(m(a[0],null,!0)).init(a[1],a[2])}function K(a){var a=a.currentTarget||a.srcElement,e=i.onScriptLoad;a.detachEvent&&!Z?a.detachEvent("onreadystatechange",e):a.removeEventListener("load",e,!1);e=i.onScriptError;(!a.detachEvent||Z)&&a.removeEventListener("error",e,!1);return{node:a,id:a&&a.getAttribute("data-requiremodule")}}function L(){var a;
+for(x();A.length;){a=A.shift();if(null===a[0])return w(C("mismatch","Mismatched anonymous define() module: "+a[a.length-1]));E(a)}}var X,$,i,N,Y,l={waitSeconds:7,baseUrl:"./",paths:{},bundles:{},pkgs:{},shim:{},config:{}},k={},W={},aa={},A=[],p={},T={},ba={},M=1,Q=1;N={require:function(a){return a.require?a.require:a.require=i.makeRequire(a.map)},exports:function(a){a.usingExports=!0;if(a.map.isDefine)return a.exports?p[a.map.id]=a.exports:a.exports=p[a.map.id]={}},module:function(a){return a.module?
+a.module:a.module={id:a.map.id,uri:a.map.url,config:function(){return j(l.config,a.map.id)||{}},exports:a.exports||(a.exports={})}}};$=function(a){this.events=j(aa,a.id)||{};this.map=a;this.shim=j(l.shim,a.id);this.depExports=[];this.depMaps=[];this.depMatched=[];this.pluginMaps={};this.depCount=0};$.prototype={init:function(a,e,b,f){f=f||{};if(!this.inited){this.factory=e;if(b)this.on("error",b);else this.events.error&&(b=t(this,function(a){this.emit("error",a)}));this.depMaps=a&&a.slice(0);this.errback=
+b;this.inited=!0;this.ignore=f.ignore;f.enabled||this.enabled?this.enable():this.check()}},defineDep:function(a,e){this.depMatched[a]||(this.depMatched[a]=!0,this.depCount-=1,this.depExports[a]=e)},fetch:function(){if(!this.fetched){this.fetched=!0;i.startTime=(new Date).getTime();var a=this.map;if(this.shim)i.makeRequire(this.map,{enableBuildCallback:!0})(this.shim.deps||[],t(this,function(){return a.prefix?this.callPlugin():this.load()}));else return a.prefix?this.callPlugin():this.load()}},load:function(){var a=
+this.map.url;T[a]||(T[a]=!0,i.load(this.map.id,a))},check:function(){if(this.enabled&&!this.enabling){var a,e,b=this.map.id;e=this.depExports;var f=this.exports,c=this.factory;if(this.inited)if(this.error)this.emit("error",this.error);else{if(!this.defining){this.defining=!0;if(1>this.depCount&&!this.defined){if(G(c)){if(this.events.error&&this.map.isDefine||h.onError!==da)try{f=i.execCb(b,c,e,f)}catch(d){a=d}else f=i.execCb(b,c,e,f);this.map.isDefine&&void 0===f&&((e=this.module)?f=e.exports:this.usingExports&&
+(f=this.exports));if(a)return a.requireMap=this.map,a.requireModules=this.map.isDefine?[this.map.id]:null,a.requireType=this.map.isDefine?"define":"require",w(this.error=a)}else f=c;this.exports=f;if(this.map.isDefine&&!this.ignore&&(p[b]=f,h.onResourceLoad))h.onResourceLoad(i,this.map,this.depMaps);y(b);this.defined=!0}this.defining=!1;this.defined&&!this.defineEmitted&&(this.defineEmitted=!0,this.emit("defined",this.exports),this.defineEmitComplete=!0)}}else this.fetch()}},callPlugin:function(){var a=
+this.map,b=a.id,d=m(a.prefix);this.depMaps.push(d);r(d,"defined",t(this,function(f){var d,g;g=j(ba,this.map.id);var J=this.map.name,u=this.map.parentMap?this.map.parentMap.name:null,p=i.makeRequire(a.parentMap,{enableBuildCallback:!0});if(this.map.unnormalized){if(f.normalize&&(J=f.normalize(J,function(a){return c(a,u,!0)})||""),f=m(a.prefix+"!"+J,this.map.parentMap),r(f,"defined",t(this,function(a){this.init([],function(){return a},null,{enabled:!0,ignore:!0})})),g=j(k,f.id)){this.depMaps.push(f);
+if(this.events.error)g.on("error",t(this,function(a){this.emit("error",a)}));g.enable()}}else g?(this.map.url=i.nameToUrl(g),this.load()):(d=t(this,function(a){this.init([],function(){return a},null,{enabled:!0})}),d.error=t(this,function(a){this.inited=!0;this.error=a;a.requireModules=[b];B(k,function(a){0===a.map.id.indexOf(b+"_unnormalized")&&y(a.map.id)});w(a)}),d.fromText=t(this,function(f,c){var g=a.name,J=m(g),k=O;c&&(f=c);k&&(O=!1);q(J);s(l.config,b)&&(l.config[g]=l.config[b]);try{h.exec(f)}catch(j){return w(C("fromtexteval",
+"fromText eval for "+b+" failed: "+j,j,[b]))}k&&(O=!0);this.depMaps.push(J);i.completeLoad(g);p([g],d)}),f.load(a.name,p,d,l))}));i.enable(d,this);this.pluginMaps[d.id]=d},enable:function(){W[this.map.id]=this;this.enabling=this.enabled=!0;v(this.depMaps,t(this,function(a,b){var c,f;if("string"===typeof a){a=m(a,this.map.isDefine?this.map:this.map.parentMap,!1,!this.skipMap);this.depMaps[b]=a;if(c=j(N,a.id)){this.depExports[b]=c(this);return}this.depCount+=1;r(a,"defined",t(this,function(a){this.defineDep(b,
+a);this.check()}));this.errback&&r(a,"error",t(this,this.errback))}c=a.id;f=k[c];!s(N,c)&&(f&&!f.enabled)&&i.enable(a,this)}));B(this.pluginMaps,t(this,function(a){var b=j(k,a.id);b&&!b.enabled&&i.enable(a,this)}));this.enabling=!1;this.check()},on:function(a,b){var c=this.events[a];c||(c=this.events[a]=[]);c.push(b)},emit:function(a,b){v(this.events[a],function(a){a(b)});"error"===a&&delete this.events[a]}};i={config:l,contextName:b,registry:k,defined:p,urlFetched:T,defQueue:A,Module:$,makeModuleMap:m,
+nextTick:h.nextTick,onError:w,configure:function(a){a.baseUrl&&"/"!==a.baseUrl.charAt(a.baseUrl.length-1)&&(a.baseUrl+="/");var b=l.shim,c={paths:!0,bundles:!0,config:!0,map:!0};B(a,function(a,b){c[b]?(l[b]||(l[b]={}),V(l[b],a,!0,!0)):l[b]=a});a.bundles&&B(a.bundles,function(a,b){v(a,function(a){a!==b&&(ba[a]=b)})});a.shim&&(B(a.shim,function(a,c){H(a)&&(a={deps:a});if((a.exports||a.init)&&!a.exportsFn)a.exportsFn=i.makeShimExports(a);b[c]=a}),l.shim=b);a.packages&&v(a.packages,function(a){var b,
+a="string"===typeof a?{name:a}:a;b=a.name;a.location&&(l.paths[b]=a.location);l.pkgs[b]=a.name+"/"+(a.main||"main").replace(ja,"").replace(R,"")});B(k,function(a,b){!a.inited&&!a.map.unnormalized&&(a.map=m(b))});if(a.deps||a.callback)i.require(a.deps||[],a.callback)},makeShimExports:function(a){return function(){var b;a.init&&(b=a.init.apply(ca,arguments));return b||a.exports&&ea(a.exports)}},makeRequire:function(a,e){function g(f,c,d){var j,l;e.enableBuildCallback&&(c&&G(c))&&(c.__requireJsBuild=
+!0);if("string"===typeof f){if(G(c))return w(C("requireargs","Invalid require call"),d);if(a&&s(N,f))return N[f](k[a.id]);if(h.get)return h.get(i,f,a,g);j=m(f,a,!1,!0);j=j.id;return!s(p,j)?w(C("notloaded",'Module name "'+j+'" has not been loaded yet for context: '+b+(a?"":". Use require([])"))):p[j]}L();i.nextTick(function(){L();l=q(m(null,a));l.skipMap=e.skipMap;l.init(f,c,d,{enabled:!0});D()});return g}e=e||{};V(g,{isBrowser:z,toUrl:function(b){var e,d=b.lastIndexOf("."),g=b.split("/")[0];if(-1!==
+d&&(!("."===g||".."===g)||1<d))e=b.substring(d,b.length),b=b.substring(0,d);return i.nameToUrl(c(b,a&&a.id,!0),e,!0)},defined:function(b){return s(p,m(b,a,!1,!0).id)},specified:function(b){b=m(b,a,!1,!0).id;return s(p,b)||s(k,b)}});a||(g.undef=function(b){x();var c=m(b,a,!0),e=j(k,b);d(b);delete p[b];delete T[c.url];delete aa[b];U(A,function(a,c){a[0]===b&&A.splice(c,1)});e&&(e.events.defined&&(aa[b]=e.events),y(b))});return g},enable:function(a){j(k,a.id)&&q(a).enable()},completeLoad:function(a){var b,
+c,f=j(l.shim,a)||{},d=f.exports;for(x();A.length;){c=A.shift();if(null===c[0]){c[0]=a;if(b)break;b=!0}else c[0]===a&&(b=!0);E(c)}c=j(k,a);if(!b&&!s(p,a)&&c&&!c.inited){if(l.enforceDefine&&(!d||!ea(d)))return g(a)?void 0:w(C("nodefine","No define call for "+a,null,[a]));E([a,f.deps||[],f.exportsFn])}D()},nameToUrl:function(a,b,c){var f,d,g;(f=j(l.pkgs,a))&&(a=f);if(f=j(ba,a))return i.nameToUrl(f,b,c);if(h.jsExtRegExp.test(a))f=a+(b||"");else{f=l.paths;a=a.split("/");for(d=a.length;0<d;d-=1)if(g=a.slice(0,
+d).join("/"),g=j(f,g)){H(g)&&(g=g[0]);a.splice(0,d,g);break}f=a.join("/");f+=b||(/^data\:|\?/.test(f)||c?"":".js");f=("/"===f.charAt(0)||f.match(/^[\w\+\.\-]+:/)?"":l.baseUrl)+f}return l.urlArgs?f+((-1===f.indexOf("?")?"?":"&")+l.urlArgs):f},load:function(a,b){h.load(i,a,b)},execCb:function(a,b,c,d){return b.apply(d,c)},onScriptLoad:function(a){if("load"===a.type||ka.test((a.currentTarget||a.srcElement).readyState))P=null,a=K(a),i.completeLoad(a.id)},onScriptError:function(a){var b=K(a);if(!g(b.id))return w(C("scripterror",
+"Script error for: "+b.id,a,[b.id]))}};i.require=i.makeRequire();return i}var h,x,y,D,K,E,P,L,q,Q,la=/(\/\*([\s\S]*?)\*\/|([^:]|^)\/\/(.*)$)/mg,ma=/[^.]\s*require\s*\(\s*["']([^'"\s]+)["']\s*\)/g,R=/\.js$/,ja=/^\.\//;x=Object.prototype;var M=x.toString,ga=x.hasOwnProperty,ia=Array.prototype.splice,z=!!("undefined"!==typeof window&&"undefined"!==typeof navigator&&window.document),fa=!z&&"undefined"!==typeof importScripts,ka=z&&"PLAYSTATION 3"===navigator.platform?/^complete$/:/^(complete|loaded)$/,
+Z="undefined"!==typeof opera&&"[object Opera]"===opera.toString(),F={},r={},S=[],O=!1;if("undefined"===typeof define){if("undefined"!==typeof requirejs){if(G(requirejs))return;r=requirejs;requirejs=void 0}"undefined"!==typeof require&&!G(require)&&(r=require,require=void 0);h=requirejs=function(b,c,d,g){var u,m="_";!H(b)&&"string"!==typeof b&&(u=b,H(c)?(b=c,c=d,d=g):b=[]);u&&u.context&&(m=u.context);(g=j(F,m))||(g=F[m]=h.s.newContext(m));u&&g.configure(u);return g.require(b,c,d)};h.config=function(b){return h(b)};
+h.nextTick="undefined"!==typeof setTimeout?function(b){setTimeout(b,4)}:function(b){b()};require||(require=h);h.version="2.1.11";h.jsExtRegExp=/^\/|:|\?|\.js$/;h.isBrowser=z;x=h.s={contexts:F,newContext:ha};h({});v(["toUrl","undef","defined","specified"],function(b){h[b]=function(){var c=F._;return c.require[b].apply(c,arguments)}});if(z&&(y=x.head=document.getElementsByTagName("head")[0],D=document.getElementsByTagName("base")[0]))y=x.head=D.parentNode;h.onError=da;h.createNode=function(b){var c=
+b.xhtml?document.createElementNS("http://www.w3.org/1999/xhtml","html:script"):document.createElement("script");c.type=b.scriptType||"text/javascript";c.charset="utf-8";c.async=!0;return c};h.load=function(b,c,d){var g=b&&b.config||{};if(z)return g=h.createNode(g,c,d),g.setAttribute("data-requirecontext",b.contextName),g.setAttribute("data-requiremodule",c),g.attachEvent&&!(g.attachEvent.toString&&0>g.attachEvent.toString().indexOf("[native code"))&&!Z?(O=!0,g.attachEvent("onreadystatechange",b.onScriptLoad)):
+(g.addEventListener("load",b.onScriptLoad,!1),g.addEventListener("error",b.onScriptError,!1)),g.src=d,L=g,D?y.insertBefore(g,D):y.appendChild(g),L=null,g;if(fa)try{importScripts(d),b.completeLoad(c)}catch(j){b.onError(C("importscripts","importScripts failed for "+c+" at "+d,j,[c]))}};z&&!r.skipDataMain&&U(document.getElementsByTagName("script"),function(b){y||(y=b.parentNode);if(K=b.getAttribute("data-main"))return q=K,r.baseUrl||(E=q.split("/"),q=E.pop(),Q=E.length?E.join("/")+"/":"./",r.baseUrl=
+Q),q=q.replace(R,""),h.jsExtRegExp.test(q)&&(q=K),r.deps=r.deps?r.deps.concat(q):[q],!0});define=function(b,c,d){var g,h;"string"!==typeof b&&(d=c,c=b,b=null);H(c)||(d=c,c=null);!c&&G(d)&&(c=[],d.length&&(d.toString().replace(la,"").replace(ma,function(b,d){c.push(d)}),c=(1===d.length?["require"]:["require","exports","module"]).concat(c)));if(O){if(!(g=L))P&&"interactive"===P.readyState||U(document.getElementsByTagName("script"),function(b){if("interactive"===b.readyState)return P=b}),g=P;g&&(b||
+(b=g.getAttribute("data-requiremodule")),h=F[g.getAttribute("data-requirecontext")])}(h?h.defQueue:S).push([b,c,d])};define.amd={jQuery:!0};h.exec=function(b){return eval(b)};h(r)}})(this);

app/assets/javascripts/shims/classList.js

@@ -0,0 +1,138 @@
+
+/*
+ * classList.js: Cross-browser full element.classList implementation.
+ * 2011-06-15
+ *
+ * By Eli Grey, http://eligrey.com
+ * Public Domain.
+ * NO WARRANTY EXPRESSED OR IMPLIED. USE AT YOUR OWN RISK.
+ */
+
+/*global self, document, DOMException */
+
+/*! @source http://purl.eligrey.com/github/classList.js/blob/master/classList.js*/
+
+if (typeof document !== "undefined" && !("classList" in document.createElement("a"))) {
+
+(function (view) {
+
+"use strict";
+
+var
+	  classListProp = "classList"
+	, protoProp = "prototype"
+	, elemCtrProto = (view.HTMLElement || view.Element)[protoProp]
+	, objCtr = Object
+	, strTrim = String[protoProp].trim || function () {
+		return this.replace(/^\s+|\s+$/g, "");
+	}
+	, arrIndexOf = Array[protoProp].indexOf || function (item) {
+		var
+			  i = 0
+			, len = this.length
+		;
+		for (; i < len; i++) {
+			if (i in this && this[i] === item) {
+				return i;
+			}
+		}
+		return -1;
+	}
+	// Vendors: please allow content code to instantiate DOMExceptions
+	, DOMEx = function (type, message) {
+		this.name = type;
+		this.code = DOMException[type];
+		this.message = message;
+	}
+	, checkTokenAndGetIndex = function (classList, token) {
+		if (token === "") {
+			throw new DOMEx(
+				  "SYNTAX_ERR"
+				, "An invalid or illegal string was specified"
+			);
+		}
+		if (/\s/.test(token)) {
+			throw new DOMEx(
+				  "INVALID_CHARACTER_ERR"
+				, "String contains an invalid character"
+			);
+		}
+		return arrIndexOf.call(classList, token);
+	}
+	, ClassList = function (elem) {
+		var
+			  trimmedClasses = strTrim.call(elem.className)
+			, classes = trimmedClasses ? trimmedClasses.split(/\s+/) : []
+			, i = 0
+			, len = classes.length
+		;
+		for (; i < len; i++) {
+			this.push(classes[i]);
+		}
+		this._updateClassName = function () {
+			elem.className = this.toString();
+		};
+	}
+	, classListProto = ClassList[protoProp] = []
+	, classListGetter = function () {
+		return new ClassList(this);
+	}
+;
+// Most DOMException implementations don't allow calling DOMException's toString()
+// on non-DOMExceptions. Error's toString() is sufficient here.
+DOMEx[protoProp] = Error[protoProp];
+classListProto.item = function (i) {
+	return this[i] || null;
+};
+classListProto.contains = function (token) {
+	token += "";
+	return checkTokenAndGetIndex(this, token) !== -1;
+};
+classListProto.add = function (token) {
+	token += "";
+	if (checkTokenAndGetIndex(this, token) === -1) {
+		this.push(token);
+		this._updateClassName();
+	}
+};
+classListProto.remove = function (token) {
+	token += "";
+	var index = checkTokenAndGetIndex(this, token);
+	if (index !== -1) {
+		this.splice(index, 1);
+		this._updateClassName();
+	}
+};
+classListProto.toggle = function (token) {
+	token += "";
+	if (checkTokenAndGetIndex(this, token) === -1) {
+		this.add(token);
+	} else {
+		this.remove(token);
+	}
+};
+classListProto.toString = function () {
+	return this.join(" ");
+};
+
+if (objCtr.defineProperty) {
+	var classListPropDesc = {
+		  get: classListGetter
+		, enumerable: true
+		, configurable: true
+	};
+	try {
+		objCtr.defineProperty(elemCtrProto, classListProp, classListPropDesc);
+	} catch (ex) { // IE 8 doesn't support enumerable:true
+		if (ex.number === -0x7FF5EC54) {
+			classListPropDesc.enumerable = false;
+			objCtr.defineProperty(elemCtrProto, classListProp, classListPropDesc);
+		}
+	}
+} else if (objCtr[protoProp].__defineGetter__) {
+	elemCtrProto.__defineGetter__(classListProp, classListGetter);
+}
+
+}(self));
+
+}

app/assets/javascripts/shims/functionPrototypeBind.js

@@ -0,0 +1,23 @@
+if (!Function.prototype.bind) {
+    Function.prototype.bind = function (oThis) {
+        if (typeof this !== "function") {
+            // closest thing possible to the ECMAScript 5 internal IsCallable function
+            throw new TypeError("Function.prototype.bind - what is trying to be bound is not callable");
+        }
+
+        var aArgs = Array.prototype.slice.call(arguments, 1), 
+        fToBind = this, 
+        fNOP = function () {},
+        fBound = function () {
+            return fToBind.apply(this instanceof fNOP && oThis
+                ? this
+                : oThis,
+                aArgs.concat(Array.prototype.slice.call(arguments)));
+        };
+
+        fNOP.prototype = this.prototype;
+        fBound.prototype = new fNOP();
+
+        return fBound;
+    };
+}

app/assets/javascripts/shims/requestAnimationFrame.js

@@ -0,0 +1,13 @@
+// adds requestAnimationFrame functionality
+// Source: http://strd6.com/2011/05/better-window-requestanimationframe-shim/
+
+window.requestAnimationFrame || (window.requestAnimationFrame = 
+  window.webkitRequestAnimationFrame || 
+  window.mozRequestAnimationFrame    || 
+  window.oRequestAnimationFrame      || 
+  window.msRequestAnimationFrame     || 
+  function(callback, element) {
+    return window.setTimeout(function() {
+      callback(+new Date());
+  }, 1000 / 60);
+});

app/assets/javascripts/src/JIT.js.erb

@@ -20,6 +20,7 @@ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 THE SOFTWARE.
 
  */
+ (function () { 
 
 /*
   File: Core.js
@@ -33,11 +34,7 @@ THE SOFTWARE.
  This variable is the *only* global variable defined in the Toolkit. 
  There are also other interesting properties attached to this variable described below.
  */
-// START METAMAPS CODE
-const $jit = function(w) {
-// ORIGINAL:
-// window.$jit = function(w) {
-// END METAMAPS CODE
+window.$jit = function(w) {
   w = w || window;
   for(var k in $jit) {
     if($jit[k].$extend) {
@@ -449,7 +446,7 @@ $.event = {
   isRightClick: function(e) {
     return (e.which == 3 || e.button == 2);
   },
-  getPos: function(e, win, touchIndex) {
+  getPos: function(e, win) {
     // get mouse position
     win = win || window;
     e = e || win.event;
@@ -457,7 +454,7 @@ $.event = {
     doc = doc.documentElement || doc.body;
     //TODO(nico): make touch event handling better
     if(e.touches && e.touches.length) {
-      e = e.touches[touchIndex || 0];
+      e = e.touches[0];
     }
     var page = {
       x: e.pageX || (e.clientX + doc.scrollLeft),
@@ -2446,9 +2443,6 @@ Extras.Classes.Navigation = new Class({
   initializePost: function() {
     this.pos = false;
     this.pressed = false;
-    // START METAMAPS CODE
-    this.initDist = false;
-    // END METAMAPS CODE
   },
   
   onMouseWheel: function(e, win, scroll) {      
@@ -2457,7 +2451,7 @@ Extras.Classes.Navigation = new Class({
     // START METAMAPS CODE
     e.preventDefault();
 	  if (e.target.id != 'infovis-canvas') return;
-    if (Metamaps.Create.newTopic.beingCreated && !Metamaps.Create.newTopic.pinned) return;
+    if (Metamaps.Create.newTopic.beingCreated) return;
 	  // END METAMAPS CODE
   
     //$.event.stop($.event.get(e, win));
@@ -2468,10 +2462,16 @@ Extras.Classes.Navigation = new Class({
         ans = 1 + scroll * val;
         
     // START METAMAPS CODE
-	  if (((ans > 1) && (5 >= this.canvas.scaleOffsetX)) || ((ans < 1) && (this.canvas.scaleOffsetX >= 0.2))) {
-	    Metamaps.Util.zoomOnPoint(this, ans, {x: e.pageX, y: e.pageY})
+	  if (ans > 1) {
+      if (5 >= this.canvas.scaleOffsetX) {
+		    this.canvas.scale(ans, ans);
+	    }
+	  }
+	  else if (ans < 1) {
+      if (this.canvas.scaleOffsetX >= 0.2) {
+		    this.canvas.scale(ans, ans);
+	    }
 	  }
-	  
     // END METAMAPS CODE
     // ORIGINAL CODE this.canvas.scale(ans, ans);
 
@@ -2585,143 +2585,7 @@ Extras.Classes.Navigation = new Class({
     
     // END METAMAPS CODE
     
-  },
-  
-  // START METAMAPS CODE
-  onTouchStart: function(e, win, eventInfo) {
-    if(!this.config.panning) return;
-    Metamaps.Mouse.changeInX = 0;
-    Metamaps.Mouse.changeInY = 0;
-    if((this.config.panning == 'avoid nodes' && eventInfo.getNode()) || eventInfo.getEdge()) return;
-    this.pressed = true;
-    Metamaps.Mouse.didPan = false;
-
-    var canvas = this.canvas,
-        ox = canvas.translateOffsetX,
-        oy = canvas.translateOffsetY,
-        sx = canvas.scaleOffsetX,
-        sy = canvas.scaleOffsetY;
-
-    if (e.touches.length === 1) {
-      this.pos = eventInfo.getPos();
-    } else if (e.touches.length === 2) {
-      var s = canvas.getSize(),
-          pos1 = $.event.getPos(e, win, 0),
-          pos2 = $.event.getPos(e, win, 1),
-          touch1 = {
-            x: (pos1.x - s.width/2 - ox) * 1/sx,
-            y: (pos1.y - s.height/2 - oy) * 1/sy
-          },
-          touch2 = {
-            x: (pos2.x - s.width/2 - ox) * 1/sx,
-            y: (pos2.y - s.height/2 - oy) * 1/sy
-          };
-      this.pos = {
-        x: (touch1.x + touch2.x) / 2,
-        y: (touch1.y + touch2.y) / 2
-      }
-      this.unitRadius = Metamaps.Util.getDistance(touch1, touch2) / 2
-    }
-    if (e.touches.length === 1 || e.touches.length === 2) {
-      this.pos.x *= sx;
-      this.pos.x += ox;
-      this.pos.y *= sy;
-      this.pos.y += oy;
-    }
-  },
-  
-  onTouchMove: function(e, win, eventInfo) {
-    e.preventDefault()
-    if(!this.config.panning) return;
-    if(!this.pressed) return;
-    
-    var canvas = this.canvas,
-        ox = canvas.translateOffsetX,
-        oy = canvas.translateOffsetY,
-        sx = canvas.scaleOffsetX,
-        sy = canvas.scaleOffsetY,
-        beforePos = this.pos,
-        currentPos,
-        touch1,
-        touch2;
-
-    if (e.touches.length == 1) {
-      currentPos = eventInfo.getPos()
-    } else if (e.touches.length >= 2) {
-      var s = canvas.getSize(),
-          pos1 = $.event.getPos(e, win, 0),
-          pos2 = $.event.getPos(e, win, 1),
-          touch1 = {
-            x: (pos1.x - s.width/2 - ox) * 1/sx,
-            y: (pos1.y - s.height/2 - oy) * 1/sy
-          },
-          touch2 = {
-            x: (pos2.x - s.width/2 - ox) * 1/sx,
-            y: (pos2.y - s.height/2 - oy) * 1/sy
-          };
-      currentPos = {
-        x: (touch1.x + touch2.x) / 2,
-        y: (touch1.y + touch2.y) / 2
-      }
-    }
-    currentPos.x *= sx;
-    currentPos.y *= sy;
-    currentPos.x += ox;
-    currentPos.y += oy;
-    Metamaps.Mouse.didPan = true;
-    var x = currentPos.x - beforePos.x,
-        y = currentPos.y - beforePos.y;
-    Metamaps.Mouse.changeInX = x;
-    Metamaps.Mouse.changeInY = y;
-    this.pos = currentPos;
-    canvas.translate(x * 1/sx, y * 1/sy);
-    jQuery(document).trigger(Metamaps.JIT.events.pan);
-    
-    if (e.touches.length >= 2) {
-      var currentPixelRadius = Metamaps.Util.getDistance({
-        x: e.touches[0].clientX,
-        y: e.touches[0].clientY
-      }, {
-        x: e.touches[1].clientX,
-        y: e.touches[1].clientY
-      }) / 2
-      var desiredScale = currentPixelRadius / this.unitRadius
-      var scaler = desiredScale / sx
-      var midpoint = {
-        x: (e.touches[0].clientX + e.touches[1].clientX) / 2,
-        y: (e.touches[0].clientY + e.touches[1].clientY) / 2
-      }
-      if (30 >= desiredScale && desiredScale >= 0.2) {
-        Metamaps.Util.zoomOnPoint(this, scaler, midpoint)
-        jQuery(document).trigger(Metamaps.JIT.events.zoom)
-      }
-    }
-  },
-  
-  onTouchEnd: function(e, win, eventInfo, isRightClick) {
-    if(!this.config.panning) return;
-    if (e.touches.length === 1) {
-      var canvas = this.canvas,
-        ox = canvas.translateOffsetX,
-        oy = canvas.translateOffsetY,
-        sx = canvas.scaleOffsetX,
-        sy = canvas.scaleOffsetY,
-        s = canvas.getSize();
-      this.pos = {
-        x: (e.touches[0].clientX - s.width/2 - ox) * 1/sx,
-        y: (e.touches[0].clientY - s.height/2 - oy) * 1/sy
-      };
-      this.pos.x *= sx;
-      this.pos.x += ox;
-      this.pos.y *= sy;
-      this.pos.y += oy;
-    } else if (e.touches.length === 0) {
-      this.pressed = false;
-      this.pos = null
-      if (Metamaps.Mouse.didPan) Metamaps.JIT.SmoothPanning();
-    }
   }
-  // END METAMAPS CODE
 });
 
 
@@ -2816,7 +2680,10 @@ var Canvas;
           opt.injectInto:opt.injectInto.id,
           type = opt.type,
           idLabel = id + "-label", 
-          wrapper = $(id),
+          // ORIGINAL CODE wrapper = $(id),
+          // START METAMAPS CODE
+          //wrapper = Metamaps.Famous.viz.surf,
+          // END METAMAPS CODE
           width = opt.width, // || wrapper.offsetWidth,
           height = opt.height; // || wrapper.offsetHeight;
       this.id = id;
@@ -2863,7 +2730,15 @@ var Canvas;
         }
       }
       this.element.appendChild(this.labelContainer);
-      wrapper.appendChild(this.element);
+
+      // START METAMAPS CODE
+      var m = Metamaps.Famous.viz.surf;
+      m.setContent(this.element);
+      m.deploy(m._currTarget);
+
+      // END METAMAPS CODE
+      // ORIGINAL CODE wrapper.appendChild(this.element);
+
 
       //Update canvas position when the page is scrolled.
       var timer = null, that = this;
@@ -3142,15 +3017,9 @@ var Canvas;
       };
     },
     translateToCenter: function(ps) {
-      // START METAMAPS CODE
-      var size = this.getSize();
-      var width = ps ? (size.width - ps.width - this.translateOffsetX*2) : size.width;
-      var height = ps ? (size.height - ps.height - this.translateOffsetY*2) : size.height;
-      // ORIGINAL CODE
-      // var size = this.getSize(),
-      //     width = ps? (size.width - ps.width - this.translateOffsetX*2) : size.width;
-      //     height = ps? (size.height - ps.height - this.translateOffsetY*2) : size.height;
-      // END METAMAPS CODE
+      var size = this.getSize(),
+          width = ps? (size.width - ps.width - this.translateOffsetX*2) : size.width;
+          height = ps? (size.height - ps.height - this.translateOffsetY*2) : size.height;
       var ctx = this.getCtx();
       ps && ctx.scale(1/this.scaleOffsetX, 1/this.scaleOffsetY);
       ctx.translate(width/2, height/2);
@@ -3258,7 +3127,7 @@ var Canvas;
           ctx = base.getCtx(),
           scale = base.scaleOffsetX;
       //var pattern = new Image();
-      //pattern.src = Metamaps.ServerData['cubes.png']
+      //pattern.src = "<%= asset_path('cubes.png') %>";
       //var ptrn = ctx.createPattern(pattern, 'repeat');
       //ctx.fillStyle = ptrn;
       ctx.fillStyle = Metamaps.Settings.colors.background;
@@ -5660,11 +5529,7 @@ Graph.Op = {
                 break;
             
             case 'fade:seq': case 'fade': case 'fade:con':
-                // START METAMAPS CODE
-                var that = this;
-                // ORIGINAL CODE:
-                // that = this;
-                // END METAMAPS CODE
+                that = this;
                 graph = viz.construct(json);
 
                 //set alpha to 0 for nodes to add.
@@ -5800,11 +5665,7 @@ Graph.Op = {
                 break;
                 
             case 'fade:seq': case 'fade': case 'fade:con':
-                // START METAMAPS CODE
-                var that = this;
-                // ORIGINAL CODE:
-                // that = this;
-                // END METAMAPS CODE
+                that = this;
                 graph = viz.construct(json);
                 //preprocessing for nodes to delete.
                 //get node property modes to interpolate
@@ -7577,7 +7438,7 @@ Graph.Label.Native = new Class({
       
       //START METAMAPS CODE
       
-      var arrayOfLabelLines = Metamaps.Util.splitLine(node.name, 25).split('\n');
+      var arrayOfLabelLines = Metamaps.Util.splitLine(node.name,30).split('\n');
       //render background
             ctx.fillStyle = ctx.strokeStyle = Metamaps.Settings.colors.labels.background;
             ctx.lineWidth = 2;
@@ -11346,6 +11207,7 @@ $jit.ForceDirected3D.$extend = true;
 
 })($jit.ForceDirected3D);
 
-// START METAMAPS CODE
-export default $jit
-// END METAMAPS CODE
+
+
+
+ })();

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

@@ -1,55 +1,67 @@
-/* global $, CanvasLoader */
+/* global Metamaps, $ */
 
-const Account = {
-  init: function(serverData) {
-    Account.userIconUrl = serverData['user.png']
-  },
+/*
+ * Metamaps.Account.js.erb
+ *
+ * Dependencies:
+ *  - Metamaps.Erb
+ */
+
+Metamaps.Account = {
   listenersInitialized: false,
-  userIconUrl: null,
-  initListeners: function() {
-    var self = Account
+  init: function () {
+    var self = Metamaps.Account
+  },
+  initListeners: function () {
+    var self = Metamaps.Account
 
     $('#user_image').change(self.showImagePreview)
     self.listenersInitialized = true
   },
-  toggleChangePicture: function() {
-    var self = Account
+  toggleChangePicture: function () {
+    var self = Metamaps.Account
 
     $('.userImageMenu').toggle()
     if (!self.listenersInitialized) self.initListeners()
   },
-  openChangePicture: function() {
-    var self = Account
+  openChangePicture: function () {
+    var self = Metamaps.Account
 
     $('.userImageMenu').show()
     if (!self.listenersInitialized) self.initListeners()
   },
-  closeChangePicture: function() {
+  closeChangePicture: function () {
+    var self = Metamaps.Account
+
     $('.userImageMenu').hide()
   },
-  showLoading: function() {
+  showLoading: function () {
+    var self = Metamaps.Account
+
     var loader = new CanvasLoader('accountPageLoading')
-    loader.setColor('#4FC059') // default is '#000000'
+    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.setRange(0.9); // default is 1.3
     loader.show() // Hidden by default
     $('#accountPageLoading').show()
   },
-  showImagePreview: function() {
+  showImagePreview: function () {
+    var self = Metamaps.Account
+
     var file = $('#user_image')[0].files[0]
 
-    var reader = new window.FileReader()
+    var reader = new FileReader()
 
-    reader.onload = function(e) {
+    reader.onload = function (e) {
       var $canvas = $('<canvas>').attr({
         width: 84,
         height: 84
       })
       var context = $canvas[0].getContext('2d')
-      var imageObj = new window.Image()
+      var imageObj = new Image()
 
-      imageObj.onload = function() {
+      imageObj.onload = function () {
         $('.userImageDiv canvas').remove()
         $('.userImageDiv img').hide()
 
@@ -80,26 +92,26 @@ const Account = {
       $('#remove_image').val('0')
     }
   },
-  removePicture: function() {
-    var self = Account
+  removePicture: function () {
+    var self = Metamaps.Account
 
     $('.userImageDiv canvas').remove()
-    $('.userImageDiv img').attr('src', self.userIconUrl).show()
+    $('.userImageDiv img').attr('src', Metamaps.Erb['user.png']).show()
     $('.userImageMenu').hide()
 
     var input = $('#user_image')
     input.replaceWith(input.val('').clone(true))
     $('#remove_image').val('1')
   },
-  changeName: function() {
+  changeName: function () {
     $('.accountName').hide()
     $('.changeName').show()
   },
-  showPass: function() {
+  showPass: function () {
     $('.toHide').show()
     $('.changePass').hide()
   },
-  hidePass: function() {
+  hidePass: function () {
     $('.toHide').hide()
     $('.changePass').show()
 
@@ -108,5 +120,3 @@ const Account = {
     $('#user_password_confirmation').val('')
   }
 }
-
-export default Account

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

@@ -1,49 +1,54 @@
-/* global $ */
+/* global Metamaps, $ */
 
-const Admin = {
+/*
+ * Metamaps.Admin.js.erb
+ *
+ * Dependencies: none!
+ */
+
+Metamaps.Admin = {
   selectMetacodes: [],
   allMetacodes: [],
-  init: function() {
-    var self = Admin
+  init: function () {
+    var self = Metamaps.Admin
 
     $('#metacodes_value').val(self.selectMetacodes.toString())
   },
-  selectAll: function() {
-    var self = Admin
+  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 = Admin
+  deselectAll: function () {
+    var self = Metamaps.Admin
 
     $('.editMetacodes li').addClass('toggledOff')
     self.selectMetacodes = []
     $('#metacodes_value').val(0)
   },
-  liClickHandler: function() {
-    var self = Admin
+  liClickHandler: function () {
+    var self = Metamaps.Admin
 
-    if ($(this).attr('class') !== 'toggledOff') {
+    if ($(this).attr('class') != 'toggledOff') {
       $(this).addClass('toggledOff')
-      const valueToRemove = $(this).attr('id')
-      self.selectMetacodes.splice(self.selectMetacodes.indexOf(valueToRemove), 1)
+      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') {
+    }
+    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 = Admin
+  validate: function () {
+    var self = Metamaps.Admin
 
-    if (self.selectMetacodes.length === 0) {
-      window.alert('Would you pretty please select at least one metacode for the set?')
+    if (self.selectMetacodes.length == 0) {
+      alert('Would you pretty please select at least one metacode for the set?')
       return false
     }
   }
 }
-
-export default Admin

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

@@ -0,0 +1,723 @@
+/* global Metamaps, Backbone, _, $ */
+
+/*
+ * Metamaps.Backbone.js.erb
+ *
+ * Dependencies:
+ *  - Metamaps.Active
+ *  - Metamaps.Collaborators 
+ *  - Metamaps.Creators
+ *  - Metamaps.Filter
+ *  - Metamaps.JIT
+ *  - Metamaps.Loading
+ *  - Metamaps.Map
+ *  - Metamaps.Mapper
+ *  - Metamaps.Mappers 
+ *  - Metamaps.Mappings 
+ *  - Metamaps.Metacodes 
+ *  - Metamaps.Realtime
+ *  - Metamaps.Synapse
+ *  - Metamaps.SynapseCard
+ *  - Metamaps.Synapses
+ *  - Metamaps.Topic
+ *  - Metamaps.TopicCard
+ *  - Metamaps.Topics 
+ *  - Metamaps.Visualize
+ */
+
+Metamaps.Backbone = {}
+
+Metamaps.Backbone.Map = Backbone.Model.extend({
+  urlRoot: '/maps',
+  blacklist: ['created_at', 'updated_at', 'created_at_clean', 'updated_at_clean', 'user_name', 'contributor_count', 'topic_count', 'synapse_count', 'topics', 'synapses', 'mappings', 'mappers'],
+  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
+
+    newOptions.success = function (model, response, opt) {
+      if (s) s(model, response, opt)
+      model.trigger('saved')
+    }
+    return Backbone.Model.prototype.save.call(this, attrs, newOptions)
+  },
+  initialize: function () {
+    this.on('changeByOther', this.updateView)
+    this.on('saved', this.savedEvent)
+  },
+  savedEvent: function () {
+    Metamaps.Realtime.sendMapChange(this)
+  },
+  authorizeToEdit: function (mapper) {
+    if (mapper && (
+      this.get('permission') === 'commons' ||
+      this.get('collaborator_ids').includes(mapper.get('id')) ||
+      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
+    }
+  },
+  getUser: function () {
+    return Metamaps.Mapper.get(this.get('user_id'))
+  },
+  fetchContained: function () {
+    var bb = Metamaps.Backbone
+    var that = this
+    var start = function (data) {
+      that.set('mappers', new bb.MapperCollection(data.mappers))
+      that.set('topics', new bb.TopicCollection(data.topics))
+      that.set('synapses', new bb.SynapseCollection(data.synapses))
+      that.set('mappings', new bb.MappingCollection(data.mappings))
+    }
+
+    $.ajax({
+      url: '/maps/' + this.id + '/contains.json',
+      success: start,
+      error: errorFunc,
+      async: false
+    })
+  },
+  getTopics: function () {
+    if (!this.get('topics')) {
+      this.fetchContained()
+    }
+    return this.get('topics')
+  },
+  getSynapses: function () {
+    if (!this.get('synapses')) {
+      this.fetchContained()
+    }
+    return this.get('synapses')
+  },
+  getMappings: function () {
+    if (!this.get('mappings')) {
+      this.fetchContained()
+    }
+    return this.get('mappings')
+  },
+  getMappers: function () {
+    if (!this.get('mappers')) {
+      this.fetchContained()
+    }
+    return this.get('mappers')
+  },
+  attrForCards: function () {
+    function capitalize (string) {
+      return string.charAt(0).toUpperCase() + string.slice(1)
+    }
+
+    var n = this.get('name')
+    var d = this.get('desc')
+
+    var maxNameLength = 32
+    var maxDescLength = 118
+    var truncatedName = n ? (n.length > maxNameLength ? n.substring(0, maxNameLength) + '...' : n) : ''
+    var truncatedDesc = d ? (d.length > maxDescLength ? d.substring(0, maxDescLength) + '...' : d) : ''
+
+    var obj = {
+      id: this.id,
+      name: truncatedName,
+      fullName: n,
+      desc: truncatedDesc,
+      permission: this.get('permission') ? capitalize(this.get('permission')) : 'Commons',
+      editPermission: this.authorizeToEdit(Metamaps.Active.Mapper) ? 'canEdit' : 'cannotEdit',
+      contributor_count_number: '<span class="cCountColor">' + this.get('contributor_count') + '</span>',
+      contributor_count_string: this.get('contributor_count') === 1 ? ' contributor' : ' contributors',
+      topic_count_number: '<span class="tCountColor">' + this.get('topic_count') + '</span>',
+      topic_count_string: this.get('topic_count') === 1 ? ' topic' : ' topics',
+      synapse_count_number: '<span class="sCountColor">' + this.get('synapse_count') + '</span>',
+      synapse_count_string: this.get('synapse_count') === 1 ? ' synapse' : ' synapses',
+      screenshot: '<img src="' + this.get('screenshot_url') + '" />'
+    }
+    return obj
+  },
+  updateView: function () {
+    var map = Metamaps.Active.Map
+    var isActiveMap = this.id === map.id
+    if (isActiveMap) {
+      Metamaps.Map.InfoBox.updateNameDescPerm(this.get('name'), this.get('desc'), this.get('permission'))
+      this.updateMapWrapper()
+    }
+  },
+  updateMapWrapper: function () {
+    var map = Metamaps.Active.Map
+    var isActiveMap = this.id === map.id
+    var authorized = map && map.authorizeToEdit(Metamaps.Active.Mapper) ? 'canEditMap' : ''
+    var commonsMap = map && map.get('permission') === 'commons' ? 'commonsMap' : ''
+    if (isActiveMap) {
+      $('.wrapper').removeClass('canEditMap commonsMap').addClass(authorized + ' ' + commonsMap)
+    }
+  }
+})
+Metamaps.Backbone.MapsCollection = Backbone.Collection.extend({
+  model: Metamaps.Backbone.Map,
+  initialize: function (models, options) {
+    this.id = options.id
+    this.sortBy = options.sortBy
+
+    if (options.mapperId) {
+      this.mapperId = options.mapperId
+    }
+
+    // this.page represents the NEXT page to fetch
+    this.page = models.length > 0 ? (models.length < 20 ? 'loadedAll' : 2) : 1
+  },
+  url: function () {
+    if (!this.mapperId) {
+      return '/explore/' + this.id + '.json'
+    } else {
+      return '/explore/mapper/' + this.mapperId + '.json'
+    }
+  },
+  comparator: function (a, b) {
+    a = a.get(this.sortBy)
+    b = b.get(this.sortBy)
+    var temp
+    if (this.sortBy === 'name') {
+      a = a ? a.toLowerCase() : ''
+      b = b ? b.toLowerCase() : ''
+    } else {
+      // this is for updated_at and created_at
+      temp = a
+      a = b
+      b = temp
+      a = (new Date(a)).getTime()
+      b = (new Date(b)).getTime()
+    }
+    return a > b ? 1 : a < b ? -1 : 0
+  },
+  getMaps: function (cb) {
+    var self = this
+
+    Metamaps.Loading.show()
+
+    if (this.page !== 'loadedAll') {
+      var numBefore = this.length
+      this.fetch({
+        remove: false,
+        silent: true,
+        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', cb)
+        },
+        error: function (collection, response, options) {
+          // you can pass additional options to the event you trigger here as well
+          self.trigger('errorOnFetch')
+        }
+      })
+    } else {
+      self.trigger('successOnFetch', cb)
+    }
+  }
+})
+
+Metamaps.Backbone.Message = Backbone.Model.extend({
+  urlRoot: '/messages',
+  blacklist: ['created_at', 'updated_at'],
+  toJSON: function (options) {
+    return _.omit(this.attributes, this.blacklist)
+  },
+  prepareLiForFilter: function () {
+    /* var li = ''
+     * li += '<li data-id="' + this.id.toString() + '">'
+     * li += '<img src="' + this.get("image") + '" data-id="' + this.id.toString() + '"'
+     * li += ' alt="' + this.get('name') + '" />'
+     * li += '<p>' + this.get('name') + '</p></li>'
+     * return li
+     */
+  }
+})
+Metamaps.Backbone.MessageCollection = Backbone.Collection.extend({
+  model: Metamaps.Backbone.Message,
+  url: '/messages'
+})
+
+Metamaps.Backbone.Mapper = Backbone.Model.extend({
+  urlRoot: '/users',
+  blacklist: ['created_at', 'updated_at'],
+  toJSON: function (options) {
+    return _.omit(this.attributes, this.blacklist)
+  },
+  prepareLiForFilter: function () {
+    var li = ''
+    li += '<li data-id="' + this.id.toString() + '">'
+    li += '<img src="' + this.get('image') + '" data-id="' + this.id.toString() + '"'
+    li += ' alt="' + this.get('name') + '" />'
+    li += '<p>' + this.get('name') + '</p></li>'
+    return li
+  }
+})
+
+Metamaps.Backbone.MapperCollection = Backbone.Collection.extend({
+  model: Metamaps.Backbone.Mapper,
+  url: '/users'
+})
+
+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('calculated_permission') === 'commons' ||
+        this.get('collaborator_ids').includes(mapper.get('id')) ||
+        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="' + Metamaps.Erb['synapse16.png'] + '"'
+      li += ' alt="synapse icon" />'
+      li += '<p>' + this.get('desc') + '</p></li>'
+      return li
+    },
+    authorizeToEdit: function (mapper) {
+      if (mapper && (this.get('calculated_permission') === 'commons' || this.get('collaborator_ids').includes(mapper.get('id')) || 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()
+
+  Metamaps.Collaborators = Metamaps.Collaborators ? new self.MapperCollection(Metamaps.Collaborators) : 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

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

@@ -0,0 +1,437 @@
+/* global Metamaps, $ */
+
+/*
+ * Metamaps.Control.js.erb
+ *
+ * Dependencies:
+ *  - Metamaps.Active
+ *  - Metamaps.Control
+ *  - Metamaps.Filter
+ *  - Metamaps.GlobalUI
+ *  - Metamaps.JIT
+ *  - Metamaps.Mappings
+ *  - Metamaps.Metacodes
+ *  - Metamaps.Mouse
+ *  - Metamaps.Selected
+ *  - Metamaps.Settings
+ *  - Metamaps.Synapses
+ *  - Metamaps.Topics
+ *  - Metamaps.Visualize
+ */
+
+Metamaps.Control = {
+  init: function () {},
+  selectNode: function (node, e) {
+    var filtered = node.getData('alpha') === 0
+
+    if (filtered || Metamaps.Selected.Nodes.indexOf(node) != -1) return
+    node.selected = true
+    node.setData('dim', 30, 'current')
+    Metamaps.Selected.Nodes.push(node)
+  },
+  deselectAllNodes: function () {
+    var l = Metamaps.Selected.Nodes.length
+    for (var i = l - 1; i >= 0; i -= 1) {
+      var node = Metamaps.Selected.Nodes[i]
+      Metamaps.Control.deselectNode(node)
+    }
+    Metamaps.Visualize.mGraph.plot()
+  },
+  deselectNode: function (node) {
+    delete node.selected
+    node.setData('dim', 25, 'current')
+
+    // remove the node
+    Metamaps.Selected.Nodes.splice(
+      Metamaps.Selected.Nodes.indexOf(node), 1)
+  },
+  deleteSelected: function () {
+    if (!Metamaps.Active.Map) return
+
+    var n = Metamaps.Selected.Nodes.length
+    var e = Metamaps.Selected.Edges.length
+    var ntext = n == 1 ? '1 topic' : n + ' topics'
+    var etext = e == 1 ? '1 synapse' : e + ' synapses'
+    var text = 'You have ' + ntext + ' and ' + etext + ' selected. '
+
+    var authorized = Metamaps.Active.Map.authorizeToEdit(Metamaps.Active.Mapper)
+
+    if (!authorized) {
+      Metamaps.GlobalUI.notifyUser('Cannot edit Public map.')
+      return
+    }
+
+    var r = confirm(text + 'Are you sure you want to permanently delete them all? This will remove them from all maps they appear on.')
+    if (r == true) {
+      Metamaps.Control.deleteSelectedEdges()
+      Metamaps.Control.deleteSelectedNodes()
+    }
+  },
+  deleteSelectedNodes: function () { // refers to deleting topics permanently
+    if (!Metamaps.Active.Map) return
+
+    var authorized = Metamaps.Active.Map.authorizeToEdit(Metamaps.Active.Mapper)
+
+    if (!authorized) {
+      Metamaps.GlobalUI.notifyUser('Cannot edit Public map.')
+      return
+    }
+
+    var l = Metamaps.Selected.Nodes.length
+    for (var i = l - 1; i >= 0; i -= 1) {
+      var node = Metamaps.Selected.Nodes[i]
+      Metamaps.Control.deleteNode(node.id)
+    }
+  },
+  deleteNode: function (nodeid) { // refers to deleting topics permanently
+    if (!Metamaps.Active.Map) return
+
+    var authorized = Metamaps.Active.Map.authorizeToEdit(Metamaps.Active.Mapper)
+
+    if (!authorized) {
+      Metamaps.GlobalUI.notifyUser('Cannot edit Public map.')
+      return
+    }
+
+    var node = Metamaps.Visualize.mGraph.graph.getNode(nodeid)
+    var topic = node.getData('topic')
+
+    var permToDelete = Metamaps.Active.Mapper.id === topic.get('user_id') || Metamaps.Active.Mapper.get('admin')
+    if (permToDelete) {
+      var mappableid = topic.id
+      var mapping = node.getData('mapping')
+      topic.destroy()
+      Metamaps.Mappings.remove(mapping)
+      $(document).trigger(Metamaps.JIT.events.deleteTopic, [{
+        mappableid: mappableid
+      }])
+      Metamaps.Control.hideNode(nodeid)
+    } else {
+      Metamaps.GlobalUI.notifyUser('Only topics you created can be deleted')
+    }
+  },
+  removeSelectedNodes: function () { // refers to removing topics permanently from a map
+    if (!Metamaps.Active.Map) return
+
+    var l = Metamaps.Selected.Nodes.length,
+      i,
+      node,
+      authorized = Metamaps.Active.Map.authorizeToEdit(Metamaps.Active.Mapper)
+
+    if (!authorized) {
+      Metamaps.GlobalUI.notifyUser('Cannot edit Public map.')
+      return
+    }
+
+    for (i = l - 1; i >= 0; i -= 1) {
+      node = Metamaps.Selected.Nodes[i]
+      Metamaps.Control.removeNode(node.id)
+    }
+  },
+  removeNode: function (nodeid) { // refers to removing topics permanently from a map
+    if (!Metamaps.Active.Map) return
+
+    var authorized = Metamaps.Active.Map.authorizeToEdit(Metamaps.Active.Mapper)
+    var node = Metamaps.Visualize.mGraph.graph.getNode(nodeid)
+
+    if (!authorized) {
+      Metamaps.GlobalUI.notifyUser('Cannot edit Public map.')
+      return
+    }
+
+    var topic = node.getData('topic')
+    var mappableid = topic.id
+    var mapping = node.getData('mapping')
+    mapping.destroy()
+    Metamaps.Topics.remove(topic)
+    $(document).trigger(Metamaps.JIT.events.removeTopic, [{
+      mappableid: mappableid
+    }])
+    Metamaps.Control.hideNode(nodeid)
+  },
+  hideSelectedNodes: function () {
+    var l = Metamaps.Selected.Nodes.length,
+      i,
+      node
+
+    for (i = l - 1; i >= 0; i -= 1) {
+      node = Metamaps.Selected.Nodes[i]
+      Metamaps.Control.hideNode(node.id)
+    }
+  },
+  hideNode: function (nodeid) {
+    var node = Metamaps.Visualize.mGraph.graph.getNode(nodeid)
+    var graph = Metamaps.Visualize.mGraph
+
+    Metamaps.Control.deselectNode(node)
+
+    node.setData('alpha', 0, 'end')
+    node.eachAdjacency(function (adj) {
+      adj.setData('alpha', 0, 'end')
+    })
+    Metamaps.Visualize.mGraph.fx.animate({
+      modes: ['node-property:alpha',
+        'edge-property:alpha'
+      ],
+      duration: 500
+    })
+    setTimeout(function () {
+      if (nodeid == Metamaps.Visualize.mGraph.root) { // && Metamaps.Visualize.type === "RGraph"
+        var newroot = _.find(graph.graph.nodes, function (n) { return n.id !== nodeid; })
+        graph.root = newroot ? newroot.id : null
+      }
+      Metamaps.Visualize.mGraph.graph.removeNode(nodeid)
+    }, 500)
+    Metamaps.Filter.checkMetacodes()
+    Metamaps.Filter.checkMappers()
+  },
+  selectEdge: function (edge) {
+    var filtered = edge.getData('alpha') === 0; // don't select if the edge is filtered
+
+    if (filtered || Metamaps.Selected.Edges.indexOf(edge) != -1) return
+
+    var width = Metamaps.Mouse.edgeHoveringOver === edge ? 4 : 2
+    edge.setDataset('current', {
+      showDesc: true,
+      lineWidth: width,
+      color: Metamaps.Settings.colors.synapses.selected
+    })
+    Metamaps.Visualize.mGraph.plot()
+
+    Metamaps.Selected.Edges.push(edge)
+  },
+  deselectAllEdges: function () {
+    var l = Metamaps.Selected.Edges.length
+    for (var i = l - 1; i >= 0; i -= 1) {
+      var edge = Metamaps.Selected.Edges[i]
+      Metamaps.Control.deselectEdge(edge)
+    }
+    Metamaps.Visualize.mGraph.plot()
+  },
+  deselectEdge: function (edge) {
+    edge.setData('showDesc', false, 'current')
+
+    edge.setDataset('current', {
+      lineWidth: 2,
+      color: Metamaps.Settings.colors.synapses.normal
+    })
+
+    if (Metamaps.Mouse.edgeHoveringOver == edge) {
+      edge.setDataset('current', {
+        showDesc: true,
+        lineWidth: 4
+      })
+    }
+
+    Metamaps.Visualize.mGraph.plot()
+
+    // remove the edge
+    Metamaps.Selected.Edges.splice(
+      Metamaps.Selected.Edges.indexOf(edge), 1)
+  },
+  deleteSelectedEdges: function () { // refers to deleting topics permanently
+    var edge,
+      l = Metamaps.Selected.Edges.length
+
+    if (!Metamaps.Active.Map) return
+
+    var authorized = Metamaps.Active.Map.authorizeToEdit(Metamaps.Active.Mapper)
+
+    if (!authorized) {
+      Metamaps.GlobalUI.notifyUser('Cannot edit Public map.')
+      return
+    }
+
+    for (var i = l - 1; i >= 0; i -= 1) {
+      edge = Metamaps.Selected.Edges[i]
+      Metamaps.Control.deleteEdge(edge)
+    }
+  },
+  deleteEdge: function (edge) {
+    if (!Metamaps.Active.Map) return
+
+    var authorized = Metamaps.Active.Map.authorizeToEdit(Metamaps.Active.Mapper)
+
+    if (!authorized) {
+      Metamaps.GlobalUI.notifyUser('Cannot edit Public map.')
+      return
+    }
+
+    var index = edge.getData('displayIndex') ? edge.getData('displayIndex') : 0
+
+    var synapse = edge.getData('synapses')[index]
+    var mapping = edge.getData('mappings')[index]
+
+    var permToDelete = Metamaps.Active.Mapper.id === synapse.get('user_id') || Metamaps.Active.Mapper.get('admin')
+    if (permToDelete) {
+      if (edge.getData('synapses').length - 1 === 0) {
+        Metamaps.Control.hideEdge(edge)
+      }
+      var mappableid = synapse.id
+      synapse.destroy()
+
+      // the server will destroy the mapping, we just need to remove it here
+      Metamaps.Mappings.remove(mapping)
+      edge.getData('mappings').splice(index, 1)
+      edge.getData('synapses').splice(index, 1)
+      if (edge.getData('displayIndex')) {
+        delete edge.data.$displayIndex
+      }
+      $(document).trigger(Metamaps.JIT.events.deleteSynapse, [{
+        mappableid: mappableid
+      }])
+    } else {
+      Metamaps.GlobalUI.notifyUser('Only synapses you created can be deleted')
+    }
+  },
+  removeSelectedEdges: function () {
+    var l = Metamaps.Selected.Edges.length,
+      i,
+      edge
+
+    if (!Metamaps.Active.Map) return
+
+    var authorized = Metamaps.Active.Map.authorizeToEdit(Metamaps.Active.Mapper)
+
+    if (!authorized) {
+      Metamaps.GlobalUI.notifyUser('Cannot edit Public map.')
+      return
+    }
+
+    for (i = l - 1; i >= 0; i -= 1) {
+      edge = Metamaps.Selected.Edges[i]
+      Metamaps.Control.removeEdge(edge)
+    }
+    Metamaps.Selected.Edges = [ ]
+  },
+  removeEdge: function (edge) {
+    if (!Metamaps.Active.Map) return
+
+    var authorized = Metamaps.Active.Map.authorizeToEdit(Metamaps.Active.Mapper)
+
+    if (!authorized) {
+      Metamaps.GlobalUI.notifyUser('Cannot edit Public map.')
+      return
+    }
+
+    if (edge.getData('mappings').length - 1 === 0) {
+      Metamaps.Control.hideEdge(edge)
+    }
+
+    var index = edge.getData('displayIndex') ? edge.getData('displayIndex') : 0
+
+    var synapse = edge.getData('synapses')[index]
+    var mapping = edge.getData('mappings')[index]
+    var mappableid = synapse.id
+    mapping.destroy()
+
+    Metamaps.Synapses.remove(synapse)
+
+    edge.getData('mappings').splice(index, 1)
+    edge.getData('synapses').splice(index, 1)
+    if (edge.getData('displayIndex')) {
+      delete edge.data.$displayIndex
+    }
+    $(document).trigger(Metamaps.JIT.events.removeSynapse, [{
+      mappableid: mappableid
+    }])
+  },
+  hideSelectedEdges: function () {
+    var edge,
+      l = Metamaps.Selected.Edges.length,
+      i
+    for (i = l - 1; i >= 0; i -= 1) {
+      edge = Metamaps.Selected.Edges[i]
+      Metamaps.Control.hideEdge(edge)
+    }
+    Metamaps.Selected.Edges = [ ]
+  },
+  hideEdge: function (edge) {
+    var from = edge.nodeFrom.id
+    var to = edge.nodeTo.id
+    edge.setData('alpha', 0, 'end')
+    Metamaps.Control.deselectEdge(edge)
+    Metamaps.Visualize.mGraph.fx.animate({
+      modes: ['edge-property:alpha'],
+      duration: 500
+    })
+    setTimeout(function () {
+      Metamaps.Visualize.mGraph.graph.removeAdjacence(from, to)
+    }, 500)
+    Metamaps.Filter.checkSynapses()
+    Metamaps.Filter.checkMappers()
+  },
+  updateSelectedPermissions: function (permission) {
+    var edge, synapse, node, topic
+
+    Metamaps.GlobalUI.notifyUser('Working...')
+
+    // variables to keep track of how many nodes and synapses you had the ability to change the permission of
+    var nCount = 0,
+      sCount = 0
+
+    // change the permission of the selected synapses, if logged in user is the original creator
+    var l = Metamaps.Selected.Edges.length
+    for (var i = l - 1; i >= 0; i -= 1) {
+      edge = Metamaps.Selected.Edges[i]
+      synapse = edge.getData('synapses')[0]
+
+      if (synapse.authorizePermissionChange(Metamaps.Active.Mapper)) {
+        synapse.save({
+          permission: permission
+        })
+        sCount++
+      }
+    }
+
+    // change the permission of the selected topics, if logged in user is the original creator
+    var l = Metamaps.Selected.Nodes.length
+    for (var i = l - 1; i >= 0; i -= 1) {
+      node = Metamaps.Selected.Nodes[i]
+      topic = node.getData('topic')
+
+      if (topic.authorizePermissionChange(Metamaps.Active.Mapper)) {
+        topic.save({
+          permission: permission
+        })
+        nCount++
+      }
+    }
+
+    var nString = nCount == 1 ? (nCount.toString() + ' topic and ') : (nCount.toString() + ' topics and ')
+    var sString = sCount == 1 ? (sCount.toString() + ' synapse') : (sCount.toString() + ' synapses')
+
+    var message = nString + sString + ' you created updated to ' + permission
+    Metamaps.GlobalUI.notifyUser(message)
+  },
+  updateSelectedMetacodes: function (metacode_id) {
+    var node, topic
+
+    Metamaps.GlobalUI.notifyUser('Working...')
+
+    var metacode = Metamaps.Metacodes.get(metacode_id)
+
+    // variables to keep track of how many nodes and synapses you had the ability to change the permission of
+    var nCount = 0
+
+    // change the permission of the selected topics, if logged in user is the original creator
+    var l = Metamaps.Selected.Nodes.length
+    for (var i = l - 1; i >= 0; i -= 1) {
+      node = Metamaps.Selected.Nodes[i]
+      topic = node.getData('topic')
+
+      if (topic.authorizeToEdit(Metamaps.Active.Mapper)) {
+        topic.save({
+          'metacode_id': metacode_id
+        })
+        nCount++
+      }
+    }
+
+    var nString = nCount == 1 ? (nCount.toString() + ' topic') : (nCount.toString() + ' topics')
+
+    var message = nString + ' you can edit updated to ' + metacode.get('name')
+    Metamaps.GlobalUI.notifyUser(message)
+    Metamaps.Visualize.mGraph.plot()
+  },
+}; // end Metamaps.Control

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

@@ -0,0 +1,326 @@
+/* global Metamaps, $ */
+
+/*
+ * Metamaps.Create.js
+ *
+ * Dependencies:
+ *  - Metamaps.Backbone
+ *  - Metamaps.GlobalUI
+ *  - Metamaps.Metacodes
+ *  - Metamaps.Mouse
+ *  - Metamaps.Selected
+ *  - Metamaps.Synapse
+ *  - Metamaps.Topic
+ *  - Metamaps.Visualize
+ */
+
+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

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

@@ -0,0 +1,13 @@
+/*
+ * Metamaps.Debug.js.erb
+ *
+ * Dependencies: none!
+ */
+
+Metamaps.Debug = function () {
+  console.debug(Metamaps)
+  console.debug(`Metamaps Version: ${Metamaps.VERSION}`)
+}
+Metamaps.debug = function () {
+  Metamaps.Debug()
+}

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

@@ -0,0 +1,466 @@
+/* global Metamaps, $ */
+
+/*
+ * Metamaps.Filter.js.erb
+ *
+ * Dependencies:
+ *  - Metamaps.Active
+ *  - Metamaps.Control
+ *  - Metamaps.Creators
+ *  - Metamaps.GlobalUI
+ *  - Metamaps.Mappers
+ *  - Metamaps.Metacodes
+ *  - Metamaps.Settings
+ *  - Metamaps.Synapses
+ *  - Metamaps.Topics
+ *  - Metamaps.Visualize
+ */
+Metamaps.Filter = {
+  filters: {
+    name: '',
+    metacodes: [],
+    mappers: [],
+    synapses: []
+  },
+  visible: {
+    metacodes: [],
+    mappers: [],
+    synapses: []
+  },
+  isOpen: false,
+  changing: false,
+  init: function () {
+    var self = Metamaps.Filter
+
+    $('.sidebarFilterIcon').click(self.toggleBox)
+
+    $('.sidebarFilterBox .showAllMetacodes').click(self.filterNoMetacodes)
+    $('.sidebarFilterBox .showAllSynapses').click(self.filterNoSynapses)
+    $('.sidebarFilterBox .showAllMappers').click(self.filterNoMappers)
+    $('.sidebarFilterBox .hideAllMetacodes').click(self.filterAllMetacodes)
+    $('.sidebarFilterBox .hideAllSynapses').click(self.filterAllSynapses)
+    $('.sidebarFilterBox .hideAllMappers').click(self.filterAllMappers)
+
+    self.bindLiClicks()
+    self.getFilterData()
+  },
+  toggleBox: function (event) {
+    var self = Metamaps.Filter
+
+    if (self.isOpen) self.close()
+    else self.open()
+
+    event.stopPropagation()
+  },
+  open: function () {
+    var self = Metamaps.Filter
+
+    Metamaps.GlobalUI.Account.close()
+    $('.sidebarFilterIcon div').addClass('hide')
+
+    if (!self.isOpen && !self.changing) {
+      self.changing = true
+
+      var height = $(document).height() - 108
+      $('.sidebarFilterBox').css('max-height', height + 'px').fadeIn(200, function () {
+        self.changing = false
+        self.isOpen = true
+      })
+    }
+  },
+  close: function () {
+    var self = Metamaps.Filter
+    $('.sidebarFilterIcon div').removeClass('hide')
+
+    if (!self.changing) {
+      self.changing = true
+
+      $('.sidebarFilterBox').fadeOut(200, function () {
+        self.changing = false
+        self.isOpen = false
+      })
+    }
+  },
+  reset: function () {
+    var self = Metamaps.Filter
+
+    self.filters.metacodes = []
+    self.filters.mappers = []
+    self.filters.synapses = []
+    self.visible.metacodes = []
+    self.visible.mappers = []
+    self.visible.synapses = []
+
+    $('#filter_by_metacode ul').empty()
+    $('#filter_by_mapper ul').empty()
+    $('#filter_by_synapse ul').empty()
+
+    $('.filterBox .showAll').addClass('active')
+  },
+  /*
+  Most of this data essentially depends on the ruby function which are happening for filter inside view filterBox
+  But what these function do is load this data into three accessible array within java : metacodes, mappers and synapses
+  */
+  getFilterData: function () {
+    var self = Metamaps.Filter
+
+    var metacode, mapper, synapse
+
+    $('#filter_by_metacode li').each(function () {
+      metacode = $(this).attr('data-id')
+      self.filters.metacodes.push(metacode)
+      self.visible.metacodes.push(metacode)
+    })
+
+    $('#filter_by_mapper li').each(function () {
+      mapper = ($(this).attr('data-id'))
+      self.filters.mappers.push(mapper)
+      self.visible.mappers.push(mapper)
+    })
+
+    $('#filter_by_synapse li').each(function () {
+      synapse = ($(this).attr('data-id'))
+      self.filters.synapses.push(synapse)
+      self.visible.synapses.push(synapse)
+    })
+  },
+  bindLiClicks: function () {
+    var self = Metamaps.Filter
+    $('#filter_by_metacode ul li').unbind().click(self.toggleMetacode)
+    $('#filter_by_mapper ul li').unbind().click(self.toggleMapper)
+    $('#filter_by_synapse ul li').unbind().click(self.toggleSynapse)
+  },
+  // an abstraction function for checkMetacodes, checkMappers, checkSynapses to reduce
+  // code redundancy
+  /*
+  @param
+  */
+  updateFilters: function (collection, propertyToCheck, correlatedModel, filtersToUse, listToModify) {
+    var self = Metamaps.Filter
+
+    var newList = []
+    var removed = []
+    var added = []
+
+    // the first option enables us to accept
+    // ['Topics', 'Synapses'] as 'collection'
+    if (typeof collection === 'object') {
+      Metamaps[collection[0]].each(function (model) {
+        var prop = model.get(propertyToCheck)
+        if (prop !== null) {
+          prop = prop.toString()
+          if (newList.indexOf(prop) === -1) {
+            newList.push(prop)
+          }
+        }
+      })
+      Metamaps[collection[1]].each(function (model) {
+        var prop = model.get(propertyToCheck)
+        if (prop !== null) {
+          prop = prop.toString()
+          if (newList.indexOf(prop) === -1) {
+            newList.push(prop)
+          }
+        }
+      })
+    } else if (typeof collection === 'string') {
+      Metamaps[collection].each(function (model) {
+        var prop = model.get(propertyToCheck)
+        if (prop !== null) {
+          prop = prop.toString()
+          if (newList.indexOf(prop) === -1) {
+            newList.push(prop)
+          }
+        }
+      })
+    }
+
+    removed = _.difference(self.filters[filtersToUse], newList)
+    added = _.difference(newList, self.filters[filtersToUse])
+
+    // remove the list items for things no longer present on the map
+    _.each(removed, function (identifier) {
+      $('#filter_by_' + listToModify + ' li[data-id="' + identifier + '"]').fadeOut('fast', function () {
+        $(this).remove()
+      })
+      index = self.visible[filtersToUse].indexOf(identifier)
+      self.visible[filtersToUse].splice(index, 1)
+    })
+
+    var model, li, jQueryLi
+    function sortAlpha (a, b) {
+      return a.childNodes[1].innerHTML.toLowerCase() > b.childNodes[1].innerHTML.toLowerCase() ? 1 : -1
+    }
+    // for each new filter to be added, create a list item for it and fade it in
+    _.each(added, function (identifier) {
+      model = Metamaps[correlatedModel].get(identifier) ||
+      Metamaps[correlatedModel].find(function (model) {
+        return model.get(propertyToCheck) === identifier
+      })
+      li = model.prepareLiForFilter()
+      jQueryLi = $(li).hide()
+      $('li', '#filter_by_' + listToModify + ' ul').add(jQueryLi.fadeIn('fast'))
+        .sort(sortAlpha).appendTo('#filter_by_' + listToModify + ' ul')
+      self.visible[filtersToUse].push(identifier)
+    })
+
+    // update the list of filters with the new list we just generated
+    self.filters[filtersToUse] = newList
+
+    // make sure clicks on list items still trigger the right events
+    self.bindLiClicks()
+  },
+  checkMetacodes: function () {
+    var self = Metamaps.Filter
+    self.updateFilters('Topics', 'metacode_id', 'Metacodes', 'metacodes', 'metacode')
+  },
+  checkMappers: function () {
+    var self = Metamaps.Filter
+    var onMap = Metamaps.Active.Map ? true : false
+    if (onMap) {
+      self.updateFilters('Mappings', 'user_id', 'Mappers', 'mappers', 'mapper')
+    } else {
+      // on topic view
+      self.updateFilters(['Topics', 'Synapses'], 'user_id', 'Creators', 'mappers', 'mapper')
+    }
+  },
+  checkSynapses: function () {
+    var self = Metamaps.Filter
+    self.updateFilters('Synapses', 'desc', 'Synapses', 'synapses', 'synapse')
+  },
+  filterAllMetacodes: function (e) {
+    var self = Metamaps.Filter
+    $('#filter_by_metacode ul li').addClass('toggledOff')
+    $('.showAllMetacodes').removeClass('active')
+    $('.hideAllMetacodes').addClass('active')
+    self.visible.metacodes = []
+    self.passFilters()
+  },
+  filterNoMetacodes: function (e) {
+    var self = Metamaps.Filter
+    $('#filter_by_metacode ul li').removeClass('toggledOff')
+    $('.showAllMetacodes').addClass('active')
+    $('.hideAllMetacodes').removeClass('active')
+    self.visible.metacodes = self.filters.metacodes.slice()
+    self.passFilters()
+  },
+  filterAllMappers: function (e) {
+    var self = Metamaps.Filter
+    $('#filter_by_mapper ul li').addClass('toggledOff')
+    $('.showAllMappers').removeClass('active')
+    $('.hideAllMappers').addClass('active')
+    self.visible.mappers = []
+    self.passFilters()
+  },
+  filterNoMappers: function (e) {
+    var self = Metamaps.Filter
+    $('#filter_by_mapper ul li').removeClass('toggledOff')
+    $('.showAllMappers').addClass('active')
+    $('.hideAllMappers').removeClass('active')
+    self.visible.mappers = self.filters.mappers.slice()
+    self.passFilters()
+  },
+  filterAllSynapses: function (e) {
+    var self = Metamaps.Filter
+    $('#filter_by_synapse ul li').addClass('toggledOff')
+    $('.showAllSynapses').removeClass('active')
+    $('.hideAllSynapses').addClass('active')
+    self.visible.synapses = []
+    self.passFilters()
+  },
+  filterNoSynapses: function (e) {
+    var self = Metamaps.Filter
+    $('#filter_by_synapse ul li').removeClass('toggledOff')
+    $('.showAllSynapses').addClass('active')
+    $('.hideAllSynapses').removeClass('active')
+    self.visible.synapses = self.filters.synapses.slice()
+    self.passFilters()
+  },
+  // an abstraction function for toggleMetacode, toggleMapper, toggleSynapse
+  // to reduce code redundancy
+  // gets called in the context of a list item in a filter box
+  toggleLi: function (whichToFilter) {
+    var self = Metamaps.Filter, index
+    var id = $(this).attr('data-id')
+    if (self.visible[whichToFilter].indexOf(id) == -1) {
+      self.visible[whichToFilter].push(id)
+      $(this).removeClass('toggledOff')
+    } else {
+      index = self.visible[whichToFilter].indexOf(id)
+      self.visible[whichToFilter].splice(index, 1)
+      $(this).addClass('toggledOff')
+    }
+    self.passFilters()
+  },
+  toggleMetacode: function () {
+    var self = Metamaps.Filter
+    self.toggleLi.call(this, 'metacodes')
+
+    if (self.visible.metacodes.length === self.filters.metacodes.length) {
+      $('.showAllMetacodes').addClass('active')
+      $('.hideAllMetacodes').removeClass('active')
+    }
+    else if (self.visible.metacodes.length === 0) {
+      $('.showAllMetacodes').removeClass('active')
+      $('.hideAllMetacodes').addClass('active')
+    } else {
+      $('.showAllMetacodes').removeClass('active')
+      $('.hideAllMetacodes').removeClass('active')
+    }
+  },
+  toggleMapper: function () {
+    var self = Metamaps.Filter
+    self.toggleLi.call(this, 'mappers')
+
+    if (self.visible.mappers.length === self.filters.mappers.length) {
+      $('.showAllMappers').addClass('active')
+      $('.hideAllMappers').removeClass('active')
+    }
+    else if (self.visible.mappers.length === 0) {
+      $('.showAllMappers').removeClass('active')
+      $('.hideAllMappers').addClass('active')
+    } else {
+      $('.showAllMappers').removeClass('active')
+      $('.hideAllMappers').removeClass('active')
+    }
+  },
+  toggleSynapse: function () {
+    var self = Metamaps.Filter
+    self.toggleLi.call(this, 'synapses')
+
+    if (self.visible.synapses.length === self.filters.synapses.length) {
+      $('.showAllSynapses').addClass('active')
+      $('.hideAllSynapses').removeClass('active')
+    }
+    else if (self.visible.synapses.length === 0) {
+      $('.showAllSynapses').removeClass('active')
+      $('.hideAllSynapses').addClass('active')
+    } else {
+      $('.showAllSynapses').removeClass('active')
+      $('.hideAllSynapses').removeClass('active')
+    }
+  },
+  passFilters: function () {
+    var self = Metamaps.Filter
+    var visible = self.visible
+
+    var passesMetacode, passesMapper, passesSynapse
+    var onMap
+
+    if (Metamaps.Active.Map) {
+      onMap = true
+    }
+    else if (Metamaps.Active.Topic) {
+      onMap = false
+    }
+
+    var opacityForFilter = onMap ? 0 : 0.4
+
+    Metamaps.Topics.each(function (topic) {
+      var n = topic.get('node')
+      var metacode_id = topic.get('metacode_id').toString()
+
+      if (visible.metacodes.indexOf(metacode_id) == -1) passesMetacode = false
+      else passesMetacode = true
+
+      if (onMap) {
+        // when on a map,
+        // we filter by mapper according to the person who added the
+        // topic or synapse to the map
+        var user_id = topic.getMapping().get('user_id').toString()
+        if (visible.mappers.indexOf(user_id) == -1) passesMapper = false
+        else passesMapper = true
+      } else {
+        // when on a topic view,
+        // we filter by mapper according to the person who created the
+        // topic or synapse
+        var user_id = topic.get('user_id').toString()
+        if (visible.mappers.indexOf(user_id) == -1) passesMapper = false
+        else passesMapper = true
+      }
+
+      if (passesMetacode && passesMapper) {
+        if (n) {
+          n.setData('alpha', 1, 'end')
+        }
+        else console.log(topic)
+      } else {
+        if (n) {
+          Metamaps.Control.deselectNode(n, true)
+          n.setData('alpha', opacityForFilter, 'end')
+          n.eachAdjacency(function (e) {
+            Metamaps.Control.deselectEdge(e, true)
+          })
+        }
+        else console.log(topic)
+      }
+    })
+
+    // flag all the edges back to 'untouched'
+    Metamaps.Synapses.each(function (synapse) {
+      var e = synapse.get('edge')
+      e.setData('touched', false)
+    })
+    Metamaps.Synapses.each(function (synapse) {
+      var e = synapse.get('edge')
+      var desc
+      var user_id = synapse.get('user_id').toString()
+
+      if (e && !e.getData('touched')) {
+        var synapses = e.getData('synapses')
+
+        // if any of the synapses represent by the edge are still unfiltered
+        // leave the edge visible
+        passesSynapse = false
+        for (var i = 0; i < synapses.length; i++) {
+          desc = synapses[i].get('desc')
+          if (visible.synapses.indexOf(desc) > -1) passesSynapse = true
+        }
+
+        // if the synapse description being displayed is now being
+        // filtered, set the displayIndex to the first unfiltered synapse if there is one
+        var displayIndex = e.getData('displayIndex') ? e.getData('displayIndex') : 0
+        var displayedSynapse = synapses[displayIndex]
+        desc = displayedSynapse.get('desc')
+        if (passesSynapse && visible.synapses.indexOf(desc) == -1) {
+          // iterate and find an unfiltered one
+          for (var i = 0; i < synapses.length; i++) {
+            desc = synapses[i].get('desc')
+            if (visible.synapses.indexOf(desc) > -1) {
+              e.setData('displayIndex', i)
+              break
+            }
+          }
+        }
+
+        if (onMap) {
+          // when on a map,
+          // we filter by mapper according to the person who added the
+          // topic or synapse to the map
+          user_id = synapse.getMapping().get('user_id').toString()
+        }
+        if (visible.mappers.indexOf(user_id) == -1) passesMapper = false
+        else passesMapper = true
+
+        var color = Metamaps.Settings.colors.synapses.normal
+        if (passesSynapse && passesMapper) {
+          e.setData('alpha', 1, 'end')
+          e.setData('color', color, 'end')
+        } else {
+          Metamaps.Control.deselectEdge(e, true)
+          e.setData('alpha', opacityForFilter, 'end')
+        }
+
+        e.setData('touched', true)
+      }
+      else if (!e) console.log(synapse)
+    })
+
+    // run the animation
+    Metamaps.Visualize.mGraph.fx.animate({
+      modes: ['node-property:alpha',
+        'edge-property:alpha'],
+      duration: 200
+    })
+  }
+}; // end Metamaps.Filter

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

@@ -0,0 +1,699 @@
+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
+*/
+
+Metamaps.Active = {
+    Map: null,
+    Topic: null,
+    Mapper: null
+};
+Metamaps.Maps = {};
+
+$(document).ready(function () {
+  function init() {
+    for (var prop in Metamaps) {
+
+        // this runs the init function within each sub-object on the Metamaps one
+        if (Metamaps.hasOwnProperty(prop) &&
+            Metamaps[prop] != null &&
+            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();
+            init();
+        }
+        else {
+            setTimeout(callFamous, 100);
+        }
+    }
+    callFamous();
+});
+
+Metamaps.GlobalUI = {
+    notifyTimeout: null,
+    lightbox: null,
+    init: function () {
+        var self = Metamaps.GlobalUI;
+
+        self.Search.init();
+        self.CreateMap.init();
+        self.Account.init();
+
+        //bind lightbox clicks
+        $('.openLightbox').click(function (event) {
+            self.openLightbox($(this).attr('data-open'));
+            event.preventDefault();
+            return false;
+        });
+
+        $('#lightbox_screen, #lightbox_close').click(self.closeLightbox);
+
+        // initialize global backbone models and collections
+        if (Metamaps.Active.Mapper) Metamaps.Active.Mapper = new Metamaps.Backbone.Mapper(Metamaps.Active.Mapper);
+
+        var myCollection = Metamaps.Maps.Mine ? Metamaps.Maps.Mine : [];
+        var sharedCollection = Metamaps.Maps.Shared ? Metamaps.Maps.Shared : [];
+        var mapperCollection = [];
+        var mapperOptionsObj = {id: 'mapper', sortBy: 'updated_at' };
+        if (Metamaps.Maps.Mapper) {
+            mapperCollection = Metamaps.Maps.Mapper.models;
+            mapperOptionsObj.mapperId = Metamaps.Maps.Mapper.id;
+        }
+        var featuredCollection = Metamaps.Maps.Featured ? Metamaps.Maps.Featured : [];
+        var activeCollection = Metamaps.Maps.Active ? Metamaps.Maps.Active : [];
+        Metamaps.Maps.Mine = new Metamaps.Backbone.MapsCollection(myCollection, {id: 'mine', sortBy: 'updated_at' });
+        Metamaps.Maps.Shared = new Metamaps.Backbone.MapsCollection(sharedCollection, {id: 'shared', sortBy: 'updated_at' });
+        // 'Mapper' refers to another mapper
+        Metamaps.Maps.Mapper = new Metamaps.Backbone.MapsCollection(mapperCollection, mapperOptionsObj);
+        Metamaps.Maps.Featured = new Metamaps.Backbone.MapsCollection(featuredCollection, {id: 'featured', sortBy: 'updated_at' });
+        Metamaps.Maps.Active = new Metamaps.Backbone.MapsCollection(activeCollection, {id: 'active', sortBy: 'updated_at' });
+    },
+    openLightbox: function (which) {
+        var self = Metamaps.GlobalUI;
+
+        $('.lightboxContent').hide();
+        $('#' + which).show();
+
+        self.lightbox = which;
+
+        $('#lightbox_overlay').show();
+
+        var heightOfContent = '-' + ($('#lightbox_main').height() / 2) + 'px';
+        // animate the content in from the bottom
+        $('#lightbox_main').animate({
+                'top': '50%',
+                'margin-top': heightOfContent
+        }, 200, 'easeOutCubic');
+
+        // fade the black overlay in
+        $('#lightbox_screen').animate({
+                    'opacity': '0.42'
+        }, 200);
+
+        if (which == "switchMetacodes") {
+            Metamaps.Create.isSwitchingSet = true;
+        }
+    },
+
+    closeLightbox: function (event) {
+        var self = Metamaps.GlobalUI;
+
+        if (event) event.preventDefault();
+
+        // animate the lightbox content offscreen
+        $('#lightbox_main').animate({
+                'top': '100%',
+                'margin-top': '0'
+        }, 200, 'easeInCubic');
+
+        // fade the black overlay out
+        $('#lightbox_screen').animate({
+                    'opacity': '0.0'
+        }, 200, function () {
+            $('#lightbox_overlay').hide();
+        });
+
+        if (self.lightbox === 'forkmap') Metamaps.GlobalUI.CreateMap.reset('fork_map');
+        if (self.lightbox === 'newmap') Metamaps.GlobalUI.CreateMap.reset('new_map');
+        if (Metamaps.Create && Metamaps.Create.isSwitchingSet) {
+            Metamaps.Create.cancelMetacodeSetSwitch();
+        }
+        self.lightbox = null;
+    },
+    notifyUser: function (message, leaveOpen) {
+        var self = Metamaps.GlobalUI;
+
+        function famousReady() {
+          Metamaps.Famous.toast.surf.setContent(message);
+          Metamaps.Famous.toast.show();
+          clearTimeout(self.notifyTimeOut);
+          if (!leaveOpen) {
+              self.notifyTimeOut = setTimeout(function () {
+                  Metamaps.Famous.toast.hide();
+              }, 8000);
+          }
+        }
+
+        // initialize the famous ui
+        var callFamous = function(){
+            if (Metamaps.Famous && Metamaps.Famous.toast) {
+                famousReady();
+            }
+            else {
+                setTimeout(callFamous, 100);
+            }
+        }
+        callFamous();
+    },
+    clearNotify: function() {
+        var self = Metamaps.GlobalUI;
+
+        clearTimeout(self.notifyTimeOut);
+        Metamaps.Famous.toast.hide();
+    },
+    shareInvite: function(inviteLink) {
+        window.prompt("To copy the invite link, press: Ctrl+C, Enter", inviteLink);
+    }
+};
+
+Metamaps.GlobalUI.CreateMap = {
+    newMap: null,
+    emptyMapForm: "",
+    emptyForkMapForm: "",
+    topicsToMap: [],
+    synapsesToMap: [],
+    init: function () {
+        var self = Metamaps.GlobalUI.CreateMap;
+
+        self.newMap = new Metamaps.Backbone.Map({ permission: 'commons' });
+
+        self.bindFormEvents();
+
+        self.emptyMapForm = $('#new_map').html();
+
+    },
+    bindFormEvents: function () {
+        var self = Metamaps.GlobalUI.CreateMap;
+
+        $('.new_map button.cancel').unbind().bind('click', function (event) {
+            event.preventDefault();
+            Metamaps.GlobalUI.closeLightbox();
+        });
+        $('.new_map button.submitMap').unbind().bind('click', self.submit);
+
+        // bind permission changer events on the createMap form
+        $('.permIcon').unbind().bind('click', self.switchPermission);
+    },
+    closeSuccess: function () {
+        $('#mapCreatedSuccess').fadeOut(300, function(){
+            $(this).remove();
+        });
+    },
+    generateSuccessMessage: function (id) {
+        var stringStart = "<div id='mapCreatedSuccess'><h6>SUCCESS!</h6>Your map has been created. Do you want to: <a id='mapGo' href='/maps/";
+        stringStart += id;
+        stringStart += "' onclick='Metamaps.GlobalUI.CreateMap.closeSuccess();'>Go to your new map</a>";
+        stringStart += "<span>OR</span><a id='mapStay' href='#' onclick='Metamaps.GlobalUI.CreateMap.closeSuccess(); return false;'>Stay on this ";
+        var page = Metamaps.Active.Map ? 'map' : 'page';
+        var stringEnd = "</a></div>";
+        return stringStart + page + stringEnd;
+    },
+    switchPermission: function () {
+        var self = Metamaps.GlobalUI.CreateMap;
+
+        self.newMap.set('permission', $(this).attr('data-permission'));
+        $(this).siblings('.permIcon').find('.mapPermIcon').removeClass('selected');
+        $(this).find('.mapPermIcon').addClass('selected');
+
+        var permText = $(this).find('.tip').html();
+        $(this).parents('.new_map').find('.permText').html(permText);
+    },
+    submit: function (event) {
+        if (event) event.preventDefault();
+
+        var self = Metamaps.GlobalUI.CreateMap;
+
+        if (Metamaps.GlobalUI.lightbox === 'forkmap') {
+            self.newMap.set('topicsToMap', self.topicsToMap);
+            self.newMap.set('synapsesToMap', self.synapsesToMap);
+        }
+
+        var formId = Metamaps.GlobalUI.lightbox === 'forkmap' ? '#fork_map' : '#new_map';
+        var $form = $(formId);
+
+        self.newMap.set('name', $form.find('#map_name').val());
+        self.newMap.set('desc', $form.find('#map_desc').val());
+
+        if (self.newMap.get('name').length===0){
+            self.throwMapNameError();
+            return;
+        }
+
+        self.newMap.save(null, {
+            success: self.success
+            // TODO add error message
+        });
+
+        Metamaps.GlobalUI.closeLightbox();
+        Metamaps.GlobalUI.notifyUser('Working...');
+    },
+    throwMapNameError: function () {
+        var self = Metamaps.GlobalUI.CreateMap;
+
+        var formId = Metamaps.GlobalUI.lightbox === 'forkmap' ? '#fork_map' : '#new_map';
+        var $form = $(formId);
+
+        var message = $("<div class='feedback_message'>Please enter a map name...</div>");
+
+        $form.find('#map_name').after(message);
+        setTimeout(function(){
+            message.fadeOut('fast', function(){
+                message.remove();
+            });
+        }, 5000);
+    },
+    success: function (model) {
+        var self = Metamaps.GlobalUI.CreateMap;
+
+        //push the new map onto the collection of 'my maps'
+        Metamaps.Maps.Mine.add(model);
+
+        var formId = Metamaps.GlobalUI.lightbox === 'forkmap' ? '#fork_map' : '#new_map';
+        var form = $(formId);
+
+        Metamaps.GlobalUI.clearNotify();
+        $('#wrapper').append(self.generateSuccessMessage(model.id));
+
+    },
+    reset: function (id) {
+        var self = Metamaps.GlobalUI.CreateMap;
+
+        var form = $('#' + id);
+
+        if (id === "fork_map") {
+            self.topicsToMap = [];
+            self.synapsesToMap = [];
+            form.html(self.emptyForkMapForm);
+        }
+        else {
+            form.html(self.emptyMapForm);
+        }
+
+        self.bindFormEvents();
+        self.newMap = new Metamaps.Backbone.Map({ permission: 'commons' });
+
+        return false;
+    },
+};
+
+
+Metamaps.GlobalUI.Account = {
+    isOpen: false,
+    changing: false,
+    init: function () {
+        var self = Metamaps.GlobalUI.Account;
+
+        $('.sidebarAccountIcon').click(self.toggleBox);
+        $('.sidebarAccountBox').click(function(event){
+            event.stopPropagation();
+        });
+        $('body').click(self.close);
+    },
+    toggleBox: function (event) {
+        var self = Metamaps.GlobalUI.Account;
+
+        if (self.isOpen) self.close();
+        else self.open();
+
+        event.stopPropagation();
+    },
+    open: function () {
+        var self = Metamaps.GlobalUI.Account;
+
+        Metamaps.Filter.close();
+        $('.sidebarAccountIcon .tooltipsUnder').addClass('hide');
+
+
+        if (!self.isOpen && !self.changing) {
+            self.changing = true;
+            $('.sidebarAccountBox').fadeIn(200, function () {
+                self.changing = false;
+                self.isOpen = true;
+                $('.sidebarAccountBox #user_email').focus();
+            });
+        }
+    },
+    close: function () {
+        var self = Metamaps.GlobalUI.Account;
+
+        $('.sidebarAccountIcon .tooltipsUnder').removeClass('hide');
+        if (!self.changing) {
+            self.changing = true;
+            $('.sidebarAccountBox #user_email').blur();
+            $('.sidebarAccountBox').fadeOut(200, function () {
+                self.changing = false;
+                self.isOpen = false;
+            });
+        }
+    }
+};
+
+
+
+Metamaps.GlobalUI.Search = {
+    locked: false,
+    isOpen: false,
+    limitTopicsToMe: false,
+    limitMapsToMe: false,
+    timeOut: null,
+    changing: false,
+    optionsInitialized: false,
+    init: function () {
+        var self = Metamaps.GlobalUI.Search;
+
+        var loader = new CanvasLoader('searchLoading');
+        loader.setColor('#4fb5c0'); // default is '#000000'
+        loader.setDiameter(24); // default is 40
+        loader.setDensity(41); // default is 40
+        loader.setRange(0.9); // default is 1.3
+        loader.show(); // Hidden by default
+
+        // bind the hover events
+        $(".sidebarSearch").hover(function () {
+            self.open()
+        }, function () {
+            self.close(800, false)
+        });
+
+        $('.sidebarSearchIcon').click(function (e) {
+            $('.sidebarSearchField').focus();
+        });
+        $('.sidebarSearch').click(function (e) {
+            e.stopPropagation();
+        });
+        $('body').click(function (e) {
+            self.close(0, false);
+        });
+
+        // open if the search is closed and user hits ctrl+/
+        // close if they hit ESC
+        $('body').bind('keyup', function (e) {
+            switch (e.which) {
+            case 191:
+                if ((e.ctrlKey && !self.isOpen) || (e.ctrlKey && self.locked)) {
+                    self.open(true); // true for focus
+                }
+                break;
+            case 27:
+                if (self.isOpen) {
+                    self.close(0, true);
+                }
+                break;
+
+            default:
+                break; //console.log(e.which);
+            }
+        });
+
+        self.startTypeahead();
+    },
+    lock: function() {
+        var self = Metamaps.GlobalUI.Search;
+        self.locked = true;
+    },
+    unlock: function() {
+        var self = Metamaps.GlobalUI.Search;
+        self.locked = false;
+    },
+    open: function (focus) {
+        var self = Metamaps.GlobalUI.Search;
+
+        clearTimeout(self.timeOut);
+        if (!self.isOpen && !self.changing && !self.locked) {
+            self.changing = true;
+            $('.sidebarSearch .twitter-typeahead, .sidebarSearch .tt-hint, .sidebarSearchField').animate({
+                width: '400px'
+            }, 300, function () {
+                if (focus) $('.sidebarSearchField').focus();
+                $('.sidebarSearchField, .sidebarSearch .tt-hint').css({
+                    padding: '7px 10px 3px 10px',
+                    width: '380px'
+                });
+                self.changing = false;
+                self.isOpen = true;
+            });
+        }
+    },
+    close: function (closeAfter, bypass) {
+        var self = Metamaps.GlobalUI.Search;
+
+        self.timeOut = setTimeout(function () {
+            if (!self.locked && !self.changing && self.isOpen && (bypass || $('.sidebarSearchField.tt-input').val() == '')) {
+                self.changing = true;
+                $('.sidebarSearchField, .sidebarSearch .tt-hint').css({
+                    padding: '7px 0 3px 0',
+                    width: '400px'
+                });
+                $('.sidebarSearch .twitter-typeahead, .sidebarSearch .tt-hint, .sidebarSearchField').animate({
+                    width: '0'
+                }, 300, function () {
+                    $('.sidebarSearchField').typeahead('val', '');
+                    $('.sidebarSearchField').blur();
+                    self.changing = false;
+                    self.isOpen = false;
+                });
+            }
+        }, closeAfter);
+    },
+    startTypeahead: function () {
+        var self = Metamaps.GlobalUI.Search;
+
+        var mapheader = Metamaps.Active.Mapper ? '<div class="searchMapsHeader searchHeader"><h3 class="search-heading">Maps</h3><input type="checkbox" class="limitToMe" id="limitMapsToMe"></input><label for="limitMapsToMe" class="limitToMeLabel">added by me</label><div class="minimizeResults minimizeMapResults"></div><div class="clearfloat"></div></div>' : '<div class="searchMapsHeader searchHeader"><h3 class="search-heading">Maps</h3><div class="minimizeResults minimizeMapResults"></div><div class="clearfloat"></div></div>';
+        var topicheader = Metamaps.Active.Mapper ? '<div class="searchTopicsHeader searchHeader"><h3 class="search-heading">Topics</h3><input type="checkbox" class="limitToMe" id="limitTopicsToMe"></input><label for="limitTopicsToMe" class="limitToMeLabel">added by me</label><div class="minimizeResults minimizeTopicResults"></div><div class="clearfloat"></div></div>' : '<div class="searchTopicsHeader searchHeader"><h3 class="search-heading">Topics</h3><div class="minimizeResults minimizeTopicResults"></div><div class="clearfloat"></div></div>';
+        var mapperheader = '<div class="searchMappersHeader searchHeader"><h3 class="search-heading">Mappers</h3><div class="minimizeResults minimizeMapperResults"></div><div class="clearfloat"></div></div>';
+
+        var topics = {
+            name: 'topics',
+            limit: 9999,
+
+            display: function(s) { return s.label; },
+            templates: {
+                notFound: function(s) {
+                    return Hogan.compile(topicheader + $('#topicSearchTemplate').html()).render({
+                        value: "No results",
+                        label: "No results",
+                        typeImageURL: Metamaps.Erb['icons/wildcard.png'],
+                        rtype: "noresult"
+                    });
+                },
+                header: topicheader,
+                suggestion: function(s) {
+                    return Hogan.compile($('#topicSearchTemplate').html()).render(s);
+                },
+            },
+            source: new Bloodhound({
+                datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
+                queryTokenizer: Bloodhound.tokenizers.whitespace,
+                remote: {
+                    url: '/search/topics',
+                    prepare: function(query, settings) {
+                        settings.url += '?term=' + query;
+                        if (Metamaps.Active.Mapper && self.limitTopicsToMe) {
+                            settings.url += "&user=" + Metamaps.Active.Mapper.id.toString();
+                        }
+                        return settings;
+                    },
+                },
+            }),
+        };
+
+        var maps = {
+            name: 'maps',
+            limit: 9999,
+            display: function(s) { return s.label; },
+            templates: {
+                notFound: function(s) {
+                    return Hogan.compile(mapheader + $('#mapSearchTemplate').html()).render({
+                        value: "No results",
+                        label: "No results",
+                        rtype: "noresult"
+                    });
+                },
+                header: mapheader,
+                suggestion: function(s) {
+                    return Hogan.compile($('#mapSearchTemplate').html()).render(s);
+                },
+            },
+            source: new Bloodhound({
+                datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
+                queryTokenizer: Bloodhound.tokenizers.whitespace,
+                remote: {
+                    url: '/search/maps',
+                    prepare: function(query, settings) {
+                        settings.url += '?term=' + query;
+                        if (Metamaps.Active.Mapper && self.limitMapsToMe) {
+                            settings.url += "&user=" + Metamaps.Active.Mapper.id.toString();
+                        }
+                        return settings;
+                    },
+                },
+            }),
+        };
+
+        var mappers = {
+            name: 'mappers',
+            limit: 9999,
+            display: function(s) { return s.label; },
+            templates: {
+                notFound: function(s) {
+                    return Hogan.compile(mapperheader + $('#mapperSearchTemplate').html()).render({
+                        value: "No results",
+                        label: "No results",
+                        rtype: "noresult",
+                        profile: Metamaps.Erb['user.png']
+                    });
+                },
+                header: mapperheader,
+                suggestion: function(s) {
+                    return Hogan.compile($('#mapperSearchTemplate').html()).render(s);
+                },
+            },
+            source: new Bloodhound({
+                datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
+                queryTokenizer: Bloodhound.tokenizers.whitespace,
+                remote: {
+                    url: '/search/mappers?term=%QUERY',
+                    wildcard: '%QUERY',
+                },
+            }),
+        };
+
+        // Take all that crazy setup data and put it together into one beautiful typeahead call!
+        $('.sidebarSearchField').typeahead(
+            {
+                highlight: true,
+            },
+            [topics, maps, mappers]
+        );
+
+        //Set max height of the search results box to prevent it from covering bottom left footer
+        $('.sidebarSearchField').bind('typeahead:render', function (event) {
+            self.initSearchOptions();
+            self.hideLoader();
+            var h = $(window).height();
+            $(".tt-dropdown-menu").css('max-height', h - 100);
+            if (self.limitTopicsToMe) {
+              $('#limitTopicsToMe').prop('checked', true);
+            }
+            if (self.limitMapsToMe) {
+              $('#limitMapsToMe').prop('checked', true);
+            }
+        });
+        $(window).resize(function () {
+            var h = $(window).height();
+            $(".tt-dropdown-menu").css('max-height', h - 100);
+        });
+
+        // tell the autocomplete to launch a new tab with the topic, map, or mapper you clicked on
+        $('.sidebarSearchField').bind('typeahead:select', self.handleResultClick);
+
+        // don't do it, if they clicked on a 'addToMap' button
+        $('.sidebarSearch button.addToMap').click(function (event) {
+            event.stopPropagation();
+        });
+
+        // make sure that when you click on 'limit to me' or 'toggle section' it works
+        $('.sidebarSearchField.tt-input').keyup(function(){
+            if ($('.sidebarSearchField.tt-input').val() === '') {
+                self.hideLoader();
+            } else {
+                self.showLoader();
+            }
+        });
+
+    },
+    handleResultClick: function (event, datum, dataset) {
+        var self = Metamaps.GlobalUI.Search;
+
+        self.hideLoader();
+
+        if (["topic", "map", "mapper"].indexOf(datum.rtype) !== -1) {
+            self.close(0, true);
+            var win;
+            if (datum.rtype == "topic") {
+                Metamaps.Router.topics(datum.id);
+            } else if (datum.rtype == "map") {
+                Metamaps.Router.maps(datum.id);
+            } else if (datum.rtype == "mapper") {
+                Metamaps.Router.explore("mapper", datum.id);
+            }
+        }
+    },
+    initSearchOptions: function () {
+        var self = Metamaps.GlobalUI.Search;
+
+        function toggleResultSet(set) {
+            var s = $('.tt-dataset-' + set + ' .tt-suggestion, .tt-dataset-' + set + ' .resultnoresult');
+            if (s.is(':visible')) {
+                s.hide();
+                $(this).removeClass('minimizeResults').addClass('maximizeResults');
+            } else {
+                s.show();
+                $(this).removeClass('maximizeResults').addClass('minimizeResults');
+            }
+        }
+
+        $('.limitToMe').unbind().bind("change", function (e) {
+            if ($(this).attr('id') == 'limitTopicsToMe') {
+              self.limitTopicsToMe = !self.limitTopicsToMe;
+            }
+            if ($(this).attr('id') == 'limitMapsToMe') {
+              self.limitMapsToMe = !self.limitMapsToMe;
+            }
+
+            // set the value of the search equal to itself to retrigger the
+            // autocomplete event
+            var searchQuery = $('.sidebarSearchField.tt-input').val();
+            $(".sidebarSearchField").typeahead('val', '')
+                                    .typeahead('val', searchQuery);
+        });
+
+        // when the user clicks minimize section, hide the results for that section
+        $('.minimizeMapperResults').unbind().click(function (e) {
+            toggleResultSet.call(this, 'mappers');
+        });
+        $('.minimizeTopicResults').unbind().click(function (e) {
+            toggleResultSet.call(this, 'topics');
+        });
+        $('.minimizeMapResults').unbind().click(function (e) {
+            toggleResultSet.call(this, 'maps');
+        });
+    },
+    hideLoader: function () {
+        $('#searchLoading').hide();
+    },
+    showLoader: function () {
+        $('#searchLoading').show();
+    }
+};

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

@@ -0,0 +1,324 @@
+/* global Metamaps, $ */
+
+/*
+ * Metamaps.Import.js.erb
+ *
+ * Dependencies:
+ *  - Metamaps.Active
+ *  - Metamaps.Backbone
+ *  - Metamaps.Famous    // TODO remove dependency
+ *  - Metamaps.Map
+ *  - Metamaps.Mappings
+ *  - Metamaps.Metacodes
+ *  - Metamaps.Synapses
+ *  - Metamaps.Topics
+ */
+
+Metamaps.Import = {
+  // note that user is not imported
+  topicWhitelist: [
+    'id', 'name', 'metacode', 'x', 'y', 'description', 'link', 'permission'
+  ],
+  synapseWhitelist: [
+    'topic1', 'topic2', 'category', 'desc', 'description', 'permission'
+  ],
+  cidMappings: {}, // to be filled by import_id => cid mappings
+
+  init: function () {
+    var self = Metamaps.Import
+
+    $('body').bind('paste', function (e) {
+      if (e.target.tagName === 'INPUT') return
+
+      var text = e.originalEvent.clipboardData.getData('text/plain')
+
+      var results
+      if (text.trimLeft()[0] === '{') {
+        try {
+          results = JSON.parse(text)
+        } catch (e) {
+          results = false
+        }
+      } else {
+        results = self.parseTabbedString(text)
+      }
+      if (results === false) return
+
+      var topics = results.topics
+      var synapses = results.synapses
+
+      if (topics.length > 0 || synapses.length > 0) {
+        if (window.confirm('Are you sure you want to create ' + topics.length +
+            ' new topics and ' + synapses.length + ' new synapses?')) {
+          self.importTopics(topics)
+          self.importSynapses(synapses)
+        } // if
+      } // if
+    })
+  },
+
+  abort: function (message) {
+    console.error(message)
+  },
+
+  simplify: function (string) {
+    return string
+      .replace(/(^\s*|\s*$)/g, '')
+      .toLowerCase()
+  },
+
+  parseTabbedString: function (text) {
+    var self = Metamaps.Import
+
+    // determine line ending and split lines
+    var delim = '\n'
+    if (text.indexOf('\r\n') !== -1) {
+      delim = '\r\n'
+    } else if (text.indexOf('\r') !== -1) {
+      delim = '\r'
+    } // if
+
+    var STATES = {
+      ABORT: -1,
+      UNKNOWN: 0,
+      TOPICS_NEED_HEADERS: 1,
+      SYNAPSES_NEED_HEADERS: 2,
+      TOPICS: 3,
+      SYNAPSES: 4
+    }
+
+    // state & lines determine parser behaviour
+    var state = STATES.UNKNOWN
+    var lines = text.split(delim)
+    var results = { topics: [], synapses: [] }
+    var topicHeaders = []
+    var synapseHeaders = []
+
+    lines.forEach(function (line_raw, index) {
+      var line = line_raw.split('\t')
+      var noblanks = line.filter(function (elt) {
+        return elt !== ''
+      })
+      switch (state) {
+        case STATES.UNKNOWN:
+          if (noblanks.length === 0) {
+            state = STATES.UNKNOWN
+            break
+          } else if (noblanks.length === 1 && self.simplify(line[0]) === 'topics') {
+            state = STATES.TOPICS_NEED_HEADERS
+            break
+          } else if (noblanks.length === 1 && self.simplify(line[0]) === 'synapses') {
+            state = STATES.SYNAPSES_NEED_HEADERS
+            break
+          }
+          state = STATES.TOPICS_NEED_HEADERS
+          // FALL THROUGH - if we're not sure what to do, pretend
+          // we're on the TOPICS_NEED_HEADERS state and parse some headers
+
+        case STATES.TOPICS_NEED_HEADERS: // eslint-disable-line
+          if (noblanks.length < 2) {
+            self.abort('Not enough topic headers on line ' + index)
+            state = STATES.ABORT
+          }
+          topicHeaders = line.map(function (header, index) {
+            return header.toLowerCase().replace('description', 'desc')
+          })
+          state = STATES.TOPICS
+          break
+
+        case STATES.SYNAPSES_NEED_HEADERS:
+          if (noblanks.length < 2) {
+            self.abort('Not enough synapse headers on line ' + index)
+            state = STATES.ABORT
+          }
+          synapseHeaders = line.map(function (header, index) {
+            return header.toLowerCase().replace('description', 'desc')
+          })
+          state = STATES.SYNAPSES
+          break
+
+        case STATES.TOPICS:
+          if (noblanks.length === 0) {
+            state = STATES.UNKNOWN
+          } else if (noblanks.length === 1 && line[0].toLowerCase() === 'topics') {
+            state = STATES.TOPICS_NEED_HEADERS
+          } else if (noblanks.length === 1 && line[0].toLowerCase() === 'synapses') {
+            state = STATES.SYNAPSES_NEED_HEADERS
+          } else {
+            var topic = {}
+            line.forEach(function (field, index) {
+              var header = topicHeaders[index]
+              if (self.topicWhitelist.indexOf(header) === -1) return
+              topic[header] = field
+              if (['id', 'x', 'y'].indexOf(header) !== -1) {
+                topic[header] = parseInt(topic[header])
+              } // if
+            })
+            results.topics.push(topic)
+          }
+          break
+
+        case STATES.SYNAPSES:
+          if (noblanks.length === 0) {
+            state = STATES.UNKNOWN
+          } else if (noblanks.length === 1 && line[0].toLowerCase() === 'topics') {
+            state = STATES.TOPICS_NEED_HEADERS
+          } else if (noblanks.length === 1 && line[0].toLowerCase() === 'synapses') {
+            state = STATES.SYNAPSES_NEED_HEADERS
+          } else {
+            var synapse = {}
+            line.forEach(function (field, index) {
+              var header = synapseHeaders[index]
+              if (self.synapseWhitelist.indexOf(header) === -1) return
+              synapse[header] = field
+              if (['id', 'topic1', 'topic2'].indexOf(header) !== -1) {
+                synapse[header] = parseInt(synapse[header])
+              } // if
+            })
+            results.synapses.push(synapse)
+          }
+          break
+        case STATES.ABORT:
+
+        default:
+          self.abort('Invalid state while parsing import data. Check code.')
+          state = STATES.ABORT
+      }
+    })
+
+    if (state === STATES.ABORT) {
+      return false
+    } else {
+      return results
+    }
+  },
+
+  importTopics: function (parsedTopics) {
+    var self = Metamaps.Import
+
+    // up to 25 topics: scale 100
+    // up to 81 topics: scale 200
+    // up to 169 topics: scale 300
+    var scale = Math.floor((Math.sqrt(parsedTopics.length) - 1) / 4) * 100
+    if (scale < 100) scale = 100
+    var autoX = -scale
+    var autoY = -scale
+
+    parsedTopics.forEach(function (topic) {
+      var x, y
+      if (topic.x && topic.y) {
+        x = topic.x
+        y = topic.y
+      } else {
+        x = autoX
+        y = autoY
+        autoX += 50
+        if (autoX > scale) {
+          autoY += 50
+          autoX = -scale
+        }
+      }
+
+      self.createTopicWithParameters(
+        topic.name, topic.metacode, topic.permission,
+        topic.desc, topic.link, x, y, topic.id
+      )
+    })
+  },
+
+  importSynapses: function (parsedSynapses) {
+    var self = Metamaps.Import
+
+    parsedSynapses.forEach(function (synapse) {
+      // only createSynapseWithParameters once both topics are persisted
+      var topic1 = Metamaps.Topics.get(self.cidMappings[synapse.topic1])
+      var topic2 = Metamaps.Topics.get(self.cidMappings[synapse.topic2])
+      if (!topic1 || !topic2) {
+        console.error("One of the two topics doesn't exist!")
+        console.error(synapse)
+        return true
+      }
+
+      var synapse_created = false
+      topic1.once('sync', function () {
+        if (topic1.id && topic2.id && !synapse_created) {
+          synapse_created = true
+          self.createSynapseWithParameters(
+            synapse.desc, synapse.category, synapse.permission,
+            topic1, topic2
+          )
+        } // if
+      })
+      topic2.once('sync', function () {
+        if (topic1.id && topic2.id && !synapse_created) {
+          synapse_created = true
+          self.createSynapseWithParameters(
+            synapse.desc, synapse.category, synapse.permission,
+            topic1, topic2
+          )
+        } // if
+      })
+    })
+  },
+
+  createTopicWithParameters: function (name, metacode_name, permission, desc,
+    link, xloc, yloc, import_id) {
+    var self = Metamaps.Import
+    $(document).trigger(Metamaps.Map.events.editedByActiveMapper)
+    var metacode = Metamaps.Metacodes.where({name: metacode_name})[0] || null
+    if (metacode === null) return console.error('metacode not found')
+
+    var topic = new Metamaps.Backbone.Topic({
+      name: name,
+      metacode_id: metacode.id,
+      permission: permission || Metamaps.Active.Map.get('permission'),
+      desc: desc,
+      link: link
+    })
+    Metamaps.Topics.add(topic)
+    self.cidMappings[import_id] = topic.cid
+
+    var mapping = new Metamaps.Backbone.Mapping({
+      xloc: xloc,
+      yloc: yloc,
+      mappable_id: topic.cid,
+      mappable_type: 'Topic'
+    })
+    Metamaps.Mappings.add(mapping)
+
+    // this function also includes the creation of the topic in the database
+    Metamaps.Topic.renderTopic(mapping, topic, true, true)
+
+    Metamaps.Famous.viz.hideInstructions()
+  },
+
+  createSynapseWithParameters: function (description, category, permission,
+    topic1, topic2) {
+    var node1 = topic1.get('node')
+    var node2 = topic2.get('node')
+
+    if (!topic1.id || !topic2.id) {
+      console.error('missing topic id when creating synapse')
+      return
+    } // if
+
+    var synapse = new Metamaps.Backbone.Synapse({
+      desc: description,
+      category: category,
+      permission: permission,
+      node1_id: topic1.id,
+      node2_id: topic2.id
+    })
+    Metamaps.Synapses.add(synapse)
+
+    var mapping = new Metamaps.Backbone.Mapping({
+      mappable_type: 'Synapse',
+      mappable_id: synapse.cid
+    })
+    Metamaps.Mappings.add(mapping)
+
+    Metamaps.Synapse.renderSynapse(mapping, synapse, node1, node2, true)
+  }
+}
+
+module.exports = Metamaps.Import

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

@@ -0,0 +1,78 @@
+/* global Metamaps, $ */
+
+/*
+ * Metamaps.Listeners.js.erb
+ *
+ * Dependencies:
+ *  - Metamaps.Active
+ *  - Metamaps.Control
+ *  - Metamaps.JIT
+ *  - Metamaps.Visualize
+ */
+Metamaps.Listeners = {
+  init: function () {
+    $(document).on('keydown', function (e) {
+      if (!(Metamaps.Active.Map || Metamaps.Active.Topic)) return
+
+      switch (e.which) {
+        case 13: // if enter key is pressed
+          Metamaps.JIT.enterKeyHandler()
+          e.preventDefault()
+          break
+        case 27: // if esc key is pressed
+          Metamaps.JIT.escKeyHandler()
+          break
+        case 65: // if a or A is pressed
+          if (e.ctrlKey) {
+            Metamaps.Control.deselectAllNodes()
+            Metamaps.Control.deselectAllEdges()
+
+            e.preventDefault()
+            Metamaps.Visualize.mGraph.graph.eachNode(function (n) {
+              Metamaps.Control.selectNode(n, e)
+            })
+
+            Metamaps.Visualize.mGraph.plot()
+          }
+
+          break
+        case 69: // if e or E is pressed
+          if (e.ctrlKey) {
+            e.preventDefault()
+            if (Metamaps.Active.Map) {
+              Metamaps.JIT.zoomExtents(null, Metamaps.Visualize.mGraph.canvas)
+            }
+          }
+          break
+        case 77: // if m or M is pressed
+          if (e.ctrlKey) {
+            e.preventDefault()
+            Metamaps.Control.removeSelectedNodes()
+            Metamaps.Control.removeSelectedEdges()
+          }
+          break
+        case 68: // if d or D is pressed
+          if (e.ctrlKey) {
+            e.preventDefault()
+            Metamaps.Control.deleteSelected()
+          }
+          break
+        case 72: // if h or H is pressed
+          if (e.ctrlKey) {
+            e.preventDefault()
+            Metamaps.Control.hideSelectedNodes()
+            Metamaps.Control.hideSelectedEdges()
+          }
+          break
+        default:
+          break; // alert(e.which)
+      }
+    })
+
+    $(window).resize(function () {
+      if (Metamaps.Visualize && Metamaps.Visualize.mGraph) Metamaps.Visualize.mGraph.canvas.resize($(window).width(), $(window).height())
+      if ((Metamaps.Active.Map || Metamaps.Active.Topic) && Metamaps.Famous && Metamaps.Famous.maps.surf) Metamaps.Famous.maps.reposition()
+      if (Metamaps.Active.Map && Metamaps.Realtime.inConversation) Metamaps.Realtime.positionVideos()
+    })
+  }
+}; // end Metamaps.Listeners

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

@@ -0,0 +1,763 @@
+/* global Metamaps, $ */
+
+/*
+ * Metamaps.Map.js.erb
+ *
+ * Dependencies:
+ *  - Metamaps.Create
+ *  - Metamaps.Erb
+ *  - Metamaps.Filter
+ *  - Metamaps.JIT
+ *  - Metamaps.Loading
+ *  - Metamaps.Maps
+ *  - Metamaps.Realtime
+ *  - Metamaps.Router
+ *  - Metamaps.Selected
+ *  - Metamaps.SynapseCard
+ *  - Metamaps.TopicCard
+ *  - Metamaps.Visualize
+ *  - Metamaps.Active
+ *  - Metamaps.Backbone
+ *  - Metamaps.GlobalUI
+ *  - Metamaps.Mappers
+ *  - Metamaps.Mappings
+ *  - Metamaps.Messages
+ *  - Metamaps.Synapses
+ *  - Metamaps.Topics
+ *
+ * Major sub-modules:
+ *  - Metamaps.Map.CheatSheet
+ *  - Metamaps.Map.InfoBox
+ */
+
+Metamaps.Map = {
+  events: {
+    editedByActiveMapper: 'Metamaps:Map:events:editedByActiveMapper'
+  },
+  nextX: 0,
+  nextY: 0,
+  sideLength: 1,
+  turnCount: 0,
+  nextXshift: 1,
+  nextYshift: 0,
+  timeToTurn: 0,
+  init: function () {
+    var self = Metamaps.Map
+
+    // prevent right clicks on the main canvas, so as to not get in the way of our right clicks
+    $('#center-container').bind('contextmenu', function (e) {
+      return false
+    })
+
+    $('.sidebarFork').click(function () {
+      self.fork()
+    })
+
+    Metamaps.GlobalUI.CreateMap.emptyForkMapForm = $('#fork_map').html()
+
+    self.InfoBox.init()
+    self.CheatSheet.init()
+
+    $(document).on(Metamaps.Map.events.editedByActiveMapper, self.editedByActiveMapper)
+  },
+  launch: function (id) {
+    var bb = Metamaps.Backbone
+    var start = function (data) {
+      Metamaps.Active.Map = new bb.Map(data.map)
+      Metamaps.Mappers = new bb.MapperCollection(data.mappers)
+      Metamaps.Collaborators = new bb.MapperCollection(data.collaborators)
+      Metamaps.Topics = new bb.TopicCollection(data.topics)
+      Metamaps.Synapses = new bb.SynapseCollection(data.synapses)
+      Metamaps.Mappings = new bb.MappingCollection(data.mappings)
+      Metamaps.Messages = data.messages
+      Metamaps.Backbone.attachCollectionEvents()
+
+      var map = Metamaps.Active.Map
+      var mapper = Metamaps.Active.Mapper
+
+      // add class to .wrapper for specifying whether you can edit the map
+      if (map.authorizeToEdit(mapper)) {
+        $('.wrapper').addClass('canEditMap')
+      }
+
+      // add class to .wrapper for specifying if the map can
+      // be collaborated on
+      if (map.get('permission') === 'commons') {
+        $('.wrapper').addClass('commonsMap')
+      }
+
+      // set filter mapper H3 text
+      $('#filter_by_mapper h3').html('MAPPERS')
+
+      // build and render the visualization
+      Metamaps.Visualize.type = 'ForceDirected'
+      Metamaps.JIT.prepareVizData()
+
+      // update filters
+      Metamaps.Filter.reset()
+
+      // reset selected arrays
+      Metamaps.Selected.reset()
+
+      // set the proper mapinfobox content
+      Metamaps.Map.InfoBox.load()
+
+      // these three update the actual filter box with the right list items
+      Metamaps.Filter.checkMetacodes()
+      Metamaps.Filter.checkSynapses()
+      Metamaps.Filter.checkMappers()
+
+      Metamaps.Realtime.startActiveMap()
+      Metamaps.Loading.hide()
+    }
+
+    $.ajax({
+      url: '/maps/' + id + '/contains.json',
+      success: start
+    })
+  },
+  end: function () {
+    if (Metamaps.Active.Map) {
+      $('.wrapper').removeClass('canEditMap commonsMap')
+      Metamaps.Map.resetSpiral()
+
+      $('.rightclickmenu').remove()
+      Metamaps.TopicCard.hideCard()
+      Metamaps.SynapseCard.hideCard()
+      Metamaps.Create.newTopic.hide()
+      Metamaps.Create.newSynapse.hide()
+      Metamaps.Filter.close()
+      Metamaps.Map.InfoBox.close()
+      Metamaps.Realtime.endActiveMap()
+    }
+  },
+  fork: function () {
+    Metamaps.GlobalUI.openLightbox('forkmap')
+
+    var nodes_data = '',
+      synapses_data = ''
+    var nodes_array = []
+    var synapses_array = []
+    // collect the unfiltered topics
+    Metamaps.Visualize.mGraph.graph.eachNode(function (n) {
+      // if the opacity is less than 1 then it's filtered
+      if (n.getData('alpha') === 1) {
+        var id = n.getData('topic').id
+        nodes_array.push(id)
+        var x, y
+        if (n.pos.x && n.pos.y) {
+          x = n.pos.x
+          y = n.pos.y
+        } else {
+          var x = Math.cos(n.pos.theta) * n.pos.rho
+          var y = Math.sin(n.pos.theta) * n.pos.rho
+        }
+        nodes_data += id + '/' + x + '/' + y + ','
+      }
+    })
+    // collect the unfiltered synapses
+    Metamaps.Synapses.each(function (synapse) {
+      var desc = synapse.get('desc')
+
+      var descNotFiltered = Metamaps.Filter.visible.synapses.indexOf(desc) > -1
+      // make sure that both topics are being added, otherwise, it
+      // doesn't make sense to add the synapse
+      var topicsNotFiltered = nodes_array.indexOf(synapse.get('node1_id')) > -1
+      topicsNotFiltered = topicsNotFiltered && nodes_array.indexOf(synapse.get('node2_id')) > -1
+      if (descNotFiltered && topicsNotFiltered) {
+        synapses_array.push(synapse.id)
+      }
+    })
+
+    synapses_data = synapses_array.join()
+    nodes_data = nodes_data.slice(0, -1)
+
+    Metamaps.GlobalUI.CreateMap.topicsToMap = nodes_data
+    Metamaps.GlobalUI.CreateMap.synapsesToMap = synapses_data
+  },
+  leavePrivateMap: function () {
+    var map = Metamaps.Active.Map
+    Metamaps.Maps.Active.remove(map)
+    Metamaps.Maps.Featured.remove(map)
+    Metamaps.Router.home()
+    Metamaps.GlobalUI.notifyUser('Sorry! That map has been changed to Private.')
+  },
+  cantEditNow: function () {
+    Metamaps.Realtime.turnOff(true); // true is for 'silence'
+    Metamaps.GlobalUI.notifyUser('Map was changed to Public. Editing is disabled.')
+    Metamaps.Active.Map.trigger('changeByOther')
+  },
+  canEditNow: function () {
+    var confirmString = "You've been granted permission to edit this map. "
+    confirmString += 'Do you want to reload and enable realtime collaboration?'
+    var c = confirm(confirmString)
+    if (c) {
+      Metamaps.Router.maps(Metamaps.Active.Map.id)
+    }
+  },
+  editedByActiveMapper: function () {
+    if (Metamaps.Active.Mapper) {
+      Metamaps.Mappers.add(Metamaps.Active.Mapper)
+    }
+  },
+  getNextCoord: function () {
+    var self = Metamaps.Map
+    var nextX = self.nextX
+    var nextY = self.nextY
+
+    var DISTANCE_BETWEEN = 120
+
+    self.nextX = self.nextX + DISTANCE_BETWEEN * self.nextXshift
+    self.nextY = self.nextY + DISTANCE_BETWEEN * self.nextYshift
+
+    self.timeToTurn += 1
+    // if true, it's time to turn
+    if (self.timeToTurn === self.sideLength) {
+      self.turnCount += 1
+      // if true, it's time to increase side length
+      if (self.turnCount % 2 === 0) {
+        self.sideLength += 1
+      }
+      self.timeToTurn = 0
+
+      // going right? turn down
+      if (self.nextXshift == 1 && self.nextYshift == 0) {
+        self.nextXshift = 0
+        self.nextYshift = 1
+      }
+      // going down? turn left
+      else if (self.nextXshift == 0 && self.nextYshift == 1) {
+        self.nextXshift = -1
+        self.nextYshift = 0
+      }
+      // going left? turn up
+      else if (self.nextXshift == -1 && self.nextYshift == 0) {
+        self.nextXshift = 0
+        self.nextYshift = -1
+      }
+      // going up? turn right
+      else if (self.nextXshift == 0 && self.nextYshift == -1) {
+        self.nextXshift = 1
+        self.nextYshift = 0
+      }
+    }
+
+    return {
+      x: nextX,
+      y: nextY
+    }
+  },
+  resetSpiral: function () {
+    Metamaps.Map.nextX = 0
+    Metamaps.Map.nextY = 0
+    Metamaps.Map.nextXshift = 1
+    Metamaps.Map.nextYshift = 0
+    Metamaps.Map.sideLength = 1
+    Metamaps.Map.timeToTurn = 0
+    Metamaps.Map.turnCount = 0
+  },
+  exportImage: function () {
+    var canvas = {}
+
+    canvas.canvas = document.createElement('canvas')
+    canvas.canvas.width = 1880 // 960
+    canvas.canvas.height = 1260 // 630
+
+    canvas.scaleOffsetX = 1
+    canvas.scaleOffsetY = 1
+    canvas.translateOffsetY = 0
+    canvas.translateOffsetX = 0
+    canvas.denySelected = true
+
+    canvas.getSize = function () {
+      if (this.size) return this.size
+      var canvas = this.canvas
+      return this.size = {
+        width: canvas.width,
+        height: canvas.height
+      }
+    }
+    canvas.scale = function (x, y) {
+      var px = this.scaleOffsetX * x,
+        py = this.scaleOffsetY * y
+      var dx = this.translateOffsetX * (x - 1) / px,
+        dy = this.translateOffsetY * (y - 1) / py
+      this.scaleOffsetX = px
+      this.scaleOffsetY = py
+      this.getCtx().scale(x, y)
+      this.translate(dx, dy)
+    }
+    canvas.translate = function (x, y) {
+      var sx = this.scaleOffsetX,
+        sy = this.scaleOffsetY
+      this.translateOffsetX += x * sx
+      this.translateOffsetY += y * sy
+      this.getCtx().translate(x, y)
+    }
+    canvas.getCtx = function () {
+      return this.canvas.getContext('2d')
+    }
+    // center it
+    canvas.getCtx().translate(1880 / 2, 1260 / 2)
+
+    var mGraph = Metamaps.Visualize.mGraph
+
+    var id = mGraph.root
+    var root = mGraph.graph.getNode(id)
+    var T = !!root.visited
+
+    // pass true to avoid basing it on a selection
+    Metamaps.JIT.zoomExtents(null, canvas, true)
+
+    var c = canvas.canvas,
+      ctx = canvas.getCtx(),
+      scale = canvas.scaleOffsetX
+
+    // draw a grey background
+    ctx.fillStyle = '#d8d9da'
+    var xPoint = (-(c.width / scale) / 2) - (canvas.translateOffsetX / scale),
+      yPoint = (-(c.height / scale) / 2) - (canvas.translateOffsetY / scale)
+    ctx.fillRect(xPoint, yPoint, c.width / scale, c.height / scale)
+
+    // draw the graph
+    mGraph.graph.eachNode(function (node) {
+      var nodeAlpha = node.getData('alpha')
+      node.eachAdjacency(function (adj) {
+        var nodeTo = adj.nodeTo
+        if (!!nodeTo.visited === T && node.drawn && nodeTo.drawn) {
+          mGraph.fx.plotLine(adj, canvas)
+        }
+      })
+      if (node.drawn) {
+        mGraph.fx.plotNode(node, canvas)
+      }
+      if (!mGraph.labelsHidden) {
+        if (node.drawn && nodeAlpha >= 0.95) {
+          mGraph.labels.plotLabel(canvas, node)
+        } else {
+          mGraph.labels.hideLabel(node, false)
+        }
+      }
+      node.visited = !T
+    })
+
+    var imageData = {
+      encoded_image: canvas.canvas.toDataURL()
+    }
+
+    var map = Metamaps.Active.Map
+
+    var today = new Date()
+    var dd = today.getDate()
+    var mm = today.getMonth() + 1; // January is 0!
+    var yyyy = today.getFullYear()
+    if (dd < 10) {
+      dd = '0' + dd
+    }
+    if (mm < 10) {
+      mm = '0' + mm
+    }
+    today = mm + '/' + dd + '/' + yyyy
+
+    var mapName = map.get('name').split(' ').join([separator = '-'])
+    var downloadMessage = ''
+    downloadMessage += 'Captured map screenshot! '
+    downloadMessage += "<a href='" + imageData.encoded_image + "' "
+    downloadMessage += "download='metamap-" + map.id + '-' + mapName + '-' + today + ".png'>DOWNLOAD</a>"
+    Metamaps.GlobalUI.notifyUser(downloadMessage)
+
+    $.ajax({
+      type: 'POST',
+      dataType: 'json',
+      url: '/maps/' + Metamaps.Active.Map.id + '/upload_screenshot',
+      data: imageData,
+      success: function (data) {
+        console.log('successfully uploaded map screenshot')
+      },
+      error: function () {
+        console.log('failed to save map screenshot')
+      }
+    })
+  }
+}
+
+/*
+ *
+ *   CHEATSHEET
+ *
+ */
+Metamaps.Map.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')
+    })
+  }
+}; // end Metamaps.Map.CheatSheet
+
+/*
+ *
+ *   INFOBOX
+ *
+ */
+Metamaps.Map.InfoBox = {
+  isOpen: false,
+  changing: false,
+  selectingPermission: false,
+  changePermissionText: "<div class='tooltips'>As the creator, you can change the permission of this map, and the permission of all the topics and synapses you have authority to change will change as well.</div>",
+  nameHTML: '<span class="best_in_place best_in_place_name" id="best_in_place_map_{{id}}_name" data-url="/maps/{{id}}" data-object="map" data-attribute="name" data-type="textarea" data-activator="#mapInfoName">{{name}}</span>',
+  descHTML: '<span class="best_in_place best_in_place_desc" id="best_in_place_map_{{id}}_desc" data-url="/maps/{{id}}" data-object="map" data-attribute="desc" data-nil="Click to add description..." data-type="textarea" data-activator="#mapInfoDesc">{{desc}}</span>',
+  init: function () {
+    var self = Metamaps.Map.InfoBox
+
+    $('.mapInfoIcon').click(self.toggleBox)
+    $('.mapInfoBox').click(function (event) {
+      event.stopPropagation()
+    })
+    $('body').click(self.close)
+
+    self.attachEventListeners()
+
+    
+
+    self.generateBoxHTML = Hogan.compile($('#mapInfoBoxTemplate').html())
+  },
+  toggleBox: function (event) {
+    var self = Metamaps.Map.InfoBox
+
+    if (self.isOpen) self.close()
+    else self.open()
+
+    event.stopPropagation()
+  },
+  open: function () {
+    var self = Metamaps.Map.InfoBox
+    $('.mapInfoIcon div').addClass('hide')
+    if (!self.isOpen && !self.changing) {
+      self.changing = true
+      $('.mapInfoBox').fadeIn(200, function () {
+        self.changing = false
+        self.isOpen = true
+      })
+    }
+  },
+  close: function () {
+    var self = Metamaps.Map.InfoBox
+
+    $('.mapInfoIcon div').removeClass('hide')
+    if (!self.changing) {
+      self.changing = true
+      $('.mapInfoBox').fadeOut(200, function () {
+        self.changing = false
+        self.isOpen = false
+        self.hidePermissionSelect()
+        $('.mapContributors .tip').hide()
+      })
+    }
+  },
+  load: function () {
+    var self = Metamaps.Map.InfoBox
+
+    var map = Metamaps.Active.Map
+
+    var obj = map.pick('permission', 'topic_count', 'synapse_count')
+
+    var isCreator = map.authorizePermissionChange(Metamaps.Active.Mapper)
+    var canEdit = map.authorizeToEdit(Metamaps.Active.Mapper)
+    var relevantPeople = map.get('permission') === 'commons' ? Metamaps.Mappers : Metamaps.Collaborators
+    var shareable = map.get('permission') !== 'private'
+
+    obj['name'] = canEdit ? Hogan.compile(self.nameHTML).render({id: map.id, name: map.get('name')}) : map.get('name')
+    obj['desc'] = canEdit ? Hogan.compile(self.descHTML).render({id: map.id, desc: map.get('desc')}) : map.get('desc')
+    obj['map_creator_tip'] = isCreator ? self.changePermissionText : ''
+
+    obj['contributor_count'] = relevantPeople.length
+    obj['contributors_class'] = relevantPeople.length > 1 ? 'multiple' : ''
+    obj['contributors_class'] += relevantPeople.length === 2 ? ' mTwo' : ''
+    obj['contributor_image'] = relevantPeople.length > 0 ? relevantPeople.models[0].get('image') : Metamaps.Erb['user.png']
+    obj['contributor_list'] = self.createContributorList()
+
+    obj['user_name'] = isCreator ? 'You' : map.get('user_name')
+    obj['created_at'] = map.get('created_at_clean')
+    obj['updated_at'] = map.get('updated_at_clean')
+
+    var classes = isCreator ? 'yourMap' : ''
+    classes += canEdit ? ' canEdit' : ''
+    classes += shareable ? ' shareable' : ''
+    $('.mapInfoBox').removeClass('shareable yourMap canEdit')
+      .addClass(classes)
+      .html(self.generateBoxHTML.render(obj))
+
+    self.attachEventListeners()
+  },
+  attachEventListeners: function () {
+    var self = Metamaps.Map.InfoBox
+
+    $('.mapInfoBox.canEdit .best_in_place').best_in_place()
+
+    // because anyone who can edit the map can change the map title
+    var bipName = $('.mapInfoBox .best_in_place_name')
+    bipName.unbind('best_in_place:activate').bind('best_in_place:activate', function () {
+      var $el = bipName.find('textarea')
+      var el = $el[0]
+
+      $el.attr('maxlength', '140')
+
+      $('.mapInfoName').append('<div class="nameCounter forMap"></div>')
+
+      var callback = function (data) {
+        $('.nameCounter.forMap').html(data.all + '/140')
+      }
+      Countable.live(el, callback)
+    })
+    bipName.unbind('best_in_place:deactivate').bind('best_in_place:deactivate', function () {
+      $('.nameCounter.forMap').remove()
+    })
+
+    $('.mapInfoName .best_in_place_name').unbind('ajax:success').bind('ajax:success', function () {
+      var name = $(this).html()
+      Metamaps.Active.Map.set('name', name)
+      Metamaps.Active.Map.trigger('saved')
+    })
+
+    $('.mapInfoDesc .best_in_place_desc').unbind('ajax:success').bind('ajax:success', function () {
+      var desc = $(this).html()
+      Metamaps.Active.Map.set('desc', desc)
+      Metamaps.Active.Map.trigger('saved')
+    })
+
+    $('.yourMap .mapPermission').unbind().click(self.onPermissionClick)
+    // .yourMap in the unbind/bind is just a namespace for the events
+    // not a reference to the class .yourMap on the .mapInfoBox
+    $('.mapInfoBox.yourMap').unbind('.yourMap').bind('click.yourMap', self.hidePermissionSelect)
+
+    $('.yourMap .mapInfoDelete').unbind().click(self.deleteActiveMap)
+
+    $('.mapContributors span, #mapContribs').unbind().click(function (event) {
+      $('.mapContributors .tip').toggle()
+      event.stopPropagation()
+    })
+    $('.mapContributors .tip').unbind().click(function (event) {
+      event.stopPropagation()
+    })
+    $('.mapContributors .tip li a').click(Metamaps.Router.intercept)
+
+    $('.mapInfoBox').unbind('.hideTip').bind('click.hideTip', function () {
+      $('.mapContributors .tip').hide()
+    })
+
+    self.addTypeahead() 
+  },
+  addTypeahead: function () {
+    var self = Metamaps.Map.InfoBox
+
+    if (!Metamaps.Active.Map) return
+
+    // for autocomplete
+    var collaborators = {
+        name: 'collaborators',
+        limit: 9999,
+        display: function(s) { return s.label; },
+        templates: {
+            notFound: function(s) {
+                return Hogan.compile($('#collaboratorSearchTemplate').html()).render({
+                    value: "No results",
+                    label: "No results",
+                    rtype: "noresult",
+                    profile: Metamaps.Erb['user.png'],
+                });
+            },
+            suggestion: function(s) {
+                return Hogan.compile($('#collaboratorSearchTemplate').html()).render(s);
+            },
+        },
+        source: new Bloodhound({
+            datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
+            queryTokenizer: Bloodhound.tokenizers.whitespace,
+            remote: {
+                url: '/search/mappers?term=%QUERY',
+                wildcard: '%QUERY',
+            },
+        })
+    }
+
+    // for adding map collaborators, who will have edit rights
+    if (Metamaps.Active.Mapper && Metamaps.Active.Mapper.id === Metamaps.Active.Map.get('user_id')) {
+      $('.collaboratorSearchField').typeahead(
+        {
+          highlight: false,
+        },
+        [collaborators]
+      )
+      $('.collaboratorSearchField').bind('typeahead:select', self.handleResultClick)
+      $('.mapContributors .removeCollaborator').click(function () {
+        self.removeCollaborator(parseInt($(this).data('id')))
+      })
+    } 
+  },
+  removeCollaborator: function (collaboratorId) {
+    var self = Metamaps.Map.InfoBox
+    Metamaps.Collaborators.remove(Metamaps.Collaborators.get(collaboratorId))
+    var mapperIds = Metamaps.Collaborators.models.map(function (mapper) { return mapper.id })
+    $.post('/maps/' + Metamaps.Active.Map.id + '/access', { access: mapperIds })
+    self.updateNumbers()
+  },
+  addCollaborator: function (newCollaboratorId) {
+    var self = Metamaps.Map.InfoBox
+
+    if (Metamaps.Collaborators.get(newCollaboratorId)) {
+      Metamaps.GlobalUI.notifyUser('That user already has access')
+      return
+    }
+
+    function callback(mapper) {
+      Metamaps.Collaborators.add(mapper)
+      var mapperIds = Metamaps.Collaborators.models.map(function (mapper) { return mapper.id })
+      $.post('/maps/' + Metamaps.Active.Map.id + '/access', { access: mapperIds })
+      var name =  Metamaps.Collaborators.get(newCollaboratorId).get('name')
+      Metamaps.GlobalUI.notifyUser(name + ' will be notified by email')
+      self.updateNumbers()
+    }
+
+    $.getJSON('/users/' + newCollaboratorId + '.json', callback)
+  },
+  handleResultClick: function (event, item) {
+    var self = Metamaps.Map.InfoBox
+
+   self.addCollaborator(item.id)
+   $('.collaboratorSearchField').typeahead('val', '')
+  },
+  updateNameDescPerm: function (name, desc, perm) {
+    $('.mapInfoName .best_in_place_name').html(name)
+    $('.mapInfoDesc .best_in_place_desc').html(desc)
+    $('.mapInfoBox .mapPermission').removeClass('commons public private').addClass(perm)
+  },
+  createContributorList: function () {
+    var self = Metamaps.Map.InfoBox
+    var relevantPeople = Metamaps.Active.Map.get('permission') === 'commons' ? Metamaps.Mappers : Metamaps.Collaborators
+    var activeMapperIsCreator = Metamaps.Active.Mapper && Metamaps.Active.Mapper.id === Metamaps.Active.Map.get('user_id')
+    var string = ''
+    string += '<ul>'
+
+    relevantPeople.each(function (m) {
+      var isCreator = Metamaps.Active.Map.get('user_id') === m.get('id')
+      string += '<li><a href="/explore/mapper/' + m.get('id') + '">' + '<img class="rtUserImage" width="25" height="25" src="' + m.get('image') + '" />' + m.get('name')
+      if (isCreator) string += ' (creator)' 
+      string += '</a>'
+      if (activeMapperIsCreator && !isCreator) string += '<span class="removeCollaborator" data-id="' + m.get('id') + '"></span>'
+      string += '</li>'
+    })
+
+    string += '</ul>'
+
+    if (activeMapperIsCreator) {
+      string += '<div class="collabSearchField"><span class="addCollab"></span><input class="collaboratorSearchField" placeholder="Add a collaborator!"></input></div>'
+    }
+    return string
+  },
+  updateNumbers: function () {
+    var self = Metamaps.Map.InfoBox
+    var mapper = Metamaps.Active.Mapper
+    var relevantPeople = Metamaps.Active.Map.get('permission') === 'commons' ? Metamaps.Mappers : Metamaps.Collaborators
+
+    var contributors_class = ''
+    if (relevantPeople.length === 2) contributors_class = 'multiple mTwo'
+    else if (relevantPeople.length > 2) contributors_class = 'multiple'
+
+    var contributors_image = Metamaps.Erb['user.png']
+    if (relevantPeople.length > 0) {
+      // get the first contributor and use their image
+      contributors_image = relevantPeople.models[0].get('image')
+    }
+    $('.mapContributors img').attr('src', contributors_image).removeClass('multiple mTwo').addClass(contributors_class)
+    $('.mapContributors span').text(relevantPeople.length)
+    $('.mapContributors .tip').html(self.createContributorList())
+    self.addTypeahead()
+    $('.mapContributors .tip').unbind().click(function (event) {
+      event.stopPropagation()
+    })
+    $('.mapTopics').text(Metamaps.Topics.length)
+    $('.mapSynapses').text(Metamaps.Synapses.length)
+
+    $('.mapEditedAt').html('<span>Last edited: </span>' + Metamaps.Util.nowDateFormatted())
+  },
+  onPermissionClick: function (event) {
+    var self = Metamaps.Map.InfoBox
+
+    if (!self.selectingPermission) {
+      self.selectingPermission = true
+      $(this).addClass('minimize') // this line flips the drop down arrow to a pull up arrow
+      if ($(this).hasClass('commons')) {
+        $(this).append('<ul class="permissionSelect"><li class="public"></li><li class="private"></li></ul>')
+      } else if ($(this).hasClass('public')) {
+        $(this).append('<ul class="permissionSelect"><li class="commons"></li><li class="private"></li></ul>')
+      } else if ($(this).hasClass('private')) {
+        $(this).append('<ul class="permissionSelect"><li class="commons"></li><li class="public"></li></ul>')
+      }
+      $('.mapPermission .permissionSelect li').click(self.selectPermission)
+      event.stopPropagation()
+    }
+  },
+  hidePermissionSelect: function () {
+    var self = Metamaps.Map.InfoBox
+
+    self.selectingPermission = false
+    $('.mapPermission').removeClass('minimize') // this line flips the pull up arrow to a drop down arrow
+    $('.mapPermission .permissionSelect').remove()
+  },
+  selectPermission: function (event) {
+    var self = Metamaps.Map.InfoBox
+
+    self.selectingPermission = false
+    var permission = $(this).attr('class')
+    Metamaps.Active.Map.save({
+      permission: permission
+    })
+    Metamaps.Active.Map.updateMapWrapper()
+    shareable = permission === 'private' ? '' : 'shareable'
+    $('.mapPermission').removeClass('commons public private minimize').addClass(permission)
+    $('.mapPermission .permissionSelect').remove()
+    $('.mapInfoBox').removeClass('shareable').addClass(shareable)
+    event.stopPropagation()
+  },
+  deleteActiveMap: function () {
+    var confirmString = 'Are you sure you want to delete this map? '
+    confirmString += 'This action is irreversible. It will not delete the topics and synapses on the map.'
+
+    var doIt = confirm(confirmString)
+    var map = Metamaps.Active.Map
+    var mapper = Metamaps.Active.Mapper
+    var authorized = map.authorizePermissionChange(mapper)
+
+    if (doIt && authorized) {
+      Metamaps.Map.InfoBox.close()
+      Metamaps.Maps.Active.remove(map)
+      Metamaps.Maps.Featured.remove(map)
+      Metamaps.Maps.Mine.remove(map)
+      Metamaps.Maps.Shared.remove(map)
+      map.destroy()
+      Metamaps.Router.home()
+      Metamaps.GlobalUI.notifyUser('Map eliminated!')
+    }
+    else if (!authorized) {
+      alert("Hey now. We can't just go around willy nilly deleting other people's maps now can we? Run off and find something constructive to do, eh?")
+    }
+  }
+}; // end Metamaps.Map.InfoBox

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

@@ -0,0 +1,20 @@
+/* global Metamaps, $ */
+
+/*
+ * Metamaps.Mapper.js.erb
+ *
+ * Dependencies: none!
+ */
+
+Metamaps.Mapper = {
+  // this function is to retrieve a mapper JSON object from the database
+  // @param id = the id of the mapper to retrieve
+  get: function (id, callback) {
+    return $.ajax({
+      url: '/users/' + id + '.json',
+      success: function (data) {
+        callback(new Metamaps.Backbone.Mapper(data))
+      }
+    })
+  }
+}; // end Metamaps.Mapper

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

@@ -0,0 +1,117 @@
+/* global Metamaps, $ */
+
+/*
+ * Metamaps.Organize.js.erb
+ *
+ * Dependencies:
+ *  - Metamaps.Visualize
+ */
+Metamaps.Organize = {
+  init: function () {},
+  arrange: function (layout, centerNode) {
+    // first option for layout to implement is 'grid', will do an evenly spaced grid with its center at the 0,0 origin
+    if (layout == 'grid') {
+      var numNodes = _.size(Metamaps.Visualize.mGraph.graph.nodes); // this will always be an integer, the # of nodes on your graph visualization
+      var numColumns = Math.floor(Math.sqrt(numNodes)) // the number of columns to make an even grid
+      var GRIDSPACE = 400
+      var row = 0
+      var column = 0
+      Metamaps.Visualize.mGraph.graph.eachNode(function (n) {
+        if (column == numColumns) {
+          column = 0
+          row += 1
+        }
+        var newPos = new $jit.Complex()
+        newPos.x = column * GRIDSPACE
+        newPos.y = row * GRIDSPACE
+        n.setPos(newPos, 'end')
+        column += 1
+      })
+      Metamaps.Visualize.mGraph.animate(Metamaps.JIT.ForceDirected.animateSavedLayout)
+    } else if (layout == 'grid_full') {
+      // this will always be an integer, the # of nodes on your graph visualization
+      var numNodes = _.size(Metamaps.Visualize.mGraph.graph.nodes)
+      // var numColumns = Math.floor(Math.sqrt(numNodes)) // the number of columns to make an even grid
+      // var GRIDSPACE = 400
+      var height = Metamaps.Visualize.mGraph.canvas.getSize(0).height
+      var width = Metamaps.Visualize.mGraph.canvas.getSize(0).width
+      var totalArea = height * width
+      var cellArea = totalArea / numNodes
+      var ratio = height / width
+      var cellWidth = sqrt(cellArea / ratio)
+      var cellHeight = cellArea / cellWidth
+      var row = floor(height / cellHeight)
+      var column = floor(width / cellWidth)
+      var totalCells = row * column
+
+      if (totalCells)
+        Metamaps.Visualize.mGraph.graph.eachNode(function (n) {
+          if (column == numColumns) {
+            column = 0
+            row += 1
+          }
+          var newPos = new $jit.Complex()
+          newPos.x = column * GRIDSPACE
+          newPos.y = row * GRIDSPACE
+          n.setPos(newPos, 'end')
+          column += 1
+        })
+      Metamaps.Visualize.mGraph.animate(Metamaps.JIT.ForceDirected.animateSavedLayout)
+    } else if (layout == 'radial') {
+      var centerX = centerNode.getPos().x
+      var centerY = centerNode.getPos().y
+      centerNode.setPos(centerNode.getPos(), 'end')
+
+      console.log(centerNode.adjacencies)
+      var lineLength = 200
+      var usedNodes = {}
+      usedNodes[centerNode.id] = centerNode
+      var radial = function (node, level, degree) {
+        if (level == 1) {
+          var numLinksTemp = _.size(node.adjacencies)
+          var angleTemp = 2 * Math.PI / numLinksTemp
+        } else {
+          angleTemp = 2 * Math.PI / 20
+        }
+        node.eachAdjacency(function (a) {
+          var isSecondLevelNode = (centerNode.adjacencies[a.nodeTo.id] != undefined && level > 1)
+          if (usedNodes[a.nodeTo.id] == undefined && !isSecondLevelNode) {
+            var newPos = new $jit.Complex()
+            newPos.x = level * lineLength * Math.sin(degree) + centerX
+            newPos.y = level * lineLength * Math.cos(degree) + centerY
+            a.nodeTo.setPos(newPos, 'end')
+            usedNodes[a.nodeTo.id] = a.nodeTo
+
+            radial(a.nodeTo, level + 1, degree)
+            degree += angleTemp
+          }
+        })
+      }
+      radial(centerNode, 1, 0)
+      Metamaps.Visualize.mGraph.animate(Metamaps.JIT.ForceDirected.animateSavedLayout)
+    } else if (layout == 'center_viewport') {
+      var lowX = 0,
+        lowY = 0,
+        highX = 0,
+        highY = 0
+      var oldOriginX = Metamaps.Visualize.mGraph.canvas.translateOffsetX
+      var oldOriginY = Metamaps.Visualize.mGraph.canvas.translateOffsetY
+
+      Metamaps.Visualize.mGraph.graph.eachNode(function (n) {
+        if (n.id === 1) {
+          lowX = n.getPos().x
+          lowY = n.getPos().y
+          highX = n.getPos().x
+          highY = n.getPos().y
+        }
+        if (n.getPos().x < lowX) lowX = n.getPos().x
+        if (n.getPos().y < lowY) lowY = n.getPos().y
+        if (n.getPos().x > highX) highX = n.getPos().x
+        if (n.getPos().y > highY) highY = n.getPos().y
+      })
+      console.log(lowX, lowY, highX, highY)
+      var newOriginX = (lowX + highX) / 2
+      var newOriginY = (lowY + highY) / 2
+    } else alert('please call function with a valid layout dammit!')
+  }
+}; // end Metamaps.Organize

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

@@ -0,0 +1,270 @@
+/* global Metamaps, Backbone, $ */
+
+/*
+ * Metamaps.Router.js.erb
+ *
+ * Dependencies:
+ *  - Metamaps.Active
+ *  - Metamaps.Famous
+ *  - Metamaps.GlobalUI
+ *  - Metamaps.JIT
+ *  - Metamaps.Loading
+ *  - Metamaps.Map
+ *  - Metamaps.Maps
+ *  - Metamaps.Topic
+ *  - Metamaps.Views
+ *  - Metamaps.Visualize
+ */
+
+;(function () {
+  var Router = Backbone.Router.extend({
+    routes: {
+      '': 'home', // #home
+      'explore/:section': 'explore', // #explore/active
+      'explore/:section/:id': 'explore', // #explore/mapper/1234
+      'maps/:id': 'maps' // #maps/7
+    },
+    home: function () {
+      clearTimeout(Metamaps.Router.timeoutId)
+
+      if (Metamaps.Active.Mapper) document.title = 'Explore Active Maps | Metamaps'
+      else document.title = 'Home | Metamaps'
+
+      Metamaps.Router.currentSection = ''
+      Metamaps.Router.currentPage = ''
+      $('.wrapper').removeClass('mapPage topicPage')
+
+      var classes = Metamaps.Active.Mapper ? 'homePage explorePage' : 'homePage'
+      $('.wrapper').addClass(classes)
+
+      var navigate = function () {
+        Metamaps.Router.timeoutId = setTimeout(function () {
+          Metamaps.Router.navigate('')
+        }, 300)
+      }
+      // all this only for the logged in home page
+      if (Metamaps.Active.Mapper) {
+        Metamaps.Famous.yield.hide()
+
+        Metamaps.Famous.explore.set('active')
+        Metamaps.Famous.maps.resetScroll() // sets the scroll back to the top
+        Metamaps.Famous.explore.show()
+
+        Metamaps.Famous.maps.show()
+
+        Metamaps.GlobalUI.Search.open()
+        Metamaps.GlobalUI.Search.lock()
+
+        Metamaps.Views.exploreMaps.setCollection(Metamaps.Maps.Active)
+        if (Metamaps.Maps.Active.length === 0) {
+          Metamaps.Maps.Active.getMaps(navigate) // this will trigger an explore maps render
+        } else {
+          Metamaps.Views.exploreMaps.render(navigate)
+        }
+      } else {
+        // logged out home page
+        Metamaps.Famous.yield.show()
+
+        Metamaps.Famous.explore.hide()
+
+        Metamaps.GlobalUI.Search.unlock()
+        Metamaps.GlobalUI.Search.close(0, true)
+
+        Metamaps.Famous.maps.hide()
+        Metamaps.Router.timeoutId = setTimeout(navigate, 500)
+      }
+
+      Metamaps.Famous.viz.hide()
+      Metamaps.Map.end()
+      Metamaps.Topic.end()
+      Metamaps.Active.Map = null
+      Metamaps.Active.Topic = null
+    },
+    explore: function (section, id) {
+      clearTimeout(Metamaps.Router.timeoutId)
+
+      // just capitalize the variable section
+      // either 'featured', 'mapper', or 'active'
+      var capitalize = section.charAt(0).toUpperCase() + section.slice(1)
+
+      if (section === 'shared' || section === 'featured' || section === 'active') {
+        document.title = 'Explore ' + capitalize + ' Maps | Metamaps'
+      } else if (section === 'mapper') {
+        $.ajax({
+          url: '/users/' + id + '.json',
+          success: function (response) {
+            document.title = response.name + ' | Metamaps'
+          },
+          error: function () {}
+        })
+      } else if (section === 'mine') {
+        document.title = 'Explore My Maps | Metamaps'
+      }
+
+      $('.wrapper').removeClass('homePage mapPage topicPage')
+      $('.wrapper').addClass('explorePage')
+
+      Metamaps.Router.currentSection = 'explore'
+      Metamaps.Router.currentPage = section
+
+      // this will mean it's a mapper page being loaded
+      if (id) {
+        if (Metamaps.Maps.Mapper.mapperId !== id) {
+          // empty the collection if we are trying to load the maps
+          // collection of a different mapper than we had previously
+          Metamaps.Maps.Mapper.reset()
+          Metamaps.Maps.Mapper.page = 1
+        }
+        Metamaps.Maps.Mapper.mapperId = id
+      }
+
+      Metamaps.Views.exploreMaps.setCollection(Metamaps.Maps[capitalize])
+
+      var navigate = function () {
+        var path = '/explore/' + Metamaps.Router.currentPage
+
+        // alter url if for mapper profile page
+        if (Metamaps.Router.currentPage === 'mapper') {
+          path += '/' + Metamaps.Maps.Mapper.mapperId
+        }
+
+        Metamaps.Router.navigate(path)
+      }
+      var navigateTimeout = function () {
+        Metamaps.Router.timeoutId = setTimeout(navigate, 300)
+      }
+      if (Metamaps.Maps[capitalize].length === 0) {
+        Metamaps.Loading.show()
+        setTimeout(function () {
+          Metamaps.Maps[capitalize].getMaps(navigate) // this will trigger an explore maps render
+        }, 300) // wait 300 milliseconds till the other animations are done to do the fetch
+      } else {
+        if (id) {
+          Metamaps.Views.exploreMaps.fetchUserThenRender(navigateTimeout)
+        } else {
+          Metamaps.Views.exploreMaps.render(navigateTimeout)
+        }
+      }
+
+      Metamaps.GlobalUI.Search.open()
+      Metamaps.GlobalUI.Search.lock()
+
+      Metamaps.Famous.yield.hide()
+
+      Metamaps.Famous.maps.resetScroll() // sets the scroll back to the top
+      Metamaps.Famous.maps.show()
+      Metamaps.Famous.explore.set(section, id)
+      Metamaps.Famous.explore.show()
+
+      Metamaps.Famous.viz.hide()
+      Metamaps.Map.end()
+      Metamaps.Topic.end()
+      Metamaps.Active.Map = null
+      Metamaps.Active.Topic = null
+    },
+    maps: function (id) {
+      clearTimeout(Metamaps.Router.timeoutId)
+
+      document.title = 'Map ' + id + ' | Metamaps'
+
+      Metamaps.Router.currentSection = 'map'
+      Metamaps.Router.currentPage = id
+
+      $('.wrapper').removeClass('homePage explorePage topicPage')
+      $('.wrapper').addClass('mapPage')
+      // another class will be added to wrapper if you
+      // can edit this map '.canEditMap'
+
+      Metamaps.Famous.yield.hide()
+      Metamaps.Famous.maps.hide()
+      Metamaps.Famous.explore.hide()
+
+      // clear the visualization, if there was one, before showing its div again
+      if (Metamaps.Visualize.mGraph) {
+        Metamaps.Visualize.mGraph.graph.empty()
+        Metamaps.Visualize.mGraph.plot()
+        Metamaps.JIT.centerMap(Metamaps.Visualize.mGraph.canvas)
+      }
+      Metamaps.Famous.viz.show()
+      Metamaps.Topic.end()
+      Metamaps.Active.Topic = null
+
+      Metamaps.GlobalUI.Search.unlock()
+      Metamaps.GlobalUI.Search.close(0, true)
+
+      Metamaps.Loading.show()
+      Metamaps.Map.end()
+      Metamaps.Map.launch(id)
+    },
+    topics: function (id) {
+      clearTimeout(Metamaps.Router.timeoutId)
+
+      document.title = 'Topic ' + id + ' | Metamaps'
+
+      Metamaps.Router.currentSection = 'topic'
+      Metamaps.Router.currentPage = id
+
+      $('.wrapper').removeClass('homePage explorePage mapPage')
+      $('.wrapper').addClass('topicPage')
+
+      Metamaps.Famous.yield.hide()
+      Metamaps.Famous.maps.hide()
+      Metamaps.Famous.explore.hide()
+
+      // clear the visualization, if there was one, before showing its div again
+      if (Metamaps.Visualize.mGraph) {
+        Metamaps.Visualize.mGraph.graph.empty()
+        Metamaps.Visualize.mGraph.plot()
+        Metamaps.JIT.centerMap(Metamaps.Visualize.mGraph.canvas)
+      }
+      Metamaps.Famous.viz.show()
+      Metamaps.Map.end()
+      Metamaps.Active.Map = null
+
+      Metamaps.GlobalUI.Search.unlock()
+      Metamaps.GlobalUI.Search.close(0, true)
+
+      Metamaps.Topic.end()
+      Metamaps.Topic.launch(id)
+    }
+  })
+
+  Metamaps.Router = new Router()
+  Metamaps.Router.currentPage = ''
+  Metamaps.Router.currentSection = undefined
+  Metamaps.Router.timeoutId = undefined
+
+  Metamaps.Router.intercept = function (evt) {
+    var segments
+
+    var href = {
+      prop: $(this).prop('href'),
+      attr: $(this).attr('href')
+    }
+    var root = window.location.protocol + '//' + window.location.host + Backbone.history.options.root
+
+    if (href.prop && href.prop === root) href.attr = ''
+
+    if (href.prop && href.prop.slice(0, root.length) === root) {
+      evt.preventDefault()
+
+      segments = href.attr.split('/')
+      segments.splice(0, 1) // pop off the element created by the first /
+
+      if (href.attr === '') {
+        Metamaps.Router.home()
+      } else {
+        Metamaps.Router[segments[0]](segments[1], segments[2])
+      }
+    }
+  }
+
+  Metamaps.Router.init = function () {
+    Backbone.history.start({
+      silent: true,
+      pushState: true,
+      root: '/'
+    })
+    $(document).on('click', 'a:not([data-bypass])', Metamaps.Router.intercept)
+  }
+})()

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

@@ -0,0 +1,169 @@
+/* global Metamaps, $ */
+
+/*
+ * Metamaps.Synapse.js.erb
+ *
+ * Dependencies:
+ *  - Metamaps.Backbone
+ *  - Metamaps.Control
+ *  - Metamaps.Create
+ *  - Metamaps.JIT
+ *  - Metamaps.Map
+ *  - Metamaps.Mappings
+ *  - Metamaps.Selected
+ *  - Metamaps.Settings
+ *  - Metamaps.Synapses
+ *  - Metamaps.Topics
+ *  - Metamaps.Visualize
+ */
+
+Metamaps.Synapse = {
+  // this function is to retrieve a synapse JSON object from the database
+  // @param id = the id of the synapse to retrieve
+  get: function (id, callback) {
+    // if the desired topic is not yet in the local topic repository, fetch it
+    if (Metamaps.Synapses.get(id) == undefined) {
+      if (!callback) {
+        var e = $.ajax({
+          url: '/synapses/' + id + '.json',
+          async: false
+        })
+        Metamaps.Synapses.add($.parseJSON(e.responseText))
+        return Metamaps.Synapses.get(id)
+      } else {
+        return $.ajax({
+          url: '/synapses/' + id + '.json',
+          success: function (data) {
+            Metamaps.Synapses.add(data)
+            callback(Metamaps.Synapses.get(id))
+          }
+        })
+      }
+    } else {
+      if (!callback) {
+        return Metamaps.Synapses.get(id)
+      } else {
+        return callback(Metamaps.Synapses.get(id))
+      }
+    }
+  },
+  /*
+   *
+   *
+   */
+  renderSynapse: function (mapping, synapse, node1, node2, createNewInDB) {
+    var self = Metamaps.Synapse
+
+    var edgeOnViz
+
+    var newedge = synapse.createEdge(mapping)
+
+    Metamaps.Visualize.mGraph.graph.addAdjacence(node1, node2, newedge.data)
+    edgeOnViz = Metamaps.Visualize.mGraph.graph.getAdjacence(node1.id, node2.id)
+    synapse.set('edge', edgeOnViz)
+    synapse.updateEdge() // links the synapse and the mapping to the edge
+
+    Metamaps.Control.selectEdge(edgeOnViz)
+
+    var mappingSuccessCallback = function (mappingModel, response) {
+      var newSynapseData = {
+        mappingid: mappingModel.id,
+        mappableid: mappingModel.get('mappable_id')
+      }
+
+      $(document).trigger(Metamaps.JIT.events.newSynapse, [newSynapseData])
+    }
+    var synapseSuccessCallback = function (synapseModel, response) {
+      if (Metamaps.Active.Map) {
+        mapping.save({ mappable_id: synapseModel.id }, {
+          success: mappingSuccessCallback
+        })
+      }
+    }
+
+    if (!Metamaps.Settings.sandbox && createNewInDB) {
+      if (synapse.isNew()) {
+        synapse.save(null, {
+          success: synapseSuccessCallback,
+          error: function (model, response) {
+            console.log('error saving synapse to database')
+          }
+        })
+      } else if (!synapse.isNew() && Metamaps.Active.Map) {
+        mapping.save(null, {
+          success: mappingSuccessCallback
+        })
+      }
+    }
+  },
+  createSynapseLocally: function () {
+    var self = Metamaps.Synapse,
+      topic1,
+      topic2,
+      node1,
+      node2,
+      synapse,
+      mapping
+
+    $(document).trigger(Metamaps.Map.events.editedByActiveMapper)
+
+    // for each node in this array we will create a synapse going to the position2 node.
+    var synapsesToCreate = []
+
+    topic2 = Metamaps.Topics.get(Metamaps.Create.newSynapse.topic2id)
+    node2 = topic2.get('node')
+
+    var len = Metamaps.Selected.Nodes.length
+    if (len == 0) {
+      topic1 = Metamaps.Topics.get(Metamaps.Create.newSynapse.topic1id)
+      synapsesToCreate[0] = topic1.get('node')
+    } else if (len > 0) {
+      synapsesToCreate = Metamaps.Selected.Nodes
+    }
+
+    for (var i = 0; i < synapsesToCreate.length; i++) {
+      node1 = synapsesToCreate[i]
+      topic1 = node1.getData('topic')
+      synapse = new Metamaps.Backbone.Synapse({
+        desc: Metamaps.Create.newSynapse.description,
+        node1_id: topic1.isNew() ? topic1.cid : topic1.id,
+        node2_id: topic2.isNew() ? topic2.cid : topic2.id,
+      })
+      Metamaps.Synapses.add(synapse)
+
+      mapping = new Metamaps.Backbone.Mapping({
+        mappable_type: 'Synapse',
+        mappable_id: synapse.cid,
+      })
+      Metamaps.Mappings.add(mapping)
+
+      // this function also includes the creation of the synapse in the database
+      self.renderSynapse(mapping, synapse, node1, node2, true)
+    } // for each in synapsesToCreate
+
+    Metamaps.Create.newSynapse.hide()
+  },
+  getSynapseFromAutocomplete: function (id) {
+    var self = Metamaps.Synapse,
+      topic1,
+      topic2,
+      node1,
+      node2
+
+    var synapse = self.get(id)
+
+    var mapping = new Metamaps.Backbone.Mapping({
+      mappable_type: 'Synapse',
+      mappable_id: synapse.id,
+    })
+    Metamaps.Mappings.add(mapping)
+
+    topic1 = Metamaps.Topics.get(Metamaps.Create.newSynapse.topic1id)
+    node1 = topic1.get('node')
+    topic2 = Metamaps.Topics.get(Metamaps.Create.newSynapse.topic2id)
+    node2 = topic2.get('node')
+    Metamaps.Create.newSynapse.hide()
+
+    self.renderSynapse(mapping, synapse, node1, node2, true)
+  }
+}; // end Metamaps.Synapse

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

@@ -1,13 +1,18 @@
-/* global $ */
-import Active from './Active'
-import Control from './Control'
-import Mapper from './Mapper'
-import Visualize from './Visualize'
+/* global Metamaps, $ */
 
-const SynapseCard = {
+/*
+ * Metamaps.SynapseCard.js
+ *
+ * Dependencies:
+ *  - Metamaps.Active
+ *  - Metamaps.Control
+ *  - Metamaps.Mapper
+ *  - Metamaps.Visualize
+ */
+Metamaps.SynapseCard = {
   openSynapseCard: null,
-  showCard: function(edge, e) {
-    var self = SynapseCard
+  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')
@@ -15,23 +20,23 @@ const SynapseCard = {
     $('#edit_synapse').remove()
 
     // so label is missing while editing
-    Control.deselectEdge(edge)
+    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
+    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 editDiv = document.createElement('div')
-    editDiv.innerHTML = '<div id="editSynUpperBar"></div><div id="editSynLowerBar"></div>'
-    editDiv.setAttribute('id', 'edit_synapse')
-    if (synapse.authorizeToEdit(Active.Mapper)) {
-      editDiv.className = 'permission canEdit'
-      editDiv.className += synapse.authorizePermissionChange(Active.Mapper) ? ' yourEdge' : ''
+    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 {
-      editDiv.className = 'permission cannotEdit'
+      edit_div.className = 'permission cannotEdit'
     }
-    $('#wrapper').append(editDiv)
+    $('#wrapper').append(edit_div)
 
     self.populateShowCard(edge, synapse)
 
@@ -51,13 +56,13 @@ const SynapseCard = {
     self.openSynapseCard = edge
   },
 
-  hideCard: function() {
+  hideCard: function () {
     $('#edit_synapse').remove()
-    SynapseCard.openSynapseCard = null
+    Metamaps.SynapseCard.openSynapseCard = null
   },
 
-  populateShowCard: function(edge, synapse) {
-    var self = SynapseCard
+  populateShowCard: function (edge, synapse) {
+    var self = Metamaps.SynapseCard
 
     self.add_synapse_count(edge)
     self.add_desc_form(synapse)
@@ -65,15 +70,14 @@ const SynapseCard = {
     self.add_user_info(synapse)
     self.add_perms_form(synapse)
     self.add_direction_form(synapse)
-    $('.authenticated #edit_synapse.permission.canEdit .best_in_place').best_in_place()
   },
-  add_synapse_count: function(edge) {
+  add_synapse_count: function (edge) {
     var count = edge.getData('synapses').length
 
     $('#editSynUpperBar').append('<div id="synapseCardCount">' + count + '</div>')
   },
-  add_desc_form: function(synapse) {
-    var dataNil = 'Click to add description.'
+  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
@@ -81,42 +85,35 @@ const SynapseCard = {
     // 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-bip-object', 'synapse')
-    $('#edit_synapse_desc').attr('data-bip-attribute', 'desc')
-    $('#edit_synapse_desc').attr('data-bip-type', 'textarea')
-    $('#edit_synapse_desc').attr('data-bip-nil', dataNil)
-    $('#edit_synapse_desc').attr('data-bip-url', '/synapses/' + synapse.id)
-    $('#edit_synapse_desc').attr('data-bip-value', synapse.get('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 dataNil
-    if ($('#edit_synapse_desc').html().trim() === '') {
-      if (synapse.authorizeToEdit(Active.Mapper)) {
-        $('#edit_synapse_desc').html(dataNil)
+    // 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').keypress(function(e) {
-      const ENTER = 13
-      if (e.which === ENTER) {
-        $(this).data('bestInPlaceEditor').update()
-      }
-    })
-    $('#edit_synapse_desc').bind('ajax:success', function() {
+    $('#edit_synapse_desc').bind('ajax:success', function () {
       var desc = $(this).html()
-      if (desc === dataNil) {
+      if (desc == data_nil) {
         synapse.set('desc', '')
       } else {
         synapse.set('desc', desc)
       }
       synapse.trigger('saved')
-      Control.selectEdge(synapse.get('edge'))
-      Visualize.mGraph.plot()
+      Metamaps.Control.selectEdge(synapse.get('edge'))
+      Metamaps.Visualize.mGraph.plot()
     })
   },
-  add_drop_down: function(edge, synapse) {
+  add_drop_down: function (edge, synapse) {
     var list, i, synapses, l, desc
 
     synapses = edge.getData('synapses')
@@ -125,13 +122,13 @@ const SynapseCard = {
     if (l > 1) {
       // append the element that you click to show dropdown select
       $('#editSynUpperBar').append('<div id="dropdownSynapses"></div>')
-      $('#dropdownSynapses').click(function(e) {
+      $('#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() {
+      $('#edit_synapse').click(function () {
         $('#switchSynapseList').hide()
       })
 
@@ -151,35 +148,35 @@ const SynapseCard = {
       // attach click listeners to list items that
       // will cause it to switch the displayed synapse
       // when you click it
-      $('#switchSynapseList li').click(function(e) {
+      $('#switchSynapseList li').click(function (e) {
         e.stopPropagation()
         var index = parseInt($(this).attr('data-synapse-index'))
         edge.setData('displayIndex', index)
-        Visualize.mGraph.plot()
-        SynapseCard.showCard(edge, false)
+        Metamaps.Visualize.mGraph.plot()
+        Metamaps.SynapseCard.showCard(edge, false)
       })
     }
   },
-  add_user_info: function(synapse) {
+  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) {
+    var setMapperImage = function (mapper) {
       $('#edgeUser img').attr('src', mapper.get('image'))
     }
-    Mapper.get(synapse.get('user_id'), setMapperImage)
+    Metamaps.Mapper.get(synapse.get('user_id'), setMapperImage)
   },
 
-  add_perms_form: function(synapse) {
+  add_perms_form: function (synapse) {
     // permissions - if owner, also allow permission editing
-    $('#editSynLowerBar').append('<div class="mapPerm ' + synapse.get('permission').substring(0, 2) + '"></div>')
+    $('#editSynLowerBar').append('<div class="mapPerm ' + synapse.get('calculated_permission').substring(0, 2) + '"></div>')
 
     // ability to change permission
     var selectingPermission = false
-    var permissionLiClick = function(event) {
+    var permissionLiClick = function (event) {
       selectingPermission = false
       var permission = $(this).attr('class')
       synapse.save({
@@ -191,7 +188,7 @@ const SynapseCard = {
       event.stopPropagation()
     }
 
-    var openPermissionSelect = function(event) {
+    var openPermissionSelect = function (event) {
       if (!selectingPermission) {
         selectingPermission = true
         $(this).addClass('minimize') // this line flips the drop down arrow to a pull up arrow
@@ -207,19 +204,19 @@ const SynapseCard = {
       }
     }
 
-    var hidePermissionSelect = function() {
+    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(Active.Mapper)) {
+    if (synapse.authorizePermissionChange(Metamaps.Active.Mapper)) {
       $('#edit_synapse.yourEdge .mapPerm').click(openPermissionSelect)
       $('#edit_synapse').click(hidePermissionSelect)
     }
   }, // add_perms_form
 
-  add_direction_form: function(synapse) {
+  add_direction_form: function (synapse) {
     // directionality checkboxes
     $('#editSynLowerBar').append('<div id="edit_synapse_left"></div>')
     $('#editSynLowerBar').append('<div id="edit_synapse_right"></div>')
@@ -228,16 +225,14 @@ const SynapseCard = {
 
     // determine which node is to the left and the right
     // if directly in a line, top is left
-    let left
-    let right
     if (edge.nodeFrom.pos.x < edge.nodeTo.pos.x ||
-      edge.nodeFrom.pos.x === edge.nodeTo.pos.x &&
+      edge.nodeFrom.pos.x == edge.nodeTo.pos.x &&
       edge.nodeFrom.pos.y < edge.nodeTo.pos.y) {
-      left = edge.nodeTo.getData('topic')
-      right = edge.nodeFrom.getData('topic')
+      var left = edge.nodeTo.getData('topic')
+      var right = edge.nodeFrom.getData('topic')
     } else {
-      left = edge.nodeFrom.getData('topic')
-      right = edge.nodeTo.getData('topic')
+      var left = edge.nodeFrom.getData('topic')
+      var right = edge.nodeTo.getData('topic')
     }
 
     /*
@@ -246,24 +241,24 @@ const SynapseCard = {
      * Else check the 'left' checkbox since the arrow is incoming.
      */
 
-    var directionCat = synapse.get('category') // both, none, from-to
-    if (directionCat === 'from-to') {
-      var fromTo = [synapse.get('topic1_id'), synapse.get('topic2_id')]
-      if (fromTo[0] === left.id) {
+    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') {
+    } else if (directionCat == 'both') {
       // check both checkboxes
       $('#edit_synapse_left').addClass('checked')
       $('#edit_synapse_right').addClass('checked')
     }
 
-    if (synapse.authorizeToEdit(Active.Mapper)) {
-      $('#edit_synapse_left, #edit_synapse_right').click(function() {
+    if (synapse.authorizeToEdit(Metamaps.Active.Mapper)) {
+      $('#edit_synapse_left, #edit_synapse_right').click(function () {
         $(this).toggleClass('checked')
 
         var leftChecked = $('#edit_synapse_left').is('.checked')
@@ -283,13 +278,11 @@ const SynapseCard = {
 
         synapse.save({
           category: dirCat,
-          topic1_id: dir[0],
-          topic2_id: dir[1]
+          node1_id: dir[0],
+          node2_id: dir[1]
         })
-        Visualize.mGraph.plot()
+        Metamaps.Visualize.mGraph.plot()
       })
     } // if
   } // add_direction_form
-}
-
-export default SynapseCard
+}; // end Metamaps.SynapseCard

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

@@ -0,0 +1,363 @@
+/* global Metamaps, $ */
+
+/*
+ * Metamaps.Topic.js.erb
+ *
+ * Dependencies:
+ *  - Metamaps.Active
+ *  - Metamaps.Backbone
+ *  - Metamaps.Backbone
+ *  - Metamaps.Create
+ *  - Metamaps.Creators
+ *  - Metamaps.Famous
+ *  - Metamaps.Filter
+ *  - Metamaps.GlobalUI
+ *  - Metamaps.JIT
+ *  - Metamaps.Mappings
+ *  - Metamaps.Selected
+ *  - Metamaps.Settings
+ *  - Metamaps.SynapseCard
+ *  - Metamaps.Synapses
+ *  - Metamaps.TopicCard
+ *  - Metamaps.Topics
+ *  - Metamaps.Util
+ *  - Metamaps.Visualize
+ *  - Metamaps.tempInit
+ *  - Metamaps.tempNode
+ *  - Metamaps.tempNode2
+ */
+
+Metamaps.Topic = {
+  // this function is to retrieve a topic JSON object from the database
+  // @param id = the id of the topic to retrieve
+  get: function (id, callback) {
+    // if the desired topic is not yet in the local topic repository, fetch it
+    if (Metamaps.Topics.get(id) == undefined) {
+      // console.log("Ajax call!")
+      if (!callback) {
+        var e = $.ajax({
+          url: '/topics/' + id + '.json',
+          async: false
+        })
+        Metamaps.Topics.add($.parseJSON(e.responseText))
+        return Metamaps.Topics.get(id)
+      } else {
+        return $.ajax({
+          url: '/topics/' + id + '.json',
+          success: function (data) {
+            Metamaps.Topics.add(data)
+            callback(Metamaps.Topics.get(id))
+          }
+        })
+      }
+    } else {
+      if (!callback) {
+        return Metamaps.Topics.get(id)
+      } else {
+        return callback(Metamaps.Topics.get(id))
+      }
+    }
+  },
+  launch: function (id) {
+    var bb = Metamaps.Backbone
+    var start = function (data) {
+      Metamaps.Active.Topic = new bb.Topic(data.topic)
+      Metamaps.Creators = new bb.MapperCollection(data.creators)
+      Metamaps.Topics = new bb.TopicCollection([data.topic].concat(data.relatives))
+      Metamaps.Synapses = new bb.SynapseCollection(data.synapses)
+      Metamaps.Backbone.attachCollectionEvents()
+
+      // set filter mapper H3 text
+      $('#filter_by_mapper h3').html('CREATORS')
+
+      // build and render the visualization
+      Metamaps.Visualize.type = 'RGraph'
+      Metamaps.JIT.prepareVizData()
+
+      // update filters
+      Metamaps.Filter.reset()
+
+      // reset selected arrays
+      Metamaps.Selected.reset()
+
+      // these three update the actual filter box with the right list items
+      Metamaps.Filter.checkMetacodes()
+      Metamaps.Filter.checkSynapses()
+      Metamaps.Filter.checkMappers()
+    }
+
+    $.ajax({
+      url: '/topics/' + id + '/network.json',
+      success: start
+    })
+  },
+  end: function () {
+    if (Metamaps.Active.Topic) {
+      $('.rightclickmenu').remove()
+      Metamaps.TopicCard.hideCard()
+      Metamaps.SynapseCard.hideCard()
+      Metamaps.Filter.close()
+    }
+  },
+  centerOn: function (nodeid) {
+    if (!Metamaps.Visualize.mGraph.busy) {
+      Metamaps.Visualize.mGraph.onClick(nodeid, {
+        hideLabels: false,
+        duration: 1000,
+        onComplete: function () {}
+      })
+    }
+  },
+  fetchRelatives: function (node, metacode_id) {
+    var topics = Metamaps.Topics.map(function (t) { return t.id })
+    var topics_string = topics.join()
+
+    var creators = Metamaps.Creators.map(function (t) { return t.id })
+    var creators_string = creators.join()
+
+    var topic = node.getData('topic')
+
+    var successCallback = function (data) {
+      if (data.creators.length > 0) Metamaps.Creators.add(data.creators)
+      if (data.topics.length > 0) Metamaps.Topics.add(data.topics)
+      if (data.synapses.length > 0) Metamaps.Synapses.add(data.synapses)
+
+      var topicColl = new Metamaps.Backbone.TopicCollection(data.topics)
+      topicColl.add(topic)
+      var synapseColl = new Metamaps.Backbone.SynapseCollection(data.synapses)
+
+      var graph = Metamaps.JIT.convertModelsToJIT(topicColl, synapseColl)[0]
+      Metamaps.Visualize.mGraph.op.sum(graph, {
+        type: 'fade',
+        duration: 500,
+        hideLabels: false
+      })
+
+      var i, l, t, s
+
+      Metamaps.Visualize.mGraph.graph.eachNode(function (n) {
+        t = Metamaps.Topics.get(n.id)
+        t.set({ node: n }, { silent: true })
+        t.updateNode()
+
+        n.eachAdjacency(function (edge) {
+          if (!edge.getData('init')) {
+            edge.setData('init', true)
+
+            l = edge.getData('synapseIDs').length
+            for (i = 0; i < l; i++) {
+              s = Metamaps.Synapses.get(edge.getData('synapseIDs')[i])
+              s.set({ edge: edge }, { silent: true })
+              s.updateEdge()
+            }
+          }
+        })
+      })
+    }
+
+    var paramsString = metacode_id ? 'metacode=' + metacode_id + '&' : ''
+    paramsString += 'network=' + topics_string + '&creators=' + creators_string
+
+    $.ajax({
+      type: 'Get',
+      url: '/topics/' + topic.id + '/relatives.json?' + paramsString,
+      success: successCallback,
+      error: function () {}
+    })
+  },
+  /*
+   *
+   *
+   */
+  renderTopic: function (mapping, topic, createNewInDB, permitCreateSynapseAfter) {
+    var self = Metamaps.Topic
+
+    var nodeOnViz, tempPos
+
+    var newnode = topic.createNode()
+
+    var midpoint = {}, pixelPos
+
+    if (!$.isEmptyObject(Metamaps.Visualize.mGraph.graph.nodes)) {
+      Metamaps.Visualize.mGraph.graph.addNode(newnode)
+      nodeOnViz = Metamaps.Visualize.mGraph.graph.getNode(newnode.id)
+      topic.set('node', nodeOnViz, {silent: true})
+      topic.updateNode() // links the topic and the mapping to the node
+
+      nodeOnViz.setData('dim', 1, 'start')
+      nodeOnViz.setData('dim', 25, 'end')
+      if (Metamaps.Visualize.type === 'RGraph') {
+        tempPos = new $jit.Complex(mapping.get('xloc'), mapping.get('yloc'))
+        tempPos = tempPos.toPolar()
+        nodeOnViz.setPos(tempPos, 'current')
+        nodeOnViz.setPos(tempPos, 'start')
+        nodeOnViz.setPos(tempPos, 'end')
+      } else if (Metamaps.Visualize.type === 'ForceDirected') {
+        nodeOnViz.setPos(new $jit.Complex(mapping.get('xloc'), mapping.get('yloc')), 'current')
+        nodeOnViz.setPos(new $jit.Complex(mapping.get('xloc'), mapping.get('yloc')), 'start')
+        nodeOnViz.setPos(new $jit.Complex(mapping.get('xloc'), mapping.get('yloc')), 'end')
+      }
+      if (Metamaps.Create.newTopic.addSynapse && permitCreateSynapseAfter) {
+        Metamaps.Create.newSynapse.topic1id = Metamaps.tempNode.getData('topic').id
+
+        // position the form
+        midpoint.x = Metamaps.tempNode.pos.getc().x + (nodeOnViz.pos.getc().x - Metamaps.tempNode.pos.getc().x) / 2
+        midpoint.y = Metamaps.tempNode.pos.getc().y + (nodeOnViz.pos.getc().y - Metamaps.tempNode.pos.getc().y) / 2
+        pixelPos = Metamaps.Util.coordsToPixels(midpoint)
+        $('#new_synapse').css('left', pixelPos.x + 'px')
+        $('#new_synapse').css('top', pixelPos.y + 'px')
+        // show the form
+        Metamaps.Create.newSynapse.open()
+        Metamaps.Visualize.mGraph.fx.animate({
+          modes: ['node-property:dim'],
+          duration: 500,
+          onComplete: function () {
+            Metamaps.tempNode = null
+            Metamaps.tempNode2 = null
+            Metamaps.tempInit = false
+          }
+        })
+      } else {
+        Metamaps.Visualize.mGraph.fx.plotNode(nodeOnViz, Metamaps.Visualize.mGraph.canvas)
+        Metamaps.Visualize.mGraph.fx.animate({
+          modes: ['node-property:dim'],
+          duration: 500,
+          onComplete: function () {}
+        })
+      }
+    } else {
+      Metamaps.Visualize.mGraph.loadJSON(newnode)
+      nodeOnViz = Metamaps.Visualize.mGraph.graph.getNode(newnode.id)
+      topic.set('node', nodeOnViz, {silent: true})
+      topic.updateNode() // links the topic and the mapping to the node
+
+      nodeOnViz.setData('dim', 1, 'start')
+      nodeOnViz.setData('dim', 25, 'end')
+      nodeOnViz.setPos(new $jit.Complex(mapping.get('xloc'), mapping.get('yloc')), 'current')
+      nodeOnViz.setPos(new $jit.Complex(mapping.get('xloc'), mapping.get('yloc')), 'start')
+      nodeOnViz.setPos(new $jit.Complex(mapping.get('xloc'), mapping.get('yloc')), 'end')
+      Metamaps.Visualize.mGraph.fx.plotNode(nodeOnViz, Metamaps.Visualize.mGraph.canvas)
+      Metamaps.Visualize.mGraph.fx.animate({
+        modes: ['node-property:dim'],
+        duration: 500,
+        onComplete: function () {}
+      })
+    }
+
+    var mappingSuccessCallback = function (mappingModel, response) {
+      var newTopicData = {
+        mappingid: mappingModel.id,
+        mappableid: mappingModel.get('mappable_id')
+      }
+
+      $(document).trigger(Metamaps.JIT.events.newTopic, [newTopicData])
+    }
+    var topicSuccessCallback = function (topicModel, response) {
+      if (Metamaps.Active.Map) {
+        mapping.save({ mappable_id: topicModel.id }, {
+          success: mappingSuccessCallback,
+          error: function (model, response) {
+            console.log('error saving mapping to database')
+          }
+        })
+      }
+
+      if (Metamaps.Create.newTopic.addSynapse) {
+        Metamaps.Create.newSynapse.topic2id = topicModel.id
+      }
+    }
+
+    if (!Metamaps.Settings.sandbox && createNewInDB) {
+      if (topic.isNew()) {
+        topic.save(null, {
+          success: topicSuccessCallback,
+          error: function (model, response) {
+            console.log('error saving topic to database')
+          }
+        })
+      } else if (!topic.isNew() && Metamaps.Active.Map) {
+        mapping.save(null, {
+          success: mappingSuccessCallback
+        })
+      }
+    }
+  },
+  createTopicLocally: function () {
+    var self = Metamaps.Topic
+
+    if (Metamaps.Create.newTopic.name === '') {
+      Metamaps.GlobalUI.notifyUser('Please enter a topic title...')
+      return
+    }
+
+    // hide the 'double-click to add a topic' message
+    Metamaps.Famous.viz.hideInstructions()
+
+    $(document).trigger(Metamaps.Map.events.editedByActiveMapper)
+
+    var metacode = Metamaps.Metacodes.get(Metamaps.Create.newTopic.metacode)
+
+    var topic = new Metamaps.Backbone.Topic({
+      name: Metamaps.Create.newTopic.name,
+      metacode_id: metacode.id,
+      defer_to_map_id: Metamaps.Active.Map.id
+    })
+    Metamaps.Topics.add(topic)
+
+    var mapping = new Metamaps.Backbone.Mapping({
+      xloc: Metamaps.Create.newTopic.x,
+      yloc: Metamaps.Create.newTopic.y,
+      mappable_id: topic.cid,
+      mappable_type: 'Topic',
+    })
+    Metamaps.Mappings.add(mapping)
+
+    // these can't happen until the value is retrieved, which happens in the line above
+    Metamaps.Create.newTopic.hide()
+
+    self.renderTopic(mapping, topic, true, true) // this function also includes the creation of the topic in the database
+  },
+  getTopicFromAutocomplete: function (id) {
+    var self = Metamaps.Topic
+
+    $(document).trigger(Metamaps.Map.events.editedByActiveMapper)
+
+    Metamaps.Create.newTopic.hide()
+
+    var topic = self.get(id)
+
+    var mapping = new Metamaps.Backbone.Mapping({
+      xloc: Metamaps.Create.newTopic.x,
+      yloc: Metamaps.Create.newTopic.y,
+      mappable_type: 'Topic',
+      mappable_id: topic.id,
+    })
+    Metamaps.Mappings.add(mapping)
+
+    self.renderTopic(mapping, topic, true, true)
+  },
+  getTopicFromSearch: function (event, id) {
+    var self = Metamaps.Topic
+
+    $(document).trigger(Metamaps.Map.events.editedByActiveMapper)
+
+    var topic = self.get(id)
+
+    var nextCoords = Metamaps.Map.getNextCoord()
+    var mapping = new Metamaps.Backbone.Mapping({
+      xloc: nextCoords.x,
+      yloc: nextCoords.y,
+      mappable_type: 'Topic',
+      mappable_id: topic.id,
+    })
+    Metamaps.Mappings.add(mapping)
+
+    self.renderTopic(mapping, topic, true, true)
+
+    Metamaps.GlobalUI.notifyUser('Topic was added to your map!')
+
+    event.stopPropagation()
+    event.preventDefault()
+    return false
+  }
+}; // end Metamaps.Topic

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

@@ -0,0 +1,451 @@
+/* global Metamaps, $ */
+
+/*
+ * Metamaps.TopicCard.js
+ *
+ * Dependencies:
+ *  - Metamaps.Active
+ *  - Metamaps.GlobalUI
+ *  - Metamaps.Mapper
+ *  - Metamaps.Metacodes
+ *  - Metamaps.Router
+ *  - Metamaps.Util
+ *  - Metamaps.Visualize
+ */
+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,
+        defer_to_map_id: null
+      })
+      $('.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('calculated_permission')
+    nodeValues.mk_permission = topic.get('calculated_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

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

@@ -0,0 +1,130 @@
+/* global Metamaps */
+
+/*
+ * Metamaps.Util.js
+ *
+ * Dependencies:
+ *  - Metamaps.Visualize
+ */
+
+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

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

@@ -0,0 +1,129 @@
+/* global Metamaps, $, Hogan, Backbone */
+
+/*
+ * Metamaps.Views.js.erb
+ *
+ * Dependencies:
+ *  - Metamaps.Famous
+ *  - Metamaps.Loading
+ */
+
+Metamaps.Views = {
+  initialized: false
+}
+
+Metamaps.Views.init = function () {
+  Metamaps.Views.MapperCard = Backbone.View.extend({
+    template: Hogan.compile($('#mapperCardTemplate').html()),
+
+    tagNamea: 'div',
+
+    className: 'mapper',
+
+    render: function () {
+      this.$el.html(this.template.render(this.model))
+      return this
+    }
+  })
+
+  Metamaps.Views.MapCard = Backbone.View.extend({
+    template: Hogan.compile($('#mapCardTemplate').html()),
+
+    tagName: 'div',
+
+    className: 'map',
+
+    id: function () {
+      return this.model.id
+    },
+
+    initialize: function () {
+      this.listenTo(this.model, 'change', this.render)
+    },
+
+    render: function () {
+      this.$el.html(this.template.render(this.model.attrForCards()))
+      return this
+    }
+
+  })
+
+  var MapsWrapper = Backbone.View.extend({
+    initialize: function (opts) {},
+    setCollection: function (collection) {
+      if (this.collection) this.stopListening(this.collection)
+      this.collection = collection
+      this.listenTo(this.collection, 'add', this.render)
+      this.listenTo(this.collection, 'successOnFetch', this.handleSuccess)
+      this.listenTo(this.collection, 'errorOnFetch', this.handleError)
+    },
+    render: function (mapperObj, cbArg) {
+      var that = this
+
+      if (typeof mapperObj === 'function') {
+        var cb = mapperObj
+        mapperObj = null
+      }
+
+      this.el.innerHTML = ''
+
+      // in case it is a page where we have to display the mapper card
+      if (mapperObj) {
+        var view = new Metamaps.Views.MapperCard({ model: mapperObj })
+
+        that.el.appendChild(view.render().el)
+      }
+
+      this.collection.each(function (map) {
+        var view = new Metamaps.Views.MapCard({ model: map })
+
+        that.el.appendChild(view.render().el)
+      })
+      this.$el.append('<div class="clearfloat"></div>')
+      var m = Metamaps.Famous.maps.surf
+      m.setContent(this.el)
+
+      var updateHeight = function () {
+        var height = $(that.el).height() + 32 + 56
+        m.setSize([undefined, height])
+        Metamaps.Famous.maps.lock = false
+        if (cb) cb()
+      }
+
+      if (!Metamaps.Views.initialized) {
+        m.deploy(m._currTarget)
+        Metamaps.Views.initialized = true
+        setTimeout(updateHeight, 100)
+      } else {
+        setTimeout(updateHeight, 100)
+      }
+
+      Metamaps.Loading.hide()
+    },
+    handleSuccess: function (cb) {
+      if (this.collection && this.collection.id === 'mapper') {
+        this.fetchUserThenRender(cb)
+      } else {
+        this.render(cb)
+      }
+    },
+    handleError: function () {
+      console.log('error loading maps!') // TODO
+    },
+    fetchUserThenRender: function (cb) {
+      var that = this
+      // first load the mapper object and then call the render function
+      $.ajax({
+        url: '/users/' + this.collection.mapperId + '/details.json',
+        success: function (response) {
+          that.render(response, cb)
+        },
+        error: function () {
+          that.render(cb)
+        }
+      })
+    }
+  })
+
+  Metamaps.Views.exploreMaps = new MapsWrapper()
+}

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

@@ -0,0 +1,210 @@
+/* global Metamaps, $ */
+/*
+ * Metamaps.Visualize
+ *
+ * Dependencies:
+ *  - Metamaps.Active
+ *  - Metamaps.JIT
+ *  - Metamaps.Loading
+ *  - Metamaps.Metacodes
+ *  - Metamaps.Router
+ *  - Metamaps.Synapses
+ *  - Metamaps.TopicCard
+ *  - Metamaps.Topics
+ *  - Metamaps.Touch
+ *  - Metamaps.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()
+    }
+
+
+    if (self.type == 'ForceDirected' && Metamaps.Active.Mapper) $.post('/maps/' + Metamaps.Active.Map.id + '/events/user_presence')
+
+    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

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

@@ -0,0 +1,73 @@
+/* global Metamaps */
+
+/*
+ * Metamaps.js.erb
+ */
+
+// TODO eliminate these 5 top-level variables
+Metamaps.panningInt = null
+Metamaps.tempNode = null
+Metamaps.tempInit = false
+Metamaps.tempNode2 = null
+Metamaps.VERSION = '<%= METAMAPS_VERSION %>'
+
+/* erb variables from rails */
+Metamaps.Erb = {}
+Metamaps.Erb['REALTIME_SERVER'] = '<%= ENV['REALTIME_SERVER'] %>'
+Metamaps.Erb['junto_spinner_darkgrey.gif'] = '<%= asset_path('junto_spinner_darkgrey.gif') %>'
+Metamaps.Erb['user.png'] = '<%= asset_path('user.png') %>'
+Metamaps.Erb['icons/wildcard.png'] = '<%= asset_path('icons/wildcard.png') %>'
+Metamaps.Erb['topic_description_signifier.png'] = '<%= asset_path('topic_description_signifier.png') %>'
+Metamaps.Erb['topic_link_signifier.png'] = '<%= asset_path('topic_link_signifier.png') %>'
+Metamaps.Erb['synapse16.png'] = '<%= asset_path('synapse16.png') %>'
+
+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: []
+}

app/assets/javascripts/src/check-canvas-support.js

@@ -0,0 +1,15 @@
+// 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)
+})()

app/assets/javascripts/src/views/chatView.js.erb

@@ -0,0 +1,343 @@
+Metamaps.Views = Metamaps.Views || {};
+
+Metamaps.Views.chatView = (function () {
+    var
+      chatView,
+      linker = new Autolinker({ newWindow: true, truncate: 50, email: false, phone: false, twitter: false });
+
+    var Private = {
+        messageHTML: "<div class='chat-message'>" +
+            "<div class='chat-message-user'><img src='{{ user_image }}' title='{{user_name }}'/></div>" +
+            "<div class='chat-message-text'>{{ message }}</div>" +
+            "<div class='chat-message-time'>{{ timestamp }}</div>" +
+            "<div class='clearfloat'></div>" +
+          "</div>",
+        participantHTML: "<div class='participant participant-{{ id }} {{ selfClass }}'>" +
+                "<div class='chat-participant-image'><img src='{{ image }}' style='border: 2px solid {{ color }};' /></div>" +
+                "<div class='chat-participant-name'>{{ username }} {{ selfName }}</div>" +
+                "<button type='button' class='button chat-participant-invite-call' onclick='Metamaps.Realtime.inviteACall({{ id}});'></button>" +
+                "<button type='button' class='button chat-participant-invite-join' onclick='Metamaps.Realtime.inviteToJoin({{ id}});'></button>" +
+                "<span class='chat-participant-participating'><div class='green-dot'></div></span>" +
+                "<div class='clearfloat'></div>" +
+              "</div>",
+        templates: function() {
+            _.templateSettings = {
+              interpolate: /\{\{(.+?)\}\}/g
+            };
+            this.messageTemplate = _.template(Private.messageHTML);
+
+            this.participantTemplate = _.template(Private.participantHTML);
+        },
+        createElements: function() {
+            this.$unread = $('<div class="chat-unread"></div>');
+            this.$button = $('<div class="chat-button"><div class="tooltips">Chat</div></div>');
+            this.$messageInput = $('<textarea placeholder="Send a message..." class="chat-input"></textarea>');
+            this.$juntoHeader = $('<div class="junto-header">PARTICIPANTS</div>');
+            this.$videoToggle = $('<div class="video-toggle"></div>');
+            this.$cursorToggle = $('<div class="cursor-toggle"></div>');
+            this.$participants = $('<div class="participants"></div>');
+            this.$conversationInProgress = $('<div class="conversation-live">LIVE <span class="call-action leave" onclick="Metamaps.Realtime.leaveCall();">LEAVE</span><span class="call-action join" onclick="Metamaps.Realtime.joinCall();">JOIN</span></div>');
+            this.$chatHeader = $('<div class="chat-header">CHAT</div>');
+            this.$soundToggle = $('<div class="sound-toggle"></div>');
+            this.$messages = $('<div class="chat-messages"></div>');
+            this.$container = $('<div class="chat-box"></div>');
+        },
+        attachElements: function() {
+            this.$button.append(this.$unread);
+
+            this.$juntoHeader.append(this.$videoToggle);
+            this.$juntoHeader.append(this.$cursorToggle);
+
+            this.$chatHeader.append(this.$soundToggle);
+
+            this.$participants.append(this.$conversationInProgress);
+
+            this.$container.append(this.$juntoHeader);
+            this.$container.append(this.$participants);
+            this.$container.append(this.$chatHeader);
+            this.$container.append(this.$button);
+            this.$container.append(this.$messages);
+            this.$container.append(this.$messageInput);
+        },
+        addEventListeners: function() {
+            var self = this;
+
+            this.participants.on('add', function (participant) {
+                Private.addParticipant.call(self, participant);
+            });
+
+            this.participants.on('remove', function (participant) {
+                Private.removeParticipant.call(self, participant);
+            });
+
+            this.$button.on('click', function () {
+                Handlers.buttonClick.call(self);
+            });
+            this.$videoToggle.on('click', function () {
+                Handlers.videoToggleClick.call(self);
+            });
+            this.$cursorToggle.on('click', function () {
+                Handlers.cursorToggleClick.call(self);
+            });
+            this.$soundToggle.on('click', function () {
+                Handlers.soundToggleClick.call(self);
+            });
+            this.$messageInput.on('keyup', function (event) {
+                Handlers.keyUp.call(self, event);
+            });
+            this.$messageInput.on('focus', function () {
+                Handlers.inputFocus.call(self);
+            });
+            this.$messageInput.on('blur', function () {
+                Handlers.inputBlur.call(self);
+            });
+        },
+        initializeSounds: function() {
+            this.sound = new Howl({
+              urls: ["<%= asset_path 'sounds/MM_sounds.mp3' %>", "<%= asset_path 'sounds/MM_sounds.ogg' %>"],
+              sprite: {
+                joinmap: [0, 561],
+                leavemap: [1000, 592],
+                receivechat: [2000, 318],
+                sendchat: [3000, 296],
+                sessioninvite: [4000, 5393, true]
+              }
+            });
+        },
+        incrementUnread: function() {
+            this.unreadMessages++;
+            this.$unread.html(this.unreadMessages);
+            this.$unread.show();
+        },
+        addMessage: function(message, isInitial, wasMe) {
+
+            if (!this.isOpen && !isInitial) Private.incrementUnread.call(this);
+
+            function addZero(i) {
+                if (i < 10) {
+                    i = "0" + i;
+                }
+                return i;
+            }
+            var m = _.clone(message.attributes);
+
+            var today = new Date();
+            m.timestamp = new Date(m.created_at);
+
+            var date = (m.timestamp.getMonth() + 1) + '/' + m.timestamp.getDate();
+            date += " " + addZero(m.timestamp.getHours()) + ":" + addZero(m.timestamp.getMinutes());
+            m.timestamp = date;
+            m.image = m.user_image || 'http://www.hotpepper.ca/wp-content/uploads/2014/11/default_profile_1_200x200.png'; // TODO: remove
+            m.message = linker.link(m.message);
+            var $html = $(this.messageTemplate(m));
+            this.$messages.append($html);
+            if (!isInitial) this.scrollMessages(200);
+
+            if (!wasMe && !isInitial && this.alertSound) this.sound.play('receivechat');
+        },
+        initialMessages: function() {
+            var messages = this.messages.models;
+            for (var i = 0; i < messages.length; i++) {
+                Private.addMessage.call(this, messages[i], true);
+            }
+        },
+        handleInputMessage: function() {
+            var message = {
+                message: this.$messageInput.val(),
+            };
+            this.$messageInput.val('');
+            $(document).trigger(chatView.events.message + '-' + this.room, [message]);
+        },
+        addParticipant: function(participant) {
+            var p = _.clone(participant.attributes);
+            if (p.self) {
+              p.selfClass = 'is-self';
+              p.selfName = '(me)';
+            } else {
+              p.selfClass = '';
+              p.selfName = '';
+            }
+            var html = this.participantTemplate(p);
+            this.$participants.append(html);
+        },
+        removeParticipant: function(participant) {
+            this.$container.find('.participant-' + participant.get('id')).remove();
+        }
+    };
+
+    var Handlers = {
+        buttonClick: function() {
+            if (this.isOpen) this.close();
+            else if (!this.isOpen) this.open();
+        },
+        videoToggleClick: function() {
+            this.$videoToggle.toggleClass('active');
+            this.videosShowing = !this.videosShowing;
+            $(document).trigger(this.videosShowing ? chatView.events.videosOn : chatView.events.videosOff);
+        },
+        cursorToggleClick: function() {
+            this.$cursorToggle.toggleClass('active');
+            this.cursorsShowing = !this.cursorsShowing;
+            $(document).trigger(this.cursorsShowing ? chatView.events.cursorsOn : chatView.events.cursorsOff);
+        },
+        soundToggleClick: function() {
+            this.alertSound = !this.alertSound;
+            this.$soundToggle.toggleClass('active');
+        },
+        keyUp: function(event) {
+            switch(event.which) {
+                case 13: // enter
+                  Private.handleInputMessage.call(this);
+                  break;
+            }
+        },
+        inputFocus: function() {
+            $(document).trigger(chatView.events.inputFocus);
+        },
+        inputBlur: function() {
+            $(document).trigger(chatView.events.inputBlur);
+        }
+    };
+
+    chatView = function(messages, mapper, room) {
+        var self = this;
+
+        this.room = room;
+        this.mapper = mapper;
+        this.messages = messages; // backbone collection
+
+        this.isOpen = false;
+        this.alertSound = true; // whether to play sounds on arrival of new messages or not
+        this.cursorsShowing = true;
+        this.videosShowing = true;
+        this.unreadMessages = 0;
+        this.participants = new Backbone.Collection();
+
+        Private.templates.call(this);
+        Private.createElements.call(this);
+        Private.attachElements.call(this);
+        Private.addEventListeners.call(this);
+        Private.initialMessages.call(this);
+        Private.initializeSounds.call(this);
+        this.$container.css({
+            right: '-300px'
+        });
+    };
+
+    chatView.prototype.conversationInProgress = function (participating) {
+      this.$conversationInProgress.show();
+      this.$participants.addClass('is-live');
+      if (participating) this.$participants.addClass('is-participating');
+      this.$button.addClass('active');
+
+      // hide invite to call buttons
+    }
+
+    chatView.prototype.conversationEnded = function () {
+      this.$conversationInProgress.hide();
+      this.$participants.removeClass('is-live');
+      this.$participants.removeClass('is-participating');
+      this.$button.removeClass('active');
+      this.$participants.find('.participant').removeClass('active');
+      this.$participants.find('.participant').removeClass('pending');
+    }
+
+    chatView.prototype.leaveConversation = function () {
+      this.$participants.removeClass('is-participating');
+    }
+
+    chatView.prototype.mapperJoinedCall = function (id) {
+      this.$participants.find('.participant-' + id).addClass('active');
+    }
+
+    chatView.prototype.mapperLeftCall = function (id) {
+      this.$participants.find('.participant-' + id).removeClass('active');
+    }
+
+    chatView.prototype.invitationPending = function (id) {
+      this.$participants.find('.participant-' + id).addClass('pending');
+    }
+
+    chatView.prototype.invitationAnswered = function (id) {
+      this.$participants.find('.participant-' + id).removeClass('pending');
+    }
+
+    chatView.prototype.addParticipant = function (participant) {
+        this.participants.add(participant);
+    }
+
+    chatView.prototype.removeParticipant = function (username) {
+        var p = this.participants.find(function (p) { return p.get('username') === username; });
+        if (p) {
+            this.participants.remove(p);
+        }
+    }
+
+    chatView.prototype.removeParticipants = function () {
+        this.participants.remove(this.participants.models);
+    }
+
+    chatView.prototype.open = function () {
+        this.$container.css({
+            right: '0'
+        });
+        this.$messageInput.focus();
+        this.isOpen = true;
+        this.unreadMessages = 0;
+        this.$unread.hide();
+        this.scrollMessages(0);
+        $(document).trigger(chatView.events.openTray);
+    }
+
+    chatView.prototype.addMessage = function(message, isInitial, wasMe) {
+      this.messages.add(message);
+      Private.addMessage.call(this, message, isInitial, wasMe);
+    }
+
+    chatView.prototype.scrollMessages = function(duration) {
+        duration = duration || 0;
+
+        this.$messages.animate({
+            scrollTop: this.$messages[0].scrollHeight
+        }, duration);
+    }
+
+    chatView.prototype.clearMessages = function () {
+        this.unreadMessages = 0;
+        this.$unread.hide();
+        this.$messages.empty();
+    }
+
+    chatView.prototype.close = function () {
+        this.$container.css({
+            right: '-300px'
+        });
+        this.$messageInput.blur();
+        this.isOpen = false;
+        $(document).trigger(chatView.events.closeTray);
+    }
+
+    chatView.prototype.remove = function () {
+        this.$button.off();
+        this.$container.remove();
+    }
+
+    /**
+     * @class
+     * @static
+     */
+    chatView.events = {
+        message: 'ChatView:message',
+        openTray: 'ChatView:openTray',
+        closeTray: 'ChatView:closeTray',
+        inputFocus: 'ChatView:inputFocus',
+        inputBlur: 'ChatView:inputBlur',
+        cursorsOff: 'ChatView:cursorsOff',
+        cursorsOn: 'ChatView:cursorsOn',
+        videosOff: 'ChatView:videosOff',
+        videosOn: 'ChatView:videosOn'
+    };
+
+    return chatView;
+
+})();

app/assets/javascripts/src/views/room.js

@@ -0,0 +1,195 @@
+Metamaps.Views = Metamaps.Views || {};
+
+Metamaps.Views.room = (function () {
+
+    var ChatView = Metamaps.Views.chatView;
+    var VideoView = Metamaps.Views.videoView;
+
+    var room = function(opts) {
+      var self = this;
+
+      this.isActiveRoom = false;
+      this.socket = opts.socket;
+      this.webrtc = opts.webrtc;
+      //this.roomRef = opts.firebase;
+      this.room = opts.room;
+      this.config = opts.config;
+      this.peopleCount = 0;
+
+      this.$myVideo = opts.$video;
+      this.myVideo = opts.myVideoView;
+
+      this.messages = new Backbone.Collection();
+      this.currentMapper = new Backbone.Model({ name: opts.username, image: opts.image });
+      this.chat = new ChatView(this.messages, this.currentMapper, this.room);
+
+      this.videos = {};
+
+      this.init();
+    };
+
+    room.prototype.join = function(cb) {
+      this.isActiveRoom = true;
+      this.webrtc.joinRoom(this.room, cb);
+      this.chat.conversationInProgress(true); // true indicates participation
+    }
+
+    room.prototype.conversationInProgress = function() {
+      this.chat.conversationInProgress(false); // false indicates not participating
+    }
+
+    room.prototype.conversationEnding = function() {
+      this.chat.conversationEnded();
+    }
+
+    room.prototype.leaveVideoOnly = function() {
+      this.chat.leaveConversation(); // the conversation will carry on without you
+      for (var id in this.videos) {
+        this.removeVideo(id);
+      }
+      this.isActiveRoom = false;
+      this.webrtc.leaveRoom();
+    }
+
+    room.prototype.leave = function() {
+      for (var id in this.videos) {
+        this.removeVideo(id);
+      }
+      this.isActiveRoom = false;
+      this.webrtc.leaveRoom();
+      this.chat.conversationEnded();
+      this.chat.removeParticipants();
+      this.chat.clearMessages();
+      this.messages.reset();
+    }
+
+    room.prototype.setPeopleCount = function(count) {
+      this.peopleCount = count;
+    }
+
+    room.prototype.init = function () {
+        var self = this;
+
+        $(document).on(VideoView.events.audioControlClick, function (event, videoView) {
+          if (!videoView.audioStatus) self.webrtc.mute();
+          else if (videoView.audioStatus) self.webrtc.unmute();
+        });
+        $(document).on(VideoView.events.videoControlClick, function (event, videoView) {
+          if (!videoView.videoStatus) self.webrtc.pauseVideo();
+          else if (videoView.videoStatus) self.webrtc.resumeVideo();
+        });
+
+        this.webrtc.webrtc.off('peerStreamAdded');
+        this.webrtc.webrtc.off('peerStreamRemoved');
+        this.webrtc.on('peerStreamAdded', function (peer) {
+          var mapper = Metamaps.Realtime.mappersOnMap[peer.nick];
+          peer.avatar = mapper.image;
+          peer.username = mapper.name;
+          if (self.isActiveRoom) {
+              self.addVideo(peer);
+          }
+        });
+
+        this.webrtc.on('peerStreamRemoved', function (peer) {
+          if (self.isActiveRoom) {
+              self.removeVideo(peer);
+          }
+        });
+
+        this.webrtc.on('mute', function (data) {
+          var v = self.videos[data.id];
+          if (!v) return;
+
+          if (data.name === 'audio') {
+            v.audioStatus = false;
+          }
+          else if (data.name === 'video') {
+            v.videoStatus = false;
+            v.$avatar.show();
+          }
+          if (!v.audioStatus && !v.videoStatus) v.$container.hide();
+        });
+        this.webrtc.on('unmute', function (data) {
+          var v = self.videos[data.id];
+          if (!v) return;
+
+          if (data.name === 'audio') {
+            v.audioStatus = true;
+          }
+          else if (data.name === 'video') {
+            v.videoStatus = true;
+            v.$avatar.hide();
+          }
+          v.$container.show();
+        });
+
+        var sendChatMessage = function (event, data) {
+          self.sendChatMessage(data);
+        };
+        $(document).on(ChatView.events.message + '-' + this.room, sendChatMessage);
+      }
+
+      room.prototype.videoAdded = function (callback) {
+          this._videoAdded = callback;
+      }
+
+      room.prototype.addVideo = function (peer) {
+        var
+          id = this.webrtc.getDomId(peer),
+          video = attachMediaStream(peer.stream);
+
+        var
+          v = new VideoView(video, null, id, false, { DOUBLE_CLICK_TOLERANCE: 200, avatar: peer.avatar, username: peer.username });
+
+        this.videos[peer.id] = v;
+        if (this._videoAdded) this._videoAdded(v, peer.nick);
+      }
+
+      room.prototype.removeVideo = function (peer) {
+          var id = typeof peer == 'string' ? peer : peer.id;
+          if (this.videos[id]) {
+            this.videos[id].remove();
+            delete this.videos[id];
+          }
+      }
+
+      room.prototype.sendChatMessage = function (data) {
+        var self = this;
+          //this.roomRef.child('messages').push(data);
+          if (self.chat.alertSound) self.chat.sound.play('sendchat');
+          var m = new Metamaps.Backbone.Message({
+            message: data.message,
+            resource_id: Metamaps.Active.Map.id,
+            resource_type: "Map"
+          });
+          m.save(null, {
+            success: function (model, response) {
+              self.addMessages(new Metamaps.Backbone.MessageCollection(model), false, true);
+              $(document).trigger(room.events.newMessage, [model]);
+            },
+            error: function (model, response) {
+              console.log('error!', response);
+            }
+          });
+      }
+
+      // they should be instantiated as backbone models before they get
+      // passed to this function
+      room.prototype.addMessages = function (messages, isInitial, wasMe) {
+        var self = this;
+
+        messages.models.forEach(function (message) {
+          self.chat.addMessage(message, isInitial, wasMe);
+        });
+      }
+
+    /**
+     * @class
+     * @static
+     */
+    room.events = {
+        newMessage: "Room:newMessage"
+    };
+
+    return room;
+})();

app/assets/javascripts/src/views/videoView.js

@@ -0,0 +1,207 @@
+Metamaps.Views = Metamaps.Views || {};
+
+Metamaps.Views.videoView = (function () {
+
+    var videoView;
+
+    var Private = {
+        addControls: function() {
+            var self = this;
+
+            this.$audioControl = $('<div class="video-audio"></div>');
+            this.$videoControl = $('<div class="video-video"></div>');
+
+            this.$audioControl.on('click', function () {
+                Handlers.audioControlClick.call(self);
+            });
+
+            this.$videoControl.on('click', function () {
+                Handlers.videoControlClick.call(self);
+            });
+
+            this.$container.append(this.$audioControl);
+            this.$container.append(this.$videoControl);
+        },
+        cancelClick: function() {
+            this.mouseIsDown = false;
+
+            if (this.hasMoved) {
+
+            }
+
+            $(document).trigger(videoView.events.dragEnd);
+        }
+    };
+
+    var Handlers = {
+        mousedown: function(event) {
+            this.mouseIsDown = true;
+            this.hasMoved = false;
+            this.mouseMoveStart = {
+                x: event.pageX,
+                y: event.pageY
+            };
+            this.posStart = {
+                x: parseInt(this.$container.css('left'), '10'),
+                y: parseInt(this.$container.css('top'), '10')
+            }
+
+            $(document).trigger(videoView.events.mousedown);
+        },
+        mouseup: function(event) {
+            $(document).trigger(videoView.events.mouseup, [this]);
+
+            var storedTime = this.lastClick;
+            var now = Date.now();
+            this.lastClick = now;
+
+            if (now - storedTime < this.config.DOUBLE_CLICK_TOLERANCE) {
+                $(document).trigger(videoView.events.doubleClick, [this]);
+            }
+        },
+        mousemove: function(event) {
+            var
+              diffX,
+              diffY,
+              newX,
+              newY;
+
+            if (this.$parent && this.mouseIsDown) {
+                this.manuallyPositioned = true;
+                this.hasMoved = true;
+                diffX = event.pageX - this.mouseMoveStart.x;
+                diffY = this.mouseMoveStart.y - event.pageY;
+                newX = this.posStart.x + diffX;
+                newY = this.posStart.y - diffY;
+                this.$container.css({
+                    top: newY,
+                    left: newX
+                });
+            }
+        },
+        audioControlClick: function() {
+            if (this.audioStatus) {
+              this.audioOff();
+            } else {
+              this.audioOn();
+            }
+            $(document).trigger(videoView.events.audioControlClick, [this]);
+        },
+        videoControlClick: function() {
+            if (this.videoStatus) {
+              this.videoOff();
+            } else {
+              this.videoOn();
+            }
+            $(document).trigger(videoView.events.videoControlClick, [this]);
+        },
+    };
+
+    var videoView = function(video, $parent, id, isMyself, config) {
+        var self = this;
+
+        this.$parent = $parent; // mapView
+
+        this.video = video;
+        this.id = id;
+
+        this.config = config;
+
+        this.mouseIsDown = false;
+        this.mouseDownOffset = { x: 0, y: 0 };
+        this.lastClick = null;
+        this.hasMoved = false;
+
+        this.audioStatus = true;
+        this.videoStatus = true;
+
+        this.$container = $('<div></div>');
+        this.$container.addClass('collaborator-video' + (isMyself ? ' my-video' : ''));
+        this.$container.attr('id', 'container_' + id);
+
+
+        var $vidContainer = $('<div></div>');
+        $vidContainer.addClass('video-cutoff');
+        $vidContainer.append(this.video);
+
+        this.avatar = config.avatar;
+        this.$avatar = $('<img draggable="false" class="collaborator-video-avatar" src="' + config.avatar + '" width="150" height="150" />');
+        $vidContainer.append(this.$avatar);
+
+        this.$container.append($vidContainer);
+
+        this.$container.on('mousedown', function (event) {
+            Handlers.mousedown.call(self, event);
+        });
+
+        if (isMyself) {
+          Private.addControls.call(this);
+        }
+
+        // suppress contextmenu
+        this.video.oncontextmenu = function () { return false; };
+
+        if (this.$parent) this.setParent(this.$parent);
+    };
+
+    videoView.prototype.setParent = function($parent) {
+        var self = this;
+        this.$parent = $parent;
+        this.$parent.off('.video' + this.id);
+        this.$parent.on('mouseup.video' + this.id, function (event) {
+            Handlers.mouseup.call(self, event);
+            Private.cancelClick.call(self);
+        });
+        this.$parent.on('mousemove.video' + this.id, function (event) {
+            Handlers.mousemove.call(self, event);
+        });
+    }
+
+    videoView.prototype.setAvatar = function (src) {
+        this.$avatar.attr('src', src);
+        this.avatar = src;
+    }
+
+    videoView.prototype.remove = function () {
+        this.$container.off();
+        if (this.$parent) this.$parent.off('.video' + this.id);
+        this.$container.remove();
+    }
+
+    videoView.prototype.videoOff = function () {
+      this.$videoControl.addClass('active');
+      this.$avatar.show();
+      this.videoStatus = false;
+    }
+
+    videoView.prototype.videoOn = function () {
+      this.$videoControl.removeClass('active');
+      this.$avatar.hide();
+      this.videoStatus = true;
+    }
+
+    videoView.prototype.audioOff = function () {
+      this.$audioControl.addClass('active');
+      this.audioStatus = false;
+    }
+
+    videoView.prototype.audioOn = function () {
+      this.$audioControl.removeClass('active');
+      this.audioStatus = true;
+    }
+
+    /**
+     * @class
+     * @static
+     */
+    videoView.events = {
+        mousedown: "VideoView:mousedown",
+        mouseup: "VideoView:mouseup",
+        doubleClick: "VideoView:doubleClick",
+        dragEnd: "VideoView:dragEnd",
+        audioControlClick: "VideoView:audioControlClick",
+        videoControlClick: "VideoView:videoControlClick",
+    };
+
+    return videoView;
+})();

app/assets/javascripts/test/Metamaps.Import.spec.js

@@ -1,12 +1,12 @@
-/* global describe, it */
+var chai = require('chai')
+var expect = chai.expect
 
-import { expect } from 'chai'
-
-import Import from '../../src/Metamaps/Import.js'
+Metamaps = {}
+Metamaps.Import = require('../src/Metamaps.Import')
 
 describe('Metamaps.Import.js', function() {
   it('has a topic whitelist', function() {
-    expect(Import.topicWhitelist).to.deep.equal(
+    expect(Metamaps.Import.topicWhitelist).to.deep.equal(
       ['id', 'name', 'metacode', 'x', 'y', 'description', 'link', 'permission']
     )
   })

app/assets/secret_stylesheets/application-secret.scss.erb

@@ -1,12 +0,0 @@
-/*
- * This is a manifest file that'll be compiled into application.css, which will include all the files
- * listed below.
- *
- * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
- * or vendor/assets/stylesheets of plugins, if any, can be referenced here using a relative path.
- *
- * You're free to add application-wide styles to this file and they'll appear at the top of the
- * compiled file, but it's generally better to create a new file per style scope.
- *
- *= require ./special
-*/

app/assets/secret_stylesheets/special.scss.erb

@@ -1,109 +0,0 @@
-#metacodeSelector {
-  display: none;
-}
-.metacodeSelect {
-  border-top: 1px solid #DDD;
-  padding: 0;
-  background: #FFF;
-    
-  .metacodeFilterInput {
-    width: 100px;
-    outline: none;
-    border: 0;
-    padding: 8px;
-    font-size: 14px;
-    line-height: 14px;
-    color: #424242;
-    font-family: 'din-medium', helvetica, sans-serif;
-  }
-  
-  .metacodeList {
-    list-style: none;
-    background: #FFF;
-    
-    li {
-      padding: 8px;
-      cursor: pointer;
-      
-      &:hover, &.keySelect {
-        background: #4CAF50;
-      }
-    }
-
-    img {
-      width: 24px;
-      height: 24px;
-      display: inline-block;
-      vertical-align: middle;
-      padding-right: 6px;
-    }
-  }
-}
-.selectedMetacode {
-  float: left;
-  background: #FFF;
-  border-top-left-radius: 2px;
-  border-bottom-left-radius: 2px;
-  padding: 5px 10px 5px 6px;
-  vertical-align: top;
-  border-right: 1px solid #DDD;
-  cursor: pointer;
-}
-.selectedMetacode:hover, .selectedMetacode.isBeingSelected {
-  background: #EDEDED;
-}
-.selectedMetacode img {
-  width: 24px;
-  height: 24px;
-  display: inline-block;
-  vertical-align: middle;
-}
-.selectedMetacode span {
-  vertical-align: middle;
-}
-.selectedMetacode .downArrow {
-  display: inline-block;
-  vertical-align: middle;
-  width: 0;
-  height: 0;
-  border-style: solid;
-  border-width: 8px 6px 0 6px;
-  border-color: #777 transparent transparent transparent;
-  margin-left: 2px;
-  margin-top: 4px;
-}
-.new_topic {
-    margin: 0;
-    margin-top: -17px;
-    white-space: nowrap;
-}
-#new_topic .twitter-typeahead {
-     position: relative !important;
-     top: 0;
-     left: 0;
-}
-.new_topic #topic_name,
-.new_topic .tt-hint {
-     border-radius: none;
-     border-top-right-radius: 2px;
-     border-bottom-right-radius: 2px;
-}
-.openMetacodeSwitcher {
-    top: -16px;
-    left: -16px;
-}
-#metacodeImg {
-     height: 120px;
-     width: 380px;
-     display: none;
-     position: absolute !important;
-     top: -30px;
-     z-index: -1;
-}
-#metacodeImgTitle {
-     display: none;
-     float: left;
-     width: 120px;
-     text-align: center;
-     margin-left: 110px;
-}

app/assets/stylesheets/admin.scss.erb

@@ -56,15 +56,16 @@
   }
 
   li.toggledOff {
-    opacity: 0.6;
+    opacity: 0.4;
   }
 }
 
-.centerContent {
+.blackBox {
   width: 760px;
   margin: 0 auto;
-  padding: 80px 0 60px 20px;
-  background: rgba(125, 125, 125, 0.4);
+  padding: 20px 0 60px 20px;
+  background: rgba(0, 0, 0, 0.4);
+  color: white;
   overflow: hidden;
   position: relative;
 
@@ -84,10 +85,10 @@
     display: table-row;
   }
   tr:nth-child(odd) {
-    background: rgba(125, 125, 125, 0.2);
+    background: rgba(0, 0, 0, 0.2);
   }
   tr:nth-child(even) {
-    background: rgba(125, 125, 125, 0.3);
+    background: rgba(0, 0, 0, 0.3);
   }
   th,
   td {

app/assets/stylesheets/application.css.erb

@@ -78,18 +78,11 @@ html {
 
 }
 body {
-  background: #d8d9da url(<%= asset_path('shattered_@2X.png') %>);
-  font-family: 'din-medium', helvetica, sans-serif;
-  color: #424242;
-  -moz-osx-font-smoothing: grayscale;
-  overflow-x: hidden;
+    background: #d8d9da url(<%= asset_data_uri('shattered_@2X.png') %>);
+    font-family: 'din-medium', helvetica, sans-serif;
+    color: #424242;
+    -moz-osx-font-smoothing: grayscale;
 
-  &.controller-main,
-  &.controller-maps,
-  &.controller-topics,
-  &.controller-explore {
-    overflow-y: hidden;
-  }
 }
 h1,
 h2,
@@ -149,7 +142,6 @@ button.button.btn-no:hover {
 .toast .toast-button {
     margin-top: -10px;
     margin-left: 10px;
-    margin-bottom: -10px;
 }
 /*
  * Utility
@@ -193,6 +185,10 @@ button.button.btn-no:hover {
     display: block;
     width: 830px;
 }
+.requestInvite {
+    display: block;
+    margin: -720px auto 0;
+}
 .new_session,
 .new_user,
 .edit_user,
@@ -527,12 +523,10 @@ button.button.btn-no:hover {
     left: -1000px;
     display: block;
     position: absolute;
+    width: 340px;
     margin: -40px 0 0 -35px;
     z-index: 1;
 }
-body:not(.action-conversation) .new_topic {
-  width: 340px;
-}
 
 #new_topic .twitter-typeahead {
     position: absolute !important;
@@ -573,26 +567,6 @@ body:not(.action-conversation) .new_topic {
 .openMetacodeSwitcher:hover {
     background-position: -16px 0;
 }
-.pinCarousel {
-    cursor: pointer;
-    display: block;
-    height: 16px;
-    width: 16px;
-    background-image: url(<%= asset_data_uri('pincarousel_sprite.png') %>);
-    position: absolute;
-    z-index: 2;
-    top: 20px;
-    right: 16px;
-}
-.pinCarousel:hover {
-    background-position: 0 -16px;
-}
-.pinCarousel.isPinned {
-    background-position: -16px 0;
-}
-.pinCarousel.isPinned:hover {
-    background-position: -16px -16px;
-}
 #metacodeImg {
     height: 120px;
 }
@@ -668,21 +642,9 @@ label {
     position: relative;
     /*overflow:hidden; */
 }
-.compressed {
-  .upperRightUI {
-    right: 324px;
-  }
-  .upperRightMapButtons {
-    right: 434px;
-  }
-  .mapControls {
-    right: 324px;
-  }
-  .infoAndHelp {
-    right: 370px;
-  }
+.main.compressed {
+  width: calc(100% - 300px);
 }
-
 #infovis-canvas {
     -webkit-touch-callout: none;
     -webkit-user-select: none;
@@ -783,9 +745,9 @@ label {
 }
 .sidebarAccountIcon img {
     border-radius: 16px;
-    width: 32px;
 }
 .sidebarAccountBox {
+    display: none;
     height: auto;
 }
 .authenticated .sidebarAccountBox {
@@ -826,7 +788,6 @@ label {
     font-size: 14px;
     line-height: 14px;
     color: #757575;
-    cursor: pointer;
 }
 .accountListItem:hover {
     color: #424242;
@@ -837,7 +798,7 @@ label {
     position:absolute;
     pointer-events:none;
     background-repeat:no-repeat;
-    background-image: url(<%= asset_path('user_sprite.png') %>);
+    background-image: url(<%= asset_data_uri('user_sprite.png') %>);
 }
 .accountSettings .accountIcon {
     background-position: 0 0;
@@ -845,9 +806,6 @@ label {
 .accountAdmin .accountIcon {
     background-position: 0 -32px;
 }
-.accountApps .accountIcon {
-    background-position: 0 -32px;
-}
 .accountInvite .accountIcon {
     background-position: 0 -64px;
 }
@@ -1048,6 +1006,7 @@ label[for="user_remember_me"] {
 }
 
 .sidebarFilterBox {
+    display:none;
     width: 319px;
     padding: 16px 0;
     overflow-y: auto;
@@ -1258,7 +1217,7 @@ h3.filterBox {
     box-shadow: 0px 3px 3px rgba(0,0,0,0.12), 0 3px 3px rgba(0,0,0,0.24);
 }
 .rightclickmenu .rc-permission:hover > ul,
-.rightclickmenu .rc-metacode:hover #metacodeOptions > ul,
+.rightclickmenu .rc-metacode:hover > ul,
  .rightclickmenu .rc-siblings:hover > ul {
     display: block;
 }
@@ -1287,12 +1246,11 @@ h3.filterBox {
 .rightclickmenu li.toPrivate .rc-perm-icon {
     background-position: -24px 0;
 }
-.rightclickmenu .rc-metacode #metacodeOptions > ul > li,
+.rightclickmenu .rc-metacode > ul > li,
 .rightclickmenu .rc-siblings > ul > li {
     padding: 6px 24px 6px 8px;
-    white-space: nowrap;
     width: auto;
-    min-width: 5em;
+    white-space: nowrap;
 }
 .rightclickmenu .rc-metacode ul ul,
 .rightclickmenu .rc-siblings ul ul {
@@ -1546,8 +1504,9 @@ h3.filterBox {
     background-image: url(<%= asset_data_uri('permissions32_sprite.png') %>);
 }
 /* map info box */
+/* map info box */
 
-.wrapper .mapInfoBox {
+.wrapper div.mapInfoBox {
     display: none;
     position: absolute;
     bottom: 40px;
@@ -1555,74 +1514,12 @@ h3.filterBox {
     background-color: #424242;
     color: #F5F5F5;
     border-radius: 2px;
-    box-shadow: 0 3px 3px rgba(0,0,0,0.23), 0px 3px 3px rgba(0,0,0,0.16);
-    text-align: center;
-    font-style: normal;
-}
-.import-dialog{
-  button {
-    margin: 1em 0.5em;
-  }
-  .import-blue-button {
-    display: inline-block;
-    box-sizing: border-box;
-    margin: 0.75em;
-    padding: 0.75em;
-    padding-top: 0.85em;
-    height: 3em;
-    background-color: #AAB0FB;
-    border-radius: 0.3em;
-    color: white;
-    cursor: pointer;
-  }
-  .fileupload {
-    box-sizing: border-box;
-    margin: 0.75em;
-    padding: 0.75em;
-    height: 3em;
-    border: 3px dashed #AAB0FB;
-    width: 75%;
-    text-align: center;
-    cursor: pointer;
-  }
-}
-.wrapper .mapInfoBox {
     width: 360px;
     min-height: 300px;
     padding: 0;
-}
-.requestTitle {
-    display: none;
-    position: absolute;
-    background: black;
-    text-align: center;
-    text-transform: none;
-    color: white;
-    border-radius: 2px;
-    font-family: din-regular;
-    line-height: 18px;
-    font-size: 15px;
-    padding: 3px 5px 2px;
-    white-space: nowrap;
     font-style: normal;
-    left: 50%;
-    margin-left: -100px;
-    top: -15px;
-}
-.mapRequestTitle .requestTitle {
-    display: block;
-}
-.requestTitle:after {
-    content: '';
-    position: absolute;
-    top: 23px;
-    left: 50%;
-    margin-left: -8px;
-    width: 0;
-    height: 0;
-    border-top: 10px solid #000000;
-    border-left: 8px solid transparent;
-    border-right: 8px solid transparent;
+    text-align: center;
+    box-shadow: 0 3px 3px rgba(0,0,0,0.23), 0px 3px 3px rgba(0,0,0,0.16);
 }
 .mapInfoName {
     font-size: 18px;
@@ -1675,12 +1572,13 @@ h3.filterBox {
 
 .commonsMap .mapContributors {
     visibility: hidden;
+    margin-left: 34px;
 }
 
 .mapContributors {
     position: relative;
     height: 30px;
-    margin: 9px 0px 9px 44px;
+    margin: 9px 0px 9px 56px;
     padding: 0;
     width: 64px;
 }
@@ -1901,7 +1799,7 @@ input.collaboratorSearchField {
     width: 32px;
     height: 32px;
     padding: 0;
-    margin: 8px 30px 8px 10px;
+    margin: 8px 12px 8px 10px;
     position: relative;
     background-image: url(<%= asset_data_uri('permissions32_sprite.png') %>);
 }
@@ -1915,10 +1813,14 @@ input.collaboratorSearchField {
     background-position: -32px 0;
 }
 .yourMap .mapPermission:hover {
+    background-image: url(<%= asset_data_uri('arrowperms_sprite.png') %>);
     cursor: pointer;
+    background-position: -32px 0;
 }
 .yourMap .mapPermission.minimize {
+    background-image: url(<%= asset_data_uri('arrowperms_sprite.png') %>) !important;
     cursor: pointer;
+    background-position: 0 0;
 }
 .mapInfoBox .mapPermission .permissionSelect {
     list-style: none;
@@ -2019,7 +1921,6 @@ input.collaboratorSearchField {
     position: relative;
     cursor: pointer;
     display: none;
-    padding: 0 2px;
 }
 .mapInfoShareIcon {
     width: 24px;
@@ -2059,43 +1960,6 @@ and it won't be important on password protected instances */
 .yourMap .mapInfoDelete {
     display: block;
 }
-
-.mapInfoButtonsWrapper .mapInfoThumbnail {
-  display: block;
-  background-image: url(<%= asset_path('screenshot_sprite.png') %>);
-  width: 32px;
-  height: 32px;
-
-  & > span {
-    bottom: -8px;
-    right: 2px;
-    font-size: 12px;
-    color: #e0e0e0;
-
-    &:hover {
-      color: white;
-    }
-  }
-
-  .tooltip {
-    display: none;
-  }
-
-  &:hover {
-    background-position: -32px 0;
-
-    .tooltip {
-      display: block;
-      position: absolute;
-      bottom: 30px;
-      background: black;
-      color: white;
-      border-radius: 2px;
-      padding: 3px 5px 2px 5px;
-    }
-  }
-}
-
 .mapInfoButtonsWrapper span {
     position: absolute;
     width: 100%;
@@ -2110,17 +1974,17 @@ and it won't be important on password protected instances */
     left: 0;
     width: 100%;
     height: 100%;
-    position: absolute;
+    position: fixed;
     z-index: 1000000;
     display: none;
 }
 #lightbox_main {
     width: 800px;
+    height: auto;
     margin: 0 auto;
     z-index: 2;
     position: relative;
-    top: 5vh;
-    height: 90vh;
+    top: 50%;
     background-color: transparent;
     color: black;
 }
@@ -2159,10 +2023,8 @@ and it won't be important on password protected instances */
     background-position: center center;
 }
 #lightbox_content {
-    width: 800px;
-    max-height: 90vh;
-    box-sizing: border-box;
-    overflow-y: auto;
+    width: 552px;
+    height: 434px;
     background-color: #e0e0e0;
     padding: 64px 124px 64px 124px;
     box-shadow: 0px 6px 3px rgba(0, 0, 0, 0.23), 10px 10px 10px rgba(0, 0, 0, 0.19);
@@ -2244,34 +2106,41 @@ and it won't be important on password protected instances */
     color: #00bcd4;
 }
 .lightbox_links .lightboxAboutIcon {
+    background-image: url(<%= asset_data_uri('about_sprite.png') %>);
+    background-repeat: no-repeat;
     width:32px;
     height:32px;
     margin:10px auto;
 }
-.icon_twitter .lightboxAboutIcon,
-.icon_source_code .lightboxAboutIcon,
-.icon_terms .lightboxAboutIcon {
-    background-image: url(<%= asset_data_uri('about_sprite.png') %>);
-    background-repeat: no-repeat;
+#lightbox_metamapps .lightboxAboutIcon {
     background-position: 0 0;
 }
-.icon_twitter .lightboxAboutIcon {
-  background-position: 0 0;
-  &:hover {
+#lightbox_community .lightboxAboutIcon {
+    background-position: -32px 0;
+}
+#lightbox_source .lightboxAboutIcon {
+    background-position: -64px 0;
+}
+#lightbox_blog .lightboxAboutIcon {
+    background-position: -96px 0;
+}
+#lightbox_term .lightboxAboutIcon {
+    background-position: -128px 0;
+}
+#lightbox_metamapps:hover .lightboxAboutIcon {
     background-position: 0 -32px;
-  }
 }
-.icon_source_code .lightboxAboutIcon {
-  background-position: -64px 0;
-  &:hover {
+#lightbox_community:hover .lightboxAboutIcon {
+    background-position: -32px -32px;
+}
+#lightbox_source:hover .lightboxAboutIcon {
     background-position: -64px -32px;
-  }
 }
-.icon_terms .lightboxAboutIcon {
-  background-position: -128px 0;
-  &:hover {
+#lightbox_blog:hover .lightboxAboutIcon {
+    background-position: -96px -32px;
+}
+#lightbox_term:hover .lightboxAboutIcon {
     background-position: -128px -32px;
-  }
 }
 
 /* jquery ui tabs */
@@ -2315,9 +2184,6 @@ and it won't be important on password protected instances */
 }
 /* switch metacode set */
 
-#switchMetacodes > p {
-    margin: 16px 0 16px 0;
-}
 #metacodeSwitchTabs {
     width: 100%;
     font-size: 17px;
@@ -2325,43 +2191,28 @@ and it won't be important on password protected instances */
     border: none;
     background: none;
     padding: 0;
-
-    .setDesc,
-    .selectAll,
-    .selectNone {
-        margin-bottom: 5px;
-        font-family: 'din-medium', helvetica, sans-serif;
-        color: #424242;
-        font-size: 14px;
-        text-align: justify;
-        padding-right: 16px;
-        display: inline-block;
-    }
-
-    .selectAll,
-    .selectNone {
-      float: right;
-      cursor: pointer;
-
-      &:hover,
-      &.selected {
-        color: #00bcd4;
-      }
-    }
-
-    & > ul {
-        width: 130px;
-
-        li {
-            font-size: 14px;
-            text-transform: uppercase;
-        }
-    }
-
-    li.ui-state-active a {
-        color: #00BCD4;
-        cursor: pointer;
-    }
+}
+#metacodeSwitchTabs .setDesc {
+    margin-bottom: 5px;
+    font-family: 'din-medium', helvetica, sans-serif;
+    color: #424242;
+    font-size: 14px;
+    text-align: justify;
+    padding-right: 16px;
+}
+#switchMetacodes > p {
+    margin: 16px 0 16px 0;
+}
+#metacodeSwitchTabs > ul {
+    width: 130px;
+}
+#metacodeSwitchTabs > ul li {
+    font-size: 14px;
+    text-transform: uppercase;
+}
+#metacodeSwitchTabs li.ui-state-active a {
+    color: #00BCD4;
+    cursor: pointer;
 }
 .metacodeSwitchTab {
     max-height: 300px;
@@ -2930,18 +2781,146 @@ and it won't be important on password protected instances */
     color: #424242;
 }
 
+/* Admin Pages */
+
+.blackBox {
+    width: 760px;
+    margin: 0 auto;
+    padding: 20px 0 60px 20px;
+    background: rgba(0, 0, 0, 0.4);
+    color: white;
+    overflow: hidden;
+    position: relative;
+}
+.blackBox .metacodeSetsDescription {
+    width: 314px;
+}
+.blackBox td.metacodeSetDesc {
+    width: 314px;
+    word-wrap: break-word;
+}
+.blackBox .metacodeSetImage {
+    width: 36px;
+    height: 36px;
+    float: left;
+}
+.blackBox tr {
+    display: table-row;
+}
+.blackBox tr:nth-child(odd) {
+    background: rgba(0, 0, 0, 0.2);
+}
+.blackBox tr:nth-child(even) {
+    background: rgba(0, 0, 0, 0.3);
+}
+.blackBox th,
+.blackBox td {
+    padding: 10px;
+}
+.blackBox td.iconURL {
+    max-width: 415px;
+    word-wrap: break-word;
+}
+.blackBox td.iconColor {
+
+}
+.blackBox .field {
+    margin: 15px 0 5px;
+}
+.blackBox label {
+    float: left;
+    width: 100px;
+    margin-right: 15px;
+}
+.blackBox input[type="text"] {
+    width: 336px;
+    height: 32px;
+    font-size: 15px;
+    direction: ltr;
+    -webkit-appearance: none;
+    appearance: none;
+    display: inline-block;
+    margin: 0;
+    padding: 0 8px;
+    background: #fff;
+    border: 1px solid #d9d9d9;
+    border-top: 1px solid #c0c0c0;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+    -webkit-border-radius: 1px;
+    -moz-border-radius: 1px;
+    border-radius: 1px;
+    font: -webkit-small-control;
+    color: initial;
+    letter-spacing: normal;
+    word-spacing: normal;
+    text-transform: none;
+    text-indent: 0px;
+    text-shadow: none;
+    display: inline-block;
+    text-align: start;
+    font-family: arial;
+}
+.blackBox input[type="text"]:hover,
+.blackBox textarea:hover {
+    border: 1px solid #b9b9b9;
+    border-top: 1px solid #a0a0a0;
+    -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
+    -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
+    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
+}
+.blackBox textarea {
+    padding: 8px;
+    border: 1px solid #d9d9d9;
+    border-top: 1px solid #c0c0c0;
+    resize: none;
+    font: -webkit-small-control;
+    letter-spacing: normal;
+    word-spacing: normal;
+    text-transform: none;
+    text-indent: 0px;
+    text-shadow: none;
+    text-align: start;
+    font-family: arial;
+    font-size: 15px;
+    line-height: 17px;
+    width: 318px;
+}
+.blackBox .allMetacodes {
+    padding: 5px 0;
+}
+.blackBox a.button {
+    margin-right: 20px;
+    line-height: 40px;
+}
+.blackBox a.button,
+.blackBox input.add {
+    float: left;
+    margin-top: 5px;
+    height: 40px;
+    font-size: 17px;
+    width: auto;
+    padding: 0 30px;
+    cursor: pointer;
+    font-weight: normal;
+}
+.blackBox a.button:hover,
+.blackBox input.add:hover {
+    -webkit-box-shadow: none;
+    box-shadow: none;
+}
+
 /* request */
 
-.requestInvite {
+#wrapper .requestInvite {
     width: 700px;
+    margin: 0 auto;
+    padding: 0 0 60px 0;
     background: #FFFFFF;
     color: white;
-    height: calc(100% - 52px);
-    z-index: 1;
-    position: relative;
-    left: 50%;
-    margin-left: -350px;
-    margin-top: 52px;
+    height: 100%;
+    overflow: hidden;
 }
 
 .home_bg {
@@ -3011,21 +2990,3 @@ script.data-gratipay-username {
     display: inline;
     float: left;
 }
-
-.inline {
-  display: inline-block;
-}
-
-.topicFollow {
-    height: 24px;
-    line-height: 24px;
-    cursor: pointer;
-    font-family: helvetica, sans-serif;
-    float: left;
-    width: 72px;
-    text-align: right;
-    padding: 12px 0;
-    color: #4fb5c0;
-    font-size: 13px;
-    font-weight: bold;
-}