Merge pull request #578 from metamaps/paring.down

remove all traces of Famous and improve mobile
2016-08-12 13:42:57 +08:00 · 2016-08-12 13:42:57 +08:00 · c77e3b2da5
commit c77e3b2da5
parent f4eb9250ad 6eff5e640e
55 changed files with 566 additions and 1258 deletions
--- a/app/assets/images/menu-alt-256.png
+++ b/app/assets/images/menu-alt-256.png
--- a/app/assets/javascripts/application.js
+++ b/app/assets/javascripts/application.js
@ -40,9 +40,8 @@
 //= require ./src/Metamaps.Map
 //= require ./src/Metamaps.Account
 //= require ./src/Metamaps.Mapper
+//= require ./src/Metamaps.Mobile
 //= require ./src/Metamaps.Admin
 //= require ./src/Metamaps.Import
+//= require ./src/Metamaps.Header
 //= require ./src/Metamaps.JIT
-//= require_directory ./shims
-//= require_directory ./require
-//= require_directory ./famous
--- a/app/assets/javascripts/famous/famous.min.js
+++ b/app/assets/javascripts/famous/famous.min.js
--- a/app/assets/javascripts/require/require.js
+++ b/app/assets/javascripts/require/require.js
@ -1,36 +0,0 @@
-/*
- 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);
--- a/app/assets/javascripts/shims/classList.js
+++ b/app/assets/javascripts/shims/classList.js
@ -1,138 +0,0 @@
-
-/*
- * 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));
-
-}
--- a/app/assets/javascripts/shims/functionPrototypeBind.js
+++ b/app/assets/javascripts/shims/functionPrototypeBind.js
@ -1,23 +0,0 @@
-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;
-    };
-}
--- a/app/assets/javascripts/shims/requestAnimationFrame.js
+++ b/app/assets/javascripts/shims/requestAnimationFrame.js
@ -1,13 +0,0 @@
-// 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);
-});
--- a/app/assets/javascripts/src/JIT.js.erb
+++ b/app/assets/javascripts/src/JIT.js.erb
@ -2680,10 +2680,7 @@ var Canvas;
          opt.injectInto:opt.injectInto.id,
          type = opt.type,
          idLabel = id + "-label", 
-          // ORIGINAL CODE wrapper = $(id),
-          // START METAMAPS CODE
-          //wrapper = Metamaps.Famous.viz.surf,
-          // END METAMAPS CODE
+          wrapper = $(id),
          width = opt.width, // || wrapper.offsetWidth,
          height = opt.height; // || wrapper.offsetHeight;
      this.id = id;
@ -2730,15 +2727,7 @@ var Canvas;
        }
      }
      this.element.appendChild(this.labelContainer);
-
-      // 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);
-
+      wrapper.appendChild(this.element);

      //Update canvas position when the page is scrolled.
      var timer = null, that = this;
--- a/app/assets/javascripts/src/Metamaps.Backbone.js
+++ b/app/assets/javascripts/src/Metamaps.Backbone.js
@ -5,23 +5,23 @@
 *
 * Dependencies:
 *  - Metamaps.Active
- *  - Metamaps.Collaborators 
+ *  - Metamaps.Collaborators
 *  - Metamaps.Creators
 *  - Metamaps.Filter
 *  - Metamaps.JIT
 *  - Metamaps.Loading
 *  - Metamaps.Map
 *  - Metamaps.Mapper
- *  - Metamaps.Mappers 
- *  - Metamaps.Mappings 
- *  - Metamaps.Metacodes 
+ *  - Metamaps.Mappers
+ *  - Metamaps.Mappings
+ *  - Metamaps.Metacodes
 *  - Metamaps.Realtime
 *  - Metamaps.Synapse
 *  - Metamaps.SynapseCard
 *  - Metamaps.Synapses
 *  - Metamaps.Topic
 *  - Metamaps.TopicCard
- *  - Metamaps.Topics 
+ *  - Metamaps.Topics
 *  - Metamaps.Visualize
 */

--- a/app/assets/javascripts/src/Metamaps.GlobalUI.js
+++ b/app/assets/javascripts/src/Metamaps.GlobalUI.js
@ -1,4 +1,4 @@
-var Metamaps = {}; // this variable declaration defines a Javascript object that will contain all the variables and functions used by us, broken down into 'sub-modules' that look something like this
+var Metamaps = window.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
@ -43,31 +43,45 @@ Metamaps.Active = {
 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 all the modules
+  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();
+      }
  }
+  // load whichever page you are on
+  if (Metamaps.currentSection === "explore") {
+      var capitalize = Metamaps.currentPage.charAt(0).toUpperCase() + Metamaps.currentPage.slice(1);

-    // initialize the famous ui
-    var callFamous = function(){
-        if (Metamaps.Famous) {
-            Metamaps.Famous.build();
-            init();
-        }
-        else {
-            setTimeout(callFamous, 100);
-        }
-    }
-    callFamous();
+      Metamaps.Views.exploreMaps.setCollection( Metamaps.Maps[capitalize] );
+      if (Metamaps.currentPage === "mapper") {
+          Metamaps.Views.exploreMaps.fetchUserThenRender();
+          Metamaps.Header.fetchUserThenChangeSection(!!Metamaps.Active.Mapper, Metamaps.Maps.Mapper.mapperId)
+      }
+      else {
+          Metamaps.Views.exploreMaps.render();
+          Metamaps.Header.changeSection(!!Metamaps.Active.Mapper, Metamaps.currentPage)
+      }
+      Metamaps.GlobalUI.showDiv('#exploreMaps')
+      Metamaps.GlobalUI.showDiv('#exploreMapsHeader')
+  }
+  else if (Metamaps.currentSection === "" && Metamaps.Active.Mapper) {
+      Metamaps.Views.exploreMaps.setCollection( Metamaps.Maps.Active );
+      Metamaps.Views.exploreMaps.render();
+      Metamaps.GlobalUI.showDiv('#exploreMaps')
+      Metamaps.Header.changeSection(!!Metamaps.Active.Mapper, 'active')
+      Metamaps.GlobalUI.showDiv('#exploreMapsHeader')
+  }
+  else if (Metamaps.Active.Map || Metamaps.Active.Topic) {
+    Metamaps.Loading.show()
+    Metamaps.JIT.prepareVizData()
+    Metamaps.GlobalUI.showDiv('#infovis')
+  }
 });

 Metamaps.GlobalUI = {
@ -79,6 +93,8 @@ Metamaps.GlobalUI = {
        self.Search.init();
        self.CreateMap.init();
        self.Account.init();
+        
+        if ($('#toast').html().trim()) self.notifyUser($('#toast').html())

        //bind lightbox clicks
        $('.openLightbox').click(function (event) {
@ -109,6 +125,17 @@ Metamaps.GlobalUI = {
        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' });
    },
+    showDiv: function (selector) {
+      $(selector).show()
+      $(selector).animate({
+        opacity: 1
+      }, 200, 'easeOutCubic')
+    },
+    hideDiv: function (selector) {
+      $(selector).animate({
+        opacity: 0
+      }, 200, 'easeInCubic', function () { $(this).hide() })
+    },
    openLightbox: function (which) {
        var self = Metamaps.GlobalUI;

@ -164,33 +191,20 @@ Metamaps.GlobalUI = {
    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();
+         $('#toast').html(message)
+         self.showDiv('#toast')
+         clearTimeout(self.notifyTimeOut);
+         if (!leaveOpen) {
+             self.notifyTimeOut = setTimeout(function () {
+                 self.hideDiv('#toast')
+             }, 8000);
+         }
    },
    clearNotify: function() {
        var self = Metamaps.GlobalUI;

        clearTimeout(self.notifyTimeOut);
-        Metamaps.Famous.toast.hide();
+        self.hideDiv('#toast')
    },
    shareInvite: function(inviteLink) {
        window.prompt("To copy the invite link, press: Ctrl+C, Enter", inviteLink);
--- a/app/assets/javascripts/src/Metamaps.Header.js
+++ b/app/assets/javascripts/src/Metamaps.Header.js
@ -0,0 +1,22 @@
+/* global Metamaps, $ */
+
+Metamaps.Header = {
+  init: function () {
+
+  },
+  fetchUserThenChangeSection: function (signedIn, mapperId) {
+    $.ajax({
+       url: '/users/' + mapperId + '.json',
+       success: function (response) {
+         Metamaps.Header.changeSection(signedIn, 'mapper', response.image, response.name)
+       },
+       error: function () {}
+    }); 
+  },
+  changeSection: function (signedIn, section, userAvatar, userName) {
+    ReactDOM.render(
+      React.createElement(Metamaps.ReactComponents.Header, { signedIn: signedIn, section: section, userAvatar: userAvatar, userName: userName }),
+      document.getElementById('exploreMapsHeader')
+    );
+  }
+}
--- a/app/assets/javascripts/src/Metamaps.JIT.js
+++ b/app/assets/javascripts/src/Metamaps.JIT.js
@ -111,10 +111,12 @@ Metamaps.JIT = {
    })

    if (self.vizData.length == 0) {
-      Metamaps.Famous.viz.showInstructions()
+      $('#instructions div').hide()
+      $('#instructions div.addTopic').show()
+      Metamaps.GlobalUI.showDiv('#instructions')
      Metamaps.Visualize.loadLater = true
    }
-    else Metamaps.Famous.viz.hideInstructions()
+    else Metamaps.GlobalUI.hideDiv('#instructions')

    Metamaps.Visualize.render()
  }, // prepareVizData
--- a/app/assets/javascripts/src/Metamaps.Map.js
+++ b/app/assets/javascripts/src/Metamaps.Map.js
@ -109,6 +109,9 @@ Metamaps.Map = {

      Metamaps.Realtime.startActiveMap()
      Metamaps.Loading.hide()
+      
+      // for mobile
+      $('#header_content').html(map.get('name'))
    }

    $.ajax({
--- a/app/assets/javascripts/src/Metamaps.Mobile.js
+++ b/app/assets/javascripts/src/Metamaps.Mobile.js
@ -0,0 +1,32 @@
+/* global Metamaps, $ */
+
+/*
+ * Metamaps.Mobile.js
+ *
+ * Dependencies:
+ *  - Metamaps.Active
+ *  - Metamaps.Map
+ */
+
+Metamaps.Mobile = {
+  init: function () {
+    var self = Metamaps.Mobile
+    
+    $('#menu_icon').click(self.toggleMenu)
+    $('#mobile_menu li a').click(self.liClick)
+    $('#header_content').click(self.titleClick)
+  },
+  liClick: function () {
+    var self = Metamaps.Mobile
+    $('#header_content').html($(this).text())
+    self.toggleMenu()
+  },
+  toggleMenu: function () {
+    $('#mobile_menu').toggle()
+  },
+  titleClick: function () {
+    if (Metamaps.Active.Map) {
+      Metamaps.Map.InfoBox.open()
+    }
+  }
+}
--- a/app/assets/javascripts/src/Metamaps.Router.js
+++ b/app/assets/javascripts/src/Metamaps.Router.js
@ -5,7 +5,6 @@
 *
 * Dependencies:
 *  - Metamaps.Active
- *  - Metamaps.Famous
 *  - Metamaps.GlobalUI
 *  - Metamaps.JIT
 *  - Metamaps.Loading
@ -42,15 +41,15 @@
          Metamaps.Router.navigate('')
        }, 300)
      }
+
      // all this only for the logged in home page
      if (Metamaps.Active.Mapper) {
-        Metamaps.Famous.yield.hide()
+        Metamaps.GlobalUI.hideDiv('#yield')

-        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.Header.changeSection(!!Metamaps.Active.Mapper, 'active')
+        //Metamaps.Famous.maps.resetScroll() // sets the scroll back to the top
+        Metamaps.GlobalUI.showDiv('#exploreMapsHeader')
+        Metamaps.GlobalUI.showDiv('#exploreMaps')

        Metamaps.GlobalUI.Search.open()
        Metamaps.GlobalUI.Search.lock()
@ -63,18 +62,16 @@
        }
      } else {
        // logged out home page
-        Metamaps.Famous.yield.show()
-
-        Metamaps.Famous.explore.hide()
-
+        Metamaps.GlobalUI.hideDiv('#exploreMapsHeader')
+        Metamaps.GlobalUI.hideDiv('#exploreMaps')
+        Metamaps.GlobalUI.showDiv('#yield')
        Metamaps.GlobalUI.Search.unlock()
        Metamaps.GlobalUI.Search.close(0, true)
-
-        Metamaps.Famous.maps.hide()
        Metamaps.Router.timeoutId = setTimeout(navigate, 500)
      }

-      Metamaps.Famous.viz.hide()
+      Metamaps.GlobalUI.hideDiv('#infovis')
+      Metamaps.GlobalUI.hideDiv('#instructions')
      Metamaps.Map.end()
      Metamaps.Topic.end()
      Metamaps.Active.Map = null
@ -148,15 +145,16 @@

      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.GlobalUI.showDiv('#exploreMaps')
+      Metamaps.GlobalUI.showDiv('#exploreMapsHeader')
+      // Metamaps.Famous.maps.resetScroll() // sets scroll back to top
+      if (id) {
+        Metamaps.Header.fetchUserThenchangeSection(!!Metamaps.Active.Mapper, id)
+      }
+      else Metamaps.Header.changeSection(!!Metamaps.Active.Mapper, section)
+      Metamaps.GlobalUI.hideDiv('#yield')
+      Metamaps.GlobalUI.hideDiv('#infovis')
+      Metamaps.GlobalUI.hideDiv('#instructions')
      Metamaps.Map.end()
      Metamaps.Topic.end()
      Metamaps.Active.Map = null
@ -175,9 +173,9 @@
      // 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()
+      Metamaps.GlobalUI.hideDiv('#yield')
+      Metamaps.GlobalUI.hideDiv('#exploreMaps')
+      Metamaps.GlobalUI.hideDiv('#exploreMapsHeader')

      // clear the visualization, if there was one, before showing its div again
      if (Metamaps.Visualize.mGraph) {
@ -185,7 +183,7 @@
        Metamaps.Visualize.mGraph.plot()
        Metamaps.JIT.centerMap(Metamaps.Visualize.mGraph.canvas)
      }
-      Metamaps.Famous.viz.show()
+      Metamaps.GlobalUI.showDiv('#infovis')
      Metamaps.Topic.end()
      Metamaps.Active.Topic = null

@ -207,9 +205,9 @@
      $('.wrapper').removeClass('homePage explorePage mapPage')
      $('.wrapper').addClass('topicPage')

-      Metamaps.Famous.yield.hide()
-      Metamaps.Famous.maps.hide()
-      Metamaps.Famous.explore.hide()
+      Metamaps.GlobalUI.hideDiv('#yield')
+      Metamaps.GlobalUI.hideDiv('#exploreMaps')
+      Metamaps.GlobalUI.hideDiv('#exploreMapsHeader')

      // clear the visualization, if there was one, before showing its div again
      if (Metamaps.Visualize.mGraph) {
@ -217,7 +215,7 @@
        Metamaps.Visualize.mGraph.plot()
        Metamaps.JIT.centerMap(Metamaps.Visualize.mGraph.canvas)
      }
-      Metamaps.Famous.viz.show()
+      Metamaps.GlobalUI.showDiv('#infovis')
      Metamaps.Map.end()
      Metamaps.Active.Map = null

--- a/app/assets/javascripts/src/Metamaps.Topic.js
+++ b/app/assets/javascripts/src/Metamaps.Topic.js
@ -84,6 +84,9 @@ Metamaps.Topic = {
      Metamaps.Filter.checkMetacodes()
      Metamaps.Filter.checkSynapses()
      Metamaps.Filter.checkMappers()
+      
+      // for mobile
+      $('#header_content').html(Metamaps.Active.Topic.get('name'))
    }

    $.ajax({
@ -309,7 +312,7 @@ Metamaps.Topic = {
    }

    // hide the 'double-click to add a topic' message
-    Metamaps.Famous.viz.hideInstructions()
+    Metamaps.GlobalUI.hideDiv('#instructions')

    $(document).trigger(Metamaps.Map.events.editedByActiveMapper)

--- a/app/assets/javascripts/src/Metamaps.Views.js
+++ b/app/assets/javascripts/src/Metamaps.Views.js
@ -80,24 +80,8 @@ Metamaps.Views.init = function () {
        that.el.appendChild(view.render().el)
      })
      this.$el.append('<div class="clearfloat"></div>')
-      var m = Metamaps.Famous.maps.surf
-      m.setContent(this.el)
-
-      var updateHeight = function () {
-        var height = $(that.el).height() + 32 + 56
-        m.setSize([undefined, height])
-        Metamaps.Famous.maps.lock = false
-        if (cb) cb()
-      }
-
-      if (!Metamaps.Views.initialized) {
-        m.deploy(m._currTarget)
-        Metamaps.Views.initialized = true
-        setTimeout(updateHeight, 100)
-      } else {
-        setTimeout(updateHeight, 100)
-      }
-
+      $('#exploreMaps').empty().html(this.el) 
+      if (cb) cb()
      Metamaps.Loading.hide()
    },
    handleSuccess: function (cb) {
--- a/app/assets/javascripts/src/Metamaps.Visualize.js
+++ b/app/assets/javascripts/src/Metamaps.Visualize.js
@ -114,6 +114,9 @@ Metamaps.Visualize = {
    var self = Metamaps.Visualize, RGraphSettings, FDSettings

    if (self.type == 'RGraph' && (!self.mGraph || self.mGraph instanceof $jit.ForceDirected)) {
+      // clear the previous canvas from #infovis
+      $('#infovis').empty()
+      
      RGraphSettings = $.extend(true, {}, Metamaps.JIT.ForceDirected.graphSettings)

      $jit.RGraph.Plot.NodeTypes.implement(Metamaps.JIT.ForceDirected.nodeSettings)
@ -126,6 +129,9 @@ Metamaps.Visualize = {

      self.mGraph = new $jit.RGraph(RGraphSettings)
    } else if (self.type == 'ForceDirected' && (!self.mGraph || self.mGraph instanceof $jit.RGraph)) {
+      // clear the previous canvas from #infovis
+      $('#infovis').empty()
+      
      FDSettings = $.extend(true, {}, Metamaps.JIT.ForceDirected.graphSettings)

      $jit.ForceDirected.Plot.NodeTypes.implement(Metamaps.JIT.ForceDirected.nodeSettings)
@ -136,6 +142,9 @@ Metamaps.Visualize = {

      self.mGraph = new $jit.ForceDirected(FDSettings)
    } else if (self.type == 'ForceDirected3D' && !self.mGraph) {
+      // clear the previous canvas from #infovis
+      $('#infovis').empty()
+      
      // init ForceDirected3D
      self.mGraph = new $jit.ForceDirected3D(Metamaps.JIT.ForceDirected3D.graphSettings)
      self.cameraPosition = self.mGraph.canvas.canvases[0].camera.position
--- a/app/assets/stylesheets/application.css.erb
+++ b/app/assets/stylesheets/application.css.erb
@ -1578,7 +1578,7 @@ h3.filterBox {
 .mapContributors {
    position: relative;
    height: 30px;
-    margin: 9px 0px 9px 56px;
+    margin: 9px 0px 9px 44px;
    padding: 0;
    width: 64px;
 }
--- a/app/assets/stylesheets/base.css.erb
+++ b/app/assets/stylesheets/base.css.erb
@ -49,6 +49,8 @@
 #infovis {
  width:100%;
  height:100%;
+  position: absolute;
+  display: none;
 }

 .showcard .permission {
--- a/app/assets/stylesheets/clean.css.erb
+++ b/app/assets/stylesheets/clean.css.erb
@ -24,21 +24,10 @@
    backface-visibility: visible !important;
 }

-#famousOverlay {
-  position:absolute;
-  top: 0;
+#yield {
+  position: absolute;
  width: 100%;
  height: 100%;
-  margin:0;
-  z-index: 0;
-}
-
-#yield {
-    display:none;
-}
-
-#toast {
-    display: none;
 }

 /*.animations {
@ -68,6 +57,7 @@
 /* loading */

 #loading {
+  display: none;
 	width: 28px;
 	height: 28px;
 	position: fixed;
@ -338,15 +328,6 @@
 .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 */
@ -611,26 +592,46 @@

 /* end mapControls */

-
-
 /* explore maps */

+#exploreMaps {
+  display: none;
+  padding: 0 5%;
+  position: absolute;
+  width: 90%;
+  height: 100%;
+  overflow-y: auto;
+}
+
+#exploreMaps > div {
+  margin-top: 110px;
+}
+
+#exploreMapsHeader {
+  display: none;
+  position: absolute;
+  width: 100%;
+}
+
 .exploreMapsBar {
  z-index:2;
  background-color:#FAFAFA;
+  height: 42px;
+  padding-top: 52px;
 }

 .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);
 }

 .exploreMapsCenter {
-    z-index: 3 !important;
+   margin: 0 auto;
+   display: block;
+   width: 419px;
 }

 .exploreMapsButton {
@ -713,10 +714,33 @@

 /* end explore maps */

+/* instructions */
+
+#instructions {
+  width: 220px;
+  height: 80px;
+  font-family: 'din-regular', helvetica, sans-serif;
+  font-size: 32px;
+  display: none;
+  text-align: center;
+  color: #999999;
+  z-index: 0;
+  top: 50%;
+  position: absolute;
+  left: 50%;
+  margin-top: -40px;
+  margin-left: -110px;
+}
+
+/* end instructions */

 /* toast */

 .toast {
+    display: none;
+    position: fixed;
+    bottom: 20px;
+    left: 20px;
    background-color: #323232;
    color: #F5F5F5;
    padding: 16px;
--- a/app/assets/stylesheets/famous.css
+++ b/app/assets/stylesheets/famous.css
@ -1,77 +0,0 @@
-/* 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%;
-}
--- a/app/assets/stylesheets/gh-fork-ribbon.css
+++ b/app/assets/stylesheets/gh-fork-ribbon.css
@ -1,140 +0,0 @@
-/*!
- * "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);
-}
--- a/app/assets/stylesheets/mobile.css.erb
+++ b/app/assets/stylesheets/mobile.css.erb
@ -0,0 +1,125 @@
+#mobile_header {
+  display: none;
+}
+
+/* Smartphones (portrait and landscape) ----------- */
+@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
+  .upperLeftUI, .upperRightUI, .openCheatsheet, .mapInfoIcon, .uv-icon, .chat-box, #exploreMapsHeader {
+    display: none !important;
+  }
+  
+  #mobile_header {
+    display: block;
+  }
+  
+  .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%;
+    height: auto;
+  }
+  .fullWidthWrapper.withPartners {
+    display: none;
+  }
+  .learnMoreCTA {
+    display: none !important;
+  }
+  
+  #yield {
+    height: 100%;
+  }
+  
+  .new_session, .new_user, .edit_user, .login, .forgotPassword {
+    position: relative;
+    top: auto;
+    left: auto;
+    width: 78%;
+    padding: 16px 10%;
+    margin: 50px auto 0 auto;
+  }
+  
+  .centerGreyForm input[type="text"], .centerGreyForm input[type="email"], .centerGreyForm input[type="password"] {
+    width: 100%;
+  }
+  
+  .wrapper div.mapInfoBox {
+    position: fixed;
+    top: 50px;
+    right: 0px;
+    bottom: auto;
+    width: 100%;
+    max-width: 360px;
+  }
+  
+  #wrapper .requestInvite {
+    width: 100%;
+    padding: 0;
+  }
+}
+
+#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;
+}
+
+#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-x: scroll;
+  padding-left: 60px;
+  font-size: 24px;
+  line-height: 50px;
+}
+
+#mobile_menu {
+ display: none;
+  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);
+}
+
+#mobile_menu li {
+  padding: 10px;
+  list-style: none;
+}
+
+li.mobileMenuUser {
+  border-bottom: 1px solid #BBB;
+}
+
+.mobileMenuUser img {
+  display: inline-block;
+  vertical-align: middle;
+  margin-right: 10px;
+  border-radius: 16px;
+}
--- a/app/controllers/main_controller.rb
+++ b/app/controllers/main_controller.rb
@ -12,13 +12,13 @@ class MainController < ApplicationController
  def home
    @maps = policy_scope(Map).order('updated_at DESC').page(1).per(20)
    respond_to do |format|
-      format.html do
-        if !authenticated?
-          render 'main/home'
-        else
-          render 'maps/activemaps'
-        end
-      end
+        format.html { 
+          if !authenticated?
+            render 'main/home'
+          else 
+            render 'maps/activemaps'
+          end
+        }
    end
  end

--- a/app/views/doorkeeper/applications/_script.html.erb
+++ b/app/views/doorkeeper/applications/_script.html.erb
@ -1,8 +1,8 @@
 <script type="text/javascript">
  Metamaps.Apps = {
    init: function () {
-      Metamaps.Famous.explore.setApps('registered');
-      Metamaps.Famous.explore.show();
+      Metamaps.Header.changeSection(!!Metamaps.Active.Mapper, 'registered');
+      Metamaps.GlobalUI.showDiv('#exploreMapsHeader')
      Metamaps.GlobalUI.Search.open();
      Metamaps.GlobalUI.Search.lock();
    }
--- a/app/views/doorkeeper/authorized_applications/_script.html.erb
+++ b/app/views/doorkeeper/authorized_applications/_script.html.erb
@ -1,8 +1,8 @@
 <script type="text/javascript">
  Metamaps.Apps = {
    init: function () {
-      Metamaps.Famous.explore.setApps('authorized');
-      Metamaps.Famous.explore.show();
+      Metamaps.Header.changeSection(!!Metamaps.Active.Mapper, 'authorized');
+      Metamaps.GlobalUI.showDiv('#exploreMapsHeader')
      Metamaps.GlobalUI.Search.open();
      Metamaps.GlobalUI.Search.lock();
    }
--- a/app/views/layouts/_foot.html.erb
+++ b/app/views/layouts/_foot.html.erb
@ -25,7 +25,6 @@

    USERVOICE.load();
 </script>
-
 <%= render :partial => 'layouts/googleanalytics' if Rails.env.production? %>
 </body>
 </html>
--- a/app/views/layouts/_head.html.erb
+++ b/app/views/layouts/_head.html.erb
@ -12,7 +12,7 @@
 <!DOCTYPE html>
 <html>
 <head>
-  <title><%=h yield(:title) %></title>
+  <title><%= yield(:title) %></title>
  <%= csrf_meta_tags %>
  <meta name="viewport" content="width=device-width, user-scalable=no">

@ -23,12 +23,6 @@
  <script type="text/javascript" src="https://use.typekit.net/tki2nyo.js"></script>
  <script type="text/javascript">try{Typekit.load();}catch(e){}</script>

-        <!-- app code -->
-        <script type="text/javascript">
-            require.config({baseUrl: '<%= "#{ asset_path '/famous/main.js' }".chomp('main.js') %>'});
-            require(['main']);
-        </script>
-
  <!--[if (IE)]>
    <style type="text/css">
      #lightbox_overlay {
--- a/app/views/layouts/_lightboxes.html.erb
+++ b/app/views/layouts/_lightboxes.html.erb
@ -66,85 +66,6 @@
        <div class="clearfloat"></div>
      </div>

-      <div class="lightboxContent" id="colophon">
-        <h3 id="colophoneHeader">Colophon</h3>
-
-        <p>Metamaps.cc is an initiative of affiliates of the Metamaps Open Value Network, an evolving network of peers working together to create shared value. Metamaps continues to be a constantly developing experiment in progress.</p>
-
-        <p>The peers behind Metamaps have their own respective backgrounds as artists, designers, engineers, advocates, activitists, filmmakers and systems thinkers and share a deep commitment to the creative culture they support.</p>
-        <h4 id="colophonSection">ACTIVE PEERS (as of 03/2016)</h4>
-        <p>Robert Best, Benjamin Brownell, Devin Howard, Raymon Johnstone, Ishan Shapiro, Connor Turland </p>
-
-        <h4 id="colophonSection">ICONOGRAPHY</h4>
-
-        <p>Iconography within Metamaps is a distinctive and subtle art. We thank the following creators of icons used throughout Metamaps for the courtesy of sharing their work under Creative Commons licenses:<p>
-
-        <h4 id="colophonSectionIndented">System Icons</h4>
-        <p id="colophonLinks"><a href="http://thenounproject.com/r0" target="_blank">Ryan Oksenhorn</a>, <a href="http://thenounproject.com/leonides.dm" target="_blank">Leonides Delgado</a>, <a href="http://thenounproject.com/matheusanturio" target="_blank">Matheus Antúrio</a>, <a href="http://thenounproject.com/nl_menghini" target="_blank">Nicholas Menghini</a>, <a href="http://thenounproject.com/useiconic.com" target="_blank">useiconic.com</a>, <a href="http://thenounproject.com/Icomatic" target="_blank">Icomatic</a>, <a href="http://thenounproject.com/ansteydesign" target="_blank">AnsteyDesign</a>, <a href="http://thenounproject.com/somerandomdude" target="_blank">P.J. Onori</a>, <a href="http://thenounproject.com/Michzen" target="_blank">Michael Zenaty</a>, <a href="http://thenounproject.com/edward" target="_blank">Edward Boatman</a>, <a href="http://thenounproject.com/garrett.knoll" target="_blank">Garrett Knoll</a>, <a href="http://thenounproject.com/misirlou" target="_blank">misirlou</a>, <a href="http://thenounproject.com/DmitryBaranovskiy" target="_blank">Dmitry Baranovskiy</a>, <a href="http://thenounproject.com/waymanate" target="_blank">Nathan Thomson</a>, <a href="http://thenounproject.com/razerk" target="_blank">Alex Auda Samora</a>, <a href="http://thenounproject.com/bernar.novalyi" target="_blank">Bernar Novalyi</a>, <a href="http://thenounproject.com/jeremy.j.bristol" target="_blank">Jeremy J Bristol</a>, <a href="http://thenounproject.com/FivebyFive/" target="_blank">FivebyFive</a>, <a href="http://thenounproject.com/thibault.geffroy" target="_blank">Thibault Geffroy</a>, <a href="http://cargocollective.com/gavinkeech" target="_blank">Gavin Keech</a></p>
-
-        <p>We are also indebted to <a href="http://thenounproject.com/" target="_blank">The Noun Project</a>, an invaluable resource for iconography on the web, and also where many of the above creators' icons can be found.</p>
-
-        <h4 id="colophonSectionIndented">Metacodes:</h4>
-        <p id="colophonLinks">Legacy:<a href="http://cargocollective.com/gavinkeech" target="_blank">Gavin Keech</a>, <a href="http://notthisbody.com/" target="_blank">Notthisbody</a></p>
-
-        <h4 id="colophonSection">MEDIA</h4>
-        <p>Intro video: <a href="http://notthisbody.com/" target="_blank">Notthisbody</a>, <a href="https://uwaterloo.ca/arts/people-profiles/glenn-stillar" target="_blank">Glenn Stillar</a> <br>Tutorial videos: <a href="http://notthisbody.com/" target="_blank">Notthisbody</a></p>
-
-        <h4 id="colophonSection">OPEN SOURCE CREDITS</h4>
-
-        <p>We make extensive use of open source software for the various technologies, architectures, and interfaces that run Metamaps.cc. We would be unable to offer the service as we envision it without these publicly developed projects.</p>
-
-        <p id="colophonCols">Javascript<br>
-        Ruby-on-rails<br>
-        Javascript Infoviz Toolkit<br>
-        Backbone.js<br>
-        Underscore.js<br>
-        Famo.us<br>
-        Typeahead.js</p><br>
-
-        <h4 id="colophonSection">BUILDING METAMAPS</h4>
-
-        <p> These are the tools and services that the Metamaps team uses to work together and build the platform. Wherever possible, we link directly to a place where we work via a linked asterisk*.</p>
-        <div id="colophonCols">
-        <h4 id="colophonSection">Communication</h4>
-        <ul>
-            <li>Asana</li>
-            <li>Invision App <a href="http://invis.io/541GCFJRM" target="_blank">*</a></li>
-            <li>Docracy <a href="https://www.docracy.com/userprofile/show?userId=7366" target="_blank">*</a></li>
-            <li>Google Plus <a href="https://plus.google.com/communities/115060009262157699234" target="_blank">*</a></li>
-            <li>Hackpad <a href="http://metamaps.hackpad.com/" target="_blank">*</a></li>
-            <li>Loomio <a href="https://www.loomio.org/g/bu3L1tIW/topos-ffo" target="_blank">*</a></li>
-            <li>Twitter <a href="https://twitter.com/metamapps" target="_blank">*</a></li>
-            <li>Hipchat</li>
-            <li>Google Hangouts</li>
-            <li>Vimeo </li>
-            <li>Youtube</li></ul>
-            <br>
-        <h4 id="colophonSection">Design & Development</h4>
-        <ul>
-            <li>Github<a href="https://github.com/metamaps" target="_blank">*</a></li>
-            <li>Pixelapse<a href="https://www.pixelapse.com/poietic/projects/Metamaps.cc/overview" target="_blank">*</a></li>
-        </ul>
-      <h4 id="colophonSection">Documentation</h4>
-        <ul><li>Dropbox <a href="https://www.dropbox.com/sh/qqkesm0pmzaihfa/AAAv9aCVZeawUzDXrdM9y3T5a?dl=0" target="_blank">*</a></li>
-        <li>Google Drive <a href="https://drive.google.com/folderview?id=0B_RQI2WcwEHLckplOHhhdnZkSUE&usp=sharing" target="_blank">*</a></li>
-        <li>Toggl</li></ul>
-        <br>
-      <h4 id="colophonSection">Hosting</h4>
-        <ul><li>Heroku</li>
-        <li>Linode</li>
-        <li>Webhostinghub</li></ul>
-        <br>
-    <h4 id="colophonSection">Monitoring & Metrics</h4>
-       <ul><li>Google Analytics</li></ul>
-      <br>
-    <h4 id="colophonSection">Support</h4>
-        <ul><li>Uservoice <a href="http://metamapscc.uservoice.com/" target="_blank">*</a></li></ul>
-
-      </div>
-        <div class="clearfloat"></div>
-      </div>
-
      <div class="lightboxContent" id="noIE">
        <h3>OOPS! <br> YOUR BROWSER IS NOT SUPPORTED.</h3>
        <p id="noIEsubheading">To view this experience, please upgrade to the latest one of these browsers:</p>
@ -155,63 +76,6 @@

      </div>

-      <div class="lightboxContent" id="donate">
-        <h3>Donate!</h3>
-        <div class="leaveSpace"></div>
-
-        <p>The Metamaps.cc project has been bootstrapped through our own pockets, passion, and patrons - including a couple of small grants which have gone to supporting our core contributors. Some of us have used Metamaps.cc as a tool for our own freelance consulting practice, and we are starting to create hosted and customized installations of Metamaps for different clients as one business model.</p>
-
-        <p>We will continue to bootstrap this project and experiment with alternative business models that are aligned with our values and mission and do not involve exploitation of our users, exclusivity or privatization of the technology. </p>
-
-        <p>Financial contributions in the form of patronage/donations/gifts are greatly appreciated in support of our work. You can donate Bitcoin directly or give us a weekly gift of gratitude for the work we do on Gratipay using the links below.</p>
-
-        <p>If you'd like to know what your money is going towards, we publish our financials transparently - everything is recorded through our <a href="https://docs.google.com/spreadsheets/d/1n6aI77zlf1F9biH6wIbFkaOARK_QfvzqVC0vBsBKY2o">value accounting system</a>.</p>
-        <div class="leaveSpace"></div>
-        <script data-gratipay-username="Metamaps.cc" src="https://gttp.co/v1.js"></script>
-          <div style="font-size:16px;margin:0 auto;width:300px" class="blockchain-btn"
-            data-address="15z24wj6E9tTsJgEBjnK81CtJ7kZZmxJYN"
-            data-shared="false">
-          <div class="blockchain stage-begin">
-            <img src="https://blockchain.info//Resources/buttons/donate_64.png"/>
-          </div>
-        <div class="blockchain stage-loading" style="text-align:center">
-            <img src="https://blockchain.info//Resources/loading-large.gif"/>
-        </div>
-        <div class="blockchain stage-ready">
-            <p align="center">Please Donate To Bitcoin Address: <b>[[address]]</b></p>
-            <p align="center" class="qr-code"></p>
-        </div>
-        <div class="blockchain stage-paid">
-            Donation of <b>[[value]] BTC</b> Received. Thank You.
-        </div>
-        <div class="blockchain stage-error">
-            <font color="red">[[error]]</font>
-        </div>
-
-        <div class="clearfloat"></div>
-      </div>
-    </div>
-
-
-    <div class="lightboxContent" id="getInvolved">
-        <h3>GET INVOLVED!</h3>
-        <div class="leaveSpace"></div>
-
-        <p>Want to help with design, code, community building, or communications for Metamaps? We're an open value network, which for us means we want to invite and empower peers to participate in creating value together.
-
-        <p>To be a <b>USER</b>, request an invite! We'll expect you to abide by our <a href="https://metamaps.cc/maps/331" target="_blank">terms of service</a>.</p>
-
-        <p>To be a <b>CONTRIBUTOR</b>, simply <a href="https://docs.google.com/document/d/1z8FsSmYkHbLRLOsXc8i8M5ubKky8_WB2E9bLBoXJapU" target="_blank">enter our spaces</a> and join the conversation! We'll expect you to follow some guidelines.</p>
-
-        <p><b>MEMBERS</b> are contributors who act as stewards and guardians of the collective and are responsible for maintaining our culture and purpose. We're working on a set of agreements to formalize what it means to be a member.</p>
-
-        <p>We welcome people of all skillsets to create value within our network. There's open possibilities for designers, researchers, academics, strategists, and facilitators to contribute. If you're a developer, help us advance the code and take a look around our <a href="https://github.com/metamaps/metamaps" target="_blank">Github</a>.</p>
-
-        <p>Thanks for your interest in helping out with Metamaps! Hopefully this gets you pointed in the right direction to get involved. The next step is to read the links on this page and then contribute! </p>
-
-        <div class="clearfloat"></div>
-      </div>
-
      <div class="lightboxContent" id="tutorial">
        <h3>Tutorial</h3>
        <iframe src="//player.vimeo.com/video/88334167?title=0&amp;byline=0&amp;portrait=0" width="510" height="319" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
--- a/app/views/layouts/_mobilemenu.html.erb
+++ b/app/views/layouts/_mobilemenu.html.erb
@ -0,0 +1,52 @@
+<div id="mobile_header">
+  <div id="header_content">
+    <%= yield(:mobile_title) %>
+  </div>
+  <div id="menu_icon"></div>
+</div>
+<div id="mobile_menu">
+  <ul>
+    <% if not current_user %>
+      <li>
+        <%= link_to "Home", root_path, :data => { :bypass => 'true'} %>
+      </li>
+    <% end %>
+    <% if current_user %>
+      <!-- we should add a page where they can create a new map -->
+      <li class="mobileMenuUser">
+         <%= image_tag current_user.image.url(:sixtyfour), :size => "32x32" %>
+         <span><%= current_user.name %></span>
+      </li>
+      <li>
+        <%= link_to "My Maps", explore_mine_path %>
+      </li>
+      <li>
+        <%= link_to "Shared With Me", explore_shared_path %>
+      </li>
+    <% end %>
+    <li>
+      <%= link_to "Recently Active", explore_active_path %>
+    </li>
+    <% if not current_user %>
+      <li>
+        <%= link_to "Featured Maps", explore_featured_path %>
+      </li>
+    <% end %>
+    <% if not current_user %>
+      <li>
+        <%= link_to "Request Invite", request_path, :data => { :bypass => 'true'} %>
+      </li>
+      <li>
+        <%= link_to "Login", new_user_session_path, :data => { :bypass => 'true'} %>
+      </li>
+    <% end %>
+    <% if current_user %>
+      <li>
+        <%= link_to "Account", edit_user_url(current_user), :data => { :bypass => 'true'} %>
+      </li>
+      <li>
+        <%= link_to "Sign Out", "/logout", id: "Logout", :data => { :bypass => 'true'} %>
+      </li>
+    <% end %>
+  </ul>
+</div>
--- a/app/views/layouts/_upperelements.html.erb
+++ b/app/views/layouts/_upperelements.html.erb
@ -18,7 +18,6 @@
 </div><!-- end upperLeftUI -->

 <div class="upperRightUI">
-  <div class="supportUs upperRightEl openLightbox" data-open="donate">SUPPORT US!</div>
  <div class="mapElement upperRightEl upperRightMapButtons">
    <!-- filtering -->
    <div class="sidebarFilter upperRightEl">
--- a/app/views/layouts/application.html.erb
+++ b/app/views/layouts/application.html.erb
@ -9,11 +9,7 @@

 <body class="<%= authenticated? ? "authenticated" : "unauthenticated" %>">

-    <% if devise_error_messages? %>
-      <p id="toast"><%= devise_error_messages! %></p>
-    <% elsif notice %>
-      <p id="toast"><%= notice %></p>
-    <% end %>
+    

    <%= content_tag :div, class: "main" do %>

@ -48,7 +44,29 @@
            <% end %>
            <%= render :partial => 'layouts/lowermapelements' %>

-            <div id="famousOverlay"></div>
+            <div id="exploreMaps"></div>
+            <div id="exploreMapsHeader"></div>
+            <div id="infovis"></div>
+            <%= render :partial => 'layouts/mobilemenu' %>
+            <div id="instructions">
+              <div class="addTopic">
+                Double-click to<br>add a topic!
+              </div>
+              <div class="tabKey">
+                Use Tab & Shift+Tab to select a metacode
+              </div>
+              <div class="enterKey">
+                Press Enter to add the topic
+              </div>
+            </div>
+            
+            <p id="toast" class="toast">
+              <% if devise_error_messages? %>
+                <%= devise_error_messages! %>
+              <% elsif notice %>
+                <%= notice %>
+              <% end %>
+            </p>      
            <div id="loading"></div>
        </div>

--- a/app/views/layouts/doorkeeper.html.erb
+++ b/app/views/layouts/doorkeeper.html.erb
@ -33,7 +33,7 @@
            <% end %>
            <%= render :partial => 'layouts/lowermapelements' %>

-            <div id="famousOverlay"></div>
+            <div id="exploreMapsHeader"></div>
            <div id="loading"></div>
        </div>

--- a/app/views/main/home.html.erb
+++ b/app/views/main/home.html.erb
@ -6,6 +6,7 @@
 %>  
 
 <% content_for :title, "Home | Metamaps" %> 
+<% content_for :mobile_title, "Home" %> 
 <div id="yield">
  <div class="homeWrapper homeText">
    <div class="homeTitle">Make Sense with Metamaps</div>
@ -32,11 +33,6 @@
    </div>
  </div>
 </div><!-- end yield -->
-<div class="github-fork-ribbon-wrapper right-bottom">
-  <div class="github-fork-ribbon">
-    <a href="https://github.com/metamaps/metamaps" target="_blank">Fork me on GitHub</a>
-  </div>
-</div>           
 <script>
 Metamaps.currentSection = "";
 Metamaps.currentPage = "";
--- a/app/views/main/requestinvite.html.erb
+++ b/app/views/main/requestinvite.html.erb
@ -4,7 +4,8 @@
  # Shows a form where people can request an invite
  #%>

-<% content_for :title, "Request Invite | Metamaps" %>   
+<% content_for :title, "Request Invite | Metamaps" %>
+<% content_for :mobile_title, "Request Invite" %>
  
 <div id="yield">
 <iframe class="requestInvite" src="https://docs.google.com/forms/d/1lWoKPFHErsDfV5l7-SvcHxwX3vDi9nNNVW0rFMgJwgg/viewform?embedded=true" width="700" frameborder="0" marginheight="0" marginwidth="0">Loading...</iframe>
--- a/app/views/maps/activemaps.html.erb
+++ b/app/views/maps/activemaps.html.erb
@ -8,6 +8,7 @@
  Metamaps.Maps.Active = <%= @maps.to_json.html_safe %>;
  Metamaps.currentPage = "active";
  <% content_for :title, "Explore Active Maps | Metamaps" %>
+  <% content_for :mobile_title, "Recently Active" %>

  Metamaps.currentSection = "explore";
  Metamaps.GlobalUI.Search.open();
--- a/app/views/maps/featuredmaps.html.erb
+++ b/app/views/maps/featuredmaps.html.erb
@ -8,6 +8,7 @@
  Metamaps.Maps.Featured = <%= @maps.to_json.html_safe %>;
  Metamaps.currentPage = "featured";
  <% content_for :title, "Explore Featured Maps | Metamaps" %>
+  <% content_for :mobile_title, "Featured Maps" %>

  Metamaps.currentSection = "explore";
  Metamaps.GlobalUI.Search.open();
--- a/app/views/maps/mymaps.html.erb
+++ b/app/views/maps/mymaps.html.erb
@ -8,6 +8,7 @@
  Metamaps.Maps.Mine = <%= @maps.to_json.html_safe %>;
  Metamaps.currentPage = "mine";
  <% content_for :title, "Explore My Maps | Metamaps" %>
+  <% content_for :mobile_title, "My Maps" %>

  Metamaps.currentSection = "explore";
  Metamaps.GlobalUI.Search.open();
--- a/app/views/maps/sharedmaps.html.erb
+++ b/app/views/maps/sharedmaps.html.erb
@ -8,6 +8,7 @@
  Metamaps.Maps.Shared = <%= @maps.to_json.html_safe %>;
  Metamaps.currentPage = "shared";
  <% content_for :title, "Explore Shared Maps | Metamaps" %>
+  <% content_for :mobile_title, "Shared With Me" %>

  Metamaps.currentSection = "explore";
  Metamaps.GlobalUI.Search.open();
--- a/app/views/maps/show.html.erb
+++ b/app/views/maps/show.html.erb
@ -5,6 +5,7 @@
 #%>

 <% content_for :title, @map.name + " | Metamaps" %>
+<% content_for :mobile_title, @map.name %>
 <script>
 	Metamaps.currentSection = "map";
 	Metamaps.currentPage = <%= @map.id.to_s %>;
--- a/app/views/maps/usermaps.html.erb
+++ b/app/views/maps/usermaps.html.erb
@ -11,6 +11,7 @@
  };
  Metamaps.currentPage = "mapper";
  <% content_for :title, @user.name + " | Metamaps" %>
+  <% content_for :mobile_title, @user.name %>

  Metamaps.currentSection = "explore";
  Metamaps.GlobalUI.Search.open();
--- a/app/views/topics/show.html.erb
+++ b/app/views/topics/show.html.erb
@ -14,7 +14,8 @@
 #
 #%>

-<% content_for :title, @topic.name + " | Metamaps" %>  
+<% content_for :title, @topic.name + " | Metamaps" %> 
+<% content_for :mobile_title, @topic.name %> 
 <script>
    Metamaps.currentSection = "topic";
    Metamaps.currentPage = <%= @topic.id.to_s %>;
@ -23,4 +24,4 @@
    Metamaps.Topics = <%= @alltopics.to_json.html_safe %>;
    Metamaps.Synapses = <%= @allsynapses.to_json.html_safe %>;
    Metamaps.Visualize.type = "RGraph";
-</script>
+</script>
--- a/app/views/users/edit.html.erb
+++ b/app/views/users/edit.html.erb
@ -5,6 +5,7 @@
  #%>
  
 <% content_for :title, @user.name + "'s Settings | Metamaps" %> 
+<% content_for :mobile_title, "Account Settings" %>
 <div id="yield">
 <%= form_for @user, url: user_url, :html =>{ :multipart => true, :class => "edit_user centerGreyForm"} do |form| %>
  <h3>Edit Account</h3>
@ -51,5 +52,6 @@
 </div>
  <div id="accountPageLoading"></div>
  <%= form.submit "Update", class: "update", onclick: "Metamaps.Account.showLoading()" %>
+  <div class="clearfloat"></div>
 <% end %>
 </div>
--- a/app/views/users/passwords/edit.html.erb
+++ b/app/views/users/passwords/edit.html.erb
@ -1,4 +1,5 @@
 <% content_for :title, "Change Password | Metamaps" %>
+<% content_for :mobile_title, "Change Password" %>

 <div id="yield">
 <%= form_for(resource, :as => resource_name, :url => password_path(resource_name), :html => { :method => :put, :class => "forgotPassword centerGreyForm forgotPasswordReset" }) do |f| %>
--- a/app/views/users/passwords/new.html.erb
+++ b/app/views/users/passwords/new.html.erb
@ -1,4 +1,5 @@
 <% content_for :title, "Password Reset | Metamaps" %>
+<% content_for :mobile_title, "Password Reset" %>

 <div id="yield">
 <%= form_for(resource, :as => resource_name, :url => password_path(resource_name), :html => { :method => :post, :class => "forgotPassword centerGreyForm" }) do |f| %>
--- a/app/views/users/registrations/new.html.erb
+++ b/app/views/users/registrations/new.html.erb
@ -1,4 +1,5 @@
 <% content_for :title, "Sign Up | Metamaps" %>
+<% content_for :mobile_title, "Join" %>

 <div id="yield">
 <%= form_for(resource, :as => resource_name, :url => registration_path(resource_name), :html => { :method => :post, :class => "new_user centerGreyForm" }) do |f| %>
--- a/app/views/users/sessions/new.html.erb
+++ b/app/views/users/sessions/new.html.erb
@ -1,4 +1,5 @@
 <% content_for :title, "Sign In | Metamaps" %>
+<% content_for :mobile_title, "Login" %>

 <div id="yield">
 <%= form_for(resource, :as => resource_name, :url => session_path(resource_name), :html => { :method => :post, :class => "centerGreyForm login" }) do |f| %>
--- a/config/initializers/assets.rb
+++ b/config/initializers/assets.rb
@ -0,0 +1 @@
+Rails.application.config.assets.precompile += %w( webpacked/metamaps.bundle.js )
--- a/frontend/src/components/ExploreHeader.js
+++ b/frontend/src/components/ExploreHeader.js
@ -1,11 +0,0 @@
-import React, { Component, PropTypes } from 'react'
-
-class ExploreHeader extends Component {
-  render = () => {
-    return (
-      <p>ExploreHeader component could go here</p>
-    )
-  }
-}
-
-export default ExploreHeader
--- a/frontend/src/components/Header.js
+++ b/frontend/src/components/Header.js
@ -0,0 +1,94 @@
+import React, { Component, PropTypes } from 'react'
+import { objectWithoutProperties } from '../utils'
+
+const MapLink = props => {
+  const { show, text, href, linkClass } = props
+  const otherProps = objectWithoutProperties(props, ['show', 'text', 'href', 'linkClass'])
+  if (!show) {
+    return null
+  }
+
+  return (
+    <a { ...otherProps } href={href} className={linkClass}>
+      <div className="exploreMapsIcon"></div>
+      {text}
+    </a>
+  )
+}
+
+class Header extends Component {
+  render = () => {
+    const { signedIn, section } = this.props
+
+    const activeClass = (title) => {
+      let forClass = "exploreMapsButton"
+      forClass += " " + title + "Maps"
+      if (title == "my" && section == "mine" ||
+          title == section) forClass += " active"
+      return forClass
+    }
+
+    const explore = section == "mine" || section == "active" || section == "shared" || section == "featured"
+    const mapper = section == "mapper"
+    const apps = section == "registered" || section == "authorized"
+
+    return (
+      <div className="exploreMapsBar exploreElement">
+        <div className="exploreMapsMenu">
+          <div className="exploreMapsCenter">
+            <MapLink show={signedIn && explore}
+              href="/explore/mine"
+              linkClass={activeClass("my")}
+              text="My Maps"
+            />
+            <MapLink show={signedIn && explore}
+              href="/explore/shared"
+              linkClass={activeClass("shared")}
+              text="Shared With Me"
+            />
+            <MapLink show={explore}
+              href={signedIn ? "/" : "/explore/active"}
+              linkClass={activeClass("active")}
+              text="Recently Active"
+            />
+            <MapLink show={!signedIn && explore}
+              href="/explore/featured"
+              linkClass={activeClass("featured")}
+              text="Featured Maps"
+            />
+      
+            {mapper ? (
+              <div className='exploreMapsButton active mapperButton'>
+                <img className='exploreMapperImage' width='24' height='24' src={this.props.userAvatar} />
+                <div className='exploreMapperName'>{this.props.userName}&rsquo;s Maps</div>
+                <div className='clearfloat'></div>
+              </div>
+            ) : null }
+      
+            <MapLink show={apps}
+              href="/oauth/applications"
+              linkClass={"activeMaps exploreMapsButton"  + (section == "registered" ? " active" : "")}
+              data-bypass="true"
+              text="Registered Apps"
+            />
+            <MapLink show={apps}
+              href="/oauth/applications"
+              linkClass={"activeMaps exploreMapsButton"  + (section == "authorized" ? " active" : "")}
+              data-bypass="true"
+              text="Authorized Apps"
+            />
+          </div>
+        </div>
+      </div>
+    )
+  }
+}
+
+Header.propTypes = {
+  signedIn: PropTypes.bool.isRequired,
+  section: PropTypes.string.isRequired,
+  userAvatar: PropTypes.string,
+  userName: PropTypes.string
+}
+
+export default Header
--- a/frontend/src/index.js
+++ b/frontend/src/index.js
@ -2,9 +2,9 @@ import React from 'react'
 import ReactDOM from 'react-dom'
 import Backbone from 'backbone'
 import _ from 'underscore'
-import ExploreHeader from './components/ExploreHeader'
+import Header from './components/Header.js'

-// this is optional really, if we import components directly React will be 
+// this is optional really, if we import components directly React will be
 // in the bundle, so we won't need a global reference
 window.React = React
 window.ReactDOM = ReactDOM
@ -14,5 +14,5 @@ window._ = _

 window.Metamaps = window.Metamaps || {}
 window.Metamaps.ReactComponents = {
-  ExploreHeader
+  Header
 }
--- a/frontend/src/utils/index.js
+++ b/frontend/src/utils/index.js
@ -0,0 +1,9 @@
+export const objectWithoutProperties = (obj, keys) => {
+  const target = {}
+  for (let i in obj) {
+    if (keys.indexOf(i) !== -1) continue
+    if (!Object.prototype.hasOwnProperty.call(obj, i)) continue
+    target[i] = obj[i]
+  }
+  return target
+}
--- a/public/famous/main.js
+++ b/public/famous/main.js
@ -1,408 +0,0 @@
-define(function(require, exports, module) {
-
-Metamaps.Famous = {};
-Metamaps.Famous.build = function () {
-    // import dependencies
-    var Engine = require('famous/core/Engine');
-    var Modifier = require('famous/core/Modifier');
-    var Transform = require('famous/core/Transform');
-    var Surface = require('famous/core/Surface');
-    var Timer = require('famous/utilities/Timer');
-    var Scrollview = require('famous/views/Scrollview');
-    var ContainerSurface = require('famous/surfaces/ContainerSurface');
-    var RenderNode = require('famous/core/RenderNode');
-
-    var templates = require('templates');
-
-    // create the main context
-    var famous = document.getElementById('famousOverlay');
-
-    var f = Metamaps.Famous;
-
-    f.mainContext = Engine.createContext(famous);
-    f.Surface = Surface;
-    f.Modifier = Modifier;
-    f.Transform = Transform;
-
-
-    // INFOVIS
-    f.viz = {};
-
-    var instructions = {
-        addTopic: "Double-click to<br>add a topic!",
-        tabKey: "Use Tab & Shift+Tab to select a metacode",
-        enterKey: "Press Enter to add the topic"
-    };
-
-    f.viz.surf = new Surface({
-        size: [undefined, undefined],
-        classes: [],
-        properties: {
-            display: "none",
-            zIndex: "1"
-        }
-    });
-
-    var instrShowing = false;
-    f.viz.instrSurf = new Surface({
-        content: instructions.addTopic,
-        size: [220, 80],
-        classes: ["doubleClickSurf"],
-        properties: {
-            fontFamily: "'din-regular', helvetica, sans-serif",
-            fontSize: "32px",
-            display: "none",
-            textAlign: "center",
-            color: "#999999",
-            zIndex: "0"
-        }
-    });
-    var prepare = function () {
-            f.viz.show();
-            Metamaps.JIT.prepareVizData();
-            f.viz.surf.removeListener('deploy',prepare);
-    };
-    if (Metamaps.currentSection === "map" || Metamaps.currentSection === "topic") {
-        f.viz.surf.on('deploy', prepare);
-    }
-    f.viz.mod = new Modifier({
-        origin: [0.5, 0.5],
-        opacity: 0
-    });
-    f.viz.show = function () {
-        f.viz.surf.setProperties({ "display":"block" });
-        f.viz.mod.setOpacity(
-            1,
-            { duration: 300 }
-        );
-    };
-    f.viz.hide = function () {
-        f.viz.mod.setOpacity(
-            0, 
-            { duration: 300 }, 
-            function() {
-                f.viz.surf.setProperties({"display": "none"});
-            }
-        );
-    };
-    f.viz.isInstrShowing = function() {
-        return instrShowing;
-    }
-    f.viz.showInstructions = function() {
-        instrShowing = true;
-        f.viz.instrSurf.setProperties({ "display":"block" });
-    };
-    f.viz.hideInstructions = function() {
-        instrShowing = false;
-        f.viz.instrSurf.setProperties({ "display":"none" });
-    };
-    var vizMod = f.mainContext.add(f.viz.mod);
-    vizMod.add(f.viz.surf);
-    vizMod.add(f.viz.instrSurf);
-    
-    // CONTENT / OTHER PAGES
-    f.yield = {};
-    f.yield.surf = new Surface({
-        size: [undefined, undefined],
-        classes: ['famousYield'],
-        properties: {
-            display: 'none'
-        }
-    });
-    var loadYield = function () {
-            f.loadYield();
-            f.yield.surf.removeListener('deploy',loadYield);
-    };
-    if (!(Metamaps.currentSection === "map" ||
-            Metamaps.currentSection === "topic" ||
-            Metamaps.currentSection === "explore" ||
-            (Metamaps.currentSection === "" && Metamaps.Active.Mapper) )) {
-        f.yield.surf.on('deploy', loadYield);
-    }
-    f.yield.mod = new Modifier({
-        origin: [0.5, 0.5],
-        opacity: 0
-    });
-    f.yield.show = function () {
-        f.yield.surf.setProperties({ "display":"block" });
-        f.yield.mod.setOpacity(
-            1,
-            { duration: 300 }
-        );
-    };
-    f.yield.hide = function () {
-        f.yield.mod.setOpacity(
-            0, 
-            { duration: 300 }, 
-            function() {
-                f.yield.surf.setProperties({"display": "none"});
-            }
-        );
-    };
-    f.mainContext.add(f.yield.mod).add(f.yield.surf);
-    
-    f.loadYield = function () {
-        Metamaps.Loading.hide();
-
-        var y = document.getElementById('yield');
-        var yield = y ? y.innerHTML : false;
-        if (yield) {
-            f.yield.surf.setContent(yield);
-            f.yield.surf.deploy(f.yield.surf._currTarget);
-            f.yield.show();
-
-            y.parentNode.removeChild(y);
-        }
-    };
-
-
-    // CONTENT / OTHER PAGES
-    f.maps = {};
-    f.maps.surf = new Surface({
-        size: [undefined, true], // this will get set to a specific height later in order to work
-        classes: ['mapsWrapper'],
-    });
-    var mapsContainer = new ContainerSurface({
-        size: [undefined, undefined],
-        properties: {
-            overflow: 'hidden',
-        }
-    });
-    var loadMaps = function () {
-            f.loadMaps();
-            f.maps.surf.removeListener('deploy',loadMaps);
-    };
-    if (Metamaps.currentSection === "explore" ||
-            (Metamaps.currentSection === "" && Metamaps.Active.Mapper)) {
-        f.maps.surf.on('deploy', loadMaps);
-    }
-    f.maps.mod = new Modifier({
-        origin: [0.5, 0],
-        opacity: 0,
-        transform: Transform.translate(window.innerWidth,94,0)
-    });
-    f.maps.mod.sizeFrom(function(){
-        return [window.innerWidth, window.innerHeight - 94];
-    });
-    f.maps.show = function () {
-        // set into the correct position and then fade in
-        f.maps.mod.setTransform(Transform.translate(0, 94, 0));
-        f.maps.mod.setOpacity(
-            1,
-            { duration: 300 }
-        );
-    };
-    f.maps.hide = function () {
-        // fade out and then position it offscreen
-        f.maps.mod.setOpacity(
-            0, 
-            { duration: 300 }, 
-            function() {
-                f.maps.mod.setTransform(Transform.translate(window.innerWidth, 94, 0));
-            }
-        );
-    };
-    f.maps.reposition = function () {
-        f.maps.mod.setTransform(Transform.translate(window.innerWidth, 94, 0));
-    };
-    var mapsScroll = new Scrollview();
-    f.maps.lock = false;
-    mapsScroll._eventInput.on('update', _.throttle(function(data) {
-        var bottom = f.maps.surf.getSize()[1], // how far down it goes
-            pos = mapsScroll.getPosition(), // how far down you are
-            containerSize = f.maps.mod.getSize()[1], // height of the viewable area
-            distanceToBottom = bottom - (pos + containerSize),
-            triggerDistance = 700;
-
-        if (!f.maps.lock &&
-            distanceToBottom < triggerDistance && 
-            Metamaps.Views && 
-            Metamaps.Views.exploreMaps && 
-            Metamaps.Views.exploreMaps.collection &&
-            Metamaps.Views.exploreMaps.collection.page != "loadedAll") {
-                f.maps.lock = true;
-                Metamaps.Views.exploreMaps.collection.getMaps();
-        }
-    }, 500));
-    f.maps.resetScroll = function() {
-        // set the scrollView back to the top
-        mapsScroll._physicsEngine.detachAll();
-        mapsScroll.setVelocity(0);
-        mapsScroll.setPosition(0);
-    };
-    mapsScroll.sequenceFrom([f.maps.surf]);
-    f.maps.surf.pipe(mapsScroll);
-    mapsContainer.add(mapsScroll);
-    var mapsNode = new RenderNode(f.maps.mod);
-    mapsNode.add(mapsContainer);
-    f.mainContext.add(mapsNode);
-    
-    f.loadMaps = function () {
-        if (Metamaps.currentSection === "explore") {
-            var capitalize = Metamaps.currentPage.charAt(0).toUpperCase() + Metamaps.currentPage.slice(1);
-
-            Metamaps.Views.exploreMaps.setCollection( Metamaps.Maps[capitalize] );
-            if (Metamaps.currentPage === "mapper") {
-                Metamaps.Views.exploreMaps.fetchUserThenRender();
-            }
-            else {
-                Metamaps.Views.exploreMaps.render();
-            }
-            f.maps.show();
-            f.explore.set(Metamaps.currentPage, Metamaps.Maps.Mapper.mapperId);
-            f.explore.show();   
-        }
-        else if (Metamaps.currentSection === "") {
-            Metamaps.Loading.hide();
-            if (Metamaps.Active.Mapper) {
-
-                Metamaps.Views.exploreMaps.setCollection( Metamaps.Maps.Active );
-                Metamaps.Views.exploreMaps.render();
-                f.maps.show();
-                f.explore.set('active');
-                f.explore.show();
-            }
-            else f.explore.set('featured');
-        }
-    };
-    
-    
-    // EXPLORE MAPS BAR
-    f.explore = {};
-    f.explore.surf = new Surface({
-        size: [true, 42],
-        content: templates.mineContent,
-        classes: ['exploreMapsCenter']
-    });
-    f.explore.surfBg = new Surface({
-        size: [undefined, 94],
-        content: '<div class="exploreMapsMenu"></div>',
-        classes: ['exploreMapsBar', 'exploreElement']
-    });
-    f.explore.mod = new Modifier({
-        size: [undefined, 94],
-        origin: [0.5, 0],
-        transform: Transform.translate(0, -94, 0)
-    });
-    f.explore.show = function () {
-        f.explore.mod.setTransform(
-            Transform.translate(0, 0, 0), 
-            { duration: 300, curve: 'easeOut' }
-        );
-    };
-    f.explore.hide = function () {
-        f.explore.mod.setTransform(
-            Transform.translate(0, -94, 0), 
-            { duration: 300, curve: 'easeIn' }
-        );
-    };
-    f.explore.setApps = function (section) {
-      f.explore.surf.setContent(templates[section + 'AppsContent']);
-    };
-    f.explore.set = function (section, mapperId) {
-        var loggedIn = Metamaps.Active.Mapper ? 'Auth' : '';
-        
-
-        if (section === "mine" || section === "shared" || section === "active" || section === "featured") {
-            f.explore.surf.setContent(templates[section + loggedIn + 'Content']);
-        }
-        else if (section === "mapper") {
-
-            var setMapper = function(mapperObj) {
-                var mapperContent;
-                mapperContent = "<div class='exploreMapsButton active mapperButton'><img class='exploreMapperImage' width='24' height='24' src='" + mapperObj.image + "' />";
-                mapperContent += "<div class='exploreMapperName'>" + mapperObj.name + "'s Maps</div><div class='clearfloat'></div></div>";
-
-                f.explore.surf.setContent(mapperContent);
-            };
-
-            $.ajax({
-                url: "/users/" + mapperId + ".json",
-                success: function (response) {
-                    setMapper(response);
-                },
-                error: function () {
-                    
-                }
-            });
-        }
-    };
-    var exploreMod = f.mainContext.add(f.explore.mod);
-    exploreMod.add(new Modifier({
-        size: [undefined, 42],
-        origin: [0.5, 1]
-    })).add(new Modifier({
-        origin: [0.5, 1]
-    })).add(f.explore.surf);
-    exploreMod.add(f.explore.surfBg);
-
-
-    // LOGO
-    f.logo = {};
-    f.logo.surf = new Surface({
-        size: [258, 56],
-        content: templates.logoContent,
-        classes: ['footer']
-    });
-
-    f.logo.mod = new Modifier({
-        origin: [0.5, 1],
-        transform: Transform.translate(0, 56, 0)
-    });
-    f.logo.show = function () {
-        f.logo.mod.setTransform(
-            Transform.translate(0, 0, 0), 
-            { duration: 300, curve: 'easeOut' }
-        );
-    };
-    f.logo.hide = function () {
-        f.logo.mod.setTransform(
-            Transform.translate(0, 56, 0), 
-            { duration: 300, curve: 'easeIn' }
-        );
-    };
-    f.mainContext.add(f.logo.mod).add(f.logo.surf);
-    
-
-    // TOAST
-    f.toast = {};
-    f.toast.surf = new Surface({
-        size: [true, 42],
-        content: '',
-        classes: ['toast']
-    });
-    initialToast = function () {
-        var message = document.getElementById('toast') ? document.getElementById('toast').innerHTML : false;
-        if (message) {
-            Metamaps.GlobalUI.notifyUser(message);
-            f.toast.surf.deploy(f.toast.surf._currTarget);
-            f.toast.surf.removeListener('deploy', initialToast);
-        }
-    };
-    f.toast.surf.on('deploy', initialToast);
-    f.toast.mod = new Modifier({
-        origin: [0, 1],
-        opacity: 0,
-        transform: Transform.translate(24, -24, 0)
-    });
-    f.toast.show = function () {
-        f.toast.mod.setOpacity(
-            1, 
-            { duration: 300 }
-        );
-    };
-    f.toast.hide = function () {
-        f.toast.mod.setOpacity(
-            0, 
-            { duration: 300 }
-        );
-    };
-    f.mainContext.add(f.toast.mod).add(f.toast.surf);
-
-    // an object for the realtime mapper compasses surfaces
-    f.compasses = {};
-
-    f.logo.show();
-
-}// build
-});
--- a/public/famous/templates.js
+++ b/public/famous/templates.js
@ -1,42 +0,0 @@
-define(function(require, exports, module) {
-    
-var t = {};
-
-t.logoContent = '<div class="logo">METAMAPS</div>';
-t.logoContent += '<ul class="bottomLinks">';
-t.logoContent += '<li onclick="Metamaps.GlobalUI.openLightbox(\'about\')">About /&nbsp;</li>';
-t.logoContent += '<li onclick="Metamaps.GlobalUI.openLightbox(\'colophon\')">Colophon /&nbsp;</li>';
-t.logoContent += '<li onclick="Metamaps.GlobalUI.openLightbox(\'donate\')">Donate! /&nbsp;</li>';
-t.logoContent += '<li onclick="Metamaps.GlobalUI.openLightbox(\'getInvolved\')">Get Involved!</li>';
-t.logoContent += '</ul>';
-
-/* logged out explore maps bars */
-  t.activeContent = '<a href="/explore/active" class="active activeMaps exploreMapsButton"><div class="exploreMapsIcon"></div>Recently Active Maps</a>';
-  t.activeContent += '<a href="/explore/featured" class="featuredMaps exploreMapsButton"><div class="exploreMapsIcon"></div>Featured Maps</a>';
-
-  t.featuredContent = '<a href="/explore/active" class="activeMaps exploreMapsButton"><div class="exploreMapsIcon"></div>Recently Active Maps</a>';
-  t.featuredContent += '<a href="/explore/featured" class="active featuredMaps exploreMapsButton"><div class="exploreMapsIcon"></div>Featured Maps</a>';
-
-/* logged in explore maps bars */
-  t.mineAuthContent = '<a href="/explore/mine" class="active myMaps exploreMapsButton"><div class="exploreMapsIcon"></div>My Maps</a>';
-  t.mineAuthContent += '<a href="/explore/shared" class="sharedMaps exploreMapsButton"><div class="exploreMapsIcon"></div>Shared With Me</a>';
-  t.mineAuthContent += '<a href="/" class="activeMaps exploreMapsButton"><div class="exploreMapsIcon"></div>Recently Active</a>';
-
-  t.sharedAuthContent = '<a href="/explore/mine" class="myMaps exploreMapsButton"><div class="exploreMapsIcon"></div>My Maps</a>';
-  t.sharedAuthContent += '<a href="/explore/shared" class="active sharedMaps exploreMapsButton"><div class="exploreMapsIcon"></div>Shared With Me</a>';
-  t.sharedAuthContent += '<a href="/" class="activeMaps exploreMapsButton"><div class="exploreMapsIcon"></div>Recently Active</a>';
-
-  t.activeAuthContent = '<a href="/explore/mine" class="myMaps exploreMapsButton"><div class="exploreMapsIcon"></div>My Maps</a>';
-  t.activeAuthContent += '<a href="/explore/shared" class="sharedMaps exploreMapsButton"><div class="exploreMapsIcon"></div>Shared With Me</a>';
-  t.activeAuthContent += '<a href="/" class="active activeMaps exploreMapsButton"><div class="exploreMapsIcon"></div>Recently Active</a>';
-
-
-/* apps bars */
-  t.registeredAppsContent = '<a href="/oauth/applications" class="active activeMaps exploreMapsButton" data-bypass="true"><div class="exploreMapsIcon"></div>Registered Apps</a>';
-  t.registeredAppsContent += '<a href="/oauth/authorized_applications" class="featuredMaps exploreMapsButton" data-bypass="true"><div class="exploreMapsIcon"></div>Authorized Apps</a>';
-
-  t.authorizedAppsContent = '<a href="/oauth/applications" class="activeMaps exploreMapsButton" data-bypass="true"><div class="exploreMapsIcon"></div>Registered Apps</a>';
-  t.authorizedAppsContent += '<a href="/oauth/authorized_applications" class="active featuredMaps exploreMapsButton" data-bypass="true"><div class="exploreMapsIcon"></div>Authorized Apps</a>';
-
-    module.exports = t;
-});
				`@ -0,0 +1 @@`
				`Rails.application.config.assets.precompile += %w( webpacked/metamaps.bundle.js )`