... and again

Update README.md

.editorconfig

@@ -0,0 +1,4 @@
+root = true
+
+[*.js, *.css, *.tpl]
+indent_style = tab

.gitignore

@@ -1,15 +1,14 @@
-#################  
-## npm
-#################
-
 npm-debug.log
 node_modules/
 sftp-config.json
 config.json
+public/src/nodebb.min.js
 public/config.json
 public/css/*.css
-public/themes/*
 *.sublime-project
 *.sublime-workspace
-plugins/*
 .project
+*.swp
+Vagrantfile
+.vagrant
+provision.sh

.jsbeautifyrc

@@ -0,0 +1,17 @@
+{
+    "indent_size": 4,
+    "indent_char": " ",
+    "indent_level": 0,
+    "indent_with_tabs": true,
+    "preserve_newlines": true,
+    "max_preserve_newlines": 10,
+    "jslint_happy": true,
+    "brace_style": "collapse",
+    "keep_array_indentation": false,
+    "keep_function_indentation": false,
+    "space_before_conditional": true,
+    "break_chained_methods": false,
+    "eval_code": false,
+    "unescape_strings": false,
+    "wrap_line_length": 0
+}

.jshintrc

@@ -0,0 +1,86 @@
+{
+    // JSHint Default Configuration File (as on JSHint website)
+    // See http://jshint.com/docs/ for more details
+
+    "maxerr" : 50, // {int} Maximum error before stopping
+
+    // Enforcing
+    "bitwise" : true, // true: Prohibit bitwise operators (&, |, ^, etc.)
+    "camelcase" : false, // true: Identifiers must be in camelCase
+    "curly" : true, // true: Require {} for every new block or scope
+    "eqeqeq" : true, // true: Require triple equals (===) for comparison
+    "forin" : true, // true: Require filtering for..in loops with obj.hasOwnProperty()
+    "immed" : false, // true: Require immediate invocations to be wrapped in parens e.g. `(function () { } ());`
+    "indent" : 4, // {int} Number of spaces to use for indentation
+    "latedef" : false, // true: Require variables/functions to be defined before being used
+    "newcap" : false, // true: Require capitalization of all constructor functions e.g. `new F()`
+    "noarg" : true, // true: Prohibit use of `arguments.caller` and `arguments.callee`
+    "noempty" : true, // true: Prohibit use of empty blocks
+    "nonew" : false, // true: Prohibit use of constructors for side-effects (without assignment)
+    "plusplus" : false, // true: Prohibit use of `++` & `--`
+    "quotmark" : false, // Quotation mark consistency:
+                                // false : do nothing (default)
+                                // true : ensure whatever is used is consistent
+                                // "single" : require single quotes
+                                // "double" : require double quotes
+    "undef" : true, // true: Require all non-global variables to be declared (prevents global leaks)
+    "unused" : false, // true: Require all defined variables be used TODO: Set this to true, update codebase.
+    "strict" : true, // true: Requires all functions run in ES5 Strict Mode
+    "trailing" : false, // true: Prohibit trailing whitespaces
+    "maxparams" : false, // {int} Max number of formal params allowed per function
+    "maxdepth" : false, // {int} Max depth of nested blocks (within functions)
+    "maxstatements" : false, // {int} Max number statements per function
+    "maxcomplexity" : false, // {int} Max cyclomatic complexity per function
+    "maxlen" : false, // {int} Max number of characters per line
+
+    // Relaxing
+    "asi" : false, // true: Tolerate Automatic Semicolon Insertion (no semicolons)
+    "boss" : false, // true: Tolerate assignments where comparisons would be expected
+    "debug" : false, // true: Allow debugger statements e.g. browser breakpoints.
+    "eqnull" : false, // true: Tolerate use of `== null`
+    "es5" : false, // true: Allow ES5 syntax (ex: getters and setters)
+    "esnext" : false, // true: Allow ES.next (ES6) syntax (ex: `const`)
+    "moz" : false, // true: Allow Mozilla specific syntax (extends and overrides esnext features)
+                                 // (ex: `for each`, multiple try/catch, function expression…)
+    "evil" : false, // true: Tolerate use of `eval` and `new Function()`
+    "expr" : false, // true: Tolerate `ExpressionStatement` as Programs
+    "funcscope" : false, // true: Tolerate defining variables inside control statements"
+    "globalstrict" : false, // true: Allow global "use strict" (also enables 'strict')
+    "iterator" : false, // true: Tolerate using the `__iterator__` property
+    "lastsemic" : false, // true: Tolerate omitting a semicolon for the last statement of a 1-line block
+    "laxbreak" : false, // true: Tolerate possibly unsafe line breakings
+    "laxcomma" : false, // true: Tolerate comma-first style coding
+    "loopfunc" : false, // true: Tolerate functions being defined in loops
+    "multistr" : false, // true: Tolerate multi-line strings
+    "proto" : false, // true: Tolerate using the `__proto__` property
+    "scripturl" : false, // true: Tolerate script-targeted URLs
+    "smarttabs" : false, // true: Tolerate mixed tabs/spaces when used for alignment
+    "shadow" : false, // true: Allows re-define variables later in code e.g. `var x=1; x=2;`
+    "sub" : false, // true: Tolerate using `[]` notation when it can still be expressed in dot notation
+    "supernew" : false, // true: Tolerate `new function () { ... };` and `new Object;`
+    "validthis" : false, // true: Tolerate using this in a non-constructor function
+
+    // Environments
+    "browser" : true, // Web Browser (window, document, etc)
+    "couch" : false, // CouchDB
+    "devel" : true, // Development/debugging (alert, confirm, etc)
+    "dojo" : false, // Dojo Toolkit
+    "jquery" : true, // jQuery
+    "mootools" : false, // MooTools
+    "node" : true, // Node.js
+    "nonstandard" : false, // Widely adopted globals (escape, unescape, etc)
+    "prototypejs" : false, // Prototype and Scriptaculous
+    "rhino" : false, // Rhino
+    "worker" : false, // Web Workers
+    "wsh" : false, // Windows Scripting Host
+    "yui" : false, // Yahoo User Interface
+
+    // Legacy
+    "nomen" : false, // true: Prohibit dangling `_` in variables
+    "onevar" : false, // true: Allow only one `var` statement per function
+    "passfail" : false, // true: Stop on first error
+    "white" : false, // true: Check against strict whitespace and indentation rules
+
+    // Custom Globals
+    "globals" : {} // additional predefined global variables
+}

README.md

@@ -1,12 +1,16 @@
-Please support NodeBB development! Check out our IndieGoGo campaign and like, share, and follow us :)
-[NodeBB Homepage](http://www.nodebb.org/ "NodeBB") # [Follow on Twitter](http://www.twitter.com/NodeBB/ "NodeBB Twitter") # [Like us on Facebook](http://www.facebook.com/NodeBB/ "NodeBB Facebook")
-
 # NodeBB
 **NodeBB** is a robust Node.js driven forum built on a redis database. It is powered by web sockets, and is compatible down to IE8.
 
-![NodeBB Main Category Listing](http://imgur.com/BdImzGs.png)
+* [NodeBB Homepage](http://www.nodebb.org/ "NodeBB")
+* [Demo & Meta Discussion](http://try.nodebb.org)
+* [Wiki Guides](https://github.com/designcreateplay/NodeBB/wiki) - includes setup for other platforms
+* [Join us on IRC](https://kiwiirc.com/client/irc.freenode.net/nodebb) - #nodebb on Freenode
+* [Follow on Twitter](http://www.twitter.com/NodeBB/ "NodeBB Twitter")
+* [Like us on Facebook](http://www.facebook.com/NodeBB/ "NodeBB Facebook")
 
-![NodeBB Topic Page](http://imgur.com/Lk7E3KR.png)
+![NodeBB Main Category Listing](http://i.imgur.com/zffCFoh.png)
+
+![NodeBB Topic Page](http://i.imgur.com/tcHW08M.png)
 
 ## How can I follow along/contribute?
 
@@ -16,7 +20,11 @@ Please support NodeBB development! Check out our IndieGoGo campaign and like, sh
 
 ## Requirements
 
-NodeBB requires a version of Node.js at least 0.8 or greater, and a Redis version 2.6 or greater.
+NodeBB requires the following software to be installed:
+
+* A version of Node.js at least 0.8 or greater
+* Redis, version 2.6 or greater.
+* nginx, version 1.3.13 or greater (**only if** intending to use nginx to proxy requests to a NodeBB)
 
 ## Installation
 
@@ -54,3 +62,7 @@ NodeBB can also be started with helper programs, such as `supervisor` and `forev
 *(Optional)* Some server configurations may install the node binary as `nodejs` instead of `node`. You can re-map it (so as to not break compatibility with `node-supervisor`) by running the following command:
 
     # update-alternatives --install /usr/bin/node node /usr/bin/nodejs 10
+
+## Upgrading NodeBB
+
+Detailed upgrade instructions are listed in [Upgrading NodeBB](https://github.com/designcreateplay/NodeBB/wiki/Upgrading-NodeBB)

app.js

@@ -16,20 +16,22 @@
 	along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
+(function () {
+	"use strict";
+
 	// Configuration setup
-nconf = require('nconf');
-nconf.argv().file({ file: __dirname + '/config.json'});
+	var nconf = require('nconf');
+	nconf.argv().env();
 
 	var fs = require('fs'),
+		async = require('async'),
 		winston = require('winston'),
 		pkg = require('./package.json'),
-	url = require('url'),
-	meta = require('./src/meta.js');
+		path = require('path'),
+		meta;
 
 	// Runtime environment
-global.env = process.env.NODE_ENV || 'production',
-
-
+	global.env = process.env.NODE_ENV || 'production';
 
 	winston.remove(winston.transports.Console);
 	winston.add(winston.transports.Console, {
@@ -39,7 +41,7 @@ winston.add(winston.transports.Console, {
 	winston.add(winston.transports.File, {
 		filename: 'error.log',
 		level: 'error'
-})
+	});
 
 	// TODO: remove once https://github.com/flatiron/winston/issues/280 is fixed
 	winston.err = function (err) {
@@ -50,111 +52,123 @@ winston.err = function(err) {
 	winston.info('NodeBB v' + pkg.version + ' Copyright (C) 2013 DesignCreatePlay Inc.');
 	winston.info('This program comes with ABSOLUTELY NO WARRANTY.');
 	winston.info('This is free software, and you are welcome to redistribute it under certain conditions.');
-winston.info('===');
+	winston.info('');
 
 
-
-if(nconf.get('upgrade')) {
-	meta.configs.init(function() {
-		require('./src/upgrade').upgrade();
+	if (!nconf.get('help') && !nconf.get('setup') && !nconf.get('upgrade') && fs.existsSync(__dirname + '/config.json')) {
+		// Load server-side configs
+		nconf.file({
+			file: __dirname + '/config.json'
 		});
-} else if (!nconf.get('setup') && nconf.get('base_url')) {
+		meta = require('./src/meta.js');
+
 		nconf.set('url', nconf.get('base_url') + (nconf.get('use_port') ? ':' + nconf.get('port') : '') + nconf.get('relative_path') + '/');
 		nconf.set('upload_url', nconf.get('url') + 'uploads/');
 
 		winston.info('Initializing NodeBB v' + pkg.version + ', on port ' + nconf.get('port') + ', using Redis store at ' + nconf.get('redis:host') + ':' + nconf.get('redis:port') + '.');
+		winston.info('NodeBB instance bound to: ' + ((nconf.get('bind_address') === "0.0.0.0" || !nconf.get('bind_address')) ? 'Any address (0.0.0.0)' : nconf.get('bind_address')));
+
+		if (process.env.NODE_ENV === 'development') {
 			winston.info('Base Configuration OK.');
+		}
 
 		meta.configs.init(function () {
 			// Initial setup for Redis & Reds
-		var	reds = require('reds');
+			var reds = require('reds'),
 				RDB = require('./src/redis.js');
+
 			reds.createClient = function () {
 				return reds.client || (reds.client = RDB);
-		}
-
-		var categories = require('./src/categories.js'),
-			templates = require('./public/src/templates.js'),
-			webserver = require('./src/webserver.js'),
-			websockets = require('./src/websockets.js'),
-			plugins = require('./src/plugins'),
-			admin = {
-				'categories': require('./src/admin/categories.js')
 			};
 
-		DEVELOPMENT = true;
+			var templates = require('./public/src/templates.js'),
+				translator = require('./public/src/translator.js'),
+				webserver = require('./src/webserver.js'),
+				SocketIO =  require('socket.io').listen(global.server, { log: false, transports: ['websocket', 'xhr-polling', 'jsonp-polling', 'flashsocket']}),
+				websockets = require('./src/websockets.js'),
+				posts = require('./src/posts.js'),
+				plugins = require('./src/plugins'), // Don't remove this - plugins initializes itself
+				Notifications = require('./src/notifications'),
+				Upgrade = require('./src/upgrade');
+
+			Upgrade.check(function(schema_ok) {
+				if (schema_ok || nconf.get('check-schema') === false) {
+					websockets.init(SocketIO);
 
-		global.configuration = {};
 					global.templates = {};
+					global.translator = translator;
 
-		(function(config) {
-			config['ROOT_DIRECTORY'] = __dirname;
+					translator.loadServer();
 
+					var customTemplates = meta.config['theme:templates'] ? path.join(__dirname, 'node_modules', meta.config['theme:id'], meta.config['theme:templates']) : false;
+
+					// todo: replace below with read directory code, derp.
 					templates.init([
 						'header', 'footer', 'logout', 'outgoing', 'admin/header', 'admin/footer', 'admin/index',
 						'emails/reset', 'emails/reset_plaintext', 'emails/email_confirm', 'emails/email_confirm_plaintext',
 						'emails/header', 'emails/footer',
 
 						'noscript/header', 'noscript/home', 'noscript/category', 'noscript/topic'
-			]);
+					], customTemplates);
+
 
 					templates.ready(webserver.init);
 
-			//setup scripts to be moved outside of the app in future.
-			function setup_categories() {
-				winston.info('Checking categories...');
-				categories.getAllCategories(function(data) {
-					if (data.categories.length === 0) {
-						winston.info('Setting up default categories...');
-
-						fs.readFile(config.ROOT_DIRECTORY + '/install/data/categories.json', function(err, default_categories) {
-							default_categories = JSON.parse(default_categories);
-
-							for (var category in default_categories) {
-								admin.categories.create(default_categories[category]);
-							}
-						});
-
-
-						winston.info('Hardcoding uid 1 as an admin');
-						var user = require('./src/user.js');
-						user.makeAdministrator(1);
-
-
+					Notifications.init();
 				} else {
-						winston.info('Categories OK. Found ' + data.categories.length + ' categories.');
+					winston.warn('Your NodeBB schema is out-of-date. Please run the following command to bring your dataset up to spec:');
+					winston.warn('    node app --upgrade');
+					winston.warn('To ignore this error (not recommended):');
+					winston.warn('    node app --no-check-schema')
+					process.exit();
 				}
 			});
-			}
-
-			setup_categories();
-		}(global.configuration));
 		});
-
-} else {
+	} else if (nconf.get('setup') || !fs.existsSync(__dirname + '/config.json')) {
 		// New install, ask setup questions
-	if (nconf.get('setup')) winston.info('NodeBB Setup Triggered via Command Line');
-	else winston.info('Configuration not found, starting NodeBB setup');
+		if (nconf.get('setup')) {
+			winston.info('NodeBB Setup Triggered via Command Line');
+		} else {
+			winston.warn('Configuration not found, starting NodeBB setup');
+		}
+
+		nconf.file({
+			file: __dirname + '/config.json'
+		});
 
 		var install = require('./src/install');
 
-	process.stdout.write(
-		"\nWelcome to NodeBB!\nThis looks like a new installation, so you'll have to answer a " +
-		"few questions about your environment before we can proceed.\n\n" +
-		"Press enter to accept the default setting (shown in brackets).\n\n\n"
-	);
+		winston.info('Welcome to NodeBB!');
+		winston.info('This looks like a new installation, so you\'ll have to answer a few questions about your environment before we can proceed.');
+		winston.info('Press enter to accept the default setting (shown in brackets).');
 
 		install.setup(function (err) {
 			if (err) {
 				winston.error('There was a problem completing NodeBB setup: ', err.message);
 			} else {
-			if (!nconf.get('setup')) {
-				process.stdout.write(
-					"Please start NodeBB again and register a new user. This user will automatically become an administrator.\n\n"
-				);
-			}
+				winston.info('NodeBB Setup Completed. Run \'node app\' to manually start your NodeBB server.');
 			}
 
 			process.exit();
 		});
-}
+
+	} else if (nconf.get('upgrade')) {
+		nconf.file({
+			file: __dirname + '/config.json'
+		});
+		meta = require('./src/meta.js');
+
+		meta.configs.init(function () {
+			require('./src/upgrade').upgrade();
+		});
+	} else/* if (nconf.get('help') */{
+		winston.info('Usage: node app [options] [arguments]');
+		winston.info('       [NODE_ENV=development | NODE_ENV=production] node app [--start] [arguments]');
+		winston.info('');
+		winston.info('Options:');
+		winston.info('  --help              displays this usage information');
+		winston.info('  --setup             configure your environment and setup NodeBB');
+		winston.info('  --upgrade           upgrade NodeBB, first read: github.com/designcreateplay/NodeBB/wiki/Upgrading-NodeBB');
+		winston.info('  --start             manually start NodeBB (default when no options are given)');
+	};
+}());

install/data/categories.json

@@ -1,74 +1,86 @@
  [
     {
         "name": "Announcements",
-        "description": "A place to talk about whateeeever you want",
+        "description": "Announcements regarding our community",
         "blockclass": "category-blue",
-        "icon" : "icon-bullhorn"
+        "icon" : "icon-bullhorn",
+        "order": 1
     },
     {
         "name": "General Discussion",
         "description": "A place to talk about whateeeever you want",
         "blockclass": "category-blue",
-        "icon" : "icon-comment"
+        "icon" : "icon-comment",
+        "order": 2
     },
     {
         "name": "NodeBB Development",
-        "description": "Bugs? Dont worry, we dont read this thread, so post them here.",
+        "description": "NodeBB development news and announcements",
         "blockclass": "category-blue",
-        "icon" : "icon-github"
+        "icon" : "icon-github",
+        "order": 3
     },
     {
         "name": "Blogs",
-        "description": "In future an example of how a hidden category should look like.",
+        "description": "Blog posts from individual members",
         "blockclass": "category-blue",
-        "icon" : "icon-pencil"
+        "icon" : "icon-pencil",
+        "order": 4
     },
     {
         "name": "Feature Requests",
-        "description": "In future an example of how a hidden category should look like.",
+        "description": "Got a feature request you'd like to see? Give us a shout here.",
         "blockclass": "category-purple",
-        "icon" : "icon-lightbulb"
+        "icon" : "icon-lightbulb",
+        "order": 5
     },
     {
         "name": "Bug Reports",
-        "description": "In future an example of how a hidden category should look like.",
+        "description": "Having trouble with NodeBB? Let us know...",
         "blockclass": "category-purple",
-        "icon" : "icon-cogs"
+        "icon" : "icon-cogs",
+        "order": 6
     },
     {
-        "name": "NodeBB Addons",
-        "description": "In future an example of how a hidden category should look like.",
+        "name": "NodeBB Plugins",
+        "description": "Enhance your NodeBB with plugins!",
         "blockclass": "category-purple",
-        "icon" : "icon-plus-sign"
+        "icon" : "icon-plus-sign",
+        "order": 7
     },
     {
         "name": "NodeBB Link Exchange",
-        "description": "In future an example of how a hidden category should look like.",
+        "description": "Link exchange",
         "blockclass": "category-purple",
-        "icon" : "icon-exchange"
+        "icon" : "icon-exchange",
+        "order": 8
     },
     {
         "name": "News",
-        "description": "In future an example of how a hidden category should look like.",
+        "description": "News from around the world",
         "blockclass": "category-darkblue",
-        "icon" : "icon-globe"
+        "icon" : "icon-globe",
+        "order": 9
     },
     {
         "name": "Movies",
-        "description": "In future an example of how a hidden category should look like.",
+        "description": "Discuss the latest movies here",
         "blockclass": "category-darkblue",
-        "icon" : "icon-film"
+        "icon" : "icon-film",
+        "order": 10
     },
     {
         "name": "Games",
-        "description": "In future an example of how a hidden category should look like.",
+        "description": "Discuss the latest games here",
         "blockclass": "category-darkblue",
-        "icon" : "icon-screenshot"
+        "icon" : "icon-screenshot",
+        "order": 11
     },
     {
         "name": "Random",
-        "description": "In future an example of how a hidden category should look like.",
+        "description": "Anything and (almost) everything welcome!",
         "blockclass": "category-darkblue",
-        "icon" : "icon-beer"
+        "icon" : "icon-beer",
+        "order": 12
     }
 ]

mocks/redismock.js

@@ -0,0 +1,69 @@
+/**
+ * Redis Mock - wrapper for redis.js, makes system use separate test db, instead of production
+ * ATTENTION: testing db is flushed before every use!
+ */
+
+(function(module) {
+	'use strict';
+
+	var RedisDB,
+		redis = require('redis'),
+		utils = require('./../public/src/utils.js'),
+		path  = require('path'),
+		nconf = require('nconf'),
+		winston = require('winston'),
+		errorText;
+
+
+	nconf.file({ file: path.join(__dirname, '../config.json') });
+
+	var testDbConfig = nconf.get('redis_test'),
+		productionDbConfig = nconf.get('redis');
+	if(!testDbConfig){
+		errorText = 'redis_test database is not defined';
+		winston.info(
+			"\n===========================================================\n"+
+			"Please, add parameters for test database in config.json\n"+
+			"For example:\n"+
+				'"redis_test": {' + '\n' +
+				'   "host": "127.0.0.1",' + '\n' +
+				'   "port": "6379",' + '\n' +
+				'   "password": "",' + '\n' +
+				'   "database": "1"' + '\n' +
+			'}\n'+
+			"==========================================================="
+		);
+		winston.error(errorText);
+		throw new Error(errorText);
+	}
+
+	if(	testDbConfig.database === productionDbConfig.database &&
+		testDbConfig.host === productionDbConfig.host &&
+		testDbConfig.port === productionDbConfig.port
+	){
+		errorText = 'redis_test database has the same config as production db';
+		winston.error(errorText);
+		throw new Error(errorText);
+	}
+
+	nconf.set('redis',testDbConfig);
+
+	RedisDB = require('../src/redis.js');
+
+
+	//Clean up
+	RedisDB.send_command('flushdb', [], function(error){
+		if(error){
+			winston.error(error);
+			throw new Error(error);
+		} else {
+			winston.info('redis_test db flushed');
+		}
+	});
+
+	//TODO: data seeding, if needed at all
+
+
+	module.exports = RedisDB;
+
+}(module));

package.json

@@ -2,18 +2,21 @@
   "name": "nodebb",
   "license": "GPLv3 or later",
   "description": "NodeBB Forum",
-  "version": "0.0.6",
+  "version": "0.1.0",
   "homepage": "http://www.nodebb.org",
   "repository": {
     "type": "git",
     "url": "https://github.com/designcreateplay/NodeBB/"
   },
   "main": "app.js",
+  "scripts": {
+    "test": "mocha ./tests"
+  },
   "dependencies": {
-    "socket.io": "0.9.14",
+    "socket.io": "~0.9.16",
     "redis": "0.8.3",
     "express": "3.2.0",
-    "express-namespace": "0.1.1",
+    "express-namespace": "~0.1.1",
     "emailjs": "0.3.4",
     "cookie": "0.0.6",
     "connect-redis": "1.4.5",
@@ -27,15 +30,27 @@
     "bcrypt": "0.7.5",
     "async": "0.2.8",
     "node-imagemagick": "0.1.8",
-    "node-rss": "1.0.1",
     "gravatar": "1.0.6",
     "nconf": "~0.6.7",
     "sitemap": "~0.6.0",
-    "cheerio": "~0.12.0",
     "request": "~2.25.0",
     "reds": "~0.2.4",
     "winston": "~0.7.2",
-    "nodebb-plugin-mentions": "~0.1.0"
+    "rss": "~0.2.0",
+    "prompt": "~0.2.11",
+    "uglify-js": "~2.4.0",
+    "validator": "~1.5.1",
+    "nodebb-plugin-mentions": "~0.1.14",
+    "nodebb-plugin-markdown": "~0.1.8",
+    "nodebb-theme-vanilla": "designcreateplay/nodebb-theme-vanilla",
+    "nodebb-theme-cerulean": "0.0.6",
+    "cron": "~1.0.1"
+  },
+  "optionalDependencies": {
+    "hiredis": "~0.1.15"
+  },
+  "devDependencies": {
+    "mocha": "~1.13.0"
   },
   "bugs": {
     "url": "https://github.com/designcreateplay/NodeBB/issues"
@@ -46,15 +61,22 @@
   "contributors": [
     {
       "name": "Andrew Rodrigues",
-      "email": "andrew@designcreateplay.com"
+      "email": "andrew@designcreateplay.com",
+      "url": "https://github.com/psychobunny"
     },
     {
       "name": "Julian Lam",
-      "email": "julian@designcreateplay.com"
+      "email": "julian@designcreateplay.com",
+      "url": "https://github.com/julianlam"
     },
     {
       "name": "Barış Soner Uşaklı",
-      "email": "baris@designcreateplay.com"
+      "email": "baris@designcreateplay.com",
+      "url": "https://github.com/barisusakli"
+    },
+    {
+      "name": "Andrew Darqui",
+      "url": "https://github.com/adarqui"
     },
     {
       "name": "Damian Bushong",
@@ -63,6 +85,10 @@
     {
       "name": "Matt Smith",
       "url": "https://github.com/soimafreak"
+    },
+    {
+      "name": "Quinton Marchi",
+      "url": "https://github.com/iamcardinal"
     }
   ]
 }

public/css/admin.less

@@ -1,157 +0,0 @@
-@import "mixins";
-
-.admin {
-	.entry-row {
-		border-radius: 10px;
-		margin-bottom: 10px;
-		padding: 10px;
-		cursor: move;
-	}
-
-	input.description {
-		width: 400px;
-	}
-
-	.admin-categories {
-		form {
-			margin: 0 0 0px;
-		}
-
-		input {
-			height: 20px;
-			padding: 5px;
-			margin-left: 10px;
-			width: 150px;
-			border: 0;
-			border-radius: 5px;
-			margin-top: -8px;	
-		}
-		
-		.category_description {
-			width: 300px;
-		}
-
-		select {
-			border: 0;
-			margin-left: 10px;
-			padding: 5px;
-			margin-top: -8px;
-		}
-
-		button {
-			margin-top: -7px;
-		}
-
-		.icon{
-			width: 30px;
-			height: 30px;
-			text-align: center;
-			line-height: 35px;
-			display: inline-block;
-		}
-	}
-
-	.themes {
-		margin: 0;
-		padding: 0;
-
-		li {
-			padding: 10px 16px;
-			margin: 0.25em 1em;
-			list-style-type: none;
-			.pointer;
-			-webkit-border-radius: 10px;
-			-moz-border-radius: 10px;
-			border-radius: 10px;
-			-webkit-transition: background-color 250ms linear;
-			-moz-transition: background-color 250ms linear;
-			-ms-transition: background-color 250ms linear;
-			-o-transition: background-color 250ms linear;
-			transition: background-color 250ms linear;
-
-			img {
-				max-width: 150px;
-				float: left;
-			}
-
-			h4, p {
-				margin-left: 170px;
-			}
-
-			p {
-				font-size: 0.9em;
-			}
-
-			&:hover {
-				background-color: rgba(128, 128, 128, 0.2);
-			}
-
-			&.no-themes {
-				font-style: italic;
-			}
-		}
-	}
-
-	.motd textarea {
-		width: 100%;
-	}
-
-	.topics {
-		margin: 0;
-		padding: 0;
-
-		> li {
-			.zebra;
-			list-style-type: none;
-			padding: 1em;
-			margin-bottom: 1em;
-
-			ul {
-				margin: 0.5em 0;
-
-				li {
-					list-style-type: none;
-				}
-			}
-		}
-	}
-
-	.icon-container {
-		.row {
-			margin: 0;
-			.span3 {
-				width: 20px;
-				height: 20px;
-				margin: 1px;
-				cursor: pointer;
-				line-height: 20px;
-				text-align: center;
-
-				&:hover, &.selected {
-					background: black;
-					color: white;
-				}
-
-
-			}
-		}
-	}
-
-	.plugins {
-		li {
-			list-style-type: none;
-			background: rgba(64, 64, 64, 0.05);
-			padding: 1em;
-			border-left: 5px solid #08c;
-
-			h2 {
-				font-size: 16px;
-				margin: 0;
-			}
-
-			p {
-				font-size: 12px;
-			}
-		}
-	}
-}

public/css/category.less

@@ -1,224 +0,0 @@
-
-.category {
-	.span9 {
-		margin-bottom: 50px;
-	}
-
-	a {
-		li {
-			list-style: none;
-			//border-bottom: 1px solid #eee;
-			margin-bottom: 10px;
-			padding-bottom: 10px;
-
-			&.deleted {
-				-moz-opacity: 0.30;
-				opacity: 0.30;
-			}
-		}
-
-		&:last-child li {
-			border-bottom: 0;
-		}
-	}
-
-	ul {
-		margin-left: 0;
-	}
-
-	.thread-rating {
-		color: #444;
-		text-align: center;
-		margin-top: 7px;
-
-		span {
-			display: inline-block; margin-left: 5px;
-			i {
-				padding-left: 2.4px;
-			}
-
-
-			@media (max-width: 1200px) 
-			{
-				margin-left: -1px;
-			}
-		}
-
-
-	}
-
-	.topic-row {
-		border-radius: 5px;
-		padding-left: 20px;
-		border: 1px solid rgba(0, 0, 0, 0.2);
-
-		small {
-			vertical-align: 2px;
-			strong {
-				color: #666;
-			}
-			color: #999;
-			font-size: 14px;
-		}
-
-		h3 {
-			padding: 0;
-			margin: 0;
-			margin-top: 4px;
-			color: rgb(0, 136, 204);
-			line-height: 25px;
-
-			.topic-title {
-				width: 50%;
-				display: inline-block;
-				font-size: 20px;
-				white-space: nowrap;
-				text-overflow:ellipsis;
-				overflow: hidden;
-
-
-				.badge {
-					margin-right: 6px;
-				}
-
-				@media (max-width: 979px) 
-				{
-					width: 100%;
-				}
-			}
-		}
-
-		@media (max-width: 979px) 
-		{
-			width: 100%;
-			margin-left: 0px;
-		}
-
-	}
-
-	.latest-post {
-		float: right;
-		padding-top: 2px;
-		margin-right: 0px;
-		width: 40%;
-
-		.pull-right {
-			width: 100%;
-			height: 50px;
-			line-height: 16px;
-			margin-left: 1px;
-			padding: 5px;
-			border-left: 1px solid #bbb;
-			padding-left: 20px;
-
-			img {
-				display: block;
-				float: left;
-			}
-			p {
-				display: block;
-				float: left;
-				width: 70%;
-				margin-left: 10px;
-				overflow: hidden;
-				height: 32px;
-			}
-			span {
-				display: block;
-				float: left;
-				width: 70%;
-				margin-left: 10px;
-				overflow: hidden;
-				height: 16px;
-				margin-top: -10px;
-				color: #666;
-			}
-		}
-	}
-
-	.recent-replies {
-		overflow-y: auto;
-		overflow-x: hidden;
-
-		ul {
-			width: 100%;
-			height: 50px;
-			line-height: 16px;
-			margin-left: 1px;
-			padding: 5px 5px 5px 0px;
-			list-style-type: none;
-
-			li {
-				clear: both;
-				line-height: 16px;
-				margin-bottom: 1em;
-
-				&:last-child {
-					margin-bottom: 0;
-				}
-
-				img {
-					display: block;
-					float: left;
-				}
-				p {
-					display: block;
-					padding-left:5px;
-					padding-top: 2px;
-					overflow: hidden;
-					height: 32px;
-					margin-bottom: 0.5em;
-				}
-				span {
-					font-size: 12px;
-					display: block;
-					overflow: hidden;
-					height: 16px;
-					padding-left:5px;
-					color: #666;
-				}
-			}
-		}
-	}
-
-
-
-	.sidebar-block {
-		.block-header {
-			padding: 8px;
-			padding-left: 13px;
-			display: block;
-			background: rgb(245,245,245);
-			color: #676;
-			font-weight: 400;
-			font-size: 14px;
-			border-radius: 5px 5px 0 0;
-			border-bottom: 1px solid #ddd;
-
-		}
-		.block-content {
-			padding: 10px;
-			.img-polaroid {
-				width: 20%;
-				height: auto;
-				max-width: 48px;
-			}
-		}
-
-		border-radius: 5px;
-		padding: 0;
-		margin-bottom: 20px;
-
-		.img-polaroid {
-			margin-top: 2px;
-
-		}
-	}
-
-
-
-}
-
-
-
-

public/css/mixins.less

@@ -1,33 +0,0 @@
-.no-select {
-	-webkit-touch-callout: none;
-	-webkit-user-select: none;
-	-khtml-user-select: none;
-	-moz-user-select: none;
-	-ms-user-select: none;
-	user-select: none;
-}
-
-.pointer {
-	cursor: pointer;
-	*cursor: hand;
-}
-
-.inline-block {
-	display: inline-block;
-	*display: inline;
-	zoom: 1;
-}
-
-.clear {
-	clear: both;
-}
-
-.zebra {
-	&:nth-child(even) {
-		background: rgba(191,191,191,0.2);
-	}
-
-	&:nth-child(odd) {
-		background: rgba(223,223,223,0.2);
-	}
-}

public/css/nodebb.less

@@ -1,5 +0,0 @@
-@import "style";
-
-@import "topic";
-@import "category";
-@import "noscript";

public/css/noscript.less

@@ -1,57 +0,0 @@
-@import "mixins";
-
-noscript {
-	.default {
-		list-style-type: none;
-		padding: 1em;
-		margin-bottom: 1em;
-		.zebra;
-	}
-
-	.categories {
-		li {
-			.default;
-
-			.icon {
-				float: left;
-				margin-right: 1em;
-			}
-
-			a {
-				font-size: 20px;
-			}
-		}
-	}
-
-	.topics {
-		li {
-			.default;
-		}
-
-		.teaser {
-			margin-left: 16px;
-			margin-top: 8px;
-
-			img {
-				float: left;
-				width: 32px;
-			}
-
-			p {
-				color: #666;
-				font-size: 13px;
-				text-overflow: ellipsis;
-				overflow: hidden;
-				white-space: nowrap;
-				margin-left: 64px;
-				padding-top: 10px;
-			}
-		}
-	}
-
-	.posts {
-		li {
-			.default;
-		}
-	}
-}

public/css/style.less

@@ -1,885 +0,0 @@
-@import "mixins";
-
-html {
-	overflow-y: scroll;
-}
-
-body {
-	/*background: #fdfdfd;*/  // port to default theme when it is implemented.
-	-webkit-transition: margin-bottom 250ms ease;
-	-moz-transition: margin-bottom 250ms ease;
-	-ms-transition: margin-bottom 250ms ease;
-	-o-transition: margin-bottom 250ms ease;
-	transition: margin-bottom 250ms ease;
-
-	&.composing {
-		margin-bottom: 350px;
-	}
-
-	@media (min-width: 979px) 
-	{
-		padding-top: 70px;
-	}
-
-	@media (max-width: 979px)
-	{
-		padding-bottom: 50px;
-	}
-}
-
-button, a {
-	-webkit-tap-highlight-color: rgba(0,0,0,0);
-}
-
-.none {
-	display: none !important;
-}
-
-.block, .show {
-	display: block;
-}
-.badge {
-	vertical-align: 17%;
-}
-.nav .badge {
-	vertical-align: 2%;
-}
-
-#alert_window {
-	position: fixed;
-	right: 20px;
-	top: 60px;
-	width: 300px;
-	height: 0px;
-}
-
-.toaster-alert {
-
-	cursor: pointer;
-}
-
-footer.footer {
-	color: #555;
-	text-align: center;
-
-	a {
-		color: #222;
-	}
-}
-
-#post_window {
-	width: 100%;
-	position: fixed;
-	height: 350px;
-	left: 0px;
-	bottom: 0px;
-	background: white;
-	z-index: 1500;
-
-	input {
-		width: 100%;
-		height: 30px;
-		padding: 5px;
-	}
-
-	textarea {
-		width: 100%;
-		background: #222;
-		height: 220px;
-		resize: none;
-		border-radius: 0;
-		border: 1px solid #111;
-		font-size: 16px;
-		color: #bebebe;
-		outline: 0;
-
-		&:focus { 
-			outline: 0;
-			border:none !important;
-			box-shadow:none !important;
-		}
-	}
-
-	.post-title-container {
-		opacity: 0.8;
-		height: 50px;
-	}
-
-	.post-content-container {
-		opacity: 0.8;
-		background: #000;
-		width: 100%;
-		height: 300px;
-	}
-}
-
-
-
-#user_label { //belongs in header.less
-	img {
-		border: 1px solid #454;
-		margin-right: 8px;
-		margin-top: -2px;
-		float: left;
-		width:24px;
-		height:24px;
-	}
-
-	span {
-		font-size: 14px;
-		font-weight: 400;
-		color: #ded;
-	}
-}
-
-#reply_title {
-	font-size: 17px;
-	padding-top: 14px;
-	font-weight: 600;
-}
-
-.alt-logins {
-	margin: 0 0 0 1em;
-	padding: 0;
-
-	li {
-		vertical-align: top;
-		background: transparent;
-		display: none;
-		margin: 0.25em;
-		.pointer;
-
-		&.active {
-			.inline-block;
-		}
-
-		i {
-			-webkit-transition: color 100ms linear;
-			-moz-transition: color 100ms linear;
-			-ms-transition: color 100ms linear;
-			-o-transition: color 100ms linear;
-			transition: color 100ms linear;
-
-			&.icon-twitter-sign:hover {
-				color: #4099FF;
-			}
-
-			&.icon-facebook-sign:hover {
-				color: #3b5999;
-			}
-
-			&.icon-google-plus-sign:hover {
-				color: #d34836;
-			}
-		}
-	}
-}
-
-
-#thread_active_users {
-	float: right;
-	color: rgb(153,153,153);
-
-	strong {
-		color: rgb(100,100,100);
-		font-weight: 600;
-		cursor: pointer;
-	}
-}
-
-.account-username-box{
-  border-bottom:1px solid #e3e3e3;
-  margin-bottom:10px;
-}
-
-.account-sub-links a{
-	margin-left:10px;
-}
-
-.account-username{
-  font-size:20px;
-  font-weight:bold;
-}
-
-.account-block {
-  div {
-    padding-bottom:10px;
-  }
-}
-
-.account-picture-block{
-    display:inline-block;
-    vertical-align:top;
-}
-
-.account-online-status {
-  .icon-circle-blank {
-      color:red;
-    }
-    .icon-circle {
-      color:green;
-    }
-}
- 
-.user-profile-picture {
-   width:128px;
-}
-
-.user-picture-label {
-  font-size:20px;
-}
-
-.account-bio-block{
-  display:inline-block;
-  vertical-align:top;
-}
-
-.account-bio-label{
-  display:inline-block;
-  width:100px;
-}
-
-.user-recent-posts {
-  div {
-    color: #333;
-    margin-bottom: 10px;
-    cursor: pointer;
-    overflow:hidden;
-    p {
-    	color: #333;
-    }
-  }
-  span {
-    padding-top: 10px;
-  }
-}
-
-.category-icon {
-	width: 100%;
-	height: 90px;
-	text-align: center;
-	border-radius: 0px;
-	margin: 0;
-	padding-top:25px;
-	cursor: pointer;
-	margin-bottom: 20px;
-	border-radius: 5px;
-	overflow:hidden;
-}
-.category-row h4 {
-	font-weight: 700;
-	text-align: left;
-	/*color: #555;*/ // NOTE: color for cat/topic header links should be grey in the default theme when we get around to it.
-	white-space: nowrap;
-	overflow: hidden;
-	text-overflow: ellipsis;
-}
-.category-row a {
-	text-decoration: none;
-	border: 0;
-}
-
-.category-purple {
-	@color: #ab1290;
-	background: @color;
-	color: white;
-
-	&:hover {
-		background: lighten(@color, 10%);
-	}
-}
-
-.category-darkblue {
-	@color: #004C66;
-	background: @color;
-	color: white;
-
-	&:hover {
-		background: lighten(@color, 10%);
-	}
-}
-
-.category-blue {
-	@color: #0059B2;
-	background: @color;
-	color: white;
-
-	&:hover {
-		background: lighten(@color, 10%);
-	}
-}
-
-.category-darkgreen {
-	@color: #004000;
-	background: @color;
-	color: white;
-
-	&:hover {
-		background: lighten(@color, 10%);
-	}
-}
-.category-orange {
-	@color: #FF7A4D;
-	color: white;
-	background: @color;
-
-	&:hover {
-		background: lighten(@color, 10%);
-	}
-}
-
-.category-list {
-	li {
-		.inline-block;
-		.pointer;
-		padding: 0.5em 0;
-		text-align: center;
-		margin: 0.5em;
-		-webkit-border-radius: 5px;
-		-moz-border-radius: 5px;
-		border-radius: 5px;
-		padding: 0.5em;
-	}
-}
-
-.hero-unit {
-	background: #56BCDA;
-	color: white;
-	padding: 30px;
-	word-wrap: break-word;
-}
-
-.users-box{
-  display: inline-block;
-  margin-top: 20px;
-  text-align: center; 
-  vertical-align: top; 
-  max-width: 104px;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  overflow: hidden;
-
-  img {
-  	width:80px;
-  	height:80px;
-  }
-
-  a {
-  	margin:5px;
-  }
-}
-
-a:hover, .btn-link:hover, .btn-link:active, .btn-link:focus {
-  text-decoration:none;
-}
-
-.formatting-bar {
-	.no-select;
-
-	span:focus {
-		outline: none;
-	}
-}
-
-
-.breadcrumb {
-	li {
-		max-width: 35%;
-		white-space: nowrap;
-		text-overflow:ellipsis;
-		overflow: hidden;
-	}
-}
-
-body .navbar .nodebb-inline-block {
-	display:inline-block;
-}
-
-#right-menu{
-	float:right;
-}
-
-#admin-redis-info {
-	span {
-		display:inline-block;
-		width:220px;
-	}
-}
-
-.post-signature {
-  color: #666;
-  font-size: 12px;
-  border-top: 1px solid #ddd;
-  display: inline-block;
-	
-	img {
-	  max-width:200px;
-	  max-height:60px;
-	}
-}
-
-.username-field {
-	.icon-circle {
-		font-size: 12px;
-		color: green;
-		margin-right:3px;
-	}
-	.icon-circle-blank {
-		font-size: 12px;
-		color: red;
-		margin-right:3px;
-	}
-}
-
-#chat-content {
-	width:95%;
-	height:200px;
-	resize:none;
-}
-
-#chat-message-input {
-	width:95%;
-}
-
-#content{
-  padding-bottom:20px;
-}
-
-
-.dropdown-toggle {
-	i {
-		font-size: 12px;
-
-		@-webkit-keyframes glow
-		{
-			from {text-shadow: 0 0 5px #aaf, 0 0 5px #aaf, 0 0 5px #aaf;}
-			50% {text-shadow: 0 0 10px #aaf, 0 0 10px #aaf, 0 0 10px #aaf;}
-			to {text-shadow: 0 0 5px #aaf, 0 0 5px #aaf, 0 0 5px #aaf;}
-		}
-		@keyframes glow
-		{
-			from {text-shadow: 0 0 5px #aaf, 0 0 5px #aaf, 0 0 5px #aaf;}
-			50% {text-shadow: 0 0 10px #aaf, 0 0 10px #aaf, 0 0 10px #aaf;}
-			to {text-shadow: 0 0 5px #aaf, 0 0 5px #aaf, 0 0 5px #aaf;}
-		}
-
-
-		&.active {
-			color: #558;
-			
-			text-shadow: 0 0 1em #aaf, 0 0 1em #aaf, 0 0 1em #aaf;
-			-webkit-animation:glow 1.5s infinite linear;
-				    animation:glow 1.5s infinite linear;
-		}
-
-	}
-}
-
-#notif-list {
-	li {
-		font-size: 12px;
-		width: 300px;
-		text-align: left;
-
-		a {
-			white-space: normal;
-		}
-
-		&.unread {
-			background: #eceff5;
-		}
-	}
-}
-
-.taskbar {
-	display: none;
-	-moz-opacity: 0.5;
-	opacity: 0.5;
-	margin-top: 0;
-	-webkit-transition: opacity 250ms ease-in;
-	-moz-transition: opacity 250ms ease-in;
-	-ms-transition: opacity 250ms ease-in;
-	-o-transition: opacity 250ms ease-in;
-	transition: opacity 250ms ease-in;
-
-	&[data-active="1"] {
-		display: block;
-	}
-
-	&:hover {
-		-moz-opacity: 1;
-		opacity: 1;
-	}
-
-	li {
-		a > span {
-			.inline-block;
-			max-width: 200px;
-			text-overflow: ellipsis;
-			white-space: nowrap;
-			overflow: hidden;
-		}
-
-		img {
-			max-width: 24px;
-			max-height: 24px;
-			margin-right: 1em;
-		}
-
-		&.pulse {
-			-webkit-animation: pulsate 2500ms linear;
-			-webkit-animation-iteration-count: infinite;
-		}
-
-		@-webkit-keyframes pulsate {
-			0% { background: none; }
-			50% { background: #e5e5e5; }
-			100% { background: none; }
-		}
-	}
-}
-
-.post-window {
-	position: fixed;
-	display: none;
-	height: 350px;
-	visibility: hidden;
-
-	> div {
-		position: absolute;
-		height: 100%;
-		background: rgba(64, 64, 64, 0.6);
-		visibility: visible;
-
-		.btn-toolbar {
-			&.formatting-bar {
-				width: 90%;
-				margin: 0 auto 8px auto;
-
-				span {
-					color: white;
-
-					&:hover {
-						text-decoration: none;
-					}
-				}
-			}
-
-			&.action-bar {
-				width: 90%;
-				margin: 8px auto 0 auto;
-			}
-		}
-
-		input {
-			width: 98%;
-			text-align: center;
-			border: none;
-			padding: 0.5em 0;
-			-webkit-border-radius: 0px;
-			-moz-border-radius: 0px;
-			border-radius: 0px;
-			margin: 5px auto 10px auto;
-			display: block;
-		}
-
-		textarea {
-			background: rgba(64, 64, 64, 0.95);
-			border: none;
-			padding: 0.5em;
-			display: block;
-			width: 90%;
-			margin: 0em auto;
-			resize: none;
-			color: white;
-			height: 200px;
-		}
-		
-		.imagedrop {
-			text-align: center;
-			color: white;
-			position: absolute;
-			top: 0px;
-			left: 0px;
-			width: 100%;
-			height: 214px;
-			line-height: 214px;
-			font-size: 20px;
-			vertical-align: middle;
-			display: none;
-		}
-		
-		.imagelist {
-			position: absolute;
-			bottom: 50px;
-			left: 5%;
-
-			div {
-				margin-right:5px;
-			}
-			
-			span {
-				line-height:20px;
-				float:left;
-			}
-			
-			button { 
-				padding-left:5px;
-			}
-		}
-	}
-}
-
-@media (max-width: 979px) {
-	.post-window {
-		position: relative;
-		bottom: 0px !important;
-
-		> div {
-			position: static;
-			width: 100% !important;
-		}
-	}
-}
-
-
-#mobile-menu {
-	position: fixed;
-	bottom: 0px;
-	height: 50px;
-	background: #333;
-	width: 100%;
-	left: 0px;
-}
-
-#mobile-menu, #mobile-menu-overlay {
-	z-index: 999;
-
-	@media (min-width: 979px) 
-	{
-		display: none !important;
-	}
-}
-
-
-.btn-none,
-.btn-none:active,
-.btn-none[disabled] {
-  background-color: transparent;
-  background-image: none;
-  -webkit-box-shadow: none;
-     -moz-box-shadow: none;
-          box-shadow: none;
-}
-
-.btn-none {
-  cursor: pointer;
-  border-color: transparent;
-  -webkit-border-radius: 0;
-     -moz-border-radius: 0;
-          border-radius: 0;
-}
-
-.btn-none:hover,
-.btn-none:focus {
-  text-decoration: none;
-  background-color: transparent;
-}
-
-.btn-none[disabled]:hover,
-.btn-none[disabled]:focus {
-  text-decoration: none;
-}
-
-.btn-none {
-	.icon-white {
-		color: white;
-	}
-}
-
-#mobile-menu {
-	button {
-		color: #eee;
-		padding: 10px;
-		text-shadow: none;
-		-webkit-tap-highlight-color: rgba(0,0,0,0);
-	}
-}
-
-#mobile-menu-overlay {
-
-	background: rgba(0, 0, 0, 0.85);
-	position: fixed;
-	top: 0px;
-	left: 0px;
-	height: 100%;
-	width: 100%;
-	//margin-top: 50px;
-	padding-top: 20px;
-	opacity: 0;
-
-	-webkit-transition: opacity 150ms ease;
-	-moz-transition: opacity 150ms ease;
-	-ms-transition: opacity 150ms ease;
-	-o-transition: opacity 150ms ease;
-	transition: opacity 150ms ease;
-	z-index: -1;
-	&.menu-visible {
-		z-index: 99;
-		opacity: 1;
-	}
-
-	.mobile-menu-icon {
-		color: white;
-		width: 20%;
-		min-width: 85px;
-		height: auto;
-		text-align: center;
-		padding: 10px;
-		display: inline-block;
-		cursor: pointer;
-		-webkit-tap-highlight-color: rgba(0,0,0,0);
-
-		-webkit-transition: margin-top 250ms ease;
-		-moz-transition: margin-top 250ms ease;
-		-ms-transition: margin-top 250ms ease;
-		-o-transition: margin-top 250ms ease;
-		transition: margin-top 250ms ease;
-
-		margin-top: 20%;
-		
-
-		&.menu-visible {
-			margin-top: 0%;
-  	}
-
-		i {
-			width: 100%;
-		}
-
-	}
-}
-
-#mobile-sidebar {
-	height: 100%;
-	position: absolute;
-	left: 100%;
-	top: 0px;
-	overflow: hidden;
-	margin-top: 60px;
-}
-
-.category-box {
-  height:90px;
-  
-  .post-preview {
-    padding-left:10px;
-    padding-right:10px;
-    text-align:left;
-    img {
-      width:60px;
-      height:60px;
-      padding-right:5px;
-    }
-    
-    p {
-      overflow: hidden;
-      text-overflow:ellipsis;
-      height:60px;
-    }
-  }
-}
-
-#mark-allread-btn {
-  margin-bottom:15px;
-}
-
-@-webkit-keyframes scroll-2 /* Safari and Chrome */
-{
-    0%   {top: 0px;}
-    25%   {top: -90px;}
-    50%  {top: -180px;}
-    75%  {top: -270px;}
-    100% {top: -360px;}
-}
-
-@keyframes scroll-2
-{
-    0%   {top: 0px;}
-    25%   {top: -90px;}
-    50%  {top: -180px;}
-    75%  {top: -270px;}
-    100% {top: -360px;}
-}
-
-@-webkit-keyframes scroll-1 /* Safari and Chrome */
-{
-    0%   {top: 0px;}
-    33%   {top: -90px;}
-    66%  {top: -180px;}
-    100%  {top: -270px;}
-}
-
-@keyframes scroll-1
-{
-    0%   {top: 0px;}
-    33%   {top: -90px;}
-    66%  {top: -180px;}
-    100%  {top: -270px;}
-}
-
-@-webkit-keyframes scroll-0 /* Safari and Chrome */
-{
-    0%   {top: 0px;}
-    50%   {top: -90px;}
-    100%  {top: -180px;}
-}
-
-@keyframes scroll-0
-{
-    0%   {top: 0px;}
-    50%   {top: -90px;}
-    100%  {top: -180px;}
-}
-
-.category-slider-2:hover {
-  position:relative;
-
-  -webkit-animation: scroll-2 10s ease 0.5s infinite normal;    
-  animation: scroll-2 10s ease 0.5s infinite normal;/* Safari and Chrome: */
-}
-
-.category-slider-1:hover {
-  position:relative;
-
-  -webkit-animation: scroll-1 8s ease 0.5s infinite normal;    
-  animation: scroll-1 8s ease 0.5s infinite normal;/* Safari and Chrome: */
-}
-
-.category-slider-0:hover {
-  position:relative;
-
-  -webkit-animation: scroll-0 6s ease 0.5s infinite normal;    
-  animation: scroll-0 6s ease 0.5s infinite normal;/* Safari and Chrome: */
-}
-
-.form-search {
-	float: left;
-	margin-top: 5px;
-	margin-bottom: 5px;
-}
-
-.search-result-post {
-  width: 100%;
-  line-height: 16px;
-  padding: 5px;
-  overflow:hidden;
-  img {
-    display: block;
-    float: left;
-    width:48px;
-    height:48px;
-    padding-right:10px;
-  }
-
-}

public/css/topic.less

@@ -1,226 +0,0 @@
-
-.post-container {
-	list-style-type: none;
-	padding: 0;
-	margin: 0;
-	clear: both;
-
-	.profile-image-block {
-		display: inline-block;
-		text-align: center;
-		font-size: 12px;
-
-		.stats {
-			clear: both;
-		}
-	}
-
-	li {
-		padding-bottom: 15px;
-
-		&.deleted {
-			-moz-opacity: 0.30;
-			opacity: 0.30;
-			height:30px;
-			overflow-y:hidden;
-		}
-
-		&.deleted-expanded {
-			height:100%;
-			overflow-y:default;
-		}
-	}
-
-	.profile-block, .post-block {
-		position:relative;
-		border: 1px solid rgba(0, 0, 0, 0.06);
-		border-radius: 5px;
-		padding: 10px;
-
-		p {
-			line-height: 1.75em;
-		}
-	}
-
-	.profile-block {
-		background: rgba(0, 0, 0, 0.02);
-		margin-right: -11px;
-		margin-left: -11px;
-		margin-bottom: -11px;
-		margin-top: 15px;
-		border-radius: 0 0 5px 5px;
-		font-size: 10px;
-		line-height: 18px;
-		padding: 5px;
-		padding-left: 10px;
-
-		img.hidden-desktop {
-			max-width: 10px;
-			max-height: 10px;
-			padding-top: 5px;
-			margin-right: 5px;
-			
-		}
-	}
-	.post-content {
-		min-height: 50px;
-		padding: 2px 5px 0 5px;
-		word-wrap: break-word;
-	}
-
-	.post-images{
-		padding: 2px 5px 0 5px;
-	}
-
-	.post-block {
-		.post-buttons {
-			font-size: 12px;
-			float: right;
-			margin-right: 5px;
-
-			button, a {
-				display: inline-block;
-				padding: 0px 15px;
-				border: none;
-				border-left: 1px solid rgba(0, 0, 0, 0.06);
-				cursor: pointer;
-				background: none;
-				font-size: 12px;
-				height: 20px;
-
-				&:last-child {
-					padding-right: 5px;
-				}
-			}
-
-			.icon-star {
-				//theme this to make it yellow eventually
-			}
-		}
-	}
-
-	
-
-	&.deleted {
-		-moz-opacity: 0.30;
-		opacity: 0.30;
-	}
-	/*http://stackoverflow.com/questions/11037517/bootstrap-making-responsive-changes-to-layout*/
-	@media (max-width: 979px) {
-
-
-		.span12-tablet {
-			width: 100% !important;
-			margin-left:0px;
-			*width: 100% !important;
-		}
-	}
-
-	@media (min-width: 979px) {
-		.speech-bubble:after 
-		{
-			content: "";
-			position: absolute;
-			top: 9px;
-			left: -7px;
-			border-style: solid;
-			border-width: 7px 7px 7px 0;
-			border-color: transparent #FFFFFF;
-			display: block;
-			width: 0;
-			z-index: 1;
-		}
-
-		.speech-bubble:before 
-		{
-			content: "";
-			position: absolute;
-			top: 9px;
-			left: -8px;
-			border-style: solid;
-			border-width: 7px 7px 7px 0;
-			border-color: transparent rgba(0, 0, 0, 0.125);
-			display: block;
-			width: 0;
-			z-index: 0;
-		}
-	}
-
-	.main-post {
-		h3 {
-			margin: 0;
-
-			.topic-title {
-				width: auto;
-				overflow: hidden;
-				margin: 0;
-				padding: 0;
-				padding-top: 5px;
-				margin-bottom: -5px;
-				padding-bottom: 5px;
-			}
-		}
-
-		.main-avatar {
-			color: white;
-			position: relative;
-			float: left;
-			margin-right: 25px;
-			margin-bottom: 0px;
-			padding-bottom: 0px;
-			text-align: center;
-			width:80px;
-			
-			@media (max-width: 767px) { 
-				display: none;
-			}
-		}
-
-		.main-avatar:hover .hover-overlay {
-			opacity: 0.75;
-		}
-
-		.hover-overlay {
-			margin: 5px;
-			position: absolute;
-			bottom: 0px;
-			height: 35px;
-			padding-top: 2px;
-			width: 80px;
-			font-size: 13px;
-			line-height: 16px;
-			background: #000;
-			opacity: 0;
-			transition: opacity 0.3s;
-		}
-
-		.post-content {
-			min-height: 80px;
-		}
-		hr {
-			margin-top: 0;
-			margin-right: 10px;
-			margin-bottom: 0;
-		}
-		.post-block {
-			.post-buttons {
-				div {
-					border: 0;
-				}
-			}
-		}
-		.favourite {
-			cursor: pointer;
-		}
-		.btn {
-			display: inline-block;
-		}
-
-		.topic-buttons {
-			margin-top: 8px;
-		}
-
-	}
-}
-
-

public/language/TODO

@@ -0,0 +1,3 @@
+NPM INSTALL
+For now, language packs will be stored here. Eventually, will be moved to server side to allow for npm install-ability.
+When that happens, server code will generate compressed JSON language files in this folder.

public/language/en/category.json

@@ -0,0 +1,7 @@
+{
+	"new_topic_button": "New Topic",
+	"no_topics": "<strong>There are no topics in this category.</strong><br />Why don't you try posting one?",
+	"sidebar.recent_replies": "Recent Replies",
+	"sidebar.active_participants": "Active Participants",
+	"sidebar.moderators": "Moderators"
+}

public/language/en/footer.json

@@ -0,0 +1,9 @@
+{
+	"chat.chatting_with": "Chat with <span id='chat-with-name'></span>",
+	"chat.placeholder": "type chat message here, press enter to send",
+	"chat.send": "Send",
+	"stats.online": "Online",
+	"stats.users": "Users",
+	"stats.topics": "Topics",
+	"stats.posts": "Posts"
+}

public/language/en/global.json

@@ -0,0 +1,18 @@
+{
+	"home": "Home",
+	"search": "Search",
+	"buttons.close": "Close",
+	"403.title": "Access Denied",
+	"403.message": "You seem to have stumbled upon a page that you do not have access to. Perhaps you should <a href='/login'>try logging in</a>?",
+	"404.title": "Not Found",
+	"404.message": "You seem to have stumbled upon a page that does not exist. Return to the <a href='/''>home page</a>.",
+	"logout": "Logout",
+	"logout.title": "You are now logged out.",
+	"logout.message": "You have successfully logged out of NodeBB",
+	"header.admin": "Admin",
+	"header.recent": "Recent",
+	"header.unread": "Unread",
+	"header.users": "Users",
+	"header.search": "Search",
+	"notifications.loading": "Loading Notifications"
+}

public/language/en/login.json

@@ -0,0 +1,10 @@
+{
+	"login": "Login",
+	"username": "Username",
+	"password": "Password",
+	"remember_me": "Remember Me?",
+	"forgot_password": "Forgot Password?",
+	"alternative_logins": "Alternative Logins",
+	"failed_login_attempt": "Failed login attempt, please try again.",
+	"login_successful": "You have successfully logged in!"
+}

public/language/en/notifications.json

@@ -0,0 +1,3 @@
+{
+	"title": "Notifications"
+}

public/language/en/recent.json

@@ -0,0 +1,5 @@
+{
+	"day": "Day",
+	"week": "Week",
+	"month": "Month"
+}

public/language/en/register.json

@@ -0,0 +1,16 @@
+{
+	"register": "Register",
+	"help.email": "By default, your email will be hidden from the public.",
+	"help.username_restrictions": "A unique username between %1 and %2 characters. Others can mention you with @<span id='yourUsername'>username</span>.",
+	"help.minimum_password_length": "Your password's length must be at least %1 characters.",
+	"email_address": "Email Address",
+	"email_address_placeholder": "Enter Email Address",
+	"username": "Username",
+	"username_placeholder": "Enter Username",
+	"password": "Password",
+	"password_placeholder": "Enter Password",
+	"confirm_password": "Confirm Password",
+	"confirm_password_placeholder": "Confirm Password",
+	"register_now_button": "Register Now",
+	"alternative_registration": "Alternative Registration"
+}

public/language/en/topic.json

@@ -0,0 +1,23 @@
+{
+	"profile": "Profile",
+	"posted_by": "Posted by",
+	"chat": "Chat",
+	"notify_me": "Be notified of new replies in this topic",
+	"favourite": "Favourite",
+	"quote": "Quote",
+	"reply": "Reply",
+	"edit": "Edit",
+	"delete": "Delete",
+	"banned": "banned",
+	"link": "Link",
+	"thread_tools.title": "Thread Tools",
+	"thread_tools.pin": "Pin Thread",
+	"thread_tools.lock": "Lock Thread",
+	"thread_tools.move": "Move Thread",
+	"thread_tools.delete": "Delete Thread",
+	"load_categories": "Loading Categories",
+	"disabled_categories_note": "Disabled Categories are greyed out",
+	"confirm_move": "Move",
+	"favourites.not_logged_in.title": "Not Logged In",
+	"favourites.not_logged_in.message": "Please log in in order to favourite this post"
+}

public/language/en/unread.json

@@ -0,0 +1,5 @@
+{
+	"no_unread_topics": "There are no unread topics.",
+	"mark_all_read": "Mark all as Read",
+	"load_more": "Load More"
+}

public/language/en/users.json

@@ -0,0 +1,9 @@
+{
+	"latest_users": "Latest Users",
+	"top_posters": "Top Posters",
+	"most_reputation": "Most Reputation",
+	"online": "Online",
+	"search": "Search",
+	"enter_username": "Enter a username to search",
+	"load_more": "Load More"
+}

public/src/ajaxify.js

@@ -2,6 +2,7 @@ var ajaxify = {};
 
 
 (function ($) {
+	/*global app, templates, utils*/
 
 	var location = document.location || window.location,
 		rootUrl = location.protocol + '//' + (location.hostname || location.host) + (location.port ? ':' + location.port : ''),
@@ -22,15 +23,24 @@ var ajaxify = {};
 
 	window.onpopstate = function (event) {
 		// "quiet": If set to true, will not call pushState
-		if (event !== null && event.state && event.state.url !== undefined) ajaxify.go(event.state.url, null, null, true);
+		if (event !== null && event.state && event.state.url !== undefined)
+			ajaxify.go(event.state.url, null, null, true);
 	};
 
+	var pagination;
+
 	ajaxify.go = function (url, callback, template, quiet) {
+		// start: the following should be set like so: ajaxify.onchange(function(){}); where the code actually belongs
 		$(window).off('scroll');
-		// leave room and join global
 		app.enter_room('global');
 
-		var url = url.replace(/\/$/, "");
+		pagination = pagination || document.getElementById('pagination');
+		if (pagination) pagination.parentNode.style.display = 'none';
+		window.onscroll = null;
+		// end
+
+		// Remove trailing slash
+		url = url.replace(/\/$/, "");
 
 		var hash = window.location.hash;
 
@@ -53,16 +63,23 @@ var ajaxify = {};
 
 		if (templates.is_available(tpl_url) && !templates.force_refresh(tpl_url)) {
 			if (quiet !== true) {
+				if (window.history && window.history.pushState) {
 					window.history.pushState({
 						"url": url
 					}, url, RELATIVE_PATH + "/" + url);
 				}
+			}
+
+			translator.load(tpl_url);
 
 			jQuery('#footer, #content').fadeOut(100);
 
 			templates.flush();
 			templates.load_template(function () {
 				exec_body_scripts(content);
+				require(['forum/' + tpl_url], function(script) {
+					if (script && script.init) script.init();
+				});
 
 				if (callback) {
 					callback();
@@ -85,7 +102,7 @@ var ajaxify = {};
 		}
 
 		return false;
-	}
+	};
 
 	$('document').ready(function () {
 		if (!window.history || !window.history.pushState) return; // no ajaxification for old browsers
@@ -94,32 +111,47 @@ var ajaxify = {};
 
 		// Enhancing all anchors to ajaxify...
 		$(document.body).on('click', 'a', function (e) {
-
 			function hrefEmpty(href) {
 				return href == 'javascript:;' || href == window.location.href + "#" || href.slice(-1) === "#";
 			}
 
-			if(hrefEmpty(this.href)) return;
+			if (hrefEmpty(this.href) || this.target !== '' || this.protocol === 'javascript:')
+				return;
 
-			var url = this.href.replace(rootUrl +'/', '');
+			if(!window.location.pathname.match(/\/(403|404)$/g))
+				app.previousUrl = window.location.href;
 
-			if (this.target !== '') return;
+			if (this.getAttribute('data-ajaxify') == 'false') {
+				return;
+			}
 
 			if (!e.ctrlKey && e.which === 1) {
+				if (this.host === window.location.host) {
+					// Internal link
+					var url = this.href.replace(rootUrl + '/', '');
+
 					if (ajaxify.go(url)) {
+
+						e.preventDefault();
+					}
+				} else if (window.location.pathname !== '/outgoing') {
+					// External Link
+
+					if (config.useOutgoingLinksPage == true) {
+						ajaxify.go('outgoing?url=' + encodeURIComponent(this.href));
 						e.preventDefault();
 					}
 				}
+			}
 		});
 	});
 
-
 	function exec_body_scripts(body_el) {
 		// modified from http://stackoverflow.com/questions/2592092/executing-script-elements-inserted-with-innerhtml
 
 		function nodeName(elem, name) {
 			return elem.nodeName && elem.nodeName.toUpperCase() === name.toUpperCase();
-		};
+		}
 
 		function evalScript(elem) {
 			var data = (elem.text || elem.textContent || elem.innerHTML || ""),
@@ -141,11 +173,11 @@ var ajaxify = {};
 			head.insertBefore(script, head.firstChild);
 			//TODO: remove from head before inserting?, doing this breaks scripts in safari so commented out for now
 			//head.removeChild(script);
-		};
+		}
 
 		var scripts = [],
 			script,
-			children_nodes = body_el.childNodes,
+			children_nodes = $(body_el).find('script'),
 			child,
 			i;
 
@@ -164,6 +196,6 @@ var ajaxify = {};
 			}
 			evalScript(scripts[i]);
 		}
-	};
+	}
 
 }(jQuery));

public/src/app.js

@@ -1,29 +1,44 @@
 var socket,
 	config,
-	app = {},
-	API_URL = null;
-
+	app = {
+		'username': null,
+		'uid': null
+	};
 
 (function () {
 	var showWelcomeMessage = false;
 
-	function loadConfig() {
+
+	app.loadConfig = function() {
 
 		$.ajax({
 			url: RELATIVE_PATH + '/api/config',
 			success: function (data) {
-				API_URL = data.api_url;
-
 				config = data;
-				socket = io.connect(config.socket.address + (config.socket.port ? ':' + config.socket.port : ''));
+				if(socket) {
+					socket.disconnect();
+					setTimeout(function() {
+						socket.socket.connect();
+					}, 200);
+				} else {
+					var max_reconnection_attemps = 5;
+					var reconnection_delay = 200;
+					socket = io.connect(RELATIVE_PATH, {
+						'max reconnection attempts': max_reconnection_attemps,
+						'reconnection delay': reconnection_delay
+					});
 
-				var reconnecting = false;
-				var reconnectTries = 0;
+					var reconnecting = false,
+						reconnectEl, reconnectTimer;
 
 					socket.on('event:connect', function (data) {
-					console.log('connected to nodebb socket: ', data);
 						app.username = data.username;
+						app.uid = data.uid;
+
 						app.showLoginMessage();
+						socket.emit('api:updateHeader', {
+							fields: ['username', 'picture', 'userslug']
+						});
 					});
 
 					socket.on('event:alert', function (data) {
@@ -32,53 +47,39 @@ var socket,
 
 					socket.on('connect', function (data) {
 						if (reconnecting) {
-						setTimeout(function(){
-							app.alert({
-								alert_id: 'connection_alert',
-								title: 'Connected',
-								message: 'Connection successful.',
-								type: 'success',
-								timeout: 5000
-							});
-						}, 1000);
+							reconnectEl.html('<i class="icon-ok"></i> Connected!');
 							reconnecting = false;
-						reconnectTries = 0;
-						socket.emit('api:updateHeader', { fields: ['username', 'picture', 'userslug'] });
-					}
-				});
 
-				socket.on('reconnecting', function(data) {
-					function showDisconnectModal() {
-						$('#disconnect-modal').modal({
-							backdrop:'static',
-							show:true
-						});
-
-						$('#reload-button').on('click',function(){
-							$('#disconnect-modal').modal('hide');
-							window.location.reload();
-						});
+							setTimeout(function() {
+								reconnectEl.removeClass('active');
+							}, 3000);
 						}
 
-					reconnecting = true;
-					reconnectTries++;
+						socket.emit('api:updateHeader', {
+							fields: ['username', 'picture', 'userslug']
+						});
+					});
 
-					if(reconnectTries > 4) {
-						showDisconnectModal();
+					socket.on('event:disconnect', function() {
+						socket.socket.connect();
+					});
+
+					socket.on('reconnecting', function (data, attempt) {
+						if(attempt == max_reconnection_attemps) {
+							socket.socket.reconnectionAttempts = 0;
+							socket.socket.reconnectionDelay = reconnection_delay;
 							return;
 						}
 
-					app.alert({
-						alert_id: 'connection_alert',
-						title: 'Reconnecting',
-						message: 'You have disconnected from NodeBB, we will try to reconnect you. <br/><i class="icon-refresh icon-spin"></i>',
-						type: 'notify',
-						timeout: 5000
-					});
+						if (!reconnectEl) reconnectEl = $('#reconnect');
+						reconnecting = true;
+
+						reconnectEl.addClass('active');
+						reconnectEl.html('<i class="icon-spinner icon-spin"></i> Reconnecting...');
 					});
 
 					socket.on('api:user.get_online_users', function (users) {
-					jQuery('.username-field').each(function() {
+						jQuery('a.username-field').each(function () {
 							if (this.processed === true)
 								return;
 
@@ -95,16 +96,50 @@ var socket,
 
 							el.processed = true;
 						});
+						jQuery('button .username-field').each(function () {
+							//DRY FAIL
+							if (this.processed === true)
+								return;
+
+							var el = jQuery(this),
+								uid = el.parents('li').attr('data-uid');
+
+							if (uid && jQuery.inArray(uid, users) !== -1) {
+								el.parent().addClass('btn-success');
+							} else {
+								el.parent().addClass('btn-danger');
+							}
+
+							el.processed = true;
+						});
+					});
+
+					socket.on('event:banned', function() {
+						app.alert({
+							title: 'Banned',
+							message: 'You are banned you will be logged out!',
+							type: 'warning',
+							timeout: 1000
+						});
+
+						setTimeout(app.logout, 1000);
 					});
 
 					app.enter_room('global');
-
-
+				}
 			},
 			async: false
 		});
 	}
 
+	app.logout = function() {
+		$.post(RELATIVE_PATH + '/logout', {
+			_csrf: $('#csrf_token').val()
+		}, function() {
+			window.location.reload(false);
+		});
+	}
+
 	// takes a string like 1000 and returns 1,000
 	app.addCommas = function (text) {
 		return text.replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,");
@@ -131,6 +166,7 @@ var socket,
 		var alert_id = 'alert_button_' + ((params.alert_id) ? params.alert_id : new Date().getTime());
 
 		var alert = $('#' + alert_id);
+		var title = params.title || '';
 
 		function startTimeout(div, timeout) {
 			var timeoutId = setTimeout(function () {
@@ -143,23 +179,22 @@ var socket,
 		}
 
 		if (alert.length > 0) {
-			alert.find('strong').html(params.title);
+			alert.find('strong').html(title);
 			alert.find('p').html(params.message);
-			alert.attr('class', "alert toaster-alert " + ((params.type=='warning') ? '' : "alert-" + params.type));
+			alert.attr('class', "alert toaster-alert " + "alert-" + params.type);
 
 			clearTimeout(alert.attr('timeoutId'));
 			startTimeout(alert, params.timeout);
-		}
-		else {
+		} else {
 			var div = document.createElement('div'),
 				button = document.createElement('button'),
 				strong = document.createElement('strong'),
 				p = document.createElement('p');
 
 			p.innerHTML = params.message;
-			strong.innerHTML = params.title;
+			strong.innerHTML = title;
 
-			div.className = "alert toaster-alert " + ((params.type=='warning') ? '' : "alert-" + params.type);
+			div.className = "alert toaster-alert " + "alert-" + params.type;
 
 			div.setAttribute('id', alert_id);
 			div.appendChild(button);
@@ -211,7 +246,7 @@ var socket,
 		app.alert({
 			title: 'Error',
 			message: message,
-			type: 'error',
+			type: 'danger',
 			timeout: timeout
 		});
 	}
@@ -242,23 +277,17 @@ var socket,
 	}
 
 	app.process_page = function () {
-
-		// here is where all modules' onNavigate should be called, I think.
-		require(['mobileMenu'], function(mobileMenu) {
-			mobileMenu.onNavigate();
-		});
-
 		app.populate_online_users();
 
-		var url = window.location.href,
-			parts = url.split('/'),
+		var path = window.location.pathname,
+			parts = path.split('/'),
 			active = parts[parts.length - 1];
 
 		jQuery('#main-nav li').removeClass('active');
 		if (active) {
 			jQuery('#main-nav li a').each(function () {
 				var href = this.getAttribute('href');
-				if(active.match(/^users/))
+				if (active == "sort-posts" || active == "sort-reputation" || active == "search" || active == "latest" || active == "online")
 					active = 'users';
 				if (href && href.match(active)) {
 					jQuery(this.parentNode).addClass('active');
@@ -267,6 +296,9 @@ var socket,
 			});
 		}
 
+		$('span.timeago').timeago();
+		$('.post-content img').addClass('img-responsive');
+
 		setTimeout(function () {
 			window.scrollTo(0, 1); // rehide address bar on mobile after page load completes.
 		}, 100);
@@ -298,14 +330,31 @@ var socket,
 		});
 	}
 
+	app.openChat = function (username, touid) {
+		require(['chat'], function (chat) {
+			var chatModal;
+			if (!chat.modalExists(touid)) {
+				chatModal = chat.createModal(username, touid);
+			} else {
+				chatModal = chat.getModal(touid);
+			}
+			chat.load(chatModal.attr('UUID'));
+			chat.center(chatModal);
+		});
+	}
+
 	app.createNewPosts = function (data) {
+		if (data.posts[0].uid !== app.uid) {
  			data.posts[0].display_moderator_tools = 'none';
-		var html = templates.prepare(templates['topic'].blocks['posts']).parse(data),
-			uniqueid = new Date().getTime(),
+ 		}
+
+		var html = templates.prepare(templates['topic'].blocks['posts']).parse(data);
+		translator.translate(html, function(translatedHTML) {
+			var uniqueid = new Date().getTime(),
 				tempContainer = jQuery('<div id="' + uniqueid + '"></div>')
 					.appendTo("#post-container")
 					.hide()
-				.append(html)
+					.append(translatedHTML)
 					.fadeIn('slow');
 
 			for (var x = 0, numPosts = data.posts.length; x < numPosts; x++) {
@@ -317,6 +366,9 @@ var socket,
 
 			app.populate_online_users();
 			app.addCommasToNumbers();
+			$('span.timeago').timeago();
+			$('.post-content img').addClass('img-responsive');
+		});
 	}
 
 	app.infiniteLoaderActive = false;
@@ -325,20 +377,39 @@ var socket,
 		if (app.infiniteLoaderActive)
 			return;
 		app.infiniteLoaderActive = true;
+
+		if ($('#loading-indicator').attr('done') === '0')
+			$('#loading-indicator').removeClass('hide');
+
 		socket.emit('api:topic.loadMore', {
 			tid: tid,
 			after: document.querySelectorAll('#post-container li[data-pid]').length
 		}, function (data) {
 			app.infiniteLoaderActive = false;
 			if (data.posts.length) {
+				$('#loading-indicator').attr('done', '0');
 				app.createNewPosts(data);
+			} else {
+				$('#loading-indicator').attr('done', '1');
 			}
-
+			$('#loading-indicator').addClass('hide');
 			if (callback)
 				callback(data.posts);
 		});
 	}
 
+	app.scrollToTop = function () {
+		$('body,html').animate({
+			scrollTop: 0
+		});
+	};
+
+	app.scrollToBottom = function () {
+		$('body,html').animate({
+			scrollTop: $('html').height() - 100
+		});
+	}
+
 	app.scrollToPost = function (pid) {
 
 		if (!pid)
@@ -351,7 +422,8 @@ var socket,
 		function animateScroll() {
 			$('body,html').animate({
 				scrollTop: scrollTo.offset().top - container.offset().top + container.scrollTop() - $('#header-menu').height()
-			});
+			}, 400);
+			//$('body,html').scrollTop(scrollTo.offset().top - container.offset().top + container.scrollTop() - $('#header-menu').height());
 		}
 
 		if (!scrollTo.length && tid) {
@@ -376,71 +448,16 @@ var socket,
 	}
 
 	jQuery('document').ready(function () {
-		addTouchEvents();
-
 		$('#search-form').on('submit', function () {
 			var input = $(this).find('input');
 			ajaxify.go("search/" + input.val(), null, "search");
 			input.val('');
 			return false;
-		})
+		});
 	});
 
 	showWelcomeMessage = location.href.indexOf('loggedin') !== -1;
 
-	loadConfig();
+	app.loadConfig();
 
-
-	function addTouchEvents() {
-		return; // later.
-
-
-		// click simulation just for testing/sanity purposes.
-
-		var el = jQuery("#content"),
-			sidebar = jQuery('#mobile-sidebar'),
-			width = el.width();
-
-		function onTouchMove(ev) {
-			var coordinates = window.event ? window.event.touches[0] : ev.touches[0];
-
-			el.css({
-				marginLeft: -parseInt(width - coordinates.pageX) + 'px',
-				paddingRight: parseInt(width - coordinates.pageX) + 'px'});
-
-			sidebar.css({
-				marginLeft: -parseInt(width - coordinates.pageX) + 'px',
-				width: parseInt(width - coordinates.pageX) + 'px'
-			});
-		}
-
-		function onMouseMove(ev) {
-			ev.touches = [{pageX: ev.pageX, pageY: ev.pageY}];
-			onTouchMove(ev);
-		}
-
-		function onTouchEnd() {
-			el.css({
-				marginLeft: '0px',
-				paddingRight: '0px'
-			});
-
-			sidebar.css({
-				marginLeft: '0px',
-				width: '0px'
-			});
-		}
-
-		el.on('touchmove', onTouchMove);
-		el.on('mousedown', function() {
-			el.on('mousemove', onMouseMove);
-		});
-
-		el.on('touchend', onTouchEnd);
-		el.on('mouseup', function() {
-			el.off('mousemove');
-			onTouchEnd();
-		});
-
-	}
 }());

public/src/forum/account.js

@@ -1,16 +1,23 @@
-(function() {
+define(['forum/accountheader'], function(header) {
+	var Account = {};
+
+	Account.init = function() {
+		header.init();
+
 		var yourid = templates.get('yourid'),
 			theirid = templates.get('theirid'),
 			isFollowing = templates.get('isFollowing');
 
 		$(document).ready(function() {
+			var username = $('.account-username a').html();
+			app.enter_room('user/' + theirid);
 
 			app.addCommasToNumbers();
 
 			var followBtn = $('#follow-btn');
 			var unfollowBtn = $('#unfollow-btn');
 
-		if(yourid !== theirid) {
+			if (yourid !== theirid && yourid !== "0") {
 				if (isFollowing) {
 					followBtn.hide();
 					unfollowBtn.show();
@@ -18,11 +25,15 @@
 					followBtn.show();
 					unfollowBtn.hide();
 				}
+			} else {
+				followBtn.hide();
+				unfollowBtn.hide();
 			}
 
 			followBtn.on('click', function() {
-			socket.emit('api:user.follow', {uid: theirid}, function(success) {
-				var username = $('.account-username a').html();
+				socket.emit('api:user.follow', {
+					uid: theirid
+				}, function(success) {
 					if (success) {
 						followBtn.hide();
 						unfollowBtn.show();
@@ -35,8 +46,9 @@
 			});
 
 			unfollowBtn.on('click', function() {
-			socket.emit('api:user.unfollow', {uid: theirid}, function(success) {
-				var username = $('.account-username a').html();
+				socket.emit('api:user.unfollow', {
+					uid: theirid
+				}, function(success) {
 					if (success) {
 						followBtn.show();
 						unfollowBtn.hide();
@@ -52,20 +64,29 @@
 				ajaxify.go($(this).attr('topic-url'));
 			});
 
+			socket.on('api:user.isOnline', Account.handleUserOnline);
+
+			socket.emit('api:user.isOnline', theirid, Account.handleUserOnline);
+
+			socket.on('event:new_post', function(data) {
+				var html = templates.prepare(templates['account'].blocks['posts']).parse(data);
+				$('.user-recent-posts').prepend(html);
+			});
+
+		});
+	};
+
+	Account.handleUserOnline = function(data) {
 		var onlineStatus = $('.account-online-status');
 
-		socket.on('api:user.isOnline', function(online) {
-			if(online) {
+		if (data.online) {
 			onlineStatus.find('span span').text('online');
 			onlineStatus.find('i').attr('class', 'icon-circle');
 		} else {
 			onlineStatus.find('span span').text('offline');
 			onlineStatus.find('i').attr('class', 'icon-circle-blank');
 		}
+	};
+
+	return Account;
 });
-		
-		socket.emit('api:user.isOnline', theirid);
-
-	});
-
-}());

public/src/forum/accountedit.js

@@ -1,97 +1,12 @@
+define(['forum/accountheader', 'uploader'], function(header, uploader) {
+	var AccountEdit = {};
 
+	AccountEdit.init = function() {
+		header.init();
 
 		var gravatarPicture = templates.get('gravatarpicture');
 		var uploadedPicture = templates.get('uploadedpicture');
 
-$(document).ready(function() {
- 
-
-
-	$('#uploadForm').submit(function() {
-		status('uploading the file ...');
-		
-		$('#upload-progress-bar').css('width', '0%');
-		$('#upload-progress-box').show();
-		
-		if(!$('#userPhotoInput').val()) {
-			error('select an image to upload!');
-			return false;			
-		}
-		
-		$(this).find('#imageUploadCsrf').val($('#csrf_token').val());
-		
-
-		$(this).ajaxSubmit({
- 
-			error: function(xhr) {
-				error('Error: ' + xhr.status);
-			},
-			
-			uploadProgress : function(event, position, total, percent) {
-				$('#upload-progress-bar').css('width', percent+'%');
-			},
-			
- 
-			success: function(response) {
-				if(response.error) {
-					error(response.error);
-					return;
-				}
- 
-				var imageUrlOnServer = response.path;
-				
-				$('#user-current-picture').attr('src', imageUrlOnServer);
-				$('#user-uploaded-picture').attr('src', imageUrlOnServer);
-				
-				uploadedPicture = imageUrlOnServer;        
-								
-				setTimeout(function() {
-					hideAlerts();
-					$('#upload-picture-modal').modal('hide');
-				}, 750);
-				
-				socket.emit('api:updateHeader', { fields: ['username', 'picture', 'userslug'] });
-				success('File uploaded successfully!');
-			}
-		});
-
-		return false;
-	});
- 
-	function hideAlerts() {
-		$('#alert-status').hide();
-		$('#alert-success').hide();
-		$('#alert-error').hide();
-		$('#upload-progress-box').hide();
-	}
- 
-	function status(message) {
-		hideAlerts();
-		$('#alert-status').text(message).show();
-	}
-	
-	function success(message) {
-		hideAlerts();
-		$('#alert-success').text(message).show();
-	}
-	
-	function error(message) {
-		hideAlerts();
-		$('#alert-error').text(message).show();
-	}
-	
-	function changeUserPicture(type) { 
-		var userData = {
-			type: type
-		};
-			
-		socket.emit('api:user.changePicture', userData, function(success) {
-			if(!success) {
-				app.alertError('There was an error changing picture!');
-			}
-		});
-	}
-		
 		var selectedImageType = '';
 
 		$('#submitBtn').on('click', function() {
@@ -106,7 +21,7 @@ $(document).ready(function() {
 				signature: $('#inputSignature').val()
 			};
 
-		socket.emit('api:user.updateProfile', userData, function(data) {
+			socket.emit('api:user.updateProfile', userData, function(err, data) {
 				if (data.success) {
 					app.alertSuccess('Your profile has been updated successfully!');
 					if (data.picture) {
@@ -118,47 +33,18 @@ $(document).ready(function() {
 						gravatarPicture = data.gravatarpicture;
 					}
 				} else {
-				app.alertError('There was an error updating your profile!');
+					app.alertError('There was an error updating your profile! ' + err.error);
 				}
 			});
 			return false;
 		});
 
-	function updateImages() {
-		var currentPicture = $('#user-current-picture').attr('src');
-
-		if(gravatarPicture) {
-			$('#user-gravatar-picture').attr('src', gravatarPicture);
-			$('#gravatar-box').show();
-		}
-		else
-			$('#gravatar-box').hide();
-
-		if(uploadedPicture) {
-			$('#user-uploaded-picture').attr('src', uploadedPicture);
-			$('#uploaded-box').show();
-		}
-		else
-			$('#uploaded-box').hide();
-			
-			
-		 if(currentPicture == gravatarPicture)
-			$('#gravatar-box .icon-ok').show();
-		else
-			$('#gravatar-box .icon-ok').hide();
-			
-		if(currentPicture == uploadedPicture)
-			$('#uploaded-box .icon-ok').show();
-		else
-			$('#uploaded-box .icon-ok').hide();
-	}
-	
-	
 		$('#changePictureBtn').on('click', function() {
 			selectedImageType = '';
-		updateImages();
+			AccountEdit.updateImages();
 
 			$('#change-picture-modal').modal('show');
+			$('#change-picture-modal').removeClass('hide');
 
 			return false;
 		});
@@ -179,7 +65,7 @@ $(document).ready(function() {
 			$('#change-picture-modal').modal('hide');
 
 			if (selectedImageType) {
-			changeUserPicture(selectedImageType);
+				AccountEdit.changeUserPicture(selectedImageType);
 
 				if (selectedImageType == 'gravatar')
 					$('#user-current-picture').attr('src', gravatarPicture);
@@ -196,16 +82,21 @@ $(document).ready(function() {
 		$('#uploadPictureBtn').on('click', function() {
 
 			$('#change-picture-modal').modal('hide');
-		$('#upload-picture-modal').modal('show');
+			uploader.open(config.relative_path + '/user/uploadpicture', function(imageUrlOnServer) {
+				$('#user-current-picture').attr('src', imageUrlOnServer);
+				$('#user-uploaded-picture').attr('src', imageUrlOnServer);
+
+				uploadedPicture = imageUrlOnServer;
+
+				socket.emit('api:updateHeader', {
+					fields: ['username', 'picture', 'userslug']
+				});
+			});
 
-		hideAlerts();
 
 			return false;
 		});
 
-	$('#pictureUploadSubmitBtn').on('click', function() {
-		$('#uploadForm').submit();
-	});
 
 		(function handlePasswordChange() {
 			var currentPassword = $('#inputCurrentPassword');
@@ -219,50 +110,62 @@ $(document).ready(function() {
 
 			function onPasswordChanged() {
 				passwordvalid = utils.isPasswordValid(password.val());
-			if (password.val().length < 6) {
+				if (password.val().length < config.minimumPasswordLength) {
 					password_notify.html('Password too short');
-				password_notify.attr('class', 'label label-important');
+					password_notify.attr('class', 'alert alert-danger');
+					password_notify.removeClass('hide');
 				} else if (!passwordvalid) {
 					password_notify.html('Invalid password');
-				password_notify.attr('class', 'label label-important');
+					password_notify.attr('class', 'alert alert-danger');
+					password_notify.removeClass('hide');
 				} else {
 					password_notify.html('OK!');
-				password_notify.attr('class', 'label label-success');
+					password_notify.attr('class', 'alert alert-success');
+					password_notify.removeClass('hide');
 				}
 
 				onPasswordConfirmChanged();
 			}
 
 			function onPasswordConfirmChanged() {
+				if (password_notify.hasClass('alert-danger') || !password_confirm.val()) {
+					password_confirm_notify.addClass('hide');
+					return;
+				}
 				if (password.val() !== password_confirm.val()) {
 					password_confirm_notify.html('Passwords must match!');
-				password_confirm_notify.attr('class', 'label label-important');
+					password_confirm_notify.attr('class', 'alert alert-danger');
+					password_confirm_notify.removeClass('hide');
 					passwordsmatch = false;
 				} else {
 					password_confirm_notify.html('OK!');
-				password_confirm_notify.attr('class', 'label label-success');
+					password_confirm_notify.attr('class', 'alert alert-success');
+					password_confirm_notify.removeClass('hide');
 					passwordsmatch = true;
 				}
 			}
 
-		password.on('keyup', onPasswordChanged);
-		password_confirm.on('keyup', onPasswordConfirmChanged);
+			password.on('blur', onPasswordChanged);
+			password_confirm.on('blur', onPasswordConfirmChanged);
 
 			$('#changePasswordBtn').on('click', function() {
 
 				if (passwordvalid && passwordsmatch && currentPassword.val()) {
-				socket.emit('api:user.changePassword', {'currentPassword': currentPassword.val(),'newPassword': password.val()	}, function(data) {
+					socket.emit('api:user.changePassword', {
+						'currentPassword': currentPassword.val(),
+						'newPassword': password.val()
+					}, function(err) {
 
 						currentPassword.val('');
 						password.val('');
 						password_confirm.val('');
-					password_notify.html('');
-					password_confirm_notify.html('');
+						password_notify.addClass('hide');
+						password_confirm_notify.addClass('hide');
 						passwordsmatch = false;
 						passwordvalid = false;
 
-					if(data.err) {
-						app.alertError(data.err);
+						if (err) {
+							app.alertError(err.error);
 							return;
 						}
 
@@ -274,4 +177,49 @@ $(document).ready(function() {
 			});
 
 		}());
+	};
+
+
+	AccountEdit.changeUserPicture = function(type) {
+		var userData = {
+			type: type
+		};
+
+		socket.emit('api:user.changePicture', userData, function(success) {
+			if (!success) {
+				app.alertError('There was an error changing picture!');
+			}
+		});
+	}
+
+	AccountEdit.updateImages = function() {
+		var currentPicture = $('#user-current-picture').attr('src');
+		var gravatarPicture = templates.get('gravatarpicture');
+		var uploadedPicture = templates.get('uploadedpicture');
+
+		if (gravatarPicture) {
+			$('#user-gravatar-picture').attr('src', gravatarPicture);
+			$('#gravatar-box').show();
+		} else
+			$('#gravatar-box').hide();
+
+		if (uploadedPicture) {
+			$('#user-uploaded-picture').attr('src', uploadedPicture);
+			$('#uploaded-box').show();
+		} else
+			$('#uploaded-box').hide();
+
+
+		if (currentPicture == gravatarPicture)
+			$('#gravatar-box .icon-ok').show();
+		else
+			$('#gravatar-box .icon-ok').hide();
+
+		if (currentPicture == uploadedPicture)
+			$('#uploaded-box .icon-ok').show();
+		else
+			$('#uploaded-box .icon-ok').hide();
+	}
+
+	return AccountEdit;
 });

public/src/forum/accountheader.js

@@ -1,25 +1,11 @@
-(function() {
+define(function() {
+	var	AccountHeader = {};
+
+	AccountHeader.init = function() {
 		var yourid = templates.get('yourid'),
 			theirid = templates.get('theirid');
 
-
-	function createMenu() {
-		var userslug = $('.account-username-box').attr('data-userslug');
-		var links = $('<div class="account-sub-links inline-block pull-right">\
-			<span id="settingsLink" class="pull-right"><a href="/users/' + userslug + '/settings">settings</a></span>\
-			<span id="favouritesLink" class="pull-right"><a href="/users/' + userslug + '/favourites">favourites</a></span>\
-			<span class="pull-right"><a href="/users/' + userslug + '/followers">followers</a></span>\
-			<span class="pull-right"><a href="/users/' + userslug + '/following">following</a></span>\
-			<span id="editLink" class="pull-right"><a href="/users/' + userslug + '/edit">edit</a></span>\
-		</div>');
-
-		$('.account-username-box').append(links);
-
-	}
-
-	$(document).ready(function() {
-		
-		createMenu();
+		AccountHeader.createMenu();
 
 		var editLink = $('#editLink');
 		var settingsLink = $('#settingsLink');
@@ -31,6 +17,27 @@
 			favouritesLink.hide();
 		}
 
+		jQuery('.account-sub-links span a').removeClass('bold').each(function() {
+			var href = this.getAttribute('href');
+			if (window.location.href.indexOf(href) !== -1) {
+				jQuery(this).addClass('bold');
+				return false;
+			}
 		});
+	}
 
-}());
+	AccountHeader.createMenu = function() {
+		var userslug = $('.account-username-box').attr('data-userslug');
+		var links = $('<div class="account-sub-links inline-block pull-right">\
+			<span id="settingsLink" class="pull-right"><a href="/user/' + userslug + '/settings">settings</a></span>\
+			<span id="favouritesLink" class="pull-right"><a href="/user/' + userslug + '/favourites">favourites</a></span>\
+			<span class="pull-right"><a href="/user/' + userslug + '/followers">followers</a></span>\
+			<span class="pull-right"><a href="/user/' + userslug + '/following">following</a></span>\
+			<span id="editLink" class="pull-right"><a href="/user/' + userslug + '/edit">edit</a></span>\
+		</div>');
+
+		$('.account-username-box').append(links);
+	}
+
+	return AccountHeader;
+});

public/src/forum/accountsettings.js

@@ -1,7 +1,8 @@
+define(['forum/accountheader'], function(header) {
+	var	AccountSettings = {};
 
-
-
-$(document).ready(function() {
+	AccountSettings.init = function() {
+		header.init();
 
 		$('#submitBtn').on('click', function() {
 
@@ -18,5 +19,7 @@ $(document).ready(function() {
 			});
 			return false;
 		});
+	};
 
+	return AccountSettings;
 });

public/src/forum/admin/categories.js

@@ -1,11 +1,15 @@
+define(function() {
+	var	Categories = {};
 
+	Categories.init = function() {
 		var modified_categories = {};
 
 		function modified(el) {
 			var cid = $(el).parents('li').attr('data-cid');
-
+			if(cid) {
 				modified_categories[cid] = modified_categories[cid] || {};
-	modified_categories[cid][el.getAttribute('data-name')] = el.value;
+				modified_categories[cid][$(el).attr('data-name')] = $(el).val();
+			}
 		}
 
 		function save() {
@@ -14,25 +18,29 @@ function save() {
 		}
 
 		function select_icon(el) {
-	var selected = el.className.replace(' icon-2x', '');
+			var selected = el.attr('class').replace(' icon-2x', '');
 			jQuery('#icons .selected').removeClass('selected');
+			if (selected)
 				jQuery('#icons .' + selected).parent().addClass('selected');
 
 
 			bootbox.confirm('<h2>Select an icon.</h2>' + document.getElementById('icons').innerHTML, function(confirm) {
 				if (confirm) {
 					var iconClass = jQuery('.bootbox .selected').children(':first').attr('class');
-			el.className = iconClass + ' icon icon-2x';
-			el.value = iconClass;
+					el.attr('class', iconClass + ' icon-2x');
+					el.val(iconClass);
+					el.attr('value', iconClass);
 
 					modified(el);
 				}
 			});
 
-	jQuery('.bootbox .span3').on('click', function() {
+			setTimeout(function() { //bootbox was rewritten for BS3 and I had to add this timeout for the previous code to work. TODO: to look into
+				jQuery('.bootbox .col-md-3').on('click', function() {
 					jQuery('.bootbox .selected').removeClass('selected');
 					jQuery(this).addClass('selected');
 				});
+			}, 500);
 		}
 
 
@@ -40,14 +48,58 @@ function update_blockclass(el) {
 			el.parentNode.parentNode.className = 'entry-row ' + el.value;
 		}
 
-jQuery('#entry-container').sortable();
+		function updateCategoryOrders() {
+			var categories = $('.admin-categories #entry-container').children();
+			for(var i=0; i<categories.length; ++i) {
+				var input = $(categories[i]).find('input[data-name="order"]');
+
+				input.val(i+1).attr('data-value', i+1);
+				modified(input);
+			}
+		}
+
+		jQuery('#entry-container').sortable({
+			stop: function( event, ui ) {
+				updateCategoryOrders();
+			}
+		});
 		jQuery('.blockclass').each(function() {
 			jQuery(this).val(this.getAttribute('data-value'));
 		});
 
 
-//DRY Failure. this needs to go into an ajaxify onready style fn. Currently is copy pasted into every single function so after ACP is off the ground fix asap 
-(function() {
+		function showCreateCategoryModal() {
+			$('#new-category-modal').modal();
+		}
+
+		function createNewCategory() {
+			var category = {
+				name: $('#inputName').val(),
+				description: $('#inputDescription').val(),
+				icon: $('#new-category-modal i').val(),
+				blockclass: $('#inputBlockclass').val()
+			};
+
+			socket.emit('api:admin.categories.create', category, function(err, data) {
+				if (!err) {
+					app.alert({
+						alert_id: 'category_created',
+						title: 'Created',
+						message: 'Category successfully created!',
+						type: 'success',
+						timeout: 2000
+					});
+
+					var html = templates.prepare(templates['admin/categories'].blocks['categories']).parse({
+						categories: [data]
+					});
+					$('#entry-container').append(html);
+
+					$('#new-category-modal').modal('hide');
+				}
+			});
+		}
+
 		jQuery('document').ready(function() {
 			var url = window.location.href,
 				parts = url.split('/'),
@@ -62,9 +114,15 @@ jQuery('.blockclass').each(function() {
 			});
 
 			jQuery('#save').on('click', save);
+			jQuery('#addNew').on('click', showCreateCategoryModal);
+			jQuery('#create-category-btn').on('click', createNewCategory);
 
-		jQuery('.icon').on('click', function(ev) {
-			select_icon(ev.target);
+			jQuery('#entry-container').on('click', '.icon', function(ev) {
+				select_icon($(this).find('i'));
+			});
+
+			jQuery('#new-category-modal').on('click', '.icon', function(ev) {
+				select_icon($(this).find('i'));
 			});
 
 			jQuery('.blockclass').on('change', function(ev) {
@@ -84,7 +142,7 @@ jQuery('.blockclass').each(function() {
 
 			});
 
-		jQuery('.entry-row button').on('click', function(ev) {
+			jQuery('#entry-container').on('click', '.disable-btn', function(ev) {
 				var btn = jQuery(this);
 				var categoryRow = btn.parents('li');
 				var cid = categoryRow.attr('data-cid');
@@ -99,5 +157,7 @@ jQuery('.blockclass').each(function() {
 			});
 
 		});
+	};
 
-}());
+	return Categories;
+});

public/src/forum/admin/footer.js

@@ -1,78 +1,3 @@
-
-
-
-var nodebb_admin = (function(nodebb_admin) {
-	
-	nodebb_admin.config = undefined;
-	
-	nodebb_admin.prepare = function() {
-		// Come back in 500ms if the config isn't ready yet
-		if (nodebb_admin.config === undefined) {
-			setTimeout(function() {
-				nodebb_admin.prepare();
-			}, 500);
-			return;
-		}
-
-		// Populate the fields on the page from the config
-		var fields = document.querySelectorAll('#content [data-field]'),
-			numFields = fields.length,
-			saveBtn = document.getElementById('save'),
-			x, key, inputType;
-		for(x=0;x<numFields;x++) {
-			key = fields[x].getAttribute('data-field');
-			inputType = fields[x].getAttribute('type');
-			if (fields[x].nodeName === 'INPUT') {
-				if (nodebb_admin.config[key]) {
-					switch(inputType) {
-						case 'text':
-						case 'textarea':
-						case 'number':
-							fields[x].value = nodebb_admin.config[key];
-						break;
-
-						case 'checkbox':
-							fields[x].checked = nodebb_admin.config[key] === '1' ? true : false;
-						break;
-					}
-				}
-			} else if (fields[x].nodeName === 'TEXTAREA') {
-				if (nodebb_admin.config[key]) fields[x].value = nodebb_admin.config[key];
-			}
-		}
-
-		saveBtn.addEventListener('click', function(e) {
-			var key, value;
-			e.preventDefault();
-
-			for(x=0;x<numFields;x++) {
-				key = fields[x].getAttribute('data-field');
-				if (fields[x].nodeName === 'INPUT') {
-					inputType = fields[x].getAttribute('type');
-					switch(inputType) {
-						case 'text':
-						case 'number':
-							value = fields[x].value;
-						break;
-
-						case 'checkbox':
-							value = fields[x].checked ? '1' : '0';
-						break;
-					}
-				} else if (fields[x].nodeName === 'TEXTAREA') {
-					value = fields[x].value;
-				}
-
-				socket.emit('api:config.set', { key: key, value: value });
-			}
-		});
-	}
-	
-	nodebb_admin.remove = function(key) {
-		socket.emit('api:config.remove', key);		
-	}	
-
-
 jQuery('document').ready(function() {
 	// On menu click, change "active" state
 	var menuEl = document.querySelector('.sidebar-nav'),
@@ -91,7 +16,7 @@ var nodebb_admin = (function(nodebb_admin) {
 });
 
 socket.once('api:config.get', function(config) {
-		nodebb_admin.config = config;
+	app.config = config;
 });
 
 socket.emit('api:config.get');
@@ -102,7 +27,7 @@ var nodebb_admin = (function(nodebb_admin) {
 			alert_id: 'config_status',
 			timeout: 2500,
 			title: 'Changes Saved',
-				message: 'Your changes to the NodeBB configuration have been saved. You may have to restart NodeBB to see the changes.',
+			message: 'Your changes to the NodeBB configuration have been saved.',
 			type: 'success'
 		});
 	} else {
@@ -111,12 +36,7 @@ var nodebb_admin = (function(nodebb_admin) {
 			timeout: 2500,
 			title: 'Changes Not Saved',
 			message: 'NodeBB encountered a problem saving your changes',
-				type: 'error'
+			type: 'danger'
 		});
 	}
 });
-	
-	return nodebb_admin;
-	
-}(nodebb_admin || {}));
-

public/src/forum/admin/groups.js

@@ -0,0 +1,202 @@
+define(function() {
+	var	Groups = {};
+
+	Groups.init = function() {
+		var createEl = document.getElementById('create'),
+			createModal = $('#create-modal'),
+			createSubmitBtn = document.getElementById('create-modal-go'),
+			createNameEl = $('#create-group-name'),
+			detailsModal = $('#group-details-modal'),
+			detailsSearch = detailsModal.find('#group-details-search'),
+			searchResults = detailsModal.find('#group-details-search-results'),
+			groupMembersEl = detailsModal.find('ul.current_members'),
+			detailsModalSave = detailsModal.find('.btn-primary'),
+			searchDelay = undefined,
+			listEl = $('#groups-list');
+
+		createEl.addEventListener('click', function() {
+			createModal.modal('show');
+			setTimeout(function() {
+				createNameEl.focus();
+			}, 250);
+		}, false);
+
+		createSubmitBtn.addEventListener('click', function() {
+			var submitObj = {
+				name: createNameEl.val(),
+				description: $('#create-group-desc').val()
+			},
+				errorEl = $('#create-modal-error'),
+				errorText;
+
+			socket.emit('api:groups.create', submitObj, function(err, data) {
+				if (err) {
+					switch (err) {
+						case 'group-exists':
+							errorText = '<strong>Please choose another name</strong><p>There seems to be a group with this name already.</p>';
+							break;
+						case 'name-too-short':
+							errorText = '<strong>Please specify a grou name</strong><p>A group name is required for administrative purposes.</p>';
+							break;
+						default:
+							errorText = '<strong>Uh-Oh</strong><p>There was a problem creating your group. Please try again later!</p>';
+							break;
+					}
+
+					errorEl.html(errorText).removeClass('hide');
+				} else {
+					createModal.modal('hide');
+					errorEl.addClass('hide');
+					createNameEl.val('');
+					ajaxify.go('admin/groups');
+				}
+			});
+		});
+
+		listEl.on('click', 'button[data-action]', function() {
+			var action = this.getAttribute('data-action'),
+				gid = $(this).parents('li[data-gid]').attr('data-gid');
+
+			switch (action) {
+				case 'delete':
+					bootbox.confirm('Are you sure you wish to delete this group?', function(confirm) {
+						if (confirm) {
+							socket.emit('api:groups.delete', gid, function(err, data) {
+								if (data === 'OK') ajaxify.go('admin/groups');
+							});
+						}
+					});
+					break;
+				case 'members':
+					socket.emit('api:groups.get', gid, function(err, groupObj) {
+						var formEl = detailsModal.find('form'),
+							nameEl = formEl.find('#change-group-name'),
+							descEl = formEl.find('#change-group-desc'),
+							memberIcon = document.createElement('li'),
+							numMembers = groupObj.members.length,
+							membersFrag = document.createDocumentFragment(),
+							memberIconImg, x;
+
+
+						nameEl.val(groupObj.name);
+						descEl.val(groupObj.description);
+
+						// Member list
+						memberIcon.innerHTML = '<img /><span></span>';
+						memberIconImg = memberIcon.querySelector('img');
+						memberIconLabel = memberIcon.querySelector('span');
+						if (numMembers > 0) {
+							for (x = 0; x < numMembers; x++) {
+								memberIconImg.src = groupObj.members[x].picture;
+								memberIconLabel.innerHTML = groupObj.members[x].username;
+								memberIcon.setAttribute('data-uid', groupObj.members[x].uid);
+								membersFrag.appendChild(memberIcon.cloneNode(true));
+							}
+							groupMembersEl.html('');
+							groupMembersEl[0].appendChild(membersFrag);
+						}
+
+						detailsModal.attr('data-gid', groupObj.gid);
+						detailsModal.modal('show');
+					});
+					break;
+			}
+		});
+
+		detailsSearch.on('keyup', function() {
+			var searchEl = this;
+
+			if (searchDelay) clearTimeout(searchDelay);
+
+			searchDelay = setTimeout(function() {
+				var searchText = searchEl.value,
+					resultsEl = document.getElementById('group-details-search-results'),
+					foundUser = document.createElement('li'),
+					foundUserImg, foundUserLabel;
+
+				foundUser.innerHTML = '<img /><span></span>';
+				foundUserImg = foundUser.getElementsByTagName('img')[0];
+				foundUserLabel = foundUser.getElementsByTagName('span')[0];
+
+				socket.emit('api:admin.user.search', searchText, function(err, results) {
+					if (!err && results && results.length > 0) {
+						var numResults = results.length,
+							resultsSlug = document.createDocumentFragment(),
+							x;
+						if (numResults > 4) numResults = 4;
+						for (x = 0; x < numResults; x++) {
+							foundUserImg.src = results[x].picture;
+							foundUserLabel.innerHTML = results[x].username;
+							foundUser.setAttribute('title', results[x].username);
+							foundUser.setAttribute('data-uid', results[x].uid);
+							resultsSlug.appendChild(foundUser.cloneNode(true));
+						}
+
+						resultsEl.innerHTML = '';
+						resultsEl.appendChild(resultsSlug);
+					} else resultsEl.innerHTML = '<li>No Users Found</li>';
+				});
+			}, 200);
+		});
+
+		searchResults.on('click', 'li[data-uid]', function() {
+			var userLabel = this,
+				uid = parseInt(this.getAttribute('data-uid')),
+				gid = detailsModal.attr('data-gid'),
+				members = [];
+
+			groupMembersEl.find('li[data-uid]').each(function() {
+				members.push(parseInt(this.getAttribute('data-uid')));
+			});
+
+			if (members.indexOf(uid) === -1) {
+				socket.emit('api:groups.join', {
+					gid: gid,
+					uid: uid
+				}, function(err, data) {
+					if (!err) {
+						groupMembersEl.append(userLabel.cloneNode(true));
+					}
+				});
+			}
+		});
+
+		groupMembersEl.on('click', 'li[data-uid]', function() {
+			var uid = this.getAttribute('data-uid'),
+				gid = detailsModal.attr('data-gid');
+
+			socket.emit('api:groups.leave', {
+				gid: gid,
+				uid: uid
+			}, function(err, data) {
+				if (!err) {
+					groupMembersEl.find('li[data-uid="' + uid + '"]').remove();
+				}
+			});
+		});
+
+		detailsModalSave.on('click', function() {
+			var formEl = detailsModal.find('form'),
+				nameEl = formEl.find('#change-group-name'),
+				descEl = formEl.find('#change-group-desc'),
+				gid = detailsModal.attr('data-gid');
+
+			socket.emit('api:groups.update', {
+				gid: gid,
+				values: {
+					name: nameEl.val(),
+					description: descEl.val()
+				}
+			}, function(err) {
+				if (!err) {
+					detailsModal.on('hidden.bs.modal', function() {
+						ajaxify.go('admin/groups');
+					});
+					detailsModal.modal('hide');
+				}
+			});
+		});
+	};
+
+	return Groups;
+});

public/src/forum/admin/index.js

@@ -1,6 +1,7 @@
+define(function() {
+	var	Admin = {};
 
-(function() {
-	
+		Admin.init = function() {
 		ajaxify.register_events(['api:get_all_rooms']);
 		socket.on('api:get_all_rooms', function(data) {
 
@@ -21,5 +22,7 @@
 
 		app.enter_room('admin');
 		socket.emit('api:get_all_rooms');
+	};
 
-}());
+	return Admin;
+});

public/src/forum/admin/plugins.js

@@ -1,7 +1,5 @@
-var	nodebb_admin = nodebb_admin || {};
-
-(function() {
-	var	plugins = {
+define(function() {
+	var Plugins = {
 		init: function() {
 			var pluginsList = $('.plugins'),
 				numPlugins = pluginsList[0].querySelectorAll('li').length,
@@ -21,7 +19,7 @@ var	nodebb_admin = nodebb_admin || {};
 						alert_id: 'plugin_toggled_' + status.id,
 						title: 'Plugin Enabled',
 						message: 'You may need to restart NodeBB in order for these changes to be reflected.',
-							type: 'notify',
+						type: 'warning',
 						timeout: 5000
 					})
 				});
@@ -31,8 +29,5 @@ var	nodebb_admin = nodebb_admin || {};
 		}
 	};
 
-	jQuery(document).ready(function() {
-		nodebb_admin.plugins = plugins;
-		nodebb_admin.plugins.init();
+	return Plugins;
 });
-})();

public/src/forum/admin/settings.js

@@ -0,0 +1,88 @@
+define(['uploader'], function(uploader) {
+	var Settings = {};
+
+	Settings.init = function() {
+		Settings.prepare();
+	};
+
+	Settings.prepare = function() {
+		// Come back in 125ms if the config isn't ready yet
+		if (!app.config) {
+			setTimeout(function() {
+				Settings.prepare();
+			}, 125);
+			return;
+		}
+
+		// Populate the fields on the page from the config
+		var fields = document.querySelectorAll('#content [data-field]'),
+			numFields = fields.length,
+			saveBtn = document.getElementById('save'),
+			x, key, inputType;
+		for (x = 0; x < numFields; x++) {
+			key = fields[x].getAttribute('data-field');
+			inputType = fields[x].getAttribute('type');
+			if (fields[x].nodeName === 'INPUT') {
+				if (app.config[key]) {
+					switch (inputType) {
+						case 'text':
+						case 'textarea':
+						case 'number':
+							fields[x].value = app.config[key];
+							break;
+
+						case 'checkbox':
+							fields[x].checked = app.config[key] === '1' ? true : false;
+							break;
+					}
+				}
+			} else if (fields[x].nodeName === 'TEXTAREA') {
+				if (app.config[key]) fields[x].value = app.config[key];
+			}
+		}
+
+		saveBtn.addEventListener('click', function(e) {
+			var key, value;
+			e.preventDefault();
+
+			for (x = 0; x < numFields; x++) {
+				key = fields[x].getAttribute('data-field');
+				if (fields[x].nodeName === 'INPUT') {
+					inputType = fields[x].getAttribute('type');
+					switch (inputType) {
+						case 'text':
+						case 'number':
+							value = fields[x].value;
+							break;
+
+						case 'checkbox':
+							value = fields[x].checked ? '1' : '0';
+							break;
+					}
+				} else if (fields[x].nodeName === 'TEXTAREA') {
+					value = fields[x].value;
+				}
+
+				socket.emit('api:config.set', {
+					key: key,
+					value: value
+				});
+			}
+		});
+
+		$('#uploadLogoBtn').on('click', function() {
+
+			uploader.open(config.relative_path + '/admin/uploadlogo', function(image) {
+				$('#logoUrl').val(image);
+			});
+
+			uploader.hideAlerts();
+		});
+	};
+
+	Settings.remove = function(key) {
+		socket.emit('api:config.remove', key);
+	};
+
+	return Settings;
+});

public/src/forum/admin/themes.js

@@ -1,45 +1,9 @@
+define(function() {
+	var Themes = {};
 
-
-var nodebb_admin = (function(nodebb_admin) {
-
-	var themes = {};
-
-	themes.render = function(bootswatch) {
-		var themeFrag = document.createDocumentFragment(),
-			themeEl = document.createElement('li'),
-			themeContainer = document.querySelector('#bootstrap_themes'),
-			numThemes = bootswatch.themes.length;
-
-		for(var x=0;x<numThemes;x++) {
-			var theme = bootswatch.themes[x];
-			themeEl.setAttribute('data-css', theme.cssMin);
-			themeEl.setAttribute('data-theme', theme.name);
-			themeEl.innerHTML =	'<img src="' + theme.thumbnail + '" />' +
-								'<div>' +
-									'<div class="pull-right">' +
-										'<button class="btn btn-primary" data-action="use">Use</button> ' +
-										'<button class="btn" data-action="preview">Preview</button>' +
-									'</div>' +
-									'<h4>' + theme.name + '</h4>' +
-									'<p>' + theme.description + '</p>' +
-								'</div>' +
-								'<div class="clear">';
-			themeFrag.appendChild(themeEl.cloneNode(true));
-		}
-		themeContainer.innerHTML = '';
-		themeContainer.appendChild(themeFrag);
-	}
-	
-	nodebb_admin.themes = themes;
-	
-	return nodebb_admin;
-	
-}(nodebb_admin || {}));
-
-
-(function() {
+	Themes.init = function() {
 		var scriptEl = document.createElement('script');
-	scriptEl.src = 'http://api.bootswatch.com/2/?callback=nodebb_admin.themes.render';
+		scriptEl.src = 'http://api.bootswatch.com/3/?callback=bootswatchListener';
 		document.body.appendChild(scriptEl);
 
 		var bootstrapThemeContainer = document.querySelector('#bootstrap_themes'),
@@ -55,13 +19,22 @@ var nodebb_admin = (function(nodebb_admin) {
 						break;
 						case 'use':
 							var parentEl = $(e.target).parents('li'),
+								themeType = parentEl.attr('data-type'),
 								cssSrc = parentEl.attr('data-css'),
-							cssName = parentEl.attr('data-theme');
-						socket.emit('api:config.set', {
-							key: 'theme:id', value: 'bootswatch:' + cssName
+								themeId = parentEl.attr('data-theme');
+
+							socket.emit('api:admin.theme.set', {
+								type: themeType,
+								id: themeId,
+								src: cssSrc
+							}, function(err) {
+								app.alert({
+									alert_id: 'admin:theme',
+									type: 'success',
+									title: 'Theme Changed',
+									message: 'You have successfully changed your NodeBB\'s theme. Please restart to see the changes.',
+									timeout: 2500
 								});
-						socket.emit('api:config.set', {
-							key: 'theme:src', value: cssSrc
 							});
 						break;
 					}
@@ -74,8 +47,18 @@ var nodebb_admin = (function(nodebb_admin) {
 		revertEl.addEventListener('click', function() {
 			bootbox.confirm('Are you sure you wish to remove the custom theme and restore the NodeBB default theme?', function(confirm) {
 				if (confirm) {
-				nodebb_admin.remove('theme:id');
-				nodebb_admin.remove('theme:src');
+					socket.emit('api:admin.theme.set', {
+						type: 'local',
+						id: 'nodebb-theme-cerulean'
+					}, function(err) {
+						app.alert({
+							alert_id: 'admin:theme',
+							type: 'success',
+							title: 'Theme Changed',
+							message: 'You have successfully reverted your NodeBB back to it\'s default theme. Please restart to see the changes.',
+							timeout: 3500
+						});
+					});
 				}
 			});
 		}, false);
@@ -85,16 +68,16 @@ var nodebb_admin = (function(nodebb_admin) {
 			var instListEl = document.getElementById('installed_themes'),
 				themeFrag = document.createDocumentFragment(),
 				liEl = document.createElement('li');
+				liEl.setAttribute('data-type', 'local');
 
 			if (themes.length > 0) {
 				for (var x = 0, numThemes = themes.length; x < numThemes; x++) {
 					liEl.setAttribute('data-theme', themes[x].id);
-				liEl.setAttribute('data-css', themes[x].src);
-				liEl.innerHTML =	'<img src="' + themes[x].screenshot + '" />' +
+					liEl.innerHTML = '<img src="' + (themes[x].screenshot ? '/css/previews/' + themes[x].id : RELATIVE_PATH + '/images/themes/default.png') + '" />' +
 						'<div>' +
 						'<div class="pull-right">' +
 						'<button class="btn btn-primary" data-action="use">Use</button> ' +
-											'<button class="btn" data-action="preview">Preview</button>' +
+						'<button class="btn btn-default" data-action="preview">Preview</button>' +
 						'</div>' +
 						'<h4>' + themes[x].name + '</h4>' +
 						'<p>' +
@@ -115,4 +98,35 @@ var nodebb_admin = (function(nodebb_admin) {
 			instListEl.innerHTML = '';
 			instListEl.appendChild(themeFrag);
 		});
-})();
+	}
+
+	Themes.render = function(bootswatch) {
+		var themeFrag = document.createDocumentFragment(),
+			themeEl = document.createElement('li'),
+			themeContainer = document.querySelector('#bootstrap_themes'),
+			numThemes = bootswatch.themes.length;
+
+		themeEl.setAttribute('data-type', 'bootswatch');
+
+		for (var x = 0; x < numThemes; x++) {
+			var theme = bootswatch.themes[x];
+			themeEl.setAttribute('data-css', theme.cssMin);
+			themeEl.setAttribute('data-theme', theme.name);
+			themeEl.innerHTML = '<img src="' + theme.thumbnail + '" />' +
+				'<div>' +
+				'<div class="pull-right">' +
+				'<button class="btn btn-primary" data-action="use">Use</button> ' +
+				'<button class="btn btn-default" data-action="preview">Preview</button>' +
+				'</div>' +
+				'<h4>' + theme.name + '</h4>' +
+				'<p>' + theme.description + '</p>' +
+				'</div>' +
+				'<div class="clear">';
+			themeFrag.appendChild(themeEl.cloneNode(true));
+		}
+		themeContainer.innerHTML = '';
+		themeContainer.appendChild(themeFrag);
+	}
+
+	return Themes;
+});

public/src/forum/admin/topics.js

@@ -1,7 +1,12 @@
-$(document).ready(function() {
+define(function() {
+	var	Topics = {};
+
+	Topics.init = function() {
 		var topicsListEl = document.querySelector('.topics'),
 			loadMoreEl = document.getElementById('topics_loadmore');
 
+		this.resolveButtonStates();
+
 		$(topicsListEl).on('click', '[data-action]', function() {
 			var $this = $(this),
 				action = this.getAttribute('data-action'),
@@ -9,16 +14,28 @@ $(document).ready(function() {
 
 			switch (action) {
 				case 'pin':
-				if (!$this.hasClass('active')) socket.emit('api:topic.pin', { tid: tid });
-				else socket.emit('api:topic.unpin', { tid: tid });
+					if (!$this.hasClass('active')) socket.emit('api:topic.pin', {
+						tid: tid
+					});
+					else socket.emit('api:topic.unpin', {
+						tid: tid
+					});
 					break;
 				case 'lock':
-				if (!$this.hasClass('active')) socket.emit('api:topic.lock', { tid: tid });
-				else socket.emit('api:topic.unlock', { tid: tid });
+					if (!$this.hasClass('active')) socket.emit('api:topic.lock', {
+						tid: tid
+					});
+					else socket.emit('api:topic.unlock', {
+						tid: tid
+					});
 					break;
 				case 'delete':
-				if (!$this.hasClass('active')) socket.emit('api:topic.delete', { tid: tid });
-				else socket.emit('api:topic.restore', { tid: tid });
+					if (!$this.hasClass('active')) socket.emit('api:topic.delete', {
+						tid: tid
+					});
+					else socket.emit('api:topic.restore', {
+						tid: tid
+					});
 					break;
 			}
 		});
@@ -42,8 +59,15 @@ $(document).ready(function() {
 							}),
 							topicsListEl = document.querySelector('.topics');
 
+						// Fix relative paths
+						html = html.replace(/\{relative_path\}/g, RELATIVE_PATH);
+
 						topicsListEl.innerHTML += html;
+
+						Topics.resolveButtonStates();
+
 						btnEl.innerHTML = 'Load More Topics';
+						$('span.timeago').timeago();
 					} else {
 						// Exhausted all topics
 						btnEl.className += ' disabled';
@@ -53,19 +77,6 @@ $(document).ready(function() {
 			}
 		}, false);
 
-	// Resolve proper button state for all topics
-	var	topicEls = topicsListEl.querySelectorAll('li'),
-		numTopics = topicEls.length;
-	for(var x=0;x<numTopics;x++) {
-		if (topicEls[x].getAttribute('data-pinned') === '1') topicEls[x].querySelector('[data-action="pin"]').className += ' active';
-		if (topicEls[x].getAttribute('data-locked') === '1') topicEls[x].querySelector('[data-action="lock"]').className += ' active';
-		if (topicEls[x].getAttribute('data-deleted') === '1') topicEls[x].querySelector('[data-action="delete"]').className += ' active';
-		topicEls[x].removeAttribute('data-pinned');
-		topicEls[x].removeAttribute('data-locked');
-		topicEls[x].removeAttribute('data-deleted');
-	}
-});
-
 		socket.on('api:topic.pin', function(response) {
 			if (response.status === 'ok') {
 				var btnEl = document.querySelector('li[data-tid="' + response.tid + '"] button[data-action="pin"]');
@@ -103,6 +114,7 @@ socket.on('api:topic.delete', function(response) {
 				var btnEl = document.querySelector('li[data-tid="' + response.tid + '"] button[data-action="delete"]');
 
 				$(btnEl).addClass('active');
+				$(btnEl).siblings('[data-action="lock"]').addClass('active');
 			}
 		});
 
@@ -111,5 +123,31 @@ socket.on('api:topic.restore', function(response) {
 				var btnEl = document.querySelector('li[data-tid="' + response.tid + '"] button[data-action="delete"]');
 
 				$(btnEl).removeClass('active');
+				$(btnEl).siblings('[data-action="lock"]').removeClass('active');
 			}
 		});
+	};
+
+	Topics.resolveButtonStates = function() {
+		// Resolve proper button state for all topics
+		var topicsListEl = document.querySelector('.topics'),
+			topicEls = topicsListEl.querySelectorAll('li'),
+			numTopics = topicEls.length;
+		for (var x = 0; x < numTopics; x++) {
+			if (topicEls[x].getAttribute('data-pinned') === '1') {
+				topicEls[x].querySelector('[data-action="pin"]').className += ' active';
+				topicEls[x].removeAttribute('data-pinned');
+			}
+			if (topicEls[x].getAttribute('data-locked') === '1') {
+				topicEls[x].querySelector('[data-action="lock"]').className += ' active';
+				topicEls[x].removeAttribute('data-locked');
+			}
+			if (topicEls[x].getAttribute('data-deleted') === '1') {
+				topicEls[x].querySelector('[data-action="delete"]').className += ' active';
+				topicEls[x].removeAttribute('data-deleted');
+			}
+		}
+	}
+
+	return Topics;
+});

public/src/forum/admin/users.js

@@ -1,7 +1,8 @@
+define(function() {
+	var Users = {};
 
-(function() {
-
-	function initUsers() {
+	Users.init = function() {
+		var yourid = templates.get('yourid');
 
 		function isUserAdmin(element) {
 			var parent = $(element).parents('.users-box');
@@ -18,83 +19,25 @@
 			return parent.attr('data-uid');
 		}
 
-		jQuery('.admin-btn').each(function(index, element) {
-			var adminBtn = $(element);
-			var isAdmin = isUserAdmin(adminBtn);
-			
-			if(isAdmin)
-				adminBtn.addClass('btn-success');
-			else
-				adminBtn.removeClass('btn-success');
-
-		});
-
-		jQuery('.delete-btn').each(function(index, element) {
-			var deleteBtn = $(element);
-			var isAdmin = isUserAdmin(deleteBtn);
-			
-			if(isAdmin)
-				deleteBtn.addClass('disabled');
-			else
-				deleteBtn.show();
-		});
-
+		function updateUserButtons() {
 			jQuery('.ban-btn').each(function(index, element) {
 				var banBtn = $(element);
-			var isAdmin = isUserAdmin(banBtn);
-			var isBanned = isUserBanned(banBtn);
-			
-			if(isAdmin)
+				var uid = getUID(banBtn);
+				if (isUserAdmin(banBtn) || uid === yourid)
 					banBtn.addClass('disabled');
-			else if(isBanned)
+				else if (isUserBanned(banBtn))
 					banBtn.addClass('btn-warning');
 				else
 					banBtn.removeClass('btn-warning');
 
 			});
-
-		jQuery('.admin-btn').on('click', function() {
-			var adminBtn = $(this);
-			var isAdmin = isUserAdmin(adminBtn);
-			var parent = adminBtn.parents('.users-box');
-			var uid = getUID(adminBtn);
-
-			if(isAdmin) {
-				socket.emit('api:admin.user.removeAdmin', uid);		
-				adminBtn.removeClass('btn-success');
-				parent.find('.delete-btn').removeClass('disabled');
-				parent.attr('data-admin', 0);
-			}
-			else {
-				bootbox.confirm('Do you really want to make "' + parent.attr('data-username') +'" an admin?', function(confirm) {
-					if(confirm) {
-						socket.emit('api:admin.user.makeAdmin', uid);
-						adminBtn.addClass('btn-success');
-						parent.find('.delete-btn').addClass('disabled');
-						parent.attr('data-admin', 1);
-					}
-				});
 		}
 
-			return false;
-		});
+		function initUsers() {
 
-		jQuery('.delete-btn').on('click', function() {
-			var deleteBtn = $(this);
-			var isAdmin = isUserAdmin(deleteBtn);
-			var parent = deleteBtn.parents('.users-box');
-			var uid = getUID(deleteBtn);
+			updateUserButtons();
 
-			if(!isAdmin) {
-				bootbox.confirm('Do you really want to delete "' + parent.attr('data-username') +'"?', function(confirm) {
-					socket.emit('api:admin.user.deleteUser', uid);		
-				});
-			}
-			
-			return false;
-		});
-
-		jQuery('.ban-btn').on('click', function() {
+			$('#users-container').on('click', '.ban-btn', function() {
 				var banBtn = $(this);
 				var isAdmin = isUserAdmin(banBtn);
 				var isBanned = isUserBanned(banBtn);
@@ -108,9 +51,11 @@
 						parent.attr('data-banned', 0);
 					} else {
 						bootbox.confirm('Do you really want to ban "' + parent.attr('data-username') + '"?', function(confirm) {
+							if (confirm) {
 								socket.emit('api:admin.user.banUser', uid);
 								banBtn.addClass('btn-warning');
 								parent.attr('data-banned', 1);
+							}
 						});
 					}
 				}
@@ -122,8 +67,7 @@
 
 		jQuery('document').ready(function() {
 
-		var yourid = templates.get('yourid'),
-			timeoutId = 0,
+			var timeoutId = 0,
 				loadingMoreUsers = false;
 
 			var url = window.location.href,
@@ -169,22 +113,24 @@
 				if (data && data.length === 0) {
 					$('#user-notfound-notify').html('User not found!')
 						.show()
-					.addClass('label-important')
+						.addClass('label-danger')
 						.removeClass('label-success');
-			}
-			else {
+				} else {
 					$('#user-notfound-notify').html(data.length + ' user' + (data.length > 1 ? 's' : '') + ' found!')
 						.show()
 						.addClass('label-success')
-					.removeClass('label-important');
+						.removeClass('label-danger');
 				}
 
 				initUsers();
 			});
 
 			function onUsersLoaded(users) {
-			var html = templates.prepare(templates['admin/users'].blocks['users']).parse({ users: users });
+				var html = templates.prepare(templates['admin/users'].blocks['users']).parse({
+					users: users
+				});
 				$('#users-container').append(html);
+				updateUserButtons();
 			}
 
 			function loadMoreUsers() {
@@ -222,5 +168,7 @@
 			});
 
 		});
+	};
 
-}());
+	return Users;
+});

public/src/forum/category.js

@@ -1,9 +1,12 @@
-(function() {
+define(function () {
+	var	Category = {};
+
+	Category.init = function() {
 		var	cid = templates.get('category_id'),
 			room = 'category_' + cid,
-		twitterEl = document.getElementById('twitter-intent'),
-		facebookEl = document.getElementById('facebook-share'),
-		googleEl = document.getElementById('google-share'),
+			twitterEl = jQuery('#twitter-intent'),
+			facebookEl = jQuery('#facebook-share'),
+			googleEl = jQuery('#google-share'),
 			twitter_url = templates.get('twitter-intent-url'),
 			facebook_url = templates.get('facebook-share-url'),
 			google_url = templates.get('google-share-url'),
@@ -11,60 +14,30 @@
 
 		app.enter_room(room);
 
-	twitterEl.addEventListener('click', function() {
+		twitterEl.on('click', function () {
 			window.open(twitter_url, '_blank', 'width=550,height=420,scrollbars=no,status=no');
 			return false;
-	}, false);
-	facebookEl.addEventListener('click', function() {
+		});
+		facebookEl.on('click', function () {
 			window.open(facebook_url, '_blank', 'width=626,height=436,scrollbars=no,status=no');
 			return false;
-	}, false);
-	googleEl.addEventListener('click', function() {
+		});
+		googleEl.on('click', function () {
 			window.open(google_url, '_blank', 'width=500,height=570,scrollbars=no,status=no');
 			return false;
-	}, false);
+		});
 
-	var new_post = document.getElementById('new_post');
-	new_post.onclick = function() {
+		$('#new_post').on('click', function () {
 			require(['composer'], function (cmp) {
 				cmp.push(0, cid);
 			});
-	}
+		});
 
 		ajaxify.register_events([
 			'event:new_topic'
 		]);
 
-	function onNewTopic(data) {
-		var html = templates.prepare(templates['category'].blocks['topics']).parse({ topics: [data] }),
-			topic = document.createElement('div'),
-			container = document.getElementById('topics-container'),
-			topics = document.querySelectorAll('#topics-container a'),
-			numTopics = topics.length,
-			x;
-
-		jQuery('#topics-container, .category-sidebar').removeClass('hidden');
-		jQuery('#category-no-topics').remove();
-
-		topic.innerHTML = html;
-		topic = topic.querySelector('a');
-
-		if (numTopics > 0) {
-			for(x=0;x<numTopics;x++) {
-				if (topics[x].querySelector('.icon-pushpin')) continue;
-				container.insertBefore(topic, topics[x]);
-				$(topic).hide().fadeIn('slow');
-				break;
-			}
-		} else {
-			container.insertBefore(topic, null);
-			$(topic).hide().fadeIn('slow');
-		}
-
-		socket.emit('api:categories.getRecentReplies', cid);
-	}
-
-	socket.on('event:new_topic', onNewTopic);
+		socket.on('event:new_topic', Category.onNewTopic);
 
 		socket.emit('api:categories.getRecentReplies', cid);
 		socket.on('api:categories.getRecentReplies', function (posts) {
@@ -79,56 +52,109 @@
 			var frag = document.createDocumentFragment(),
 				li = document.createElement('li');
 			for (var i = 0, numPosts = posts.length; i < numPosts; i++) {
-			var dateString = utils.relativeTime(posts[i].timestamp);
+
 				li.setAttribute('data-pid', posts[i].pid);
 
 
-			li.innerHTML =	'<a href="/users/' + posts[i].userslug + '"><img title="' + posts[i].username + '" style="width: 48px; height: 48px; /*temporary*/" class="img-polaroid" src="' + posts[i].picture + '" class="" /></a>' +
+				li.innerHTML = '<a href="/user/' + posts[i].userslug + '"><img title="' + posts[i].username + '" style="width: 48px; height: 48px; /*temporary*/" class="img-rounded" src="' + posts[i].picture + '" class="" /></a>' +
 					'<a href="/topic/' + posts[i].topicSlug + '#' + posts[i].pid + '">' +
+					'<strong><span>'+ posts[i].username + '</span></strong>' +
 					'<p>' +
-										'<strong>' + posts[i].username + '</strong>: ' + posts[i].content +
+					posts[i].content +
 					'</p>' +
-									'<span>posted ' + utils.relativeTime(posts[i].timestamp) + ' ago</span>' +
-								'</a>';
+					'</a>' +
+					'<span class="timeago pull-right" title="' + posts[i].relativeTime + '"></span>';
 
 				frag.appendChild(li.cloneNode(true));
 				recent_replies.appendChild(frag);
 			}
+			$('#category_recent_replies span.timeago').timeago();
 		});
 
-	function onTopicsLoaded(topics) {
+		$(window).off('scroll').on('scroll', function (ev) {
+			var bottom = ($(document).height() - $(window).height()) * 0.9;
 
-		var html = templates.prepare(templates['category'].blocks['topics']).parse({ topics: topics }),
+			if ($(window).scrollTop() > bottom && !loadingMoreTopics) {
+				Category.loadMoreTopics(cid);
+			}
+		});
+	};
+
+	Category.onNewTopic = function(data) {
+		var html = templates.prepare(templates['category'].blocks['topics']).parse({
+			topics: [data]
+		}),
+			topic = $(html),
+			container = $('#topics-container'),
+			topics = $('#topics-container').children('.category-item'),
+			numTopics = topics.length;
+
+		jQuery('#topics-container, .category-sidebar').removeClass('hidden');
+		jQuery('#category-no-topics').remove();
+
+		if (numTopics > 0) {
+			for (var x = 0; x < numTopics; x++) {
+				if ($(topics[x]).find('.icon-pushpin').length)
+					continue;
+				topic.insertBefore(topics[x]);
+				topic.hide().fadeIn('slow');
+				break;
+			}
+		} else {
+			container.append(topic);
+			topic.hide().fadeIn('slow');
+		}
+
+		socket.emit('api:categories.getRecentReplies', templates.get('category_id'));
+
+		addActiveUser(data);
+
+		$('#topics-container span.timeago').timeago();
+	}
+
+	function addActiveUser(data) {
+		var activeUser = $('.category-sidebar .active-users').find('a[data-uid="' + data.uid + '"]');
+		if(!activeUser.length) {
+			var newUser = templates.prepare(templates['category'].blocks['active_users']).parse({
+				active_users: [{
+					uid: data.uid,
+					username: data.username,
+					userslug: data.userslug,
+					picture: data.teaser_userpicture
+				}]
+			});
+			$(newUser).appendTo($('.category-sidebar .active-users'));
+		}
+	}
+
+	Category.onTopicsLoaded = function(topics) {
+
+		var html = templates.prepare(templates['category'].blocks['topics']).parse({
+			topics: topics
+		}),
 			container = $('#topics-container');
 
 		jQuery('#topics-container, .category-sidebar').removeClass('hidden');
 		jQuery('#category-no-topics').remove();
 
 		container.append(html);
+
+		$('#topics-container span.timeago').timeago();
 	}
 
 
-
-	function loadMoreTopics(cid) {
+	Category.loadMoreTopics = function(cid) {
 		loadingMoreTopics = true;
 		socket.emit('api:category.loadMore', {
 			cid: cid,
-			after: $('#topics-container').children().length
+			after: $('#topics-container').children('.category-item').length
 		}, function (data) {
 			if (data.topics.length) {
-				onTopicsLoaded(data.topics);
+				Category.onTopicsLoaded(data.topics);
 			}
 			loadingMoreTopics = false;
 		});
 	}
 
-	$(window).off('scroll').on('scroll', function(ev) {
-		var bottom = ($(document).height() - $(window).height()) * 0.9;
-
-		if ($(window).scrollTop() > bottom && !loadingMoreTopics) {
-			loadMoreTopics(cid);
-		}
+	return Category;
 });
-
-
-})();

public/src/forum/favourites.js

@@ -1,11 +1,13 @@
-(function() {
+define(['forum/accountheader'], function(header) {
+	var AccountHeader = {};
 
-	$(document).ready(function() {
+	AccountHeader.init = function() {
+		header.init();
 
 		$('.user-favourite-posts .topic-row').on('click', function() {
 			ajaxify.go($(this).attr('topic-url'));
 		});
+	};
 
+	return AccountHeader;
 });
-
-}());

public/src/forum/followers.js

@@ -1,18 +1,20 @@
-(function() {
+define(['forum/accountheader'], function(header) {
+	var	Followers = {};
+
+	Followers.init = function() {
+		header.init();
 
 		var yourid = templates.get('yourid'),
 			theirid = templates.get('theirid'),
 			followersCount = templates.get('followersCount');
 
-	$(document).ready(function() {
 
 			if (parseInt(followersCount, 10) === 0) {
-			$('#no-followers-notice').show();
+				$('#no-followers-notice').removeClass('hide');
 			}
 
 		app.addCommasToNumbers();
+	};
 
+	return Followers;
 });
-	
-
-}());

public/src/forum/following.js

@@ -1,39 +1,17 @@
-(function() {
+define(['forum/accountheader'], function(header) {
+	var	Following = {};
 
-	var yourid = templates.get('yourid'),
-		theirid = templates.get('theirid'),
-		followingCount = templates.get('followingCount');
+	Following.init = function() {
+		header.init();
 
-	$(document).ready(function() {
+		var followingCount = templates.get('followingCount');
 
 		if (parseInt(followingCount, 10) === 0) {
-			$('#no-following-notice').show();
-		}
-
-
-		if(yourid !== theirid) {
-			$('.unfollow-btn').hide();
-		}
-		else {
-			$('.unfollow-btn').on('click',function() {
-				var unfollowBtn = $(this);
-				var followingUid = $(this).attr('followingUid');
-			
-				socket.emit('api:user.unfollow', {uid: followingUid}, function(success) {
-					var username = unfollowBtn.attr('data-username');
-					if(success) {
-						unfollowBtn.parent().remove();
-						app.alertSuccess('You are no longer following ' + username + '!');
-					} else {
-						app.alertError('There was an error unfollowing ' + username + '!');
-					}
-				});
-				return false;
-			});
+			$('#no-following-notice').removeClass('hide');
 		}
 
 		app.addCommasToNumbers();
+	};
+
+	return Following;
 });
-	
-
-}());

public/src/forum/footer.js

@@ -1,91 +1,65 @@
 (function() {
-	var num_users = document.getElementById('number_of_users'),
-		post_stats = document.getElementById('post_stats'),
-		latest_user = document.getElementById('latest_user'),
-		active_users = document.getElementById('active_users'),
-		user_label = document.getElementById('user_label'),
-		active_record = document.getElementById('active_record'),
-		right_menu = document.getElementById('right-menu');
 
-	socket.emit('user.count', {});
-	socket.on('user.count', function(data) {
-		num_users.innerHTML = "We currently have <b>" + data.count + "</b> registered users.";
+	socket.emit('api:updateHeader', {
+		fields: ['username', 'picture', 'userslug']
 	});
 
-	socket.emit('post.stats');
-	socket.on('post.stats', function(data) {
-		post_stats.innerHTML = "Our users have created <b>" + data.topics + "</b> topics and made <b>" + data.posts + "</b> posts.";
-	});
-
-	socket.emit('user.latest', {});
-	socket.on('user.latest', function(data) {
-		if (data.username == '') {
-			latest_user.innerHTML = '';
-		} else {
-			latest_user.innerHTML = "The most recent user to register is <b><a href='/users/"+data.userslug+"'>" + data.username + "</a></b>.";
-		}
-	});
-
-	socket.emit('api:user.active.get');
-	socket.on('api:user.active.get', function(data) {
-
-		var plural_users = parseInt(data.users) !== 1,
-			plural_anon = parseInt(data.anon) !== 1;
-
-		active_users.innerHTML = 'There ' + (plural_users ? 'are' : 'is') + ' <strong>' + data.users + '</strong> user' + (plural_users ? 's' : '') + ' and <strong>' + data.anon + '</strong> guest' + (plural_anon ? 's' : '') + ' online';
-	});
-
-	socket.emit('api:user.active.get_record');
-	socket.on('api:user.active.get_record', function(data) {
-		active_record.innerHTML = "most users ever online was <strong>" + data.record + "</strong> on <strong>" + (new Date(parseInt(data.timestamp,10))).toUTCString() + "</strong>";
-	});
-
-	socket.emit('api:updateHeader', { fields: ['username', 'picture', 'userslug'] });
-
 	socket.on('api:updateHeader', function(data) {
+		jQuery('#search-button').on('click', function() {
+			jQuery('#search-fields').removeClass('hide').show();
+			jQuery(this).hide();
+			jQuery('#search-fields input').focus()
 
-		var rightMenu = $('#right-menu'),
+			jQuery('#search-form').on('submit', function() {
+				jQuery('#search-fields').hide();
+				jQuery('#search-button').show();
+			});
+
+			$('#search-fields input').on('blur', function() {
+				$('#search-fields').hide();
+				$('#search-button').show();
+			});
+		});
+
+		var loggedInMenu = $('#logged-in-menu'),
 			isLoggedIn = data.uid > 0;
 
 		if (isLoggedIn) {
 			jQuery('.nodebb-loggedin').show();
 			jQuery('.nodebb-loggedout').hide();
 
-			var userLabel = rightMenu.find('#user_label');
+			$('#logged-out-menu').addClass('hide');
+			$('#logged-in-menu').removeClass('hide');
+
+			$('#search-button').show();
+
+			var userLabel = loggedInMenu.find('#user_label');
+
 			if (userLabel.length) {
 				if (data['userslug'])
-					userLabel.attr('href','/users/' + data['userslug']);
+					userLabel.find('#user-profile-link').attr('href', '/user/' + data['userslug']);
 				if (data['picture'])
 					userLabel.find('img').attr('src', data['picture']);
 				if (data['username'])
 					userLabel.find('span').html(data['username']);
-			} else {
-				var userli = $('<li> \
-									<a id="user_label" href="/users/'+data['userslug']+'"> \
-										<img src="'+data['picture']+'"/> \
-										<span>'+data['username']+'</span> \
-									</a> \
-								</li>');
-				rightMenu.append(userli);
 
-				var logoutli = $('<li><a href="' + RELATIVE_PATH + '/logout">Log out</a></li>');
-				rightMenu.append(logoutli);
+				$('#logout-link').on('click', app.logout);
 			}
 		} else {
+			$('#search-button').hide();
+
 			jQuery('.nodebb-loggedin').hide();
 			jQuery('.nodebb-loggedout').show();
 
-			rightMenu.html('');
+			$('#logged-out-menu').removeClass('hide');
+			$('#logged-in-menu').addClass('hide');
 
-			var registerEl = document.createElement('li'),
-				loginEl = document.createElement('li');
-
-			registerEl.innerHTML = '<a href="/register">Register</a>';
-			loginEl.innerHTML = '<a href="/login">Login</a>';
-
-			right_menu.appendChild(registerEl);
-			right_menu.appendChild(loginEl);
 		}
+
+		$('#main-nav a,#user-control-list a,#logged-out-menu .dropdown-menu a').off('click').on('click', function() {
+			if($('.navbar .navbar-collapse').hasClass('in'))
+				$('.navbar-header button').click();
+		});
 	});
 
 	// Notifications dropdown
@@ -103,6 +77,7 @@
 					numUnread = data.unread.length,
 					x;
 				notifList.innerHTML = '';
+				console.log(data);
 				if ((data.read.length + data.unread.length) > 0) {
 					for (x = 0; x < numUnread; x++) {
 						notifEl.setAttribute('data-nid', data.unread[x].nid);
@@ -117,9 +92,17 @@
 						notifFrag.appendChild(notifEl.cloneNode(true));
 					}
 				} else {
+					notifEl.className = 'no-notifs';
 					notifEl.innerHTML = '<a>You have no notifications</a>';
-					notifFrag.appendChild(notifEl);
+					notifFrag.appendChild(notifEl.cloneNode(true));
 				}
+
+				// Add dedicated link to /notifications
+				notifEl.removeAttribute('data-nid');
+				notifEl.className = 'pagelink';
+				notifEl.innerHTML = '<a href="' + RELATIVE_PATH + '/notifications">See all Notifications</a>';
+				notifFrag.appendChild(notifEl.cloneNode(true));
+
 				notifList.appendChild(notifFrag);
 
 				if (data.unread.length > 0) notifIcon.className = 'icon-circle active';
@@ -132,25 +115,33 @@
 			});
 		}
 	});
+
 	notifList.addEventListener('click', function(e) {
 		var target;
 		switch (e.target.nodeName) {
-			case 'SPAN': target = e.target.parentNode.parentNode; break;
-			case 'A': target = e.target.parentNode; break;
-			case 'li': target = e.target; break;
+			case 'SPAN':
+				target = e.target.parentNode.parentNode;
+				break;
+			case 'A':
+				target = e.target.parentNode;
+				break;
+			case 'li':
+				target = e.target;
+				break;
 		}
 		if (target) {
 			var nid = parseInt(target.getAttribute('data-nid'));
 			if (nid > 0) socket.emit('api:notifications.mark_read', nid);
 		}
 	});
+
 	socket.on('event:new_notification', function() {
 		document.querySelector('.notifications a i').className = 'icon-circle active';
 		app.alert({
 			alert_id: 'new_notif',
 			title: 'New notification',
 			message: 'You have unread notifications.',
-			type: 'notify',
+			type: 'warning',
 			timeout: 2000
 		});
 		utils.refreshTitle();
@@ -158,20 +149,20 @@
 
 
 	socket.on('chatMessage', function(data) {
-		var username = data.username;
-		var fromuid = data.fromuid;
-		var message = data.message;
 
 		require(['chat'], function(chat) {
-			var chatModal = chat.createModalIfDoesntExist(username, fromuid);
-			chatModal.show();
-			chat.bringModalToTop(chatModal);
+			var modal = null;
+			if (chat.modalExists(data.fromuid)) {
+				modal = chat.getModal(data.fromuid);
+				chat.appendChatMessage(modal, data.message, data.timestamp);
+			} else {
+				modal = chat.createModal(data.username, data.fromuid);
+			}
 
-			chat.appendChatMessage(chatModal, message);
+			chat.load(modal.attr('UUID'));
 		});
 	});
 
-
 	require(['mobileMenu'], function(mobileMenu) {
 		mobileMenu.init();
 	});

public/src/forum/home.js

@@ -0,0 +1,30 @@
+define(function() {
+	var	home = {};
+
+	home.init = function() {
+
+		ajaxify.register_events([
+			'user.count',
+			'post.stats',
+			'api:user.active.get'
+		]);
+
+		socket.emit('user.count', {});
+		socket.on('user.count', function(data) {
+			$('#stats_users').html(utils.makeNumberHumanReadable(data.count)).attr('title', data.count);
+		});
+
+		socket.emit('post.stats');
+		socket.on('post.stats', function(data) {
+			$('#stats_topics').html(utils.makeNumberHumanReadable(data.topics)).attr('title', data.topics);
+			$('#stats_posts').html(utils.makeNumberHumanReadable(data.posts)).attr('title', data.posts);
+		});
+
+		socket.emit('api:user.active.get');
+		socket.on('api:user.active.get', function(data) {
+			$('#stats_online').html(data.users);
+		});
+	}
+
+	return home;
+});

public/src/forum/login.js

@@ -1,13 +1,18 @@
+define(function() {
+	var	Login = {};
 
-
-(function() {
+	Login.init = function() {
 		// Alternate Logins
 		var altLoginEl = document.querySelector('.alt-logins');
 		altLoginEl.addEventListener('click', function(e) {
 			var target;
 			switch (e.target.nodeName) {
-			case 'LI': target = e.target; break;
-			case 'I': target = e.target.parentNode; break;
+				case 'LI':
+					target = e.target;
+					break;
+				case 'I':
+					target = e.target.parentNode;
+					break;
 			}
 			if (target) {
 				document.location.href = target.getAttribute('data-url');
@@ -27,10 +32,18 @@
 				data: loginData,
 				success: function(data, textStatus, jqXHR) {
 					if (!data.success) {
-					$('#login-error-notify').html(data.message).show();
+						$('#login-error-notify').show();
 					} else {
 						$('#login-error-notify').hide();
+
+						if(!app.previousUrl) { app.previousUrl = '/'; }
+
+						if(app.previousUrl.indexOf('/reset/') != -1)
 							window.location.replace(RELATIVE_PATH + "/?loggedin");
+						else
+							window.location.replace(app.previousUrl + "?loggedin");
+
+						app.loadConfig();
 					}
 				},
 				error: function(data, textStatus, jqXHR) {
@@ -44,5 +57,13 @@
 			return false;
 		});
 
+		$('#login-error-notify button').on('click', function() {
+			$('#login-error-notify').hide();
+			return false;
+		});
+
 		document.querySelector('#content input').focus();
-}());
+	};
+
+	return Login;
+});

public/src/forum/notifications.js

@@ -0,0 +1,31 @@
+define(function() {
+	var Notifications = {};
+
+	Notifications.init = function() {
+		var listEl = $('.notifications-list'),
+			markAllReadEl = document.getElementById('mark-all-notifs-read');
+
+		$('span.timeago').timeago();
+
+		// Allow the user to click anywhere in the LI
+		listEl.on('click', 'li', function(e) {
+			this.querySelector('a').click();
+		});
+
+		// Mark all as read button
+		$(markAllReadEl).click(function() {
+			socket.emit('api:notifications.mark_all_read', {}, function() {
+				ajaxify.go('notifications');
+				app.alert({
+					alert_id: "notifications:mark_all_read",
+					title: "All Notifications Read",
+					message: "Successfully marked all notifications read",
+					type: 'success',
+					timeout: 2500
+				})
+			});
+		});
+	}
+
+	return Notifications;
+});

public/src/forum/recent.js

@@ -1,6 +1,13 @@
-(function() {
-	var loadingMoreTopics = false;
+define(function() {
+	var	Recent = {};
 
+	Recent.newTopicCount = 0;
+	Recent.newPostCount = 0;
+	Recent.loadingMoreTopics = false;
+
+	var active = '';
+
+	Recent.init = function() {
 		app.enter_room('recent_posts');
 
 		ajaxify.register_events([
@@ -8,73 +15,96 @@
 			'event:new_post'
 		]);
 
-	var newTopicCount = 0, newPostCount = 0;
+
+		function getActiveSection() {
+			var url = window.location.href,
+			parts = url.split('/'),
+			active = parts[parts.length - 1];
+			return active;
+		}
+
+		active = getActiveSection();
+
+		jQuery('.nav-pills li').removeClass('active');
+		jQuery('.nav-pills li a').each(function() {
+			if (this.getAttribute('href').match(active)) {
+				jQuery(this.parentNode).addClass('active');
+				return false;
+			}
+		});
 
 		$('#new-topics-alert').on('click', function() {
-		$(this).hide();
+			$(this).addClass('hide');
 		});
 
 		socket.on('event:new_topic', function(data) {
 
-		++newTopicCount;
-		updateAlertText();
+			++Recent.newTopicCount;
+			Recent.updateAlertText();
 
 		});
 
-	function updateAlertText() {
+		socket.on('event:new_post', function(data) {
+			++Recent.newPostCount;
+			Recent.updateAlertText();
+		});
+
+		$(window).off('scroll').on('scroll', function() {
+			var bottom = ($(document).height() - $(window).height()) * 0.9;
+
+			if ($(window).scrollTop() > bottom && !Recent.loadingMoreTopics) {
+				Recent.loadMoreTopics();
+			}
+		});
+	};
+
+	Recent.updateAlertText = function() {
 		var text = '';
 
-		if(newTopicCount > 1)
-			text = 'There are ' + newTopicCount + ' new topics';
-		else if(newTopicCount === 1)
+		if (Recent.newTopicCount > 1)
+			text = 'There are ' + Recent.newTopicCount + ' new topics';
+		else if (Recent.newTopicCount === 1)
 			text = 'There is 1 new topic';
 		else
 			text = 'There are no new topics';
 
-		if(newPostCount > 1)
-			text += ' and ' + newPostCount + ' new posts.';
-		else if(newPostCount === 1)
+		if (Recent.newPostCount > 1)
+			text += ' and ' + Recent.newPostCount + ' new posts.';
+		else if (Recent.newPostCount === 1)
 			text += ' and 1 new post.';
 		else
 			text += ' and no new posts.';
 
 		text += ' Click here to reload.';
 
-		$('#new-topics-alert').html(text).fadeIn('slow');
+		$('#new-topics-alert').html(text).removeClass('hide').fadeIn('slow');
 	}
 
-	socket.on('event:new_post', function(data) {
-		++newPostCount;
-		updateAlertText();
-	});
+	Recent.onTopicsLoaded = function(topics) {
 
-	function onTopicsLoaded(topics) {
-
-		var html = templates.prepare(templates['recent'].blocks['topics']).parse({ topics: topics }),
+		var html = templates.prepare(templates['recent'].blocks['topics']).parse({
+			topics: topics
+		}),
 			container = $('#topics-container');
 
 		$('#category-no-topics').remove();
 
 		container.append(html);
+		$('span.timeago').timeago();
 	}
 
-	function loadMoreTopics() {
-		loadingMoreTopics = true;
-		socket.emit('api:topics.loadMoreRecentTopics', {after:$('#topics-container').children().length}, function(data) {
+	Recent.loadMoreTopics = function() {
+		Recent.loadingMoreTopics = true;
+		socket.emit('api:topics.loadMoreRecentTopics', {
+			after: $('#topics-container').children('li').length,
+			term: active
+		}, function(data) {
 			if (data.topics && data.topics.length) {
-				onTopicsLoaded(data.topics);
+				Recent.onTopicsLoaded(data.topics);
 			}
-			loadingMoreTopics = false;
+			Recent.loadingMoreTopics = false;
 		});
 	}
 
-	$(window).off('scroll').on('scroll', function() {
-		var bottom = ($(document).height() - $(window).height()) * 0.9;
-
-		if ($(window).scrollTop() > bottom && !loadingMoreTopics) {
-			loadMoreTopics();
-		}
+	return Recent;
 });
-
-
-})();

public/src/forum/register.js

@@ -1,157 +1,159 @@
-(function() {
-	var username = document.getElementById('username'),
-		password = document.getElementById('password'),
-		password_confirm = document.getElementById('password-confirm'),
-		register = document.getElementById('register'),
-		emailEl = document.getElementById('email'),
-		username_notify = document.getElementById('username-notify'),
-		email_notify = document.getElementById('email-notify'),
-		password_notify = document.getElementById('password-notify'),
-		password_confirm_notify = document.getElementById('password-confirm-notify'),		
-		usernamevalid = false;
-		emailexists = false,
-		emailvalid = false,
-		userexists = false,
-		passwordsmatch = false,
-		passwordvalid = false;
+define(function() {
+	var Register = {};
 
-	$(username).on('keyup change', function() {
-		usernamevalid = utils.isUserNameValid(username.value);
+	Register.init = function() {
+		var username = $('#username'),
+			password = $('#password'),
+			password_confirm = $('#password-confirm'),
+			register = $('#register'),
+			emailEl = $('#email'),
+			username_notify = $('#username-notify'),
+			email_notify = $('#email-notify'),
+			password_notify = $('#password-notify'),
+			password_confirm_notify = $('#password-confirm-notify'),
+			validationError = false,
+			successIcon = '<i class="icon icon-ok"></i>';
 
+		$('#referrer').val(app.previousUrl);
 
-		if(username.value.length < 3) {
-			username_notify.innerHTML = 'Username too short';
-			username_notify.className = 'label label-important';
-		} else if(username.value.length > 13) {
-			username_notify.innerHTML = 'Username too long';
-			username_notify.className = 'label label-important';
-		} else if(!usernamevalid) {
-			username_notify.innerHTML = 'Invalid username';
-			username_notify.className = 'label label-important';
+		function showError(element, msg) {
+			element.html(msg);
+			element.parent()
+				.removeClass('alert-success')
+				.addClass('alert-danger');
+			element.show();
+			validationError = true;
+		}
+
+		function showSuccess(element, msg) {
+			element.html(msg);
+			element.parent()
+				.removeClass('alert-danger')
+				.addClass('alert-success');
+			element.show();
+		}
+
+		function validateEmail() {
+			if (!emailEl.val()) {
+				validationError = true;
+				return;
+			}
+
+			if (!utils.isEmailValid(emailEl.val())) {
+				showError(email_notify, 'Invalid email address.');
+			} else
+				socket.emit('user.email.exists', {
+					email: emailEl.val()
+				});
+		}
+
+		emailEl.on('blur', function() {
+			validateEmail();
+		});
+
+		function validateUsername() {
+			if (!username.val()) {
+				validationError = true;
+				return;
+			}
+
+			if (username.val().length < config.minimumUsernameLength) {
+				showError(username_notify, 'Username too short!');
+			} else if (username.val().length > config.maximumUsernameLength) {
+				showError(username_notify, 'Username too long!');
+			} else if (!utils.isUserNameValid(username.val()) || !utils.slugify(username.val())) {
+				showError(username_notify, 'Invalid username!');
 			} else {
-			socket.emit('user.exists', {username: username.value});
+				socket.emit('user.exists', {
+					username: username.val()
+				});
 			}
+		}
+
+		username.on('keyup', function() {
+			jQuery('#yourUsername').html(this.value.length > 0 ? this.value : 'username');
+		});
+		username.on('blur', function() {
+			validateUsername();
 		});
 
-	$(emailEl).on('keyup change', function() {
-		emailvalid = utils.isEmailValid(email.value);
-
-		if(!emailvalid) {
-			email_notify.innerHTML = 'Invalid email address';
-			email_notify.className = 'label label-important';
+		function validatePassword() {
+			if (!password.val()) {
+				validationError = true;
+				return;
 			}
-		else
-			socket.emit('user.email.exists', { email: emailEl.value });
-	});
 
-	$(password).on('keyup', function() {
-		passwordvalid = utils.isPasswordValid(password.value);
-		if (password.value.length < 6) {
-			password_notify.innerHTML = 'Password too short';
-			password_notify.className = 'label label-important';
-		} else if(!passwordvalid) {
-			password_notify.innerHTML = 'Invalid password';
-			password_notify.className = 'label label-important';
+			if (password.val().length < config.minimumPasswordLength) {
+				showError(password_notify, 'Password too short!');
+			} else if (!utils.isPasswordValid(password.val())) {
+				showError(password_notify, 'Invalid password!');
 			} else {
-			password_notify.innerHTML = 'OK!';
-			password_notify.className = 'label label-success';
+				showSuccess(password_notify, successIcon);
 			}
 
-		if(password.value !== password_confirm.value) {
-			password_confirm_notify.innerHTML = 'Passwords must match!';
-			password_confirm_notify.className = 'label label-important';
-			passwordsmatch = false;
+			if (password.val() !== password_confirm.val() && password_confirm.val() !== '') {
+				showError(password_confirm_notify, 'Passwords must match!');
 			}
+		}
+
+		$(password).on('blur', function() {
+			validatePassword();
 		});
 
-	$(password_confirm).on('keyup', function() {
-		if(password.value !== password_confirm.value) {
-			password_confirm_notify.innerHTML = 'Passwords must match!';
-			password_confirm_notify.className = 'label label-important';
-			passwordsmatch = false;
+		function validatePasswordConfirm() {
+			if (!password.val() || password_notify.hasClass('alert-error')) {
+				return;
 			}
-		else {
-			password_confirm_notify.innerHTML = 'OK!';
-			password_confirm_notify.className = 'label label-success';
-			passwordsmatch = true;
+
+			if (password.val() !== password_confirm.val()) {
+				showError(password_confirm_notify, 'Passwords must match!');
+			} else {
+				showSuccess(password_confirm_notify, successIcon);
 			}
+		}
+
+		$(password_confirm).on('blur', function() {
+			validatePasswordConfirm();
 		});
 
 		ajaxify.register_events(['user.exists', 'user.email.exists']);
 
 		socket.on('user.exists', function(data) {
-		userexists = data.exists;
 			if (data.exists === true) {
-			username_notify.innerHTML = 'Username exists';
-			username_notify.className = 'label label-important';
+				showError(username_notify, 'Username already taken!');
 			} else {
-			username_notify.innerHTML = 'OK!';
-			username_notify.className = 'label label-success';
+				showSuccess(username_notify, successIcon);
 			}
 		});
 
 		socket.on('user.email.exists', function(data) {
-		emailexists = data.exists;
-
 			if (data.exists === true) {
-			email_notify.innerHTML = 'Email Address exists';
-			email_notify.className = 'label label-important';
-		}
-		else {
-			email_notify.innerHTML = 'OK!';
-			email_notify.className = 'label label-success';
+				showError(email_notify, 'Email address already taken!');
+			} else {
+				showSuccess(email_notify, successIcon);
 			}
 		});
 
 		// Alternate Logins
-	var altLoginEl = document.querySelector('.alt-logins');
-	altLoginEl.addEventListener('click', function(e) {
-		var target;
-		switch(e.target.nodeName) {
-			case 'LI': target = e.target; break;
-			case 'I': target = e.target.parentNode; break;
-		}
-		if (target) {
-			document.location.href = target.getAttribute('data-url');
-		}
+		$('.alt-logins li').on('click', function(e) {
+			document.location.href = $(this).attr('data-url');
 		});
 
 		function validateForm() {
-		var validated = true;
+			validationError = false;
 
-		if (username.value.length < 2 || !usernamevalid) {
-			username_notify.innerHTML = 'Invalid username';
-			username_notify.className = 'label label-important';
-			validated = false;
+			validateEmail();
+			validateUsername();
+			validatePassword();
+			validatePasswordConfirm();
+
+			return validationError;
 		}
 
-		if (password.value.length < 5) {
-			password_notify.innerHTML = 'Password too short';
-			validated = false;
-		} 
+		register.on('click', function(e) {
+			if (validateForm()) e.preventDefault();
+		});
+	};
 
-		if(password.value !== password_confirm.value) {
-			password_confirm_notify.innerHTML = 'Passwords must match!';
-		}
-
-		if (!emailvalid) {
-			email_notify.innerHTML = 'Invalid email address';
-			validated = false;
-		} 
-		
-		if(emailexists) {
-			email_notify.innerHTML = 'Email Address exists';
-			validated = false;
-		}
-
-		if(userexists || !passwordsmatch || !passwordvalid)
-			validated = false;
-
-		return validated;
-	}
-	
-	register.addEventListener('click', function(e) {
-		if (!validateForm()) e.preventDefault();
-	}, false);
-	
-}());
+	return Register;
+});

public/src/forum/reset.js

@@ -1,11 +1,16 @@
-(function() {
+define(function() {
+	var	ResetPassword = {};
+
+	ResetPassword.init = function() {
 		var inputEl = document.getElementById('email'),
 			errorEl = document.getElementById('error'),
 			errorTextEl = errorEl.querySelector('p');
 
 		document.getElementById('reset').onclick = function() {
 			if (inputEl.value.length > 0 && inputEl.value.indexOf('@') !== -1) {
-			socket.emit('user:reset.send', { email: inputEl.value });
+				socket.emit('user:reset.send', {
+					email: inputEl.value
+				});
 			} else {
 				jQuery('#success').hide();
 				jQuery(errorEl).show();
@@ -36,4 +41,7 @@
 				}
 			}
 		});
-}());
+	};
+
+	return ResetPassword;
+});

public/src/forum/reset_code.js

@@ -1,4 +1,7 @@
-(function() {
+define(function() {
+	var	ResetCode = {};
+
+	ResetCode.init = function() {
 		var reset_code = templates.get('reset_code');
 
 		var resetEl = document.getElementById('reset'),
@@ -10,15 +13,25 @@
 			if (password.value.length < 6) {
 				$('#error').hide();
 				noticeEl.querySelector('strong').innerHTML = 'Invalid Password';
-			noticeEl.querySelector('p').innerHTML = 'The password entered it too short, please pick a different password!';
+				noticeEl.querySelector('p').innerHTML = 'The password entered is too short, please pick a different password.';
 				noticeEl.style.display = 'block';
-		} else if (password.value === repeat.value) {
-			socket.emit('user:reset.commit', { code: reset_code, password: password.value });
+			} else if (password.value !== repeat.value) {
+				$('#error').hide();
+				noticeEl.querySelector('strong').innerHTML = 'Invalid Password';
+				noticeEl.querySelector('p').innerHTML = 'The two passwords you\'ve entered do not match.';
+				noticeEl.style.display = 'block';
+			} else {
+				socket.emit('user:reset.commit', {
+					code: reset_code,
+					password: password.value
+				});
 			}
 		}, false);
 
 		// Enable the form if the code is valid
-	socket.emit('user:reset.valid', { code: reset_code });
+		socket.emit('user:reset.valid', {
+			code: reset_code
+		});
 
 
 		ajaxify.register_events(['user:reset.valid', 'user:reset.commit']);
@@ -39,4 +52,7 @@
 				$('#success').show();
 			}
 		});
-}());
+	};
+
+	return ResetCode;
+});

public/src/forum/search.js

@@ -1,6 +1,7 @@
-(function() {
+define(function() {
+	var	Search = {};
 
-	$(document).ready(function() {
+	Search.init = function() {
 		var searchQuery = $('#topics-container').attr('data-search-query');
 
 		$('.search-result-text').each(function() {
@@ -9,6 +10,17 @@
 			text = text.replace(regex, '<span class="label label-success">' + searchQuery + '</span>');
 			$(this).html(text);
 		});
-	});
 
-})();
+
+		$('#search-form input').val(searchQuery);
+
+		$('#mobile-search-form').off('submit').on('submit', function() {
+			var input = $(this).find('input');
+			ajaxify.go("search/" + input.val(), null, "search");
+			input.val('');
+			return false;
+		});
+	};
+
+	return Search;
+});

public/src/forum/topic.js

@@ -1,4 +1,7 @@
-(function() {
+define(function() {
+	var	Topic = {};
+
+	Topic.init = function() {
 		var expose_tools = templates.get('expose_tools'),
 			tid = templates.get('topic_id'),
 			postListEl = document.getElementById('post-container'),
@@ -8,18 +11,38 @@
 				deleted: templates.get('deleted'),
 				pinned: templates.get('pinned')
 			},
-		topic_name = templates.get('topic_name');
+			topic_name = templates.get('topic_name'),
+			twitter_url = templates.get('twitter-intent-url'),
+			facebook_url = templates.get('facebook-share-url'),
+			google_url = templates.get('google-share-url');
 
 
 		jQuery('document').ready(function() {
 
 			app.addCommasToNumbers();
 
+
 			var room = 'topic_' + tid,
 				adminTools = document.getElementById('thread-tools');
 
 			app.enter_room(room);
 
+
+			$('.twitter-share').on('click', function () {
+				window.open(twitter_url, '_blank', 'width=550,height=420,scrollbars=no,status=no');
+				return false;
+			});
+
+			$('.facebook-share').on('click', function () {
+				window.open(facebook_url, '_blank', 'width=626,height=436,scrollbars=no,status=no');
+				return false;
+			});
+
+			$('.google-share').on('click', function () {
+				window.open(google_url, '_blank', 'width=500,height=570,scrollbars=no,status=no');
+				return false;
+			});
+
 			// Resetting thread state
 			if (thread_state.locked === '1') set_locked_state(true);
 			if (thread_state.deleted === '1') set_delete_state(true);
@@ -34,11 +57,17 @@
 				$('#delete_thread').on('click', function(e) {
 					if (thread_state.deleted !== '1') {
 						bootbox.confirm('Are you sure you want to delete this thread?', function(confirm) {
-						if (confirm) socket.emit('api:topic.delete', { tid: tid });
+							if (confirm) {
+								socket.emit('api:topic.delete', {
+									tid: tid
+								});
+							}
 						});
 					} else {
 						bootbox.confirm('Are you sure you want to restore this thread?', function(confirm) {
-						if (confirm) socket.emit('api:topic.restore', { tid: tid });
+							if (confirm) socket.emit('api:topic.restore', {
+								tid: tid
+							});
 						});
 					}
 					return false;
@@ -46,18 +75,26 @@
 
 				$('#lock_thread').on('click', function(e) {
 					if (thread_state.locked !== '1') {
-					socket.emit('api:topic.lock', { tid: tid });
+						socket.emit('api:topic.lock', {
+							tid: tid
+						});
 					} else {
-					socket.emit('api:topic.unlock', { tid: tid });
+						socket.emit('api:topic.unlock', {
+							tid: tid
+						});
 					}
 					return false;
 				});
 
 				$('#pin_thread').on('click', function(e) {
 					if (thread_state.pinned !== '1') {
-					socket.emit('api:topic.pin', { tid: tid });
+						socket.emit('api:topic.pin', {
+							tid: tid
+						});
 					} else {
-					socket.emit('api:topic.unpin', { tid: tid });
+						socket.emit('api:topic.unpin', {
+							tid: tid
+						});
 					}
 					return false;
 				});
@@ -67,10 +104,12 @@
 					return false;
 				});
 
-			moveThreadModal.on('shown', function() {
+				moveThreadModal.on('shown.bs.modal', function() {
+
 					var loadingEl = document.getElementById('categories-loading');
 					if (loadingEl) {
 						socket.once('api:categories.get', function(data) {
+							console.log(data);
 							// Render categories
 							var categoriesFrag = document.createDocumentFragment(),
 								categoryEl = document.createElement('li'),
@@ -86,7 +125,7 @@
 							categoriesEl.className = 'category-list';
 							for (x = 0; x < numCategories; x++) {
 								info = data.categories[x];
-							categoryEl.className = info.blockclass;
+								categoryEl.className = info.blockclass + (info.disabled === '1' ? ' disabled' : '');
 								categoryEl.innerHTML = '<i class="' + info.icon + '"></i> ' + info.name;
 								categoryEl.setAttribute('data-cid', info.cid);
 								categoriesFrag.appendChild(categoryEl.cloneNode(true));
@@ -124,14 +163,17 @@
 										} else {
 											app.alert({
 												'alert_id': 'thread_move',
-											type: 'error',
+												type: 'danger',
 												title: 'Unable to Move Topic',
 												message: 'This topic could not be moved to ' + targetCatLabel + '.<br />Please try again later',
 												timeout: 5000
 											});
 										}
 									});
-								socket.emit('api:topic.move', { tid: tid, cid: targetCid });
+									socket.emit('api:topic.move', {
+										tid: tid,
+										cid: targetCid
+									});
 								}
 							});
 						});
@@ -183,7 +225,7 @@
 				if (data.status && data.status === 'ok') set_follow_state(data.follow);
 				else {
 					app.alert({
-					type: 'error',
+						type: 'danger',
 						alert_id: 'topic_follow',
 						title: 'Please Log In',
 						message: 'Please register or log in in order to subscribe to this topic',
@@ -199,6 +241,20 @@
 				}, false);
 			}
 
+			enableInfiniteLoading();
+
+			var bookmark = localStorage.getItem('topic:' + tid + ':bookmark');
+
+			if(bookmark) {
+				app.scrollToPost(parseInt(bookmark, 10));
+			}
+
+			$('#post-container').on('click', '.deleted', function(ev) {
+				$(this).toggleClass('deleted-expanded');
+			});
+		});
+
+		function enableInfiniteLoading() {
 			$(window).off('scroll').on('scroll', function() {
 				var bottom = ($(document).height() - $(window).height()) * 0.9;
 
@@ -206,11 +262,7 @@
 					app.loadMorePosts(tid);
 				}
 			});
-
-		$('.post-container').on('click', '.deleted', function(ev) {
-			$(this).toggleClass('deleted-expanded');
-		});
-	});
+		}
 
 		var reply_fn = function() {
 			var selectionText = '',
@@ -227,10 +279,10 @@
 				});
 			}
 		};
-	$('.post-container').on('click', '.post_reply', reply_fn);
+		$('#post-container').on('click', '.post_reply', reply_fn);
 		$('#post_reply').on('click', reply_fn);
 
-	$('.post-container').on('click', '.quote', function() {
+		$('#post-container').on('click', '.quote', function() {
 			if (thread_state.locked !== '1') {
 				var pid = $(this).parents('li').attr('data-pid');
 
@@ -241,60 +293,72 @@
 						cmp.push(tid, null, null, quoted);
 					});
 				});
-			socket.emit('api:posts.getRawPost', { pid: pid });
+				socket.emit('api:posts.getRawPost', {
+					pid: pid
+				});
 			}
 		});
 
-	$('.post-container').on('click', '.favourite', function() {
-		var ids = this.id.replace('favs_', '').split('_'),
-			pid = ids[0],
-			uid = ids[1];
+		$('#post-container').on('click', '.favourite', function() {
+			var pid = $(this).parents('li').attr('data-pid');
+			var uid = $(this).parents('li').attr('data-uid');
 
 			var element = $(this).find('i');
 			if (element.attr('class') == 'icon-star-empty') {
-			socket.emit('api:posts.favourite', {pid: pid, room_id: app.current_room});
-		}
-		else {
-			socket.emit('api:posts.unfavourite', {pid: pid, room_id: app.current_room});
+				socket.emit('api:posts.favourite', {
+					pid: pid,
+					room_id: app.current_room
+				});
+			} else {
+				socket.emit('api:posts.unfavourite', {
+					pid: pid,
+					room_id: app.current_room
+				});
 			}
 		});
 
-	$('.post-container').delegate('.edit', 'click', function(e) {
-		var pid = ($(this).attr('id') || $(this.parentNode).attr('id')).split('_')[1];
+		$('#post-container').on('click', '.link', function() {
+			var pid = $(this).parents('li').attr('data-pid');
+			$('#post_' + pid + '_link').val(window.location.href + "#" + pid).stop(true, false).fadeIn().select();
+			$('#post_' + pid + '_link').off('blur').on('blur', function() {
+				$(this).fadeOut();
+			});
+		});
 
-		var main = $(this).parents('.main-post');
+		$('#post-container').delegate('.edit', 'click', function(e) {
+			var pid = $(this).parents('li').attr('data-pid'),
+				main = $(this).parents('.main-post');
 
 			require(['composer'], function(cmp) {
 				cmp.push(null, null, pid);
 			});
 		});
 
-	$('.post-container').delegate('.delete', 'click', function(e) {
-		var	pid = ($(this).attr('id') || $(this.parentNode).attr('id')).split('_')[1],
+		$('#post-container').delegate('.delete', 'click', function(e) {
+			var pid = $(this).parents('li').attr('data-pid'),
 				postEl = $(document.querySelector('#post-container li[data-pid="' + pid + '"]')),
 				deleteAction = !postEl.hasClass('deleted') ? true : false,
 				confirmDel = confirm((deleteAction ? 'Delete' : 'Restore') + ' this post?');
 
 			if (confirmDel) {
 				deleteAction ?
-			socket.emit('api:posts.delete', { pid: pid }) :
-			socket.emit('api:posts.restore', { pid: pid });
+					socket.emit('api:posts.delete', {
+						pid: pid
+					}) :
+					socket.emit('api:posts.restore', {
+						pid: pid
+					});
 			}
 		});
 
-	$('.post-container').delegate('.chat', 'click', function(e) {
-
-		var username = $(this).parents('li').attr('data-username');
-		var touid = $(this).parents('li').attr('data-uid');
+		$('#post-container').on('click', '.chat', function(e) {
+			var username = $(this).parents('li.row').attr('data-username');
+			var touid = $(this).parents('li.row').attr('data-uid');
 
 			if (username === app.username || !app.username)
 				return;
 
-		require(['chat'], function(chat) {
-			var chatModal = chat.createModalIfDoesntExist(username, touid);
-			chatModal.show();
-			chat.bringModalToTop(chatModal);
-		});
+			app.openChat(username, touid);
 		});
 
 		ajaxify.register_events([
@@ -307,10 +371,80 @@
 
 
 		socket.on('api:get_users_in_room', function(data) {
-		var activeEl = $('#thread_active_users');
-		if(activeEl.length)
-			activeEl.html(data);
+			if(data) {
+				var activeEl = $('.thread_active_users');
 
+				function createUserIcon(uid, picture, userslug, username) {
+					if(!activeEl.find("[href='/user/"+ data.users[i].userslug + "']").length) {
+						var userIcon = $('<img src="'+ picture +'"/>');
+
+						var userLink = $('<a href="/user/' + userslug + '"></a>').append(userIcon);
+						userLink.attr('data-uid', uid);
+
+						userLink.tooltip({
+							placement: 'left',
+							title: username
+						});
+
+						return userLink;
+					}
+				}
+
+				// remove users that are no longer here
+				activeEl.children().each(function(index, element) {
+					if(element) {
+						var uid = $(element).attr('data-uid');
+						for(var i=0; i<data.users.length; ++i) {
+							if(data.users[i].uid == uid) {
+								return;
+							}
+						}
+						$(element).remove();
+					}
+				});
+
+				var i=0;
+				// add self
+				for(i = 0; i<data.users.length; ++i) {
+					if(data.users[i].uid == app.uid) {
+						var icon = createUserIcon(data.users[i].uid, data.users[i].picture, data.users[i].userslug, data.users[i].username);
+						activeEl.prepend(icon);
+						data.users.splice(i, 1);
+						break;
+					}
+				}
+				// add other users
+				for(i=0; i<data.users.length; ++i) {
+					icon = createUserIcon(data.users[i].uid, data.users[i].picture, data.users[i].userslug, data.users[i].username)
+					activeEl.append(icon);
+					if(activeEl.children().length > 8) {
+						break;
+					}
+				}
+
+				var remainingUsers = data.users.length - 9;
+				remainingUsers = remainingUsers < 0 ? 0 : remainingUsers;
+				var anonymousCount = parseInt(data.anonymousCount, 10);
+				activeEl.find('.anonymous-box').remove();
+				if(anonymousCount || remainingUsers) {
+
+					var anonLink = $('<i class="icon-user anonymous-box"></i>');
+					activeEl.append(anonLink);
+
+					var title = '';
+					if(remainingUsers && anonymousCount)
+						title = remainingUsers + ' more user(s) and ' + anonymousCount + ' guest(s)';
+					else if(remainingUsers)
+						title = remainingUsers + ' more user(s)';
+					else
+						title = anonymousCount + ' guest(s)';
+
+					anonLink.tooltip({
+						placement: 'left',
+						title: title
+					});
+				}
+			}
 			app.populate_online_users();
 		});
 
@@ -382,6 +516,7 @@
 				this.innerHTML = data.content;
 				$(this).fadeIn(250);
 			});
+
 		});
 
 		socket.on('api:posts.favourite', function(data) {
@@ -413,7 +548,7 @@
 		});
 
 		socket.on('api:post.privileges', function(privileges) {
-		if (privileges.editable) toggle_mod_tools(privileges.pid, true);
+			toggle_mod_tools(privileges.pid, privileges.editable);
 		});
 
 		function adjust_rep(value, pid, uid) {
@@ -490,23 +625,23 @@
 		function set_delete_state(deleted) {
 			var deleteThreadEl = document.getElementById('delete_thread'),
 				deleteTextEl = deleteThreadEl.getElementsByTagName('span')[0],
-			threadEl = document.querySelector('.post-container'),
+				threadEl = $('#post-container'),
 				deleteNotice = document.getElementById('thread-deleted') || document.createElement('div');
 
 			if (deleted) {
 				deleteTextEl.innerHTML = '<i class="icon-comment"></i> Restore Thread';
-			$(threadEl).addClass('deleted');
+				threadEl.addClass('deleted');
 
 				// Spawn a 'deleted' notice at the top of the page
 				deleteNotice.setAttribute('id', 'thread-deleted');
-			deleteNotice.className = 'alert';
+				deleteNotice.className = 'alert alert-warning';
 				deleteNotice.innerHTML = 'This thread has been deleted. Only users with thread management privileges can see it.';
-			document.getElementById('content').insertBefore(deleteNotice, threadEl);
+				threadEl.before(deleteNotice);
 
 				thread_state.deleted = '1';
 			} else {
 				deleteTextEl.innerHTML = '<i class="icon-trash"></i> Delete Thread';
-			$(threadEl).removeClass('deleted');
+				threadEl.removeClass('deleted');
 				deleteNotice.parentNode.removeChild(deleteNotice);
 
 				thread_state.deleted = '0';
@@ -602,4 +737,79 @@
 				deleteEl.addClass('none');
 			}
 		}
-})();
+
+
+
+		var postAuthorImage, mobileAuthorOverlay, pagination;
+		var postcount = templates.get('postcount');
+
+		function updateHeader() {
+			if (pagination == null) {
+				jQuery('.pagination-block i:first').on('click', function() {
+					app.scrollToTop();
+				});
+				jQuery('.pagination-block i:last').on('click', function() {
+					app.scrollToBottom();
+				});
+			}
+
+			jQuery('.mobile-author-overlay').css('bottom', '0px');
+			postAuthorImage = postAuthorImage || document.getElementById('mobile-author-image');
+			mobileAuthorOverlay = mobileAuthorOverlay || document.getElementById('mobile-author-overlay');
+			pagination = pagination || document.getElementById('pagination');
+
+			pagination.parentNode.style.display = 'block';
+
+			var windowHeight = jQuery(window).height();
+			var scrollTop = jQuery(window).scrollTop();
+			var scrollBottom = scrollTop + windowHeight;
+
+			if (scrollTop < 50 && postcount > 1) {
+				localStorage.removeItem("topic:" + tid + ":bookmark");
+				postAuthorImage.src = (jQuery('.main-post .avatar img').attr('src'));
+				mobileAuthorOverlay.innerHTML = 'Posted by ' + jQuery('.main-post').attr('data-username') + ', ' + jQuery('.main-post').find('.relativeTimeAgo').html();
+				pagination.innerHTML = '0 out of ' + postcount;
+				return;
+			}
+
+
+			var count = 0, smallestNonNegative = 0;
+
+			jQuery('.sub-posts').each(function() {
+				count++;
+				this.postnumber = count;
+
+
+				var el = jQuery(this);
+				var elTop = el.offset().top;
+				var height = Math.floor(el.height());
+				var elBottom = elTop + (height < 300 ? height : 300);
+
+				var inView = ((elBottom >= scrollTop) && (elTop <= scrollBottom) && (elBottom <= scrollBottom) && (elTop >= scrollTop));
+
+
+				if (inView) {
+					if(elTop - scrollTop > smallestNonNegative) {
+						localStorage.setItem("topic:" + tid + ":bookmark", el.attr('data-pid'));
+						smallestNonNegative = Number.MAX_VALUE;
+					}
+
+					pagination.innerHTML = this.postnumber + ' out of ' + postcount;
+					postAuthorImage.src = (jQuery(this).find('.profile-image-block img').attr('src'));
+					mobileAuthorOverlay.innerHTML = 'Posted by ' + jQuery(this).attr('data-username') + ', ' + jQuery(this).find('.relativeTimeAgo').html();
+				}
+			});
+
+			setTimeout(function() {
+				if (scrollTop + windowHeight == jQuery(document).height()) {
+					pagination.innerHTML = postcount + ' out of ' + postcount;
+				}
+			}, 100);
+		}
+
+		window.onscroll = updateHeader;
+		window.onload = updateHeader;
+	};
+
+	return Topic;
+});

public/src/forum/unread.js

@@ -1,4 +1,7 @@
-(function() {
+define(function() {
+	var	Unread = {};
+
+	Unread.init = function() {
 		var loadingMoreTopics = false;
 
 		app.enter_room('recent_posts');
@@ -8,10 +11,11 @@
 			'event:new_post'
 		]);
 
-	var newTopicCount = 0, newPostCount = 0;
+		var newTopicCount = 0,
+			newPostCount = 0;
 
 		$('#new-topics-alert').on('click', function() {
-		$(this).hide();
+			$(this).addClass('hide');
 		});
 
 		socket.on('event:new_topic', function(data) {
@@ -40,7 +44,8 @@
 
 			text += ' Click here to reload.';
 
-		$('#new-topics-alert').html(text).fadeIn('slow');
+			$('#new-topics-alert').html(text).removeClass('hide').fadeIn('slow');
+			$('#category-no-topics').addClass('hidden');
 		}
 
 		socket.on('event:new_post', function(data) {
@@ -68,17 +73,22 @@
 
 		function onTopicsLoaded(topics) {
 
-		var html = templates.prepare(templates['unread'].blocks['topics']).parse({ topics: topics }),
+			var html = templates.prepare(templates['unread'].blocks['topics']).parse({
+				topics: topics
+			}),
 				container = $('#topics-container');
 
 			$('#category-no-topics').remove();
 
 			container.append(html);
+			$('span.timeago').timeago();
 		}
 
 		function loadMoreTopics() {
 			loadingMoreTopics = true;
-		socket.emit('api:topics.loadMoreUnreadTopics', {after:parseInt($('#topics-container').attr('data-next-start'), 10)}, function(data) {
+			socket.emit('api:topics.loadMoreUnreadTopics', {
+				after: parseInt($('#topics-container').attr('data-next-start'), 10)
+			}, function(data) {
 				if (data.topics && data.topics.length) {
 					onTopicsLoaded(data.topics);
 					$('#topics-container').attr('data-next-start', data.nextStart);
@@ -105,5 +115,7 @@
 		$('#load-more-btn').on('click', function() {
 			loadMoreTopics();
 		});
+	};
 
-})();
+	return Unread;
+});

public/src/forum/users.js

@@ -1,12 +1,20 @@
-(function() {
+define(function() {
+	var	Users = {};
 
-	$(document).ready(function() {
+	Users.init = function() {
 		var timeoutId = 0;
 		var loadingMoreUsers = false;
 
+		function getActiveSection() {
 			var url = window.location.href,
 			parts = url.split('/'),
 			active = parts[parts.length - 1];
+			return active;
+		}
+
+		var active = getActiveSection();
+
+		var lastSearch = null;
 
 		app.addCommasToNumbers();
 
@@ -27,80 +35,108 @@
 			timeoutId = setTimeout(function() {
 				var username = $('#search-user').val();
 
-				jQuery('.icon-spinner').removeClass('none');
+				if (username == '') {
+					jQuery('#user-notfound-notify').html('<i class="icon icon-circle-blank"></i>');
+					jQuery('#user-notfound-notify').parent().removeClass('btn-warning label-warning btn-success label-success');
+					return;
+				}
+
+				if (lastSearch === username) return;
+				lastSearch = username;
+
+				jQuery('#user-notfound-notify').html('<i class="icon-spinner icon-spin"></i>');
+
+				setTimeout(function() {
 					socket.emit('api:admin.user.search', username);
+				}, 500); //replace this with global throttling function/constant
+
 			}, 250);
 		});
 
 		socket.removeAllListeners('api:admin.user.search');
 
 		socket.on('api:admin.user.search', function(data) {
-			
-			jQuery('.icon-spinner').addClass('none');				
-			
 			if (data === null) {
-				$('#user-notfound-notify').html('You need to be logged in to search!')
-					.show()
-					.addClass('label-important')
-					.removeClass('label-success');
+				$('#user-notfound-notify').html('You need to be logged in to search!');
+				$('#user-notfound-notify').parent().addClass('btn-warning label-warning');
 				return;
 			}
 
 			var html = templates.prepare(templates['users'].blocks['users']).parse({
 				users: data
 			}),
-				userListEl = document.querySelector('.users');
+				userListEl = $('#users-container');
 
-			userListEl.innerHTML = html;
+			userListEl.html(html);
 
 
 			if (data && data.length === 0) {
-				$('#user-notfound-notify').html('User not found!')
-					.show()
-					.addClass('label-important')
-					.removeClass('label-success');
-			}
-			else {
-				$('#user-notfound-notify').html(data.length + ' user'+(data.length>1?'s':'') + ' found!')
-					.show()
-					.addClass('label-success')
-					.removeClass('label-important');
+				$('#user-notfound-notify').html('User not found!');
+				$('#user-notfound-notify').parent().addClass('btn-warning label-warning');
+			} else {
+				$('#user-notfound-notify').html(data.length + ' user' + (data.length > 1 ? 's' : '') + ' found!');
+				$('#user-notfound-notify').parent().addClass('btn-success label-success');
 			}
 
 		});
 
+		socket.on('api:user.isOnline', function(data) {
+			if(getActiveSection() == 'online' && !loadingMoreUsers) {
+				startLoading('users:online', 0, true);
+				socket.emit('api:user.getOnlineAnonCount', {} , function(anonCount) {
+					if(parseInt(anonCount, 10) > 0) {
+						$('#users-container .anon-user').removeClass('hide');
+						$('#online_anon_count').html(anonCount);
+					} else {
+						$('#users-container .anon-user').addClass('hide');
+					}
+				});
+			}
+		});
 
-		
-		function onUsersLoaded(users) {
-			var html = templates.prepare(templates['users'].blocks['users']).parse({ users: users });
+		function onUsersLoaded(users, emptyContainer) {
+			var html = templates.prepare(templates['users'].blocks['users']).parse({
+				users: users
+			});
+			if(emptyContainer)
+				$('#users-container .registered-user').remove();
 			$('#users-container').append(html);
+			$('#users-container .anon-user').appendTo($('#users-container'));
 		}
 
 		function loadMoreUsers() {
 			var set = '';
-			if(active === 'users-latest' || active === 'users') {
+			if (active === 'latest' || active === 'users') {
 				set = 'users:joindate';
-			} else if(active === 'users-sort-posts') {
+			} else if (active === 'sort-posts') {
 				set = 'users:postcount';
-			} else if(active === 'users-sort-reputation') {
+			} else if (active === 'sort-reputation') {
 				set = 'users:reputation';
+			} else if (active === 'online') {
+				set = 'users:online';
 			}
 
 			if (set) {
+				startLoading(set, $('#users-container').children('.registered-user').length);
+			}
+		}
+
+		function startLoading(set, after, emptyContainer) {
 			loadingMoreUsers = true;
 			socket.emit('api:users.loadMore', {
 				set: set,
-					after: $('#users-container').children().length 
+				after: after
 			}, function(data) {
 				if (data.users.length) {
-						onUsersLoaded(data.users);
+					onUsersLoaded(data.users, emptyContainer);
+					$('#load-more-users-btn').removeClass('disabled');
 				} else {
 					$('#load-more-users-btn').addClass('disabled');
 				}
 				loadingMoreUsers = false;
 			});
 		}
-		}
+
 
 		$('#load-more-users-btn').on('click', loadMoreUsers);
 
@@ -111,6 +147,7 @@
 				loadMoreUsers();
 			}
 		});
-	});
+	};
 
-}());
+	return Users;
+});

public/src/modules/chat.js

@@ -13,13 +13,47 @@ define(['taskbar'], function(taskbar) {
 		chatModal.css('zIndex', topZ + 1);
 	}
 
-	module.createModalIfDoesntExist = function(username, touid) {
-		var chatModal = $('#chat-modal-'+touid);
+	module.getModal = function(touid) {
+		return $('#chat-modal-' + touid);
+	}
+
+	module.modalExists = function(touid) {
+		return $('#chat-modal-' + touid).length !== 0;
+	}
+
+	function checkStatus(chatModal, callback) {
+		socket.emit('api:user.isOnline', chatModal.touid, function(data) {
+			if(data.online !== chatModal.online) {
+				if(data.online) {
+					module.appendChatMessage(chatModal, chatModal.username + ' is currently online.\n', data.timestamp);
+				} else {
+					module.appendChatMessage(chatModal, chatModal.username + ' is currently offline.\n', data.timestamp);
+				}
+				chatModal.online = data.online;
+			}
+			if(callback)
+				callback(data.online);
+		});
+	}
+
+	function checkOnlineStatus(chatModal) {
+		if(chatModal.intervalId === 0) {
+			chatModal.intervalId = setInterval(function() {
+				checkStatus(chatModal);
+			}, 1000);
+		}
+	}
+
+	module.createModal = function(username, touid, callback) {
+
+		var chatModal = $('#chat-modal').clone(),
+			uuid = utils.generateUUID();
+
+		chatModal.intervalId = 0;
+		chatModal.touid = touid;
+		chatModal.username = username;
 
-		if(!chatModal.length) {
-			var chatModal = $('#chat-modal').clone();
 		chatModal.attr('id', 'chat-modal-' + touid);
-			var uuid = utils.generateUUID();
 		chatModal.attr('UUID', uuid);
 		chatModal.appendTo($('body'));
 		chatModal.draggable({
@@ -27,9 +61,12 @@ define(['taskbar'], function(taskbar) {
 				module.bringModalToTop(chatModal);
 			}
 		});
+
 		chatModal.find('#chat-with-name').html(username);
 
 		chatModal.find('.close').on('click', function(e) {
+			clearInterval(chatModal.intervalId);
+			chatModal.intervalId = 0;
 			chatModal.hide();
 			taskbar.discard('chat', uuid);
 		});
@@ -38,64 +75,77 @@ define(['taskbar'], function(taskbar) {
 			module.bringModalToTop(chatModal);
 		});
 
-			addSendHandler(chatModal, touid);
+		addSendHandler(chatModal);
 
-			getChatMessages(chatModal, touid);
-		}
+		getChatMessages(chatModal, function() {
+			checkOnlineStatus(chatModal);
+		});
 
 		taskbar.push('chat', chatModal.attr('UUID'), {title:'chat with ' + username});
 		return chatModal;
 	}
 
+	module.center = function(chatModal) {
+		chatModal.css("position", "fixed");
+		chatModal.css("top", "100px");
+		chatModal.css("left", Math.max(0, (($(window).width() - $(chatModal).outerWidth()) / 2) + $(window).scrollLeft()) + "px");
+		return chatModal;
+	}
+
 	module.load = function(uuid) {
 		var chatModal = $('div[UUID="'+uuid+'"]');
 		chatModal.show();
 		module.bringModalToTop(chatModal);
+		checkOnlineStatus(chatModal);
 	}
 
 	module.minimize = function(uuid) {
 		var chatModal = $('div[UUID="'+uuid+'"]');
 		chatModal.hide();
 		taskbar.minimize('chat', uuid);
+		clearInterval(chatModal.intervalId);
+		chatModal.intervalId = 0;
 	}
 
-	function getChatMessages(chatModal, touid) {
-		socket.emit('getChatMessages', {touid:touid}, function(messages) {
+	function getChatMessages(chatModal, callback) {
+		socket.emit('getChatMessages', {touid:chatModal.touid}, function(messages) {
 			for(var i = 0; i<messages.length; ++i) {
-				module.appendChatMessage(chatModal, messages[i].content);
+				module.appendChatMessage(chatModal, messages[i].content, messages[i].timestamp);
 			}
+			callback();
 		});
 	}
 
-	function addSendHandler(chatModal, touid) {
+	function addSendHandler(chatModal) {
 		chatModal.find('#chat-message-input').off('keypress');
 		chatModal.find('#chat-message-input').on('keypress', function(e) {
 			if(e.which === 13) {
-				sendMessage(chatModal, touid);
+				sendMessage(chatModal);
 			}
 		});
 
 		chatModal.find('#chat-message-send-btn').off('click');
 		chatModal.find('#chat-message-send-btn').on('click', function(e){
-			sendMessage(chatModal, touid);
+			sendMessage(chatModal);
 			return false;
 		});
 	}
 
-	function sendMessage(chatModal, touid) {
+	function sendMessage(chatModal) {
 		var msg = app.strip_tags(chatModal.find('#chat-message-input').val());
 		if(msg.length) {
 			msg = msg +'\n';
-			socket.emit('sendChatMessage', { touid:touid, message:msg});
+			socket.emit('sendChatMessage', { touid:chatModal.touid, message:msg});
 			chatModal.find('#chat-message-input').val('');
-			module.appendChatMessage(chatModal, 'You : ' + msg);
 		}
 	}
 
-
-	module.appendChatMessage = function(chatModal, message){
+	module.appendChatMessage = function(chatModal, message, timestamp) {
 		var chatContent = chatModal.find('#chat-content');
-		chatContent.append(message);
+
+		var date = new Date(parseInt(timestamp, 10));
+
+		chatContent.append('[' + date.toLocaleTimeString() + '] ' + message);
 		chatContent.scrollTop(
 			chatContent[0].scrollHeight - chatContent.height()
 		);

public/src/modules/composer.js

@@ -7,29 +7,33 @@ define(['taskbar'], function(taskbar) {
 		postContainer: undefined,
 	};
 
-	function createImageLabel(img, postImages) {
-		var imageLabel = $('<div class="label"><span>'+ img.name +'</span></div>');
-		var closeButton = $('<button class="close">&times;</button>');
+	var uploadsInProgress = [];
 
-		closeButton.on('click', function(e) {
+	function createImagePlaceholder(img) {
+		var text = $('.post-window textarea').val(),
+			textarea = $('.post-window textarea'),
+			imgText = "!["+img.name+"](uploading...)";
 
-			imageLabel.remove();
-			var index = postImages.indexOf(img);
-			if(index !== -1) {
-				postImages.splice(index, 1);
-			}
+		text += imgText;
+		textarea.val(text + " ");
+		uploadsInProgress.push(1);
+		socket.emit("api:posts.uploadImage", img, function(err, data) {
+
+			var currentText = textarea.val();
+			imgText = "!["+data.name+"](uploading...)";
+
+			if(!err)
+				textarea.val(currentText.replace(imgText, "!["+data.name+"]("+data.url+")"));
+			else
+				textarea.val(currentText.replace(imgText, "!["+data.name+"](upload error)"));
+			uploadsInProgress.pop();
 		});
-
-		imageLabel.append(closeButton);
-		return imageLabel;
 	}
 
 	function loadFile(file) {
 		var reader = new FileReader(),
 			dropDiv = $('.post-window .imagedrop'),
-			imagelist = $('.post-window .imagelist'),
-			uuid = dropDiv.parents('[data-uuid]').attr('data-uuid'),
-			posts = composer.posts[uuid];
+			uuid = dropDiv.parents('[data-uuid]').attr('data-uuid');
 
 		$(reader).on('loadend', function(e) {
 			var bin = this.result;
@@ -40,11 +44,8 @@ define(['taskbar'], function(taskbar) {
 				data: bin
 			};
 
-			posts.images.push(img);
+			createImagePlaceholder(img);
 
-			var imageLabel = createImageLabel(img, posts.images);
-
-			imagelist.append(imageLabel);
 			dropDiv.hide();
 		});
 
@@ -89,7 +90,6 @@ define(['taskbar'], function(taskbar) {
 			drop.on('drop', function(e) {
 				e.preventDefault();
 				var uuid = drop.parents('[data-uuid]').attr('data-uuid'),
-					posts = composer.posts[uuid],
 					dt = e.dataTransfer,
 					files = dt.files;
 
@@ -109,8 +109,8 @@ define(['taskbar'], function(taskbar) {
 			var taskbar = document.getElementById('taskbar');
 
 			composer.postContainer = document.createElement('div');
-			composer.postContainer.className = 'post-window row-fluid';
-			composer.postContainer.innerHTML =	'<div class="span5">' +
+			composer.postContainer.className = 'post-window row';
+			composer.postContainer.innerHTML =	'<div class="col-md-5">' +
 													'<input type="text" tabIndex="1" placeholder="Enter your topic title here..." />' +
 													'<div class="btn-toolbar formatting-bar">' +
 														'<div class="btn-group">' +
@@ -121,11 +121,10 @@ define(['taskbar'], function(taskbar) {
 														'</div>' +
 													'</div>' +
 													'<textarea tabIndex="2"></textarea>' +
-													'<div class="imagelist"></div>'+
 													'<div class="imagedrop"><div>Drag and Drop Images Here</div></div>'+
 													'<div class="btn-toolbar action-bar">' +
 														'<div class="btn-group" style="float: right; margin-right: -8px">' +
-															'<button data-action="minimize" class="btn hidden-phone" tabIndex="4"><i class="icon-download-alt"></i> Minimize</button>' +
+															'<button data-action="minimize" class="btn hidden-xs" tabIndex="4"><i class="icon-download-alt"></i> Minimize</button>' +
 															'<button class="btn" data-action="discard" tabIndex="5"><i class="icon-remove"></i> Discard</button>' +
 															'<button data-action="post" class="btn" tabIndex="3"><i class="icon-ok"></i> Submit</button>' +
 														'</div>' +
@@ -152,12 +151,12 @@ define(['taskbar'], function(taskbar) {
 						pid: threadData.pid,
 						title: threadData.title || '',
 						body: threadData.body || '',
-						images: []
+						modified: false
 					};
 					composer.load(uuid);
 				} else {
 					app.alert({
-						type: 'error',
+						type: 'danger',
 						timeout: 5000,
 						alert_id: 'post_error',
 						title: 'Please Log In to Post',
@@ -181,6 +180,9 @@ define(['taskbar'], function(taskbar) {
 				var uuid = $(this).parents('.post-window')[0].getAttribute('data-uuid');
 				if (this.nodeName === 'INPUT') composer.posts[uuid].title = this.value;
 				else if (this.nodeName === 'TEXTAREA') composer.posts[uuid].body = this.value;
+
+				// Mark this post window as having been changed
+				composer.posts[uuid].modified = true;
 			});
 
 			jPostContainer.on('click', '.action-bar button', function() {
@@ -189,7 +191,15 @@ define(['taskbar'], function(taskbar) {
 				switch(action) {
 					case 'post': composer.post(uuid); break;
 					case 'minimize': composer.minimize(uuid); break;
-					case 'discard': composer.discard(uuid); break;
+					case 'discard':
+						if (composer.posts[uuid].modified) {
+							bootbox.confirm('Are you sure you wish to discard this post?', function(discard) {
+								if (discard) composer.discard(uuid);
+							});
+						} else {
+							composer.discard(uuid);
+						}
+						break;
 				}
 			});
 
@@ -265,18 +275,6 @@ define(['taskbar'], function(taskbar) {
 		});
 	}
 
-	function createPostImages(images) {
-		var imagelist = $(composer.postContainer).find('.imagelist');
-		imagelist.empty();
-
-		if(images && images.length) {
-			for(var i=0; i<images.length; ++i) {
-				var imageLabel = createImageLabel(images[i], images);
-				imagelist.append(imageLabel);
-			}
-		}
-	}
-
 	composer.load = function(post_uuid) {
 		var post_data = composer.posts[post_uuid],
 			titleEl = composer.postContainer.querySelector('input'),
@@ -299,7 +297,6 @@ define(['taskbar'], function(taskbar) {
 		}
 		bodyEl.value = post_data.body;
 
-		createPostImages(post_data.images);
 
 		// Direct user focus to the correct element
 		if ((parseInt(post_data.tid) || parseInt(post_data.pid)) > 0) {
@@ -312,7 +309,7 @@ define(['taskbar'], function(taskbar) {
 	}
 
 	composer.reposition = function(post_uuid) {
-		var postWindowEl = composer.postContainer.querySelector('.span5'),
+		var postWindowEl = composer.postContainer.querySelector('.col-md-5'),
 			taskbarBtn = document.querySelector('#taskbar [data-uuid="' + post_uuid + '"]'),
 			btnRect = taskbarBtn.getBoundingClientRect(),
 			taskbarRect = document.getElementById('taskbar').getBoundingClientRect(),
@@ -334,9 +331,19 @@ define(['taskbar'], function(taskbar) {
 		titleEl.value = titleEl.value.trim();
 		bodyEl.value = bodyEl.value.trim();
 
+		if(uploadsInProgress.length) {
+			return app.alert({
+				type: 'warning',
+				timeout: 2000,
+				title: 'Still uploading',
+				message: "Please wait for uploads to complete.",
+				alert_id: 'post_error'
+			});
+		}
+
 		if (titleEl.value.length < config.minimumTitleLength) {
 			return app.alert({
-				type: 'error',
+				type: 'danger',
 				timeout: 2000,
 				title: 'Title too short',
 				message: "Please enter a longer title. At least " + config.minimumTitleLength+ " characters.",
@@ -346,7 +353,7 @@ define(['taskbar'], function(taskbar) {
 
 		if (bodyEl.value.length < config.minimumPostLength) {
 			return app.alert({
-				type: 'error',
+				type: 'danger',
 				timeout: 2000,
 				title: 'Content too short',
 				message: "Please enter a longer post. At least " + config.minimumPostLength + " characters.",
@@ -359,21 +366,18 @@ define(['taskbar'], function(taskbar) {
 			socket.emit('api:topics.post', {
 				'title' : titleEl.value,
 				'content' : bodyEl.value,
-				'category_id' : postData.cid,
-				images: composer.posts[post_uuid].images
+				'category_id' : postData.cid
 			});
 		} else if (parseInt(postData.tid) > 0) {
 			socket.emit('api:posts.reply', {
 				'topic_id' : postData.tid,
-				'content' : bodyEl.value,
-				images: composer.posts[post_uuid].images
+				'content' : bodyEl.value
 			});
 		} else if (parseInt(postData.pid) > 0) {
 			socket.emit('api:posts.edit', {
 				pid: postData.pid,
 				content: bodyEl.value,
-				title: titleEl.value,
-				images: composer.posts[post_uuid].images
+				title: titleEl.value
 			});
 		}
 
@@ -383,8 +387,8 @@ define(['taskbar'], function(taskbar) {
 	composer.discard = function(post_uuid) {
 		if (composer.posts[post_uuid]) {
 			$(composer.postContainer).find('.imagedrop').hide();
-			$(composer.postContainer).find('.imagelist').empty();
 			delete composer.posts[post_uuid];
+			uploadsInProgress.length = 0;
 			composer.minimize();
 			taskbar.discard('composer', post_uuid);
 		}

public/src/modules/mobileMenu.js

@@ -99,6 +99,7 @@ define(function() {
 
 
 	mobileMenu.init = function() {
+		return; // disabling until this can be pluginified.
 		overlay = overlay || document.getElementById('mobile-menu-overlay');
 		menuBtn = menuBtn || document.getElementById('mobile-menu-btn');
 		postBtn = postBtn || document.getElementById('mobile-post-btn');

public/src/modules/taskbar.js

@@ -8,12 +8,12 @@ define(function() {
 
 			taskbar.taskbar = document.createElement('div');
 			var jTaskbar = $(taskbar.taskbar);
-			taskbar.taskbar.innerHTML = '<div class="navbar-inner"><ul class="nav pull-right"></ul></div>';
-			taskbar.taskbar.className = 'taskbar navbar navbar-fixed-bottom';
+			taskbar.taskbar.innerHTML = '<div class="navbar-inner"><ul class="nav navbar-nav pull-right"></ul></div>';
+			taskbar.taskbar.className = 'taskbar navbar navbar-default navbar-fixed-bottom';
 			taskbar.taskbar.id = 'taskbar';
 
 			taskbar.tasklist = taskbar.taskbar.querySelector('ul');
-			document.body.insertBefore(taskbar.taskbar, footerEl);
+			document.body.insertBefore(taskbar.taskbar, footerEl.nextSibling);
 
 			// Posts bar events
 			jTaskbar.on('click', 'li', function() {

public/src/modules/uploader.js

@@ -0,0 +1,83 @@
+define(function() {
+
+	var module = {};
+
+	module.open = function(route, callback) {
+		$('#upload-picture-modal').modal('show').removeClass('hide');
+		module.hideAlerts();
+
+		$('#uploadForm')[0].reset();
+		$('#uploadForm').attr('action', route);
+
+		$('#pictureUploadSubmitBtn').off('click').on('click', function() {
+			$('#uploadForm').submit();
+		});
+
+		$('#uploadForm').off('submit').submit(function() {
+
+			function status(message) {
+				module.hideAlerts();
+				$('#alert-status').text(message).removeClass('hide');
+			}
+
+			function success(message) {
+				module.hideAlerts();
+				$('#alert-success').text(message).removeClass('hide');
+			}
+
+			function error(message) {
+				module.hideAlerts();
+				$('#alert-error').text(message).removeClass('hide');
+			}
+
+			status('uploading the file ...');
+
+			$('#upload-progress-bar').css('width', '0%');
+			$('#upload-progress-box').show().removeClass('hide');
+
+			if (!$('#userPhotoInput').val()) {
+				error('select an image to upload!');
+				return false;
+			}
+
+			$(this).find('#imageUploadCsrf').val($('#csrf_token').val());
+
+
+			$(this).ajaxSubmit({
+
+				error: function(xhr) {
+					error('Error: ' + xhr.status);
+				},
+
+				uploadProgress: function(event, position, total, percent) {
+					$('#upload-progress-bar').css('width', percent + '%');
+				},
+
+				success: function(response) {
+					if (response.error) {
+						error(response.error);
+						return;
+					}
+					callback(response.path);
+
+					success('File uploaded successfully!');
+					setTimeout(function() {
+						module.hideAlerts();
+						$('#upload-picture-modal').modal('hide');
+					}, 750);
+				}
+			});
+
+			return false;
+		});
+	}
+
+	module.hideAlerts = function() {
+		$('#alert-status').addClass('hide');
+		$('#alert-success').addClass('hide');
+		$('#alert-error').addClass('hide');
+		$('#upload-progress-box').addClass('hide');
+	}
+
+	return module;
+});

public/src/templates.js

@@ -1,5 +1,3 @@
-
-
 (function (module) {
 
 	var config = {},
@@ -59,13 +57,14 @@
 		return template;
 	};
 
-	function loadTemplates(templatesToLoad) {
+	function loadTemplates(templatesToLoad, customTemplateDir) {
 		function loadServer() {
 			var loaded = templatesToLoad.length;
 
+			function getTemplates(directory) {
 				for (var t in templatesToLoad) {
 					(function (file) {
-					fs.readFile(global.configuration.ROOT_DIRECTORY + '/public/templates/' + file + '.tpl', function(err, html) {
+						fs.readFile(directory + '/' + file + '.tpl', function (err, html) {
 							var template = function () {
 								this.toString = function () {
 									return this.html;
@@ -84,14 +83,21 @@
 					}(templatesToLoad[t]));
 				}
 			}
+			if (customTemplateDir) {
+				fs.exists(customTemplateDir, function (exists) {
+					var directory = (exists ? customTemplateDir : __dirname + '/../templates');
+					getTemplates(directory);
+				});
+			} else {
+				getTemplates(__dirname + '/../templates');
+			}
+
+		}
 
 		function loadClient() {
 			jQuery.when(jQuery.getJSON(RELATIVE_PATH + '/templates/config.json'), jQuery.getJSON(RELATIVE_PATH + '/api/get_templates_listing')).done(function (config_data, templates_data) {
 				config = config_data[0];
 				available_templates = templates_data[0];
-
-
-
 				templates.ready();
 			});
 		}
@@ -101,8 +107,8 @@
 	}
 
 
-	templates.init = function(templates_to_load) {
-		loadTemplates(templates_to_load || []);
+	templates.init = function (templates_to_load, custom_templates) {
+		loadTemplates(templates_to_load || [], custom_templates || false);
 	}
 
 	templates.getTemplateNameFromUrl = function (url) {
@@ -119,13 +125,9 @@
 
 	templates.load_template = function (callback, url, template) {
 		var location = document.location || window.location,
-			rootUrl = location.protocol + '//' + (location.hostname || location.host) + (location.port ? ':' + location.port : '');
-
-		var api_url = (url === '' || url === '/') ? 'home' : url;
-
-		var tpl_url = templates.get_custom_map(api_url.split('?')[0]);
-
-		var trimmed = api_url;
+			api_url = (url === '' || url === '/') ? 'home' : url,
+			tpl_url = templates.get_custom_map(api_url.split('?')[0]),
+			trimmed = api_url;
 
 		if (!tpl_url) {
 			tpl_url = templates.getTemplateNameFromUrl(api_url);
@@ -133,8 +135,6 @@
 
 		var template_data = null;
 
-
-		(function() {
 		var timestamp = new Date().getTime(); //debug
 
 		if (!templates[tpl_url]) {
@@ -157,11 +157,7 @@
 			parse_template();
 		}
 
-		}());
-			
-		(function() {
-
-			jQuery.get(API_URL + api_url, function(data) {
+		jQuery.get(RELATIVE_PATH + '/api/' + api_url, function (data) {
 
 			if (!data) {
 				ajaxify.go('404');
@@ -171,11 +167,12 @@
 			template_data = data;
 			parse_template();
 		}).fail(function (data) {
-				template_data = {};
-				parse_template();
+			if(data && data.status == 404) {
+				ajaxify.go('404');
+				return;
+			}
+			app.alertError("Can't load template data!");
 		});
-		}());
-		
 
 		function parse_template() {
 			if (!templates[tpl_url] || !template_data) return;
@@ -185,30 +182,33 @@
 			else
 				template_data['relative_path'] = RELATIVE_PATH;
 
-			document.getElementById('content').innerHTML = templates[tpl_url].parse(template_data);
+			translator.translate(templates[tpl_url].parse(template_data), function (translatedTemplate) {
+
+				$('#content').html(translatedTemplate);
 
 				jQuery('#content [template-variable]').each(function (index, element) {
 					var value = null;
 
-				switch(element.getAttribute('template-type')) {
+					switch ($(element).attr('template-type')) {
 						case 'boolean':
-						value = (element.value === 'true' || element.value === '1') ? true : false;
+							value = ($(element).val() === 'true' || $(element).val() === '1') ? true : false;
 							break;
 						case 'int': // Intentional fall-through
 						case 'integer':
-						value = parseInt(element.value);
+							value = parseInt($(element).val());
 							break;
 						default:
-						value = element.value;
+							value = $(element).val();
 							break;
 					}
 
-				templates.set(element.getAttribute('template-variable'), value);
+					templates.set($(element).attr('template-variable'), value);
 				});
 
 				if (callback) {
 					callback(true);
 				}
+			});
 		}
 
 	}
@@ -235,7 +235,11 @@
 		}
 
 		function makeRegex(block) {
-			return new RegExp("<!-- BEGIN " + block + " -->[^]*<!-- END " + block + " -->", 'g');
+			return new RegExp("<!-- BEGIN " + block + " -->[\\s\\S]*<!-- END " + block + " -->", 'g');
+		}
+
+		function makeConditionalRegex(block) {
+			return new RegExp("<!-- IF " + block + " -->[\\s\\S]*<!-- ENDIF " + block + " -->", 'g');
 		}
 
 		function getBlock(regex, block, template) {
@@ -251,11 +255,25 @@
 			return data;
 		}
 
+		function getConditionalBlock(regex, block, template) {
+			data = template.match(regex);
+			if (data == null) return;
+
+			if (self.blocks && block !== undefined) self.blocks[block] = data[0];
+
+			data = data[0]
+				.replace("<!-- IF " + block + " -->", "")
+				.replace("<!-- ENDIF " + block + " -->", "");
+
+			return data;
+		}
+
 		function setBlock(regex, block, template) {
 			return template.replace(regex, block);
 		}
 
-		var template = this.html, regex, block;
+		var template = this.html,
+			regex, block;
 
 		return (function parse(data, namespace, template) {
 			if (!data || data.length == 0) {
@@ -264,7 +282,9 @@
 
 			for (var d in data) {
 				if (data.hasOwnProperty(d)) {
-					if (data[d] === null) {
+					if (typeof data[d] === 'undefined') {
+						continue;
+					} else if (data[d] === null) {
 						template = replace(namespace + d, '', template);
 					} else if (data[d].constructor == Array) {
 						namespace += d + '.';
@@ -277,7 +297,9 @@
 							continue;
 						}
 
-						var numblocks = data[d].length - 1, i = 0, result = "";
+						var numblocks = data[d].length - 1,
+							i = 0,
+							result = "";
 
 						do {
 							result += parse(data[d][i], namespace, block);
@@ -295,13 +317,21 @@
 						block = parse(data[d], namespace, block);
 						template = setBlock(regex, block, template);
 					} else {
+						var conditional = makeConditionalRegex(d),
+							block = getConditionalBlock(conditional, namespace, template);
+
+						if (block && !data[d]) {
+							template = template.replace(conditional, '');
+						}
+
+
 						template = replace(namespace + d, data[d], template);
 					}
 				}
 			}
 
 			if (namespace) {
-				var regex = new RegExp("{" + namespace + "[^]*?}", 'g');
+				var regex = new RegExp("{" + namespace + "[\\s\\S]*?}", 'g');
 				template = template.replace(regex, '');
 			}
 
@@ -315,7 +345,8 @@
 		templates.init();
 	}
 
-})('undefined' === typeof module ? {module:{exports:{}}} : module)
-
-
-
+})('undefined' === typeof module ? {
+	module: {
+		exports: {}
+	}
+} : module)

public/src/translator.js

@@ -0,0 +1,180 @@
+(function (module) {
+	"use strict";
+	/*global RELATIVE_PATH*/
+
+	/*
+	 * TODO:
+	 *
+	 * 1. language en is hardcoded while system is developed. to switch language packs for now please edit DEFAULT_LANGUAGE
+	 *     b. need to write fallback system to default language if keys are missing (is this even necessary?)
+	 * 2. recursion needed when parsing language keys (ex. topics:modal.delete.title), right now json is all one level deep
+	 * 3. server side settings for default language
+	 * 4. user side settings for preferred language
+	 *
+	 */
+
+	var DEFAULT_LANGUAGE = 'en';
+
+	var translator = {},
+		files = {
+			loaded: {},
+			loading: {},
+			callbacks: {} // could be combined with "loading" in future.
+		},
+		isServer = false;
+
+	module.exports = translator;
+
+	translator.get = function (key, callback) {
+		var parsedKey = key.split(':'),
+			languageFile = parsedKey[0];
+
+		parsedKey = parsedKey[1];
+
+		translator.load(languageFile, function (languageData) {
+			if (callback) {
+				callback(languageData[parsedKey]);
+			}
+
+			return languageData[parsedKey];
+		});
+	};
+
+	translator.mget = function (keys, callback) {
+
+		var async = require('async');
+
+		function getKey(key, callback) {
+			translator.get(key, function(value) {
+				callback(null, value);
+			});
+		}
+
+		async.map(keys, getKey, callback);
+	}
+
+
+	/*
+	 * TODO: Not fully converted to server side yet, ideally server should be able to parse whole templates on demand if necessary
+	 * fix: translator.load should determine if server side and immediately return appropriate language file.
+	 */
+	translator.translate = function (data, callback) {
+		var keys = data.match(/\[\[.*?\]\]/g),
+			loading = 0;
+
+		function insertLanguage(text, key, value, variables) {
+			if (value) {
+				for (var i = 1, ii = variables.length; i < ii; i++) {
+					var variable = variables[i].replace(']]', '');
+					value = value.replace('%' + i, variable);
+				}
+
+				text = text.replace(key, value);
+			}
+
+
+			return text;
+		}
+
+		for (var key in keys) {
+			if (keys.hasOwnProperty(key)) {
+				var variables = keys[key].split(/[,][?\s+]/);
+
+				var parsedKey = keys[key].replace('[[', '').replace(']]', '').split(':');
+				if (!(parsedKey[0] && parsedKey[1])) continue;
+				
+				var languageFile = parsedKey[0];
+				parsedKey = parsedKey[1].split(',')[0];
+
+				if (files.loaded[languageFile]) {
+					data = insertLanguage(data, keys[key], files.loaded[languageFile][parsedKey], variables);
+				} else {
+					loading++;
+					(function (languageKey, parsedKey, languageFile, variables) {
+						translator.load(languageFile, function (languageData) {
+							data = insertLanguage(data, languageKey, languageData[parsedKey], variables);
+							loading--;
+							checkComplete();
+						});
+					}(keys[key], parsedKey, languageFile, variables));
+
+				}
+			}
+		}
+
+		checkComplete();
+
+		function checkComplete() {
+			if (loading === 0) {
+				callback(data);
+			}
+		}
+
+	};
+
+	translator.load = function (filename, callback) {
+		if (isServer === true) {
+			if (callback) {
+				callback(files.loaded[filename]);
+			}
+
+			return files.loaded[filename];
+		}
+
+		if (files.loaded[filename] && !files.loading[filename]) {
+			if (callback) {
+				callback(files.loaded[filename]);
+			}
+		} else if (files.loading[filename]) {
+			if (callback) {
+				files.callbacks[filename] = files.callbacks[filename] || [];
+				files.callbacks[filename].push(callback);
+			}
+		} else {
+			var timestamp = new Date().getTime(); //debug
+
+			files.loading[filename] = true;
+
+			jQuery.getJSON(RELATIVE_PATH + '/language/' + DEFAULT_LANGUAGE + '/' + filename + '.json?v=' + timestamp, function (language) {
+				files.loaded[filename] = language;
+
+				if (callback) {
+					callback(language);
+				}
+
+				while (files.callbacks[filename] && files.callbacks[filename].length) {
+					files.callbacks[filename].pop()(language);
+				}
+
+				files.loading[filename] = false;
+			});
+		}
+	};
+
+	translator.loadServer = function () {
+		isServer = true;
+
+		var utils = require('./utils.js'),
+			path = require('path'),
+			fs = require('fs');
+
+		utils.walk(path.join(__dirname, '../../', 'public/language/' + DEFAULT_LANGUAGE), function (err, data) {
+			var loaded = data.length;
+
+			for (var d in data) {
+				if (data.hasOwnProperty(d)) {
+					files.loaded[path.basename(data[d]).replace('.json', '')] = require(data[d]);
+				}
+			}
+		});
+	};
+
+	if ('undefined' !== typeof window) {
+		window.translator = module.exports;
+	}
+
+})('undefined' === typeof module ? {
+	module: {
+		exports: {}
+	}
+} : module);

public/src/utils.js

@@ -1,39 +1,51 @@
 (function(module) {
+	'use strict';
 
 	var utils, fs;
 
-	try {
+	if ('undefined' === typeof window) {
 		fs = require('fs');
-	} catch (e) {}
+	}
 
 
 	module.exports = utils = {
 		generateUUID: function() {
 			return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
-				var r = Math.random()*16|0, v = c == 'x' ? r : (r&0x3|0x8);
+				var r = Math.random() * 16 | 0,
+					v = c === 'x' ? r : (r & 0x3 | 0x8);
 				return v.toString(16);
 			});
 		},
 
 		//Adapted from http://stackoverflow.com/questions/5827612/node-js-fs-readdir-recursive-directory-search
 		walk: function(dir, done) {
-			var main_dir = global.configuration.ROOT_DIRECTORY + '/public/templates/';
-			var results = [];
+			var results = [],
+				path = require('path'),
+				main_dir = path.join(__dirname, '..', 'templates');
+
 			fs.readdir(dir, function(err, list) {
-				if (err) return done(err);
+				if (err) {
+					return done(err);
+				}
 				var pending = list.length;
-				if (!pending) return done(null, results);
+				if (!pending) {
+					return done(null, results);
+				}
 				list.forEach(function(file) {
 					file = dir + '/' + file;
 					fs.stat(file, function(err, stat) {
 						if (stat && stat.isDirectory()) {
 							utils.walk(file, function(err, res) {
 								results = results.concat(res);
-								if (!--pending) done(null, results);
+								if (!--pending) {
+									done(null, results);
+								}
 							});
 						} else {
-							results.push(file.replace(main_dir, '').replace('.tpl', ''));
-							if (!--pending) done(null, results);
+							results.push(file.replace(main_dir + '/', '').replace('.tpl', ''));
+							if (!--pending) {
+								done(null, results);
+							}
 						}
 					});
 				});
@@ -46,19 +58,29 @@
 
 			difference = Math.floor(difference / 1000);
 
-			if (difference < 60) return difference + (min ? 's' : ' second') + (difference !== 1 && !min ? 's' : '');
+			if (difference < 60) {
+				return difference + (min ? 's' : ' second') + (difference !== 1 && !min ? 's' : '');
+			}
 
 			difference = Math.floor(difference / 60);
-			if (difference < 60) return difference + (min ? 'm' : ' minute') + (difference !== 1 && !min ? 's' : '');
+			if (difference < 60) {
+				return difference + (min ? 'm' : ' minute') + (difference !== 1 && !min ? 's' : '');
+			}
 
 			difference = Math.floor(difference / 60);
-			if (difference < 24) return difference + (min ? 'h' : ' hour') + (difference !== 1 && !min ? 's' : '');
+			if (difference < 24) {
+				return difference + (min ? 'h' : ' hour') + (difference !== 1 && !min ? 's' : '');
+			}
 
 			difference = Math.floor(difference / 24);
-			if (difference < 30) return difference + (min ? 'd' : ' day') + (difference !== 1 && !min ? 's' : '');
+			if (difference < 30) {
+				return difference + (min ? 'd' : ' day') + (difference !== 1 && !min ? 's' : '');
+			}
 
 			difference = Math.floor(difference / 30);
-			if (difference < 12) return difference + (min ? 'mon' : ' month') + (difference !== 1 && !min ? 's' : '');
+			if (difference < 12) {
+				return difference + (min ? 'mon' : ' month') + (difference !== 1 && !min ? 's' : '');
+			}
 
 			difference = Math.floor(difference / 12);
 			return difference + (min ? 'y' : ' year') + (difference !== 1 && !min ? 's' : '');
@@ -91,11 +113,11 @@
 		},
 
 		isUserNameValid: function(name) {
-			return (name && name !== "" && (/^[a-zA-Z0-9 _-]{3,14}$/.test(name)));
+			return (name && name !== "" && (/^['"\s\-.*0-9\u00BF-\u1FFF\u2C00-\uD7FF\w]+$/.test(name)));
 		},
 
 		isPasswordValid: function(password) {
-			return password && password.indexOf(' ') === -1 && password.length > 5;
+			return password && password.indexOf(' ') === -1;
 		},
 
 		// Blatently stolen from: http://phpjs.org/functions/strip_tags/
@@ -113,8 +135,29 @@
 			var tags = '',
 				tag;
 			for (var x = 0, numTags = tagsArr.length; x < numTags; x++) {
-				if (tags.length > 0) tags += "\n\t";
+				if (tags.length > 0) {
+					tags += "\n\t";
+				}
 				tag = '<meta';
+				var y;
+				for (y in tagsArr[x]) {
+					tag += ' ' + y + '="' + tagsArr[x][y] + '"';
+				}
+				tag += ' />';
+
+				tags += tag;
+			}
+
+			return tags;
+		},
+
+		buildLinkTags: function(tagsArr) {
+			var tags = '',
+				tag;
+			for (var x = 0, numTags = tagsArr.length; x < numTags; x++) {
+				if (tags.length > 0) tags += "\n\t";
+				tag = '<link';
+				var y;
 				for (y in tagsArr[x]) {
 					tag += ' ' + y + '="' + tagsArr[x][y] + '"';
 				}
@@ -132,10 +175,14 @@
 				a.href = document.location;
 				url = a.pathname.slice(1);
 			}
+			var notificationIcon;
 
 			socket.emit('api:meta.buildTitle', url, function(title, numNotifications) {
 				document.title = (numNotifications > 0 ? '(' + numNotifications + ') ' : '') + title;
-				if (numNotifications > 0) document.querySelector('.notifications a i').className = 'icon-circle active';
+				notificationIcon = notificationIcon || document.querySelector('.notifications a i');
+				if (numNotifications > 0 && notificationIcon) {
+					notificationIcon.className = 'icon-circle active';
+				}
 			});
 
 			jQuery.getJSON(RELATIVE_PATH + '/api/unread/total', function(data) {
@@ -145,12 +192,11 @@
 				if (data.count > 0) {
 					badge
 						.removeClass('badge-inverse')
-						.addClass('badge-important')
-				}
-				else {
+						.addClass('badge-important');
+				} else {
 					badge
 						.removeClass('badge-important')
-						.addClass('badge-inverse')
+						.addClass('badge-inverse');
 				}
 			});
 		},
@@ -158,29 +204,33 @@
 		isRelativeUrl: function(url) {
 			var firstChar = url.slice(0, 1);
 			return (firstChar === '.' || firstChar === '/');
+		},
+
+		makeNumberHumanReadable: function(num) {
+			num = parseInt(num, 10);
+			if (num > 999999) {
+				return (num / 1000000).toFixed(1) + 'm';
 			}
+			else if(num > 999) {
+				return (num / 1000).toFixed(1) + 'k';
 			}
+			return num;
+		}
+	};
 
 
 	if (!String.prototype.trim) {
-		String.prototype.trim=function(){return this.replace(/^\s+|\s+$/g, '');};
+		String.prototype.trim = function() {
+			return this.replace(/^\s+|\s+$/g, '');
+		};
 	}
 
-	if (!String.prototype.ltrim) {
-		String.prototype.ltrim=function(){return this.replace(/^\s+/,'');};
-	}
-	
-	if (!String.prototype.rtrim) {
-		String.prototype.rtrim=function(){return this.replace(/\s+$/,'');};			
-	}
-	
-	if (!String.prototype.fulltrim) {
-		String.prototype.fulltrim=function(){return this.replace(/(?:(?:^|\n)\s+|\s+(?:$|\n))/g,'').replace(/\s+/g,' ');};			
-	}
-
-	
 	if ('undefined' !== typeof window) {
 		window.utils = module.exports;
 	}
 
-})('undefined' === typeof module ? {module:{exports:{}}} : module)
+})('undefined' === typeof module ? {
+	module: {
+		exports: {}
+	}
+} : module);

public/templates/403.tpl

@@ -1,4 +1,4 @@
-<div class="alert alert-error">
-	<strong>Access Denied</strong>
-	<p>You seem to have stumbled upon a page that you do not have access to. Perhaps you should <a href="/login">try logging in?</a></p>
+<div class="alert alert-danger">
+	<strong>[[global:403.title]]</strong>
+	<p>[[global:403.message]]</p>
 </div>

public/templates/404.tpl

@@ -1,4 +1,4 @@
-<div class="alert alert-error">
-	<strong>Not found</strong>
-	<p>You seem to have stumbled upon a page that does not exist. Return to the <a href="/">home page</a></p>
+<div class="alert alert-danger">
+	<strong>[[global:404.title]]</strong>
+	<p>[[global:404.message]]</p>
 </div>

public/templates/account.tpl

@@ -1,30 +1,30 @@
 
-<div class="well">
+<div class="well account">
 
 	<div class="account-username-box" data-userslug="{userslug}">
 		<span class="account-username">
-			<a href="/users/{userslug}">{username}</a>
+			<a href="/user/{userslug}">{username}</a>
 		</span>
 	</div>
 
-	<div class="row-fluid">
-		<div class="span2 account-block" style="text-align: center; margin-bottom:20px;">
+	<div class="row">
+		<div class="col-md-2 account-block" style="text-align: center; margin-bottom:20px;">
 			<div class="account-picture-block">
-				<img src="{picture}" class="user-profile-picture img-polaroid"/>
+				<img src="{picture}" class="user-profile-picture img-thumbnail"/>
 			</div>
 			<div class="account-online-status">
 				<span><i class="icon-circle-blank"></i> <span>offline</span></span>
 			</div>
 			<div class="{show_banned}">
-				<span class="label label-important">banned</span>
+				<span class="label label-danger">banned</span>
 			</div>
 			<div id="user-actions">
-				<a id="follow-btn" href="#" class="btn hide">Follow</a>
-				<a id="unfollow-btn" href="#" class="btn hide">Unfollow</a>
+				<a id="follow-btn" href="#" class="btn btn-default">Follow</a>
+				<a id="unfollow-btn" href="#" class="btn btn-default">Unfollow</a>
 			</div>
 		</div>
 
-		<div class="span4">
+		<div class="col-md-4">
 			<div class="inline-block">
 				<div class="account-bio-block">
 					<span class="account-bio-label">email</span><i class="icon-eye-close {emailClass}" title="Email hidden"></i>
@@ -47,8 +47,8 @@
 					<span>{age}</span>
 					<br/>
 					<hr/>
-					<span class="account-bio-label">member for</span>
-					<span>{joindate}</span>
+					<span class="account-bio-label">joined</span>
+					<span class="timeago" title="{joindate}"></span>
 					<br/>
 
 					<span class="account-bio-label">profile views</span>
@@ -80,11 +80,11 @@
 			</div>
 		</div>
 
-		<div class="span6 user-recent-posts">
+		<div class="col-md-6 user-recent-posts">
 			<!-- BEGIN posts -->
-			<div class="topic-row img-polaroid clearfix" topic-url="topic/{posts.tid}/#{posts.pid}">
+			<div class="topic-row img-thumbnail clearfix" topic-url="topic/{posts.tid}/#{posts.pid}">
 				<span>{posts.content}</span>
-				<span class="pull-right">{posts.relativeTime} ago</span>
+				<span class="pull-right timeago" title="{posts.relativeTime}"></span>
 			</div>
 			<!-- END posts -->
 		</div>
@@ -98,6 +98,3 @@
 <input type="hidden" template-variable="yourid" value="{yourid}" />
 <input type="hidden" template-variable="theirid" value="{theirid}" />
 <input type="hidden" template-type="boolean" template-variable="isFollowing" value="{isFollowing}" />
-
-<script type="text/javascript" src="{relative_path}/src/forum/account.js"></script>
-<script type="text/javascript" src="{relative_path}/src/forum/accountheader.js"></script>

public/templates/accountedit.tpl

@@ -1,126 +1,97 @@
 
 <div class="well">
 
-
-	<!-- Change Picture Modal -->
-	<div id="change-picture-modal" class="modal hide" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
+	<div id="change-picture-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="Change Picture" aria-hidden="true">
+		<div class="modal-dialog">
+			<div class="modal-content">
 				<div class="modal-header">
 					<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
 					<h3 id="myModalLabel">Change Picture</h3>
 				</div>
 				<div class="modal-body">
-
 					<div id="gravatar-box">
-				<img id="user-gravatar-picture" src="" class="img-polaroid user-profile-picture">
+						<img id="user-gravatar-picture" src="" class="img-thumbnail user-profile-picture">
 						<span class="user-picture-label">Gravatar</span>
 						<i class='icon-ok icon-2x'></i>
 					</div>
 					<br/>
 					<div id="uploaded-box">
-				<img id="user-uploaded-picture" src="" class="img-polaroid user-profile-picture">
+						<img id="user-uploaded-picture" src="" class="img-thumbnail user-profile-picture">
 						<span class="user-picture-label">Uploaded picture</span>
 						<i class='icon-ok icon-2x'></i>
 					</div>
 
 					<a id="uploadPictureBtn" href="#">Upload new picture</a>
-		
 				</div>
-
 				<div class="modal-footer">
-			<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
+					<button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Close</button>
 					<button id="savePictureChangesBtn" class="btn btn-primary">Save changes</button>
 				</div>
-	</div>
-
-	<!-- Upload picture modal-->
-	<div id="upload-picture-modal" class="modal hide" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
-		<div class="modal-header">
-			<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
-			<h3 id="myModalLabel">Upload Picture</h3>
-		</div>
-		<div class="modal-body">
-			
-			<form id="uploadForm" action="{relative_path}/users/uploadpicture" method="post" enctype="multipart/form-data">
-				<input id="userPhotoInput" type="file" name="userPhoto" />
-				<input id="imageUploadCsrf" type="hidden" name="_csrf" value="" />
-			</form>
-			
-			<div id="upload-progress-box" class="progress progress-striped active hide">
-				<div id="upload-progress-bar" class="bar" style="width: 0%;"></div>
-			</div>
-			
-			<div id="alert-status" class="alert hide"></div>
-			<div id="alert-success" class="alert alert-success hide"></div>
-			<div id="alert-error" class="alert alert-error hide"></div>
-	
-		</div>
-		<div class="modal-footer">
-			<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
-			<button id="pictureUploadSubmitBtn" class="btn btn-primary">Upload Picture</button>
-		</div>
-	</div>
+			</div><!-- /.modal-content -->
+		</div><!-- /.modal-dialog -->
+	</div><!-- /.modal -->
 
 	<div class="account-username-box" data-userslug="{userslug}">
 		<span class="account-username">
-			<a href="/users/{userslug}">{username}</a> <i class="icon-chevron-right"></i>
-			<a href="/users/{userslug}/edit">edit</a>
+			<a href="/user/{userslug}">{username}</a> <i class="icon-chevron-right"></i>
+			<a href="/user/{userslug}/edit">edit</a>
 		</span>
 	</div>
 
-	<div class="row-fluid">
-		<div class="span2" style="text-align: center; margin-bottom:20px;">
+	<div class="row">
+		<div class="col-md-2" style="text-align: center; margin-bottom:20px;">
 			<div class="account-picture-block text-center">
-				<img id="user-current-picture" class="user-profile-picture img-polaroid" src="{picture}" /><br/>
+				<img id="user-current-picture" class="user-profile-picture img-thumbnail" src="{picture}" /><br /><br />
 				<a id="changePictureBtn" href="#" class="btn btn-primary">change picture</a>
 			</div>
 		</div>
 
-		<div class="span10">
-			 <div class="inline-block">
+		<div class="col-md-5">
+			<div>
 				<form class='form-horizontal'>
 					<div class="control-group">
 						<label class="control-label" for="inputEmail">Email</label>
 						<div class="controls">
-							<input type="text" id="inputEmail" placeholder="Email" value="{email}">
+							<input class="form-control" type="text" id="inputEmail" placeholder="Email" value="{email}">
 						</div>
 					</div>
 
 					<div class="control-group">
 						<label class="control-label" for="inputFullname">Full Name</label>
 						<div class="controls">
-							<input type="text" id="inputFullname" placeholder="Full Name" value="{fullname}">
+							<input class="form-control" type="text" id="inputFullname" placeholder="Full Name" value="{fullname}">
 						</div>
 					</div>
 
 					<div class="control-group">
 						<label class="control-label" for="inputWebsite">Website</label>
 						<div class="controls">
-							<input type="text" id="inputWebsite" placeholder="http://website.com" value="{website}">
+							<input class="form-control" type="text" id="inputWebsite" placeholder="http://website.com" value="{website}">
 						</div>
 					</div>
 
 					<div class="control-group">
 						<label class="control-label" for="inputLocation">Location</label>
 						<div class="controls">
-							<input type="text" id="inputLocation" placeholder="Location" value="{location}">
+							<input class="form-control" type="text" id="inputLocation" placeholder="Location" value="{location}">
 						</div>
 					</div>
 
 					<div class="control-group">
 						<label class="control-label" for="inputBirthday">Birthday</label>
 						<div class="controls">
-							<input type="date" id="inputBirthday" placeholder="mm/dd/yyyy" value="{birthday}">
+							<input class="form-control" type="date" id="inputBirthday" placeholder="mm/dd/yyyy" value="{birthday}">
 						</div>
 					</div>
 
 					<div class="control-group">
 						<label class="control-label" for="inputSignature">Signature</label>
 						<div class="controls">
-							<textarea id="inputSignature" placeholder="max 150 chars" rows="5">{signature}</textarea>
+							<textarea class="form-control" id="inputSignature" placeholder="max 150 chars" rows="5">{signature}</textarea>
 						</div>
 					</div>
 
-					<input type="hidden" id="inputUID" value="{uid}">
+					<input type="hidden" id="inputUID" value="{uid}"><br />
 
 					<div class="form-actions">
 						<a id="submitBtn" href="#" class="btn btn-primary">Save changes</a>
@@ -128,29 +99,36 @@
 
 				</form>
 			</div>
-			<div class="inline-block" style="vertical-align:top;">
+
+			<hr/>
+		</div>
+
+		<div class="col-md-5">
+			<div style="vertical-align:top;">
 				<form class='form-horizontal'>
 					<div class="control-group">
 						<label class="control-label" for="inputCurrentPassword">Current Password</label>
 						<div class="controls">
-							<input type="password" id="inputCurrentPassword" placeholder="Current Password" value="">
+							<input class="form-control" type="password" id="inputCurrentPassword" placeholder="Current Password" value="">
 						</div>
 					</div>
 
 					<div class="control-group">
 						<label class="control-label" for="inputNewPassword">Password</label>
 						<div class="controls">
-							<input type="password" id="inputNewPassword" placeholder="New Password" value=""><br/><span id="password-notify" class="label label-important"></span>
+							<input class="form-control" type="password" id="inputNewPassword" placeholder="New Password" value="">
+							<div id="password-notify" class="alert alert-danger hide"></div>
 						</div>
 					</div>
 
 					<div class="control-group">
 						<label class="control-label" for="inputNewPasswordAgain">Confirm Password</label>
 						<div class="controls">
-							<input type="password" id="inputNewPasswordAgain" placeholder="Confirm Password" value=""><br/><span id="password-confirm-notify" class="label label-important"></span>
+							<input class="form-control" type="password" id="inputNewPasswordAgain" placeholder="Confirm Password" value="">
+							<div id="password-confirm-notify" class="alert alert-danger hide"></div>
 						</div>
 					</div>
-				
+					<br/>
 					<div class="form-actions">
 						<a id="changePasswordBtn" href="#" class="btn btn-primary">Change Password</a>
 					</div>
@@ -164,6 +142,3 @@
 
 <input type="hidden" template-variable="gravatarpicture" value="{gravatarpicture}" />
 <input type="hidden" template-variable="uploadedpicture" value="{uploadedpicture}" />
-
-<script type="text/javascript" src="{relative_path}/src/forum/accountheader.js"></script>
-<script type="text/javascript" src="{relative_path}/src/forum/accountedit.js"></script>

public/templates/accountsettings.tpl

@@ -3,20 +3,22 @@
 
 	<div class="account-username-box" data-userslug="{userslug}">
 		<span class="account-username">
-			<a href="/users/{userslug}">{username}</a> <i class="icon-chevron-right"></i>
-			<a href="/users/{userslug}/settings">settings</a>
+			<a href="/user/{userslug}">{username}</a> <i class="icon-chevron-right"></i>
+			<a href="/user/{userslug}/settings">settings</a>
 		</span>
 	</div>
 
-	<div class="row-fluid">
-		<div class="span6">
+	<div class="row">
+		<div class="col-md-6">
 			<h4>privacy</h4>
-			<label class="checkbox">
+			<div class="checkbox">
+				<label>
 	      			<input id="showemailCheckBox" type="checkbox" {showemail}> Show my email
 	    		</label>
 	    	</div>
+		</div>
 
-		<div class="span6">
+		<div class="col-md-6">
 
 		</div>
 	</div>
@@ -24,6 +26,3 @@
 		<a id="submitBtn" href="#" class="btn btn-primary">Save changes</a>
 	</div>
 </div>
-
-<script type="text/javascript" src="{relative_path}/src/forum/accountheader.js"></script>
-<script type="text/javascript" src="{relative_path}/src/forum/accountsettings.js"></script>

public/templates/admin/facebook.tpl

@@ -2,20 +2,22 @@
 <hr />
 
 <form>
-	<div class="alert alert-notify">
+	<div class="alert alert-warning">
 		<p>
 			Create a <strong>Facebook Application</strong> via the
 			<a href="https://developers.facebook.com/">Facebook Developers Page</a> and
 			then paste your application details here.
 		</p>
 		<br />
-		<input type="text" data-field="social:facebook:app_id" title="Application ID" class="input-medium" placeholder="App ID"><br />
-		<input type="text" data-field="social:facebook:secret" title="Application Secret" class="input-large" placeholder="App Secret"><br />
+		<input type="text" data-field="social:facebook:app_id" title="Application ID" class="form-control input-lg" placeholder="App ID"><br />
+		<input type="text" data-field="social:facebook:secret" title="Application Secret" class="form-control input-md" placeholder="App Secret"><br />
 	</div>
 </form>
 
-<button class="btn btn-large btn-primary" id="save">Save</button>
+<button class="btn btn-lg btn-primary" id="save">Save</button>
 
 <script>
-	nodebb_admin.prepare();
+	require(['forum/admin/settings'], function(Settings) {
+		Settings.prepare();
+	});
 </script>

public/templates/admin/footer.tpl

@@ -1,12 +1,50 @@
 
 		</div>
 	</div>
+
+	<div id="upload-picture-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="Upload Picture" aria-hidden="true">
+		<div class="modal-dialog">
+			<div class="modal-content">
+				<div class="modal-header">
+					<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
+					<h3 id="myModalLabel">Upload Picture</h3>
+				</div>
+				<div class="modal-body">
+					<form id="uploadForm" action="" method="post" enctype="multipart/form-data">
+						<div class="form-group">
+							<label for="userPhoto">Upload a picture</label>
+							<input type="file" id="userPhotoInput"  name="userPhoto">
+							<p class="help-block">You may only upload PNG, JPG, or GIF files under 256kb.</p>
+						</div>
+						<input id="imageUploadCsrf" type="hidden" name="_csrf" value="" />
+					</form>
+
+					<div id="upload-progress-box" class="progress progress-striped">
+						<div id="upload-progress-bar" class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="0" aria-valuemin="0">
+							<span class="sr-only"> success</span>
+						</div>
+					</div>
+
+					<div id="alert-status" class="alert alert-info hide"></div>
+					<div id="alert-success" class="alert alert-success hide"></div>
+					<div id="alert-error" class="alert alert-danger hide"></div>
+				</div>
+				<div class="modal-footer">
+					<button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Close</button>
+					<button id="pictureUploadSubmitBtn" class="btn btn-primary">Upload Picture</button>
+				</div>
+			</div><!-- /.modal-content -->
+		</div><!-- /.modal-dialog -->
+	</div><!-- /.modal -->
+
+	<div id="alert_window"></div>
+
 	<div id="footer" class="container" style="padding-top: 50px; display:none;">
 		<footer class="footer">Copyright &copy; 2013 <a target="_blank" href="http://www.nodebb.com">NodeBB</a> by <a target="_blank" href="https://github.com/psychobunny">psychobunny</a>, <a href="https://github.com/julianlam" target="_blank">julianlam</a>, <a href="https://github.com/barisusakli" target="_blank">barisusakli</a> from <a target="_blank" href="http://www.designcreateplay.com">designcreateplay</a></footer>
 	</div>
 
 <script type="text/javascript">
-	$.getScript(RELATIVE_PATH + '/src/forum/admin/footer.js');
+	require(['forum/admin/footer']);
 </script>
 
 </body>

public/templates/admin/gplus.tpl

@@ -2,20 +2,22 @@
 <hr />
 
 <form>
-	<div class="alert alert-notify">
+	<div class="alert alert-warning">
 		<p>
 			Create a <strong>Google Application</strong> via the
 			<a href="https://code.google.com/apis/console/">API Console</a> and then paste
 			your application details here.
 		</p>
 		<br />
-		<input type="text" data-field="social:google:id" title="Client ID" class="input-xxlarge" placeholder="Client ID"><br />
-		<input type="text" data-field="social:google:secret" title="Client Secret" class="input-large" placeholder="Client Secret"><br />
+		<input type="text" data-field="social:google:id" title="Client ID" class="form-control input-lg" placeholder="Client ID"><br />
+		<input type="text" data-field="social:google:secret" title="Client Secret" class="form-control" placeholder="Client Secret"><br />
 	</div>
 </form>
 
-<button class="btn btn-large btn-primary" id="save">Save</button>
+<button class="btn btn-lg btn-primary" id="save">Save</button>
 
 <script>
-	nodebb_admin.prepare();
+	require(['forum/admin/settings'], function(Settings) {
+		Settings.prepare();
+	});
 </script>

public/templates/admin/groups.tpl

@@ -0,0 +1,98 @@
+<h1>Groups</h1>
+
+<hr />
+
+<div class="groups">
+	<ul id="groups-list">
+	<!-- BEGIN groups -->
+		<li data-gid="{groups.gid}">
+			<div class="row">
+				<div class="col-lg-8">
+					<h2>{groups.name}</h2>
+					<p>{groups.description}</p>
+					<div class="btn-group">
+						<button class="btn btn-default" data-action="members">Members</button>
+						<button class="btn btn-danger" data-action="delete">Delete Group</button>
+					</div>
+				</div>
+				<div class="col-lg-4">
+					<ul class="pull-right members">
+					<!-- BEGIN members -->
+						<li data-uid="{groups.members.uid}" title="{groups.members.username}"><img src="{groups.members.picture}" /></li>
+					<!-- END members -->
+					</ul>
+				</div>
+			</div>
+		</li>
+	<!-- END groups -->
+	</ul>
+
+	<div class="text-center">
+		<button class="btn btn-primary" id="create">New Group</button>
+	</div>
+
+	<div class="modal fade" id="create-modal">
+		<div class="modal-dialog">
+			<div class="modal-content">
+				<div class="modal-header">
+					<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
+					<h4 class="modal-title">Create Group</h4>
+				</div>
+				<div class="modal-body">
+					<div class="alert alert-danger hide" id="create-modal-error"></div>
+					<form>
+						<div class="form-group">
+							<label for="group-name">Group Name</label>
+							<input type="text" class="form-control" id="create-group-name" placeholder="Group Name" />
+						</div>
+						<div class="form-group">
+							<label for="group-name">Description</label>
+							<input type="text" class="form-control" id="create-group-desc" placeholder="A short description about your group" />
+						</div>
+					</form>
+				</div>
+				<div class="modal-footer">
+					<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
+					<button type="button" class="btn btn-primary" id="create-modal-go">Create</button>
+				</div>
+			</div>
+		</div>
+	</div>
+
+	<div class="modal fade" id="group-details-modal">
+		<div class="modal-dialog">
+			<div class="modal-content">
+				<div class="modal-header">
+					<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
+					<h4 class="modal-title">Manage Group</h4>
+				</div>
+				<div class="modal-body">
+					<div class="alert alert-danger hide" id="create-modal-error"></div>
+					<form>
+						<div class="form-group">
+							<label for="group-name">Group Name</label>
+							<input type="text" class="form-control" id="change-group-name" placeholder="Group Name" />
+						</div>
+						<div class="form-group">
+							<label for="group-name">Description</label>
+							<input type="text" class="form-control" id="change-group-desc" placeholder="A short description about your group" />
+						</div>
+						<div class="form-group">
+							<label>Members</label>
+							<p>Click on a user to remove them from the group</p>
+							<ul class="members current_members" id="group-details-members"></ul>
+						</div>
+						<div class="form-group">
+							<label for="add-member">Add User to Group</label>
+							<input type="text" class="form-control" id="group-details-search" placeholder="Search Users" />
+							<ul class="members" id="group-details-search-results"></ul>
+						</div>
+					</form>
+				</div>
+				<div class="modal-footer">
+					<button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
+				</div>
+			</div>
+		</div>
+	</div>
+</div>

public/templates/admin/header.tpl

@@ -7,7 +7,6 @@
 		var RELATIVE_PATH = "{relative_path}";
 	</script>
 	<link id="base-theme" href="{relative_path}/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
-	<link href="{relative_path}/vendor/bootstrap/css/bootstrap-responsive.min.css" rel="stylesheet" media="screen">
 	<link rel="stylesheet" href="{relative_path}/vendor/fontawesome/css/font-awesome.min.css">
 	<script type="text/javascript" src="http://code.jquery.com/jquery.js"></script>
 	<script type="text/javascript" src="{relative_path}/vendor/bootstrap/js/bootstrap.min.js"></script>
@@ -16,90 +15,133 @@
 	<script type="text/javascript" src="{relative_path}/socket.io/socket.io.js"></script>
 	<script type="text/javascript" src="{relative_path}/src/app.js"></script>
 	<script type="text/javascript" src="{relative_path}/src/templates.js"></script>
+	<script type="text/javascript" src="{relative_path}/src/translator.js"></script>
 	<script type="text/javascript" src="{relative_path}/src/ajaxify.js"></script>
+	<script src="{relative_path}/vendor/jquery/js/jquery.timeago.js"></script>
+	<script src="{relative_path}/vendor/jquery/js/jquery.form.js"></script>
 	<script src="{relative_path}/vendor/requirejs/require.js"></script>
 	<script src="{relative_path}/vendor/bootbox/bootbox.min.js"></script>
+
 	<script>
 		require.config({
 			baseUrl: "{relative_path}/src/modules",
-			waitSeconds: 3
+			waitSeconds: 3,
+			paths: {
+				"forum": '../forum'
+			}
 		});
 	</script>
 	<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
 	<script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
 	<script src="{relative_path}/src/utils.js"></script>
 
-	<link rel="stylesheet" type="text/css" href="{relative_path}/css/style.css" />
-	<link rel="stylesheet" type="text/css" href="{relative_path}/css/admin.css" />
+	<link rel="stylesheet" type="text/css" href="{relative_path}/css/theme.css" />
 </head>
 
 <body class="admin">
-	<div class="navbar navbar-inverse navbar-fixed-top">
-		<div class="navbar-inner">
-			<div class="container-fluid">
-				<a class="brand" href="/admin/index">NodeBB ACP</a>
-				<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
+	<div class="navbar navbar-inverse navbar-fixed-top header">
+		<div class="container">
+			<div class="navbar-header">
+				<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
 					<span class="icon-bar"></span>
 					<span class="icon-bar"></span>
 					<span class="icon-bar"></span>
 				</button>
-				<div class="nav-collapse collapse">
-					<ul class="nav">
-						<li>
-						  <a href="/" target="_blank"><i class="icon-book"></i> Forum</a>
-						</li>
+				<a class="navbar-brand" href="/admin/index">NodeBB ACP</a>
+			</div>
+			<div class="collapse navbar-collapse">
+				<ul class="nav navbar-nav">
 					<li>
 						<a href="/admin/index"><i class="icon-home"></i> Home</a>
 					</li>
 					<li>
 						<a href="/admin/settings"><i class="icon-cogs"></i> Settings</a>
 					</li>
+					<li>
+						<a href="/" target="_top"><i class="icon-book"></i> Forum</a>
+					</li>
+					<li>
+						<a href="#" id="reconnect"></a>
+					</li>
 				</ul>
-					<ul class="nav pull-right" id="right-menu">
-						<li><a href="/users" id="user_label"></a></li>
+
+				<ul id="logged-in-menu" class="nav navbar-nav navbar-right">
+					<li id="user_label" class="dropdown">
+						<a class="dropdown-toggle" data-toggle="dropdown" href="#" id="user_dropdown">
+							<img src="{userpicture}"/>
+						</a>
+						<ul id="user-control-list" class="dropdown-menu" aria-labelledby="user_dropdown">
+							<li>
+								<a id="user-profile-link" href="/user/{userslug}" target="_top"><span>Profile</span></a>
+							</li>
+							<li id="logout-link">
+								<a href="#">Log out</a>
+							</li>
+						</ul>
+					</li>
+
 				</ul>
 			</div>
 		</div>
 	</div>
-	</div>
 
-	<div id="alert_window"></div>
+	<input id="csrf_token" type="hidden" template-variable="csrf" value="{csrf}" />
 
-	<div class="container-fluid">
-		<div class="row-fluid">
-			<div class="span3">
+	<div class="container">
+		<div class="row">
+			<div class="col-md-3">
 				<div class="well sidebar-nav">
 					<ul class="nav nav-list">
 						<li class="nav-header">NodeBB</li>
-						<li class='active'><a href='{relative_path}/admin/index'><i class='icon-home'></i> Home</a></li>
-						<li class=''><a href='{relative_path}/admin/categories/active'><i class='icon-folder-close-alt'></i> Categories</a></li>
-						<li class=''><a href='{relative_path}/admin/users/latest'><i class='icon-user'></i> Users</a></li>
-						<li class=''><a href='{relative_path}/admin/topics'><i class='icon-book'></i> Topics</a></li>
-						<li class=''><a href='{relative_path}/admin/themes'><i class='icon-th'></i> Themes</a></li>
-						<li class=''><a href='{relative_path}/admin/plugins'><i class='icon-code-fork'></i> Plugins</a></li>
-						<li class=''><a href='{relative_path}/admin/settings'><i class='icon-cogs'></i> Settings</a></li>
-						<li class=''><a href='{relative_path}/admin/redis'><i class='icon-hdd'></i> Redis</a></li>
-						<li class=''><a href="{relative_path}/admin/motd"><i class="icon-comment"></i> MOTD</a></li>
-
+						<li class='active'>
+							<a href='{relative_path}/admin/index'><i class='icon-home'></i> Home</a>
+						</li>
+						<li><a href='{relative_path}/admin/categories/active'><i class='icon-folder-close-alt'></i> Categories</a></li>
+						<li><a href='{relative_path}/admin/users/latest'><i class='icon-user'></i> Users</a></li>
+						<li><a href="{relative_path}/admin/groups"><i class="icon-group"></i> Groups</a></li>
+						<li><a href='{relative_path}/admin/topics'><i class='icon-book'></i> Topics</a></li>
+						<li><a href='{relative_path}/admin/themes'><i class='icon-th'></i> Themes</a></li>
+						<li><a href='{relative_path}/admin/plugins'><i class='icon-code-fork'></i> Plugins</a></li>
+						<li><a href='{relative_path}/admin/settings'><i class='icon-cogs'></i> Settings</a></li>
+						<li><a href='{relative_path}/admin/redis'><i class='icon-hdd'></i> Redis</a></li>
+						<li><a href='{relative_path}/admin/logger'><i class='icon-th'></i> Logger</a></li>
+						<li><a href="{relative_path}/admin/motd"><i class="icon-comment"></i> MOTD</a></li>
+					</ul>
+				</div>
+				<div class="well sidebar-nav">
+					<ul class="nav nav-list">
 						<li class="nav-header">Social Authentication</li>
-						<li class=''><a href='{relative_path}/admin/twitter'><i class='icon-twitter-sign'></i> Twitter</a></li>
-						<li class=''><a href='{relative_path}/admin/facebook'><i class='icon-facebook-sign'></i> Facebook</a></li>
-						<li class=''><a href='{relative_path}/admin/gplus'><i class='icon-google-plus-sign'></i> Google+</a></li>
-						<!--<li class="nav-header">Custom Modules</li>-->
-						<!-- <li class=''><a href=''>Search</a></li> -->
+						<li><a href='{relative_path}/admin/twitter'><i class='icon-twitter-sign'></i> Twitter</a></li>
+						<li><a href='{relative_path}/admin/facebook'><i class='icon-facebook-sign'></i> Facebook</a></li>
+						<li><a href='{relative_path}/admin/gplus'><i class='icon-google-plus-sign'></i> Google+</a></li>
+					</ul>
+				</div>
+				<div class="well sidebar-nav">
+					<ul class="nav nav-list">
+						<li class="nav-header">Plugins</li>
+						<!-- BEGIN plugins -->
+						<li>
+							<a href='{relative_path}/admin{plugins.route}'><i class="{plugins.icon}"></i> {plugins.name}</a>
+						</li>
+						<!-- END plugins -->
+					</ul>
+				</div>
+				<div class="well sidebar-nav">
+					<ul class="nav nav-list">
 						<li class="nav-header">Unit Tests</li>
 						<ul class="nav nav-list">
-							<li class=''><a href='{relative_path}/admin/testing/categories'>Categories</a></li>
-							<!--<li class=''><a href='{relative_path}/admin/testing/topics'>Topics</a></li>
-							<li class=''><a href='{relative_path}/admin/testing/posts'>Posts</a></li>
-							<li class=''><a href='{relative_path}/admin/testing/accounts'>Accounts</a></li>
-							<li class=''><a href='{relative_path}/admin/testing/chat'>Chat</a></li>
-							<li class=''><a href='{relative_path}/admin/testing/notifications'>Notifications</a></li>
-							<li class=''><a href='{relative_path}/admin/testing/friends'>Friends</a></li>
-							<li class=''><a href='{relative_path}/admin/testing/feed'>RSS Feed</a></li>
-							<li class=''><a href='{relative_path}/admin/testing/emails'>Emails</a></li>-->
+							<li><a href='{relative_path}/admin/testing/categories'>Categories</a></li>
+							<!--<li><a href='{relative_path}/admin/testing/topics'>Topics</a></li>
+							<li><a href='{relative_path}/admin/testing/posts'>Posts</a></li>
+							<li><a href='{relative_path}/admin/testing/accounts'>Accounts</a></li>
+							<li><a href='{relative_path}/admin/testing/chat'>Chat</a></li>
+							<li><a href='{relative_path}/admin/testing/notifications'>Notifications</a></li>
+							<li><a href='{relative_path}/admin/testing/friends'>Friends</a></li>
+							<li><a href='{relative_path}/admin/testing/feed'>RSS Feed</a></li>
+							<li><a href='{relative_path}/admin/testing/emails'>Emails</a></li>-->
 						</ul>
 					</ul>
 				</div><!--/.well -->
 			</div><!--/span-->
-			<div class="span9" id="content">
+
+			<div class="col-md-9" id="content">

public/templates/admin/index.tpl

@@ -1,14 +1,14 @@
 
-<div class="hero-unit">
+<div class="jumbotron">
 	<h1>Welcome to NodeBB</h1>
 	<br />
 	<p>
-		<a target="_blank" href="http://www.nodebb.org" class="btn btn-large"><i class="icon-comment"></i> NodeBB Forum</a>
-		<a target="_blank" href="http://www.nodebb.org" class="btn btn-large"><i class="icon-github-alt"></i> Get Plugins</a>
-		<a target="_blank" href="http://www.nodebb.org" class="btn btn-large"><i class="icon-github-alt"></i> Get Themes</a>
-		<a target="_blank" href="http://www.nodebb.org" class="btn btn-large"><i class="icon-twitter"></i> dcplabs</a>
+		<a target="_blank" href="http://www.nodebb.org" class="btn btn-default btn-lg"><i class="icon-comment"></i> NodeBB Forum</a>
+		<a target="_blank" href="http://www.nodebb.org" class="btn btn-default btn-lg"><i class="icon-github-alt"></i> Get Plugins</a>
+		<a target="_blank" href="http://www.nodebb.org" class="btn btn-default btn-lg"><i class="icon-github-alt"></i> Get Themes</a>
+		<a target="_blank" href="http://www.nodebb.org" class="btn btn-default btn-lg"><i class="icon-twitter"></i> dcplabs</a>
 	</p>
-	<p><small>You are running <strong>NodeBB v{version}</strong>. This is where we will check to make sure your <strong>NodeBB</strong> is latest, etc.</small></p>
+	<p><small>You are running <strong>NodeBB v{version}</strong>. Always make sure that your <strong>NodeBB</strong> is up to date for the latest security patches and bug fixes.</small></p>
 </div>
 
 
@@ -18,5 +18,3 @@
 
 	</p>
 </div>
-
-<script type="text/javascript" src="{relative_path}/src/forum/admin/index.js"></script>

public/templates/admin/logger.tpl

@@ -0,0 +1,46 @@
+<h1>Logger</h1>
+<hr />
+
+<h3>Logger Settings</h3>
+<div class="alert alert-warning">
+
+    <p>
+		By enabling the check boxes, you will receive logs to your terminal. If you specify a path, logs will then be saved to a file instead. HTTP logging is useful for collecting statistics about who, when, and what people access on your forum. In addition to logging HTTP requests, we can also log socket.io events. Socket.io logging, in combination with redis-cli monitor, can be very helpful for learning NodeBB's internals.
+    </p>
+	<br/>
+	<p>
+		Simply check/uncheck the logging settings to enable or disable logging on the fly. No restart needed.
+	</p>
+	<br/>
+
+	<form>
+
+		<label>
+			<input type="checkbox" data-field="loggerStatus"> <strong>Enable HTTP logging</strong>
+		</label>
+		<br/>
+		<br/>
+
+		<label>
+			<input type="checkbox" data-field="loggerIOStatus"> <strong>Enable socket.io event logging</strong>
+		</label>
+		<br/>
+		<br/>
+
+
+		<label>Path to log file</label>
+		<input class="form-control" type="text" placeholder="/path/to/log/file.log ::: leave blank to log to your terminal" data-field="loggerPath" />
+		<br />
+		<br/>
+		<br/>
+
+	</form>
+</div>
+
+<button class="btn btn-lg btn-primary" id="save">Save</button>
+
+<script>
+	require(['forum/admin/settings'], function(Settings) {
+		Settings.prepare();
+	});
+</script>

public/templates/admin/motd.tpl

@@ -1,7 +1,7 @@
 
 <h1>MOTD</h1>
-
-<div class="alert motd">
+<hr />
+<div class="alert alert-warning motd">
 	<p>
 		The <strong>Message of the Day</strong> (MOTD) is typically a message shown to users when they first log into a forum or chat room.
 		In NodeBB, the MOTD is present at the top of the forum homepage, and can be customized much like a header.
@@ -9,14 +9,22 @@
 	<p>
 		You can enter either full HTML or Markdown text.
 	</p>
-	<textarea placeholder="Welcome to NodeBB!" data-field="motd" rows="10"></textarea>
+	<br />
+	<textarea class="form-control" placeholder="Welcome to NodeBB!" data-field="motd" rows="10"></textarea>
+	<br />
 	<form class="form-inline">
-		<label class="checkbox" for="show_motd"><input type="checkbox" id="show_motd" data-field="show_motd" /> Show the Message of the Day</label>
+		<div class="checkbox">
+			<label for="show_motd">
+				<input type="checkbox" id="show_motd" data-field="show_motd" /> Show the Message of the Day
+			</label>
+		</div>
 	</form>
 </div>
 
-<button class="btn btn-large btn-primary" id="save" checked>Save</button>
+<button class="btn btn-lg btn-primary" id="save" checked>Save</button>
 
 <script>
-	nodebb_admin.prepare();
+	require(['forum/admin/settings'], function(Settings) {
+		Settings.prepare();
+	});
 </script>

public/templates/admin/plugins.tpl

@@ -13,13 +13,11 @@
 	<!-- END plugins -->
 </ul>
 
-<div class="alert">
+<div class="alert alert-warning">
 	<p>
-		<strong>Interesed in writing plugins for NodeBB?</strong>
+		<strong>Interested in writing plugins for NodeBB?</strong>
 	</p>
 	<p>
 		Full documentation regarding plugin authoring can be found in the <a target="_blank" href="https://github.com/designcreateplay/NodeBB/wiki/Writing-Plugins-for-NodeBB">NodeBB Wiki</a>.
 	</p>
 </div>
-
-<script type="text/javascript" src="{relative_path}/src/forum/admin/plugins.js"></script>

public/templates/admin/settings.tpl

@@ -2,66 +2,94 @@
 <hr />
 
 <h3>General Settings</h3>
-<div class="alert">
+<div class="alert alert-warning">
 	<form>
 		<label>Site Title</label>
-		<input type="text" placeholder="Your Community Name" data-field="title" />
+		<input class="form-control" type="text" placeholder="Your Community Name" data-field="title" /><br />
 		<label>Site Description</label>
-		<input type="text" class="input-xxlarge" placeholder="A short description about your community" data-field="description" />
+		<input type="text" class="form-control" placeholder="A short description about your community" data-field="description" /><br />
+		<label>Site Keywords</label>
+		<input type="text" class="form-control" placeholder="Keywords describing your community, comma-seperated" data-field="keywords" /><br />
+		<label>Site Logo</label>
+		<input id="logoUrl" type="text" class="form-control" placeholder="Path to a logo to display on forum header" data-field="brand:logo" /><br />
+		<input id="uploadLogoBtn" type="button" class="btn btn-default" value="Upload"></input> <br />
 		<label>Imgur Client ID</label>
-		<input type="text" class="input-xxlarge" placeholder="Imgur ClientID for image uploads" data-field="imgurClientID" />
+		<input type="text" class="form-control" placeholder="Imgur ClientID for image uploads" data-field="imgurClientID" /><br />
+		<label>Maximum User Image Size</label>
+		<input type="text" class="form-control" placeholder="Maximum size of uploaded user images in kilobytes" data-field="maximumProfileImageSize" />
 	</form>
 </div>
 
 <form>
 	<h3>Privilege Thresholds</h3>
-	<div class="alert alert-notify">
+	<div class="alert alert-warning">
 		<p>Use <strong>privilege thresholds</strong> to manage how much reputation a user must gain to receive moderator access.</p><br />
-		<strong>Manage Thread</strong><br /> <input type="text" class="" value="1000"><br />
-		<strong>Moderate Users</strong><br /> <input type="text" class="" value="10000"><br />
-		<strong>Create Pinned Topics</strong><br /> <input type="text" class="" value="100000"><br />
-		
+		<strong>Manage Thread</strong><br /> <input type="text" class="form-control" value="1000" data-field="privileges:manage_topic"><br />
+		<strong>Manage Content</strong><br /> <input type="text" class="form-control" value="1000" data-field="privileges:manage_content"><br />
 	</div>
 </form>
 
 <form>
 	<h3>Email Settings</h3>
-	<div class="alert alert-notify">
+	<div class="alert alert-warning">
 		<div>
 			<p>
 				<strong>Email Address</strong><br />
 				The following email address refers to the email that the recipient will see in the "From" and "Reply To" fields.
 			</p>
-			<input type="text" class="input-large" data-field="email:from" placeholder="info@example.org" />
+			<input type="text" class="form-control input-lg" data-field="email:from" placeholder="info@example.org" /><br />
 		</div>
 		<div>
 			<p>
 				<strong>SMTP Server Host</strong><br />
 				(Default: <em>127.0.0.1</em>)
 			</p>
-			<input type="text" class="input-medium" data-field="email:smtp:host" placeholder="127.0.0.1" />
+			<input type="text" class="form-control input-md" data-field="email:smtp:host" placeholder="127.0.0.1" /><br />
 		</div>
 		<div>
 			<p>
 				<strong>SMTP Server Port</strong>
 			</p>
-			<input type="text" class="input-mini" data-field="email:smtp:port" placeholder="25" />
+			<input type="text" class="form-control input-md" data-field="email:smtp:port" placeholder="25" /><br />
 		</div>
 	</div>
 </form>
 
 <form>
-	<h3>Post Settings</h3>
-	<div class="alert alert-notify">
-		<strong>Post Delay</strong><br /> <input type="text" class="" value="10000" data-field="postDelay"><br />
-		<strong>Minimum Title Length</strong><br /> <input type="text" class="" value="3" data-field="minimumTitleLength"><br />
-		<strong>Minimum Post Length</strong><br /> <input type="text" class="" value="8" data-field="minimumPostLength"><br />
-		
+	<h3>User Settings</h3>
+	<div class="alert alert-warning">
+		<strong>Minimum Username Length</strong><br />
+		<input type="text" class="form-control" value="2" data-field="minimumUsernameLength"><br />
+		<strong>Maximum Username Length</strong><br />
+		<input type="text" class="form-control" value="16" data-field="maximumUsernameLength"><br />
+		<strong>Minimum Password Length</strong><br />
+		<input type="text" class="form-control" value="6" data-field="minimumPasswordLength"><br />
 	</div>
 </form>
 
-<button class="btn btn-large btn-primary" id="save">Save</button>
+<form>
+	<h3>Post Settings</h3>
+	<div class="alert alert-warning">
+		<strong>Post Delay</strong><br /> <input type="text" class="form-control" value="10000" data-field="postDelay"><br />
+		<strong>Minimum Title Length</strong><br /> <input type="text" class="form-control" value="3" data-field="minimumTitleLength"><br />
+		<strong>Minimum Post Length</strong><br /> <input type="text" class="form-control" value="8" data-field="minimumPostLength"><br />
+		<div class="checkbox">
+			<label>
+				<input type="checkbox" data-field="allowGuestPosting"> <strong>Allow guests to post without logging in</strong>
+			</label>
+		</div>
+		<div class="checkbox">
+			<label>
+				<input type="checkbox" data-field="useOutgoingLinksPage"> <strong>Use Outgoing Links Warning Page</strong>
+			</label>
+		</div>
+	</div>
+</form>
+
+<button class="btn btn-lg btn-primary" id="save">Save</button>
 
 <script>
-	nodebb_admin.prepare();
+	require(['forum/admin/settings'], function(Settings) {
+		Settings.prepare();
+	});
 </script>

public/templates/admin/testing/categories.tpl

@@ -10,7 +10,7 @@ jQuery(document).ready(function () {
 	QUnit.init();
 	asyncTest( "Loading Categories", function() {
 
-		jQuery.get(config.api_url + 'home', function(data) {
+		jQuery.get(RELATIVE_PATH + '/api/home', function(data) {
 			ok( data.categories.length > 0, JSON.stringify(data.categories) );
 
 			start();
@@ -20,7 +20,7 @@ jQuery(document).ready(function () {
 					slug = 'category/' + category.slug;
 
 				asyncTest( "Loading Category '" + category.name + "' located at " + slug, function() {
-					jQuery.get(config.api_url + slug, function(data) {
+					jQuery.get(RELATIVE_PATH + '/api/' + slug, function(data) {
 						ok( data.category_name, JSON.stringify(data) ); //todo: check this against data.categories
 						start();
 					});

public/templates/admin/themes.tpl

@@ -23,4 +23,10 @@
 	<button class="btn btn-warning" id="revert_theme">Revert</button> This will remove any custom theme applied to your NodeBB, and restore the base theme.
 </p>
 
-<script type="text/javascript" src="{relative_path}/src/forum/admin/themes.js"></script>
+<script>
+	var bootswatchListener = function(data) {
+		require(['forum/admin/themes'], function(t) {
+			t.render(data);
+		});
+	}
+</script>

public/templates/admin/topics.tpl

@@ -11,7 +11,7 @@
 		</div>
 		<a target="_blank" href="{relative_path}/topic/{topics.slug}">{topics.title}</a>
 		<ul>
-			<li><i class="icon-time"></i> Posted {topics.relativeTime} ago by {topics.username}</li>
+			<li><i class="icon-time"></i> Posted <span class="timeago" title="{topics.relativeTime}"></span> by {topics.username}</li>
 			<li><i class="icon-comments"></i> {topics.postcount} post(s)</li>
 		</ul>
 		<div class="clear"></div>
@@ -20,7 +20,5 @@
 </ul>
 
 <div class="text-center">
-	<button id="topics_loadmore" class="btn btn-large">Load More Topics</button>
+	<button id="topics_loadmore" class="btn btn-primary btn-lg">Load More Topics</button>
 </div>
-
-<script type="text/javascript" src="{relative_path}/src/forum/admin/topics.js"></script>

public/templates/admin/twitter.tpl

@@ -2,20 +2,22 @@
 <hr />
 
 <form>
-	<div class="alert alert-notify">
+	<div class="alert alert-warning">
 		<p>
 			Create a <strong>Twitter Application</strong> via the
 			<a href="https://dev.twitter.com/">Twitter Developers Page</a> and then
 			paste your application details here.
 		</p>
 		<br />
-		<input type="text" data-field="social:twitter:key" title="Consumer Key" class="input-large" placeholder="Consumer Key"><br />
-		<input type="text" data-field="social:twitter:secret" title="Consumer Secret" class="input-xlarge" placeholder="Consumer Secret">
+		<input type="text" data-field="social:twitter:key" title="Consumer Key" class="form-control input-lg" placeholder="Consumer Key"><br />
+		<input type="text" data-field="social:twitter:secret" title="Consumer Secret" class="form-control input-md" placeholder="Consumer Secret">
 	</div>
 </form>
 
-<button class="btn btn-large btn-primary" id="save">Save</button>
+<button class="btn btn-lg btn-primary" id="save">Save</button>
 
 <script>
-	nodebb_admin.prepare();
+	require(['forum/admin/settings'], function(Settings) {
+		Settings.prepare();
+	});
 </script>

public/templates/admin/users.tpl

@@ -7,47 +7,38 @@
 	<li class=''><a href='/admin/users/search'>Search</a></li>
 </ul>
 
-
+<br />
 <div class="search {search_display} well">
-	<input id="search-user" type="text" placeholder="Enter a username to search"/><br />
+	<input class="form-control" id="search-user" type="text" placeholder="Enter a username to search"/><br />
 	<i class="icon-spinner icon-spin none"></i>
-	<span id="user-notfound-notify" class="label label-important hide">User not found!</span><br/>
+	<span id="user-notfound-notify" class="label label-danger hide">User not found!</span><br/>
 </div>
 
-<ul id="users-container" class="users">
+<ul id="users-container" class="users admin">
 	<!-- BEGIN users -->
 	<div class="users-box" data-uid="{users.uid}" data-admin="{users.administrator}" data-username="{users.username}" data-banned="{users.banned}">
-		<a href="/users/{users.userslug}">
-			<img src="{users.picture}" class="img-polaroid"/>
+		<a href="/user/{users.userslug}">
+			<img src="{users.picture}" class="img-thumbnail"/>
 		</a>
 		<br/>
-		<a href="/users/{users.userslug}">{users.username}</a>
+		<a href="/user/{users.userslug}">{users.username}</a>
 		<br/>
 		<div title="reputation">
-			<span id='reputation'>{users.reputation}</span>
 			<i class='icon-star'></i>
+			<span id='reputation'>{users.reputation}</span>
 		</div>
 		<div title="post count">
-			<span id='postcount'>{users.postcount}</span>
 			<i class='icon-pencil'></i>
+			<span id='postcount'>{users.postcount}</span>
 		</div>
 		<div>
-			<a href="#" class="btn admin-btn">Admin</a>
-		</div>
-		<div>
-			<a href="#" class="btn delete-btn btn-danger">Delete</a>
-		</div>
-		<div>
-			<a href="#" class="btn ban-btn">Ban</a>
+			<a href="#" class="btn btn-default ban-btn">Ban</a>
 		</div>
 	</div>
 	<!-- END users -->
 </ul>
 
 <div class="text-center {loadmore_display}">
-	<button id="load-more-users-btn" class="btn">Load More</button>
+	<button id="load-more-users-btn" class="btn btn-primary">Load More</button>
 </div>
 <input type="hidden" template-variable="yourid" value="{yourid}" />
-
-
-<script type="text/javascript" src="{relative_path}/src/forum/admin/users.js"></script>

public/templates/category.tpl

@@ -1,21 +1,17 @@
-<div class="container">
-	<ul class="breadcrumb">
+<ol class="breadcrumb">
 	<li itemscope="itemscope" itemtype="http://data-vocabulary.org/Breadcrumb">
-			<a href="/" itemprop="url"><span itemprop="title">Home</span></a>
-			<span class="divider">/</span>
+		<a href="/" itemprop="url"><span itemprop="title">[[global:home]]</span></a>
 	</li>
 	<li class="active" itemscope="itemscope" itemtype="http://data-vocabulary.org/Breadcrumb">
-			<span itemprop="title">{category_name}</span>
+		<span itemprop="title">{category_name} <a target="_blank" href="../{category_id}.rss"><i class="icon-rss-sign"></i></a></span>
 	</li>
 	<div id="category_active_users"></div>
-	</ul>
-</div>
+</ol>
 
 <div>
-	<button id="new_post" class="btn btn-primary btn-large {show_topic_button}">New Topic</button>
+	<button id="new_post" class="btn btn-primary btn-lg {show_topic_button}">[[category:new_topic_button]]</button>
 
 	<div class="inline-block pull-right">
-		<a target="_blank" href="../{category_id}.rss"><i class="icon-rss-sign icon-2x"></i></a>&nbsp;
 		<a href="#" id="facebook-share"><i class="icon-facebook-sign icon-2x"></i></a>&nbsp;
 		<a href="#" id="twitter-intent"><i class="icon-twitter-sign icon-2x"></i></a>&nbsp;
 		<a href="#" id="google-share"><i class="icon-google-plus-sign icon-2x"></i></a>&nbsp;
@@ -25,74 +21,104 @@
 <hr/>
 
 <div class="alert alert-warning hide {no_topics_message}" id="category-no-topics">
-	<strong>There are no topics in this category.</strong><br />
-	Why don't you try posting one?
+	[[category:no_topics]]
 </div>
 
 <div class="category row">
 	<div class="{topic_row_size}">
-		<ul id="topics-container">
+		<ul id="topics-container" itemscope itemtype="http://www.schema.org/ItemList">
+			<meta itemprop="itemListOrder" content="descending">
 			<!-- BEGIN topics -->
-		<a href="../../topic/{topics.slug}"><li class="category-item {topics.deleted-class}">
-			<div class="row-fluid">
-				<!-- <div class="span1 thread-rating hidden-phone hidden-tablet">
-					<span>
-						<i class="icon-star icon-3x"></i><br />
-						38
-					</span>
-				</div> -->
-				<div class="span12 topic-row">
-					<div class="latest-post visible-desktop">
-						<div class="pull-right">
-							<img style="width: 48px; height: 48px; /*temporary*/" src="{topics.teaser_userpicture}" />
-							<p><strong>{topics.teaser_username}</strong>: {topics.teaser_text}</p>
-							<span>posted {topics.teaser_timestamp} ago</span>
-						</div>
-					</div>
+			<li class="category-item {topics.deleted-class}" itemprop="itemListElement">
+				<div class="row">
+					<div class="col-md-12 topic-row">
 						<div>
-						<h3><span class="topic-title"><span class="badge {topics.badgeclass}">{topics.postcount}</span>{topics.title}</span></h3>
-						<small>
+							<a href="../../topic/{topics.slug}" itemprop="url">
+								<h3>
+									<meta itemprop="name" content="{topics.title}">
+
+									<span class="topic-title">
 										<strong><i class="{topics.pin-icon}"></i> <i class="{topics.lock-icon}"></i></strong>
-							Posted {topics.relativeTime} ago by 
-							<strong>{topics.username}</strong>.
+										{topics.title}
+									</span>
+								</h3>
+							</a>
+							<small>
+								<span class="topic-stats">
+									posts
+									<strong>{topics.postcount}</strong>
+								</span>
+								|
+								<span class="topic-stats">
+									views
+									<strong>{topics.viewcount}</strong>
+								</span>
+								|
+								<span>
+									<a href="/user/{topics.userslug}">
+										<img class="teaser-pic" src="{topics.picture}" title="{topics.username}"/>
+									</a>
+									posted <span class="timeago" title="{topics.relativeTime}"></span>
+								</span>
+
+								<span class="pull-right hidden-xs">
+									<a href="/user/{topics.teaser_userslug}">
+										<img class="teaser-pic" src="{topics.teaser_userpicture}" title="{topics.teaser_username}"/>
+									</a>
+									<a href="../../topic/{topics.slug}#{topics.teaser_pid}">
+										replied
+									</a>
+									<span class="timeago" title="{topics.teaser_timestamp}"></span>
+
+								</span>
 							</small>
 						</div>
 					</div>
 				</div>
-		</li></a>
+			</li>
 			<!-- END topics -->
 		</ul>
 	</div>
-	<div class="span3 {show_sidebar} category-sidebar mobile-sidebar">
+	<div class="col-md-3 {show_sidebar} category-sidebar">
 
-		<div class="sidebar-block img-polaroid">
+		<div class="sidebar-block img-thumbnail">
 			<div class="block-header">
-				Recent Replies
+				[[category:sidebar.recent_replies]]
 			</div>
 			<div class="block-content recent-replies">
 				<ul id="category_recent_replies"></ul>
 			</div>
 		</div>
-		<div class="sidebar-block img-polaroid">
+		<div class="sidebar-block img-thumbnail">
 			<div class="block-header">
-				Active Participants
+				[[category:sidebar.active_participants]]
 			</div>
-			<div class="block-content">
+			<div class="block-content active-users">
 				<!-- BEGIN active_users -->
-				<a href="/users/{active_users.userslug}"><img title="{active_users.username}" src="{active_users.picture}" class="img-polaroid" /></a>
+				<a data-uid="{active_users.uid}" href="/user/{active_users.userslug}"><img title="{active_users.username}" src="{active_users.picture}" class="img-rounded" /></a>
 				<!-- END active_users -->
 			</div>
 		</div>
-		<div class="sidebar-block img-polaroid {moderator_block_class}">
+		<div class="sidebar-block img-thumbnail {moderator_block_class}">
 			<div class="block-header">
-				Moderators
+				[[category:sidebar.moderators]]
 			</div>
 			<div class="block-content">
 				<!-- BEGIN moderators -->
-				<a href="/users/{moderators.userslug}"><img title="{moderators.username}" src="{moderators.picture}" class="img-polaroid" /></a>
+				<a href="/user/{moderators.userslug}"><img title="{moderators.username}" src="{moderators.picture}" class="img-rounded" /></a>
 				<!-- END moderators -->
 			</div>
 		</div>
+		<!-- BEGIN sidebars -->
+		<div class="sidebar-block img-thumbnail {sidebars.block_class}">
+			<div class="block-header">
+				{sidebars.header}
+			</div>
+			<div class="block-content">
+				{sidebars.content}
+			</div>
+		</div>
+		<!-- END sidebars -->
 	</div>
 </div>
 
@@ -100,5 +126,3 @@
 <input type="hidden" template-variable="twitter-intent-url" value="{twitter-intent-url}" />
 <input type="hidden" template-variable="facebook-share-url" value="{facebook-share-url}" />
 <input type="hidden" template-variable="google-share-url" value="{google-share-url}" />
-
-<script type="text/javascript" src="{relative_path}/src/forum/category.js"></script>

public/templates/config.json

@@ -1,41 +1,34 @@
 {
 	"custom_mapping": {
-		"admin/testing/categories[^]*": "admin/testing/categories",
-		"admin/topics[^]*": "admin/topics",
-		"admin/categories[^]*": "admin/categories",
-		"admin/users[^]*": "admin/users",
-		"admin/redis[^]*": "admin/redis",
-		"admin/index[^]*": "admin/index",
-		"admin/themes[^]*": "admin/themes",
-		"admin/plugins[^]*": "admin/plugins",
-		"admin/settings[^]*": "admin/settings",
-		"admin/twitter[^]*": "admin/twitter",
-		"admin/facebook[^]*": "admin/facebook",
-		"admin/gplus[^]*": "admin/gplus",
-		"admin/motd/?$": "admin/motd",
-		"install/?$": "install/mail",
-		"install/mail/?": "install/mail",
-		"install/social/?": "install/social",
-		"install/privileges/?": "install/privileges",
-        "users-sort-posts": "users",
-        "users-latest": "users",
-        "users-sort-reputation": "users",
-        "users-search": "users",
-		"users[^]*edit": "accountedit",
-		"users[^]*following": "following",
-		"users[^]*followers": "followers",
-		"users[^]*settings": "accountsettings",
-		"users[^]*favourites": "favourites",
-		"users/[^]*": "account",
+		"^admin/testing/categories.*": "admin/testing/categories",
+		"^admin/topics.*": "admin/topics",
+		"^admin/categories.*": "admin/categories",
+		"^admin/users.*": "admin/users",
+		"^admin/redis.*": "admin/redis",
+		"^admin/index.*": "admin/index",
+		"^admin/themes.*": "admin/themes",
+		"^admin/plugins/?$": "admin/plugins",
+		"^admin/settings.*": "admin/settings",
+		"^admin/twitter.*": "admin/twitter",
+		"^admin/facebook.*": "admin/facebook",
+		"^admin/logger.*": "admin/logger",
+		"^admin/gplus.*": "admin/gplus",
+		"^admin/motd/?$": "admin/motd",
+		"^admin/groups/?$": "admin/groups",
+		"^users/sort-posts": "users",
+		"^users/latest": "users",
+		"^users/sort-reputation": "users",
+		"^users/search": "users",
+		"^user.*edit": "accountedit",
+		"^user.*following": "following",
+		"^user.*followers": "followers",
+		"^user.*settings": "accountsettings",
+		"^user.*favourites": "favourites",
+		"^user/.*": "account",
 
-		"recent": "recent",
-		"unread": "unread",
-		"popular": "category",
-		"active": "category",
-		"search": "search",
-		"reset/[^]*": "reset_code",
-		"reset": "reset"
+		"^recent/.*": "recent",
 
+		"reset/.*": "reset_code"
 	},
 	"force_refresh": {
 		"logout": true

public/templates/favourites.tpl

@@ -1,34 +1,25 @@
-
-<div class="well">
-
-
-
+<div class="well favourites">
 	<div class="account-username-box" data-userslug="{userslug}">
 		<span class="account-username">
-			<a href="/users/{userslug}">{username}</a>
+			<a href="/user/{userslug}">{username}</a> <i class="icon-chevron-right"></i>
+			<a href="/user/{userslug}/favourites">favourites</a>
 		</span>
 	</div>
 
 	<div id="no-favourites-notice" class="alert alert-warning {show_nofavourites}">You don't have any favourites, favourite some posts to see them here!</div>
 
-	<div class="row-fluid">
-		<div class="span12 user-favourite-posts">
+	<div class="row">
+		<div class="col-md-12 user-favourite-posts">
 			<!-- BEGIN posts -->
-			<div class="topic-row img-polaroid clearfix" topic-url="topic/{posts.tid}/#{posts.pid}">
+			<div class="topic-row img-thumbnail clearfix" topic-url="topic/{posts.tid}/#{posts.pid}">
 				<span><strong>{posts.username}</strong> : </span>
 				<span>{posts.content}</span>
 				<div>
-					<span class="pull-right">{posts.relativeTime} ago</span>
+					<span class="pull-right timeago" title="{posts.relativeTime}"></span>
 				</div>
 			</div>
 			<br/>
 			<!-- END posts -->
 		</div>
 	</div>
-
-
 </div>
-
-
-<script type="text/javascript" src="{relative_path}/src/forum/accountheader.js"></script>
-<script type="text/javascript" src="{relative_path}/src/forum/favourites.js"></script>

public/templates/followers.tpl

@@ -1,31 +1,33 @@
 
-<div class="well">
+<div class="well users">
 
 	<div class="account-username-box" data-userslug="{userslug}">
 		<span class="account-username">
-			<a href="/users/{userslug}">{username}</a> <i class="icon-chevron-right"></i>
-			<a href="/users/{userslug}/followers">followers</a>
+			<a href="/user/{userslug}">{username}</a> <i class="icon-chevron-right"></i>
+			<a href="/user/{userslug}/followers">followers</a>
 		</span>
 	</div>
 
 	<div>
 		<!-- BEGIN followers -->
 		<div class="users-box">
-			<a href="/users/{followers.userslug}">
-				<img src="{followers.picture}" class="img-polaroid"/>
+			<a href="/user/{followers.userslug}">
+				<img src="{followers.picture}" class="img-thumbnail"/>
 			</a>
 			<br/>
-			<a href="/users/{followers.userslug}">{followers.username}</a>
+			<div class="user-info">
+				<a href="/user/{followers.userslug}">{followers.username}</a>
 				<br/>
-			<div title="reputation">
+				<div title="reputation" class="reputation">
 					<span class='formatted-number'>{followers.reputation}</span>
 					<i class='icon-star'></i>
 				</div>
-			<div title="post count">
+				<div title="post count" class="post-count">
 					<span class='formatted-number'>{followers.postcount}</span>
 					<i class='icon-pencil'></i>
 				</div>
 			</div>
+		</div>
 		<!-- END followers -->
 	</div>
 	<div id="no-followers-notice" class="alert alert-warning hide">This user doesn't have any followers :(</div>
@@ -34,6 +36,3 @@
 <input type="hidden" template-variable="yourid" value="{yourid}" />
 <input type="hidden" template-variable="theirid" value="{theirid}" />
 <input type="hidden" template-variable="followersCount" value="{followersCount}" />
-
-<script type="text/javascript" src="{relative_path}/src/forum/followers.js"></script>
-<script type="text/javascript" src="{relative_path}/src/forum/accountheader.js"></script>

public/templates/following.tpl

@@ -1,32 +1,34 @@
 
-<div class="well">
+<div class="well users">
 
 	<div class="account-username-box" data-userslug="{userslug}">
 		<span class="account-username">
-			<a href="/users/{userslug}">{username}</a> <i class="icon-chevron-right"></i>
-			<a href="/users/{userslug}/following">following</a>
+			<a href="/user/{userslug}">{username}</a> <i class="icon-chevron-right"></i>
+			<a href="/user/{userslug}/following">following</a>
 		</span>
 	</div>
 
 	<div>
 		<!-- BEGIN following -->
 		<div class="users-box">
-			<a href="/users/{following.userslug}">
-				<img src="{following.picture}" class="img-polaroid"/>
+			<a href="/user/{following.userslug}">
+				<img src="{following.picture}" class="img-thumbnail"/>
 			</a>
 			<br/>
-			<a href="/users/{following.userslug}">{following.username}</a>
+			<div class="user-info">
+				<a href="/user/{following.userslug}">{following.username}</a>
 				<br/>
-			<div title="reputation">
+				<div title="reputation" class="reputation">
 					<span class='formatted-number'>{following.reputation}</span>
 					<i class='icon-star'></i>
 				</div>
-			<div title="post count">
+				<div title="post count" class="post-count">
 					<span class='formatted-number'>{following.postcount}</span>
 					<i class='icon-pencil'></i>
 				</div>
-			<a id="unfollow-btn" href="#" class="btn unfollow-btn" followingUid="{following.uid}" data-username="{following.username}">Unfollow</a>
 			</div>
+		</div>
+
 		<!-- END following -->
 	</div>
 	<div id="no-following-notice" class="alert alert-warning hide">This user isn't following anyone :(</div>
@@ -35,6 +37,3 @@
 <input type="hidden" template-variable="yourid" value="{yourid}" />
 <input type="hidden" template-variable="theirid" value="{theirid}" />
 <input type="hidden" template-variable="followingCount" value="{followingCount}" />
-
-<script type="text/javascript" src="{relative_path}/src/forum/following.js"></script>
-<script type="text/javascript" src="{relative_path}/src/forum/accountheader.js"></script>

public/templates/footer.tpl

@@ -2,53 +2,69 @@
 
 	</div><!--END container -->
 
-	<div id="disconnect-modal" class="modal hide" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
+	<div id="chat-modal" class="modal chat-modal" tabindex="-1" role="dialog" aria-labelledby="Chat" aria-hidden="true" data-backdrop="none">
+		<div class="modal-dialog">
+			<div class="modal-content">
 				<div class="modal-header">
-			<h3 id="myModalLabel">Socket Disconnect</h3>
+					<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
+					<h3 id="myModalLabel">[[footer:chat.chatting_with]]</h3>
 				</div>
 				<div class="modal-body">
-			<span id="disconnect-text">Looks like you disconnected, try reloading the page.</span>
+					<textarea class="form-control" id="chat-content" cols="40" rows="10" readonly></textarea><br/>
+					<input id="chat-message-input" type="text" class="form-control" name="chat-message" placeholder="[[footer:chat.placeholder]]"/>
 				</div>
 				<div class="modal-footer">
-			<a id="reload-button" href="/" class="btn btn-primary">Reload</a>
+					<button type="button" id="chat-message-send-btn" href="#" class="btn btn-primary btn-lg btn-block
+					">[[footer:chat.send]]</button>
+				</div>
+			</div><!-- /.modal-content -->
+		</div><!-- /.modal-dialog -->
+	</div><!-- /.modal -->
+
+	<div id="upload-picture-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="Upload Picture" aria-hidden="true">
+		<div class="modal-dialog">
+			<div class="modal-content">
+				<div class="modal-header">
+					<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
+					<h3 id="myModalLabel">Upload Picture</h3>
+				</div>
+				<div class="modal-body">
+					<form id="uploadForm" action="" method="post" enctype="multipart/form-data">
+						<div class="form-group">
+							<label for="userPhoto">Upload a picture</label>
+							<input type="file" id="userPhotoInput"  name="userPhoto">
+							<p class="help-block">You may only upload PNG, JPG, or GIF files under 256kb.</p>
+						</div>
+						<input id="imageUploadCsrf" type="hidden" name="_csrf" value="" />
+					</form>
+
+					<div id="upload-progress-box" class="progress progress-striped">
+						<div id="upload-progress-bar" class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="0" aria-valuemin="0">
+							<span class="sr-only"> success</span>
 						</div>
 					</div>
 
-	<div id="chat-modal" class="modal hide" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
-		<div class="modal-header">
-			<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
-			<h3 id="myModalLabel">Chat with <span id="chat-with-name"></span></h3>
-		</div>
-		<div class="modal-body">
-			<textarea id="chat-content" cols="40" rows="10" readonly></textarea><br/>
-			<input id="chat-message-input" type="text" name="chat-message" placeholder="type chat message here press enter to send"/><br/>
-			<button type="button" id="chat-message-send-btn" href="#" class="btn btn-primary">Send</button>
+					<div id="alert-status" class="alert alert-info hide"></div>
+					<div id="alert-success" class="alert alert-success hide"></div>
+					<div id="alert-error" class="alert alert-danger hide"></div>
 				</div>
+				<div class="modal-footer">
+					<button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Close</button>
+					<button id="pictureUploadSubmitBtn" class="btn btn-primary">Upload Picture</button>
 				</div>
+			</div><!-- /.modal-content -->
+		</div><!-- /.modal-dialog -->
+	</div><!-- /.modal -->
 
 	<div id="alert_window"></div>
 
-	<div id="mobile-sidebar">
-	</div>
 
-	<!-- START Forum Info -->
-	<div id="footer" class="container hidden-phone" style="padding-top: 50px; display: none">
-		<div class="alert alert-info">
-			<span id="active_users"></span>; <span id="active_record"></span><br />
-			<span id="number_of_users"></span> <span id="post_stats"></span><br />
-			<span id="latest_user"></span>
-		</div>
-		<footer class="footer">Copyright &copy; 2013 <a target="_blank" href="http://www.nodebb.org">NodeBB</a> by <a target="_blank" href="https://github.com/psychobunny">psychobunny</a>, <a href="https://github.com/julianlam" target="_blank">julianlam</a>, <a href="https://github.com/barisusakli" target="_blank">barisusakli</a> from <a target="_blank" href="http://www.designcreateplay.com">designcreateplay</a></footer>
-	</div>
+	<footer id="footer" class="container footer">
+		<div class="copyright">Copyright &copy; 2013 <a target="_blank" href="http://www.nodebb.org">NodeBB</a> by <a target="_blank" href="https://github.com/psychobunny">psychobunny</a>, <a href="https://github.com/julianlam" target="_blank">julianlam</a>, <a href="https://github.com/barisusakli" target="_blank">barisusakli</a> from <a target="_blank" href="http://www.designcreateplay.com">designcreateplay</a></div>
+	</footer>
 
-	<div id="mobile-menu">
-		<button id="mobile-menu-btn" type="button" class="btn btn-none"><i class="icon-th icon-2x"></i></button>
-		<button id="mobile-post-btn" type="button" class="btn btn-none"><i class="icon-plus icon-2x"></i></button>
-	</div>
-	
-	<!-- END Forum Info -->
 	<script>
-		$.getScript(RELATIVE_PATH + '/src/forum/footer.js');
+		require(['forum/footer']);
 	</script>
 
 </body>

public/templates/header.tpl

@@ -4,72 +4,135 @@
 	<title>{browserTitle}</title>
 	{meta_tags}
 	<link href="{cssSrc}" rel="stylesheet" media="screen">
-	<link href="{relative_path}/vendor/bootstrap/css/bootstrap-responsive.min.css" rel="stylesheet" media="screen">
 	<link rel="stylesheet" href="{relative_path}/vendor/fontawesome/css/font-awesome.min.css">
+	{link_tags}
+	<!-- BEGIN pluginCSS -->
+	<link rel="stylesheet" href="{pluginCSS.path}">
+	<!-- END pluginCSS -->
 	<script>
 		var RELATIVE_PATH = "{relative_path}";
 	</script>
-	<script src="http://code.jquery.com/jquery.js"></script>
-	<script src="{relative_path}/vendor/jquery/js/jquery-ui-1.10.3.custom.min.js"></script>
-	<script src="{relative_path}/vendor/bootstrap/js/bootstrap.min.js"></script>
 	<script src="{relative_path}/socket.io/socket.io.js"></script>
-	<script src="{relative_path}/src/app.js"></script>
-	<script src="{relative_path}/vendor/requirejs/require.js"></script>
-	<script src="{relative_path}/vendor/bootbox/bootbox.min.js"></script>
+	<!-- BEGIN clientScripts -->
+	<script src="{relative_path}/{clientScripts.script}"></script>
+	<!-- END clientScripts -->
 	<script>
 		require.config({
 			baseUrl: "{relative_path}/src/modules",
-			waitSeconds: 3
+			waitSeconds: 3,
+			paths: {
+				"forum": '../forum'
+			}
 		});
 	</script>
-	<script src="{relative_path}/src/templates.js"></script>
-	<script src="{relative_path}/src/ajaxify.js"></script>
-	<script src="{relative_path}/src/jquery.form.js"></script>
-	<script src="{relative_path}/src/utils.js"></script>
-
-	<link rel="stylesheet" type="text/css" href="{relative_path}/css/nodebb.css" />
 
+	<link rel="stylesheet" type="text/css" href="{relative_path}/css/theme.css" />
 </head>
 
 <body>
-	<div id="mobile-menu-overlay">
-	</div>
-	<div class="navbar navbar-inverse navbar-fixed-top" id="header-menu">
-		<div class="navbar-inner">
+	<div class="navbar navbar-inverse navbar-fixed-top header" role="navigation" id="header-menu">
 		<div class="container">
-				<a class="brand" href="/">{title}</a>
-				<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
+			<div class="navbar-header">
+				<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
 					<span class="icon-bar"></span>
 					<span class="icon-bar"></span>
 					<span class="icon-bar"></span>
 				</button>
-				<div class="nav-collapse collapse">
-					<ul id="main-nav" class="nav nodebb-inline-block">
+				<div>
+					<a href="/">
+						<img class="{brand:logo:display} forum-logo" src="{brand:logo}" />
+					</a>
+					<a href="/">
+						<h1 class="navbar-brand forum-title">{title}</h1>
+					</a>
+				</div>
+			</div>
+
+			<div class="navbar-collapse collapse navbar-ex1-collapse">
+				<ul id="main-nav" class="nav navbar-nav">
 					<li>
-							<a href="/recent">Recent</a>
+						<a href="/recent">[[global:header.recent]]</a>
 					</li>
 					<li class="nodebb-loggedin">
-							<a href="/unread"><span id="numUnreadBadge" class="badge badge-inverse">0</span> Unread</a>
+						<a href="/unread"><span id="numUnreadBadge" class="badge badge-inverse">0</span> [[global:header.unread]]</a>
 					</li>
 					<li>
-							<a href="/users">Users</a>
+						<a href="/users">[[global:header.users]]</a>
 					</li>
-					</ul>
-					<ul id="right-menu" class="nav pull-right nodebb-inline-block">
-						<li class="notifications dropdown text-center">
-							<a class="dropdown-toggle" data-toggle="dropdown" href="#" id="notif_dropdown"><i class="icon-circle-blank"></i></a>
-							<ul id="notif-list" class="dropdown-menu" aria-labelledby="notif_dropdown">
-								<li><a href="#"><i class="icon-refresh icon-spin"></i> Loading Notifications</a></li>
-							</ul>
+					<li class="{adminDisplay}">
+						<a href="/admin"><i class="icon-cogs"></i> [[global:header.admin]]</a>
 					</li>
+					<li class="visible-xs">
+						<a href="/search">[[global:header.search]]</a>
+					</li>
+					<!-- BEGIN navigation -->
+					<li class="{navigation.class}">
+						<a href="{navigation.route}">{navigation.text}</a>
+					</li>
+					<!-- END navigation -->
+				</ul>
+
+
+				<ul id="logged-in-menu" class="nav navbar-nav navbar-right hide">
 					<li>
-							<form id="search-form" class="form-search form-inline" action="" method="GET">
-								<input type="text" name="query" class="input-medium search-query">
-								<button type="submit" class="btn hide">Search</button>
+						<a href="#" id="reconnect"></a>
+					</li>
+
+					<li>
+						<form id="search-form" class="navbar-form navbar-right hidden-xs" role="search" method="GET" action="">
+							<div class="hide" id="search-fields">
+								<div class="form-group">
+									<input type="text" class="form-control" placeholder="Search" name="query" value="">
+								</div>
+								<button type="submit" class="btn btn-default hide">[[global:search]]</button>
+							</div>
+							<button id="search-button" type="button" class="btn btn-link"><i class="icon-search"></i></button>
 						</form>
 					</li>
 
+					<li id="notifications-list" class="notifications dropdown text-center hidden-xs">
+						<a class="dropdown-toggle" data-toggle="dropdown" href="#" id="notif_dropdown"><i class="icon-circle-blank"></i></a>
+						<ul id="notif-list" class="dropdown-menu" aria-labelledby="notif_dropdown">
+							<li>
+								<a href="#"><i class="icon-refresh icon-spin"></i> [[global:notifications.loading]]</a>
+							</li>
 						</ul>
+					</li>
+
+					<li id="user_label" class="dropdown">
+						<a class="dropdown-toggle" data-toggle="dropdown" href="#" id="user_dropdown">
+							<img src=""/>
+						</a>
+						<ul id="user-control-list" class="dropdown-menu" aria-labelledby="user_dropdown">
+							<li>
+								<a id="user-profile-link" href=""><span>Profile</span></a>
+							</li>
+							<li id="logout-link">
+								<a href="#">Log out</a>
+							</li>
+						</ul>
+					</li>
+
+				</ul>
+
+				<ul id="logged-out-menu" class="nav navbar-nav navbar-right">
+					<li>
+						<a class="dropdown-toggle" data-toggle="dropdown" href="#" id="loggedout_dropdown"><i class="icon-signin"></i></a>
+						<ul class="dropdown-menu" aria-labelledby="loggedout_dropdown">
+							<li>
+								<a href="/register">Register</a>
+							</li>
+							<li>
+								<a href="/login">Login</a>
+							</li>
+						</ul>
+					</li>
+				</ul>
+
+				<div class="pagination-block">
+					<i class="icon-upload pointer"></i>
+					<span id="pagination"></span>
+					<i class="icon-upload pointer icon-rotate-180"></i>
 				</div>
 			</div>
 		</div>
@@ -77,6 +140,4 @@
 
 	<input id="csrf_token" type="hidden" template-variable="csrf" value="{csrf}" />
 
-	
 	<div class="container" id="content">
-

public/templates/home.tpl

@@ -1,16 +1,17 @@
-<div class="hero-unit {motd_class}">
+<div class="motd{motd_class}">
 	{motd}
 </div>
 
-<div class="row category-row">
+<div class="row home" itemscope itemtype="http://www.schema.org/ItemList">
 	<!-- BEGIN categories -->
-	<div class="span3">
-		<a href="category/{categories.slug}">
+	<div class="col-md-3 col-xs-6">
+		<a href="category/{categories.slug}" itemprop="url">
+			<meta itemprop="name" content="{categories.name}">
 			<h4><span class="badge {categories.badgeclass}">{categories.topic_count} </span> {categories.name}</h4>
-			<div class="category-icon {categories.blockclass}">
+			<div class="icon {categories.blockclass}">
 				<div id="category-{categories.cid}" class="category-slider-{categories.post_count}">
 					<div class="category-box"><i class="{categories.icon} icon-4x"></i></div>
-					<div class="category-box">{categories.description}</div>
+					<div class="category-box" itemprop="description">{categories.description}</div>
 					<!-- BEGIN posts -->
 					<div class="category-box">
 						<div class="post-preview">
@@ -26,3 +27,26 @@
 	</div>
 	<!-- END categories -->
 </div>
+
+<div class="row footer-stats">
+	<div class="col-md-3 col-xs-6">
+		<div class="stats-card well">
+			<h2><span id="stats_online"></span><br /><small>[[footer:stats.online]]</small></h2>
+		</div>
+	</div>
+	<div class="col-md-3 col-xs-6">
+		<div class="stats-card well">
+			<h2><span id="stats_users"></span><br /><small>[[footer:stats.users]]</small></h2>
+		</div>
+	</div>
+	<div class="col-md-3 col-xs-6">
+		<div class="stats-card well">
+			<h2><span id="stats_topics"></span><br /><small>[[footer:stats.topics]]</small></h2>
+		</div>
+	</div>
+	<div class="col-md-3 col-xs-6">
+		<div class="stats-card well">
+			<h2><span id="stats_posts"></span><br /><small>[[footer:stats.posts]]</small></h2>
+		</div>
+	</div>
+</div>