... 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,23 +1,30 @@
-Please support NodeBB development! Check out our IndieGoGo campaign and like, share, and follow us :)
-[NodeBB Homepage](http://www.nodebb.org/ "NodeBB") # [IndieGoGo campaign](https://www.indiegogo.com/projects/nodebb-the-discussion-platform-of-the-future/ "IndieGoGo") # [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://i.imgur.com/N8SLkcDh.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://i.imgur.com/RBkFzdkh.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?
 
-* Our [Indiegogo campaign](https://www.indiegogo.com/projects/nodebb-the-discussion-platform-of-the-future/) is accepting contributions until August 17th, 2013
 * Our feature roadmap is hosted on the project wiki's [Version History / Roadmap](https://github.com/designcreateplay/NodeBB/wiki/Version-History-%26-Roadmap)
 * If you are a developer, feel free to check out the source and submit pull requests.
 * If you are a designer, NodeBB needs themes! NodeBB will accept any LESS or CSS file and use it in place of the default Twitter Bootstrap theme. Consider extending Bootstrap themes by extending the base bootstrap LESS file.
 
 ## 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
 
@@ -55,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,127 +16,159 @@
 	along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
-var fs = require('fs'),
+(function () {
-	nconf = require('nconf'),
+	"use strict";
+
+	// Configuration setup
+	var nconf = require('nconf');
+	nconf.argv().env();
+
+	var fs = require('fs'),
+		async = require('async'),
+		winston = require('winston'),
 		pkg = require('./package.json'),
-	url = require('url');
+		path = require('path'),
+		meta;
 
-// Runtime environment
+	// Runtime environment
-global.env = process.env.NODE_ENV || 'production',
+	global.env = process.env.NODE_ENV || 'production';
 
-// Configuration setup
+	winston.remove(winston.transports.Console);
-nconf.argv().file({ file: __dirname + '/config.json'});
+	winston.add(winston.transports.Console, {
+		colorize: true
+	});
 
-// Log GNU copyright info along with server info
+	winston.add(winston.transports.File, {
-console.log('Info: NodeBB v' + pkg.version + ' Copyright (C) 2013 DesignCreatePlay Inc.');
+		filename: 'error.log',
-console.log('Info: This program comes with ABSOLUTELY NO WARRANTY.');
+		level: 'error'
-console.log('Info: This is free software, and you are welcome to redistribute it under certain conditions.');
+	});
-console.log('Info: ===');
 
-if(nconf.get('upgrade')) {
+	// TODO: remove once https://github.com/flatiron/winston/issues/280 is fixed
-	require('./src/upgrade').upgrade();
+	winston.err = function (err) {
-} else if (!nconf.get('setup') && nconf.get('base_url')) {
+		winston.error(err.stack);
-	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/');
-	global.nconf = nconf;
-
-	console.log('Info: Initializing NodeBB v' + pkg.version + ', on port ' + nconf.get('port') + ', using Redis store at ' + nconf.get('redis:host') + ':' + nconf.get('redis:port') + '.');
-	console.log('Info: Base Configuration OK.');
-
-	// TODO: Replace this with nconf-redis
-	var	meta = require('./src/meta.js');
-	global.config = {};
-	meta.config.get(function(config) {
-		for(c in config) {
-			if (config.hasOwnProperty(c)) {
-				global.config[c] = config[c];
-			}
-		}
-
-		var categories = require('./src/categories.js'),
-			RDB = require('./src/redis.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;
+	// Log GNU copyright info along with server info
+	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('');
+
+
+	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'
+		});
+		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'),
+				RDB = require('./src/redis.js');
+
+			reds.createClient = function () {
+				return reds.client || (reds.client = RDB);
+			};
+
+			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) {
+					translator.loadServer();
-			config['ROOT_DIRECTORY'] = __dirname;
 
+					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', 'install/header', 'install/footer', 'install/redis',
+						'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.
+					Notifications.init();
-			function setup_categories() {
-				console.log('Info: Checking categories...');
-				categories.getAllCategories(function(data) {
-					if (data.categories.length === 0) {
-						console.log('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]);
-							}
-						});
-
-						
-						console.log('Info: Hardcoding uid 1 as an admin');
-						var user = require('./src/user.js');
-						user.makeAdministrator(1);
-
-
 				} else {
-						console.log('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')) console.log('Info: NodeBB Setup Triggered via Command Line');
+		if (nconf.get('setup')) {
-	else console.log('Info: Configuration not found, starting NodeBB 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(
+		winston.info('Welcome to NodeBB!');
-		"\nWelcome to NodeBB!\nThis looks like a new installation, so you'll have to answer a " +
+		winston.info('This looks like a new installation, so you\'ll have to answer a few questions about your environment before we can proceed.');
-		"few questions about your environment before we can proceed.\n\n" +
+		winston.info('Press enter to accept the default setting (shown in brackets).');
-		"Press enter to accept the default setting (shown in brackets).\n\n\n"
-	);
 
-	install.setup(function(err) {
+		install.setup(function (err) {
 			if (err) {
-			console.log('Error: There was a problem completing NodeBB setup: ', err.message);
+				winston.error('There was a problem completing NodeBB setup: ', err.message);
 			} else {
-			if (!nconf.get('setup')) {
+				winston.info('NodeBB Setup Completed. Run \'node app\' to manually start your NodeBB server.');
-				process.stdout.write(
-					"Please start NodeBB again and register a new user. This user will automatically become an administrator.\n\n"
-				);
-			}
 			}
 
 			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",
+        "name": "NodeBB Plugins",
-        "description": "In future an example of how a hidden category should look like.",
+        "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.5",
+  "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,13 +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"
+    "reds": "~0.2.4",
+    "winston": "~0.7.2",
+    "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"
@@ -44,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",
@@ -61,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,846 +0,0 @@
-@import "mixins";
-
-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: 10%;
-}
-
-#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-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;
-   margin-bottom:10px;
-}
-
-.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;
-    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;
-
-		&.active {
-			color: #558;
-			text-shadow: 0 0 1em #aaf, 0 0 1em #aaf, 0 0 1em #aaf;
-		}
-	}
-}
-
-#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 {
-			width: 90%;
-			margin: 0 auto;
-
-			span {
-				color: white;
-
-				&:hover {
-					text-decoration: none;
-				}
-			}
-		}
-
-		input {
-			width: 98%;
-			text-align: center;
-			border: none;
-			padding: 0.5em 0;
-			-webkit-border-radius: 0px;
-			-moz-border-radius: 0px;
-			border-radius: 0px;
-			margin: 1% 1% 2% 1%;
-		}
-
-		textarea {
-			background: rgba(64, 64, 64, 0.95);
-			border: none;
-			padding: 0.5em;
-			display: block;
-			width: 90%;
-			margin: 0.5em auto;
-			resize: none;
-			color: white;
-			height: 200px;
-		}
-		
-		#imagedrop {
-		  text-align:center;
-		  color:white;
-		  position: absolute;
-      top: 0px;
-      left: 0px;
-      width: 100%;
-      height:230px;
-      line-height:230px;
-      font-size:20px;
-      vertical-align: middle;
-		}
-		
-		#imagelist {
-		  position: absolute;
-      bottom: 5px;
-      left: 0px;
-      padding-left:2em;
-      
-      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:0px;
-}
-
-.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,193 +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 {
-		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;
-		}
-	}
-
-	.main-post {
-		h3 {
-			margin: 0;
-
-			.topic-title {
-				width: auto;
-				white-space: nowrap;
-				text-overflow:ellipsis;
-				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

@@ -1,7 +1,8 @@
 var ajaxify = {};
 
 
-(function($) {
+(function ($) {
+	/*global app, templates, utils*/
 
 	var location = document.location || window.location,
 		rootUrl = location.protocol + '//' + (location.hostname || location.host) + (location.port ? ':' + location.port : ''),
@@ -11,8 +12,8 @@ var ajaxify = {};
 	var executed = {};
 
 	var events = [];
-	ajaxify.register_events = function(new_page_events) {
+	ajaxify.register_events = function (new_page_events) {
-		for (var i = 0, ii = events.length; i<ii; i++) {
+		for (var i = 0, ii = events.length; i < ii; i++) {
 			socket.removeAllListeners(events[i]); // optimize this to user removeListener(event, listener) instead.
 		}
 
@@ -20,27 +21,37 @@ var ajaxify = {};
 	};
 
 
-	window.onpopstate = function(event) {
+	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);
 	};
 
-	ajaxify.go = function(url, callback, template, quiet) {
+	var pagination;
-		// leave room and join global
+
+	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');
 		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;
 
-		if(url.indexOf(RELATIVE_PATH.slice(1)) !== -1) {
+		if (url.indexOf(RELATIVE_PATH.slice(1)) !== -1) {
 			url = url.slice(RELATIVE_PATH.length);
 		}
 
 		var tpl_url = templates.get_custom_map(url.split('?')[0]);
 
 		if (tpl_url == false && !templates[url]) {
-			if(url === '' || url === '/') {
+			if (url === '' || url === '/') {
 				tpl_url = 'home';
 			} else {
 				tpl_url = url.split('/')[0].split('?')[0];
@@ -52,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() {
+			templates.load_template(function () {
 				exec_body_scripts(content);
+				require(['forum/' + tpl_url], function(script) {
+					if (script && script.init) script.init();
+				});
 
 				if (callback) {
 					callback();
@@ -69,58 +87,74 @@ var ajaxify = {};
 
 				app.process_page();
 
-				jQuery('#content, #footer').stop(true, true).fadeIn(200, function() {
+				jQuery('#content, #footer').stop(true, true).fadeIn(200, function () {
-					if(window.location.hash)
+					if (window.location.hash)
 						hash = window.location.hash;
-					if(hash)
+					if (hash)
 						app.scrollToPost(hash.substr(1));
 				});
 
-			}, url, template);
+				utils.refreshTitle(url);
 
-			socket.emit('api:meta.buildTitle', url, function(title) {
+			}, url, template);
-				document.title = title;
-			});
 
 			return true;
 		}
 
 		return false;
-	}
+	};
 
-	$('document').ready(function() {
+	$('document').ready(function () {
 		if (!window.history || !window.history.pushState) return; // no ajaxification for old browsers
 
 		content = content || document.getElementById('content');
 
 		// Enhancing all anchors to ajaxify...
-		$(document.body).on('click', 'a', function(e) {
+		$(document.body).on('click', 'a', function (e) {
-			if (this.href == window.location.href + "#") return;
+			function hrefEmpty(href) {
-			if(this.href.slice(-1) === "#") return;
+				return href == 'javascript:;' || href == window.location.href + "#" || href.slice(-1) === "#";
+			}
 
+			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 || "" ),
+			var data = (elem.text || elem.textContent || elem.innerHTML || ""),
 				head = document.getElementsByTagName("head")[0] ||
 					document.documentElement,
 				script = document.createElement("script");
@@ -128,7 +162,7 @@ var ajaxify = {};
 			script.type = "text/javascript";
 			try {
 				script.appendChild(document.createTextNode(data));
-			} catch(e) {
+			} catch (e) {
 				script.text = data;
 			}
 
@@ -139,17 +173,17 @@ 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;
 
 		for (i = 0; children_nodes[i]; i++) {
 			child = children_nodes[i];
-			if (nodeName(child, "script" ) &&
+			if (nodeName(child, "script") &&
 				(!child.type || child.type.toLowerCase() === "text/javascript")) {
 				scripts.push(child);
 			}
@@ -162,6 +196,6 @@ var ajaxify = {};
 			}
 			evalScript(scripts[i]);
 		}
-	};
+	}
 
 }(jQuery));

public/src/app.js

@@ -1,88 +1,85 @@
 var socket,
 	config,
-	app = {},
+	app = {
-	API_URL = null;
+		'username': null,
+		'uid': null
+	};
 
-
+(function () {
-(function() {
 	var showWelcomeMessage = false;
 
-	function loadConfig() {
+
+	app.loadConfig = function() {
 
 		$.ajax({
 			url: RELATIVE_PATH + '/api/config',
-			success: function(data) {
+			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();
-				var reconnecting = false;
+					setTimeout(function() {
-				var reconnectTries = 0;
+						socket.socket.connect();
-	
+					}, 200);
-				socket.on('event:connect', function(data) {
+				} else {
-					console.log('connected to nodebb socket: ', data);
+					var max_reconnection_attemps = 5;
-					app.username = data.username;
+					var reconnection_delay = 200;
-					app.showLoginMessage();
+					socket = io.connect(RELATIVE_PATH, {
+						'max reconnection attempts': max_reconnection_attemps,
+						'reconnection delay': reconnection_delay
 					});
 
-				socket.on('event:alert', function(data) {
+					var reconnecting = false,
+						reconnectEl, reconnectTimer;
+
+					socket.on('event:connect', function (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) {
 						app.alert(data);
 					});
 
-				socket.on('event:consolelog', function(data) {
+					socket.on('connect', function (data) {
-					console.log(data);
+						if (reconnecting) {
-				});
+							reconnectEl.html('<i class="icon-ok"></i> Connected!');
-	
-				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);
 							reconnecting = false;
-						reconnectTries = 0;
-						socket.emit('api:updateHeader', { fields: ['username', 'picture', 'userslug'] });
-					}
-				});
 
-				socket.on('reconnecting', function(data) {
+							setTimeout(function() {
-					function showDisconnectModal() {
+								reconnectEl.removeClass('active');
-						$('#disconnect-modal').modal({
+							}, 3000);
-							backdrop:'static',
-							show:true
-						});
-		
-						$('#reload-button').on('click',function(){
-							$('#disconnect-modal').modal('hide');
-							window.location.reload();
-						});
 						}
 
-					reconnecting = true;
+						socket.emit('api:updateHeader', {
-					reconnectTries++;
+							fields: ['username', 'picture', 'userslug']
+						});
+					});
 
-					if(reconnectTries > 4) {
+					socket.on('event:disconnect', function() {
-						showDisconnectModal();
+						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({
+						if (!reconnectEl) reconnectEl = $('#reconnect');
-						alert_id: 'connection_alert',
+						reconnecting = true;
-						title: 'Reconnecting',
+
-						message: 'You have disconnected from NodeBB, we will try to reconnect you. <br/><i class="icon-refresh icon-spin"></i>',
+						reconnectEl.addClass('active');
-						type: 'notify',
+						reconnectEl.html('<i class="icon-spinner icon-spin"></i> Reconnecting...');
-						timeout: 5000
-					});
 					});
 
-				socket.on('api:user.get_online_users', function(users) {
+					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;
 
@@ -99,23 +96,57 @@ 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) {
+	app.addCommas = function (text) {
 		return text.replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,");
 	}
 
 	// Willingly stolen from: http://phpjs.org/functions/strip_tags/
-	app.strip_tags = function(input, allowed) {
+	app.strip_tags = function (input, allowed) {
 		allowed = (((allowed || "") + "").toLowerCase().match(/<[a-z][a-z0-9]*>/g) || []).join(''); // making sure the allowed arg is a string containing only tags in lowercase (<a><b><c>)
 		var tags = /<\/?([a-z][a-z0-9]*)\b[^>]*>/gi,
 			commentsAndPhpTags = /<!--[\s\S]*?-->|<\?(?:php)?[\s\S]*?\?>/gi;
@@ -131,14 +162,15 @@ var socket,
 	// message = alert message content
 	// timeout default = permanent
 	// location : alert_window (default) or content
-	app.alert = function(params) {
+	app.alert = function (params) {
 		var alert_id = 'alert_button_' + ((params.alert_id) ? params.alert_id : new Date().getTime());
 
-		var alert = $('#'+alert_id);
+		var alert = $('#' + alert_id);
+		var title = params.title || '';
 
 		function startTimeout(div, timeout) {
-			var timeoutId = setTimeout(function() {
+			var timeoutId = setTimeout(function () {
-				$(div).fadeOut(1000, function() {
+				$(div).fadeOut(1000, function () {
 					$(this).remove();
 				});
 			}, timeout);
@@ -146,24 +178,23 @@ var socket,
 			$(div).attr('timeoutId', timeoutId);
 		}
 
-		if(alert.length > 0) {
+		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);
@@ -172,23 +203,23 @@ var socket,
 
 			button.className = 'close';
 			button.innerHTML = '&times;';
-			button.onclick = function(ev) {
+			button.onclick = function (ev) {
 				div.parentNode.removeChild(div);
 			}
 
 			if (params.location == null)
 				params.location = 'alert_window';
 
-			jQuery('#'+params.location).prepend(jQuery(div).fadeIn('100'));
+			jQuery('#' + params.location).prepend(jQuery(div).fadeIn('100'));
 
 			if (params.timeout) {
 				startTimeout(div, params.timeout);
 			}
 
 			if (params.clickfn) {
-				div.onclick = function() {
+				div.onclick = function () {
 					params.clickfn();
-					jQuery(div).fadeOut(500, function() {
+					jQuery(div).fadeOut(500, function () {
 						this.remove();
 					});
 				}
@@ -196,8 +227,8 @@ var socket,
 		}
 	}
 
-	app.alertSuccess = function(message, timeout) {
+	app.alertSuccess = function (message, timeout) {
-		if(!timeout)
+		if (!timeout)
 			timeout = 2000;
 
 		app.alert({
@@ -208,22 +239,21 @@ var socket,
 		});
 	}
 
-	app.alertError = function(message, timeout) {
+	app.alertError = function (message, timeout) {
-		if(!timeout)
+		if (!timeout)
 			timeout = 2000;
 
 		app.alert({
 			title: 'Error',
 			message: message,
-			type: 'error',
+			type: 'danger',
 			timeout: timeout
 		});
 	}
 
 	app.current_room = null;
-	app.enter_room = function(room) {
+	app.enter_room = function (room) {
-		
+		if (socket) {
-		if(socket) {
 			if (app.current_room === room)
 				return;
 
@@ -236,34 +266,28 @@ var socket,
 		}
 	};
 
-	app.populate_online_users = function() {
+	app.populate_online_users = function () {
 		var uids = [];
 
-		jQuery('.post-row').each(function() {
+		jQuery('.post-row').each(function () {
 			uids.push(this.getAttribute('data-uid'));
 		});
 
 		socket.emit('api:user.get_online_users', uids);
 	}
 
-	app.process_page = function() {
+	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,
+		var path = window.location.pathname,
-			parts = url.split('/'),
+			parts = path.split('/'),
-			active = parts[parts.length-1];
+			active = parts[parts.length - 1];
 
 		jQuery('#main-nav li').removeClass('active');
-		if(active) {
+		if (active) {
-			jQuery('#main-nav li a').each(function() {
+			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');
@@ -272,12 +296,15 @@ var socket,
 			});
 		}
 
-		setTimeout(function() {
+		$('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);
 	}
 
-	app.showLoginMessage = function() {
+	app.showLoginMessage = function () {
 		function showAlert() {
 			app.alert({
 				type: 'success',
@@ -287,9 +314,9 @@ var socket,
 			});
 		}
 
-		if(showWelcomeMessage) {
+		if (showWelcomeMessage) {
 			showWelcomeMessage = false;
-			if(document.readyState !== 'complete') {
+			if (document.readyState !== 'complete') {
 				$(document).ready(showAlert);
 			} else {
 				showAlert();
@@ -297,23 +324,40 @@ var socket,
 		}
 	}
 
-	app.addCommasToNumbers = function() {
+	app.addCommasToNumbers = function () {
-		$('.formatted-number').each(function(index, element) {
+		$('.formatted-number').each(function (index, element) {
 			$(element).html(app.addCommas($(element).html()));
 		});
 	}
 
-	app.createNewPosts = function(data) {
+	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++) {
+			for (var x = 0, numPosts = data.posts.length; x < numPosts; x++) {
 				socket.emit('api:post.privileges', data.posts[x].pid);
 			}
 
@@ -322,112 +366,98 @@ var socket,
 
 			app.populate_online_users();
 			app.addCommasToNumbers();
+			$('span.timeago').timeago();
+			$('.post-content img').addClass('img-responsive');
+		});
 	}
 
 	app.infiniteLoaderActive = false;
 
-	app.loadMorePosts = function(tid, callback) {
+	app.loadMorePosts = function (tid, callback) {
-		if(app.infiniteLoaderActive)
+		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) {
+		}, function (data) {
 			app.infiniteLoaderActive = false;
-			if(data.posts.length) {
+			if (data.posts.length) {
+				$('#loading-indicator').attr('done', '0');
 				app.createNewPosts(data);
-				if(callback)
+			} else {
-					callback();
+				$('#loading-indicator').attr('done', '1');
 			}
+			$('#loading-indicator').addClass('hide');
+			if (callback)
+				callback(data.posts);
 		});
 	}
 
-	app.scrollToPost = function(pid) {
+	app.scrollToTop = function () {
-		if(!pid)
+		$('body,html').animate({
+			scrollTop: 0
+		});
+	};
+
+	app.scrollToBottom = function () {
+		$('body,html').animate({
+			scrollTop: $('html').height() - 100
+		});
+	}
+
+	app.scrollToPost = function (pid) {
+
+		if (!pid)
 			return;
+
 		var container = $(document.body),
+			scrollTo = $('#post_anchor_' + pid),
+			tid = $('#post-container').attr('data-tid');
+
+		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) {
+
+			var intervalID = setInterval(function () {
+				app.loadMorePosts(tid, function (posts) {
 					scrollTo = $('#post_anchor_' + pid);
 
-		if(!scrollTo.length) {
+					if (tid && scrollTo.length) {
-			var tid = $('#post-container').attr('data-tid');
+						animateScroll();
-			app.loadMorePosts(tid, function() {
-				app.scrollToPost(pid);
-			});
-			return;
 					}
 
-		container.animate({
+					if (!posts.length || scrollTo.length)
-			scrollTop: scrollTo.offset().top - container.offset().top + container.scrollTop() - $('#header-menu').height()
+						clearInterval(intervalID);
 				});
+			}, 100);
+
+		} else if (tid) {
+			animateScroll();
 		}
 
-	jQuery('document').ready(function() {
+	}
-		addTouchEvents();
 
-		$('#search-form').on('submit', function() {
+	jQuery('document').ready(function () {
+		$('#search-form').on('submit', function () {
 			var input = $(this).find('input');
-			ajaxify.go("search/"+input.val(), null, "search");
+			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,33 +1,40 @@
-(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);
 
-		var rep = $('#reputation');
+			app.addCommasToNumbers();
-		rep.html(app.addCommas(rep.html()));
-		
-		var postcount = $('#postcount');
-		postcount.html(app.addCommas(postcount.html()));
 
 			var followBtn = $('#follow-btn');
 			var unfollowBtn = $('#unfollow-btn');
 
-		if(yourid !== theirid) {
+			if (yourid !== theirid && yourid !== "0") {
-			if(isFollowing) {
+				if (isFollowing) {
 					followBtn.hide();
 					unfollowBtn.show();
 				} else {
 					followBtn.show();
 					unfollowBtn.hide();
 				}
+			} else {
+				followBtn.hide();
+				unfollowBtn.hide();
 			}
 
 			followBtn.on('click', function() {
-			socket.emit('api:user.follow', {uid: theirid}, function(success) {
+				socket.emit('api:user.follow', {
-				var username = $('.account-username a').html();
+					uid: theirid
-				if(success) {
+				}, function(success) {
+					if (success) {
 						followBtn.hide();
 						unfollowBtn.show();
 						app.alertSuccess('You are now following ' + username + '!');
@@ -39,9 +46,10 @@
 			});
 
 			unfollowBtn.on('click', function() {
-			socket.emit('api:user.unfollow', {uid: theirid}, function(success) {
+				socket.emit('api:user.unfollow', {
-				var username = $('.account-username a').html();
+					uid: theirid
-				if(success) {
+				}, function(success) {
+					if (success) {
 						followBtn.show();
 						unfollowBtn.hide();
 						app.alertSuccess('You are no longer following ' + username + '!');
@@ -56,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 (data.online) {
-			if(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');
 		}
-		});
+	};
 
-		socket.emit('api:user.isOnline', theirid);
+	return Account;
-
+});
-	});
-
-}());

public/src/forum/accountedit.js

@@ -1,175 +1,61 @@
+define(['forum/accountheader', 'uploader'], function(header, uploader) {
+	var AccountEdit = {};
 
+	AccountEdit.init = function() {
+		header.init();
 
-var gravatarPicture = templates.get('gravatarpicture');
+		var gravatarPicture = templates.get('gravatarpicture');
-var uploadedPicture = templates.get('uploadedpicture');
+		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(){
+		$('#submitBtn').on('click', function() {
 
 			var userData = {
-			uid:$('#inputUID').val(),
+				uid: $('#inputUID').val(),
-			email:$('#inputEmail').val(),
+				email: $('#inputEmail').val(),
-			fullname:$('#inputFullname').val(),
+				fullname: $('#inputFullname').val(),
-			website:$('#inputWebsite').val(),
+				website: $('#inputWebsite').val(),
-			birthday:$('#inputBirthday').val(),
+				birthday: $('#inputBirthday').val(),
-			location:$('#inputLocation').val(),
+				location: $('#inputLocation').val(),
-			signature:$('#inputSignature').val()
+				signature: $('#inputSignature').val()
 			};
 
-		socket.emit('api:user.updateProfile', userData, function(data) {
+			socket.emit('api:user.updateProfile', userData, function(err, data) {
-			if(data.success) {
+				if (data.success) {
 					app.alertSuccess('Your profile has been updated successfully!');
-				if(data.picture) {
+					if (data.picture) {
 						$('#user-current-picture').attr('src', data.picture);
 						$('#user_label img').attr('src', data.picture);
 					}
-				if(data.gravatarpicture) {
+					if (data.gravatarpicture) {
 						$('#user-gravatar-picture').attr('src', data.gravatarpicture);
 						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;
 		});
 
-	$('#gravatar-box').on('click', function(){
+		$('#gravatar-box').on('click', function() {
 			$('#gravatar-box .icon-ok').show();
 			$('#uploaded-box .icon-ok').hide();
 			selectedImageType = 'gravatar';
 		});
 
-	$('#uploaded-box').on('click', function(){
+		$('#uploaded-box').on('click', function() {
 			$('#gravatar-box .icon-ok').hide();
 			$('#uploaded-box .icon-ok').show();
 			selectedImageType = 'uploaded';
@@ -178,12 +64,12 @@ $(document).ready(function() {
 		$('#savePictureChangesBtn').on('click', function() {
 			$('#change-picture-modal').modal('hide');
 
-		if(selectedImageType) {
+			if (selectedImageType) {
-			changeUserPicture(selectedImageType);
+				AccountEdit.changeUserPicture(selectedImageType);
 
-			if(selectedImageType == 'gravatar')
+				if (selectedImageType == 'gravatar')
 					$('#user-current-picture').attr('src', gravatarPicture);
-			else if(selectedImageType == 'uploaded')
+				else if (selectedImageType == 'uploaded')
 					$('#user-current-picture').attr('src', uploadedPicture);
 			}
 
@@ -193,19 +79,24 @@ $(document).ready(function() {
 			$('#userPhotoInput').val('');
 		});
 
-	$('#uploadPictureBtn').on('click', 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');
-			} else if(!passwordvalid) {
+					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.val() !== password_confirm.val()) {
+				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.on('blur', onPasswordChanged);
-		password_confirm.on('keyup', onPasswordConfirmChanged);
+			password_confirm.on('blur', onPasswordConfirmChanged);
 
 			$('#changePasswordBtn').on('click', function() {
 
-			if(passwordvalid && passwordsmatch && currentPassword.val()) {
+				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_notify.addClass('hide');
-					password_confirm_notify.html('');
+						password_confirm_notify.addClass('hide');
 						passwordsmatch = false;
 						passwordvalid = false;
 
-					if(data.err) {
+						if (err) {
-						app.alertError(data.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,20 +1,43 @@
-(function() {
+define(function() {
+	var	AccountHeader = {};
+
+	AccountHeader.init = function() {
 		var yourid = templates.get('yourid'),
 			theirid = templates.get('theirid');
 
-	$(document).ready(function() {
+		AccountHeader.createMenu();
 
 		var editLink = $('#editLink');
 		var settingsLink = $('#settingsLink');
+		var favouritesLink = $('#favouritesLink');
 
-		if(yourid === "0") {
+		if (yourid === "0" || yourid !== theirid) {
 			editLink.hide();
 			settingsLink.hide();
+			favouritesLink.hide();
 		}
-		else if(yourid !== theirid) {
+
-			editLink.hide();
+		jQuery('.account-sub-links span a').removeClass('bold').each(function() {
-			settingsLink.hide();
+			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,16 +1,17 @@
+define(['forum/accountheader'], function(header) {
+	var	AccountSettings = {};
 
-
+	AccountSettings.init = function() {
-
+		header.init();
-$(document).ready(function() {
 
 		$('#submitBtn').on('click', function() {
 
 			var settings = {
-			showemail: $('#showemailCheckBox').is(':checked')?1:0
+				showemail: $('#showemailCheckBox').is(':checked') ? 1 : 0
 			};
 
 			socket.emit('api:user.saveSettings', settings, function(success) {
-			if(success) {
+				if (success) {
 					app.alertSuccess('Settings saved!');
 				} else {
 					app.alertError('There was an error saving settings!');
@@ -18,5 +19,7 @@ $(document).ready(function() {
 			});
 			return false;
 		});
+	};
 
+	return AccountSettings;
 });

public/src/forum/admin/categories.js

@@ -1,57 +1,109 @@
+define(function() {
+	var	Categories = {};
 
-var modified_categories = {};
+	Categories.init = function() {
+		var modified_categories = {};
 
-function modified(el) {
+		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() {
+		function save() {
 			socket.emit('api:admin.categories.update', modified_categories);
 			modified_categories = {};
-}
+		}
 
-function select_icon(el) {
+		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.attr('class', iconClass + ' icon-2x');
-			el.value = iconClass;
+					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);
+		}
 
 
-function update_blockclass(el) {
+		function update_blockclass(el) {
 			el.parentNode.parentNode.className = 'entry-row ' + el.value;
-}
+		}
 
-jQuery('#entry-container').sortable();
+		function updateCategoryOrders() {
-jQuery('.blockclass').each(function() {
+			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 showCreateCategoryModal() {
-(function() {
+			$('#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('/'),
-			active = parts[parts.length-1];
+				active = parts[parts.length - 1];
 
 			jQuery('.nav-pills li').removeClass('active');
 			jQuery('.nav-pills li a').each(function() {
@@ -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) {
+			jQuery('#entry-container').on('click', '.icon', function(ev) {
-			select_icon(ev.target);
+				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) {
@@ -77,19 +135,19 @@ jQuery('.blockclass').each(function() {
 
 			jQuery('.entry-row button').each(function(index, element) {
 				var disabled = $(element).attr('data-disabled');
-			if(disabled == "0" || disabled == "")
+				if (disabled == "0" || disabled == "")
 					$(element).html('Disable');
 				else
 					$(element).html('Enable');
 
 			});
 
-		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');
 
-			var disabled = btn.html() == "Disable" ? "1":"0";
+				var disabled = btn.html() == "Disable" ? "1" : "0";
 				categoryRow.remove();
 				modified_categories[cid] = modified_categories[cid] || {};
 				modified_categories[cid]['disabled'] = disabled;
@@ -99,5 +157,7 @@ jQuery('.blockclass').each(function() {
 			});
 
 		});
+	};
 
-}());
+	return Categories;
+});

public/src/forum/admin/footer.js

@@ -1,79 +1,4 @@
-
+jQuery('document').ready(function() {
-
-
-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'),
 		liEls = menuEl.querySelectorAll('li')
@@ -82,27 +7,27 @@ var nodebb_admin = (function(nodebb_admin) {
 	menuEl.addEventListener('click', function(e) {
 		parentEl = e.target.parentNode;
 		if (parentEl.nodeName === 'LI') {
-				for(var x=0,numLis=liEls.length;x<numLis;x++) {
+			for (var x = 0, numLis = liEls.length; x < numLis; x++) {
 				if (liEls[x] !== parentEl) jQuery(liEls[x]).removeClass('active');
 				else jQuery(parentEl).addClass('active');
 			}
 		}
 	}, false);
-	});
+});
 
-	socket.once('api:config.get', function(config) {
+socket.once('api:config.get', function(config) {
-		nodebb_admin.config = config;
+	app.config = config;
-	});
+});
 
-	socket.emit('api:config.get');
+socket.emit('api:config.get');
 
-	socket.on('api:config.set', function(data) {
+socket.on('api:config.set', function(data) {
 	if (data.status === 'ok') {
 		app.alert({
 			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) {
 
@@ -8,7 +9,7 @@
 				total = 0;
 				active_users.innerHTML = '';
 
-		for(var room in data) {
+			for (var room in data) {
 				if (room !== '') {
 					var count = data[room].length;
 					total += count;
@@ -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 || {};
+define(function() {
-
+	var Plugins = {
-(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() {
+	return Plugins;
-		nodebb_admin.plugins = plugins;
+});
-		nodebb_admin.plugins.init();
-	});
-})();

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,52 +1,16 @@
+define(function() {
+	var Themes = {};
 
-
+	Themes.init = function() {
-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() {
 		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'),
 			installedThemeContainer = document.querySelector('#installed_themes'),
 			themeEvent = function(e) {
 				if (e.target.hasAttribute('data-action')) {
-				switch(e.target.getAttribute('data-action')) {
+					switch (e.target.getAttribute('data-action')) {
 						case 'preview':
 							var cssSrc = $(e.target).parents('li').attr('data-css'),
 								cssEl = document.getElementById('base-theme');
@@ -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');
+								themeId = parentEl.attr('data-theme');
-						socket.emit('api:config.set', {
+
-							key: 'theme:id', value: 'bootswatch:' + cssName
+							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');
+					socket.emit('api:admin.theme.set', {
-				nodebb_admin.remove('theme:src');
+						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++) {
+				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 ? '/css/previews/' + themes[x].id : RELATIVE_PATH + '/images/themes/default.png') + '" />' +
-				liEl.innerHTML =	'<img src="' + themes[x].screenshot + '" />' +
 						'<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,24 +1,41 @@
-$(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'),
 				tid = $this.parents('[data-tid]').attr('data-tid');
 
-		switch(action) {
+			switch (action) {
 				case 'pin':
-				if (!$this.hasClass('active')) socket.emit('api:topic.pin', { tid: tid });
+					if (!$this.hasClass('active')) socket.emit('api:topic.pin', {
-				else socket.emit('api:topic.unpin', { tid: tid });
+						tid: tid
+					});
+					else socket.emit('api:topic.unpin', {
+						tid: tid
+					});
 					break;
 				case 'lock':
-				if (!$this.hasClass('active')) socket.emit('api:topic.lock', { tid: tid });
+					if (!$this.hasClass('active')) socket.emit('api:topic.lock', {
-				else socket.emit('api:topic.unlock', { tid: tid });
+						tid: tid
+					});
+					else socket.emit('api:topic.unlock', {
+						tid: tid
+					});
 					break;
 				case 'delete':
-				if (!$this.hasClass('active')) socket.emit('api:topic.delete', { tid: tid });
+					if (!$this.hasClass('active')) socket.emit('api:topic.delete', {
-				else socket.emit('api:topic.restore', { tid: tid });
+						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,63 +77,77 @@ $(document).ready(function() {
 			}
 		}, false);
 
+		socket.on('api:topic.pin', function(response) {
+			if (response.status === 'ok') {
+				var btnEl = document.querySelector('li[data-tid="' + response.tid + '"] button[data-action="pin"]');
+
+				$(btnEl).addClass('active');
+			}
+		});
+
+		socket.on('api:topic.unpin', function(response) {
+			if (response.status === 'ok') {
+				var btnEl = document.querySelector('li[data-tid="' + response.tid + '"] button[data-action="pin"]');
+
+				$(btnEl).removeClass('active');
+			}
+		});
+
+		socket.on('api:topic.lock', function(response) {
+			if (response.status === 'ok') {
+				var btnEl = document.querySelector('li[data-tid="' + response.tid + '"] button[data-action="lock"]');
+
+				$(btnEl).addClass('active');
+			}
+		});
+
+		socket.on('api:topic.unlock', function(response) {
+			if (response.status === 'ok') {
+				var btnEl = document.querySelector('li[data-tid="' + response.tid + '"] button[data-action="lock"]');
+
+				$(btnEl).removeClass('active');
+			}
+		});
+
+		socket.on('api:topic.delete', function(response) {
+			if (response.status === 'ok') {
+				var btnEl = document.querySelector('li[data-tid="' + response.tid + '"] button[data-action="delete"]');
+
+				$(btnEl).addClass('active');
+				$(btnEl).siblings('[data-action="lock"]').addClass('active');
+			}
+		});
+
+		socket.on('api:topic.restore', function(response) {
+			if (response.status === 'ok') {
+				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	topicEls = topicsListEl.querySelectorAll('li'),
+		var topicsListEl = document.querySelector('.topics'),
+			topicEls = topicsListEl.querySelectorAll('li'),
 			numTopics = topicEls.length;
-	for(var x=0;x<numTopics;x++) {
+		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-pinned') === '1') {
-		if (topicEls[x].getAttribute('data-locked') === '1') topicEls[x].querySelector('[data-action="lock"]').className += ' active';
+				topicEls[x].querySelector('[data-action="pin"]').className += ' active';
-		if (topicEls[x].getAttribute('data-deleted') === '1') topicEls[x].querySelector('[data-action="delete"]').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');
 			}
-});
-
-socket.on('api:topic.pin', function(response) {
-	if (response.status === 'ok') {
-		var btnEl = document.querySelector('li[data-tid="' + response.tid + '"] button[data-action="pin"]');
-
-		$(btnEl).addClass('active');
 		}
-});
-
-socket.on('api:topic.unpin', function(response) {
-	if (response.status === 'ok') {
-		var btnEl = document.querySelector('li[data-tid="' + response.tid + '"] button[data-action="pin"]');
-
-		$(btnEl).removeClass('active');
-	}
-});
-
-socket.on('api:topic.lock', function(response) {
-	if (response.status === 'ok') {
-		var btnEl = document.querySelector('li[data-tid="' + response.tid + '"] button[data-action="lock"]');
-
-		$(btnEl).addClass('active');
-	}
-});
-
-socket.on('api:topic.unlock', function(response) {
-	if (response.status === 'ok') {
-		var btnEl = document.querySelector('li[data-tid="' + response.tid + '"] button[data-action="lock"]');
-
-		$(btnEl).removeClass('active');
-	}
-});
-
-socket.on('api:topic.delete', function(response) {
-	if (response.status === 'ok') {
-		var btnEl = document.querySelector('li[data-tid="' + response.tid + '"] button[data-action="delete"]');
-
-		$(btnEl).addClass('active');
-	}
-});
-
-socket.on('api:topic.restore', function(response) {
-	if (response.status === 'ok') {
-		var btnEl = document.querySelector('li[data-tid="' + response.tid + '"] button[data-action="delete"]');
-
-		$(btnEl).removeClass('active');
 	}
+
+	return Topics;
 });

public/src/forum/admin/users.js

@@ -1,76 +1,64 @@
+define(function() {
+	var Users = {};
 
-(function() {
+	Users.init = function() {
-
+		var yourid = templates.get('yourid');
-	function initUsers() {
 
 		function isUserAdmin(element) {
 			var parent = $(element).parents('.users-box');
 			return (parent.attr('data-admin') !== "0");
 		}
 
+		function isUserBanned(element) {
+			var parent = $(element).parents('.users-box');
+			return (parent.attr('data-banned') !== "" && parent.attr('data-banned') !== "0");
+		}
+
 		function getUID(element) {
 			var parent = $(element).parents('.users-box');
 			return parent.attr('data-uid');
 		}
 
-		jQuery('.admin-btn').each(function(index, element) {
+		function updateUserButtons() {
-			var adminBtn = $(element);
+			jQuery('.ban-btn').each(function(index, element) {
-			var isAdmin = isUserAdmin(adminBtn);
+				var banBtn = $(element);
-			
+				var uid = getUID(banBtn);
-			if(isAdmin)
+				if (isUserAdmin(banBtn) || uid === yourid)
-				adminBtn.addClass('btn-success');
+					banBtn.addClass('disabled');
+				else if (isUserBanned(banBtn))
+					banBtn.addClass('btn-warning');
 				else
-				adminBtn.removeClass('btn-success');
+					banBtn.removeClass('btn-warning');
 
 			});
-
-		jQuery('.delete-btn').each(function(index, element) {
-			var deleteBtn = $(element);
-			var isAdmin = isUserAdmin(deleteBtn);
-			
-			if(isAdmin)
-				deleteBtn.addClass('disabled');
-			else
-				deleteBtn.show();
-		});
-
-		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() {
+			updateUserButtons();
-			var deleteBtn = $(this);
-			var isAdmin = isUserAdmin(deleteBtn);
-			var parent = deleteBtn.parents('.users-box');
-			var uid = getUID(deleteBtn);
 
-			if(!isAdmin) {
+			$('#users-container').on('click', '.ban-btn', function() {
-				bootbox.confirm('Do you really want to delete "' + parent.attr('data-username') +'"?', function(confirm) {
+				var banBtn = $(this);
-					socket.emit('api:admin.user.deleteUser', uid);		
+				var isAdmin = isUserAdmin(banBtn);
+				var isBanned = isUserBanned(banBtn);
+				var parent = banBtn.parents('.users-box');
+				var uid = getUID(banBtn);
+
+				if (!isAdmin) {
+					if (isBanned) {
+						socket.emit('api:admin.user.unbanUser', uid);
+						banBtn.removeClass('btn-warning');
+						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);
+							}
 						});
 					}
+				}
 
 				return false;
 			});
@@ -79,13 +67,12 @@
 
 		jQuery('document').ready(function() {
 
-		var yourid = templates.get('yourid'),
+			var timeoutId = 0,
-			timeoutId = 0,
 				loadingMoreUsers = false;
 
 			var url = window.location.href,
 				parts = url.split('/'),
-			active = parts[parts.length-1];
+				active = parts[parts.length - 1];
 
 			jQuery('.nav-pills li').removeClass('active');
 			jQuery('.nav-pills li a').each(function() {
@@ -95,8 +82,8 @@
 				}
 			});
 
-		jQuery('#search-user').on('keyup', function () {
+			jQuery('#search-user').on('keyup', function() {
-			if(timeoutId !== 0) {
+				if (timeoutId !== 0) {
 					clearTimeout(timeoutId);
 					timeoutId = 0;
 				}
@@ -123,44 +110,46 @@
 				userListEl.innerHTML = html;
 				jQuery('.icon-spinner').addClass('none');
 
-			if(data && data.length === 0) {
+				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!')
-				$('#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() {
 				var set = '';
-			if(active === 'latest') {
+				if (active === 'latest') {
 					set = 'users:joindate';
-			} else if(active === 'sort-posts') {
+				} else if (active === 'sort-posts') {
 					set = 'users:postcount';
-			} else if(active === 'sort-reputation') {
+				} else if (active === 'sort-reputation') {
 					set = 'users:reputation';
 				}
 
-			if(set) {
+				if (set) {
 					loadingMoreUsers = true;
 					socket.emit('api:users.loadMore', {
 						set: set,
 						after: $('#users-container').children().length
 					}, function(data) {
-					if(data.users.length) {
+						if (data.users.length) {
 							onUsersLoaded(data.users);
 						}
 						loadingMoreUsers = false;
@@ -171,13 +160,15 @@
 			$('#load-more-users-btn').on('click', loadMoreUsers);
 
 			$(window).off('scroll').on('scroll', function() {
-			var bottom = (document.body.offsetHeight - $(window).height()) * 0.9;
+				var bottom = ($(document).height() - $(window).height()) * 0.9;
 
-			if (document.body.scrollTop > bottom && !loadingMoreUsers) {
+				if ($(window).scrollTop() > bottom && !loadingMoreUsers) {
 					loadMoreUsers();
 				}
 			});
 
 		});
+	};
 
-}());
+	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'),
+			twitterEl = jQuery('#twitter-intent'),
-		facebookEl = document.getElementById('facebook-share'),
+			facebookEl = jQuery('#facebook-share'),
-		googleEl = document.getElementById('google-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,62 +14,33 @@
 
 		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').on('click', function () {
-	new_post.onclick = function() {
+			require(['composer'], function (cmp) {
-		require(['composer'], function(cmp) {
 				cmp.push(0, cid);
 			});
-	}
+		});
 
 		ajaxify.register_events([
 			'event:new_topic'
 		]);
 
-	function onNewTopic(data) {
+		socket.on('event:new_topic', Category.onNewTopic);
-
-		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.on('event:new_topic', onNewTopic);
 
 		socket.emit('api:categories.getRecentReplies', cid);
-	socket.on('api:categories.getRecentReplies', function(posts) {
+		socket.on('api:categories.getRecentReplies', function (posts) {
 			if (!posts || posts.length === 0) {
 				return;
 			}
@@ -77,57 +51,110 @@
 
 			var frag = document.createDocumentFragment(),
 				li = document.createElement('li');
-		for (var i=0,numPosts=posts.length; i<numPosts; i++) {
+			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 + '">' +
+					'<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();
 	}
 
 
-
+	Category.loadMoreTopics = function(cid) {
-	function loadMoreTopics(cid) {
 		loadingMoreTopics = true;
 		socket.emit('api:category.loadMore', {
 			cid: cid,
-			after: $('#topics-container').children().length 
+			after: $('#topics-container').children('.category-item').length
-		}, function(data) {
+		}, function (data) {
-			if(data.topics.length) {
+			if (data.topics.length) {
-				onTopicsLoaded(data.topics);
+				Category.onTopicsLoaded(data.topics);
 			}
 			loadingMoreTopics = false;
 		});
 	}
 
-	$(window).off('scroll').on('scroll', function(ev) {
+	return Category;
-		var bottom = (document.body.offsetHeight - $(window).height()) * 0.9;
+});
-
-		if (document.body.scrollTop > bottom && !loadingMoreTopics) {
-			loadMoreTopics(cid);
-		}
-	});
-
-
-})();

public/src/forum/favourites.js

@@ -0,0 +1,13 @@
+define(['forum/accountheader'], function(header) {
+	var AccountHeader = {};
+
+	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,24 +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) {
+			if (parseInt(followersCount, 10) === 0) {
-			$('#no-followers-notice').show();
+				$('#no-followers-notice').removeClass('hide');
 			}
 
-		$('.reputation').each(function(index, element) {
+		app.addCommasToNumbers();
-			$(element).html(app.addCommas($(element).html()));
+	};
-		});
 
-		$('.postcount').each(function(index, element) {
+	return Followers;
-			$(element).html(app.addCommas($(element).html()));
+});
-		});
-		
-	});
-	
-
-}());

public/src/forum/following.js

@@ -1,46 +1,17 @@
-(function() {
+define(['forum/accountheader'], function(header) {
+	var	Following = {};
 
-	var yourid = templates.get('yourid'),
+	Following.init = function() {
-		theirid = templates.get('theirid'),
+		header.init();
-		followingCount = templates.get('followingCount');
 
-	$(document).ready(function() {
+		var followingCount = templates.get('followingCount');
 
-		if(parseInt(followingCount, 10) === 0) {
+		if (parseInt(followingCount, 10) === 0) {
-			$('#no-following-notice').show();
+			$('#no-following-notice').removeClass('hide');
 		}
 
+		app.addCommasToNumbers();
+	};
 
-		if(yourid !== theirid) {
+	return Following;
-			$('.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;
-			});
-		}
-
-		$('.reputation').each(function(index, element) {
-			$(element).html(app.addCommas($(element).html()));
-		});
-		
-		$('.postcount').each(function(index, element) {
-			$(element).html(app.addCommas($(element).html()));
-		});
-		
-	});
-	
-
-}());

public/src/forum/footer.js

@@ -1,85 +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.emit('api:updateHeader', {
-	socket.on('user.count', function(data) {
+		fields: ['username', 'picture', 'userslug']
-		num_users.innerHTML = "We currently have <b>" + data.count + "</b> registered users.";
 	});
 
-	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() {
-		if (data.uid > 0) {
+				jQuery('#search-fields').hide();
+				jQuery('#search-button').show();
+			});
 
-			var userLabel = rightMenu.find('#user_label');
+			$('#search-fields input').on('blur', function() {
-			if(userLabel.length) {
+				$('#search-fields').hide();
-				if(data['userslug'])
+				$('#search-button').show();
-					userLabel.attr('href','/users/' + data['userslug']);
+			});
-				if(data['picture'])
+		});
-					userLabel.find('img').attr('src',data['picture']);
+
-				if(data['username'])
+		var loggedInMenu = $('#logged-in-menu'),
+			isLoggedIn = data.uid > 0;
+
+		if (isLoggedIn) {
+			jQuery('.nodebb-loggedin').show();
+			jQuery('.nodebb-loggedout').hide();
+
+			$('#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.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>');
+				$('#logout-link').on('click', app.logout);
-				rightMenu.append(logoutli);
 			}
 		} else {
-			rightMenu.html('');
+			$('#search-button').hide();
 
-			var registerEl = document.createElement('li'),
+			jQuery('.nodebb-loggedin').hide();
-				loginEl = document.createElement('li');
+			jQuery('.nodebb-loggedout').show();
 
-			registerEl.innerHTML = '<a href="/register">Register</a>';
+			$('#logged-out-menu').removeClass('hide');
-			loginEl.innerHTML = '<a href="/login">Login</a>';
+			$('#logged-in-menu').addClass('hide');
 
-			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
@@ -90,75 +70,99 @@
 	notifTrigger.addEventListener('click', function(e) {
 		e.preventDefault();
 		if (notifContainer.className.indexOf('open') === -1) {
-			socket.emit('api:notifications.get');
+			socket.emit('api:notifications.get', null, function(data) {
-			socket.emit('api:notifications.mark_all_read', null, function() {
-				notifIcon.className = 'icon-circle-blank';
-				utils.refreshTitle();
-			});
-		}
-	});
-	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;
-		}
-		if (target) {
-			var nid = parseInt(target.getAttribute('data-nid'));
-			if (nid > 0) socket.emit('api:notifications.mark_read', nid);
-		}
-	});
-	socket.on('api:notifications.get', function(data) {
 				var notifFrag = document.createDocumentFragment(),
 					notifEl = document.createElement('li'),
 					numRead = data.read.length,
 					numUnread = data.unread.length,
 					x;
 				notifList.innerHTML = '';
+				console.log(data);
 				if ((data.read.length + data.unread.length) > 0) {
-			for(x=0;x<numUnread;x++) {
+					for (x = 0; x < numUnread; x++) {
 						notifEl.setAttribute('data-nid', data.unread[x].nid);
 						notifEl.className = 'unread';
 						notifEl.innerHTML = '<a href="' + data.unread[x].path + '"><span class="pull-right">' + utils.relativeTime(data.unread[x].datetime, true) + '</span>' + data.unread[x].text + '</a>';
 						notifFrag.appendChild(notifEl.cloneNode(true));
 					}
-			for(x=0;x<numRead;x++) {
+					for (x = 0; x < numRead; x++) {
 						notifEl.setAttribute('data-nid', data.read[x].nid);
 						notifEl.className = '';
 						notifEl.innerHTML = '<a href="' + data.read[x].path + '"><span class="pull-right">' + utils.relativeTime(data.read[x].datetime, true) + '</span>' + data.read[x].text + '</a>';
 						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';
 				else notifIcon.className = 'icon-circle-blank';
+
+				socket.emit('api:notifications.mark_all_read', null, function() {
+					notifIcon.className = 'icon-circle-blank';
+					utils.refreshTitle();
 				});
+			});
+		}
+	});
+
+	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;
+		}
+		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: 'warning',
+			timeout: 2000
+		});
 		utils.refreshTitle();
 	});
 
 
 	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);
+			var modal = null;
-			chatModal.show();
+			if (chat.modalExists(data.fromuid)) {
-			chat.bringModalToTop(chatModal);
+				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 = {};
 
-
+	Login.init = function() {
-(function() {
 		// Alternate Logins
 		var altLoginEl = document.querySelector('.alt-logins');
 		altLoginEl.addEventListener('click', function(e) {
 			var target;
-		switch(e.target.nodeName) {
+			switch (e.target.nodeName) {
-			case 'LI': target = e.target; break;
+				case 'LI':
-			case 'I': target = e.target.parentNode; break;
+					target = e.target;
+					break;
+				case 'I':
+					target = e.target.parentNode;
+					break;
 			}
 			if (target) {
 				document.location.href = target.getAttribute('data-url');
@@ -15,7 +20,6 @@
 		});
 
 		$('#login').on('click', function() {
-		
 			var loginData = {
 				'username': $('#username').val(),
 				'password': $('#password').val(),
@@ -27,11 +31,23 @@
 				url: RELATIVE_PATH + '/login',
 				data: loginData,
 				success: function(data, textStatus, jqXHR) {
+					if (!data.success) {
+						$('#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) {
+				error: function(data, textStatus, jqXHR) {
-				$('#login-error-notify').show().delay(1000).fadeOut(250);
+					$('#login-error-notify').show();
 				},
 				dataType: 'json',
 				async: true,
@@ -41,4 +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() {
+define(function() {
-	var loadingMoreTopics = false;
+	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;
+			++Recent.newTopicCount;
-		updateAlertText();
+			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)
+		if (Recent.newTopicCount > 1)
-			text = 'There are ' + newTopicCount + ' new topics';
+			text = 'There are ' + Recent.newTopicCount + ' new topics';
-		else if(newTopicCount === 1)
+		else if (Recent.newTopicCount === 1)
 			text = 'There is 1 new topic';
 		else
 			text = 'There are no new topics';
 
-		if(newPostCount > 1)
+		if (Recent.newPostCount > 1)
-			text += ' and ' + newPostCount + ' new posts.';
+			text += ' and ' + Recent.newPostCount + ' new posts.';
-		else if(newPostCount === 1)
+		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) {
+	Recent.onTopicsLoaded = function(topics) {
-		++newPostCount;
-		updateAlertText();
-	});
 
-	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() {
+	Recent.loadMoreTopics = function() {
-		loadingMoreTopics = true;
+		Recent.loadingMoreTopics = true;
-		socket.emit('api:topics.loadMoreRecentTopics', {after:$('#topics-container').children().length}, function(data) {
+		socket.emit('api:topics.loadMoreRecentTopics', {
-			if(data.topics && data.topics.length) {
+			after: $('#topics-container').children('li').length,
-				onTopicsLoaded(data.topics);
+			term: active
+		}, function(data) {
+			if (data.topics && data.topics.length) {
+				Recent.onTopicsLoaded(data.topics);
 			}
-			loadingMoreTopics = false;
+			Recent.loadingMoreTopics = false;
 		});
 	}
 
-	$(window).off('scroll').on('scroll', function() {
+	return Recent;
-		var bottom = (document.body.offsetHeight - $(window).height()) * 0.9;
+});
-
-		if (document.body.scrollTop > bottom && !loadingMoreTopics) {
-			loadMoreTopics();
-		}
-	});
-
-
-})();

public/src/forum/register.js

@@ -1,157 +1,159 @@
-(function() {
+define(function() {
-	var username = document.getElementById('username'),
+	var Register = {};
-		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;
 
-	$(username).on('keyup change', function() {
+	Register.init = function() {
-		usernamevalid = utils.isUserNameValid(username.value);
+		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) {
+		function showError(element, msg) {
-			username_notify.innerHTML = 'Username too short';
+			element.html(msg);
-			username_notify.className = 'label label-important';
+			element.parent()
-		} else if(username.value.length > 13) {
+				.removeClass('alert-success')
-			username_notify.innerHTML = 'Username too long';
+				.addClass('alert-danger');
-			username_notify.className = 'label label-important';
+			element.show();
-		} else if(!usernamevalid) {
+			validationError = true;
-			username_notify.innerHTML = 'Invalid username';
+		}
-			username_notify.className = 'label label-important';
+
+		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() {
+		function validatePassword() {
-		emailvalid = utils.isEmailValid(email.value);
+			if (!password.val()) {
-
+				validationError = true;
-		if(!emailvalid) {
+				return;
-			email_notify.innerHTML = 'Invalid email address';
-			email_notify.className = 'label label-important';
 			}
-		else
-			socket.emit('user.email.exists', { email: emailEl.value });
-	});
 
-	$(password).on('keyup', function() {
+			if (password.val().length < config.minimumPasswordLength) {
-		passwordvalid = utils.isPasswordValid(password.value);
+				showError(password_notify, 'Password too short!');
-		if (password.value.length < 6) {
+			} else if (!utils.isPasswordValid(password.val())) {
-			password_notify.innerHTML = 'Password too short';
+				showError(password_notify, 'Invalid password!');
-			password_notify.className = 'label label-important';
-		} else if(!passwordvalid) {
-			password_notify.innerHTML = 'Invalid password';
-			password_notify.className = 'label label-important';
 			} else {
-			password_notify.innerHTML = 'OK!';
+				showSuccess(password_notify, successIcon);
-			password_notify.className = 'label label-success';
 			}
 
-		if(password.value !== password_confirm.value) {
+			if (password.val() !== password_confirm.val() && password_confirm.val() !== '') {
-			password_confirm_notify.innerHTML = 'Passwords must match!';
+				showError(password_confirm_notify, 'Passwords must match!');
-			password_confirm_notify.className = 'label label-important';
-			passwordsmatch = false;
 			}
+		}
+
+		$(password).on('blur', function() {
+			validatePassword();
 		});
 
-	$(password_confirm).on('keyup', function() {
+		function validatePasswordConfirm() {
-		if(password.value !== password_confirm.value) {
+			if (!password.val() || password_notify.hasClass('alert-error')) {
-			password_confirm_notify.innerHTML = 'Passwords must match!';
+				return;
-			password_confirm_notify.className = 'label label-important';
-			passwordsmatch = false;
 			}
-		else {
+
-			password_confirm_notify.innerHTML = 'OK!';
+			if (password.val() !== password_confirm.val()) {
-			password_confirm_notify.className = 'label label-success';
+				showError(password_confirm_notify, 'Passwords must match!');
-			passwordsmatch = true;
+			} 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';
+				showError(username_notify, 'Username already taken!');
-			username_notify.className = 'label label-important';
 			} else {
-			username_notify.innerHTML = 'OK!';
+				showSuccess(username_notify, successIcon);
-			username_notify.className = 'label label-success';
 			}
 		});
 
 		socket.on('user.email.exists', function(data) {
-		emailexists = data.exists;
-
 			if (data.exists === true) {
-			email_notify.innerHTML = 'Email Address exists';
+				showError(email_notify, 'Email address already taken!');
-			email_notify.className = 'label label-important';
+			} else {
-		}
+				showSuccess(email_notify, successIcon);
-		else {
-			email_notify.innerHTML = 'OK!';
-			email_notify.className = 'label label-success';
 			}
 		});
 
 		// Alternate Logins
-	var altLoginEl = document.querySelector('.alt-logins');
+		$('.alt-logins li').on('click', function(e) {
-	altLoginEl.addEventListener('click', function(e) {
+			document.location.href = $(this).attr('data-url');
-		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');
-		}
 		});
 
 		function validateForm() {
-		var validated = true;
+			validationError = false;
 
-		if (username.value.length < 2 || !usernamevalid) {
+			validateEmail();
-			username_notify.innerHTML = 'Invalid username';
+			validateUsername();
-			username_notify.className = 'label label-important';
+			validatePassword();
-			validated = false;
+			validatePasswordConfirm();
+
+			return validationError;
 		}
 
-		if (password.value.length < 5) {
+		register.on('click', function(e) {
-			password_notify.innerHTML = 'Password too short';
+			if (validateForm()) e.preventDefault();
-			validated = false;
+		});
-		} 
+	};
 
-		if(password.value !== password_confirm.value) {
+	return Register;
-			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);
-	
-}());

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();
@@ -26,7 +31,7 @@
 			} else {
 				jQuery('#success').hide();
 				jQuery(errorEl).show();
-			switch(data.message) {
+				switch (data.message) {
 					case 'invalid-email':
 						errorTextEl.innerHTML = 'The email you put in (<span>' + data.email + '</span>) is not registered with us. Please try again.';
 						break;
@@ -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,20 +13,30 @@
 			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) {
+			} else if (password.value !== repeat.value) {
-			socket.emit('user:reset.commit', { code: reset_code, password: password.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']);
 		socket.on('user:reset.valid', function(data) {
-		if (!!data.valid) resetEl.disabled = false;
+			if ( !! data.valid) resetEl.disabled = false;
 			else {
 				var formEl = document.getElementById('reset-form');
 				// Show error message
@@ -39,4 +52,7 @@
 				$('#success').show();
 			}
 		});
-}());
+	};
+
+	return ResetCode;
+});

public/src/forum/search.js

@@ -1,14 +1,26 @@
-(function() {
+define(function() {
+	var	Search = {};
 
-	$(document).ready(function() {
+	Search.init = function() {
 		var searchQuery = $('#topics-container').attr('data-search-query');
 
 		$('.search-result-text').each(function() {
 			var text = $(this).html();
 			var regex = new RegExp(searchQuery, 'gi');
-			text = text.replace(regex, '<span class="label label-success">'+searchQuery+'</span>');
+			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,73 +11,105 @@
 				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);
 			if (thread_state.pinned === '1') set_pinned_state(true);
 
 			if (expose_tools === '1') {
-			var deleteThreadEl = document.getElementById('delete_thread'),
+				var moveThreadModal = $('#move_thread_modal');
-				lockThreadEl = document.getElementById('lock_thread'),
-				pinThreadEl = document.getElementById('pin_thread'),
-				moveThreadEl = document.getElementById('move_thread'),
-				moveThreadModal = $('#move_thread_modal');
 
 				adminTools.style.visibility = 'inherit';
 
 				// Add events to the thread tools
-			deleteThreadEl.addEventListener('click', function(e) {
+				$('#delete_thread').on('click', function(e) {
-				e.preventDefault();
 					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
+							});
 						});
 					}
-			}, false);
+					return false;
+				});
 
-			lockThreadEl.addEventListener('click', function(e) {
+				$('#lock_thread').on('click', function(e) {
-				e.preventDefault();
 					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
+						});
 					}
-			}, false);
+					return false;
+				});
 
-			pinThreadEl.addEventListener('click', function(e) {
+				$('#pin_thread').on('click', function(e) {
-				e.preventDefault();
 					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
+						});
 					}
-			}, false);
+					return false;
+				});
 
-			moveThreadEl.addEventListener('click', function(e) {
+				$('#move_thread').on('click', function(e) {
-				e.preventDefault();
 					moveThreadModal.modal('show');
-			}, false);
+					return false;
+				});
+
+				moveThreadModal.on('shown.bs.modal', function() {
 
-			moveThreadModal.on('shown', 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'),
@@ -88,9 +123,9 @@
 								x, info, targetCid, targetCatLabel;
 
 							categoriesEl.className = 'category-list';
-						for(x=0;x<numCategories;x++) {
+							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));
@@ -128,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
+									});
 								}
 							});
 						});
@@ -146,7 +184,7 @@
 
 			// Fix delete state for this thread's posts
 			var postEls = document.querySelectorAll('#post-container li[data-deleted]');
-		for(var x=0,numPosts=postEls.length;x<numPosts;x++) {
+			for (var x = 0, numPosts = postEls.length; x < numPosts; x++) {
 				if (postEls[x].getAttribute('data-deleted') === '1') toggle_post_delete_state(postEls[x].getAttribute('data-pid'));
 				postEls[x].removeAttribute('data-deleted');
 			}
@@ -187,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',
@@ -195,25 +233,37 @@
 					});
 				}
 			});
+
 			socket.emit('api:topic.followCheck', tid);
+			if (followEl[0]) {
 				followEl[0].addEventListener('click', function() {
 					socket.emit('api:topic.follow', tid);
 				}, false);
-
-		// Infinite scrolling of posts
-		$(window).off('scroll').on('scroll', function() {
-			var bottom = (document.body.offsetHeight - $(window).height()) * 0.9;	
-
-			if (document.body.scrollTop > bottom && !app.infiniteLoaderActive && $('#post-container').children().length) {
-				app.loadMorePosts(tid);
 			}
-		});
 
-		$('.post-container').on('click', '.deleted', function(ev) {
+			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;
+
+				if ($(window).scrollTop() > bottom && !app.infiniteLoaderActive && $('#post-container').children().length) {
+					app.loadMorePosts(tid);
+				}
+			});
+		}
+
 		var reply_fn = function() {
 			var selectionText = '',
 				selection = window.getSelection() || document.getSelection();
@@ -229,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');
 
@@ -243,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() {
+		$('#post-container').on('click', '.favourite', function() {
-		var ids = this.id.replace('favs_', '').split('_'),
+			var pid = $(this).parents('li').attr('data-pid');
-			pid = ids[0],
+			var uid = $(this).parents('li').attr('data-uid');
-			uid = ids[1];
 
 			var element = $(this).find('i');
-		if(element.attr('class') == 'icon-star-empty') {
+			if (element.attr('class') == 'icon-star-empty') {
-			element.attr('class', 'icon-star');
+				socket.emit('api:posts.favourite', {
-			socket.emit('api:posts.favourite', {pid: pid, room_id: app.current_room});
+					pid: pid,
-		}
+					room_id: app.current_room
-		else {
+				});
-			element.attr('class', 'icon-star-empty');
+			} else {
-			socket.emit('api:posts.unfavourite', {pid: pid, room_id: app.current_room});
+				socket.emit('api:posts.unfavourite', {
+					pid: pid,
+					room_id: app.current_room
+				});
 			}
 		});
 
-	$('.post-container').delegate('.edit', 'click', function(e) {
+		$('#post-container').on('click', '.link', function() {
-		var pid = ($(this).attr('id') || $(this.parentNode).attr('id')).split('_')[1];
+			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) {
+		$('#post-container').delegate('.delete', 'click', function(e) {
-		var	pid = ($(this).attr('id') || $(this.parentNode).attr('id')).split('_')[1],
+			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.delete', {
-			socket.emit('api:posts.restore', { pid: pid });
+						pid: pid
+					}) :
+					socket.emit('api:posts.restore', {
+						pid: pid
+					});
 			}
 		});
 
-	$('.post-container').delegate('.chat', 'click', function(e) {
+		$('#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');
 
-		var username = $(this).parents('li').attr('data-username');
+			if (username === app.username || !app.username)
-		var touid = $(this).parents('li').attr('data-uid');
+				return;
-
-		require(['chat'], function(chat){
-			var chatModal = chat.createModalIfDoesntExist(username, touid);
-			chatModal.show();
-			chat.bringModalToTop(chatModal);
-		});
 
+			app.openChat(username, touid);
 		});
 
 		ajaxify.register_events([
@@ -309,10 +371,80 @@
 
 
 		socket.on('api:get_users_in_room', function(data) {
-		var activeEl = $('#thread_active_users');
+			if(data) {
-		if(activeEl.length)
+				var activeEl = $('.thread_active_users');
-			activeEl.html(data);
 
+				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();
 		});
 
@@ -371,9 +503,9 @@
 		socket.on('event:post_edited', function(data) {
 			var editedPostEl = document.getElementById('content_' + data.pid);
 
-		var editedPostTitle = $('#topic_title_'+data.pid);
+			var editedPostTitle = $('#topic_title_' + data.pid);
 
-		if(editedPostTitle.length > 0) {
+			if (editedPostTitle.length > 0) {
 				editedPostTitle.fadeOut(250, function() {
 					editedPostTitle.html(data.title);
 					editedPostTitle.fadeIn(250);
@@ -384,12 +516,26 @@
 				this.innerHTML = data.content;
 				$(this).fadeIn(250);
 			});
+
 		});
 
 		socket.on('api:posts.favourite', function(data) {
-		if (data.status !== 'ok' && data.pid) {
+			if (data.status === 'ok' && data.pid) {
 				var favEl = document.querySelector('.post_rep_' + data.pid).nextSibling;
-			if (favEl) favEl.className = 'icon-star-empty';
+				if (favEl) {
+					favEl.className = 'icon-star';
+					$(favEl).parent().addClass('btn-warning');
+				}
+			}
+		});
+
+		socket.on('api:posts.unfavourite', function(data) {
+			if (data.status === 'ok' && data.pid) {
+				var favEl = document.querySelector('.post_rep_' + data.pid).nextSibling;
+				if (favEl) {
+					favEl.className = 'icon-star-empty';
+					$(favEl).parent().removeClass('btn-warning');
+				}
 			}
 		});
 
@@ -402,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) {
@@ -415,8 +561,8 @@
 			ptotal += value;
 			utotal += value;
 
-		post_rep.html(ptotal+ ' ');
+			post_rep.html(ptotal + ' ');
-		user_rep.html(utotal+ ' ');
+			user_rep.html(utotal + ' ');
 		}
 
 		function set_locked_state(locked, alert) {
@@ -433,7 +579,7 @@
 				lockThreadEl.innerHTML = '<i class="icon-unlock"></i> Unlock Thread';
 				threadReplyBtn.disabled = true;
 				threadReplyBtn.innerHTML = 'Locked <i class="icon-lock"></i>';
-			for(x=0;x<numPosts;x++) {
+				for (x = 0; x < numPosts; x++) {
 					postReplyBtns[x].innerHTML = 'Locked <i class="icon-lock"></i>';
 					quoteBtns[x].style.display = 'none';
 					editBtns[x].style.display = 'none';
@@ -455,7 +601,7 @@
 				lockThreadEl.innerHTML = '<i class="icon-lock"></i> Lock Thread';
 				threadReplyBtn.disabled = false;
 				threadReplyBtn.innerHTML = 'Reply';
-			for(x=0;x<numPosts;x++) {
+				for (x = 0; x < numPosts; x++) {
 					postReplyBtns[x].innerHTML = 'Reply <i class="icon-reply"></i>';
 					quoteBtns[x].style.display = 'inline-block';
 					editBtns[x].style.display = 'inline-block';
@@ -479,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';
@@ -591,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) {
@@ -24,23 +28,24 @@
 		function updateAlertText() {
 			var text = '';
 
-		if(newTopicCount > 1)
+			if (newTopicCount > 1)
 				text = 'There are ' + newTopicCount + ' new topics';
-		else if(newTopicCount === 1)
+			else if (newTopicCount === 1)
 				text = 'There is 1 new topic';
 			else
 				text = 'There are no new topics';
 
-		if(newPostCount > 1)
+			if (newPostCount > 1)
 				text += ' and ' + newPostCount + ' new posts.';
-		else if(newPostCount === 1)
+			else if (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');
+			$('#category-no-topics').addClass('hidden');
 		}
 
 		socket.on('event:new_post', function(data) {
@@ -50,12 +55,16 @@
 
 		$('#mark-allread-btn').on('click', function() {
 			var btn = $(this);
-		socket.emit('api:topics.markAllRead', {} , function(success) {
+			socket.emit('api:topics.markAllRead', {}, function(success) {
-			if(success) {
+				if (success) {
 					btn.remove();
 					$('#topics-container').empty();
 					$('#category-no-topics').removeClass('hidden');
 					app.alertSuccess('All topics marked as read!');
+					$('#numUnreadBadge')
+						.removeClass('badge-important')
+						.addClass('badge-inverse')
+						.html('0');
 				} else {
 					app.alertError('There was an error marking topics read!');
 				}
@@ -64,39 +73,49 @@
 
 		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', {
-			if(data.topics && data.topics.length) {
+				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);
+				} else {
+					$('#load-more-btn').hide();
 				}
+
 				loadingMoreTopics = false;
 			});
 		}
 
 		$(window).off('scroll').on('scroll', function() {
-		var bottom = (document.body.offsetHeight - $(window).height()) * 0.9;
+			var bottom = ($(document).height() - $(window).height()) * 0.9;
 
-		if (document.body.scrollTop > bottom && !loadingMoreTopics) {
+			if ($(window).scrollTop() > bottom && !loadingMoreTopics) {
 				loadMoreTopics();
 			}
 		});
 
 
-	if($("body").height() <= $(window).height() && $('#topics-container').children().length)
+		if ($("body").height() <= $(window).height() && $('#topics-container').children().length >= 20)
 			$('#load-more-btn').show();
 
 		$('#load-more-btn').on('click', function() {
 			loadMoreTopics();
 		});
+	};
 
-})();
+	return Unread;
+});

public/src/forum/users.js

@@ -1,12 +1,22 @@
-(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];
+			active = parts[parts.length - 1];
+			return active;
+		}
+
+		var active = getActiveSection();
+
+		var lastSearch = null;
+
+		app.addCommasToNumbers();
 
 		jQuery('.nav-pills li').removeClass('active');
 		jQuery('.nav-pills li a').each(function() {
@@ -16,8 +26,8 @@
 			}
 		});
 
-		jQuery('#search-user').on('keyup', function () {
+		jQuery('#search-user').on('keyup', function() {
-			if(timeoutId !== 0) {
+			if (timeoutId !== 0) {
 				clearTimeout(timeoutId);
 				timeoutId = 0;
 			}
@@ -25,96 +35,119 @@
 			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) {
-			
+			if (data === null) {
-			jQuery('.icon-spinner').addClass('none');				
+				$('#user-notfound-notify').html('You need to be logged in to search!');
-			
+				$('#user-notfound-notify').parent().addClass('btn-warning label-warning');
-			if(data === null) {
-				$('#user-notfound-notify').html('You need to be logged in to search!')
-					.show()
-					.addClass('label-important')
-					.removeClass('label-success');
 				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) {
+			if (data && data.length === 0) {
-				$('#user-notfound-notify').html('User not found!')
+				$('#user-notfound-notify').html('User not found!');
-					.show()
+				$('#user-notfound-notify').parent().addClass('btn-warning label-warning');
-					.addClass('label-important')
+			} else {
-					.removeClass('label-success');
+				$('#user-notfound-notify').html(data.length + ' user' + (data.length > 1 ? 's' : '') + ' found!');
-			}
+				$('#user-notfound-notify').parent().addClass('btn-success label-success');
-			else {
-				$('#user-notfound-notify').html(data.length + ' user'+(data.length>1?'s':'') + ' found!')
-					.show()
-					.addClass('label-success')
-					.removeClass('label-important');
 			}
 
 		});
 
-		$('.reputation').each(function(index, element) {
+		socket.on('api:user.isOnline', function(data) {
-			$(element).html(app.addCommas($(element).html()));
+			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');
+					}
+				});
+			}
 		});
 
-		$('.postcount').each(function(index, element) {
+		function onUsersLoaded(users, emptyContainer) {
-			$(element).html(app.addCommas($(element).html()));
+			var html = templates.prepare(templates['users'].blocks['users']).parse({
+				users: users
 			});
-		
+			if(emptyContainer)
-		function onUsersLoaded(users) {
+				$('#users-container .registered-user').remove();
-			var html = templates.prepare(templates['users'].blocks['users']).parse({ users: users });
 			$('#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) {
+			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) {
+				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);
 
 		$(window).off('scroll').on('scroll', function() {
-			var bottom = (document.body.offsetHeight - $(window).height()) * 0.9;
+			var bottom = ($(document).height() - $(window).height()) * 0.9;
 
-			if (document.body.scrollTop > bottom && !loadingMoreUsers) {
+			if ($(window).scrollTop() > bottom && !loadingMoreUsers) {
 				loadMoreUsers();
 			}
 		});
-	});
+	};
 
-}());
+	return Users;
+});

public/src/modules/chat.js

@@ -2,7 +2,6 @@ define(['taskbar'], function(taskbar) {
 
 	var module = {};
 
-	
 	module.bringModalToTop = function(chatModal) {
 		var topZ = 0;
 		$('.modal').each(function() {
@@ -11,26 +10,63 @@ define(['taskbar'], function(taskbar) {
 			topZ = thisZ;
 		  }
 		});
-		chatModal.css('zIndex', topZ+1);
+		chatModal.css('zIndex', topZ + 1);
 	}
 
-	module.createModalIfDoesntExist = function(username, touid) {
+	module.getModal = function(touid) {
-		var chatModal = $('#chat-modal-'+touid);
+		return $('#chat-modal-' + touid);
+	}
 
-		if(!chatModal.length) {
+	module.modalExists = function(touid) {
-			var chatModal = $('#chat-modal').clone();
+		return $('#chat-modal-' + touid).length !== 0;
-			chatModal.attr('id','chat-modal-'+touid);
+	}
-			var uuid = utils.generateUUID();
+
+	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;
+
+		chatModal.attr('id', 'chat-modal-' + touid);
 		chatModal.attr('UUID', uuid);
 		chatModal.appendTo($('body'));
 		chatModal.draggable({
-				start:function(){
+			start:function() {
 				module.bringModalToTop(chatModal);
 			}
 		});
+
 		chatModal.find('#chat-with-name').html(username);
 
-			chatModal.find('.close').on('click',function(e){
+		chatModal.find('.close').on('click', function(e) {
+			clearInterval(chatModal.intervalId);
+			chatModal.intervalId = 0;
 			chatModal.hide();
 			taskbar.discard('chat', uuid);
 		});
@@ -39,10 +75,20 @@ define(['taskbar'], function(taskbar) {
 			module.bringModalToTop(chatModal);
 		});
 
-			addSendHandler(chatModal, touid);	
+		addSendHandler(chatModal);
+
+		getChatMessages(chatModal, function() {
+			checkOnlineStatus(chatModal);
+		});
+
+		taskbar.push('chat', chatModal.attr('UUID'), {title:'chat with ' + username});
+		return chatModal;
 	}
 
-		taskbar.push('chat', chatModal.attr('UUID'), {title:'chat with '+username});
+	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;
 	}
 
@@ -50,43 +96,56 @@ define(['taskbar'], function(taskbar) {
 		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 addSendHandler(chatModal, touid) {
+	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, messages[i].timestamp);
+			}
+			callback();
+		});
+	}
+
+	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, timestamp) {
-	module.appendChatMessage = function(chatModal, message){
 		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,12 +7,33 @@ define(['taskbar'], function(taskbar) {
 		postContainer: undefined,
 	};
 
+	var uploadsInProgress = [];
+
+	function createImagePlaceholder(img) {
+		var text = $('.post-window textarea').val(),
+			textarea = $('.post-window textarea'),
+			imgText = "!["+img.name+"](uploading...)";
+
+		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();
+		});
+	}
+
 	function loadFile(file) {
-		var reader = new FileReader();
+		var reader = new FileReader(),
-		var dropDiv = $('#imagedrop');
+			dropDiv = $('.post-window .imagedrop'),
-		var imagelist = $('#imagelist');
+			uuid = dropDiv.parents('[data-uuid]').attr('data-uuid');
-		var uuid = dropDiv.parents('[data-uuid]').attr('data-uuid');
-		var posts = composer.posts[uuid];
 
 		$(reader).on('loadend', function(e) {
 			var bin = this.result;
@@ -23,21 +44,8 @@ define(['taskbar'], function(taskbar) {
 				data: bin
 			};
 
-			posts.images.push(img);
+			createImagePlaceholder(img);
 
-			var imageLabel = $('<div class="label"><span>'+ file.name +'</span></div>');
-			var closeButton = $('<button class="close">&times;</button>');
-			closeButton.on('click', function(e) {
-				
-				imageLabel.remove();
-				var index = posts.images.indexOf(img);
-				if(index !== -1) {
-					posts.images.splice(index, 1);
-				}
-			});
-
-			imageLabel.append(closeButton);      	
-    		imagelist.append(imageLabel);
 			dropDiv.hide();
 		});
 
@@ -47,11 +55,28 @@ define(['taskbar'], function(taskbar) {
 	function initializeFileReader() {
 		jQuery.event.props.push( "dataTransfer" );
 
-		if(window.FileReader) {
+		var draggingDocument = false;
-			var drop = $('#imagedrop');
 
-			$(composer.postContainer).on('dragenter dragover', function() {
+		if(window.FileReader) {
+			var drop = $('.post-window .imagedrop'),
+				textarea = $('.post-window textarea');
+
+			$(document).on('dragstart', function(e) {
+				draggingDocument = true;
+			}).on('dragend', function(e) {
+				draggingDocument = false;
+			});
+
+			textarea.on('dragenter', function(e) {
+				if(draggingDocument)
+					return;
+				drop.css('top', textarea.position().top + 'px');
 				drop.show();
+
+				drop.on('dragleave', function(ev) {
+					drop.hide();
+					drop.off('dragleave');
+				});
 			});
 
 			function cancel(e) {
@@ -64,19 +89,18 @@ define(['taskbar'], function(taskbar) {
 
 			drop.on('drop', function(e) {
 				e.preventDefault();
-				var uuid = drop.parents('[data-uuid]').attr('data-uuid');
+				var uuid = drop.parents('[data-uuid]').attr('data-uuid'),
-				var posts = composer.posts[uuid];			
+					dt = e.dataTransfer,
-				
+					files = dt.files;
-				var dt = e.dataTransfer;
-				var files = dt.files;
 
 				for (var i=0; i<files.length; i++) {
 					loadFile(files[i]);
 				}
+
+				if(!files.length)
+					drop.hide();
 				return false;
-				
 			});
-			
 		}
 	}
 
@@ -85,25 +109,22 @@ define(['taskbar'], function(taskbar) {
 			var taskbar = document.getElementById('taskbar');
 
 			composer.postContainer = document.createElement('div');
-			composer.postContainer.className = 'post-window row-fluid';
+			composer.postContainer.className = 'post-window row';
-			composer.postContainer.innerHTML =	'<div class="span5">' +
+			composer.postContainer.innerHTML =	'<div class="col-md-5">' +
 													'<input type="text" tabIndex="1" placeholder="Enter your topic title here..." />' +
-													'<div class="btn-toolbar">' +
+													'<div class="btn-toolbar formatting-bar">' +
-														'<div class="btn-group formatting-bar">' +
+														'<div class="btn-group">' +
 															'<span class="btn btn-link" tabindex="-1"><i class="icon-bold"></i></span>' +
 															'<span class="btn btn-link" tabindex="-1"><i class="icon-italic"></i></span>' +
 															'<span class="btn btn-link" tabindex="-1"><i class="icon-list"></i></span>' +
 															'<span class="btn btn-link" tabindex="-1"><i class="icon-link"></i></span>' +
 														'</div>' +
 													'</div>' +
-													'<div style="position:relative;">'+
-														'<div id="imagedrop" class=""><div>Drag and Drop Images Here</div></div>'+
 													'<textarea tabIndex="2"></textarea>' +
-														'<div id="imagelist"></div>'+
+													'<div class="imagedrop"><div>Drag and Drop Images Here</div></div>'+
-													'</div>'+
+													'<div class="btn-toolbar action-bar">' +
-													'<div class="btn-toolbar">' +
+														'<div class="btn-group" style="float: right; margin-right: -8px">' +
-														'<div class="btn-group action-bar" style="float: right; margin-right: -8px">' +
+															'<button data-action="minimize" class="btn hidden-xs" tabIndex="4"><i class="icon-download-alt"></i> Minimize</button>' +
-															'<button data-action="minimize" class="btn hidden-phone" 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>' +
@@ -112,6 +133,7 @@ define(['taskbar'], function(taskbar) {
 
 			document.body.insertBefore(composer.postContainer, taskbar);
 
+			if(config.imgurClientIDSet)
 				initializeFileReader();
 
 			socket.on('api:composer.push', function(threadData) {
@@ -129,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',
@@ -152,21 +174,35 @@ define(['taskbar'], function(taskbar) {
 
 			// Post Window events
 			var	jPostContainer = $(composer.postContainer),
-				postContentEl = composer.postContainer.querySelector('textarea')
+				postContentEl = composer.postContainer.querySelector('textarea');
+
 			jPostContainer.on('change', 'input, textarea', function() {
 				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() {
 				var	action = this.getAttribute('data-action'),
 					uuid = $(this).parents('.post-window').attr('data-uuid');
 				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;
 				}
 			});
+
 			jPostContainer.on('click', '.formatting-bar span', function() {
 				var iconClass = this.querySelector('i').className,
 					cursorEnd = postContentEl.value.length,
@@ -242,12 +278,7 @@ define(['taskbar'], function(taskbar) {
 	composer.load = function(post_uuid) {
 		var post_data = composer.posts[post_uuid],
 			titleEl = composer.postContainer.querySelector('input'),
-			bodyEl = composer.postContainer.querySelector('textarea'),
+			bodyEl = composer.postContainer.querySelector('textarea');
-			dropDiv = $(composer.postContainer).find('#imagedrop'),
-			imagelist = $(composer.postContainer).find('#imagelist');
-
-		dropDiv.hide();
-		imagelist.empty();
 
 		composer.reposition(post_uuid);
 		composer.active = post_uuid;
@@ -264,7 +295,8 @@ define(['taskbar'], function(taskbar) {
 			titleEl.value = post_data.title;
 			titleEl.readOnly = false;
 		}
-		bodyEl.value = post_data.body
+		bodyEl.value = post_data.body;
+
 
 		// Direct user focus to the correct element
 		if ((parseInt(post_data.tid) || parseInt(post_data.pid)) > 0) {
@@ -277,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(),
@@ -299,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.",
@@ -311,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.",
@@ -324,21 +366,18 @@ define(['taskbar'], function(taskbar) {
 			socket.emit('api:topics.post', {
 				'title' : titleEl.value,
 				'content' : bodyEl.value,
-				'category_id' : postData.cid,
+				'category_id' : postData.cid
-				images: composer.posts[post_uuid].images
 			});
 		} else if (parseInt(postData.tid) > 0) {
 			socket.emit('api:posts.reply', {
 				'topic_id' : postData.tid,
-				'content' : bodyEl.value,
+				'content' : bodyEl.value
-				images: composer.posts[post_uuid].images
 			});
 		} else if (parseInt(postData.pid) > 0) {
 			socket.emit('api:posts.edit', {
 				pid: postData.pid,
 				content: bodyEl.value,
-				title: titleEl.value,
+				title: titleEl.value
-				images: composer.posts[post_uuid].images
 			});
 		}
 
@@ -347,8 +386,9 @@ define(['taskbar'], function(taskbar) {
 
 	composer.discard = function(post_uuid) {
 		if (composer.posts[post_uuid]) {
-			$(composer.postContainer).find('#imagedrop').html('');
+			$(composer.postContainer).find('.imagedrop').hide();
 			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.innerHTML = '<div class="navbar-inner"><ul class="nav navbar-nav pull-right"></ul></div>';
-			taskbar.taskbar.className = 'taskbar navbar navbar-fixed-bottom';
+			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 = {},
@@ -14,11 +12,11 @@
 		fs = require('fs');
 	} catch (e) {}
 
-	templates.force_refresh = function(tpl) {
+	templates.force_refresh = function (tpl) {
 		return !!config.force_refresh[tpl];
 	}
 
-	templates.get_custom_map = function(tpl) {
+	templates.get_custom_map = function (tpl) {
 		if (config['custom_mapping'] && tpl) {
 			for (var pattern in config['custom_mapping']) {
 				if (tpl.match(pattern)) {
@@ -30,11 +28,11 @@
 		return false;
 	}
 
-	templates.is_available = function(tpl) {
+	templates.is_available = function (tpl) {
 		return jQuery.inArray(tpl, available_templates) !== -1;
 	};
 
-	templates.ready = function(callback) {
+	templates.ready = function (callback) {
 		if (callback == null) {
 			if (this.ready_callback) {
 				this.ready_callback();
@@ -50,7 +48,7 @@
 		}
 	};
 
-	templates.prepare = function(raw_tpl, data) {
+	templates.prepare = function (raw_tpl, data) {
 		var template = {};
 		template.html = raw_tpl;
 		template.parse = parse;
@@ -59,15 +57,16 @@
 		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) {
+					(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() {
+							var template = function () {
-							this.toString = 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) {
+			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,14 +107,14 @@
 	}
 
 
-	templates.init = function(templates_to_load) {
+	templates.init = function (templates_to_load, custom_templates) {
-		loadTemplates(templates_to_load || []);
+		loadTemplates(templates_to_load || [], custom_templates || false);
 	}
 
-	templates.getTemplateNameFromUrl = function(url) {
+	templates.getTemplateNameFromUrl = function (url) {
 		var parts = url.split('?')[0].split('/');
 
-		for(var i=0; i<parts.length; ++i) {
+		for (var i = 0; i < parts.length; ++i) {
 			if (templates.is_available(parts[i])) {
 				return parts[i];
 			}
@@ -117,30 +123,24 @@
 	}
 
 
-	templates.load_template = function(callback, url, template) {
+	templates.load_template = function (callback, url, template) {
 		var location = document.location || window.location,
-			rootUrl = location.protocol + '//' + (location.hostname || location.host) + (location.port ? ':' + location.port : '');
+			api_url = (url === '' || url === '/') ? 'home' : url,
+			tpl_url = templates.get_custom_map(api_url.split('?')[0]),
+			trimmed = api_url;
 
-		var api_url = (url === '' || url === '/') ? 'home' : url;
+		if (!tpl_url) {
-
-		var tpl_url = templates.get_custom_map(api_url.split('?')[0]);
-
-		var trimmed = api_url;
-		
-		if(!tpl_url) {
 			tpl_url = templates.getTemplateNameFromUrl(api_url);
 		}
 
 		var template_data = null;
 
-
-		(function() {
 		var timestamp = new Date().getTime(); //debug
 
 		if (!templates[tpl_url]) {
-				jQuery.get(RELATIVE_PATH + '/templates/' + tpl_url + '.tpl?v=' + timestamp, function(html) {
+			jQuery.get(RELATIVE_PATH + '/templates/' + tpl_url + '.tpl?v=' + timestamp, function (html) {
-					var template = function() {
+				var template = function () {
-						this.toString = function() {
+					this.toString = function () {
 						return this.html;
 					};
 				}
@@ -157,76 +157,76 @@
 			parse_template();
 		}
 
-		}());
+		jQuery.get(RELATIVE_PATH + '/api/' + api_url, function (data) {
 
-		(function() {
+			if (!data) {
-
-			jQuery.get(API_URL + api_url, function(data) {
-
-				if(!data) {
 				ajaxify.go('404');
 				return;
 			}
 
 			template_data = data;
 			parse_template();
-			}).fail(function(data) {
+		}).fail(function (data) {
-				template_data = {};
+			if(data && data.status == 404) {
-				parse_template();
+				ajaxify.go('404');
+				return;
+			}
+			app.alertError("Can't load template data!");
 		});
-		}());
-		
 
 		function parse_template() {
 			if (!templates[tpl_url] || !template_data) return;
 
-			if(typeof global !== "undefined")
+			if (typeof global !== "undefined")
-				template_data['relative_path'] = global.nconf.get('relative_path');
+				template_data['relative_path'] = nconf.get('relative_path');
 			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) {
 
-			jQuery('#content [template-variable]').each(function(index, element) {
+				$('#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);
 				}
+			});
 		}
 
 	}
 
-	templates.flush = function() {
+	templates.flush = function () {
 		parsed_variables = {};
 	}
 
-	templates.get = function(key) {
+	templates.get = function (key) {
 		return parsed_variables[key];
 	}
 
-	templates.set = function(key, value) {
+	templates.set = function (key, value) {
 		parsed_variables[key] = value;
 	}
 
 	//modified from https://github.com/psychobunny/dcp.templates
-	var parse = function(data) {
+	var parse = function (data) {
 		var self = this;
 
 		function replace(key, value, template) {
@@ -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,20 +282,24 @@
 
 			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 + '.';
 
 						var regex = makeRegex(d),
-							block = getBlock(regex, namespace.substring(0, namespace.length-1), template);
+							block = getBlock(regex, namespace.substring(0, namespace.length - 1), template);
 
 						if (block == null) {
 							namespace = namespace.replace(d + '.', '');
 							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) {
+(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', ''));
+							results.push(file.replace(main_dir + '/', '').replace('.tpl', ''));
-							if (!--pending) done(null, results);
+							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' : '');
@@ -72,7 +94,7 @@
 			// remove accents, swap ñ for n, etc
 			var from = "àáäâèéëêìíïîıòóöôùúüûñçşğ·/_,:;";
 			var to = "aaaaeeeeiiiiioooouuuuncsg------";
-			for (var i=0, l=from.length ; i<l ; i++) {
+			for (var i = 0, l = from.length; i < l; i++) {
 				str = str.replace(new RegExp(from.charAt(i), 'g'), to.charAt(i));
 			}
 
@@ -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/
@@ -104,7 +126,7 @@
 			var tags = /<\/?([a-z][a-z0-9]*)\b[^>]*>/gi,
 				commentsAndPhpTags = /<!--[\s\S]*?-->|<\?(?:php)?[\s\S]*?\?>/gi;
 
-			return input.replace(commentsAndPhpTags, '').replace(tags, function ($0, $1) {
+			return input.replace(commentsAndPhpTags, '').replace(tags, function($0, $1) {
 				return allowed.indexOf('<' + $1.toLowerCase() + '>') > -1 ? $0 : '';
 			});
 		},
@@ -112,10 +134,13 @@
 		buildMetaTags: function(tagsArr) {
 			var tags = '',
 				tag;
-			for(var x=0,numTags=tagsArr.length;x<numTags;x++) {
+			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';
-				for(y in tagsArr[x]) {
+				var y;
+				for (y in tagsArr[x]) {
 					tag += ' ' + y + '="' + tagsArr[x][y] + '"';
 				}
 				tag += ' />';
@@ -126,36 +151,86 @@
 			return tags;
 		},
 
-		refreshTitle: function() {
+		buildLinkTags: function(tagsArr) {
-			var	a = document.createElement('a');
+			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] + '"';
+				}
+				tag += ' />';
 
+				tags += tag;
+			}
+
+			return tags;
+		},
+
+		refreshTitle: function(url) {
+			if (!url) {
+				var a = document.createElement('a');
 				a.href = document.location;
-			socket.emit('api:meta.buildTitle', a.pathname.slice(1), function(title) {
+				url = a.pathname.slice(1);
-				document.title = title;
+			}
+			var notificationIcon;
+
+			socket.emit('api:meta.buildTitle', url, function(title, numNotifications) {
+				document.title = (numNotifications > 0 ? '(' + numNotifications + ') ' : '') + title;
+				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) {
+				var badge = jQuery('#numUnreadBadge');
+				badge.html(data.count > 20 ? '20+' : data.count);
+
+				if (data.count > 0) {
+					badge
+						.removeClass('badge-inverse')
+						.addClass('badge-important');
+				} else {
+					badge
+						.removeClass('badge-important')
+						.addClass('badge-inverse');
 				}
+			});
+		},
+
+		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">
+<div class="alert alert-danger">
-	<strong>Access Denied</strong>
+	<strong>[[global:403.title]]</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>
+	<p>[[global:403.message]]</p>
 </div>

public/templates/404.tpl

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

public/templates/account.tpl

@@ -1,37 +1,30 @@
 
-<div class="well">
+<div class="well account">
 
-
+	<div class="account-username-box" data-userslug="{userslug}">
-
-	<div class="account-username-box">
 		<span class="account-username">
-			<a href="/users/{userslug}">{username}</a>
+			<a href="/user/{userslug}">{username}</a>
 		</span>
-		<div class="account-sub-links inline-block pull-right">
-			<span id="settingsLink" class="pull-right"><a href="/users/{userslug}/settings">settings</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>
 	</div>
 
-
+	<div class="row">
-	<div class="row-fluid">
+		<div class="col-md-2 account-block" style="text-align: center; margin-bottom:20px;">
-		<div class="span2" 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-danger">banned</span>
+			</div>
 			<div id="user-actions">
-				<a id="follow-btn" href="#" class="btn hide">Follow</a>
+				<a id="follow-btn" href="#" class="btn btn-default">Follow</a>
-				<a id="unfollow-btn" href="#" class="btn hide">Unfollow</a>
+				<a id="unfollow-btn" href="#" class="btn btn-default">Unfollow</a>
 			</div>
 		</div>
 
-		<div class="span4">
+		<div class="col-md-4">
-			<h4>profile</h4>
 			<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>
@@ -54,24 +47,28 @@
 					<span>{age}</span>
 					<br/>
 					<hr/>
-					<span class="account-bio-label">member for</span>
+					<span class="account-bio-label">joined</span>
-					<span>{joindate}</span>
+					<span class="timeago" title="{joindate}"></span>
+					<br/>
+
+					<span class="account-bio-label">profile views</span>
+					<span class="formatted-number">{profileviews}</span>
 					<br/>
 
 					<span class="account-bio-label">reputation</span>
-					<span id='reputation'>{reputation}</span>
+					<span class="formatted-number">{reputation}</span>
 					<br/>
 
 					<span class="account-bio-label">posts</span>
-					<span id='postcount'>{postcount}</span>
+					<span class="formatted-number">{postcount}</span>
 					<br/>
 
 					<span class="account-bio-label">followers</span>
-					<span>{followerCount}</span>
+					<span class="formatted-number">{followerCount}</span>
 					<br/>
 
 					<span class="account-bio-label">following</span>
-					<span>{followingCount}</span>
+					<span class="formatted-number">{followingCount}</span>
 					<br/>
 
 					<hr/>
@@ -83,12 +80,11 @@
 			</div>
 		</div>
 
-		<div class="span6 user-recent-posts">
+		<div class="col-md-6 user-recent-posts">
-			<h4>recent posts </h4>
 			<!-- 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>
@@ -102,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,132 +1,97 @@
 
 <div class="well">
 
-
+	<div id="change-picture-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="Change Picture" aria-hidden="true">
-	<!-- Change Picture Modal -->
+		<div class="modal-dialog">
-	<div id="change-picture-modal" class="modal hide" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
+			<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>
+			</div><!-- /.modal-content -->
+		</div><!-- /.modal-dialog -->
+	</div><!-- /.modal -->
 
-	<!-- Upload picture modal-->
+	<div class="account-username-box" data-userslug="{userslug}">
-	<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 class="account-username-box">
 		<span class="account-username">
-			<a href="/users/{userslug}">{username}</a> <i class="icon-chevron-right"></i>
+			<a href="/user/{userslug}">{username}</a> <i class="icon-chevron-right"></i>
-			<a href="/users/{userslug}/edit">edit</a>
+			<a href="/user/{userslug}/edit">edit</a>
 		</span>
-		<div class="account-sub-links inline-block pull-right">
-			<span id="settingsLink" class="pull-right"><a href="/users/{userslug}/settings">settings</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>
 	</div>
 
-	<div class="row-fluid">
+	<div class="row">
-		<div class="span2" style="text-align: center; margin-bottom:20px;">
+		<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="col-md-5">
-			 <div class="inline-block">
+			<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>
@@ -134,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>
@@ -170,5 +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/accountedit.js"></script>

public/templates/accountsettings.tpl

@@ -1,28 +1,24 @@
 
 <div class="well">
 
-	<div class="account-username-box">
+	<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="/user/{userslug}">{username}</a> <i class="icon-chevron-right"></i>
-			<a href="/users/{userslug}/settings">settings</a>
+			<a href="/user/{userslug}/settings">settings</a>
 		</span>
-		<div class="account-sub-links inline-block pull-right">
-			<span id="settingsLink" class="pull-right"><a href="/users/{userslug}/settings">settings</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>
 	</div>
 
-	<div class="row-fluid">
+	<div class="row">
-		<div class="span6">
+		<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>
@@ -30,5 +26,3 @@
 		<a id="submitBtn" href="#" class="btn btn-primary">Save changes</a>
 	</div>
 </div>
-
-<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: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="input-large" placeholder="App Secret"><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: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="input-large" placeholder="Client Secret"><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,88 +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>
-	<link rel="stylesheet" type="text/css" href="{relative_path}/css/style.css" />
+	<script src="{relative_path}/src/utils.js"></script>
-	<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 navbar-inverse navbar-fixed-top header">
-		<div class="navbar-inner">
+		<div class="container">
-			<div class="container-fluid">
+			<div class="navbar-header">
-				<a class="brand" href="/admin/index">NodeBB ACP</a>
+				<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
-				<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
 					<span class="icon-bar"></span>
 					<span class="icon-bar"></span>
 					<span class="icon-bar"></span>
 				</button>
-				<div class="nav-collapse collapse">
+				<a class="navbar-brand" href="/admin/index">NodeBB ACP</a>
-					<ul class="nav">
+			</div>
-						<li>
+			<div class="collapse navbar-collapse">
-						  <a href="/" target="_blank"><i class="icon-book"></i> Forum</a>
+				<ul class="nav navbar-nav">
-						</li>
 					<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="container">
-		<div class="row-fluid">
+		<div class="row">
-			<div class="span3">
+			<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='active'>
-						<li class=''><a href='{relative_path}/admin/categories/active'><i class='icon-folder-close-alt'></i> Categories</a></li>
+							<a href='{relative_path}/admin/index'><i class='icon-home'></i> Home</a>
-						<li class=''><a href='{relative_path}/admin/users/latest'><i class='icon-user'></i> Users</a></li>
+						</li>
-						<li class=''><a href='{relative_path}/admin/topics'><i class='icon-book'></i> Topics</a></li>
+						<li><a href='{relative_path}/admin/categories/active'><i class='icon-folder-close-alt'></i> Categories</a></li>
-						<li class=''><a href='{relative_path}/admin/themes'><i class='icon-th'></i> Themes</a></li>
+						<li><a href='{relative_path}/admin/users/latest'><i class='icon-user'></i> Users</a></li>
-						<li class=''><a href='{relative_path}/admin/plugins'><i class='icon-code-fork'></i> Plugins</a></li>
+						<li><a href="{relative_path}/admin/groups"><i class="icon-group"></i> Groups</a></li>
-						<li class=''><a href='{relative_path}/admin/settings'><i class='icon-cogs'></i> Settings</a></li>
+						<li><a href='{relative_path}/admin/topics'><i class='icon-book'></i> Topics</a></li>
-						<li class=''><a href='{relative_path}/admin/redis'><i class='icon-hdd'></i> Redis</a></li>
+						<li><a href='{relative_path}/admin/themes'><i class='icon-th'></i> Themes</a></li>
-						<li class=''><a href="{relative_path}/admin/motd"><i class="icon-comment"></i> MOTD</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><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><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><a href='{relative_path}/admin/gplus'><i class='icon-google-plus-sign'></i> Google+</a></li>
-						<!--<li class="nav-header">Custom Modules</li>-->
+					</ul>
-						<!-- <li class=''><a href=''>Search</a></li> -->
+				</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><a href='{relative_path}/admin/testing/categories'>Categories</a></li>
-							<!--<li class=''><a href='{relative_path}/admin/testing/topics'>Topics</a></li>
+							<!--<li><a href='{relative_path}/admin/testing/topics'>Topics</a></li>
-							<li class=''><a href='{relative_path}/admin/testing/posts'>Posts</a></li>
+							<li><a href='{relative_path}/admin/testing/posts'>Posts</a></li>
-							<li class=''><a href='{relative_path}/admin/testing/accounts'>Accounts</a></li>
+							<li><a href='{relative_path}/admin/testing/accounts'>Accounts</a></li>
-							<li class=''><a href='{relative_path}/admin/testing/chat'>Chat</a></li>
+							<li><a href='{relative_path}/admin/testing/chat'>Chat</a></li>
-							<li class=''><a href='{relative_path}/admin/testing/notifications'>Notifications</a></li>
+							<li><a href='{relative_path}/admin/testing/notifications'>Notifications</a></li>
-							<li class=''><a href='{relative_path}/admin/testing/friends'>Friends</a></li>
+							<li><a href='{relative_path}/admin/testing/friends'>Friends</a></li>
-							<li class=''><a href='{relative_path}/admin/testing/feed'>RSS Feed</a></li>
+							<li><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/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-default btn-lg"><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-default btn-lg"><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-default btn-lg"><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-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>
-
+<hr />
-<div class="alert motd">
+<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,64 +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="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>Manage Thread</strong><br /> <input type="text" class="form-control" value="1000" data-field="privileges:manage_topic"><br />
-		<strong>Moderate Users</strong><br /> <input type="text" class="" value="10000"><br />
+		<strong>Manage Content</strong><br /> <input type="text" class="form-control" value="1000" data-field="privileges:manage_content"><br />
-		<strong>Create Pinned Topics</strong><br /> <input type="text" class="" value="100000"><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>
+	<h3>User Settings</h3>
-	<div class="alert alert-notify">
+	<div class="alert alert-warning">
-		<strong>Post Delay</strong><br /> <input type="text" class="" value="10000" data-field="postDelay"><br />
+		<strong>Minimum Username Length</strong><br />
-		<strong>Minimum Title Length</strong><br /> <input type="text" class="" value="3" data-field="minimumTitleLength"><br />
+		<input type="text" class="form-control" value="2" data-field="minimumUsernameLength"><br />
-		<strong>Minimum Post Length</strong><br /> <input type="text" class="" value="8" data-field="minimumPostLength"><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: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="input-xlarge" placeholder="Consumer Secret">
+		<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,44 +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}">
+	<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}">
+		<a href="/user/{users.userslug}">
-			<img src="{users.picture}" class="img-polaroid"/>
+			<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>
+			<a href="#" class="btn btn-default ban-btn">Ban</a>
-		</div>
-		<div>
-			<a href="#" class="btn delete-btn btn-danger">Delete</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,98 +1,124 @@
-<div class="container">
+<ol class="breadcrumb">
-	<ul class="breadcrumb">
 	<li itemscope="itemscope" itemtype="http://data-vocabulary.org/Breadcrumb">
-			<a href="/" itemprop="url"><span itemprop="title">Home</span></a>
+		<a href="/" itemprop="url"><span itemprop="title">[[global:home]]</span></a>
-			<span class="divider">/</span>
 	</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>
+</ol>
-</div>
-<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?
-</div>
 
 <div>
-
+	<button id="new_post" class="btn btn-primary btn-lg {show_topic_button}">[[category:new_topic_button]]</button>
-	<button id="new_post" class="btn btn-primary btn-large {show_topic_button}">New Topic</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;
 	</div>
 </div>
 
-<hr class="{show_sidebar}" />
+<hr/>
+
+<div class="alert alert-warning hide {no_topics_message}" id="category-no-topics">
+	[[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}">
+			<li class="category-item {topics.deleted-class}" itemprop="itemListElement">
-			<div class="row-fluid">
+				<div class="row">
-				<!-- <div class="span1 thread-rating hidden-phone hidden-tablet">
+					<div class="col-md-12 topic-row">
-					<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>
 						<div>
-						<h3><span class="topic-title"><span class="badge {topics.badgeclass}">{topics.postcount}</span>{topics.title}</span></h3>
+							<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>
+										{topics.title}
+									</span>
+								</h3>
+							</a>
 							<small>
-							<strong><i class="{topics.pin-icon}"></i><i class="{topics.lock-icon}"></i></strong>
+								<span class="topic-stats">
-							Posted {topics.relativeTime} ago by 
+									posts
-							<strong>{topics.username}</strong>.
+									<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,37 +1,34 @@
 {
 	"custom_mapping": {
-		"admin/testing/categories[^]*": "admin/testing/categories",
+		"^admin/testing/categories.*": "admin/testing/categories",
-		"admin/topics[^]*": "admin/topics",
+		"^admin/topics.*": "admin/topics",
-		"admin/categories[^]*": "admin/categories",
+		"^admin/categories.*": "admin/categories",
-		"admin/users[^]*": "admin/users",
+		"^admin/users.*": "admin/users",
-		"admin/redis[^]*": "admin/redis",
+		"^admin/redis.*": "admin/redis",
-		"admin/index[^]*": "admin/index",
+		"^admin/index.*": "admin/index",
-		"admin/themes[^]*": "admin/themes",
+		"^admin/themes.*": "admin/themes",
-		"admin/plugins[^]*": "admin/plugins",
+		"^admin/plugins/?$": "admin/plugins",
-		"admin/settings[^]*": "admin/settings",
+		"^admin/settings.*": "admin/settings",
-		"admin/twitter[^]*": "admin/twitter",
+		"^admin/twitter.*": "admin/twitter",
-		"admin/facebook[^]*": "admin/facebook",
+		"^admin/facebook.*": "admin/facebook",
-		"admin/gplus[^]*": "admin/gplus",
+		"^admin/logger.*": "admin/logger",
-		"admin/motd/?$": "admin/motd",
+		"^admin/gplus.*": "admin/gplus",
-		"install/?$": "install/mail",
+		"^admin/motd/?$": "admin/motd",
-		"install/mail/?": "install/mail",
+		"^admin/groups/?$": "admin/groups",
-		"install/social/?": "install/social",
+		"^users/sort-posts": "users",
-		"install/privileges/?": "install/privileges",
+		"^users/latest": "users",
-        "users-sort-posts": "users",
+		"^users/sort-reputation": "users",
-        "users-latest": "users",
+		"^users/search": "users",
-        "users-sort-reputation": "users",
+		"^user.*edit": "accountedit",
-        "users-search": "users",
+		"^user.*following": "following",
-		"users[^]*edit": "accountedit",
+		"^user.*followers": "followers",
-		"users[^]*following": "following",
+		"^user.*settings": "accountsettings",
-		"users[^]*followers": "followers",
+		"^user.*favourites": "favourites",
-		"users[^]*settings": "accountsettings",
+		"^user/.*": "account",
-		"users/[^]*": "account",
 
-		"recent": "recent",
+		"^recent/.*": "recent",
-		"unread": "unread",
+
-		"popular": "category",
+		"reset/.*": "reset_code"
-		"active": "category",
-		"search": "search"
 	},
 	"force_refresh": {
 		"logout": true

public/templates/favourites.tpl

@@ -0,0 +1,25 @@
+<div class="well favourites">
+	<div class="account-username-box" data-userslug="{userslug}">
+		<span class="account-username">
+			<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">
+		<div class="col-md-12 user-favourite-posts">
+			<!-- BEGIN posts -->
+			<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 timeago" title="{posts.relativeTime}"></span>
+				</div>
+			</div>
+			<br/>
+			<!-- END posts -->
+		</div>
+	</div>
+</div>

public/templates/followers.tpl

@@ -1,38 +1,33 @@
 
-<div class="well">
+<div class="well users">
 
-	<div class="account-username-box">
+	<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="/user/{userslug}">{username}</a> <i class="icon-chevron-right"></i>
-			<a href="/users/{userslug}/followers">followers</a>
+			<a href="/user/{userslug}/followers">followers</a>
 		</span>
-		<div class="account-sub-links inline-block pull-right">
-			<span id="settingsLink" class="pull-right"><a href="/users/{userslug}/settings">settings</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>
 	</div>
 
 	<div>
 		<!-- BEGIN followers -->
 		<div class="users-box">
-			<a href="/users/{followers.userslug}">
+			<a href="/user/{followers.userslug}">
-				<img src="{followers.picture}" class="img-polaroid"/>
+				<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='reputation'>{followers.reputation}</span>
+					<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='postcount'>{followers.postcount}</span>
+					<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>
@@ -41,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,40 +1,34 @@
 
-<div class="well">
+<div class="well users">
 
-
+	<div class="account-username-box" data-userslug="{userslug}">
-
-	<div class="account-username-box">
 		<span class="account-username">
-			<a href="/users/{userslug}">{username}</a> <i class="icon-chevron-right"></i>
+			<a href="/user/{userslug}">{username}</a> <i class="icon-chevron-right"></i>
-			<a href="/users/{userslug}/following">following</a>
+			<a href="/user/{userslug}/following">following</a>
 		</span>
-		<div class="account-sub-links inline-block pull-right">
-			<span id="settingsLink" class="pull-right"><a href="/users/{userslug}/settings">settings</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>
 	</div>
 
 	<div>
 		<!-- BEGIN following -->
 		<div class="users-box">
-			<a href="/users/{following.userslug}">
+			<a href="/user/{following.userslug}">
-				<img src="{following.picture}" class="img-polaroid"/>
+				<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='reputation'>{following.reputation}</span>
+					<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='postcount'>{following.postcount}</span>
+					<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>
@@ -43,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 id="alert-status" class="alert alert-info hide"></div>
-		<div class="modal-header">
+					<div id="alert-success" class="alert alert-success hide"></div>
-			<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
+					<div id="alert-error" class="alert alert-danger hide"></div>
-			<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>
+				<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 -->
+	<footer id="footer" class="container footer">
-	<div id="footer" class="container hidden-phone" style="padding-top: 50px; display: none">
+		<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>
-		<div class="alert alert-info">
+	</footer>
-			<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>
 
-	<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,71 +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>
+	<!-- BEGIN clientScripts -->
-	<script src="{relative_path}/vendor/requirejs/require.js"></script>
+	<script src="{relative_path}/{clientScripts.script}"></script>
-	<script src="{relative_path}/vendor/bootbox/bootbox.min.js"></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 class="navbar navbar-inverse navbar-fixed-top header" role="navigation" id="header-menu">
-	</div>
-	<div class="navbar navbar-inverse navbar-fixed-top" id="header-menu">
-		<div class="navbar-inner">
 		<div class="container">
-				<a class="brand" href="/">{title}</a>
+			<div class="navbar-header">
-				<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
+				<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">
+				<div>
-					<ul id="main-nav" class="nav nodebb-inline-block">
+					<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> [[global:header.unread]]</a>
 					</li>
 					<li>
-							<a href="/unread">Unread</a>
+						<a href="/users">[[global:header.users]]</a>
 					</li>
-						<li>
+					<li class="{adminDisplay}">
-							<a href="/users">Users</a>
+						<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="right-menu" class="nav pull-right nodebb-inline-block">
+
-						<li class="notifications dropdown text-center">
+
+				<ul id="logged-in-menu" class="nav navbar-nav navbar-right hide">
+					<li>
+						<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> Loading Notifications</a></li>
+							<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>
-						<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>
-						</form>
 
 				</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>
@@ -76,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">
+	<div class="col-md-3 col-xs-6">
-		<a href="category/{categories.slug}">
+		<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>