.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
@@ -29,10 +23,7 @@ export SECRET_KEY_BASE='267c8a84f63963282f45bc3010eaddf027abfab58fc759d6e239c800
 # export SMTP_SERVER
 # export SMTP_USERNAME
  
-# # send exception notifications to a slack incoming webhook
-# export SLACK_EN_WEBHOOK_URL
- 
-# ruby garbage collection stuff
+#ruby garbage collection stuff
 
 export RUBY_GC_TUNE=0 #set to 1 to enable GC test
 export RUBY_GC_TOKEN=4f4380fc9a2857d1f008005a3eb86928

.gitignore

@@ -5,17 +5,13 @@
 #   git config --global core.excludesfile ~/.gitignore_global
 
 #assety stuff
+realtime/node_modules
 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-gemset

@@ -1 +1 @@
-metamaps
+metamaps_gen002

.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

@@ -1,25 +1,9 @@
 sudo: false
 language: ruby
-cache:
-  bundler: true
-  directories:
-  - app/assets/javascripts/node_modules
 rvm:
-  - 2.3.0
+  - 2.1.3
 before_script:
-  - echo "Rspec setup"
   - export RAILS_ENV=test
   - cp .example-env .env
   - bundle exec rake db:create
   - bundle exec rake db:schema:load
-  - echo "node setup"
-  - . $HOME/.nvm/nvm.sh
-  - nvm install stable
-  - nvm use stable
-  - npm install --no-optional
-script:
-  - bundle exec rspec && bundle exec brakeman -q -z && npm test
-addons:
-  code_climate:
-    repo_token: 479d3bf56798fbc7fff3fc8151a5ed09e8ac368fd5af332c437b9e07dbebb44e
-  postgresql: "9.4"

Gemfile

@@ -1,57 +1,68 @@
-# 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 'devise'
-gem 'doorkeeper'
-gem 'dotenv-rails'
-gem 'exception_notification'
-gem 'httparty'
-gem 'json'
-gem 'kaminari'
-gem 'mailboxer'
-gem 'paperclip'
+gem 'redis'
 gem 'pg'
-gem 'puma'
 gem 'pundit'
 gem 'pundit_extra'
-gem 'rack-attack'
-gem 'rack-cors'
-gem 'redis', '~> 3.3.3'
-gem 'slack-notifier'
+gem 'doorkeeper'
+gem 'formula'
+gem 'formtastic'
+gem 'json'
+gem 'rails3-jquery-autocomplete'
+gem 'best_in_place' #in-place editing
+gem 'kaminari' # pagination
+gem 'uservoice-ruby'
+gem 'dotenv'
 gem 'snorlax'
-gem 'sucker_punch'
+gem 'httparty'
+gem 'active_model_serializers', '~> 0.8.1'
+gem 'delayed_job', '~> 4.0.2'
+gem 'delayed_job_active_record', '~> 4.0.1'
+
+gem 'paperclip'
+gem 'aws-sdk', '< 2.0'
 
-# asset stuff
 gem 'jquery-rails'
 gem 'jquery-ui-rails'
-gem 'sass-rails'
-gem 'uglifier'
+gem 'jbuilder'
+
+#gem 'therubyracer' #optional
+#gem 'rb-readline'
+
+# Gems used only for assets and not required
+# in production environments by default.
+group :assets do
+  gem 'sass-rails'
+  gem 'coffee-rails'
+
+  # See https://github.com/sstephenson/execjs#readme for more supported runtimes
+  # gem 'therubyracer'
+
+  gem 'uglifier'
+end
 
 group :test do
-  gem 'brakeman', require: false
-  gem 'factory_bot_rails'
-  gem 'json-schema'
   gem 'rspec-rails'
+  gem 'factory_girl_rails'
   gem 'shoulda-matchers'
   gem 'simplecov', require: false
+  gem 'json-schema'
+end
+
+group :production do #this is used on heroku
+ #gem 'rmagick'
+ gem 'rails_12factor'
 end
 
 group :development, :test do
+  gem 'pry-rails'
+  gem 'pry-byebug'
   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,303 @@
 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)
+    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-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)
     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
-  exception_notification
-  factory_bot_rails
-  faker
+  dotenv
+  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
-  rack-cors
-  rails (~> 5.0.0)
-  redis (~> 3.3.3)
+  quiet_assets
+  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
+  uservoice-ruby
 
 BUNDLED WITH
-   1.16.1
+   1.11.2

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_gen002](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/metamaps/metamaps_gen002?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
+[![Build Status](https://travis-ci.org/metamaps/metamaps_gen002.svg)](https://travis-ci.org/metamaps/metamaps_gen002)
 
-## 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?
+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.
 
-- 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)
+To get connected with the community interested in Metamaps, join our [Google+ community][community].
 
-<!-- markdown hack to split two lists -->
+## 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_gen002.git
+```
+Now ensure you have VirtualBox and Vagrant installed on your computer
+```
+cd metamaps_gen002
+./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
-[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
+[community]: https://plus.google.com/u/0/communities/115060009262157699234
+[license]: https://github.com/metamaps/metamaps_gen002/blob/develop/LICENSE
+[contributing]: https://github.com/metamaps/metamaps_gen002/blob/develop/doc/CONTRIBUTING.md
+[contributing-issues]: https://github.com/metamaps/metamaps_gen002/blob/develop/doc/CONTRIBUTING.md#reporting-bugs-and-other-issues
+[windows-installation]: https://github.com/metamaps/metamaps_gen002/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/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

@@ -10,13 +10,23 @@
 // 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/Metamaps
+//= 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

@@ -161,43 +161,38 @@ jQuery.browser = browser;
 			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)
-				}
+            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();
-				Metamaps.Create.newTopic.metacode = $(items[event.data.frontIndex].image).attr('data-id');
             }
 		});
-		// 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) {
+					 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');		
@@ -212,9 +207,9 @@ jQuery.browser = browser;
 				if ( options.bringToFront && event.type == 'click' )				
 				{
                     $(options.titleBox).html( ($(event.target).attr('title') ));
-					// START METAMAPS CODE
+				    // METAMAPS CODE
 			        Metamaps.Create.newTopic.metacode = $(event.target).attr('data-id');
-					// END METAMAPS CODE
+			        // NOT METAMAPS CODE
 					var	idx = $(event.target).data('itemIndex');	
 					var	frontIndex = event.data.frontIndex;
 					//var	diff = idx - frontIndex;                    
@@ -227,11 +222,6 @@ jQuery.browser = browser;
 				}
 			}
 		});
-		// 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'));				
 		};

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/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.Backbone.js.erb

@@ -0,0 +1,247 @@
+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('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));
+        };
+
+        var e = $.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;
+        var authorized = map && map.authorizeToEdit(Metamaps.Active.Mapper) ? 'canEditMap' : '';
+        var commonsMap = map && map.get('permission') === 'commons' ? 'commonsMap' : '';
+        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'
+});

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

@@ -0,0 +1,697 @@
+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 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' });
+        // '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: "<%= asset_path('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: "<%= asset_path('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.erb

@@ -0,0 +1,333 @@
+/*
+ * Example tab-separated input:
+ * Some fields will be ignored
+ *
+ * Topics								
+ * Id	Name	Metacode	X	Y	Description	Link	User	Permission
+ * 8	topic8	Action	-231	131			admin	commons
+ * 5	topic	Action	-229	-131			admin	commons
+ * 7	topic7.1	Action	-470	-55	hey		admin	commons
+ * 2	topic2	Event	-57	-63			admin	commons
+ * 1	topic1	Catalyst	-51	50			admin	commons
+ * 6	topic6	Action	-425	63			admin	commons
+ * 								
+ * Synapses								
+ * Topic1	Topic2	Category	Description	User	Permission		
+ * 6	2	from-to		admin	commons		
+ * 6	1	from-to		admin	commons		
+ * 6	5	from-to		admin	commons		
+ * 2	7	from-to		admin	commons		
+ * 8	6	from-to		admin	commons		
+ * 8	1	from-to		admin	commons		
+ *
+ */
+
+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[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 (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:
+          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 self = Metamaps.Import;
+    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);
+  },
+};

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

@@ -0,0 +1,262 @@
+(function () {
+
+    Metamaps.currentPage = "";
+
+    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.routerTimeoutId);
+
+            if (Metamaps.Active.Mapper) document.title = 'Explore Active Maps | Metamaps';
+            else document.title = 'Home | Metamaps';
+
+            Metamaps.currentSection = "";
+            Metamaps.currentPage = "";
+            $('.wrapper').removeClass('mapPage topicPage');
+
+            var classes = Metamaps.Active.Mapper ? "homePage explorePage" : "homePage";
+            $('.wrapper').addClass(classes);
+
+            var navigate = function() {
+                Metamaps.routerTimeoutId = 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);
+                }
+            }
+            // logged out home page
+            else {
+                
+                Metamaps.Famous.yield.show();
+                
+                Metamaps.Famous.explore.hide();
+
+                Metamaps.GlobalUI.Search.unlock();
+                Metamaps.GlobalUI.Search.close(0, true);
+
+                Metamaps.Famous.maps.hide();
+                Metamaps.routerTimeoutId = 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.routerTimeoutId);
+
+            // just capitalize the variable section
+            // either 'featured', 'mapper', or 'active'
+            var capitalize = section.charAt(0).toUpperCase() + section.slice(1);
+            
+            if (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.currentSection = "explore";
+            Metamaps.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.currentPage;
+
+                // alter url if for mapper profile page
+                if (Metamaps.currentPage == "mapper") {
+                    path += "/" + Metamaps.Maps.Mapper.mapperId;
+                }
+
+                Metamaps.Router.navigate(path);
+            };
+            var navigateTimeout = function() {
+                Metamaps.routerTimeoutId = 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.routerTimeoutId);
+
+            document.title = 'Map ' + id + ' | Metamaps';
+            
+            Metamaps.currentSection = "map";
+            Metamaps.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.routerTimeoutId);
+            
+            document.title = 'Topic ' + id + ' | Metamaps';
+            
+            Metamaps.currentSection = "topic";
+            Metamaps.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.intercept = function (evt) {
+        var segments;
+
+        var href = {
+            prop: $(this).prop("href"),
+            attr: $(this).attr("href")
+        };
+        var root = location.protocol + "//" + 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.Views.js.erb

@@ -0,0 +1,133 @@
+(function () {
+    Metamaps.Views = {};
+
+    var 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, cb) {
+            
+            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 (!initialized) {
+                m.deploy(m._currTarget);
+                initialized = true;
+                setTimeout(updateHeight, 100);
+            } else {
+                setTimeout(updateHeight, 100);
+            }
+
+            Metamaps.Loading.hide();
+        },
+        handleSuccess: function (cb) {
+            var that = this;
+
+            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/views/chatView.js.erb

@@ -0,0 +1,339 @@
+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 active"></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/sounds.mp3' %>", "<%= asset_path 'sounds/sounds.ogg' %>"],
+              sprite: {
+                laser: [3000, 700]
+              }
+            });
+        },
+        incrementUnread: function() {
+            this.unreadMessages++;
+            this.$unread.html(this.unreadMessages);
+            this.$unread.show();
+        },
+        addMessage: function(message, isInitial) {
+
+            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 (!isInitial && this.alertSound) this.sound.play('laser');
+        },
+        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 = false; // 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) {
+      this.messages.add(message);
+      Private.addMessage.call(this, message, isInitial);
+    }
+
+    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,194 @@
+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);
+          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));
+              $(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) {
+        var self = this;
+
+        messages.models.forEach(function (message) {
+          self.chat.addMessage(message, isInitial);
+        });
+      }
+
+    /**
+     * @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/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') %>);
+    background: #d8d9da url(<%= asset_data_uri('shattered_@2X.png') %>);
     font-family: 'din-medium', helvetica, sans-serif;
     color: #424242;
     -moz-osx-font-smoothing: grayscale;
-  overflow-x: hidden;
 
-  &.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;
@@ -1672,19 +1569,13 @@ h3.filterBox {
     background-repeat: no-repeat;
     text-align: left;
 }
-
-.commonsMap .mapContributors {
-    visibility: hidden;
-}
-
 .mapContributors {
     position: relative;
     height: 30px;
-    margin: 9px 0px 9px 44px;
+    margin: 9px 0px 9px 56px;
     padding: 0;
     width: 64px;
 }
-
 #mapContribs {
     float: left;
     border: 2px solid #424242;
@@ -1700,7 +1591,7 @@ h3.filterBox {
 #mapContribs.multiple {
     box-shadow: 1px 1px 0 0 #B5B5B5,3px 2px 0 0 #424242,4px 3px 0 0 #B5B5B5,5px 4px 0 0 #424242;
 }
-.mapContributors span.count {
+.mapContributors span {
     height: 20px;
     padding-top: 5px;
     padding-left: 8px;
@@ -1735,11 +1626,10 @@ h3.filterBox {
 .mapContributors .tip {
     top: 45px;
     left: -10px;
-    min-width: 200px;
 }
 
 .mapContributors .tip ul {
-    max-height: 144px;
+    max-height: 188px;
     overflow-y: auto;
 }
 
@@ -1762,7 +1652,7 @@ h3.filterBox {
 .mapContributors .tip li a {
     color: white;
 }
-.mapContributors div.tip:after {
+.mapContributors div:after {
     content: '';
     position: absolute;
     top: -4px;
@@ -1782,90 +1672,6 @@ h3.filterBox {
     border-radius: 14px;
 }
 
-.mapContributors span.twitter-typeahead {
-    padding: 0;
-}
-
-.collabSearchField {
-    text-align: left;
-}
-
-.collabNameWrapper {
-    float: left;
-}
-
-.collabIconWrapper img.icon {
-    position: relative;
-    top: 0;
-    left: 0;
-}
-
-.collabIconWrapper {
-    position: relative;
-    float: left;
-    padding: 0 4px;
-}
-
-.mapContributors .collabName {
-    font-weight: normal;
-    font-size: 14px;
-    line-height: 28px;
-    color: #424242;
-    padding: 0 4px;
-}
-
-span.removeCollaborator {
-    position: absolute;
-    top: 11px;
-    right: 8px;
-    height: 16px;
-    width: 16px;
-    background-image: url(<%= asset_data_uri('removecollab_sprite.png') %>);
-    cursor: pointer;
-}
-
-span.removeCollaborator:hover {
-    background-position: -16px 0;
-}
-
-span.addCollab {
-    width: 16px;
-    height: 16px;
-    background-image: url(<%= asset_data_uri('addcollab_sprite.png') %>);
-    display: inline-block;
-    vertical-align: middle;
-    margin: 0 12px 0 10px;
-}
-
-input.collaboratorSearchField {
-    background: #FFFFFF;
-    height: 14px;
-    margin: 0;
-    padding: 10px 6px;
-    border: none;
-    border-radius: 2px;
-    outline: none;
-    font-size: 14px;
-    line-height: 14px;
-    color: #424242;
-    font-family: 'din-medium', helvetica, sans-serif;
-}
-
-.tt-dataset.tt-dataset-collaborators {
-    padding: 2px;
-    background: #E0E0E0;
-    min-width: 156px;
-    border-radius: 2px;
-}
-
-.tt-dataset.tt-dataset  .collabResult {
-    padding: 4px;
-}
-
-.collabResult.tt-suggestion.tt-cursor, .collabResult.tt-suggestion:hover {
-    background-color: #CCCCCC;
-}
-
 .mapInfoBox .mapPermission .tooltips {
     top: -20px;
     right: 36px;
@@ -1915,10 +1721,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 +1829,6 @@ input.collaboratorSearchField {
     position: relative;
     cursor: pointer;
     display: none;
-    padding: 0 2px;
 }
 .mapInfoShareIcon {
     width: 24px;
@@ -2059,43 +1868,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 +1882,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 +1931,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 +2014,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 {
-    background-position: 0 -32px;
-  }
+#lightbox_community .lightboxAboutIcon {
+    background-position: -32px 0;
 }
-.icon_source_code .lightboxAboutIcon {
+#lightbox_source .lightboxAboutIcon {
     background-position: -64px 0;
-  &:hover {
-    background-position: -64px -32px;
-  }
 }
-.icon_terms .lightboxAboutIcon {
+#lightbox_blog .lightboxAboutIcon {
+    background-position: -96px 0;
+}
+#lightbox_term .lightboxAboutIcon {
     background-position: -128px 0;
-  &:hover {
+}
+#lightbox_metamapps:hover .lightboxAboutIcon {
+    background-position: 0 -32px;
+}
+#lightbox_community:hover .lightboxAboutIcon {
+    background-position: -32px -32px;
+}
+#lightbox_source:hover .lightboxAboutIcon {
+    background-position: -64px -32px;
+}
+#lightbox_blog:hover .lightboxAboutIcon {
+    background-position: -96px -32px;
+}
+#lightbox_term:hover .lightboxAboutIcon {
     background-position: -128px -32px;
-  }
 }
 
 /* jquery ui tabs */
@@ -2315,9 +2092,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 +2099,28 @@ and it won't be important on password protected instances */
     border: none;
     background: none;
     padding: 0;
-
-    .setDesc,
-    .selectAll,
-    .selectNone {
+}
+#metacodeSwitchTabs .setDesc {
     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 {
+}
+#switchMetacodes > p {
+    margin: 16px 0 16px 0;
+}
+#metacodeSwitchTabs > ul {
     width: 130px;
-
-        li {
+}
+#metacodeSwitchTabs > ul li {
     font-size: 14px;
     text-transform: uppercase;
-        }
-    }
-
-    li.ui-state-active a {
+}
+#metacodeSwitchTabs li.ui-state-active a {
     color: #00BCD4;
     cursor: pointer;
-    }
 }
 .metacodeSwitchTab {
     max-height: 300px;
@@ -2930,18 +2689,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 +2898,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;
-}

app/assets/stylesheets/apps.css.erb

@@ -1,14 +1,17 @@
 .centerContent {
   position: relative;
-  margin: 0 auto;
-  width: auto;
-  max-width: 800px;
+  margin: 92px auto 0 auto;
+  padding: 20px 0 60px 20px;
+  width: 760px;
   overflow: hidden;
   box-shadow: 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);
   background: #fff;
-  box-sizing: border-box;
+  -webkit-border-radius: 3px;
+  -moz-border-radius: 3px;
+  border-radius: 3px;
+  border: 1px solid #dcdcdc;
+  margin-bottom: 10px;
   padding: 15px;
-  font-family: 'din-regular', sans-serif;
 }
 
 .centerContent .page-header {
@@ -126,9 +129,3 @@
     box-sizing: border-box;
     border-radius: 2px;
 }
-
-.centerContent.withPadding {
-  margin-top: 1em;
-  margin-bottom: 1em;
-}
-

app/assets/stylesheets/base.css.erb

@@ -1,19 +1,11 @@
-$mid-gray: #8A8A8A;
-$mid-gray-opacity: rgba(66, 66, 66, 0.6);
-
 .nameCounter {
   position: absolute;
   bottom: 1px;
   right: 2px;
   font-size: 11px;
-  font-family: helvetica, sans-serif;
+  font-family: helvetica;
   color: #727272;
   line-height: 11px;
-  display: none;
-}
-
-.riek-editing + .nameCounter {
-  display: block;
 }
 
 .nameCounter.forMap {
@@ -25,6 +17,7 @@ $mid-gray-opacity: rgba(66, 66, 66, 0.6);
   
 }
 
+
 #center-container {
   position:relative;
 	height:100%;
@@ -36,6 +29,7 @@ $mid-gray-opacity: rgba(66, 66, 66, 0.6);
 
 .showcard {
     position:absolute;
+    display:none;
     top:100px;
     left:100px;
     width:300px;
@@ -45,7 +39,7 @@ $mid-gray-opacity: rgba(66, 66, 66, 0.6);
 	  z-index:2;
     color: #424242;
     border-radius:2px;
-    box-shadow: 2px 3px 3px rgba(125, 125, 125, 0.23), -2px -1px 3px rgba(125, 125, 125, 0.16);
+    box-shadow: 0px 3px 3px rgba(0,0,0,0.23), 0 3px 3px rgba(0,0,0,0.16);
 }
 
 .text {
@@ -55,7 +49,6 @@ $mid-gray-opacity: rgba(66, 66, 66, 0.6);
 #infovis {
   width:100%;
   height:100%;
-  position: absolute;
 }
 
 .showcard .permission {
@@ -67,6 +60,7 @@ $mid-gray-opacity: rgba(66, 66, 66, 0.6);
   display:block;
   position:relative;
   width:100%;
+  min-height:360px;
   z-index: 25;
 }
 .CardOnGraph.hasAttachment {
@@ -74,11 +68,11 @@ $mid-gray-opacity: rgba(66, 66, 66, 0.6);
 }
 
 .CardOnGraph .title {
-  word-break: break-word;
-  font-size: 20px;
-  line-height: 24px;
+  font-size: 18px;
+  line-height: 22px;
   display: table;
-  padding: 20px 0;
+  padding: 8px 0 16px;
+  height: 80px;
   text-align: center;
   font-family: 'din-regular', sans-serif;
   width: 300px;
@@ -97,11 +91,12 @@ $mid-gray-opacity: rgba(66, 66, 66, 0.6);
   cursor: text;
 }
 
-.showcard .title .riek-editing {
+.showcard .best_in_place_name textarea, .showcard .best_in_place_name input {
   font-family: 'din-regular', sans-serif;
   color: #424242;
-  font-size: 20px;
-  line-height: 24px;
+  font-size: 18px;
+  line-height: 22px;
+  height: 15px;
   padding: 5px 0;
   width: 100%;
   margin: 0;
@@ -115,76 +110,44 @@ $mid-gray-opacity: rgba(66, 66, 66, 0.6);
 .CardOnGraph .scroll {
    display:block;
    padding: 8px 0 8px 16px;
+   height: 152px;
    font-size: 13px;
    line-height:15px;
    font-family: helvetica, sans-serif;
    overflow-y: auto;
-
-  p.emptyDesc {
-    color: $mid-gray-opacity;
-  }
-
-  a.mdSupport {
-    color: #4fb5c0;
-    font-size: 11px;
-    display: none;
-  }
-  .riek-editing + .mdSupport {
-    display: block;
-  }
 }
 .CardOnGraph.hasAttachment .scroll {
   height: auto;
 }
 
-.CardOnGraph .desc .riek-editing {
+.CardOnGraph .best_in_place_desc textarea {
   font-size: 13px;
   line-height:15px;
   font-family: helvetica, sans-serif;
   color: #424242;
   padding: 0;
-  width: 258px;
+  width: 100%;
   margin: 0;
   border: 0;
   outline: none;
+  font-size: 12px;
+  line-height: 15px;
   background: none;
-  overflow-y: scroll;
+  resize: none;
 }
 
-/*
- * Styling for Markdown in topic cards
- */
-
-.CardOnGraph .desc {
-  p, ol, ul {
-    padding: 0.15em 0;
-  }
-
-  h1, h2, h3, h4, h5, h6 {
-    font-style: normal;
-    padding: 0.25em 0;
-  }
-
-  ol,
-  ul {
-    margin-left: 1em;
-  }
-
-  a:hover {
-    text-decoration: underline;
-    opacity: 0.9;
-  }
+.CardOnGraph .desc h3 {
+  font-style:normal;
+  margin-top:5px;
 }
 
-/*
- * End Markdown styling
- */
-
-.CardOnGraph .riek_desc {
+.CardOnGraph .best_in_place_desc {
   display:block;
-  padding-right: 26px;
+  margin-top:2px;	
+  padding-right: 18px;
+  margin-right: 8px;
 }
-.canEdit .CardOnGraph .riek_desc:not(.riek-editing):hover {
+.canEdit .CardOnGraph .best_in_place_desc:hover {
   background-image: url(<%= asset_data_uri('edit.png') %>);
   background-position: top right;
   background-repeat: no-repeat;
@@ -196,153 +159,140 @@ $mid-gray-opacity: rgba(66, 66, 66, 0.6);
 }
 
 .CardOnGraph .links {
-  position: relative;
-  z-index: 2;
-
-  .linkItem {
-    float: left;
-    z-index: 1;
-    position: relative;
-    color: #424242;
-    font-size: 14px;
-    line-height: 14px;
-
-    a {
-      color: #424242;
-    }
-  }
-
-  .icon {
-    padding: 0;
-    height: 48px;
-    margin-right: 10px;
-
-    .metacodeImage {
-      cursor: move;
-      position: absolute;
-      left: -18px;
-      top: 6px;
-      width: 36px;
-      height: 36px;
-      background-size:36px 36px;
-      background-position:0 0;
-      background-repeat:no-repeat;
-    }
-  }
+  position:relative;
+  border-bottom: 1px solid #BDBDBD;
+  border-top: 1px solid #BDBDBD;
+  background-color: #e0e0e0;
 }
 
-.CardOnGraph .info {
-  position: relative;
-
-  .linkItem {
-    float: left;
+.linkItem {
+  float:left;
+  height:46px;
   z-index: 1;
   position: relative;
-    color: $mid-gray-opacity;
+  color: #424242;
   font-size: 14px;
-    line-height: 14px;
+  line-height:14px;
+  height:12px;
+  padding:17px 0;
+}
+.linkItem a {
+  color: #424242;
+}
 
-    a {
-      color: $mid-gray-opacity;
-    }
-  }
-
-  .contributor {
-    bottom: 7px;
-    margin-left: 16px;
-
-    .contributorIcon {
+.CardOnGraph .icon {
+  position:absolute;
+  width:100%;
+  z-index:1;
+  padding: 0;
+  height: 48px;
+}
+.linkItem.contributor {
+  margin-left:40px;
+  z-index:1;
+  padding:17px 16px 17px 30px;
   position: relative;
-      display: inline-block;
-      vertical-align: middle;
-      border-radius: 16px;
-      margin: 5px 5px 5px 0;
-      top: 11px;
-      left: 0;
-    }
-
-    span {
-      font-family: 'din-regular', sans-serif;
-      font-size: 14px;
-    }
-
-    .contributorName {
-      font-family: din-regular;
-      margin-top: 20px;
-      display: inline-block;
-      vertical-align: middle;
-      width: 97px;
-      padding: 0 8px 0 4px;
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-    }
-  }
-
-  .mapCount {
-    padding:17px 38px 17px 0;
-    width: 22px;
-    text-align: right;
-
-    .mapCountIcon {
+}
+.contributor .contributorIcon {
   position: absolute;
   top: 8px;
-      right: 0;
+  left: 0;
+  border-radius: 16px;
+}
+
+.contributor:hover .contributorName {
+  display: block;
+}
+
+.contributorName {
+  display: none;
+  position: absolute;
+  background: black;
+  text-align: center;
+  color: white;
+  border-radius: 2px;
+  font-family: din-regular;
+  line-height: 15px;
+  font-size: 12px;
+  padding: 3px 5px 2px;
+  white-space: nowrap;
+  margin-top: 36px;
+  margin-left: -32px;
+}
+
+.contributor div:before {
+  content: '';
+  position: absolute;
+  top: 128%;
+  left: 13px;
+  margin-top: -30px;
+  width: 0;
+  height: 0;
+  border-bottom: 4px solid #000000;
+  border-left: 5px solid transparent;
+  border-right: 5px solid transparent;
+}
+
+.linkItem.mapCount {
+  margin-left: 12px;
+  width: 24px;
+  padding:17px 0 17px 36px;
+}
+.linkItem.mapCount .mapCountIcon {
+  position: absolute;
+  top: 8px;
+  left: 0;
   width: 32px;
   height: 32px;
   background-image: url(<%= asset_data_uri('map32_sprite.png') %>);
   background-repeat: no-repeat;
   background-position: 0 0;
   cursor: pointer;
-      opacity: 0.6;
-    }
-
-    &:hover .mapCountIcon {
+}
+.linkItem.mapCount:hover .mapCountIcon {
   background-position: 0 -32px;
-    }
+}
 
-    .tip, .hoverTip {
+.linkItem.mapCount:hover .hoverTip {
+  display: block;
+}
+.CardOnGraph .mapCount .tip, .CardonGraph .mapCount .hoverTip {
   top: 44px;
-      right: 0px;
+  left: 0px;
   font-size: 12px !important;
+}
 
-      &:before {
-        content: '';
-        position: absolute;
-        top: 26px;
-        right: 10px;
-        margin-top: -30px;
-        width: 0;
-        height: 0;
-        border-bottom: 4px solid $mid-gray;
-        border-left: 5px solid transparent;
-        border-right: 5px solid transparent;
-      }
-    }
-
-    .hoverTip {
+.hoverTip {
   white-space: nowrap;
   font-family: 'din-regular';
   top: 44px;
+  left: 0px;
   font-size: 12px !important;
+  display: none;
   position: absolute;
-      background: $mid-gray;
+  background: black;
   color: white;
   border-radius: 4px;
   line-height: 17px;
   padding: 3px 5px 2px;
   z-index: 100;
-    }
+}
 
-    .tip a {
-      color: white;
-    }
 
-    .tip a:hover {
-      color: #757575;
-    }
+.CardOnGraph .mapCount .tip:before, .CardOnGraph .mapCount .hoverTip:before {
+  content: '';
+  position: absolute;
+  top: 26px;
+  left: 10px;
+  margin-top: -30px;
+  width: 0;
+  height: 0;
+  border-bottom: 4px solid #000000;
+  border-left: 5px solid transparent;
+  border-right: 5px solid transparent;
+}
 
-    .tip li {
+.CardOnGraph .mapCount .tip li {
   list-style-type: none;
   white-space: nowrap;
   overflow: hidden;
@@ -354,35 +304,50 @@ $mid-gray-opacity: rgba(66, 66, 66, 0.6);
   font-size: 14px;
   line-height: 14px;
   position: relative;
-    }
-  }
+}
 
-  .synapseCount {
-    width: 22px;
-    padding:17px 38px 17px 0;
-    text-align: right;
-    margin-right: 4px;
+.CardOnGraph .mapCount li.hideExtra {
+  display: none;
+}
 
-    .synapseCountIcon {
+.showMore {
+  cursor: pointer;
+  color: #4FC059;
+}
+
+.mapCount .tip a {
+  color: white;
+}
+
+.mapCount .tip a:hover {
+  color: #757575;
+}
+
+
+.linkItem.synapseCount {
+  margin-left: 2px;
+  width: 24px;
+  padding:17px 0 17px 32px;
+}
+.linkItem.synapseCount .synapseCountIcon {
   position: absolute;
   top: 8px;
-      right: 0;
+  left: 0;
   width: 32px;
   height: 32px;
   background-image: url(<%= asset_data_uri('synapse32_sprite.png') %>);
   background-repeat: no-repeat;
   background-position: 0 0;
-      opacity: 0.6;
-    }
-    hover .synapseCountIcon {
+}
+.linkItem.synapseCount:hover .synapseCountIcon {
   background-position: 0 -32px;
-    }
-    .tip {
+}
+
+.CardOnGraph .synapseCount .tip {
   position: absolute;
-      background: $mid-gray;
+  background: black;
   width: auto;
   top: 44px;
-      right: 0px;
   color: white;
   white-space: nowrap;
   border-radius: 2px;
@@ -391,30 +356,24 @@ $mid-gray-opacity: rgba(66, 66, 66, 0.6);
   line-height: 12px;
   padding: 4px 4px 4px;
   z-index: 100;
-    }
+}
 
-    .tip:before {
+.CardOnGraph .synapseCount:hover .tip {
+  display: block;
+}
+
+.CardOnGraph .synapseCount .tip:before {
   content: '';
   position: absolute;
   margin-top: -8px;
-      right: 12px;
+  margin-left: 6px;
   width: 0;
   height: 0;
-      border-bottom: 4px solid $mid-gray;
+  border-bottom: 4px solid black;
   border-left: 5px solid transparent;
   border-right: 5px solid transparent;
-    }
-  }
 }
 
-.showMore {
-  cursor: pointer;
-  color: #4FC059;
-}
-
-.linkItem.mapPerm {
-  margin-right: 8px;
-}
 
 .mapPerm {
   width: 32px;
@@ -437,10 +396,14 @@ $mid-gray-opacity: rgba(66, 66, 66, 0.6);
 }
 
 .yourTopic .mapPerm:hover, .yourEdge .mapPerm:hover {
+  background-image: url(<%= asset_data_uri('arrowperms_sprite.png') %>);
+  background-position: -32px 0;
   cursor:pointer;
 }
 .yourTopic .mapPerm.minimize, .yourEdge .mapPerm.minimize {
-  cursor: pointer;
+ background-image: url(<%= asset_data_uri('arrowperms_sprite.png') %>) !important;
+background-position: 0 0;
+cursor: pointer;
 }
 .mapPerm .permissionSelect {
   list-style: none;
@@ -476,52 +439,60 @@ $mid-gray-opacity: rgba(66, 66, 66, 0.6);
 }
 
 .CardOnGraph .metacodeTitle {
-  font-family: 'din-regular';
+  font-style: italic;
+  font-family: 'vinyl';
+  text-transform: uppercase;
+  position: absolute;
   line-height: 24px;
-  height: 26px;
-  font-size: 18px;
-  padding: 13px 24px 9px 24px;
+  height:24px;
+  font-size: 24px;
+  display: none;
+  width: 90%;
+  padding: 13px 0 9px 10%;
+  background-color: #E0E0E0;
   color: #424242;
-  width: 120px;
-  max-width: 120px;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  overflow: hidden;
 }
 .permission.canEdit .metacodeTitle {
   cursor:pointer;
 }
 
 .permission.canEdit .expandMetacodeSelect {
-  position: relative;
-  top: 2px;
-  left: 4px;
+  position: absolute;
+  top: 16px;
+  right: 16px;
   width: 16px;
   height: 16px;
   background-image: url(<%= asset_data_uri('arrowright_sprite.png') %>);
   background-repeat: no-repeat;
   background-position: 0 -32px;
-  display: inline-block;
-  -webkit-transform: rotate(90deg);
-  transform: rotate(90deg);
 }
 .permission.canEdit .minimize .expandMetacodeSelect {
   
 }
 
-.CardOnGraph .metacodeName {
-  display: inline-block;
+.CardOnGraph .metacodeImage {
+  cursor:move;
+  width:46px;
+  height:46px;
+  position:absolute;
+  left:-23px;
+  top:0;
+  background-size:46px 46px;
+  background-position:0 0;
+  background-repeat:no-repeat;
 }
 
+#metacodeOptions {
+  display:none;
+}
 .CardOnGraph .metacodeSelect {
   display:none;
   width:auto;
   z-index: 2;
-  background: #EAEAEA;
-  white-space: nowrap;
   position: absolute;
-  top: 48px;
-  box-shadow: 2px 2px 2px rgba(125, 125, 125, 0.23), -2px -1px 3px rgba(125, 125, 125, 0.16);
+  background: #EAEAEA;
+  left: 300px;
+  white-space: nowrap;
 }
 .CardOnGraph .metacodeSelect ul {
   position: relative; 
@@ -609,14 +580,15 @@ background-color: #E0E0E0;
   position: relative;
 }
 
-.CardOnGraph .hoverForTip:hover .tip, #mapContribs:hover .tip {
+.CardOnGraph .hoverForTip:hover .tip, .mapCard .hoverForTip:hover .tip, #mapContribs:hover .tip {
   display:block;
 }
-.CardOnGraph .tip {
+.CardOnGraph .tip, .mapCard .tip {
+ display:none;
  position: absolute;
- background: $mid-gray;
+ background: black;
  top: 35px;
- right: 0;
+ left: 0;
  color: white;
  border-radius: 4px;
  font-size:15px !important;
@@ -625,18 +597,21 @@ background-color: #E0E0E0;
  z-index:100;
 }
 
+#embedlyLink {
+  display: none;
+}
 #embedlyLinkLoader {
   margin: 0 auto;
   width: 28px;
 }
 
-.CardOnGraph .link-adder {
+.CardOnGraph .attachments {
+  border-top: 1px solid #BDBDBD;
   width:100%;
   height:47px;
-  position: relative;
 }
 
-.link-adder a {
+.attachments a {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -695,9 +670,9 @@ background-color: #E0E0E0;
 }
 
 #addLinkInput input{
-padding: 9px 27px 9px 31px;
+padding: 9px 7px 9px 31px;
 height: 12px;
-width: 210px;
+width: 198px;
 margin: 0 0 0 0;
 border: none;
 outline: none;
@@ -751,6 +726,7 @@ font-family: 'din-regular', helvetica, sans-serif;
   -moz-border-radius-bottomright: 8px;
   -webkit-border-bottom-right-radius: 8px;
   border-bottom-right-radius: 8px;
+  display: none;
   margin: 8px;
 }
 
@@ -837,10 +813,10 @@ font-family: 'din-regular', helvetica, sans-serif;
   line-height: 16px;
 }
 
-.canEdit span.titleWrapper:hover {
+.canEdit #edit_synapse_desc:hover {
   background-image: url(<%= asset_data_uri('edit.png') %>);
   background-repeat: no-repeat;
-  background-position: 95% 95%;
+  background-position: 164px center;
   cursor: text;
 }
 
@@ -964,14 +940,124 @@ font-family: 'din-regular', helvetica, sans-serif;
  background-position: 0 -24px;
 }
 
+/* Map Cards */
 
+.map {
+    display:inline-block;
+    width:220px;
+	  height:340px;
+    font-size: 12px;
+    text-align: left;
+    overflow: visible;
+    background: #424242;
+    border-radius:2px;
+    margin:16px 16px 16px 19px;
+    box-shadow: 0px 3px 3px rgba(0,0,0,0.23), 0 3px 3px rgba(0,0,0,0.16);
+}
+
+.mapCard {
+  display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
+  display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
+  display: -ms-flexbox;      /* TWEENER - IE 10 */
+  display: -webkit-flex;     /* NEW - Chrome */
+  display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */
+  -webkit-box-orient: vertical;
+  -moz-box-orient: vertical;
+  -webkit-box-direction: normal;
+  -moz-box-direction: normal;
+  -ms-flex-direction: column;
+  -webkit-flex-direction: column;
+  flex-direction: column;
+  position:relative;
+  width:100%;
+  height:308px;
+  padding: 16px 0;
+  color:#F5F5F5;
+}
+
+.mapCard .title {
+  word-wrap: break-word;
+  font-size:18px;
+  line-height:22px;
+  height: 44px;
+  display:block;
+  padding: 0 16px;
+  text-align: center;
+  -webkit-box-flex: none;      /* OLD - iOS 6-, Safari 3.1-6 */
+  -moz-box-flex: none;         /* OLD - Firefox 19- */
+  -webkit-flex: none;          /* Chrome */
+  -ms-flex: none;              /* IE 10 */
+  flex: none;                  /* NEW, Spec - Opera 12.1, Firefox 20+ */
+  font-family: 'din-regular', sans-serif;
+}
+
+.mapCard .mapScreenshot {
+  width: 188px;
+  height: 126px;
+  padding: 8px 16px;
+}
+.mapCard .mapScreenshot img {
+  width: 188px;
+  height: 126px;
+  border-radius: 2px;
+}
+
+.mapCard .scroll {
+   display:block;
+   -webkit-box-flex: 1;      /* OLD - iOS 6-, Safari 3.1-6 */
+  -moz-box-flex: 1;         /* OLD - Firefox 19- */
+  -webkit-flex: 1;          /* Chrome */
+  -ms-flex: 1;              /* IE 10 */
+  flex: 1;                  /* NEW, Spec - Opera 12.1, Firefox 20+ */
+   padding:0 16px 8px;
+   font-family: helvetica, sans-serif;
+   font-style: italic;
+   font-size: 12px;
+   word-wrap: break-word;
+}
+.mCS_no_scrollbar {
+  padding-right: 5px;
+}
+
+.mapCard .mapMetadata {
+  font-family: 'din-regular', sans-serif;
+  font-size: 12px;
+  position:relative;
+  border-top: 1px solid #BDBDBD;
+  -webkit-box-flex: none;      /* OLD - iOS 6-, Safari 3.1-6 */
+  -moz-box-flex: none;         /* OLD - Firefox 19- */
+  -webkit-flex: none;          /* Chrome */
+  -ms-flex: none;              /* IE 10 */
+  flex: none;                  /* NEW, Spec - Opera 12.1, Firefox 20+ */
+}
+
+.mapCard .metadataSection {
+  padding: 8px 16px 0 16px;
+  width: 78px;
+  float: left;
+}
+
+.mapPermission {
+  font-family: 'din-medium', sans-serif;
+}
+.cCountColor {
+  font-family: 'din-medium', sans-serif;
+  color: #DB5D5D;
+}
+.tCountColor {
+  font-family: 'din-medium', sans-serif;
+  color: #4FC059;
+}
+.sCountColor {
+  font-family: 'din-medium', sans-serif;
+  color: #DAB539;
+}
 
 
 /* mapper card */
 
 .mapper {
-    display: inline-block;
-    vertical-align: bottom;
+    float: left;
     width:220px;
     height:340px;
     font-size: 12px;
@@ -979,7 +1065,7 @@ font-family: 'din-regular', helvetica, sans-serif;
     overflow: visible;
     background: #E0E0E0;
     border-radius:2px;
-    margin:16px;
+    margin:16px 16px 16px 19px;
     box-shadow: 0px 3px 3px rgba(0,0,0,0.23), 0 3px 3px rgba(0,0,0,0.16);
 }
 
@@ -1003,10 +1089,10 @@ font-family: 'din-regular', helvetica, sans-serif;
     font-size: 24px;
     text-align: center;
     margin-top: 24px;
-    padding: 0 5%;
+    padding: 0 16px;
     white-space: nowrap;
     text-overflow: ellipsis;
-    width: 90%;
+    width: 189px;
     overflow: hidden;
 }
 

app/assets/stylesheets/clean.css.erb

@@ -24,13 +24,21 @@
     backface-visibility: visible !important;
 }
 
-#yield {
-  position: absolute;
+#famousOverlay {
+  position:absolute;
+  top: 0;
   width: 100%;
   height: 100%;
-  box-sizing: border-box;
-  padding-top: 92px;
-  overflow-y: auto;
+  margin:0;
+  z-index: 0;
+}
+
+#yield {
+    display:none;
+}
+
+#toast {
+    display: none;
 }
 
 /*.animations {
@@ -47,6 +55,16 @@
   transition-timing-function: ease-in-out;
 }*/
 
+.mapElement {
+	display: none;
+}
+.mapPage .mapElement, .topicPage .mapElement {
+	display: block;
+}
+.mapPage .mapElementHidden {
+    display:none;
+}
+
 /* loading */
 
 #loading {
@@ -102,6 +120,8 @@
 	top: 10px;
 	left: 24px;
 	z-index:3;
+	box-shadow: 0px 1px 1.5px rgba(0,0,0,0.12), 0 1px 1px rgba(0,0,0,0.24);
+	border-radius: 2px;
 }
 .explorePage .upperLeftUI {
 	box-shadow: none;
@@ -111,24 +131,23 @@
     display:none;
 }
 .homeButton {
+	width: 40px;
+    height: 32px;
+    background-color: #757575;
+    background-image: url(<%= asset_data_uri('home_light.png') %>);
+    background-repeat: no-repeat;
+    background-position: center center;
+    border-top-left-radius: 2px;
+    border-bottom-left-radius: 2px;
     float:left;
-    margin-right: 16px;
 }
 .homeButton:hover {
-
+    background-image: url(<%= asset_data_uri('home_light.png') %>);
 }
 .homeButton a {
     display:block;
-    color: #747474;
-    font-family: "vinyl", sans-serif;
-    font-style: italic;
-    text-transform: uppercase;
-    font-weight: 400;
-    font-size: 30px;
-    line-height: 38px;
-}
-.homeButton a:hover {
-  color: #616161;
+    width: 40px;
+    height: 32px;
 }
 
 /* end upperLeftUI */
@@ -168,64 +187,43 @@
 }
 
 .upperRightMapButtons {
-  right: 138px;
-  padding-right: 7px;
-  border-right: 1px solid #747474;
+	top: -42px; /* puts it just offscreen */
 }
-.unauthenticated .upperRightMapButtons {
-  right: 115px;
-  padding-right: 0;
-  border-right: none;
+.mapPage .upperRightMapButtons, .topicPage .upperRightMapButtons {
+	top: 0;
 }
 
 .upperRightIcon {
     width: 32px;
     height: 32px;
-    background-image: url(<%= asset_path('topright_sprite.png') %>);
+    background-image: url(<%= asset_data_uri('topright_sprite.png') %>);
     background-repeat: no-repeat;
     cursor: pointer;
 }
-
 .sidebarFilterIcon {
-    background-position: -32px 0;
-}
-.sidebarForkIcon {
     background-position: -64px 0;
 }
-.addMap {
+.sidebarForkIcon {
     background-position: -96px 0;
 }
-.notificationsIcon {
+.addMap {
     background-position: -128px 0;
-    margin-right: 10px; // make it look more natural next to the account menu icon
-}
-.notificationsIcon:hover {
-    background-position: -128px -32px;
-}
-.importDialog:hover {
-    background-position: 0 -32px;
+    margin-right:10px;
 }
 .sidebarFilterIcon:hover {
-    background-position: -32px -32px;
-}
-.sidebarForkIcon:hover {
     background-position: -64px -32px;
 }
-.addMap:hover {
+.sidebarForkIcon:hover {
     background-position: -96px -32px;
 }
+.addMap:hover {
+    background-position: -128px -32px;
+    margin-right:10px;
+}
 
 
 /* end upperRightUI */
 
-/* map wrapper */
-.mapWrapper {
-  position:absolute;
-  width: 100%;
-  height: 100%;
-}
-
-/* end map wrapper */
 
 /* yield */
 
@@ -335,26 +333,41 @@
 }
 
 .fullWidthWrapper.withPartners {
-    background: url(<%= asset_path('homepage_bg_fade.png') %>) no-repeat center -300px;
+    background: url(<%= asset_data_uri('homepage_bg_fade.png') %>) no-repeat center -300px;
 }
 .homeWrapper.homePartners {
     padding: 64px 0 280px;
     height: 96px;
+    background: url(<%= asset_data_uri('partner_logos.png') %>) no-repeat 0 64px;
+}
+
+.github-fork-ribbon-wrapper {
+    display:none;
+}
+
+.homePage .github-fork-ribbon-wrapper {
+    display: block;
 }
 
 /* end home page */
 
 /* infoAndHelp */
 
-.openCheatsheet .tooltipsAbove {
-  right: 1px;
-  left: auto;
+.mapPage .infoAndHelp, .topicPage .infoAndHelp {
+    right: 70px;
+}
+.mapPage .openCheatsheet .tooltipsAbove, .topicPage .openCheatsheet .tooltipsAbove {
+    left: 29px;
+}
+
+.unauthenticated .homePage .infoAndHelp {
+    display:none;
 }
 
 .infoAndHelp {
     position: absolute;
     bottom: 20px;
-    right: 70px;
+    right: 20px;
     z-index: 3;
     width: auto;
     font-style: italic;
@@ -367,7 +380,7 @@
     cursor: pointer;
 }
 .openCheatsheet {
-    background-image: url(<%= asset_path('help_sprite.png') %>);
+    background-image: url(<%= asset_data_uri('help_sprite.png') %>);
     background-repeat:no-repeat;
 }
 .openCheatsheet:hover {
@@ -375,27 +388,15 @@
 }
 .mapInfoIcon {
 	position: relative;
-  background-image: url(<%= asset_path('mapinfo_sprite.png') %>);
+	top: 56px; /* puts it just offscreen */
+    background-image: url(<%= asset_data_uri('mapinfo_sprite.png') %>);
     background-repeat:no-repeat;
 }
 .mapInfoIcon:hover {
     background-position: 0 -32px;
 }
-
-.starMap {
-  background-image: url(<%= asset_path('starmap_sprite.png') %>);
-  background-position: 0 0;
-  background-repeat: no-repeat;
-  width: 32px;
-}
-.starMap:hover {
-  background-position: 0 -32px !important;
-}
- .starMap.starred {
-  background-position: 0 -64px;
-}
-.starMap.starred:hover {
-  background-position: 0 0;
+.mapPage .mapInfoIcon {
+	top: 0;
 }
 
 /* end infoAndHelp */
@@ -406,10 +407,17 @@
 .mapControls {
 	position: absolute;
 	bottom: 24px;
-	right:24px;
+	right:-32px; /* puts it just offscreen */
 	width:32px;
 	z-index: 3;
 }
+.mapPage .mapControls, .topicPage .mapControls {
+	right: 24px;
+}
+
+.topicPage .zoomExtents {
+    display: none;
+}
 
 .mapControl {
 	width:32px;
@@ -424,18 +432,31 @@
     z-index: 4;
 }
 
+.takeScreenshot {
+    margin-bottom: 5px;
+    border-radius: 2px;
+    background-image: url(<%= asset_data_uri 'screenshot_sprite.png' %>);
+    display: none;
+}
+.takeScreenshot:hover {
+    background-position: -32px 0;
+}
+.canEditMap .takeScreenshot {
+    display: block;
+}
+
 .zoomExtents {
     margin-bottom:5px;
     border-radius: 2px;
-    background-image: url(<%= asset_path('extents_sprite.png') %>);
+    background-image: url(<%= asset_data_uri('extents_sprite.png') %>);
 }
 
 .zoomExtents:hover {
     background-position: -32px 0;
 }
 
-.zoomExtents:hover .tooltips, .zoomIn:hover .tooltips, .zoomOut:hover .tooltips, .sidebarFilterIcon:hover .tooltipsUnder, .sidebarForkIcon:hover .tooltipsUnder, .notificationsIcon:hover .tooltipsUnder, .addMap:hover .tooltipsUnder, .authenticated .sidebarAccountIcon:hover .tooltipsUnder,
- .mapInfoIcon:hover .tooltipsAbove, .openCheatsheet:hover .tooltipsAbove, .chat-button:hover .tooltips, .importDialog:hover .tooltipsUnder, .starMap:hover .tooltipsAbove, .openMetacodeSwitcher:hover .tooltipsAbove, .pinCarousel:not(.isPinned):hover .tooltipsAbove.helpPin, .pinCarousel.isPinned:hover .tooltipsAbove.helpUnpin  {
+.zoomExtents:hover .tooltips, .zoomIn:hover .tooltips, .zoomOut:hover .tooltips, .takeScreenshot:hover .tooltips, .sidebarFilterIcon:hover .tooltipsUnder, .sidebarForkIcon:hover .tooltipsUnder, .addMap:hover .tooltipsUnder, .authenticated .sidebarAccountIcon:hover .tooltipsUnder,
+ .mapInfoIcon:hover .tooltipsAbove, .openCheatsheet:hover .tooltipsAbove, .chat-button:hover .tooltips {
     display: block;
 }
 
@@ -491,44 +512,14 @@
     font-style: normal;
 }
 
-.importDialog .tooltipsUnder {
-    left: -22px;
-}
-
 .sidebarFilterIcon .tooltipsUnder {
     margin-left: -4px;
 }
-.notificationsIcon .tooltipsUnder {
-  left: -20px;
-}
 
 .sidebarForkIcon .tooltipsUnder {
     margin-left: -34px;
 }
 
-.openMetacodeSwitcher .tooltipsAbove {
-    left: -50px;
-    top: -5px;
-}
-.pinCarousel .tooltipsAbove {
-    top: -5px;
-}
-.pinCarousel .tooltipsAbove.helpPin {
-    left: -24px;
-}
-.pinCarousel .tooltipsAbove.helpUnpin {
-    left: -14px;
-}
-.openMetacodeSwitcher .tooltipsAbove:after {
-    left: 50%;
-}
-.pinCarousel .tooltipsAbove.helpPin:after {
-    left: 46%;
-}
-.pinCarousel .tooltipsAbove.helpUnpin:after {
-    left: 42%;
-}
-
 .sidebarForkIcon div:after{
     left: 45%;
 }
@@ -549,11 +540,8 @@
     top: 10px;
 }
 
-.starMap .tooltipsAbove {
-    left: -2px;
-}
-.starMap.starred .tooltipsAbove {
-    left: -8px;
+.openCheatsheet .tooltipsAbove {
+    left: -4px;
 }
 
 .sidebarAccountIcon .tooltipsUnder {
@@ -561,7 +549,7 @@
     margin-top: 40px;
 }
 
-.zoomExtents div::after, .zoomIn div::after, .zoomOut div::after, .chat-button div.tooltips::after {
+.zoomExtents div::after, .zoomIn div::after, .zoomOut div::after, .takeScreenshot div:after, .chat-button div.tooltips::after {
     content: '';
     position: absolute;
     top: 57%;
@@ -574,12 +562,7 @@
     border-bottom: 5px solid transparent;
 }
 
-.addMap div:after,
-.importDialog div:after,
-.sidebarForkIcon div:after,
-.sidebarFilterIcon div:after,
-.notificationsIcon div:after,
-.sidebarAccountIcon .tooltipsUnder:after {
+.sidebarFilterIcon div:after, .sidebarForkIcon div:after, .addMap div:after, .sidebarAccountIcon .tooltipsUnder:after {
     content: '';
     position: absolute;
     right: 40%;
@@ -590,17 +573,11 @@
     border-left: 5px solid transparent;
     border-right: 5px solid transparent;
 }
-.notificationsIcon .unread-notifications-dot:after {
-    content: none;
-}
 .sidebarFilterIcon div:after {
     right: 37% !important;
 }
-.notificationsIcon div:after {
-  right: 46% !important;
-}
 
-.mapInfoIcon div:after, .openCheatsheet div:after, .starMap div:after, .openMetacodeSwitcher div:after, .pinCarousel div:after {
+.mapInfoIcon div:after, .openCheatsheet div:after {
    content: '';
     position: absolute;
     top: 76%;
@@ -614,7 +591,7 @@
 }
 
 .zoomIn {
-    background-image: url(<%= asset_path('zoom_sprite.png') %>);
+    background-image: url(<%= asset_data_uri('zoom_sprite.png') %>);
     background-position: 0 /…0;
     border-top-left-radius: 2px;
     border-top-right-radius: 2px;
@@ -623,7 +600,7 @@
     background-position: -32px 0;
 }
 .zoomOut {
-    background-image: url(<%= asset_path('zoom_sprite.png') %>);
+    background-image: url(<%= asset_data_uri('zoom_sprite.png') %>);
     background-position:0 -32px;
     border-bottom-left-radius: 2px;
     border-bottom-right-radius: 2px;
@@ -634,84 +611,48 @@
 
 /* end mapControls */
 
+
+
 /* explore maps */
 
-#react-app {
-  position: absolute;
-  height: 100%;
-  width: 100%;
-  overflow-y: auto;
-}
-
-#exploreMaps {
-  position: absolute;
-  height: 100%;
-  width: 100%;
-  overflow-y: auto;
-}
-
-#exploreMaps > div {
-  margin: 110px auto 0 auto;
-}
-
-.button.loadMore {
-  margin: 10px auto 20px;
-  display: block;
-}
-
-.requestInviteHeader {
-  position: absolute;
-  width: 100%;
+.exploreMapsBar {
   z-index:2;
   background-color:#FAFAFA;
-  height: 52px;
-  box-shadow: 0px 3px 3px rgba(0,0,0,0.23), 0 3px 3px rgba(0,0,0,0.16);
 }
 
-#navBar {
-  position: absolute;
-  width: 100%;
-}
-
-.navBarContainer {
-  z-index:2;
-  background-color:#FAFAFA;
-  height: 42px;
-  padding-top: 52px;
-}
-
-.navBarMenu {
+.exploreMapsMenu {
   display: block;
   width: 100%;
+  margin-top:52px;
   height:42px;
   background-color:#EEEEEE;
   box-shadow: 0px 3px 3px rgba(0,0,0,0.23), 0 3px 3px rgba(0,0,0,0.16);
-  text-align: center;
 }
 
-.navBarCenter {
-   display: block;
+.exploreMapsCenter {
+    z-index: 3 !important;
 }
 
-.navBarButton {
+.exploreMapsButton {
     color: #757575;
 	cursor: default;
 	font-weight: normal;
 	font-family: 'din-medium';
 	font-size: 14px;
-	padding: 0 8px;
+	height: 14px;
+	padding: 14px 16px 12px 40px;
     border-bottom: 2px solid rgba(0,0,0,0);
 	display: inline-block;
     cursor: pointer;
     position:relative;
 }
-.navBarButton:hover, .navBarButton.active {
+.exploreMapsButton:hover, .exploreMapsButton.active {
   text-decoration: none;
   color: #424242;
   border-bottom: 2px solid #00BCD4;
 }
 
-.navBarButton.mapperButton {
+.exploreMapsButton.mapperButton {
     height: 40px;
     padding: 0;
 }
@@ -728,70 +669,34 @@
 }
 
 
-.navBarButton .navBarIcon {
+.exploreMapsButton .exploreMapsIcon {
     background-repeat: no-repeat;
     width:32px;
     height:32px;
-    margin-top:5px;
-    margin-left:5px;
-    margin-right: 5px;
-    display: inline-block;
-    vertical-align: top;
+    position:absolute;
+    top:5px;
+    left:5px;
 }
-
-.navBarLinkText {
-  padding: 11px 0 12px 0;
-  display: inline-block;
-}
-
-.navBarCenter .authedApps .navBarIcon {
-    background-image: url(<%= asset_path('user_sprite.png') %>);
-    background-position: 0 -32px;
-}
-.navBarCenter .myMaps .navBarIcon {
-    background-image: url(<%= asset_path 'exploremaps_sprite.png' %>);
-    background-position: -32px 0;
-}
-.navBarCenter .sharedMaps .navBarIcon {
-    background-image: url(<%= asset_path 'exploremaps_sprite.png' %>);
-    background-position: -128px 0;
-}
-.navBarCenter .activeMaps .navBarIcon {
-    background-image: url(<%= asset_path 'exploremaps_sprite.png' %>);
+.exploreMapsCenter .myMaps .exploreMapsIcon {
+    background-image: url(<%= asset_data_uri 'exploremaps_sprite.png' %>);
     background-position: 0 0;
 }
-.navBarCenter .featuredMaps .navBarIcon {
-    background-image: url(<%= asset_path 'exploremaps_sprite.png' %>);
-    background-position: -96px 0;
+.exploreMapsCenter .activeMaps .exploreMapsIcon {
+    background-image: url(<%= asset_data_uri 'exploremaps_sprite.png' %>);
+    background-position: -32px 0;
 }
-.navBarCenter .starredMaps .navBarIcon {
-    background-image: url(<%= asset_path 'exploremaps_sprite.png' %>);
-    background-position: -96px 0;
+.exploreMapsCenter .featuredMaps .exploreMapsIcon {
+    background-image: url(<%= asset_data_uri 'exploremaps_sprite.png' %>);
+    background-position: -64px 0;
 }
-.navBarCenter .notificationsLink .navBarIcon {
-    background-image: url(<%= asset_path 'topright_sprite.png' %>);
-    background-position: -128px 0;
-}
-.authedApps:hover .navBarIcon, .authedApps.active .navBarIcon {
-    background-position-x: -32px;
-}
-.myMaps:hover .navBarIcon, .myMaps.active .navBarIcon {
-    background-position: -32px -32px;
-}
-.activeMaps:hover .navBarIcon, .activeMaps.active .navBarIcon {
+.myMaps:hover .exploreMapsIcon, .myMaps.active .exploreMapsIcon {
     background-position: 0 -32px;
 }
-.featuredMaps:hover .navBarIcon, .featuredMaps.active .navBarIcon {
-    background-position: -96px -32px;
+.activeMaps:hover .exploreMapsIcon, .activeMaps.active .exploreMapsIcon {
+    background-position: -32px -32px;
 }
-.starredMaps:hover .navBarIcon, .starredMaps.active .navBarIcon {
-    background-position: -96px -32px;
-}
-.sharedMaps:hover .navBarIcon, .sharedMaps.active .navBarIcon {
-    background-position: -128px -32px;
-}
-.notificationsLink:hover .navBarIcon, .notificationsLink.active .navBarIcon {
-    background-position-y: -32px;
+.featuredMaps:hover .exploreMapsIcon, .featuredMaps.active .exploreMapsIcon {
+    background-position: -64px -32px;
 }
 
 .mapsWrapper {
@@ -801,31 +706,10 @@
 
 /* end explore maps */
 
-/* instructions */
-
-#instructions {
-  width: 220px;
-  height: 80px;
-  font-family: 'din-regular', helvetica, sans-serif;
-  font-size: 32px;
-  text-align: center;
-  color: #999999;
-  z-index: 0;
-  top: 50%;
-  position: absolute;
-  left: 50%;
-  margin-top: -40px;
-  margin-left: -110px;
-}
-
-/* end instructions */
 
 /* toast */
 
 .toast {
-    position: fixed;
-    bottom: 20px;
-    left: 20px;
     background-color: #323232;
     color: #F5F5F5;
     padding: 16px;

app/assets/stylesheets/emoji-mart-0.3.5.css

@@ -1,263 +0,0 @@
-.emoji-mart,
-.emoji-mart * {
-  box-sizing: border-box;
-  line-height: 1.15;
-}
-
-.emoji-mart {
-  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
-  font-size: 16px;
-  display: inline-block;
-  color: #222427;
-  border: 1px solid #d9d9d9;
-  border-radius: 5px;
-  background: #fff;
-}
-
-.emoji-mart .emoji-mart-emoji {
-  padding: 6px;
-}
-
-.emoji-mart-bar:first-child {
-  border-top-left-radius: 5px;
-  border-top-right-radius: 5px;
-}
-.emoji-mart-bar:last-child {
-  border-bottom-left-radius: 5px;
-  border-bottom-right-radius: 5px;
-}
-
-.emoji-mart-anchors {
-  display: flex;
-  justify-content: space-between;
-  padding: 0 6px;
-  color: #858585;
-  line-height: 0;
-}
-
-.emoji-mart-anchor {
-  position: relative;
-  flex: 1;
-  text-align: center;
-  padding: 12px 4px;
-  overflow: hidden;
-  transition: color .1s ease-out;
-}
-.emoji-mart-anchor:hover,
-.emoji-mart-anchor-selected {
-  color: #464646;
-}
-
-.emoji-mart-anchor-selected .emoji-mart-anchor-bar {
-  bottom: 0;
-}
-
-.emoji-mart-anchor-bar {
-  position: absolute;
-  bottom: -3px; left: 0;
-  width: 100%; height: 3px;
-  background-color: #464646;
-}
-
-.emoji-mart-anchors i {
-  display: inline-block;
-  width: 100%;
-  max-width: 22px;
-}
-
-.emoji-mart-anchors svg {
-  fill: currentColor;
-}
-
-.emoji-mart-scroll {
-  overflow-y: scroll;
-  height: 270px;
-  padding: 0 6px 6px 6px;
-  border: solid #d9d9d9;
-  border-width: 1px 0;
-}
-
-.emoji-mart-search {
-  font-size: 16px;
-  display: block;
-  width: 100%;
-  padding: .2em .6em;
-  margin-top: 6px;
-  border-radius: 25px;
-  border: 1px solid #d9d9d9;
-  outline: 0;
-}
-
-.emoji-mart-category .emoji-mart-emoji span {
-  z-index: 1;
-  position: relative;
-}
-
-.emoji-mart-category .emoji-mart-emoji:hover:before {
-  z-index: 0;
-  content: "";
-  position: absolute;
-  top: 0; left: 0;
-  width: 100%; height: 100%;
-  background-color: #f4f4f4;
-  border-radius: 100%;
-}
-
-.emoji-mart-category-label {
-  z-index: 2;
-  position: relative;
-  position: -webkit-sticky;
-  top: 0;
-}
-
-.emoji-mart-category-label span {
-  display: block;
-  width: 100%;
-  font-weight: 500;
-  padding: 5px 6px;
-  background-color: #fff;
-  background-color: rgba(255, 255, 255, .95);
-}
-
-.emoji-mart-emoji {
-  position: relative;
-  display: inline-block;
-  font-size: 0;
-}
-
-.emoji-mart-no-results {
-  font-size: 14px;
-  text-align: center;
-  padding-top: 70px;
-  color: #858585;
-}
-.emoji-mart-no-results span {
-  display: inline-block;
-  vertical-align: middle;
-}
-
-.emoji-mart-preview {
-  position: relative;
-  height: 70px;
-}
-
-.emoji-mart-preview-emoji,
-.emoji-mart-preview-data,
-.emoji-mart-preview-skins {
-  position: absolute;
-  top: 50%;
-  transform: translateY(-50%);
-}
-
-.emoji-mart-preview-emoji {
-  left: 12px;
-}
-
-.emoji-mart-preview-data {
-  left: 68px; right: 12px;
-  word-break: break-word;
-}
-
-.emoji-mart-preview-skins {
-  right: 30px;
-  text-align: right;
-}
-
-.emoji-mart-preview-name {
-  font-size: 14px;
-}
-
-.emoji-mart-preview-shortname {
-  font-size: 12px;
-  color: #888;
-}
-.emoji-mart-preview-shortname + .emoji-mart-preview-shortname,
-.emoji-mart-preview-shortname + .emoji-mart-preview-emoticon,
-.emoji-mart-preview-emoticon + .emoji-mart-preview-emoticon {
-  margin-left: .5em;
-}
-
-.emoji-mart-preview-emoticon {
-  font-size: 11px;
-  color: #bbb;
-}
-
-.emoji-mart-title span {
-  display: inline-block;
-  vertical-align: middle;
-}
-
-.emoji-mart-title .emoji-mart-emoji {
-  padding: 0;
-}
-
-.emoji-mart-title-label {
-  color: #999A9C;
-  font-size: 26px;
-  font-weight: 300;
-}
-
-.emoji-mart-skin-swatches {
-  font-size: 0;
-  padding: 2px 0;
-  border: 1px solid #d9d9d9;
-  border-radius: 12px;
-  background-color: #fff;
-}
-
-.emoji-mart-skin-swatches-opened .emoji-mart-skin-swatch {
-  width: 16px;
-  padding: 0 2px;
-}
-
-.emoji-mart-skin-swatches-opened .emoji-mart-skin-swatch-selected:after {
-  opacity: .75;
-}
-
-.emoji-mart-skin-swatch {
-  display: inline-block;
-  width: 0;
-  vertical-align: middle;
-  transition-property: width, padding;
-  transition-duration: .125s;
-  transition-timing-function: ease-out;
-}
-
-.emoji-mart-skin-swatch:nth-child(1) { transition-delay: 0 }
-.emoji-mart-skin-swatch:nth-child(2) { transition-delay: .03s }
-.emoji-mart-skin-swatch:nth-child(3) { transition-delay: .06s }
-.emoji-mart-skin-swatch:nth-child(4) { transition-delay: .09s }
-.emoji-mart-skin-swatch:nth-child(5) { transition-delay: .12s }
-.emoji-mart-skin-swatch:nth-child(6) { transition-delay: .15s }
-
-.emoji-mart-skin-swatch-selected {
-  position: relative;
-  width: 16px;
-  padding: 0 2px;
-}
-.emoji-mart-skin-swatch-selected:after {
-  content: "";
-  position: absolute;
-  top: 50%; left: 50%;
-  width: 4px; height: 4px;
-  margin: -2px 0 0 -2px;
-  background-color: #fff;
-  border-radius: 100%;
-  pointer-events: none;
-  opacity: 0;
-  transition: opacity .2s ease-out;
-}
-
-.emoji-mart-skin {
-  display: inline-block;
-  width: 100%; padding-top: 100%;
-  max-width: 12px;
-  border-radius: 100%;
-}
-
-.emoji-mart-skin-tone-1 { background-color: #ffc93a }
-.emoji-mart-skin-tone-2 { background-color: #fadcbc }
-.emoji-mart-skin-tone-3 { background-color: #e0bb95 }
-.emoji-mart-skin-tone-4 { background-color: #bf8f68 }
-.emoji-mart-skin-tone-5 { background-color: #9b643d }
-.emoji-mart-skin-tone-6 { background-color: #594539 }

app/assets/stylesheets/famous.css

@@ -0,0 +1,77 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ *
+ * Owner: mark@famo.us
+ * @license MPL 2.0
+ * @copyright Famous Industries, Inc. 2014
+ */
+
+
+html {
+    width: 100%;
+    height: 100%;
+    margin: 0px;
+    padding: 0px;
+    overflow: hidden;
+    -webkit-transform-style: preserve-3d;
+    transform-style: preserve-3d;
+}
+
+body {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    margin: 0px;
+    padding: 0px;
+    -webkit-transform-style: preserve-3d;
+    transform-style: preserve-3d;
+    -webkit-font-smoothing: antialiased;
+    -webkit-tap-highlight-color: transparent;
+    -webkit-perspective: 0;
+    perspective: none;
+    overflow: hidden;
+}
+
+.famous-container, .famous-group {
+    position: absolute;
+    top: 0px;
+    left: 0px;
+    bottom: 0px;
+    right: 0px;
+    overflow: visible;
+    -webkit-transform-style: preserve-3d;
+    transform-style: preserve-3d;
+    -webkit-backface-visibility: visible;
+    backface-visibility: visible;
+    pointer-events: none;
+}
+
+.famous-group {
+    width: 0px;
+    height: 0px;
+    margin: 0px;
+    padding: 0px;
+    -webkit-transform-style: preserve-3d;
+    transform-style: preserve-3d;
+}
+
+.famous-surface {
+    position: absolute;
+    -webkit-transform-origin: center center;
+    transform-origin: center center;
+    -webkit-backface-visibility: hidden;
+    backface-visibility: hidden;
+    -webkit-transform-style: flat;
+    transform-style: preserve-3d; /* performance */
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    -webkit-tap-highlight-color: transparent;
+    pointer-events: auto;
+}
+
+.famous-container-group {
+    position: relative;
+    width: 100%;
+    height: 100%;
+}

app/assets/stylesheets/gh-fork-ribbon.css

@@ -0,0 +1,140 @@
+/*!
+ * "Fork me on GitHub" CSS ribbon v0.1.1 | MIT License
+ * https://github.com/simonwhitaker/github-fork-ribbon-css
+*/
+
+/* Left will inherit from right (so we don't need to duplicate code) */
+.github-fork-ribbon {
+  /* The right and left classes determine the side we attach our banner to */
+  position: absolute;
+
+  /* Add a bit of padding to give some substance outside the "stitching" */
+  padding: 2px 0;
+
+  /* Set the base colour */
+  background-color: #9150bc;
+
+  /* Set a gradient: transparent black at the top to almost-transparent black at the bottom */
+  background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0.15)));
+  background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15));
+  background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15));
+  background-image: -ms-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15));
+  background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15));
+  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15));
+
+  /* Add a drop shadow */
+  -webkit-box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.5);
+  -moz-box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.5);
+  box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.5);
+
+  /* Set the font */
+  font: 700 13px "Helvetica Neue", Helvetica, Arial, sans-serif;
+
+  z-index: 9999;
+  pointer-events: auto;
+}
+
+.github-fork-ribbon a,
+.github-fork-ribbon a:hover {
+  /* Set the text properties */
+  color: #fff;
+  text-decoration: none;
+  text-shadow: 0 -1px rgba(0, 0, 0, 0.5);
+  text-align: center;
+
+  /* Set the geometry. If you fiddle with these you'll also need
+     to tweak the top and right values in .github-fork-ribbon. */
+  width: 200px;
+  line-height: 20px;
+
+  /* Set the layout properties */
+  display: inline-block;
+  padding: 2px 0;
+
+  /* Add "stitching" effect */
+  border-width: 1px 0;
+  border-style: dotted;
+  border-color: #fff;
+  border-color: rgba(255, 255, 255, 0.7);
+}
+
+.github-fork-ribbon-wrapper {
+  width: 150px;
+  height: 150px;
+  position: absolute;
+  overflow: hidden;
+  top: 0;
+  z-index: 9999;
+  pointer-events: none;
+}
+
+.github-fork-ribbon-wrapper.fixed {
+  position: fixed;
+}
+
+.github-fork-ribbon-wrapper.left {
+  left: 0;
+}
+
+.github-fork-ribbon-wrapper.right {
+  right: 0;
+}
+
+.github-fork-ribbon-wrapper.left-bottom {
+  position: fixed;
+  top: inherit;
+  bottom: 0;
+  left: 0;
+}
+
+.github-fork-ribbon-wrapper.right-bottom {
+  position: fixed;
+  top: inherit;
+  bottom: 0;
+  right: 0;
+}
+
+.github-fork-ribbon-wrapper.right .github-fork-ribbon {
+  top: 42px;
+  right: -43px;
+
+  -webkit-transform: rotate(45deg);
+  -moz-transform: rotate(45deg);
+  -ms-transform: rotate(45deg);
+  -o-transform: rotate(45deg);
+  transform: rotate(45deg);
+}
+
+.github-fork-ribbon-wrapper.left .github-fork-ribbon {
+  top: 42px;
+  left: -43px;
+
+  -webkit-transform: rotate(-45deg);
+  -moz-transform: rotate(-45deg);
+  -ms-transform: rotate(-45deg);
+  -o-transform: rotate(-45deg);
+  transform: rotate(-45deg);
+}
+
+
+.github-fork-ribbon-wrapper.left-bottom .github-fork-ribbon {
+  top: 80px;
+  left: -43px;
+
+  -webkit-transform: rotate(45deg);
+  -moz-transform: rotate(45deg);
+  -ms-transform: rotate(45deg);
+  -o-transform: rotate(45deg);
+  transform: rotate(45deg);
+}
+
+.github-fork-ribbon-wrapper.right-bottom .github-fork-ribbon {
+  top: 80px;
+  right: -43px;
+
+  -webkit-transform: rotate(-45deg);
+  -moz-transform: rotate(-45deg);
+  -ms-transform: rotate(-45deg);
+  -o-transform: rotate(-45deg);
+  transform: rotate(-45deg);
+}

app/assets/stylesheets/junto.css.erb

@@ -0,0 +1,348 @@
+.collaborator-video {
+  z-index: 1;
+  position: absolute;
+  width: 150px;
+  height: 150px;
+  cursor: default;
+  color: #FFF;
+}
+.collaborator-video .video-receive {
+    position: absolute;
+    width: 160px;
+    padding: 20px 20px 20px 170px;
+    background: #424242;
+    height: 110px;
+    border-top-left-radius: 75px;
+    border-bottom-left-radius: 75px;
+    border-top-right-radius: 2px;
+    border-bottom-right-radius: 2px;
+}
+.collaborator-video .video-receive .video-statement {
+    margin-bottom: 10px;
+}
+.collaborator-video .video-receive .btn-group .btn-yes {
+    margin-right: 10px;
+}
+.collaborator-video .video-receive .btn-group .btn-no {
+    background-color: #c04f4f;
+}
+.collaborator-video .video-receive .btn-group .btn-no:hover {
+    background-color: #A54242;
+}
+.collaborator-video .video-cutoff {
+  width: 150px;
+  height: 150px;
+  overflow: hidden;
+  border-radius: 75px;
+  z-index: 0;
+  position: relative;
+  -webkit-box-shadow: 0px 6px 3px rgba(0, 0, 0, 0.23), 10px 10px 10px rgba(0, 0, 0, 0.19);
+  -moz-box-shadow: 0px 6px 3px rgba(0, 0, 0, 0.23), 10px 10px 10px rgba(0, 0, 0, 0.19);
+  box-shadow: 0px 6px 3px rgba(0, 0, 0, 0.23), 10px 10px 10px rgba(0, 0, 0, 0.19);
+}
+.collaborator-video .video-cutoff video {
+  height: 150px;
+  margin-left: -25px;
+}
+.collaborator-video .video-cutoff .collaborator-video-avatar {
+  position: absolute;
+  top: 0;
+  left: 0;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -o-user-select: none;
+  user-select: none;
+  -webkit-user-drag: none;
+  display: none;
+}
+.collaborator-video .video-audio {
+  position: absolute;
+  width: 24px;
+  height: 24px;
+  top: 85%;
+  right: 0px;
+  cursor: pointer;
+  background: url(<%= asset_path 'audio_sprite.png' %>) no-repeat;
+}
+.collaborator-video .video-audio:hover {
+  background-position-x: -24px;
+}
+.collaborator-video .video-audio.active {
+  background-position-y: -24px;
+}
+.collaborator-video .video-video {
+  position: absolute;
+  width: 24px;
+  height: 24px;
+  top: 85%;
+  left: 0px;
+  cursor: pointer;
+  background: url(<%= asset_path 'camera_sprite.png' %>) no-repeat;
+}
+.collaborator-video .video-video:hover {
+  background-position-x: -24px;
+}
+.collaborator-video .video-video.active {
+  background-position-y: -24px;
+}
+.collaborator-video.my-video {
+  left: 30px;
+  top: 72px;
+}
+.chat-box {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  z-index: 1;
+  width: 300px;
+  float: right;
+  height: 100%;
+  background: #424242;
+  box-shadow: 0px 0px 16px 8px rgba(0, 0, 0, 0.23), -2px 10px 10px rgba(0, 0, 0, 0.19);
+}
+.chat-box .chat-button {
+  position: absolute;
+  top: 50%;
+  left: -36px;
+  width: 36px;
+  height: 49px;
+  background: url(<%= asset_path 'junto.png' %>) no-repeat 2px 9px, url(<%= asset_path 'tray_tab.png' %>) no-repeat;
+  cursor: pointer;
+}
+.chat-box .chat-button.active {
+  background: url(<%= asset_path 'junto_spinner_dark.gif' %>) no-repeat 2px 8px, url(<%= asset_path 'tray_tab.png' %>) no-repeat !important;
+}
+.chat-box .chat-button .chat-unread {
+  display: none;
+  background: #DAB539;
+  position: absolute;
+  top: -3px;
+  left: -11px;
+  width: 20px;
+  height: 20px;
+  border-radius: 11px;
+  border: 2px solid #424242;
+  color: #424242;
+  text-align: center;
+  font-size: 12px;
+  font-weight: bold;
+  line-height: 20px;
+}
+.chat-box .junto-header {
+  width: 100%;
+  padding: 16px 8px 16px 16px;
+  font-size: 16px;
+  text-align: left;
+  font-weight: bold;
+  background-color: #000000;
+  color: #f5f5f5;
+  box-shadow: 0px 6px 3px rgba(0, 0, 0, 0.23), 10px 10px 10px rgba(0, 0, 0, 0.19);
+}
+.chat-box .junto-header .cursor-toggle {
+  width: 32px;
+  height: 32px;
+  margin-right: 8px;
+  margin-top: -8px;
+  float: right;
+  background: url(<%= asset_path 'cursor_sprite.png' %>) no-repeat;
+}
+.chat-box .junto-header .cursor-toggle:hover {
+  background-position-x: -32px;
+}
+.chat-box .junto-header .cursor-toggle.active {
+  background-position-y: -32px;
+}
+.chat-box .junto-header .video-toggle {
+  width: 32px;
+  height: 32px;
+  margin-right: 32px;
+  margin-top: -8px;
+  float: right;
+  background: url(<%= asset_path 'video_sprite.png' %>) no-repeat;
+}
+.chat-box .junto-header .video-toggle:hover {
+  background-position-x: -32px;
+}
+.chat-box .junto-header .video-toggle.active {
+  background-position-y: -32px;
+}
+.chat-box .participants {
+  width: 100%;
+  min-height: 150px;
+  padding: 16px 0px 16px 0px;
+  text-align: left;
+  color: #f5f5f5;
+  overflow-y: auto;
+}
+.chat-box .participants .conversation-live {
+  display: none;
+  padding: 5px 10px 5px 10px;
+  background: #c04f4f;
+  margin: 5px 10px;
+  border-radius: 2px;
+}
+.chat-box .participants .conversation-live .call-action {
+  float: right;
+  cursor: pointer;
+  color: #EBFF00;
+}
+.chat-box .participants .conversation-live .leave {
+  display: none;
+}
+.chat-box .participants.is-participating .conversation-live .leave {
+  display: block;
+}
+.chat-box .participants.is-participating .conversation-live .join {
+  display: none;
+}
+.chat-box .participants .participant {
+  width: 89%;
+  padding: 8px 8px 2px 8px;
+  color: #f5f5f5;
+  font-family: arial, sans-serif;
+  font-size: 13px;
+  line-height: 14px;
+}
+.chat-box .participants .participant .chat-participant-image {
+  width: 15%;
+  float: left;
+  overflow: hidden;
+  color: #BBB;
+  padding-top: 2px;
+}
+.chat-box .participants .participant .chat-participant-image img {
+  width: 32px;
+  height: 32px;
+  border-radius: 18px;
+}
+.chat-box .participants .participant .chat-participant-name {
+  width: 53%;
+  float: left;
+  font-size: 13px;
+  font-weight: bold;
+  margin-top: 12px;
+  padding: 2px 8px 0;
+  text-align: left;
+}
+.chat-box .participants .participant.is-self .chat-participant-invite-call,
+.chat-box .participants .participant.is-self .chat-participant-invite-join {
+  display: none !important;
+}
+.chat-box .participants.is-live .participant .chat-participant-invite-call {
+  display: none;
+}
+.chat-box .participants .participant .chat-participant-invite-join {
+  display: none;
+}
+.chat-box .participants.is-live.is-participating .participant:not(.active) .chat-participant-invite-join {
+  display: block;
+}
+.chat-box .participants .participant .chat-participant-invite-call,
+.chat-box .participants .participant .chat-participant-invite-join
+ {
+  float: right;
+  background: #4FC059 url(<%= asset_path 'invitepeer16.png' %>) no-repeat center center;
+}
+.chat-box .participants .participant.pending .chat-participant-invite-call,
+.chat-box .participants .participant.pending .chat-participant-invite-join {
+    background: #dab539 url(<%= asset_path 'ellipsis.gif' %>) no-repeat center center;
+}
+.chat-box .participants .participant .chat-participant-participating {
+  float: right;
+  display: none;
+  margin-top: 14px;
+}
+.chat-box .participants .participant .chat-participant-participating .green-dot {
+  background: #4fc059;
+  width: 12px;
+  height: 12px;
+  border-radius: 6px;
+}
+.chat-box .participants .participant.active .chat-participant-participating {
+  display: block;
+}
+.chat-box .chat-header {
+  width: 100%;
+  padding: 16px 8px 16px 16px;
+  font-size: 16px;
+  text-align: left;
+  font-weight: bold;
+  background-color: #000000;
+  color: #f5f5f5;
+  box-shadow: 0px 6px 3px rgba(0, 0, 0, 0.23), 10px 10px 10px rgba(0, 0, 0, 0.19);
+}
+.chat-box .chat-header .sound-toggle {
+  display: none;
+  width: 24px;
+  height: 24px;
+  margin-right: 32px;
+  margin-top: -2px;
+  float: right;
+  background: url(<%= asset_path 'sound_sprite.png' %>) no-repeat;
+}
+.chat-box .chat-header .sound-toggle:hover {
+  background-position-x: -24px;
+}
+.chat-box .chat-header .sound-toggle.active {
+  background-position-y: -24px;
+}
+.chat-box .chat-input {
+  min-height: 80px;
+  width: 94%;
+  padding: 8px 3% 8px 3%;
+  font-size: 13px;
+  outline: none;
+  resize: none;
+}
+.chat-box .chat-messages {
+  width: 100%;
+  padding: 16px 0px 0px 0px;
+  overflow-y: auto;
+  flex-grow: 1;
+}
+.chat-box .chat-messages .chat-message {
+  width: 89%;
+  padding: 8px 8px 2px 8px;
+  color: #f5f5f5;
+  font-family: arial, sans-serif;
+  font-size: 13px;
+  line-height: 14px;
+}
+.chat-box .chat-messages .chat-message a:link {
+  color: #4fb5c0;
+  text-decoration: underline;
+}
+.chat-box .chat-messages .chat-message a:visited {
+  color: #aea9fd;
+  text-decoration: underline;
+}
+.chat-box .chat-messages .chat-message a:hover {
+  color: #dab539;
+  text-decoration: underline;
+}
+.chat-box .chat-messages .chat-message .chat-message-user {
+  width: 15%;
+  float: left;
+  overflow: hidden;
+  color: #BBB;
+  padding-top: 2px;
+}
+.chat-box .chat-messages .chat-message .chat-message-user img {
+  border: 2px solid #424242;
+  width: 32px;
+  height: 32px;
+  border-radius: 18px;
+}
+.chat-box .chat-messages .chat-message .chat-message-text {
+  width: 73%;
+  float: left;
+  margin-top: 12px;
+  padding: 2px 8px 0;
+  text-align: left;
+}
+.chat-box .chat-messages .chat-message .chat-message-time {
+  float: right;
+  font-size: 10px;
+  color: #757575;
+}

app/assets/stylesheets/junto.scss.erb

@@ -1,375 +0,0 @@
-.collaborator-video {
-  z-index: 1;
-  position: absolute;
-  width: 150px;
-  height: 150px;
-  cursor: default;
-  color: #FFF;
-
-  .video-receive {
-    position: absolute;
-    width: 160px;
-    padding: 20px 20px 20px 170px;
-    background: #424242;
-    height: 110px;
-    border-top-left-radius: 75px;
-    border-bottom-left-radius: 75px;
-    border-top-right-radius: 2px;
-    border-bottom-right-radius: 2px;
-
-    .video-statement {
-      margin-bottom: 10px;
-    }
-    .btn-group {
-      .btn-yes {
-        margin-right: 10px;
-      }
-      .btn-no {
-        background-color: #c04f4f;
-        &:hover {
-          background-color: #A54242;
-        }
-      }
-    }
-  }
-
-  .video-cutoff {
-    width: 150px;
-    height: 150px;
-    overflow: hidden;
-    border-radius: 75px;
-    z-index: 0;
-    position: relative;
-    -webkit-box-shadow: 0px 6px 3px rgba(0, 0, 0, 0.23), 10px 10px 10px rgba(0, 0, 0, 0.19);
-    -moz-box-shadow: 0px 6px 3px rgba(0, 0, 0, 0.23), 10px 10px 10px rgba(0, 0, 0, 0.19);
-    box-shadow: 0px 6px 3px rgba(0, 0, 0, 0.23), 10px 10px 10px rgba(0, 0, 0, 0.19);
-
-    video {
-      height: 150px;
-      margin-left: -25px;
-    }
-    .collaborator-video-avatar {
-      position: absolute;
-      top: 0;
-      left: 0;
-      -webkit-user-select: none;
-      -khtml-user-select: none;
-      -moz-user-select: none;
-      -o-user-select: none;
-      user-select: none;
-      -webkit-user-drag: none;
-      display: none;
-    }
-  }
-  .video-audio {
-    position: absolute;
-    width: 24px;
-    height: 24px;
-    top: 85%;
-    right: 0px;
-    cursor: pointer;
-    background: url(<%= asset_path 'audio_sprite.png' %>) no-repeat;
-  }
-  .video-audio:hover {
-    background-position-x: -24px;
-  }
-  .video-audio.active {
-    background-position-y: -24px;
-  }
-  .video-video {
-    position: absolute;
-    width: 24px;
-    height: 24px;
-    top: 85%;
-    left: 0px;
-    cursor: pointer;
-    background: url(<%= asset_path 'camera_sprite.png' %>) no-repeat;
-  }
-  .video-video:hover {
-    background-position-x: -24px;
-  }
-  .video-video.active {
-    background-position-y: -24px;
-  }
-}
-
-.collaborator-video.my-video {
-  left: 30px;
-  top: 72px;
-}
-
-.chat-box {
-  position: absolute;
-  right: 0;
-  z-index: 1;
-  height: 100%;
-  background: #424242;
-  box-shadow: -8px 0px 16px 2px rgba(0, 0, 0, 0.23);
-
-  .chat-panel {
-    width: 300px;
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-  }
-
-  .chat-button {
-    position: absolute;
-    top: 50%;
-    left: -36px;
-    width: 36px;
-    height: 49px;
-    background: url(<%= asset_path 'junto.png' %>) no-repeat 2px 9px, url(<%= asset_path 'tray_tab.png' %>) no-repeat;
-    cursor: pointer;
-
-    &.active {
-      background: url(<%= asset_path 'junto_spinner_dark.gif' %>) no-repeat 2px 8px, url(<%= asset_path 'tray_tab.png' %>) no-repeat !important;
-    }
-    .chat-unread {
-      background: #DAB539;
-      position: absolute;
-      top: -3px;
-      left: -11px;
-      width: 20px;
-      height: 20px;
-      border-radius: 11px;
-      border: 2px solid #424242;
-      color: #424242;
-      text-align: center;
-      font-size: 12px;
-      font-weight: bold;
-      line-height: 20px;
-    }
-  }
-
-  .junto-header {
-    width: 276px;
-    padding: 16px 8px 16px 16px;
-    font-size: 16px;
-    text-align: left;
-    font-weight: bold;
-    background-color: #000000;
-    color: #f5f5f5;
-    box-shadow: 0px 6px 3px rgba(0, 0, 0, 0.23);
-
-    .cursor-toggle {
-      width: 32px;
-      height: 32px;
-      margin-right: 8px;
-      margin-top: -8px;
-      float: right;
-      background: url(<%= asset_path 'cursor_sprite.png' %>) no-repeat;
-    }
-    .cursor-toggle:hover {
-      background-position-x: -32px;
-    }
-    .cursor-toggle.active {
-      background-position-y: -32px;
-    }
-    .video-toggle {
-      width: 32px;
-      height: 32px;
-      margin-right: 10px;
-      margin-top: -8px;
-      float: right;
-      background: url(<%= asset_path 'video_sprite.png' %>) no-repeat;
-    }
-    .video-toggle:hover {
-      background-position-x: -32px;
-    }
-    .video-toggle.active {
-      background-position-y: -32px;
-    }
-  }
-
-  .participants {
-    width: 100%;
-    min-height: 150px;
-    padding: 16px 0px 16px 0px;
-    text-align: left;
-    color: #f5f5f5;
-    overflow-y: auto;
-
-    .conversation-live {
-      padding: 5px 10px 5px 10px;
-      background: #c04f4f;
-      margin: 5px 10px;
-      border-radius: 2px;
-    }
-    .conversation-live .call-action {
-      float: right;
-      cursor: pointer;
-      color: #EBFF00;
-    }
-    .participant {
-      width: 89%;
-      padding: 8px 8px 2px 8px;
-      color: #f5f5f5;
-      font-family: arial, sans-serif;
-      font-size: 13px;
-      line-height: 14px;
-
-      .chat-participant-image {
-        width: 15%;
-        float: left;
-        overflow: hidden;
-        color: #BBB;
-        padding-top: 2px;
-      }
-      .chat-participant-image img {
-        width: 32px;
-        height: 32px;
-        border-radius: 18px;
-      }
-      .chat-participant-name {
-        width: 53%;
-        float: left;
-        font-size: 13px;
-        font-weight: bold;
-        margin-top: 12px;
-        padding: 2px 8px 0;
-        text-align: left;
-      }
-      .chat-participant-invite-call,
-      .chat-participant-invite-join
-       {
-        float: right;
-        background: #4FC059 url(<%= asset_path 'invitepeer16.png' %>) no-repeat center center;
-      }
-      .chat-participant-invite-call.pending,
-      .chat-participant-invite-join.pending {
-          background: #dab539 url(<%= asset_path 'ellipsis.gif' %>) no-repeat center center;
-      }
-      .chat-participant-participating {
-        float: right;
-        margin-top: 14px;
-      }
-      .chat-participant-participating .green-dot {
-        background: #4fc059;
-        width: 12px;
-        height: 12px;
-        border-radius: 6px;
-      }
-    }
-  }
-
-  .chat-header {
-    width: 276px;
-    padding: 16px 8px 16px 16px;
-    font-size: 16px;
-    text-align: left;
-    font-weight: bold;
-    background-color: #000000;
-    color: #f5f5f5;
-    box-shadow: 0px 6px 3px rgba(0, 0, 0, 0.23);
-
-    .sound-toggle {
-      width: 24px;
-      height: 24px;
-      margin-right: 10px;
-      margin-top: -2px;
-      float: right;
-      background: url(<%= asset_path 'sound_sprite.png' %>) no-repeat;
-    }
-    .sound-toggle:hover {
-      background-position-x: -24px;
-    }
-    .sound-toggle.active {
-      background-position-y: -24px;
-    }
-  }
-
-  $chat_font_size: 16px;
-
-  .chat-input {
-    min-height: 80px;
-    width: 88%;
-    padding: 8px 9% 8px 3%;
-    font-size: $chat_font_size;
-    outline: none;
-    resize: none;
-  }
-
-  .chat-messages {
-    width: 100%;
-    padding: 16px 0px;
-    overflow-y: auto;
-    flex-grow: 1;
-
-    .chat-message {
-      width: 89%;
-      padding: 8px 8px 2px 8px;
-      color: #f5f5f5;
-      font-family: arial, sans-serif;
-      font-size: $chat_font_size;
-      line-height: $chat_font_size + 1px;
-
-      a:link {
-        color: #4fb5c0;
-        text-decoration: underline;
-      }
-      a:visited {
-        color: #aea9fd;
-        text-decoration: underline;
-      }
-      a:hover {
-        color: #dab539;
-        text-decoration: underline;
-      }
-      .chat-message-user {
-        width: 12%;
-        float: left;
-        overflow: hidden;
-        color: #BBB;
-        padding-top: 2px;
-      }
-      .chat-message-user img {
-        border: 2px solid #424242;
-        width: 28px;
-        height: 28px;
-        border-radius: 16px;
-      }
-      .chat-message-meta {
-        padding: 0 8px;
-        float: left;
-      }
-      .chat-message-username {
-        color: #4fc059;
-      }
-      .chat-message-text {
-        width: 80%;
-        float: left;
-        padding: 2px 8px 0;
-        text-align: left;
-        word-wrap: break-word;
-      }
-      .chat-message-time {
-        font-size: 12px;
-        color: #757575;
-      }
-    }
-  }
-
-  .new-message-area {
-    position: relative;
-
-    .emoji-mart {
-      position: absolute;
-      bottom: 98px;
-    }
-
-    .extra-message-options {
-      height: 20px;
-      position: absolute;
-      right: 2px;
-      bottom: 74px;
-    
-      .emoji-picker-button {
-        font-size: 16px;
-        line-height: 20px;
-        cursor: pointer;
-        padding: 4px;
-      }
-    }
-  }
-}

app/assets/stylesheets/mapcard.scss.erb

@@ -1,288 +0,0 @@
-/* Map Cards */
-
-.map {
-  display:inline-block;
-  width:220px;
-  height:340px;
-  font-size: 12px;
-  text-align: left;
-  overflow: visible;
-  background: #e8e8e8;
-  border-radius:2px;
-  margin:16px;
-  box-shadow: 0px 3px 3px rgba(0,0,0,0.23), 0 3px 3px rgba(0,0,0,0.16);
-
-  &.newMap {
-    float: left;
-    position: relative;
-
-    &:hover {
-      background: #dcdcdc;
-
-      .newMapImage {
-	background-position: 0 -72px;
-      }
-    }
-
-    a {
-      height: 340px;
-      display: block;
-      position: relative;
-    }
-
-    .newMapImage {
-      display: block;
-      width: 72px;
-      height: 72px;
-      background-image: url("<%= asset_data_uri('newmap_sprite.png') %>");
-      background-repeat: no-repeat;
-      background-position: 0 0;
-      position: absolute;
-      left: 50%;
-      margin-left: -36px;
-      top: 50%;
-      margin-top: -36px;
-    }
-
-    span {
-	font-family: 'din-regular', sans-serif;
-	font-size: 18px;
-	line-height: 22px;
-	text-align: center;
-	display: block;
-	padding-top: 220px;
-    }
-  }
-
-  .mapCard {
-    position:relative;
-    width:100%;
-    height:308px;
-    padding: 0 0 16px 0;
-    color: #424242;
-
-    &:hover {
-      .dropdownMenu .menuToggle .circle {
-        background-color: #FFF;
-      }
-      .dropdownMenu .menuToggle:hover .circle {
-        background-color: #DDD;
-      }
-
-     .mainContent {
-        filter: blur(2px);
-      }
-
-      .mapMetadata {
-        display: block;
-      }
-    }
-
-    .mapHasMapper, .mapHasConversation {
-      position: absolute;
-      top: 8px;
-      left: 8px;
-      min-width: 32px;
-      min-height: 32px;
-
-      &:hover {
-        background-color: #FFF;
-        border-radius: 2px;
-
-        .mapperList {
-          display: block;
-        }
-      }
-
-      .mapperList {
-        display: none;
-        padding: 8px;
-        list-style-type: none;
-
-        li {
-          &.live {
-            height: 32px;
-            padding-left: 32px;
-            font-size: 16px;
-          }
-
-          img {
-            width: 24px;
-            height: 24px;
-            border-radius: 12px;
-            display: inline-block;
-            vertical-align: middle;
-          }
-          span {
-            padding-left: 10px;
-            font-size: 14px;
-          }
-        }
-      }
-    }
-    .mapHasMapper {
-      background: url('<%= asset_path('junto.png') %>') no-repeat 4px 0;
-    }
-    .mapHasConversation {
-      background: url('<%= asset_path('junto.gif') %>') no-repeat 4px 0;
-    }
-
-    .dropdownMenu {
-      position: absolute;
-      top: 8px;
-      right: 8px;
-      cursor: pointer;
-
-      .menuToggle {
-        width: 30px;
-        height: 10px;
-
-        .circle {
-          display: inline-block;
-          background-color: #454545;
-          width: 6px;
-          height: 6px;
-          border-radius: 3px;
-          margin: 2px;
-        }
-
-        &:hover .circle {
-          background-color: #222;
-        }
-      }
-
-      .menuItems {
-        position: absolute;
-        top: 18px;
-        right: 0px;
-        background: #FFF;
-        border-radius: 2px;
-        list-style-type: none;
-        color: #454545;
-
-        li {
-          white-space: nowrap;
-          padding: 6px;
-
-          &:hover {
-            background-color: #DDD;
-          }
-        }
-      }
-    }
-
-    .mapScreenshot {
-      width: 100%;
-      height: 220px;
-    }
-
-    .mapScreenshot img {
-      width: 100%;
-    }
-
-    .title {
-      word-wrap: break-word;
-      font-size:18px;
-      line-height:22px;
-      height: 71px;
-      display:table;
-      padding: 0 16px;
-      font-family: 'din-regular', sans-serif;
-      margin: 0 auto;
-
-      .innerTitle {
-	display: table-cell;
-	vertical-align: middle;
-	text-align: center;
-      }
-    }
-
-    .creatorAndPerm {
-      padding: 8px;
-    }
-
-    .creatorImage {
-      display: inline-block;
-      border-radius: 16px;
-      vertical-align: middle;
-      width: 32px;
-      height: 32px;
-    }
-
-    span.creatorName {
-      margin-left: 8px;
-      max-width: 162px;
-      display: inline-block;
-      overflow: hidden;
-      white-space: nowrap;
-      text-overflow: ellipsis;
-      vertical-align: middle;
-    }
-
-    .creatorAndPerm.cardHasViewOnly span.creatorName {
-      max-width: 95px;
-    }
-
-    .cardViewOnly {
-      float: right;
-      line-height: 32px;
-      padding-right: 10px;
-      color: #454545;
-    }
-
-    .scroll {
-       display:block;
-       font-family: helvetica, sans-serif;
-       font-size: 12px;
-       word-wrap: break-word;
-       text-align: center;
-       margin-top: 16px;
-    }
-
-
-
-    .mapMetadata {
-      display: none;
-      position: absolute;
-      top: 0;
-      left: 0;
-      padding: 40px 20px 0;
-      height: 300px;
-      font-family: 'din-regular', sans-serif;
-      font-size: 12px;
-      color: #FFF;
-      background: -moz-linear-gradient(top,  rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.43) 81%, rgba(0,0,0,0) 100%);
-      background: -webkit-linear-gradient(top,  rgba(0,0,0,0.65) 0%,rgba(0,0,0,0.43) 81%,rgba(0,0,0,0) 100%);
-      background: linear-gradient(to bottom,  rgba(0,0,0,0.65) 0%,rgba(0,0,0,0.43) 81%,rgba(0,0,0,0) 100%);
-      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#00000000',GradientType=0 );
-    }
-
-    .metadataSection {
-      padding: 16px 0;
-      width: 90px;
-      float: left;
-      font-family: 'din-medium', sans-serif;
-      text-align: center;
-
-      div {
-        background: url('<%= asset_path('metadata.png') %>') no-repeat;
-        width: 32px;
-        height: 32px;
-        margin: 0 auto;
-      }
-      .numTopicsIcon {
-        background-position: 0 -32px;
-      }
-      .numStarsIcon {
-        background-position: 0 0;
-      }
-      .numSynapsesIcon {
-        background-position: -32px -32px;
-      }
-      .numContributorsIcon {
-        background-position: -32px 0;
-      }
-    }
-
-  }
-}

app/assets/stylesheets/mobile.scss.erb

@@ -1,295 +0,0 @@
-@media only screen and (max-width : 752px) and (min-width : 504px) {
-  .sidebarSearch .tt-hint, .sidebarSearch .sidebarSearchField {
-    width: 160px !important;
-  }
-}
-
-/* when this switches to two lines */
-@media only screen and (max-width : 728px) {
-  .controller-notifications .notificationsPage .notification .notification-read-unread a {
-    margin-top: -20px !important;
-  }
-}
-
-@media only screen and (max-width : 390px) {
-  .map .mapCard .mobileMetadata {
-    width: 190px;
-  }
-}
-@media only screen and (min-width : 390px) {
-  .map .mapCard .mobileMetadata {
-    width: 390px;
-  }
-}
-/* 800 is the max-width for centerContent */
-@media only screen and (max-width : 800px) {
-  .centerContent.withPadding {
-    margin-top: 0;
-    margin-bottom: 0;
-  }
-}
-
-
-/* Smartphones (portrait and landscape) ----------- the minimum space that two map cards can fit side by side */
-@media only screen and (max-width : 504px) {
-  .upperLeftUI, .upperRightUI, .openCheatsheet, .mapInfoIcon, .feedback-icon, .chat-box, #navBar {
-    display: none !important;
-  }
-
-  .notificationsPage .page-header {
-    display: none;
-  }
-
-  .controller-notifications .notificationsPage .notification .notification-read-unread {
-    display: block !important;
-  }
-  .controller-notifications .notificationsPage .notification .notification-date {
-    display: none;
-  }
-
-  .homeWrapper {
-    width: 96%;
-    padding: 0 2%;
-  }
-  .homeWrapper.homeText {
-    margin-top: 80px;
-  }
-  .homeTitle {
-    text-align: left;
-  }
-  .homeIntro {
-    text-align: left;
-  }
-  .fullWidthWrapper.withVideo {
-    height: auto;
-  }
-  .homeVideo {
-    width: 100% !important;
-    height: auto;
-  }
-  .fullWidthWrapper.withPartners {
-    display: none;
-  }
-  .learnMoreCTA {
-    display: none !important;
-  }
-
-  #yield {
-    padding-top: 50px;
-  }
-
-  .new_session, .new_user, .edit_user, .login, .forgotPassword {
-    position: relative;
-    top: auto;
-    left: auto;
-    width: 78%;
-    padding: 16px 10%;
-    margin: 0 auto;
-  }
-
-  .centerGreyForm input[type="text"], .centerGreyForm input[type="email"], .centerGreyForm input[type="password"] {
-    width: 100%;
-  }
-
-  .wrapper .mapInfoBox {
-    position: fixed;
-    top: 50px;
-    right: 0px;
-    bottom: auto;
-    width: 100%;
-    max-width: 360px;
-  }
-
-  .requestInviteHeader {
-    display: none;
-  }
-  .requestInvite {
-    width: 100%;
-    height: calc(100% - 50px);
-    z-index: 1;
-    position: relative;
-    left: 0;
-    margin-left: 0px;
-    margin-top: 50px;
-  }
-
-  #exploreMaps > div {
-    margin-top: 70px;
-  }
-
-  .mapper {
-    width: 100%;
-    margin: 0 0 30px 0;
-  }
-
-  .map.newMap {
-    a {
-      height: auto;
-    }
-
-    .newMapImage {
-      position: relative;
-      display: inline-block;
-      height: 40px;
-      width: 40px;
-      left: auto;
-      top: auto;
-      margin: 0 0 0 8px;
-      background-size: 40px 80px;
-      vertical-align: middle;
-    }
-
-    span {
-      vertical-align: middle;
-      padding: 16px;
-      display: inline-block;
-    }
-  }
-  .map.newMap:hover .newMapImage {
-    background-position: 0 -40px;
-  }
-
-  .map {
-    width: 100%;
-    margin: 0 0 30px 0;
-    height: auto;
-
-    .mapCard {
-      height: auto;
-      padding: 0;
-
-      &:hover {
-        .mainContent {
-          filter: none;
-        }
-      }
-      .mobileHasMapper, .mobileHasConversation {
-        .mapperList {
-          padding: 8px 16px;
-          list-style-type: none;
-
-          li {
-            &.live {
-              height: 32px;
-              padding-left: 32px;
-              font-size: 16px;
-            }
-
-            img {
-              width: 24px;
-              height: 24px;
-              border-radius: 12px;
-              display: inline-block;
-              vertical-align: middle;
-            }
-            span {
-              padding-left: 10px;
-              font-size: 14px;
-            }
-          }
-        }
-      }
-      .mobileHasMapper {
-        background: url('<%= asset_path('junto.png') %>') no-repeat 12px 0;
-      }
-      .mobileHasConversation {
-        background: url('<%= asset_path('junto.gif') %>') no-repeat 12px 0;
-      }
-      .mobileMetadata {
-        margin: 0 auto;
-      }
-      .title {
-        text-align: left;
-        display: block;
-        height: auto;
-        padding: 16px;
-      }
-      .desc {
-        padding: 0 16px;
-      }
-    }
-  }
-}
-
-#mobile_header {
-  height: 50px;
-  background: #EEE;
-  width: 100%;
-  box-shadow: 0px 3px 3px rgba(0,0,0,0.23), 0 3px 3px rgba(0,0,0,0.16);
-  position: fixed;
-  z-index: 1;
-}
-
-#menu_icon {
-  width: 50px;
-  height: 50px;
-  border-right: 1px solid #DDD;
-  position: absolute;
-  background: #EEE url('<%= asset_path('menu-alt-256.png') %>') no-repeat center center;
-  background-size: 30px;
-}
-
-#header_content {
-  position: absolute;
-  width: 100%;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  padding: 0 10px 0 60px;
-  font-size: 24px;
-  line-height: 50px;
-}
-
-#mobile_header #menu_icon .unread-notifications-dot {
-  top: 5px;
-  left: 29px;
-  width: 12px;
-  height: 12px;
-  border: 3px solid #eee;
-  border-radius: 9px;
-}
-
-#mobile_menu {
-  background: #EEE;
-  position: fixed;
-  top: 50px;
-  border-top: 1px solid #DDD;
-  padding: 10px;
-  width: 200px;
-  box-shadow: 3px 3px 3px rgba(0,0,0,0.23), 3px 3px 3px rgba(0,0,0,0.16);
-  z-index: 2;
-
-  li {
-    padding: 7px 10px;
-    list-style: none;
-    font-family: 'din-regular', arial, sans-serif;
-
-    .sprite {
-      margin-right: 6px;
-      margin-top: -2px;
-      display: inline-block;
-      vertical-align: middle;
-    }
-
-    &.notifications {
-      position: relative;
-
-      .unread-notifications-dot {
-        top: 50%;
-        left: 0px;
-        margin-top: -4px;
-      }
-    }
-  }
-}
-
-li.mobileMenuUser {
-  border-bottom: 1px solid #BBB;
-}
-
-.mobileMenuUser img {
-  display: inline-block;
-  vertical-align: middle;
-  margin-right: 10px;
-  border-radius: 16px;
-}

app/assets/stylesheets/notifications.scss.erb

@@ -1,237 +0,0 @@
-$notifications-border-color: #DDDDDD;
-$notifications-hover-color: #F6F6F6;
-$unread_notifications_dot_size: 8px;
-
-.unread-notifications-dot {
-  width: $unread_notifications_dot_size;
-  height: $unread_notifications_dot_size;
-  background-color: #e22;
-  border-radius: $unread_notifications_dot_size / 2;
-  position: absolute;
-  top: 0;
-  right: 0;
-}
-
-.upperRightUI {
-  .notificationsIcon {
-    position: relative;
-  }
-
-  .notificationsBox {
-    position: absolute;
-    background: #FFFFFF;
-    border-radius: 2px;
-    width: 350px;
-    right: 0;
-    top: 50px;
-    box-shadow: 0 3px 6px rgba(0,0,0,0.16);
-    border: 1px solid $notifications-border-color;
-
-    .notificationsBoxTriangle {
-      min-width: 0 !important;
-      display: block;
-      position: absolute;
-      right: 48px;
-      width: 20px !important;
-      height: 20px !important;
-      margin-left: -10px;
-      top: -11px;
-      border-left: 1px solid $notifications-border-color;
-      border-top: 1px solid $notifications-border-color;
-      border-bottom: 0 !important;
-      border-right: 0 !important;
-      background-color: #fff;
-      transform: rotate(45deg);
-      -webkit-transform: rotate(45deg);
-      -ms-transform: rotate(45deg);
-    }
-
-    ul.notifications {
-      max-height: 500px;
-      overflow-y: auto;
-
-      .notification {
-        font-size: 13px;
-
-        .notification-body {
-          border-bottom: 1px solid $notifications-border-color;
-        }
-      }
-
-      .notificationsEmpty {
-        font-family: din-regular, helvetica, sans-serif;
-        margin: 50px 10px;
-        text-align: center;
-      }
-    }
-
-    .notificationsBoxSeeAll {
-      display: block;
-      width: 100%;
-      text-align: center;
-      padding: 6px 0;
-      font-family: din-regular, helvetica, sans-serif;
-      border-top: 1px solid rgba(0, 0, 0, 0.1);
-
-      &:hover {
-        color: #333;
-        background: $notifications-hover-color;
-      }
-    }
-  }
-}
-
-.controller-notifications {
-  .notificationPage,
-  .notificationsPage {
-    font-family: 'din-regular', Sans-Serif;
-
-    & a:hover {
-      text-decoration: none;
-    }
-
-    & > .notification-title {
-      border-bottom: 1px solid #eee;
-      padding-bottom: 0.25em;
-      margin-bottom: 0.5em;
-    }
-
-    .back {
-      margin-top: 1em;
-    }
-  }
-
-  .notificationsPage {
-    header {
-      margin-bottom: 0;
-    }
-
-    .emptyInbox {
-      padding-top: 15px;
-    }
-  }
-
-
-
-  .notificationPage {
-    .thirty-two-avatar {
-      display: inline-block;
-      width: 32px;
-      height: 32px;
-      border-radius: 16px;
-      vertical-align: middle;
-    }
-
-    .button {
-      line-height: 32px;
-
-      img {
-        margin-top: 8px;
-      }
-
-      &.decline {
-        background: #DB5D5D;
-        &:hover {
-          background: #DC4B4B;
-        }
-      }
-    }
-
-    .notification-body {
-      p, div {
-        margin: 1em auto;
-        line-height: 20px;
-      }
-    }
-  }
-}
-
-ul.notifications {
-  list-style: none;
-
-  li:nth-last-child(2) {
-    .notification-body {
-      border-bottom: none !important;
-    }
-  }
-}
-
-.notification {
-  padding: 10px 10px 0 10px;
-  position: relative;
-  font-family: 'din-regular', Sans-Serif;
-
-  &.unread {
-    background: #EEE;
-  }
-
-  &:hover {
-    background: $notifications-hover-color;
-
-    .notification-read-unread {
-      display:block;
-    }
-
-    .notification-date {
-      display: none;
-    }
-  }
-
-  & > a {
-    float: left;
-    width: 85%;
-    box-sizing: border-box;
-    padding-right: 10px;
-  }
-
-  .notification-actor {
-    float: left;
-
-    img {
-      width: 32px;
-      height: 32px;
-      border-radius: 16px;
-    }
-  }
-
-  .notification-body {
-    margin-left: 50px;
-    line-height: 20px;
-    padding-bottom: 10px;
-
-    .in-bold {
-      font-family: 'din-medium', Sans-Serif;
-    }
-
-    .action {
-      background: #4fb5c0;
-      color: #FFF;
-      padding: 2px 6px;
-      border-radius: 3px;
-      display: inline-block;
-      margin: 5px 0;
-    }
-  }
-
-  .notification-date {
-    position: absolute;
-    top: 50%;
-    right: 10px;
-    color: #607d8b;
-    margin-top: -6px;
-  }
-
-  .notification-read-unread {
-    display: none;
-    float: left;
-    width: 15%;
-
-    a, div {
-      position: absolute;
-      top: 50%;
-      margin-top: -10px;
-      text-align: center;
-      cursor: pointer;
-    }
-  }
-}

app/assets/stylesheets/request_access.scss.erb

@@ -1,87 +0,0 @@
-.viewOnly {
-  float: left;
-  margin-left: 16px;
-  height: 32px;
-  border: 1px solid #BDBDBD;
-  border-radius: 2px;
-  background-color: #424242;
-  color: #FFF;
-  font-size: 14px;
-  line-height: 32px;
-
-  &.isViewOnly {
-    display: block;
-  }
-
-  .eyeball {
-    background: url('<%= asset_path('view-only.png') %>') no-repeat 4px 0;
-    padding-left: 40px;
-    border-right: #747474;
-    padding-right: 10px;
-    display: inline-block;
-  }
-
-  .requestNotice {
-    display: inline-block;
-    padding: 0 8px;
-  }
-
-  .requestAccess {
-    background-color: #a354cd;
-    &:hover {
-      background-color: #9150bc;
-    }
-    cursor: pointer;
-  }
-
-  .requestPending {
-    background-color: #4fc059;
-  }
-
-  .requestNotAccepted {
-    background-color: #c04f4f;
-  }
-}
-
-.request_access {
-  position: absolute;
-  width: 90%;
-  margin: 0 5%;
-
-  .monkey {
-    width: 250px;
-    height: 250px;
-    border: 6px solid #424242;
-    border-radius: 125px;
-    background: url(https://s3.amazonaws.com/metamaps-assets/site/monkeyselfie.jpg) no-repeat;
-    background-position: 50% 20%;
-    background-size: 100%;
-    margin: 80px auto 20px auto;
-  }
-
-  .explainer_text {
-    padding: 0 20% 0 20%;
-    font-size: 24px;
-    line-height: 30px;
-    margin-bottom: 20px;
-    text-align: center;
-  }
-
-  .make_request {
-    background-color: #a354cd;
-    display: block;
-    width: 220px;
-    height: 14px;
-    padding: 16px 0;
-    margin-bottom: 16px;
-    text-align: center;
-    border-radius: 2px;
-    font-size: 14px;
-    box-shadow: 0px 1px 1.5px rgba(0,0,0,0.12), 0 1px 1px rgba(0,0,0,0.24);
-    margin: 0 auto 20px auto;
-    text-decoration: none;
-    color: #FFFFFF !important;
-    cursor: pointer;
-  }
-
-}