0.0.7

not defined (as it had not been initted yet)

.editorconfig

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

.gitignore

@@ -1,4 +1,4 @@
-#################  
+#################
 ## npm
 #################
 
@@ -6,10 +6,14 @@ npm-debug.log
 node_modules/
 sftp-config.json
 config.json
+public/src/nodebb.min.js
 public/config.json
 public/css/*.css
 public/themes/*
+!/public/themes/vanilla
+!/public/themes/cerulean
+!/public/themes/modern
 *.sublime-project
 *.sublime-workspace
 plugins/*
-.project
+.project

.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,29 @@
-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")
+* [Follow on Twitter](http://www.twitter.com/NodeBB/ "NodeBB Twitter")
+* [Like us on Facebook](http://www.facebook.com/NodeBB/ "NodeBB Facebook")
+* [Join us on IRC](https://kiwiirc.com/client/irc.freenode.net/nodebb) - #nodebb on Freenode
 
-![NodeBB Topic Page](http://i.imgur.com/RBkFzdkh.png)
+![NodeBB Main Category Listing](http://i.imgur.com/ZBrHqLr.png)
+
+![NodeBB Topic Page](http://i.imgur.com/YSBA6Vr.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 +61,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,125 @@
 	along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
-var fs = require('fs'),
-	nconf = require('nconf'),
-	pkg = require('./package.json'),
-	url = require('url');
+(function () {
+	"use strict";
 
-// Runtime environment
-global.env = process.env.NODE_ENV || 'production',
+	// Configuration setup
+	var nconf = require('nconf');
+	nconf.argv().env();
 
-// Configuration setup
-nconf.argv().file({ file: __dirname + '/config.json'});
+	var fs = require('fs'),
+		async = require('async'),
+		winston = require('winston'),
+		pkg = require('./package.json'),
+		path = require('path'),
+		meta;
 
-// Log GNU copyright info along with server info
-console.log('Info: NodeBB v' + pkg.version + ' Copyright (C) 2013 DesignCreatePlay Inc.');
-console.log('Info: This program comes with ABSOLUTELY NO WARRANTY.');
-console.log('Info: This is free software, and you are welcome to redistribute it under certain conditions.');
-console.log('Info: ===');
+	// Runtime environment
+	global.env = process.env.NODE_ENV || 'production';
 
-if(nconf.get('upgrade')) {
-	require('./src/upgrade').upgrade();
-} else if (!nconf.get('setup') && nconf.get('base_url')) {
-	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;
+	winston.remove(winston.transports.Console);
+	winston.add(winston.transports.Console, {
+		colorize: true
+	});
 
-	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.');
+	winston.add(winston.transports.File, {
+		filename: 'error.log',
+		level: 'error'
+	});
 
-	// 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];
-			}
+	// TODO: remove once https://github.com/flatiron/winston/issues/280 is fixed
+	winston.err = function (err) {
+		winston.error(err.stack);
+	};
+
+	// 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 (fs.existsSync(__dirname + '/config.json') && (!nconf.get('setup') && !nconf.get('upgrade'))) {
+		// 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') || 'Any address'));
+
+		if (process.env.NODE_ENV === 'development') {
+			winston.info('Base Configuration OK.');
 		}
 
-		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')
+		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);
 			};
 
-		DEVELOPMENT = true;
+			var templates = require('./public/src/templates.js'),
+				translator = require('./public/src/translator.js'),
+				webserver = require('./src/webserver.js'),
+				SocketIO =  require('socket.io').listen(global.server, { log: false, transports: ['websocket', 'xhr-polling', 'jsonp-polling', 'flashsocket']}),
+				websockets = require('./src/websockets.js'),
+				plugins = require('./src/plugins'); // Don't remove this - plugins initializes itself
 
-		global.configuration = {};
-		global.templates = {};
+			websockets.init(SocketIO);
 
-		(function(config) {
-			config['ROOT_DIRECTORY'] = __dirname;
+			global.templates = {};
+			global.translator = translator;
 
+			translator.loadServer();
+
+			// 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'
 			]);
 
 			templates.ready(webserver.init);
+		});
 
-			//setup scripts to be moved outside of the app in future.
-			function setup_categories() {
-				console.log('Info: Checking categories...');
-				categories.getAllCategories(function(data) {
-					if (data.categories.length === 0) {
-						console.log('Info: Setting up default categories...');
+	} else if (nconf.get('upgrade')) {
+		meta = require('./src/meta.js');
 
-						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.');
-					}
-				});
-			}
-
-
-
-			setup_categories();
-		}(global.configuration));
-	});
-} else {
-	// New install, ask setup questions
-	if (nconf.get('setup')) console.log('Info: NodeBB Setup Triggered via Command Line');
-	else console.log('Info: Configuration not found, starting NodeBB setup');
-
-	var	install = require('./src/install');
-
-	process.stdout.write(
-		"\nWelcome to NodeBB!\nThis looks like a new installation, so you'll have to answer a " +
-		"few questions about your environment before we can proceed.\n\n" +
-		"Press enter to accept the default setting (shown in brackets).\n\n\n"
-	);
-
-	install.setup(function(err) {
-		if (err) {
-			console.log('Error: There was a problem completing NodeBB setup: ', err.message);
+		meta.configs.init(function () {
+			require('./src/upgrade').upgrade();
+		});
+	} else {
+		// New install, ask setup questions
+		if (nconf.get('setup')) {
+			winston.info('NodeBB Setup Triggered via Command Line');
 		} else {
-			if (!nconf.get('setup')) {
-				process.stdout.write(
-					"Please start NodeBB again and register a new user. This user will automatically become an administrator.\n\n"
-				);
-			}
+			winston.warn('Configuration not found, starting NodeBB setup');
 		}
-		
-		process.exit();
-	});
-}
+
+		var install = require('./src/install');
+
+		winston.info('Welcome to NodeBB!');
+		winston.info('This looks like a new installation, so you\'ll have to answer a few questions about your environment before we can proceed.');
+		winston.info('Press enter to accept the default setting (shown in brackets).');
+
+		install.setup(function (err) {
+			if (err) {
+				winston.error('There was a problem completing NodeBB setup: ', err.message);
+			} else {
+				winston.info('NodeBB Setup Completed.');
+			}
+
+			process.exit();
+		});
+	}
+}());

install/data/categories.json

@@ -1,7 +1,7 @@
  [
     {
         "name": "Announcements",
-        "description": "A place to talk about whateeeever you want",
+        "description": "Announcements regarding our community",
         "blockclass": "category-blue",
         "icon" : "icon-bullhorn"
     },
@@ -13,61 +13,61 @@
     },
     {
         "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"
     },
     {
         "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"
     },
     {
         "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"
     },
     {
         "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"
     },
     {
-        "name": "NodeBB Addons",
-        "description": "In future an example of how a hidden category should look like.",
+        "name": "NodeBB Plugins",
+        "description": "Enhance your NodeBB with plugins!",
         "blockclass": "category-purple",
         "icon" : "icon-plus-sign"
     },
     {
         "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"
     },
     {
         "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"
     },
     {
         "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"
     },
     {
         "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"
     },
     {
         "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"
     }

package.json

@@ -2,7 +2,7 @@
   "name": "nodebb",
   "license": "GPLv3 or later",
   "description": "NodeBB Forum",
-  "version": "0.0.5",
+  "version": "0.0.7",
   "homepage": "http://www.nodebb.org",
   "repository": {
     "type": "git",
@@ -10,10 +10,10 @@
   },
   "main": "app.js",
   "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 +27,22 @@
     "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",
+    "nodebb-plugin-mentions": "~0.1.0",
+    "nodebb-plugin-markdown": "~0.1.0",
+    "rss": "~0.2.0",
+    "prompt": "~0.2.11",
+    "uglify-js": "~2.4.0",
+    "validator": "~1.5.1"
+  },
+  "optionalDependencies": {
+    "hiredis": "~0.1.15"
   },
   "bugs": {
     "url": "https://github.com/designcreateplay/NodeBB/issues"

public/css/nodebb.less

@@ -1,5 +1 @@
-@import "style";
-
-@import "topic";
-@import "category";
-@import "noscript";
+@import "../themes/cerulean/cerulean.less";

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,17 @@
+{
+	"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.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/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,22 @@
+{
+	"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",
+	"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,8 +1,9 @@
 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 : ''),
 		content = null;
@@ -11,8 +12,8 @@ var ajaxify = {};
 	var executed = {};
 
 	var events = [];
-	ajaxify.register_events = function(new_page_events) {
-		for (var i = 0, ii = events.length; i<ii; i++) {
+	ajaxify.register_events = function (new_page_events) {
+		for (var i = 0, ii = events.length; i < ii; i++) {
 			socket.removeAllListeners(events[i]); // optimize this to user removeListener(event, listener) instead.
 		}
 
@@ -20,116 +21,137 @@ 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);
 	};
 
-	ajaxify.go = function(url, callback, template, quiet) {
-		// leave room and join global
+	var pagination;
+
+	ajaxify.go = function (url, callback, template, quiet) {
+		// start: the following should be set like so: ajaxify.onchange(function(){}); where the code actually belongs
+		$(window).off('scroll');
 		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];
 			}
-			
+
 		} else if (templates[url]) {
 			tpl_url = url;
 		}
 
 		if (templates.is_available(tpl_url) && !templates.force_refresh(tpl_url)) {
 			if (quiet !== true) {
-				window.history.pushState({
-					"url": url
-				}, url, RELATIVE_PATH + "/" + url);
+				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);
 
 				if (callback) {
 					callback();
 				}
-				
-				app.process_page();
-				
-				jQuery('#content, #footer').stop(true, true).fadeIn(200, function() {
-					if(window.location.hash)
+
+				jQuery('#content, #footer').stop(true, true).fadeIn(200, function () {
+
+					app.process_page();
+					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) {
-				document.title = title;
-			});
+			}, url, template);
 
 			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) {
-			if (this.href == window.location.href + "#") return;
-			if(this.href.slice(-1) === "#") return;
-			
+		$(document.body).on('click', 'a', function (e) {
+			function hrefEmpty(href) {
+				return href == 'javascript:;' || href == window.location.href + "#" || href.slice(-1) === "#";
+			}
 
-			var url = this.href.replace(rootUrl +'/', '');
-			
-			if (this.target !== '') return;
+			if (hrefEmpty(this.href) || this.target !== '' || this.protocol === 'javascript:')
+				return;
+
+			app.previousUrl = window.location.href;
 
 			if (!e.ctrlKey && e.which === 1) {
-				if (ajaxify.go(url)) {
+				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
+					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 || "" ),
-				head =	document.getElementsByTagName("head")[0] ||
-						document.documentElement,
+			var data = (elem.text || elem.textContent || elem.innerHTML || ""),
+				head = document.getElementsByTagName("head")[0] ||
+					document.documentElement,
 				script = document.createElement("script");
 
 			script.type = "text/javascript";
 			try {
-			  script.appendChild(document.createTextNode(data));      
-			} catch(e) {
-			  script.text = data;
+				script.appendChild(document.createTextNode(data));
+			} catch (e) {
+				script.text = data;
 			}
 
 			if (elem.src) {
@@ -139,18 +161,18 @@ 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).children(),
 			child,
 			i;
 
 		for (i = 0; children_nodes[i]; i++) {
 			child = children_nodes[i];
-			if (nodeName(child, "script" ) &&
-			(!child.type || child.type.toLowerCase() === "text/javascript")) {
+			if (nodeName(child, "script") &&
+				(!child.type || child.type.toLowerCase() === "text/javascript")) {
 				scripts.push(child);
 			}
 		}
@@ -162,6 +184,6 @@ var ajaxify = {};
 			}
 			evalScript(scripts[i]);
 		}
-	};
-	
+	}
+
 }(jQuery));

public/src/app.js

@@ -1,123 +1,118 @@
 var socket,
 	config,
-	app = {},
-	API_URL = null;
+	app = {};
 
-
-(function() {
+(function () {
 	var showWelcomeMessage = false;
 
-	function loadConfig() {
-	
+	app.loadConfig = function() {
+
 		$.ajax({
 			url: RELATIVE_PATH + '/api/config',
-			success: function(data) {
-				API_URL = data.api_url;
-	
+			success: function (data) {
 				config = data;
-				socket = io.connect(config.socket.address + (config.socket.port ? ':' + config.socket.port : ''));
-	
-				var reconnecting = false;
-				var reconnectTries = 0;
-	
-				socket.on('event:connect', function(data) {
-					console.log('connected to nodebb socket: ', data);
-					app.username = data.username;
-					app.showLoginMessage();
-				});
+				if(socket) {
+					socket.disconnect();
+					setTimeout(function() {
+						socket.socket.connect();
+					}, 200);
+				} else {
+					socket = io.connect(config.socket.address);
 
-				socket.on('event:alert', function(data) {
-					app.alert(data);
-				});
-				
-				socket.on('event:consolelog', function(data) {
-					console.log(data);
-				});
-	
-				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) {
-					function showDisconnectModal() {
-						$('#disconnect-modal').modal({
-							backdrop:'static',
-							show:true
+					var reconnecting = false,
+						reconnectEl, reconnectTimer;
+
+					socket.on('event:connect', function (data) {
+						app.username = data.username;
+						app.showLoginMessage();
+						socket.emit('api:updateHeader', {
+							fields: ['username', 'picture', 'userslug']
 						});
-		
-						$('#reload-button').on('click',function(){
-							$('#disconnect-modal').modal('hide');
-							window.location.reload();
-						});
-					}
-					
-					reconnecting = true;
-					reconnectTries++;
-					
-					if(reconnectTries > 4) {
-						showDisconnectModal();
-						return;
-					}
-					
-					app.alert({
-						alert_id: 'connection_alert',
-						title: 'Reconnecting',
-						message: 'You have disconnected from NodeBB, we will try to reconnect you. <br/><i class="icon-refresh icon-spin"></i>',
-						type: 'notify',
-						timeout: 5000
 					});
-				});
-	
-				socket.on('api:user.get_online_users', function(users) {
-					jQuery('.username-field').each(function() {
-						if (this.processed === true) 
-							return;
-			
-						var el = jQuery(this),
-							uid = el.parents('li').attr('data-uid');
-						
-						if (uid && jQuery.inArray(uid, users) !== -1) {
-							el.find('i').remove();
-							el.prepend('<i class="icon-circle"></i>');
-						} else {
-							el.find('i').remove();
-							el.prepend('<i class="icon-circle-blank"></i>');
+
+					socket.on('event:alert', function (data) {
+						app.alert(data);
+					});
+
+					socket.on('connect', function (data) {
+						if (reconnecting) {
+							reconnectEl.html('<i class="icon-ok"></i> Connected!');
+							reconnecting = false;
+
+							setTimeout(function() {
+								reconnectEl.removeClass('active');
+							}, 3000);
 						}
-			
-						el.processed = true;
-					});
-				});
-				
-				app.enter_room('global');
-				
 
+						socket.emit('api:updateHeader', {
+							fields: ['username', 'picture', 'userslug']
+						});
+					});
+
+					socket.on('event:disconnect', function() {
+						socket.socket.connect();
+					});
+
+					socket.on('reconnecting', function (data) {
+						if (!reconnectEl) reconnectEl = $('#reconnect');
+						reconnecting = true;
+
+						reconnectEl.addClass('active');
+						reconnectEl.html('<i class="icon-spinner icon-spin"></i> Reconnecting...');
+					});
+
+					socket.on('api:user.get_online_users', function (users) {
+						jQuery('a.username-field').each(function () {
+							if (this.processed === true)
+								return;
+
+							var el = jQuery(this),
+								uid = el.parents('li').attr('data-uid');
+
+							if (uid && jQuery.inArray(uid, users) !== -1) {
+								el.find('i').remove();
+								el.prepend('<i class="icon-circle"></i>');
+							} else {
+								el.find('i').remove();
+								el.prepend('<i class="icon-circle-blank"></i>');
+							}
+
+							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;
+						});
+					});
+
+					app.enter_room('global');
+				}
 			},
 			async: 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,
+		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) {
@@ -125,36 +120,35 @@ var socket,
 		});
 	}
 
-	// use unique alert_id to have multiple alerts visible at a time, use the same alert_id to fade out the current instance  
+	// use unique alert_id to have multiple alerts visible at a time, use the same alert_id to fade out the current instance
 	// type : error, success, info, warning/notify
 	// title = bolded title text
 	// message = alert message content
 	// timeout default = permanent
 	// location : alert_window (default) or content
-	app.alert = function(params) {
-		var alert_id = 'alert_button_' + ((params.alert_id) ? params.alert_id : new Date().getTime()); 
+	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);
 
 		function startTimeout(div, timeout) {
-			var timeoutId = setTimeout(function() {
-				$(div).fadeOut(1000, function() {
+			var timeoutId = setTimeout(function () {
+				$(div).fadeOut(1000, function () {
 					$(this).remove();
 				});
 			}, timeout);
-			
+
 			$(div).attr('timeoutId', timeoutId);
 		}
 
-		if(alert.length > 0) {
+		if (alert.length > 0) {
 			alert.find('strong').html(params.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'),
@@ -163,8 +157,8 @@ var socket,
 			p.innerHTML = params.message;
 			strong.innerHTML = params.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);
 			div.appendChild(strong);
@@ -172,23 +166,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) 
+			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 +190,8 @@ var socket,
 		}
 	}
 
-	app.alertSuccess = function(message, timeout) {
-		if(!timeout)
+	app.alertSuccess = function (message, timeout) {
+		if (!timeout)
 			timeout = 2000;
 
 		app.alert({
@@ -208,48 +202,47 @@ var socket,
 		});
 	}
 
-	app.alertError = function(message, timeout) {
-		if(!timeout)
+	app.alertError = function (message, 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) {
-		
-		if(socket) {
-			if (app.current_room === room) 
+	app.current_room = null;
+	app.enter_room = function (room) {
+		if (socket) {
+			if (app.current_room === room)
 				return;
-				
+
 			socket.emit('event:enter_room', {
 				'enter': room,
 				'leave': app.current_room
 			});
-			
+
 			app.current_room = room;
 		}
 	};
 
-	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) {
+		require(['mobileMenu'], function (mobileMenu) {
 			mobileMenu.onNavigate();
 		});
 
@@ -257,13 +250,13 @@ var socket,
 
 		var url = window.location.href,
 			parts = url.split('/'),
-			active = parts[parts.length-1];
-		
+			active = parts[parts.length - 1];
+
 		jQuery('#main-nav li').removeClass('active');
-		if(active) {
-			jQuery('#main-nav li a').each(function() {
+		if (active) {
+			jQuery('#main-nav li a').each(function () {
 				var href = this.getAttribute('href');
-				if(active.match(/^users/))
+				if (active == "sort-posts" || active == "sort-reputation" || active == "search" || active == "latest" || active == "online")
 					active = 'users';
 				if (href && href.match(active)) {
 					jQuery(this.parentNode).addClass('active');
@@ -272,12 +265,15 @@ var socket,
 			});
 		}
 
-		setTimeout(function() {
-			window.scrollTo(0, 1); // rehide address bar on mobile after page load completes.	
+		$('span.timeago').timeago();
+
+
+		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',
@@ -286,10 +282,10 @@ var socket,
 				timeout: 5000
 			});
 		}
-		
-		if(showWelcomeMessage) {
+
+		if (showWelcomeMessage) {
 			showWelcomeMessage = false;
-			if(document.readyState !== 'complete') {
+			if (document.readyState !== 'complete') {
 				$(document).ready(showAlert);
 			} else {
 				showAlert();
@@ -297,137 +293,135 @@ var socket,
 		}
 	}
 
-	app.addCommasToNumbers = function() {
-		$('.formatted-number').each(function(index, element) {
+	app.addCommasToNumbers = function () {
+		$('.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'));
+		});
+	}
+
+	app.createNewPosts = function (data) {
 		data.posts[0].display_moderator_tools = 'none';
-		var html = templates.prepare(templates['topic'].blocks['posts']).parse(data),
-			uniqueid = new Date().getTime(),
-			tempContainer = jQuery('<div id="' + uniqueid + '"></div>')
-				.appendTo("#post-container")
-				.hide()
-				.append(html)
-				.fadeIn('slow');
+		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(translatedHTML)
+					.fadeIn('slow');
 
-		for(var x=0,numPosts=data.posts.length;x<numPosts;x++) {
-			socket.emit('api:post.privileges', data.posts[x].pid);
-		}
+			for (var x = 0, numPosts = data.posts.length; x < numPosts; x++) {
+				socket.emit('api:post.privileges', data.posts[x].pid);
+			}
 
-		tempContainer.replaceWith(tempContainer.contents());
-		infiniteLoaderActive = false;
+			tempContainer.replaceWith(tempContainer.contents());
+			infiniteLoaderActive = false;
 
-		app.populate_online_users();
-		app.addCommasToNumbers();
+			app.populate_online_users();
+			app.addCommasToNumbers();
+			$('span.timeago').timeago();
+		});
 	}
 
 	app.infiniteLoaderActive = false;
 
-	app.loadMorePosts = function(tid, callback) {
-		if(app.infiniteLoaderActive)
+	app.loadMorePosts = function (tid, callback) {
+		if (app.infiniteLoaderActive)
 			return;
 		app.infiniteLoaderActive = true;
-		socket.emit('api:topic.loadMore', {	
-			tid: tid, 
-			after: document.querySelectorAll('#post-container li[data-pid]').length 
-		}, function(data) {
+
+		if ($('#loading-indicator').attr('done') === '0')
+			$('#loading-indicator').removeClass('hide');
+
+		socket.emit('api:topic.loadMore', {
+			tid: tid,
+			after: document.querySelectorAll('#post-container li[data-pid]').length
+		}, function (data) {
 			app.infiniteLoaderActive = false;
-			if(data.posts.length) {
+			if (data.posts.length) {
+				$('#loading-indicator').attr('done', '0');
 				app.createNewPosts(data);
-				if(callback)
-					callback();
+			} else {
+				$('#loading-indicator').attr('done', '1');
 			}
+			$('#loading-indicator').addClass('hide');
+			if (callback)
+				callback(data.posts);
 		});
 	}
 
-	app.scrollToPost = function(pid) {
-		if(!pid)
-			return;
-		var container = $(document.body),
-			scrollTo = $('#post_anchor_' + pid);
+	app.scrollToTop = function () {
+		$('body,html').animate({
+			scrollTop: 0
+		});
+	};
 
-		if(!scrollTo.length) {
-			var tid = $('#post-container').attr('data-tid');
-			app.loadMorePosts(tid, function() {
-				app.scrollToPost(pid);
-			});
+	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 (tid && scrollTo.length) {
+						animateScroll();
+					}
+
+					if (!posts.length || scrollTo.length)
+						clearInterval(intervalID);
+				});
+			}, 100);
+
+		} else if (tid) {
+			animateScroll();
 		}
 
-		container.animate({
-			scrollTop: scrollTo.offset().top - container.offset().top + container.scrollTop() - $('#header-menu').height()
-		});
 	}
 
-	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

@@ -4,30 +4,32 @@
 		isFollowing = templates.get('isFollowing');
 
 	$(document).ready(function() {
+		var username = $('.account-username a').html();
+		app.enter_room('user/' + theirid);
+
+		app.addCommasToNumbers();
 
-		var rep = $('#reputation');
-		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(isFollowing) {
+		if (yourid !== theirid) {
+			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) {
-				var username = $('.account-username a').html();
-				if(success) {
+			socket.emit('api:user.follow', {
+				uid: theirid
+			}, function(success) {
+				if (success) {
 					followBtn.hide();
 					unfollowBtn.show();
 					app.alertSuccess('You are now following ' + username + '!');
@@ -39,9 +41,10 @@
 		});
 
 		unfollowBtn.on('click', function() {
-			socket.emit('api:user.unfollow', {uid: theirid}, function(success) {
-				var username = $('.account-username a').html();
-				if(success) {
+			socket.emit('api:user.unfollow', {
+				uid: theirid
+			}, function(success) {
+				if (success) {
 					followBtn.show();
 					unfollowBtn.hide();
 					app.alertSuccess('You are no longer following ' + username + '!');
@@ -55,20 +58,27 @@
 		$('.user-recent-posts .topic-row').on('click', function() {
 			ajaxify.go($(this).attr('topic-url'));
 		});
-		
+
 		var onlineStatus = $('.account-online-status');
-		
-		socket.on('api:user.isOnline', function(online) {
-			if(online) {
+
+		function handleUserOnline(data) {
+			if (data.online) {
 				onlineStatus.find('span span').text('online');
 				onlineStatus.find('i').attr('class', 'icon-circle');
 			} else {
 				onlineStatus.find('span span').text('offline');
 				onlineStatus.find('i').attr('class', 'icon-circle-blank');
 			}
+		}
+
+		socket.on('api:user.isOnline', handleUserOnline);
+
+		socket.emit('api:user.isOnline', theirid, handleUserOnline);
+
+		socket.on('event:new_post', function(data) {
+			var html = templates.prepare(templates['account'].blocks['posts']).parse(data);
+			$('.user-recent-posts').prepend(html);
 		});
-		
-		socket.emit('api:user.isOnline', theirid);
 
 	});
 

public/src/forum/accountedit.js

@@ -1,212 +1,214 @@
-
-
 var gravatarPicture = templates.get('gravatarpicture');
 var uploadedPicture = templates.get('uploadedpicture');
 
 $(document).ready(function() {
- 
+
 
 
 	$('#uploadForm').submit(function() {
 		status('uploading the file ...');
-		
+
 		$('#upload-progress-bar').css('width', '0%');
 		$('#upload-progress-box').show();
-		
-		if(!$('#userPhotoInput').val()) {
+		$('#upload-progress-box').removeClass('hide');
+
+		if (!$('#userPhotoInput').val()) {
 			error('select an image to upload!');
-			return false;			
+			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+'%');
+
+			uploadProgress: function(event, position, total, percent) {
+				console.log(percent);
+				$('#upload-progress-bar').css('width', percent + '%');
 			},
-			
- 
+
+
 			success: function(response) {
-				if(response.error) {
+				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;        
-								
+
+				uploadedPicture = imageUrlOnServer;
+
 				setTimeout(function() {
 					hideAlerts();
 					$('#upload-picture-modal').modal('hide');
 				}, 750);
-				
-				socket.emit('api:updateHeader', { fields: ['username', 'picture', 'userslug'] });
+
+				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();
+		$('#alert-status').addClass('hide');
+		$('#alert-success').addClass('hide');
+		$('#alert-error').addClass('hide');
+		$('#upload-progress-box').addClass('hide');
 	}
- 
+
 	function status(message) {
 		hideAlerts();
-		$('#alert-status').text(message).show();
+		$('#alert-status').text(message).removeClass('hide');
 	}
-	
+
 	function success(message) {
 		hideAlerts();
-		$('#alert-success').text(message).show();
+		$('#alert-success').text(message).removeClass('hide');
 	}
-	
+
 	function error(message) {
 		hideAlerts();
-		$('#alert-error').text(message).show();
+		$('#alert-error').text(message).removeClass('hide');
 	}
-	
-	function changeUserPicture(type) { 
+
+	function changeUserPicture(type) {
 		var userData = {
 			type: type
 		};
-			
+
 		socket.emit('api:user.changePicture', userData, function(success) {
-			if(!success) {
+			if (!success) {
 				app.alertError('There was an error changing picture!');
 			}
 		});
 	}
-		
+
 	var selectedImageType = '';
-	
-	$('#submitBtn').on('click',function(){
-		
-	   var userData = {
-			uid:$('#inputUID').val(),
-			email:$('#inputEmail').val(),
-			fullname:$('#inputFullname').val(),
-			website:$('#inputWebsite').val(),
-			birthday:$('#inputBirthday').val(),
-			location:$('#inputLocation').val(),
-			signature:$('#inputSignature').val()
+
+	$('#submitBtn').on('click', function() {
+
+		var userData = {
+			uid: $('#inputUID').val(),
+			email: $('#inputEmail').val(),
+			fullname: $('#inputFullname').val(),
+			website: $('#inputWebsite').val(),
+			birthday: $('#inputBirthday').val(),
+			location: $('#inputLocation').val(),
+			signature: $('#inputSignature').val()
 		};
 
-		socket.emit('api:user.updateProfile', userData, function(data) {
-			if(data.success) {
+		socket.emit('api:user.updateProfile', userData, function(err, data) {
+			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) {
+		if (gravatarPicture) {
 			$('#user-gravatar-picture').attr('src', gravatarPicture);
 			$('#gravatar-box').show();
-		}
-		else
+		} else
 			$('#gravatar-box').hide();
 
-		if(uploadedPicture) {
+		if (uploadedPicture) {
 			$('#user-uploaded-picture').attr('src', uploadedPicture);
 			$('#uploaded-box').show();
-		}
-		else
+		} else
 			$('#uploaded-box').hide();
-			
-			
-		 if(currentPicture == gravatarPicture)
+
+
+		if (currentPicture == gravatarPicture)
 			$('#gravatar-box .icon-ok').show();
 		else
 			$('#gravatar-box .icon-ok').hide();
-			
-		if(currentPicture == uploadedPicture)
+
+		if (currentPicture == uploadedPicture)
 			$('#uploaded-box .icon-ok').show();
 		else
 			$('#uploaded-box .icon-ok').hide();
 	}
-	
-	
+
+
 	$('#changePictureBtn').on('click', function() {
 		selectedImageType = '';
 		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';
 	});
-	
+
 	$('#savePictureChangesBtn').on('click', function() {
 		$('#change-picture-modal').modal('hide');
 
-		if(selectedImageType) {
+		if (selectedImageType) {
 			changeUserPicture(selectedImageType);
-			
-			if(selectedImageType == 'gravatar')
-				$('#user-current-picture').attr('src', gravatarPicture);		
-			else if(selectedImageType == 'uploaded')
-				$('#user-current-picture').attr('src', uploadedPicture);						
+
+			if (selectedImageType == 'gravatar')
+				$('#user-current-picture').attr('src', gravatarPicture);
+			else if (selectedImageType == 'uploaded')
+				$('#user-current-picture').attr('src', uploadedPicture);
 		}
-		
+
 	});
-	
+
 	$('#upload-picture-modal').on('hide', function() {
 		$('#userPhotoInput').val('');
 	});
-	
-	$('#uploadPictureBtn').on('click', function(){
-		
+
+	$('#uploadPictureBtn').on('click', function() {
+
 		$('#change-picture-modal').modal('hide');
 		$('#upload-picture-modal').modal('show');
+		$('#upload-picture-modal').removeClass('hide');
 
 		hideAlerts();
-		
+
 		return false;
 	});
-	
+
 	$('#pictureUploadSubmitBtn').on('click', function() {
 		$('#uploadForm').submit();
 	});
-	
+
 	(function handlePasswordChange() {
 		var currentPassword = $('#inputCurrentPassword');
 		var password_notify = $('#password-notify');
@@ -219,59 +221,71 @@ $(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');
-			} else if(!passwordvalid) {
+				password_notify.attr('class', 'alert alert-danger');
+				password_notify.removeClass('hide');
+			} else if (!passwordvalid) {
 				password_notify.html('Invalid password');
-				password_notify.attr('class', 'label label-important');
+				password_notify.attr('class', 'alert alert-danger');
+				password_notify.removeClass('hide');
 			} else {
 				password_notify.html('OK!');
-				password_notify.attr('class', 'label label-success');
+				password_notify.attr('class', 'alert alert-success');
+				password_notify.removeClass('hide');
 			}
-			
+
 			onPasswordConfirmChanged();
 		}
 
 		function onPasswordConfirmChanged() {
-			if(password.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_confirm.on('keyup', onPasswordConfirmChanged);
+		password.on('blur', onPasswordChanged);
+		password_confirm.on('blur', onPasswordConfirmChanged);
 
 		$('#changePasswordBtn').on('click', function() {
-			
-			if(passwordvalid && passwordsmatch && currentPassword.val()) {
-				socket.emit('api:user.changePassword', {'currentPassword': currentPassword.val(),'newPassword': password.val()	}, function(data) {
-					
+
+			if (passwordvalid && passwordsmatch && currentPassword.val()) {
+				socket.emit('api:user.changePassword', {
+					'currentPassword': currentPassword.val(),
+					'newPassword': password.val()
+				}, function(err) {
+
 					currentPassword.val('');
 					password.val('');
 					password_confirm.val('');
-					password_notify.html('');
-					password_confirm_notify.html('');
+					password_notify.addClass('hide');
+					password_confirm_notify.addClass('hide');
 					passwordsmatch = false;
 					passwordvalid = false;
-					
-					if(data.err) {
-						app.alertError(data.err);
+
+					if (err) {
+						app.alertError(err.error);
 						return;
 					}
-					
+
 					app.alertSuccess('Your password is updated!');
-					
+
 				});
 			}
 			return false;
 		});
-	
+
 	}());
 });

public/src/forum/accountheader.js

@@ -2,19 +2,41 @@
 	var yourid = templates.get('yourid'),
 		theirid = templates.get('theirid');
 
+
+	function createMenu() {
+		var userslug = $('.account-username-box').attr('data-userslug');
+		var links = $('<div class="account-sub-links inline-block pull-right">\
+			<span id="settingsLink" class="pull-right"><a href="/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);
+	}
+
 	$(document).ready(function() {
-		
+
+		createMenu();
+
 		var editLink = $('#editLink');
 		var settingsLink = $('#settingsLink');
-		
-		if(yourid === "0") {
-			editLink.hide();
-			settingsLink.hide();
-		}
-		else if(yourid !== theirid) {
+		var favouritesLink = $('#favouritesLink');
+
+		if (yourid === "0" || yourid !== theirid) {
 			editLink.hide();
 			settingsLink.hide();
+			favouritesLink.hide();
 		}
+
+		jQuery('.account-sub-links span a').removeClass('bold').each(function() {
+			var href = this.getAttribute('href');
+			if (window.location.href.indexOf(href) !== -1) {
+				jQuery(this).addClass('bold');
+				return false;
+			}
+		});
 	});
 
 }());

public/src/forum/accountsettings.js

@@ -1,16 +1,13 @@
-
-
-
 $(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!');

public/src/forum/admin/categories.js

@@ -1,11 +1,10 @@
-
 var modified_categories = {};
 
 function modified(el) {
 	var cid = $(el).parents('li').attr('data-cid');
 
 	modified_categories[cid] = modified_categories[cid] || {};
-	modified_categories[cid][el.getAttribute('data-name')] = el.value;
+	modified_categories[cid][$(el).attr('data-name')] = $(el).val();
 }
 
 function save() {
@@ -14,25 +13,28 @@ function save() {
 }
 
 function select_icon(el) {
-	var selected = el.className.replace(' icon-2x', '');
+	var selected = el.attr('class').replace(' icon-2x', '');
 	jQuery('#icons .selected').removeClass('selected');
-	jQuery('#icons .' + selected).parent().addClass('selected');
+	if (selected)
+		jQuery('#icons .' + selected).parent().addClass('selected');
 
 
 	bootbox.confirm('<h2>Select an icon.</h2>' + document.getElementById('icons').innerHTML, function(confirm) {
 		if (confirm) {
 			var iconClass = jQuery('.bootbox .selected').children(':first').attr('class');
-			el.className = iconClass + ' icon icon-2x';
-			el.value = iconClass;
+			el.attr('class', iconClass + ' icon-2x');
+			el.val(iconClass);
 
 			modified(el);
 		}
 	});
 
-	jQuery('.bootbox .span3').on('click', function() {
-		jQuery('.bootbox .selected').removeClass('selected');
-		jQuery(this).addClass('selected');
-	});
+	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);
 }
 
 
@@ -46,12 +48,44 @@ jQuery('.blockclass').each(function() {
 });
 
 
-//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 
+//DRY Failure. this needs to go into an ajaxify onready style fn. Currently is copy pasted into every single function so after ACP is off the ground fix asap
 (function() {
+	function showCreateCategoryModal() {
+		$('#new-category-modal').modal();
+	}
+
+	function createNewCategory() {
+		var category = {
+			name: $('#inputName').val(),
+			description: $('#inputDescription').val(),
+			icon: $('#new-category-modal i').attr('value'),
+			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 +96,11 @@ jQuery('.blockclass').each(function() {
 		});
 
 		jQuery('#save').on('click', save);
+		jQuery('#addNew').on('click', showCreateCategoryModal);
+		jQuery('#create-category-btn').on('click', createNewCategory);
 
-		jQuery('.icon').on('click', function(ev) {
-			select_icon(ev.target);
+		jQuery('#entry-container').on('click', '.icon', function(ev) {
+			select_icon($(this).find('i'));
 		});
 
 		jQuery('.blockclass').on('change', function(ev) {
@@ -77,7 +113,7 @@ 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');
@@ -89,7 +125,7 @@ jQuery('.blockclass').each(function() {
 			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 +135,5 @@ jQuery('.blockclass').each(function() {
 		});
 
 	});
-	
+
 }());

public/src/forum/admin/footer.js

@@ -1,10 +1,7 @@
-
-
-
 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) {
@@ -19,21 +16,21 @@ var nodebb_admin = (function(nodebb_admin) {
 			numFields = fields.length,
 			saveBtn = document.getElementById('save'),
 			x, key, inputType;
-		for(x=0;x<numFields;x++) {
+		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) {
+					switch (inputType) {
 						case 'text':
 						case 'textarea':
 						case 'number':
 							fields[x].value = nodebb_admin.config[key];
-						break;
+							break;
 
 						case 'checkbox':
 							fields[x].checked = nodebb_admin.config[key] === '1' ? true : false;
-						break;
+							break;
 					}
 				}
 			} else if (fields[x].nodeName === 'TEXTAREA') {
@@ -45,32 +42,35 @@ var nodebb_admin = (function(nodebb_admin) {
 			var key, value;
 			e.preventDefault();
 
-			for(x=0;x<numFields;x++) {
+			for (x = 0; x < numFields; x++) {
 				key = fields[x].getAttribute('data-field');
 				if (fields[x].nodeName === 'INPUT') {
 					inputType = fields[x].getAttribute('type');
-					switch(inputType) {
+					switch (inputType) {
 						case 'text':
 						case 'number':
 							value = fields[x].value;
-						break;
+							break;
 
 						case 'checkbox':
 							value = fields[x].checked ? '1' : '0';
-						break;
+							break;
 					}
 				} else if (fields[x].nodeName === 'TEXTAREA') {
 					value = fields[x].value;
 				}
 
-				socket.emit('api:config.set', { key: key, value: value });
+				socket.emit('api:config.set', {
+					key: key,
+					value: value
+				});
 			}
 		});
 	}
-	
+
 	nodebb_admin.remove = function(key) {
-		socket.emit('api:config.remove', key);		
-	}	
+		socket.emit('api:config.remove', key);
+	}
 
 
 	jQuery('document').ready(function() {
@@ -82,7 +82,7 @@ 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');
 				}
@@ -93,7 +93,7 @@ var nodebb_admin = (function(nodebb_admin) {
 	socket.once('api:config.get', function(config) {
 		nodebb_admin.config = config;
 	});
-	
+
 	socket.emit('api:config.get');
 
 	socket.on('api:config.set', function(data) {
@@ -102,7 +102,7 @@ var nodebb_admin = (function(nodebb_admin) {
 				alert_id: 'config_status',
 				timeout: 2500,
 				title: 'Changes Saved',
-				message: 'Your changes to the NodeBB configuration have been saved. You may have to restart NodeBB to see the changes.',
+				message: 'Your changes to the NodeBB configuration have been saved.',
 				type: 'success'
 			});
 		} else {
@@ -111,12 +111,11 @@ 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 || {}));
 
+	return nodebb_admin;
+
+}(nodebb_admin || {}));

public/src/forum/admin/groups.js

@@ -0,0 +1,194 @@
+$(document).ready(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.modal('hide');
+				ajaxify.go('admin/groups');
+			}
+		});
+	});
+});

public/src/forum/admin/index.js

@@ -1,18 +1,18 @@
 
 (function() {
-	
+
 	ajaxify.register_events(['api:get_all_rooms']);
 	socket.on('api:get_all_rooms', function(data) {
 
 		var active_users = document.getElementById('active_users'),
 			total = 0;
 			active_users.innerHTML = '';
-	
-		for(var room in data) {
+
+		for (var room in data) {
 			if (room !== '') {
 				var count = data[room].length;
 				total += count;
-				active_users.innerHTML = active_users.innerHTML + "<div class='alert alert-success'><strong>" + room + "</strong> " + count + " active user" + (count > 1 ? "s" : "") + "</div>"; 
+				active_users.innerHTML = active_users.innerHTML + "<div class='alert alert-success'><strong>" + room + "</strong> " + count + " active user" + (count > 1 ? "s" : "") + "</div>";
 			}
 		}
 

public/src/forum/admin/plugins.js

@@ -1,35 +1,35 @@
-var	nodebb_admin = nodebb_admin || {};
+var nodebb_admin = nodebb_admin || {};
 
 (function() {
-	var	plugins = {
-			init: function() {
-				var	pluginsList = $('.plugins'),
-					numPlugins = pluginsList[0].querySelectorAll('li').length,
-					pluginID, pluginTgl;
+	var plugins = {
+		init: function() {
+			var pluginsList = $('.plugins'),
+				numPlugins = pluginsList[0].querySelectorAll('li').length,
+				pluginID, pluginTgl;
 
-				if (numPlugins > 0) {
-					pluginsList.on('click', 'button[data-action="toggleActive"]', function() {
-						pluginID = $(this).parents('li').attr('data-plugin-id');
-						socket.emit('api:admin.plugins.toggle', pluginID);
-					});
+			if (numPlugins > 0) {
+				pluginsList.on('click', 'button[data-action="toggleActive"]', function() {
+					pluginID = $(this).parents('li').attr('data-plugin-id');
+					socket.emit('api:admin.plugins.toggle', pluginID);
+				});
 
-					socket.on('api:admin.plugins.toggle', function(status) {
-						pluginTgl = document.querySelector('.plugins li[data-plugin-id="' + status.id + '"] button');
-						pluginTgl.innerHTML = '<i class="icon-off"></i> ' + (status.active ? 'Dea' : 'A') + 'ctivate';
+				socket.on('api:admin.plugins.toggle', function(status) {
+					pluginTgl = document.querySelector('.plugins li[data-plugin-id="' + status.id + '"] button');
+					pluginTgl.innerHTML = '<i class="icon-off"></i> ' + (status.active ? 'Dea' : 'A') + 'ctivate';
 
-						app.alert({
-							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',
-							timeout: 5000
-						})
-					});
-				} else {
-					pluginsList.append('<li><p><i>No plugins found.</i></p></li>');
-				}
+					app.alert({
+						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: 'warning',
+						timeout: 5000
+					})
+				});
+			} else {
+				pluginsList.append('<li><p><i>No plugins found.</i></p></li>');
 			}
-		};
+		}
+	};
 
 	jQuery(document).ready(function() {
 		nodebb_admin.plugins = plugins;

public/src/forum/admin/themes.js

@@ -1,5 +1,3 @@
-
-
 var nodebb_admin = (function(nodebb_admin) {
 
 	var themes = {};
@@ -10,60 +8,62 @@ var nodebb_admin = (function(nodebb_admin) {
 			themeContainer = document.querySelector('#bootstrap_themes'),
 			numThemes = bootswatch.themes.length;
 
-		for(var x=0;x<numThemes;x++) {
+		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">';
+			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);
 	}
-	
+
 	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=nodebb_admin.themes.render';
 	document.body.appendChild(scriptEl);
 
-	var	bootstrapThemeContainer = document.querySelector('#bootstrap_themes'),
+	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'),
+						var cssSrc = $(e.target).parents('li').attr('data-css'),
 							cssEl = document.getElementById('base-theme');
 
 						cssEl.href = cssSrc;
-					break;
+						break;
 					case 'use':
-						var	parentEl = $(e.target).parents('li'),
+						var parentEl = $(e.target).parents('li'),
 							cssSrc = parentEl.attr('data-css'),
 							cssName = parentEl.attr('data-theme');
 						socket.emit('api:config.set', {
-							key: 'theme:id', value: 'bootswatch:' + cssName
+							key: 'theme:id',
+							value: 'bootswatch:' + cssName
 						});
 						socket.emit('api:config.set', {
-							key: 'theme:src', value: cssSrc
+							key: 'theme:src',
+							value: cssSrc
 						});
-					break;
+						break;
 				}
 			}
 		};
@@ -82,27 +82,27 @@ var nodebb_admin = (function(nodebb_admin) {
 
 	// Installed Themes
 	socket.emit('api:admin.themes.getInstalled', function(themes) {
-		var	instListEl = document.getElementById('installed_themes'),
+		var instListEl = document.getElementById('installed_themes'),
 			themeFrag = document.createDocumentFragment(),
 			liEl = document.createElement('li');
 
 		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 + '" />' +
-									'<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>' + themes[x].name + '</h4>' +
-										'<p>' +
-											themes[x].description +
-											(themes[x].url ? ' (<a href="' + themes[x].url + '">Homepage</a>)' : '') +
-										'</p>' +
-									'</div>' +
-									'<div class="clear">';
+				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 btn-default" data-action="preview">Preview</button>' +
+					'</div>' +
+					'<h4>' + themes[x].name + '</h4>' +
+					'<p>' +
+					themes[x].description +
+					(themes[x].url ? ' (<a href="' + themes[x].url + '">Homepage</a>)' : '') +
+					'</p>' +
+					'</div>' +
+					'<div class="clear">';
 				themeFrag.appendChild(liEl.cloneNode(true));
 			}
 		} else {

public/src/forum/admin/topics.js

@@ -7,25 +7,37 @@ $(document).ready(function() {
 			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 });
-				else socket.emit('api:topic.unpin', { tid: tid });
-			break;
+				if (!$this.hasClass('active')) socket.emit('api:topic.pin', {
+					tid: tid
+				});
+				else socket.emit('api:topic.unpin', {
+					tid: tid
+				});
+				break;
 			case 'lock':
-				if (!$this.hasClass('active')) socket.emit('api:topic.lock', { tid: tid });
-				else socket.emit('api:topic.unlock', { tid: tid });
-			break;
+				if (!$this.hasClass('active')) socket.emit('api:topic.lock', {
+					tid: tid
+				});
+				else socket.emit('api:topic.unlock', {
+					tid: tid
+				});
+				break;
 			case 'delete':
-				if (!$this.hasClass('active')) socket.emit('api:topic.delete', { tid: tid });
-				else socket.emit('api:topic.restore', { tid: tid });
-			break;
+				if (!$this.hasClass('active')) socket.emit('api:topic.delete', {
+					tid: tid
+				});
+				else socket.emit('api:topic.restore', {
+					tid: tid
+				});
+				break;
 		}
 	});
 
 	loadMoreEl.addEventListener('click', function() {
 		if (this.className.indexOf('disabled') === -1) {
-			var	topics = document.querySelectorAll('.topics li[data-tid]'),
+			var topics = document.querySelectorAll('.topics li[data-tid]'),
 				lastTid = parseInt(topics[topics.length - 1].getAttribute('data-tid'));
 
 			this.innerHTML = '<i class="icon-refresh icon-spin"></i> Retrieving topics';
@@ -37,9 +49,9 @@ $(document).ready(function() {
 
 				topics = JSON.parse(topics);
 				if (topics.length > 0) {
-					var	html = templates.prepare(templates['admin/topics'].blocks['topics']).parse({
-							topics: topics
-						}),
+					var html = templates.prepare(templates['admin/topics'].blocks['topics']).parse({
+						topics: topics
+					}),
 						topicsListEl = document.querySelector('.topics');
 
 					topicsListEl.innerHTML += html;
@@ -54,9 +66,9 @@ $(document).ready(function() {
 	}, false);
 
 	// Resolve proper button state for all topics
-	var	topicEls = topicsListEl.querySelectorAll('li'),
+	var 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-locked') === '1') topicEls[x].querySelector('[data-action="lock"]').className += ' active';
 		if (topicEls[x].getAttribute('data-deleted') === '1') topicEls[x].querySelector('[data-action="delete"]').className += ' active';

public/src/forum/admin/users.js

@@ -1,77 +1,63 @@
-
 (function() {
 
+	var yourid = templates.get('yourid');
+
+	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');
+	}
+
+	function updateUserButtons() {
+		jQuery('.ban-btn').each(function(index, element) {
+			var banBtn = $(element);
+			var uid = getUID(banBtn);
+			if (isUserAdmin(banBtn) || uid === yourid)
+				banBtn.addClass('disabled');
+			else if (isUserBanned(banBtn))
+				banBtn.addClass('btn-warning');
+			else
+				banBtn.removeClass('btn-warning');
+
+		});
+	}
+
 	function initUsers() {
 
-		function isUserAdmin(element) {
-			var parent = $(element).parents('.users-box');
-			return (parent.attr('data-admin') !== "0");
-		}
+		updateUserButtons();
 
-		function getUID(element) {
-			var parent = $(element).parents('.users-box');
-			return parent.attr('data-uid');	
-		}
+		$('#users-container').on('click', '.ban-btn', function() {
+			var banBtn = $(this);
+			var isAdmin = isUserAdmin(banBtn);
+			var isBanned = isUserBanned(banBtn);
+			var parent = banBtn.parents('.users-box');
+			var uid = getUID(banBtn);
 
-		jQuery('.admin-btn').each(function(index, element) {
-			var adminBtn = $(element);
-			var isAdmin = isUserAdmin(adminBtn);
-			
-			if(isAdmin)
-				adminBtn.addClass('btn-success');
-			else
-				adminBtn.removeClass('btn-success');
-
-		});
-
-		jQuery('.delete-btn').each(function(index, element) {
-			var deleteBtn = $(element);
-			var isAdmin = isUserAdmin(deleteBtn);
-			
-			if(isAdmin)
-				deleteBtn.addClass('disabled');
-			else
-				deleteBtn.show();
-		});
-
-		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);
+			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);
+						}
+					});
+				}
 			}
-			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;
-		});
 
-		jQuery('.delete-btn').on('click', function() {
-			var deleteBtn = $(this);
-			var isAdmin = isUserAdmin(deleteBtn);
-			var parent = deleteBtn.parents('.users-box');
-			var uid = getUID(deleteBtn);
-
-			if(!isAdmin) {
-				bootbox.confirm('Do you really want to delete "' + parent.attr('data-username') +'"?', function(confirm) {
-					socket.emit('api:admin.user.deleteUser', uid);		
-				});
-			}
-			
 			return false;
 		});
 	}
@@ -79,13 +65,12 @@
 
 	jQuery('document').ready(function() {
 
-		var yourid = templates.get('yourid'),
-			timeoutId = 0,
+		var 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,72 +80,74 @@
 			}
 		});
 
-		jQuery('#search-user').on('keyup', function () {
-			if(timeoutId !== 0) {
+		jQuery('#search-user').on('keyup', function() {
+			if (timeoutId !== 0) {
 				clearTimeout(timeoutId);
 				timeoutId = 0;
 			}
 
 			timeoutId = setTimeout(function() {
 				var username = $('#search-user').val();
-				
+
 				jQuery('.icon-spinner').removeClass('none');
 				socket.emit('api:admin.user.search', username);
-				
+
 			}, 250);
 		});
-		
+
 		initUsers();
-		
+
 		socket.removeAllListeners('api:admin.user.search');
-		
+
 		socket.on('api:admin.user.search', function(data) {
 			var html = templates.prepare(templates['admin/users'].blocks['users']).parse({
-					users: data
-				}),
+				users: data
+			}),
 				userListEl = document.querySelector('.users');
 
 			userListEl.innerHTML = html;
-			jQuery('.icon-spinner').addClass('none');				
+			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 {
-				$('#user-notfound-notify').html(data.length + ' user'+(data.length>1?'s':'') + ' found!')
+			} else {
+				$('#user-notfound-notify').html(data.length + ' user' + (data.length > 1 ? 's' : '') + ' found!')
 					.show()
 					.addClass('label-success')
-					.removeClass('label-important');
+					.removeClass('label-danger');
 			}
-			
+
 			initUsers();
 		});
-	
+
 		function onUsersLoaded(users) {
-			var html = templates.prepare(templates['admin/users'].blocks['users']).parse({ users: users });
+			var html = templates.prepare(templates['admin/users'].blocks['users']).parse({
+				users: users
+			});
 			$('#users-container').append(html);
+			updateUserButtons();
 		}
 
 		function loadMoreUsers() {
 			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 
+					set: set,
+					after: $('#users-container').children().length
 				}, function(data) {
-					if(data.users.length) {
+					if (data.users.length) {
 						onUsersLoaded(data.users);
 					}
 					loadingMoreUsers = false;
@@ -171,9 +158,9 @@
 		$('#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();
 			}
 		});

public/src/forum/category.js

@@ -1,4 +1,4 @@
-(function() {
+(function () {
 	var cid = templates.get('category_id'),
 		room = 'category_' + cid,
 		twitterEl = document.getElementById('twitter-intent'),
@@ -8,25 +8,25 @@
 		facebook_url = templates.get('facebook-share-url'),
 		google_url = templates.get('google-share-url'),
 		loadingMoreTopics = false;
-		
+
 	app.enter_room(room);
 
-	twitterEl.addEventListener('click', function() {
+	twitterEl.addEventListener('click', function () {
 		window.open(twitter_url, '_blank', 'width=550,height=420,scrollbars=no,status=no');
 		return false;
 	}, false);
-	facebookEl.addEventListener('click', function() {
+	facebookEl.addEventListener('click', function () {
 		window.open(facebook_url, '_blank', 'width=626,height=436,scrollbars=no,status=no');
 		return false;
 	}, false);
-	googleEl.addEventListener('click', function() {
+	googleEl.addEventListener('click', function () {
 		window.open(google_url, '_blank', 'width=500,height=570,scrollbars=no,status=no');
 		return false;
 	}, false);
 
 	var new_post = document.getElementById('new_post');
-	new_post.onclick = function() {
-		require(['composer'], function(cmp) {
+	new_post.onclick = function () {
+		require(['composer'], function (cmp) {
 			cmp.push(0, cid);
 		});
 	}
@@ -36,37 +36,38 @@
 	]);
 
 	function onNewTopic(data) {
-
-		var html = templates.prepare(templates['category'].blocks['topics']).parse({ topics: [data] }),
-			topic = document.createElement('div'),
-			container = document.getElementById('topics-container'),
-			topics = document.querySelectorAll('#topics-container a'),
-			numTopics = topics.length,
-			x;
+		var html = templates.prepare(templates['category'].blocks['topics']).parse({
+			topics: [data]
+		}),
+			topic = $(html),
+			container = $('#topics-container'),
+			topics = $('#topics-container').children(),
+			numTopics = topics.length;
 
 		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');
+			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.insertBefore(topic, null);
-			$(topic).hide().fadeIn('slow');
+			container.append(topic);
+			topic.hide().fadeIn('slow');
 		}
+
+		socket.emit('api:categories.getRecentReplies', cid);
+		$('#topics-container span.timeago').timeago();
 	}
 
 	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;
 		}
@@ -74,57 +75,61 @@
 		var recent_replies = document.getElementById('category_recent_replies');
 
 		recent_replies.innerHTML = '';
-		
-		var	frag = document.createDocumentFragment(),
+
+		var frag = document.createDocumentFragment(),
 			li = document.createElement('li');
-		for (var i=0,numPosts=posts.length; i<numPosts; i++) {
-			var dateString = utils.relativeTime(posts[i].timestamp);
+		for (var i = 0, numPosts = posts.length; i < numPosts; i++) {
+
 			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>' +
-								'<a href="/topic/'+ posts[i].topicSlug + '#' + posts[i].pid + '">' +
-									'<p>' +
-										'<strong>' + posts[i].username + '</strong>: ' + posts[i].content +
-									'</p>' +
-									'<span>posted ' + utils.relativeTime(posts[i].timestamp) + ' ago</span>' +
-								'</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 + '">' +
+				'<p>' +
+				posts[i].content +
+				'</p>' +
+				'<p class="meta"><strong>' + posts[i].username + '</strong></span> -<span class="timeago" title="' + posts[i].relativeTime + '"></span></p>' +
+				'</a>';
 
 			frag.appendChild(li.cloneNode(true));
 			recent_replies.appendChild(frag);
 		}
+		$('#category_recent_replies span.timeago').timeago();
 	});
-	
+
 	function onTopicsLoaded(topics) {
 
-		var html = templates.prepare(templates['category'].blocks['topics']).parse({ topics: topics }),
+		var html = templates.prepare(templates['category'].blocks['topics']).parse({
+			topics: topics
+		}),
 			container = $('#topics-container');
 
 		jQuery('#topics-container, .category-sidebar').removeClass('hidden');
 		jQuery('#category-no-topics').remove();
 
 		container.append(html);
+
+		$('#topics-container span.timeago').timeago();
 	}
-	
 
 
 	function loadMoreTopics(cid) {
 		loadingMoreTopics = true;
 		socket.emit('api:category.loadMore', {
-			cid: cid, 
-			after: $('#topics-container').children().length 
-		}, function(data) {
-			if(data.topics.length) {
+			cid: cid,
+			after: $('#topics-container').children().length
+		}, function (data) {
+			if (data.topics.length) {
 				onTopicsLoaded(data.topics);
 			}
 			loadingMoreTopics = false;
 		});
 	}
 
-	$(window).off('scroll').on('scroll', function(ev) {
-		var bottom = (document.body.offsetHeight - $(window).height()) * 0.9;
+	$(window).off('scroll').on('scroll', function (ev) {
+		var bottom = ($(document).height() - $(window).height()) * 0.9;
 
-		if (document.body.scrollTop > bottom && !loadingMoreTopics) {
+		if ($(window).scrollTop() > bottom && !loadingMoreTopics) {
 			loadMoreTopics(cid);
 		}
 	});

public/src/forum/favourites.js

@@ -0,0 +1,7 @@
+(function() {
+	$(document).ready(function() {
+		$('.user-favourite-posts .topic-row').on('click', function() {
+			ajaxify.go($(this).attr('topic-url'));
+		});
+	});
+}());

public/src/forum/followers.js

@@ -5,20 +5,14 @@
 		followersCount = templates.get('followersCount');
 
 	$(document).ready(function() {
-		
-		if(parseInt(followersCount, 10) === 0) {
-			$('#no-followers-notice').show();
+
+		if (parseInt(followersCount, 10) === 0) {
+			$('#no-followers-notice').removeClass('hide');
 		}
-		
-		$('.reputation').each(function(index, element) {
-			$(element).html(app.addCommas($(element).html()));
-		});
-		
-		$('.postcount').each(function(index, element) {
-			$(element).html(app.addCommas($(element).html()));
-		});
-		
+
+		app.addCommasToNumbers();
+
 	});
-	
+
 
 }());

public/src/forum/following.js

@@ -5,23 +5,24 @@
 		followingCount = templates.get('followingCount');
 
 	$(document).ready(function() {
-		
-		if(parseInt(followingCount, 10) === 0) {
-			$('#no-following-notice').show();
+
+		if (parseInt(followingCount, 10) === 0) {
+			$('#no-following-notice').removeClass('hide');
 		}
 
 
-		if(yourid !== theirid) {
+		if (yourid !== theirid) {
 			$('.unfollow-btn').hide();
-		}
-		else {
-			$('.unfollow-btn').on('click',function() {
+		} else {
+			$('.unfollow-btn').on('click', function() {
 				var unfollowBtn = $(this);
 				var followingUid = $(this).attr('followingUid');
-			
-				socket.emit('api:user.unfollow', {uid: followingUid}, function(success) {
+
+				socket.emit('api:user.unfollow', {
+					uid: followingUid
+				}, function(success) {
 					var username = unfollowBtn.attr('data-username');
-					if(success) {
+					if (success) {
 						unfollowBtn.parent().remove();
 						app.alertSuccess('You are no longer following ' + username + '!');
 					} else {
@@ -32,15 +33,8 @@
 			});
 		}
 
-		$('.reputation').each(function(index, element) {
-			$(element).html(app.addCommas($(element).html()));
-		});
-		
-		$('.postcount').each(function(index, element) {
-			$(element).html(app.addCommas($(element).html()));
-		});
-		
+		app.addCommasToNumbers();
 	});
-	
+
 
 }());

public/src/forum/footer.js

@@ -1,85 +1,93 @@
 (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');
-	
+	var stats_users = document.getElementById('stats_users'),
+		stats_topics = document.getElementById('stats_topics'),
+		stats_posts = document.getElementById('stats_posts'),
+		stats_online = document.getElementById('stats_online'),
+		user_label = document.getElementById('user_label');
+
 	socket.emit('user.count', {});
 	socket.on('user.count', function(data) {
-		num_users.innerHTML = "We currently have <b>" + data.count + "</b> registered users.";
+		stats_users.innerHTML = data.count;
 	});
 
 	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>.";
-		}
+		stats_topics.innerHTML = data.topics;
+		stats_posts.innerHTML = data.posts;
 	});
 
 	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>";
+		stats_online.innerHTML = data.users;
+	});
+
+	socket.emit('api:updateHeader', {
+		fields: ['username', 'picture', 'userslug']
 	});
 
-	socket.emit('api:updateHeader', { fields: ['username', 'picture', 'userslug'] });
-	
 	socket.on('api:updateHeader', function(data) {
-	
-		var rightMenu = $('#right-menu');
-		if (data.uid > 0) {
+		jQuery('#search-button').on('click', function() {
+			jQuery('#search-fields').removeClass('hide').show();
+			jQuery(this).hide();
+			jQuery('#search-fields input').focus()
 
-			var userLabel = rightMenu.find('#user_label');
-			if(userLabel.length) {
-				if(data['userslug'])
-					userLabel.attr('href','/users/' + data['userslug']);
-				if(data['picture'])
-					userLabel.find('img').attr('src',data['picture']);
-				if(data['username'])
+			jQuery('#search-form').on('submit', function() {
+				jQuery('#search-fields').hide();
+				jQuery('#search-button').show();
+			});
+
+			$('#search-fields input').on('blur', function() {
+				$('#search-fields').hide();
+				$('#search-button').show();
+			});
+		});
+
+		var loggedInMenu = $('#logged-in-menu'),
+			isLoggedIn = data.uid > 0;
+
+		if (isLoggedIn) {
+			jQuery('.nodebb-loggedin').show();
+			jQuery('.nodebb-loggedout').hide();
+
+			$('#logged-out-menu').addClass('hide');
+			$('#logged-in-menu').removeClass('hide');
+
+			$('#search-button').show();
+
+			var userLabel = loggedInMenu.find('#user_label');
+			if (userLabel.length) {
+				if (data['userslug'])
+					userLabel.attr('href', '/user/' + data['userslug']);
+				if (data['picture'])
+					userLabel.find('img').attr('src', data['picture']);
+				if (data['username'])
 					userLabel.find('span').html(data['username']);
-			}
-			else {
-				var userli = $('<li> \
-									<a id="user_label" href="/users/'+data['userslug']+'"> \
-										<img src="'+data['picture']+'"/> \
-										<span>'+data['username']+'</span> \
-									</a> \
-								</li>');
-				rightMenu.append(userli);
 
-				var logoutli = $('<li><a href="' + RELATIVE_PATH + '/logout">Log out</a></li>');
-				rightMenu.append(logoutli);
+				$('#logout-link').on('click', function() {
+					var	csrf_token = $('#csrf_token').val();
+
+					$.post(RELATIVE_PATH + '/logout', {
+						_csrf: csrf_token
+					}, function() {
+						window.location = RELATIVE_PATH + '/';
+					});
+				});
 			}
 		} else {
-			rightMenu.html('');
+			$('#search-button').hide();
 
-			var registerEl = document.createElement('li'),
-				loginEl = document.createElement('li');
+			jQuery('.nodebb-loggedin').hide();
+			jQuery('.nodebb-loggedout').show();
 
-			registerEl.innerHTML = '<a href="/register">Register</a>';
-			loginEl.innerHTML = '<a href="/login">Login</a>';
+			$('#logged-out-menu').removeClass('hide');
+			$('#logged-in-menu').addClass('hide');
 
-			right_menu.appendChild(registerEl);
-			right_menu.appendChild(loginEl);
 		}
+
+		$('#main-nav a,#right-menu a').off('click').on('click', function() {
+			if($('.navbar .navbar-collapse').hasClass('in'))
+				$('.navbar-header button').click();
+		});
 	});
 
 	// Notifications dropdown
@@ -90,75 +98,90 @@
 	notifTrigger.addEventListener('click', function(e) {
 		e.preventDefault();
 		if (notifContainer.className.indexOf('open') === -1) {
-			socket.emit('api:notifications.get');
-			socket.emit('api:notifications.mark_all_read', null, function() {
-				notifIcon.className = 'icon-circle-blank';
-				utils.refreshTitle();
+			socket.emit('api:notifications.get', null, function(data) {
+				var notifFrag = document.createDocumentFragment(),
+					notifEl = document.createElement('li'),
+					numRead = data.read.length,
+					numUnread = data.unread.length,
+					x;
+				notifList.innerHTML = '';
+				if ((data.read.length + data.unread.length) > 0) {
+					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++) {
+						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.innerHTML = '<a>You have no notifications</a>';
+					notifFrag.appendChild(notifEl);
+				}
+				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;
+		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 = '';
-		if ((data.read.length + data.unread.length) > 0) {
-			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++) {
-				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.innerHTML = '<a>You have no notifications</a>';
-			notifFrag.appendChild(notifEl);
-		}
-		notifList.appendChild(notifFrag);
 
-		if (data.unread.length > 0) notifIcon.className = 'icon-circle active';
-		else notifIcon.className = 'icon-circle-blank';
-	});
 	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);
-			chatModal.show();
-			chat.bringModalToTop(chatModal);
-	
-			chat.appendChatMessage(chatModal, message);
+			var modal = null;
+			if (chat.modalExists(data.fromuid)) {
+				modal = chat.getModal(data.fromuid);
+				chat.appendChatMessage(modal, data.message, data.timestamp);
+			} else {
+				modal = chat.createModal(data.username, data.fromuid);
+			}
+
+			chat.load(modal.attr('UUID'));
 		});
 	});
 
-
 	require(['mobileMenu'], function(mobileMenu) {
 		mobileMenu.init();
 	});

public/src/forum/login.js

@@ -1,37 +1,47 @@
-
-
 (function() {
 	// Alternate Logins
 	var altLoginEl = document.querySelector('.alt-logins');
 	altLoginEl.addEventListener('click', function(e) {
 		var target;
-		switch(e.target.nodeName) {
-			case 'LI': target = e.target; break;
-			case 'I': target = e.target.parentNode; break;
+		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');
 		}
-	});	
-	
+	});
+
 	$('#login').on('click', function() {
-		
 		var loginData = {
 			'username': $('#username').val(),
 			'password': $('#password').val(),
 			'_csrf': $('#csrf-token').val()
 		};
-				
+
 		$.ajax({
 			type: "POST",
 			url: RELATIVE_PATH + '/login',
 			data: loginData,
 			success: function(data, textStatus, jqXHR) {
-				$('#login-error-notify').hide();
-				window.location.replace(RELATIVE_PATH + "/?loggedin");
+				if (!data.success) {
+					$('#login-error-notify').show();
+				} else {
+					$('#login-error-notify').hide();
+					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) {
-				$('#login-error-notify').show().delay(1000).fadeOut(250);
+			error: function(data, textStatus, jqXHR) {
+				$('#login-error-notify').show();
 			},
 			dataType: 'json',
 			async: true,
@@ -40,5 +50,11 @@
 
 		return false;
 	});
-	
-}());
+
+	$('#login-error-notify button').on('click', function() {
+		$('#login-error-notify').hide();
+		return false;
+	});
+
+	document.querySelector('#content input').focus();
+}());

public/src/forum/recent.js

@@ -8,32 +8,33 @@
 		'event:new_post'
 	]);
 
-	var newTopicCount = 0, newPostCount = 0;
+	var newTopicCount = 0,
+		newPostCount = 0;
 
 	$('#new-topics-alert').on('click', function() {
 		$(this).hide();
 	});
 
 	socket.on('event:new_topic', function(data) {
-		
+
 		++newTopicCount;
 		updateAlertText();
-	
+
 	});
-	
+
 	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.';
@@ -42,7 +43,7 @@
 
 		$('#new-topics-alert').html(text).fadeIn('slow');
 	}
-	
+
 	socket.on('event:new_post', function(data) {
 		++newPostCount;
 		updateAlertText();
@@ -50,7 +51,9 @@
 
 	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();
@@ -60,8 +63,10 @@
 
 	function loadMoreTopics() {
 		loadingMoreTopics = true;
-		socket.emit('api:topics.loadMoreRecentTopics', {after:$('#topics-container').children().length}, function(data) {
-			if(data.topics && data.topics.length) {
+		socket.emit('api:topics.loadMoreRecentTopics', {
+			after: $('#topics-container').children().length
+		}, function(data) {
+			if (data.topics && data.topics.length) {
 				onTopicsLoaded(data.topics);
 			}
 			loadingMoreTopics = false;
@@ -69,9 +74,9 @@
 	}
 
 	$(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();
 		}
 	});

public/src/forum/register.js

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

public/src/forum/reset.js

@@ -1,11 +1,13 @@
 (function() {
-	var	inputEl = document.getElementById('email'),
+	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();
@@ -14,9 +16,9 @@
 	};
 
 	ajaxify.register_events(['user.send_reset']);
-	
+
 	socket.on('user.send_reset', function(data) {
-		var	submitEl = document.getElementById('reset');
+		var submitEl = document.getElementById('reset');
 
 		if (data.status === 'ok') {
 			jQuery('#error').hide();
@@ -26,13 +28,13 @@
 		} 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;
+					break;
 				case 'send-failed':
 					errorTextEl.innerHTML = 'There was a problem sending the reset code. Please try again later.';
-				break;
+					break;
 			}
 		}
 	});

public/src/forum/reset_code.js

@@ -1,7 +1,7 @@
 (function() {
 	var reset_code = templates.get('reset_code');
 
-	var	resetEl = document.getElementById('reset'),
+	var resetEl = document.getElementById('reset'),
 		password = document.getElementById('password'),
 		repeat = document.getElementById('repeat'),
 		noticeEl = document.getElementById('notice');
@@ -10,20 +10,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) {
-			socket.emit('user:reset.commit', { code: reset_code, password: password.value });
+		} else if (password.value !== repeat.value) {
+			$('#error').hide();
+			noticeEl.querySelector('strong').innerHTML = 'Invalid Password';
+			noticeEl.querySelector('p').innerHTML = 'The two passwords you\'ve entered do not match.';
+			noticeEl.style.display = 'block';
+		} else {
+			socket.emit('user:reset.commit', {
+				code: reset_code,
+				password: password.value
+			});
 		}
 	}, false);
 
 	// Enable the form if the code is valid
-	socket.emit('user:reset.valid', { code: reset_code });
+	socket.emit('user:reset.valid', {
+		code: reset_code
+	});
 
 
 	ajaxify.register_events(['user:reset.valid', 'user:reset.commit']);
 	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

public/src/forum/search.js

@@ -2,13 +2,23 @@
 
 	$(document).ready(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;
+		});
 	});
 
 })();

public/src/forum/topic.js

@@ -1,5 +1,5 @@
 (function() {
-	var	expose_tools = templates.get('expose_tools'),
+	var expose_tools = templates.get('expose_tools'),
 		tid = templates.get('topic_id'),
 		postListEl = document.getElementById('post-container'),
 		editBtns = document.querySelectorAll('#post-container .post-buttons .edit, #post-container .post-buttons .edit i'),
@@ -9,13 +9,13 @@
 			pinned: templates.get('pinned')
 		},
 		topic_name = templates.get('topic_name');
-	
+
 
 	jQuery('document').ready(function() {
 
 		app.addCommasToNumbers();
-		
-		var	room = 'topic_' + tid,
+
+		var room = 'topic_' + tid,
 			adminTools = document.getElementById('thread-tools');
 
 		app.enter_room(room);
@@ -26,57 +26,66 @@
 		if (thread_state.pinned === '1') set_pinned_state(true);
 
 		if (expose_tools === '1') {
-			var deleteThreadEl = document.getElementById('delete_thread'),
-				lockThreadEl = document.getElementById('lock_thread'),
-				pinThreadEl = document.getElementById('pin_thread'),
-				moveThreadEl = document.getElementById('move_thread'),
-				moveThreadModal = $('#move_thread_modal');
+			var moveThreadModal = $('#move_thread_modal');
 
 			adminTools.style.visibility = 'inherit';
 
 			// Add events to the thread tools
-			deleteThreadEl.addEventListener('click', function(e) {
-				e.preventDefault();
+			$('#delete_thread').on('click', function(e) {
 				if (thread_state.deleted !== '1') {
 					bootbox.confirm('Are you sure you want to delete this thread?', function(confirm) {
-						if (confirm) socket.emit('api:topic.delete', { tid: tid });
+						if (confirm) socket.emit('api:topic.delete', {
+							tid: tid
+						});
 					});
 				} else {
 					bootbox.confirm('Are you sure you want to restore this thread?', function(confirm) {
-						if (confirm) socket.emit('api:topic.restore', { tid: tid });
+						if (confirm) socket.emit('api:topic.restore', {
+							tid: tid
+						});
 					});
 				}
-			}, false);
+				return false;
+			});
 
-			lockThreadEl.addEventListener('click', function(e) {
-				e.preventDefault();
+			$('#lock_thread').on('click', function(e) {
 				if (thread_state.locked !== '1') {
-					socket.emit('api:topic.lock', { tid: tid });
+					socket.emit('api:topic.lock', {
+						tid: tid
+					});
 				} else {
-					socket.emit('api:topic.unlock', { tid: tid });
+					socket.emit('api:topic.unlock', {
+						tid: tid
+					});
 				}
-			}, false);
+				return false;
+			});
 
-			pinThreadEl.addEventListener('click', function(e) {
-				e.preventDefault();
+			$('#pin_thread').on('click', function(e) {
 				if (thread_state.pinned !== '1') {
-					socket.emit('api:topic.pin', { tid: tid });
+					socket.emit('api:topic.pin', {
+						tid: tid
+					});
 				} else {
-					socket.emit('api:topic.unpin', { tid: tid });
+					socket.emit('api:topic.unpin', {
+						tid: tid
+					});
 				}
-			}, false);
+				return false;
+			});
 
-			moveThreadEl.addEventListener('click', function(e) {
-				e.preventDefault();
+			$('#move_thread').on('click', function(e) {
 				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) {
 						// Render categories
-						var	categoriesFrag = document.createDocumentFragment(),
+						var categoriesFrag = document.createDocumentFragment(),
 							categoryEl = document.createElement('li'),
 							numCategories = data.categories.length,
 							modalBody = moveThreadModal.find('.modal-body'),
@@ -88,7 +97,7 @@
 							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.innerHTML = '<i class="' + info.icon + '"></i> ' + info.name;
@@ -128,14 +137,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
+								});
 							}
 						});
 					});
@@ -145,8 +157,8 @@
 		}
 
 		// 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++) {
+		var postEls = document.querySelectorAll('#post-container li[data-deleted]');
+		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 +199,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,44 +207,56 @@
 				});
 			}
 		});
+
 		socket.emit('api:topic.followCheck', tid);
-		followEl[0].addEventListener('click', function() {
-			socket.emit('api:topic.follow', tid);
-		}, false);
+		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;	
+		enableInfiniteLoading();
 
-			if (document.body.scrollTop > bottom && !app.infiniteLoaderActive && $('#post-container').children().length) {
-				app.loadMorePosts(tid);
-			}
-		});
+		var bookmark = localStorage.getItem('topic:' + tid + ':bookmark');
 
-		$('.post-container').on('click', '.deleted', function(ev) {
+		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();
+		var selectionText = '',
+			selection = window.getSelection() || document.getSelection();
 
-			if ($(selection.baseNode).parents('.post-content').length > 0) {
-				var	snippet = selection.toString();
-				if (snippet.length > 0) selectionText = '> ' + snippet.replace(/\n/g, '\n> ');
-			}
+		if ($(selection.baseNode).parents('.post-content').length > 0) {
+			var snippet = selection.toString();
+			if (snippet.length > 0) selectionText = '> ' + snippet.replace(/\n/g, '\n> ');
+		}
 
-			if (thread_state.locked !== '1') {
-				require(['composer'], function(cmp) {
-					cmp.push(tid, null, null, selectionText.length > 0 ? selectionText + '\n\n' : '');
-				});
-			}
-		};
-	$('.post-container').on('click', '.post_reply', reply_fn);
+		if (thread_state.locked !== '1') {
+			require(['composer'], function(cmp) {
+				cmp.push(tid, null, null, selectionText.length > 0 ? selectionText + '\n\n' : '');
+			});
+		}
+	};
+	$('#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 +267,72 @@
 					cmp.push(tid, null, null, quoted);
 				});
 			});
-			socket.emit('api:posts.getRawPost', { pid: pid });
+			socket.emit('api:posts.getRawPost', {
+				pid: pid
+			});
 		}
 	});
 
-	$('.post-container').on('click', '.favourite', function() {
-		var ids = this.id.replace('favs_', '').split('_'),
-			pid = ids[0],
-			uid = ids[1];
+	$('#post-container').on('click', '.favourite', function() {
+		var pid = $(this).parents('li').attr('data-pid');
+		var uid = $(this).parents('li').attr('data-uid');
 
 		var element = $(this).find('i');
-		if(element.attr('class') == 'icon-star-empty') {
-			element.attr('class', 'icon-star');
-			socket.emit('api:posts.favourite', {pid: pid, room_id: app.current_room});
-		}
-		else {
-			element.attr('class', 'icon-star-empty');
-			socket.emit('api:posts.unfavourite', {pid: pid, room_id: app.current_room});
+		if (element.attr('class') == 'icon-star-empty') {
+			socket.emit('api:posts.favourite', {
+				pid: pid,
+				room_id: app.current_room
+			});
+		} else {
+			socket.emit('api:posts.unfavourite', {
+				pid: pid,
+				room_id: app.current_room
+			});
 		}
 	});
 
-	$('.post-container').delegate('.edit', 'click', function(e) {
-		var pid = ($(this).attr('id') || $(this.parentNode).attr('id')).split('_')[1];
+	$('#post-container').on('click', '.link', function() {
+		var pid = $(this).parents('li').attr('data-pid');
+		$('#post_' + pid + '_link').val(window.location.href + "#" + pid).stop(true, false).fadeIn().select();
+		$('#post_' + pid + '_link').off('blur').on('blur', function() {
+			$(this).fadeOut();
+		});
+	});
 
-		var main = $(this).parents('.main-post');
+	$('#post-container').delegate('.edit', 'click', function(e) {
+		var pid = $(this).parents('li').attr('data-pid'),
+			main = $(this).parents('.main-post');
 
 		require(['composer'], function(cmp) {
 			cmp.push(null, null, pid);
 		});
 	});
 
-	$('.post-container').delegate('.delete', 'click', function(e) {
-		var	pid = ($(this).attr('id') || $(this.parentNode).attr('id')).split('_')[1],
-		postEl = $(document.querySelector('#post-container li[data-pid="' + pid + '"]')),
-		deleteAction = !postEl.hasClass('deleted') ? true : false,
-		confirmDel = confirm((deleteAction ? 'Delete' : 'Restore') + ' this post?');
+	$('#post-container').delegate('.delete', 'click', function(e) {
+		var pid = $(this).parents('li').attr('data-pid'),
+			postEl = $(document.querySelector('#post-container li[data-pid="' + pid + '"]')),
+			deleteAction = !postEl.hasClass('deleted') ? true : false,
+			confirmDel = confirm((deleteAction ? 'Delete' : 'Restore') + ' this post?');
 
 		if (confirmDel) {
 			deleteAction ?
-			socket.emit('api:posts.delete', { pid: pid }) :
-			socket.emit('api:posts.restore', { pid: pid });
+				socket.emit('api:posts.delete', {
+					pid: pid
+				}) :
+				socket.emit('api:posts.restore', {
+					pid: pid
+				});
 		}
-	}); 
+	});
 
-	$('.post-container').delegate('.chat', 'click', function(e) {
+	$('#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');
-		var touid = $(this).parents('li').attr('data-uid');
+		if (username === app.username || !app.username)
+			return;
 
-		require(['chat'], function(chat){
-			var chatModal = chat.createModalIfDoesntExist(username, touid);
-			chatModal.show();
-			chat.bringModalToTop(chatModal);
-		});
-		
+		app.openChat(username, touid);
 	});
 
 	ajaxify.register_events([
@@ -310,7 +346,7 @@
 
 	socket.on('api:get_users_in_room', function(data) {
 		var activeEl = $('#thread_active_users');
-		if(activeEl.length)
+		if (activeEl.length)
 			activeEl.html(data);
 
 		app.populate_online_users();
@@ -371,9 +407,9 @@
 	socket.on('event:post_edited', function(data) {
 		var editedPostEl = document.getElementById('content_' + data.pid);
 
-		var editedPostTitle = $('#topic_title_'+data.pid);
-		
-		if(editedPostTitle.length > 0) {
+		var editedPostTitle = $('#topic_title_' + data.pid);
+
+		if (editedPostTitle.length > 0) {
 			editedPostTitle.fadeOut(250, function() {
 				editedPostTitle.html(data.title);
 				editedPostTitle.fadeIn(250);
@@ -384,12 +420,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');
+			}
 		}
 	});
 
@@ -415,12 +465,12 @@
 		ptotal += value;
 		utotal += value;
 
-		post_rep.html(ptotal+ ' ');
-		user_rep.html(utotal+ ' ');
+		post_rep.html(ptotal + ' ');
+		user_rep.html(utotal + ' ');
 	}
 
 	function set_locked_state(locked, alert) {
-		var	threadReplyBtn = document.getElementById('post_reply'),
+		var threadReplyBtn = document.getElementById('post_reply'),
 			postReplyBtns = document.querySelectorAll('#post-container .post_reply'),
 			quoteBtns = document.querySelectorAll('#post-container .quote'),
 			editBtns = document.querySelectorAll('#post-container .edit'),
@@ -433,7 +483,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 +505,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';
@@ -477,25 +527,25 @@
 	}
 
 	function set_delete_state(deleted) {
-		var	deleteThreadEl = document.getElementById('delete_thread'),
+		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';
@@ -535,7 +585,7 @@
 	}
 
 	function toggle_post_delete_state(pid) {
-		var	postEl = $(document.querySelector('#post-container li[data-pid="' + pid + '"]'));
+		var postEl = $(document.querySelector('#post-container li[data-pid="' + pid + '"]'));
 
 		if (postEl[0]) {
 			quoteEl = $(postEl[0].querySelector('.quote')),
@@ -562,7 +612,7 @@
 	}
 
 	function toggle_post_tools(pid, state) {
-		var	postEl = $(document.querySelector('#post-container li[data-pid="' + pid + '"]')),
+		var postEl = $(document.querySelector('#post-container li[data-pid="' + pid + '"]')),
 			quoteEl = $(postEl[0].querySelector('.quote')),
 			favEl = $(postEl[0].querySelector('.favourite')),
 			replyEl = $(postEl[0].querySelector('.post_reply'));
@@ -579,10 +629,10 @@
 	}
 
 	function toggle_mod_tools(pid, state) {
-		var	postEl = $(document.querySelector('#post-container li[data-pid="' + pid + '"]')),
+		var postEl = $(document.querySelector('#post-container li[data-pid="' + pid + '"]')),
 			editEl = postEl.find('.edit'),
 			deleteEl = postEl.find('.delete');
-		
+
 		if (state) {
 			editEl.removeClass('none');
 			deleteEl.removeClass('none');
@@ -591,4 +641,76 @@
 			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;
+})();

public/src/forum/unread.js

@@ -8,32 +8,33 @@
 		'event:new_post'
 	]);
 
-	var newTopicCount = 0, newPostCount = 0;
+	var newTopicCount = 0,
+		newPostCount = 0;
 
 	$('#new-topics-alert').on('click', function() {
 		$(this).hide();
 	});
 
 	socket.on('event:new_topic', function(data) {
-		
+
 		++newTopicCount;
 		updateAlertText();
-	
+
 	});
-	
+
 	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.';
@@ -42,20 +43,24 @@
 
 		$('#new-topics-alert').html(text).fadeIn('slow');
 	}
-	
+
 	socket.on('event:new_post', function(data) {
 		++newPostCount;
 		updateAlertText();
 	});
-	
+
 	$('#mark-allread-btn').on('click', function() {
 		var btn = $(this);
-		socket.emit('api:topics.markAllRead', {} , function(success) {
-			if(success) {
+		socket.emit('api:topics.markAllRead', {}, function(success) {
+			if (success) {
 				btn.remove();
 				$('#topics-container').empty();
-				$('#category-no-topics').removeClass('hidden');			
+				$('#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,7 +69,9 @@
 
 	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();
@@ -74,25 +81,30 @@
 
 	function loadMoreTopics() {
 		loadingMoreTopics = true;
-		socket.emit('api:topics.loadMoreUnreadTopics', {after:parseInt($('#topics-container').attr('data-next-start'), 10)}, function(data) {
-			if(data.topics && data.topics.length) {
+		socket.emit('api:topics.loadMoreUnreadTopics', {
+			after: parseInt($('#topics-container').attr('data-next-start'), 10)
+		}, function(data) {
+			if (data.topics && data.topics.length) {
 				onTopicsLoaded(data.topics);
 				$('#topics-container').attr('data-next-start', data.nextStart);
+			} else {
+				$('#load-more-btn').hide();
 			}
+
 			loadingMoreTopics = false;
 		});
 	}
 
 	$(window).off('scroll').on('scroll', function() {
-		var bottom = (document.body.offsetHeight - $(window).height()) * 0.9;
-		
-		if (document.body.scrollTop > bottom && !loadingMoreTopics) {
+		var bottom = ($(document).height() - $(window).height()) * 0.9;
+
+		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() {

public/src/forum/users.js

@@ -1,12 +1,16 @@
 (function() {
-	
+
 	$(document).ready(function() {
 		var timeoutId = 0;
 		var loadingMoreUsers = false;
-		
+
 		var url = window.location.href,
 			parts = url.split('/'),
-			active = parts[parts.length-1];
+			active = parts[parts.length - 1];
+
+		var lastSearch = null;
+
+		app.addCommasToNumbers();
 
 		jQuery('.nav-pills li').removeClass('active');
 		jQuery('.nav-pills li a').each(function() {
@@ -15,103 +19,115 @@
 				return false;
 			}
 		});
-		
-		jQuery('#search-user').on('keyup', function () {
-			if(timeoutId !== 0) {
+
+		jQuery('#search-user').on('keyup', function() {
+			if (timeoutId !== 0) {
 				clearTimeout(timeoutId);
 				timeoutId = 0;
 			}
 
 			timeoutId = setTimeout(function() {
 				var username = $('#search-user').val();
-				
-				jQuery('.icon-spinner').removeClass('none');
-				socket.emit('api:admin.user.search', username);
+
+				if (username == '') {
+					jQuery('#user-notfound-notify').html('<i class="icon icon-circle-blank"></i>');
+					jQuery('#user-notfound-notify').parent().removeClass('btn-warning label-warning btn-success label-success');
+					return;
+				}
+
+				if (lastSearch === username) return;
+				lastSearch = username;
+
+				jQuery('#user-notfound-notify').html('<i class="icon-spinner icon-spin"></i>');
+
+				setTimeout(function() {
+					socket.emit('api:admin.user.search', username);
+				}, 500); //replace this with global throttling function/constant
+
 			}, 250);
 		});
-		
+
 		socket.removeAllListeners('api:admin.user.search');
-		
+
 		socket.on('api:admin.user.search', function(data) {
-			
-			jQuery('.icon-spinner').addClass('none');				
-			
-			if(data === null) {
-				$('#user-notfound-notify').html('You need to be logged in to search!')
-					.show()
-					.addClass('label-important')
-					.removeClass('label-success');
+			if (data === null) {
+				$('#user-notfound-notify').html('You need to be logged in to search!');
+				$('#user-notfound-notify').parent().addClass('btn-warning label-warning');
 				return;
 			}
-			
+
 			var html = templates.prepare(templates['users'].blocks['users']).parse({
-					users: data
-				}),
-				userListEl = document.querySelector('.users');
+				users: data
+			}),
+				userListEl = document.querySelector('#users-container');
 
 			userListEl.innerHTML = html;
 
 
-			if(data && data.length === 0) {
-				$('#user-notfound-notify').html('User not found!')
-					.show()
-					.addClass('label-important')
-					.removeClass('label-success');
-			}
-			else {
-				$('#user-notfound-notify').html(data.length + ' user'+(data.length>1?'s':'') + ' found!')
-					.show()
-					.addClass('label-success')
-					.removeClass('label-important');
+			if (data && data.length === 0) {
+				$('#user-notfound-notify').html('User not found!');
+				$('#user-notfound-notify').parent().addClass('btn-warning label-warning');
+			} else {
+				$('#user-notfound-notify').html(data.length + ' user' + (data.length > 1 ? 's' : '') + ' found!');
+				$('#user-notfound-notify').parent().addClass('btn-success label-success');
 			}
 
 		});
-		
-		$('.reputation').each(function(index, element) {
-			$(element).html(app.addCommas($(element).html()));
+
+		socket.on('api:user.isOnline', function(data) {
+			if(active == 'online' && !loadingMoreUsers) {
+				$('#users-container').empty();
+				startLoading('users:online', 0);
+			}
 		});
-		
-		$('.postcount').each(function(index, element) {
-			$(element).html(app.addCommas($(element).html()));
-		});
-		
+
 		function onUsersLoaded(users) {
-			var html = templates.prepare(templates['users'].blocks['users']).parse({ users: users });
+			var html = templates.prepare(templates['users'].blocks['users']).parse({
+				users: users
+			});
 			$('#users-container').append(html);
 		}
-		
+
 		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') {
-				set = 'users:reputation';	
+			} else if (active === 'sort-reputation') {
+				set = 'users:reputation';
+			} else if (active === 'online') {
+				set = 'users:online';
 			}
 
-			if(set) {
-				loadingMoreUsers = true;
-				socket.emit('api:users.loadMore', {
-					set: set, 
-					after: $('#users-container').children().length 
-				}, function(data) {
-					if(data.users.length) {
-						onUsersLoaded(data.users);
-					} else {
-						$('#load-more-users-btn').addClass('disabled');
-					}
-					loadingMoreUsers = false;
-				});
+			if (set) {
+				startLoading(set, $('#users-container').children().length);
 			}
 		}
-		
-		$('#load-more-users-btn').on('click', loadMoreUsers);
-		
-		$(window).off('scroll').on('scroll', function() {
-			var bottom = (document.body.offsetHeight - $(window).height()) * 0.9;
 
-			if (document.body.scrollTop > bottom && !loadingMoreUsers) {
+		function startLoading(set, after) {
+			loadingMoreUsers = true;
+			socket.emit('api:users.loadMore', {
+				set: set,
+				after: after
+			}, function(data) {
+				if (data.users.length) {
+					onUsersLoaded(data.users);
+					$('#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).height() - $(window).height()) * 0.9;
+
+			if ($(window).scrollTop() > bottom && !loadingMoreUsers) {
 				loadMoreUsers();
 			}
 		});

public/src/modules/chat.js

@@ -1,8 +1,7 @@
 define(['taskbar'], function(taskbar) {
-	
+
 	var module = {};
 
-	
 	module.bringModalToTop = function(chatModal) {
 		var topZ = 0;
 		$('.modal').each(function() {
@@ -11,38 +10,78 @@ define(['taskbar'], function(taskbar) {
 			topZ = thisZ;
 		  }
 		});
-		chatModal.css('zIndex', topZ+1);
+		chatModal.css('zIndex', topZ + 1);
 	}
 
-	module.createModalIfDoesntExist = function(username, touid) {
-		var chatModal = $('#chat-modal-'+touid);
+	module.getModal = function(touid) {
+		return $('#chat-modal-' + touid);
+	}
 
-		if(!chatModal.length) {
-			var chatModal = $('#chat-modal').clone();
-			chatModal.attr('id','chat-modal-'+touid);
-			var uuid = utils.generateUUID();
-			chatModal.attr('UUID', uuid);
-			chatModal.appendTo($('body'));
-			chatModal.draggable({
-				start:function(){
-					module.bringModalToTop(chatModal);
+	module.modalExists = function(touid) {
+		return $('#chat-modal-' + touid).length !== 0;
+	}
+	
+	function checkStatus(chatModal, callback) {
+		socket.emit('api:user.isOnline', chatModal.touid, function(data) {
+			if(data.online !== chatModal.online) {
+				if(data.online) {
+					module.appendChatMessage(chatModal, chatModal.username + ' is currently online.\n', data.timestamp);
+				} else {
+					module.appendChatMessage(chatModal, chatModal.username + ' is currently offline.\n', data.timestamp);
 				}
-			});
-			chatModal.find('#chat-with-name').html(username);
-
-			chatModal.find('.close').on('click',function(e){
-				chatModal.hide();
-				taskbar.discard('chat', uuid);
-			});
-
-			chatModal.on('click', function(e) {
-				module.bringModalToTop(chatModal);
-			});
-
-			addSendHandler(chatModal, touid);	
+				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;
 
-		taskbar.push('chat', chatModal.attr('UUID'), {title:'chat with '+username});
+		chatModal.attr('id', 'chat-modal-' + touid);
+		chatModal.attr('UUID', uuid);
+		chatModal.appendTo($('body'));
+		chatModal.draggable({
+			start:function() {
+				module.bringModalToTop(chatModal);
+			}
+		});
+		
+		chatModal.find('#chat-with-name').html(username);
+
+		chatModal.find('.close').on('click', function(e) {
+			clearInterval(chatModal.intervalId);
+			chatModal.intervalId = 0;
+			chatModal.hide();
+			taskbar.discard('chat', uuid);
+		});
+
+		chatModal.on('click', function(e) {
+			module.bringModalToTop(chatModal);
+		});
+		
+		addSendHandler(chatModal);
+
+		getChatMessages(chatModal, function() {
+			checkOnlineStatus(chatModal);
+		});
+
+		taskbar.push('chat', chatModal.attr('UUID'), {title:'chat with ' + username});
 		return chatModal;
 	}
 
@@ -50,43 +89,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){
+	module.appendChatMessage = function(chatModal, message, timestamp) {
 		var chatContent = chatModal.find('#chat-content');
-		chatContent.append(message);
+
+		var date = new Date(parseInt(timestamp, 10));
+
+		chatContent.append('[' + date.toLocaleTimeString() + '] ' + message);
 		chatContent.scrollTop(
 			chatContent[0].scrollHeight - chatContent.height()
 		);

public/src/modules/composer.js

@@ -1,21 +1,42 @@
 define(['taskbar'], function(taskbar) {
 	var composer = {
-			initialized: false,
-			active: undefined,
-			taskbar: taskbar,
-			posts: {},
-			postContainer: undefined,
-		};
+		initialized: false,
+		active: undefined,
+		taskbar: taskbar,
+		posts: {},
+		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 dropDiv = $('#imagedrop');
-		var imagelist = $('#imagelist');
-		var uuid = dropDiv.parents('[data-uuid]').attr('data-uuid');
-		var posts = composer.posts[uuid];
-		
+		var reader = new FileReader(),
+			dropDiv = $('.post-window .imagedrop'),
+			uuid = dropDiv.parents('[data-uuid]').attr('data-uuid');
+
 		$(reader).on('loadend', function(e) {
-			var bin = this.result; 
+			var bin = this.result;
 			bin = bin.split(',')[1];
 
 			var img = {
@@ -23,60 +44,63 @@ 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();
 		});
-	
+
 		reader.readAsDataURL(file);
 	}
 
 	function initializeFileReader() {
 		jQuery.event.props.push( "dataTransfer" );
-		
-		if(window.FileReader) {
-			var drop = $('#imagedrop');
 
-			$(composer.postContainer).on('dragenter dragover', function() {
-				drop.show();	
+		var draggingDocument = false;
+
+		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) {
 				e.preventDefault();
 				return false;
 			}
-			
+
 			drop.on('dragover', cancel);
 			drop.on('dragenter', cancel);
-			
+
 			drop.on('drop', function(e) {
 				e.preventDefault();
-				var uuid = drop.parents('[data-uuid]').attr('data-uuid');
-				var posts = composer.posts[uuid];			
-				
-				var dt = e.dataTransfer;
-				var files = dt.files;
-				
+				var uuid = drop.parents('[data-uuid]').attr('data-uuid'),
+					dt = e.dataTransfer,
+					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.innerHTML =	'<div class="span5">' +
+			composer.postContainer.className = 'post-window row';
+			composer.postContainer.innerHTML =	'<div class="col-md-5">' +
 													'<input type="text" tabIndex="1" placeholder="Enter your topic title here..." />' +
-													'<div class="btn-toolbar">' +
-														'<div class="btn-group formatting-bar">' +
+													'<div class="btn-toolbar 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>'+
-													'<div class="btn-toolbar">' +
-														'<div class="btn-group action-bar" style="float: right; margin-right: -8px">' +
-															'<button data-action="minimize" class="btn hidden-phone" tabIndex="4"><i class="icon-download-alt"></i> Minimize</button>' +
+													'<textarea tabIndex="2"></textarea>' +
+													'<div class="imagedrop"><div>Drag and Drop Images Here</div></div>'+
+													'<div class="btn-toolbar action-bar">' +
+														'<div class="btn-group" style="float: right; margin-right: -8px">' +
+															'<button data-action="minimize" class="btn hidden-xs" tabIndex="4"><i class="icon-download-alt"></i> Minimize</button>' +
 															'<button class="btn" data-action="discard" tabIndex="5"><i class="icon-remove"></i> Discard</button>' +
 															'<button data-action="post" class="btn" tabIndex="3"><i class="icon-ok"></i> Submit</button>' +
 														'</div>' +
@@ -112,7 +133,8 @@ define(['taskbar'], function(taskbar) {
 
 			document.body.insertBefore(composer.postContainer, taskbar);
 
-			initializeFileReader();
+			if(config.imgurClientIDSet)
+				initializeFileReader();
 
 			socket.on('api:composer.push', function(threadData) {
 				if (!threadData.error) {
@@ -128,13 +150,12 @@ define(['taskbar'], function(taskbar) {
 						cid: threadData.cid,
 						pid: threadData.pid,
 						title: threadData.title || '',
-						body: threadData.body || '',
-						images: []
+						body: threadData.body || ''
 					};
 					composer.load(uuid);
 				} else {
 					app.alert({
-						type: 'error',
+						type: 'danger',
 						timeout: 5000,
 						alert_id: 'post_error',
 						title: 'Please Log In to Post',
@@ -152,21 +173,32 @@ 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;
 			});
+
 			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 (postContentEl.value.length > 0) {
+							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,16 +274,11 @@ 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'),
-			dropDiv = $(composer.postContainer).find('#imagedrop'),
-			imagelist = $(composer.postContainer).find('#imagelist');
-
-		dropDiv.hide();
-		imagelist.empty();
+			bodyEl = composer.postContainer.querySelector('textarea');
 
 		composer.reposition(post_uuid);
 		composer.active = post_uuid;
-		
+
 		composer.postContainer.setAttribute('data-uuid', post_uuid);
 		if (parseInt(post_data.tid) > 0) {
 			titleEl.value = 'Replying to: ' + post_data.title;
@@ -264,7 +291,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 +305,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(),
@@ -292,16 +320,26 @@ define(['taskbar'], function(taskbar) {
 
 	composer.post = function(post_uuid) {
 		// Check title and post length
-		var	postData = composer.posts[post_uuid],
+		var postData = composer.posts[post_uuid],
 			titleEl = composer.postContainer.querySelector('input'),
 			bodyEl = composer.postContainer.querySelector('textarea');
-		
+
 		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 +349,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 +362,18 @@ define(['taskbar'], function(taskbar) {
 			socket.emit('api:topics.post', {
 				'title' : titleEl.value,
 				'content' : bodyEl.value,
-				'category_id' : postData.cid,
-				images: composer.posts[post_uuid].images
+				'category_id' : postData.cid
 			});
 		} else if (parseInt(postData.tid) > 0) {
 			socket.emit('api:posts.reply', {
 				'topic_id' : postData.tid,
-				'content' : bodyEl.value,
-				images: composer.posts[post_uuid].images
+				'content' : bodyEl.value
 			});
 		} else if (parseInt(postData.pid) > 0) {
 			socket.emit('api:posts.edit', {
 				pid: postData.pid,
 				content: bodyEl.value,
-				title: titleEl.value,
-				images: composer.posts[post_uuid].images
+				title: titleEl.value
 			});
 		}
 
@@ -347,7 +382,7 @@ 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];
 			composer.minimize();
 			taskbar.discard('composer', post_uuid);

public/src/modules/mobileMenu.js

@@ -99,10 +99,11 @@ 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');
-		
+
 		menuBtn.onclick = function() {
 			animateIcons();
 		}
@@ -111,7 +112,7 @@ define(function() {
 			displayCategories();
 			mobileMenu.onNavigate();
 		});
-		
+
 	}
 
 	return {

public/src/modules/taskbar.js

@@ -5,15 +5,15 @@ define(function() {
 		tasklist: undefined,
 		init: function() {
 			var	footerEl = document.getElementById('footer');
-		
+
 			taskbar.taskbar = document.createElement('div');
 			var jTaskbar = $(taskbar.taskbar);
-			taskbar.taskbar.innerHTML = '<div class="navbar-inner"><ul class="nav pull-right"></ul></div>';
-			taskbar.taskbar.className = 'taskbar navbar navbar-fixed-bottom';
+			taskbar.taskbar.innerHTML = '<div class="navbar-inner"><ul class="nav navbar-nav pull-right"></ul></div>';
+			taskbar.taskbar.className = 'taskbar navbar navbar-default navbar-fixed-bottom';
 			taskbar.taskbar.id = 'taskbar';
 
 			taskbar.tasklist = taskbar.taskbar.querySelector('ul');
-			document.body.insertBefore(taskbar.taskbar, footerEl);
+			document.body.insertBefore(taskbar.taskbar, footerEl.nextSibling);
 
 			// Posts bar events
 			jTaskbar.on('click', 'li', function() {
@@ -60,7 +60,7 @@ define(function() {
 			var element = $(taskbar.tasklist).find('li[data-uuid="'+uuid+'"]');
 			if(element.length)
 				return;
-			
+
 			var	btnEl = document.createElement('li');
 
 			btnEl.innerHTML =	'<a href="#">' +

public/src/templates.js

@@ -1,7 +1,5 @@
-
-
 (function (module) {
-	
+
 	var config = {},
 		templates,
 		fs = null,
@@ -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,13 +48,13 @@
 		}
 	};
 
-	templates.prepare = function(raw_tpl, data) {
+	templates.prepare = function (raw_tpl, data) {
 		var template = {};
 		template.html = raw_tpl;
 		template.parse = parse;
 		template.blocks = {};
 
-		return template; 		
+		return template;
 	};
 
 	function loadTemplates(templatesToLoad) {
@@ -64,10 +62,10 @@
 			var loaded = templatesToLoad.length;
 
 			for (var t in templatesToLoad) {
-				(function(file) {
-					fs.readFile(global.configuration.ROOT_DIRECTORY + '/public/templates/' + file + '.tpl', function(err, html) {
-						var template = function() {
-							this.toString = function() {
+				(function (file) {
+					fs.readFile(__dirname + '/../templates/' + file + '.tpl', function (err, html) {
+						var template = function () {
+							this.toString = function () {
 								return this.html;
 							};
 						}
@@ -75,7 +73,7 @@
 						template.prototype.file = file;
 						template.prototype.parse = parse;
 						template.prototype.html = String(html);
-						
+
 						global.templates[file] = new template;
 
 						loaded--;
@@ -86,147 +84,133 @@
 		}
 
 		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();
 			});
 		}
-		
+
 		if (fs === null) loadClient();
 		else loadServer();
 	}
 
 
-	templates.init = function(templates_to_load) {
+	templates.init = function (templates_to_load) {
 		loadTemplates(templates_to_load || []);
 	}
 
-	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];
 			}
 		}
 		return '';
 	}
-	
 
-	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;
-
-		var tpl_url = templates.get_custom_map(api_url.split('?')[0]);
-
-		var trimmed = api_url;
-		
-		if(!tpl_url) {
+		if (!tpl_url) {
 			tpl_url = templates.getTemplateNameFromUrl(api_url);
 		}
-		
+
 		var template_data = null;
 
+		var timestamp = new Date().getTime(); //debug
 
-		(function() {
-			var timestamp = new Date().getTime(); //debug
-
-			if (!templates[tpl_url]) {
-				jQuery.get(RELATIVE_PATH + '/templates/' + tpl_url + '.tpl?v=' + timestamp, function(html) {
-					var template = function() {
-						this.toString = function() {
-							return this.html;
-						};
-					}
-
-					template.prototype.parse = parse;
-					template.prototype.html = String(html);
-					template.prototype.blocks = {};
-
-					templates[tpl_url] = new template;
-					
-					parse_template();
-				});
-			} else {
-				parse_template();
-			}
-			
-		}());
-			
-		(function() {
-
-			jQuery.get(API_URL + api_url, function(data) {
-
-				if(!data) {
-					ajaxify.go('404');
-					return;
+		if (!templates[tpl_url]) {
+			jQuery.get(RELATIVE_PATH + '/templates/' + tpl_url + '.tpl?v=' + timestamp, function (html) {
+				var template = function () {
+					this.toString = function () {
+						return this.html;
+					};
 				}
 
-				template_data = data;
-				parse_template();
-			}).fail(function(data) {
-				template_data = {};
+				template.prototype.parse = parse;
+				template.prototype.html = String(html);
+				template.prototype.blocks = {};
+
+				templates[tpl_url] = new template;
+
 				parse_template();
 			});
-		}());
-		
+		} else {
+			parse_template();
+		}
+
+		jQuery.get(RELATIVE_PATH + '/api/' + api_url, function (data) {
+
+			if (!data) {
+				ajaxify.go('404');
+				return;
+			}
+
+			template_data = data;
+			parse_template();
+		}).fail(function (data) {
+			app.alertError("Can't load template data!");
+		});
 
 		function parse_template() {
 			if (!templates[tpl_url] || !template_data) return;
-			
-			if(typeof global !== "undefined")
-				template_data['relative_path'] = global.nconf.get('relative_path');
-			else 
-				template_data['relative_path'] = RELATIVE_PATH;
-			
-			document.getElementById('content').innerHTML = templates[tpl_url].parse(template_data);
-			
-			jQuery('#content [template-variable]').each(function(index, element) {
-				var value = null;
 
-				switch(element.getAttribute('template-type')) {
+			if (typeof global !== "undefined")
+				template_data['relative_path'] = nconf.get('relative_path');
+			else
+				template_data['relative_path'] = RELATIVE_PATH;
+
+			translator.translate(templates[tpl_url].parse(template_data), function (translatedTemplate) {
+				document.getElementById('content').innerHTML = translatedTemplate;
+
+				jQuery('#content [template-variable]').each(function (index, element) {
+					var value = null;
+
+					switch (element.getAttribute('template-type')) {
 					case 'boolean':
 						value = (element.value === 'true' || element.value === '1') ? true : false;
-					break;
-					case 'int':	// Intentional fall-through
+						break;
+					case 'int': // Intentional fall-through
 					case 'integer':
 						value = parseInt(element.value);
-					break;
+						break;
 					default:
 						value = element.value;
-					break;
+						break;
+					}
+
+					templates.set(element.getAttribute('template-variable'), value);
+				});
+
+				if (callback) {
+					callback(true);
 				}
-
-				templates.set(element.getAttribute('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,11 +219,11 @@
 		}
 
 		function makeRegex(block) {
-			return new RegExp("<!-- BEGIN " + block + " -->[^]*<!-- END " + block + " -->", 'g');
+			return new RegExp("<!-- BEGIN " + block + " -->[\\s\\S]*<!-- END " + block + " -->", 'g');
 		}
 
 		function getBlock(regex, block, template) {
-			data = template.match(regex);			
+			data = template.match(regex);
 			if (data == null) return;
 
 			if (self.blocks && block !== undefined) self.blocks[block] = data[0];
@@ -255,7 +239,8 @@
 			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) {
@@ -268,16 +253,18 @@
 						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);
@@ -287,7 +274,7 @@
 						template = setBlock(regex, result, template);
 					} else if (data[d] instanceof Object) {
 						namespace += d + '.';
-						
+
 						regex = makeRegex(d),
 						block = getBlock(regex, namespace, template)
 						if (block == null) continue;
@@ -301,12 +288,12 @@
 			}
 
 			if (namespace) {
-				var regex = new RegExp("{" + namespace + "[^]*?}", 'g');
+				var regex = new RegExp("{" + namespace + "[\\s\\S]*?}", 'g');
 				template = template.replace(regex, '');
 			}
 
 			return template;
-			
+
 		})(data, "", template);
 	}
 
@@ -315,7 +302,8 @@
 		templates.init();
 	}
 
-})('undefined' === typeof module ? {module:{exports:{}}} : module)
-
-
-
+})('undefined' === typeof module ? {
+	module: {
+		exports: {}
+	}
+} : module)

public/src/translator.js

@@ -0,0 +1,165 @@
+(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];
+		});
+	};
+
+	/*
+	 * 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(':'),
+					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) {
+						translator.load(languageFile, function (languageData) {
+							data = insertLanguage(data, languageKey, languageData[parsedKey], variables);
+							loading--;
+							checkComplete();
+						});
+					}(keys[key], parsedKey));
+
+				}
+			}
+		}
+
+		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,5 +1,5 @@
-(function (module) {
-	
+(function(module) {
+
 	var utils, fs;
 
 	try {
@@ -10,15 +10,18 @@
 	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);
 				var pending = list.length;
@@ -32,22 +35,22 @@
 								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);
 						}
 					});
 				});
 			});
 		},
-		
+
 		relativeTime: function(timestamp, min) {
-			var	now = +new Date(),
+			var now = +new Date(),
 				difference = now - Math.floor(parseFloat(timestamp));
 
 			difference = Math.floor(difference / 1000);
-			
+
 			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' : '');
 
@@ -63,7 +66,7 @@
 			difference = Math.floor(difference / 12);
 			return difference + (min ? 'y' : ' year') + (difference !== 1 && !min ? 's' : '');
 		},
-		
+
 		//http://dense13.com/blog/2009/05/03/converting-string-to-slug-javascript/
 		slugify: function(str) {
 			str = str.replace(/^\s+|\s+$/g, ''); // trim
@@ -71,14 +74,14 @@
 
 			// remove accents, swap ñ for n, etc
 			var from = "àáäâèéëêìíïîıòóöôùúüûñçşğ·/_,:;";
-			var to   = "aaaaeeeeiiiiioooouuuuncsg------";
-			for (var i=0, l=from.length ; i<l ; i++) {
+			var to = "aaaaeeeeiiiiioooouuuuncsg------";
+			for (var i = 0, l = from.length; i < l; i++) {
 				str = str.replace(new RegExp(from.charAt(i), 'g'), to.charAt(i));
 			}
 
 			str = str.replace(/[^a-z0-9 -]/g, '') // remove invalid chars
-					.replace(/\s+/g, '-') // collapse whitespace and replace by -
-					.replace(/-+/g, '-'); // collapse dashes
+			.replace(/\s+/g, '-') // collapse whitespace and replace by -
+			.replace(/-+/g, '-'); // collapse dashes
 
 			return str;
 		},
@@ -91,31 +94,31 @@
 		},
 
 		isUserNameValid: function(name) {
-			return (name && name !== "" && (/^[a-zA-Z0-9 _-]{3,14}$/.test(name)));
+			return (name && name !== "" && (/^[a-zA-Z0-9 _-]+$/.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/
 		'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,
+			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 : '';
 			});
 		},
 
 		buildMetaTags: function(tagsArr) {
-			var	tags = '',
+			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";
 				tag = '<meta';
-				for(y in tagsArr[x]) {
+				for (y in tagsArr[x]) {
 					tag += ' ' + y + '="' + tagsArr[x][y] + '"';
 				}
 				tag += ' />';
@@ -126,36 +129,74 @@
 			return tags;
 		},
 
-		refreshTitle: function() {
-			var	a = document.createElement('a');
+		refreshTitle: function(url) {
+			if (!url) {
+				var a = document.createElement('a');
+				a.href = document.location;
+				url = a.pathname.slice(1);
+			}
+			var notificationIcon;
 
-			a.href = document.location;
-			socket.emit('api:meta.buildTitle', a.pathname.slice(1), function(title) {
-				document.title = title;
+			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 === '/');
 		}
 	}
 
 
 	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,' ');};			
+		String.prototype.ltrim = function() {
+			return this.replace(/^\s+/, '');
+		};
 	}
 
-	
+	if (!String.prototype.rtrim) {
+		String.prototype.rtrim = function() {
+			return this.replace(/\s+$/, '');
+		};
+	}
+
+	if (!String.prototype.fulltrim) {
+		String.prototype.fulltrim = function() {
+			return this.replace(/(?:(?:^|\n)\s+|\s+(?:$|\n))/g, '').replace(/\s+/g, ' ');
+		};
+	}
+
+
 	if ('undefined' !== typeof window) {
 		window.utils = module.exports;
 	}
 
-})('undefined' === typeof module ? {module:{exports:{}}} : module)
+})('undefined' === typeof module ? {
+	module: {
+		exports: {}
+	}
+} : module)

public/templates/403.tpl

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

public/templates/404.tpl

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

public/templates/account.tpl

@@ -1,79 +1,76 @@
 
-<div class="well">
-   
+<div class="well account">
 
-
-	<div class="account-username-box">
+	<div class="account-username-box" data-userslug="{userslug}">
 		<span class="account-username">
-			<a href="/users/{userslug}">{username}</a>
+			<a href="/user/{userslug}">{username}</a>
 		</span>
-		<div 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="span2" style="text-align: center; margin-bottom:20px;">
+	<div class="row">
+		<div class="col-md-2 account-block" style="text-align: center; margin-bottom:20px;">
 			<div class="account-picture-block">
-				<img src="{picture}" class="user-profile-picture img-polaroid"/>
+				<img src="{picture}" class="user-profile-picture img-thumbnail"/>
 			</div>
 			<div class="account-online-status">
 				<span><i class="icon-circle-blank"></i> <span>offline</span></span>
 			</div>
+			<div class="{show_banned}">
+				<span class="label label-danger">banned</span>
+			</div>
 			<div id="user-actions">
-				<a id="follow-btn" href="#" class="btn hide">Follow</a>
-				<a id="unfollow-btn" href="#" class="btn hide">Unfollow</a>
+				<a id="follow-btn" href="#" class="btn btn-default">Follow</a>
+				<a id="unfollow-btn" href="#" class="btn btn-default">Unfollow</a>
 			</div>
 		</div>
-	
-		<div class="span4">
-			<h4>profile</h4>
+
+		<div class="col-md-4">
 			<div class="inline-block">
 				<div class="account-bio-block">
 					<span class="account-bio-label">email</span><i class="icon-eye-close {emailClass}" title="Email hidden"></i>
 					<span>{email}</span>
 					<br/>
-					
+
 					<span class="account-bio-label">full name</span>
 					<span>{fullname}</span>
 					<br/>
-					
+
 					<span class="account-bio-label">website</span>
 					<span><a href="{website}">{website}</a></span>
 					<br/>
-					
+
 					<span class="account-bio-label">location</span>
 					<span>{location}</span>
 					<br/>
-					
+
 					<span class="account-bio-label">age</span>
 					<span>{age}</span>
 					<br/>
 					<hr/>
-					<span class="account-bio-label">member for</span>
-					<span>{joindate}</span>
+					<span class="account-bio-label">joined</span>
+					<span class="timeago" title="{joindate}"></span>
+					<br/>
+
+					<span class="account-bio-label">profile views</span>
+					<span class="formatted-number">{profileviews}</span>
 					<br/>
 
 					<span class="account-bio-label">reputation</span>
-					<span id='reputation'>{reputation}</span>
-					<br/>		
-					
+					<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/>
 					<span class="account-bio-label">signature</span>
 					<div class="post-signature">
@@ -82,14 +79,13 @@
 				</div>
 			</div>
 		</div>
-		
-		<div class="span6 user-recent-posts">
-			<h4>recent posts </h4>
+
+		<div class="col-md-6 user-recent-posts">
 			<!-- BEGIN posts -->
-			<div class="topic-row img-polaroid clearfix" topic-url="topic/{posts.tid}/#{posts.pid}">
+			<div class="topic-row img-thumbnail clearfix" topic-url="topic/{posts.tid}/#{posts.pid}">
 				<span>{posts.content}</span>
-				<span class="pull-right">{posts.relativeTime} ago</span>
-			</div>	
+				<span class="pull-right timeago" title="{posts.relativeTime}"></span>
+			</div>
 			<!-- END posts -->
 		</div>
 	</div>

public/templates/accountedit.tpl

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

public/templates/accountsettings.tpl

@@ -1,34 +1,31 @@
 
 <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="/users/{userslug}/settings">settings</a>
+			<a href="/user/{userslug}">{username}</a> <i class="icon-chevron-right"></i>
+			<a href="/user/{userslug}/settings">settings</a>
 		</span>
-		<div 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="span6">
+	<div class="row">
+		<div class="col-md-6">
 			<h4>privacy</h4>
-			<label class="checkbox">
-      			<input id="showemailCheckBox" type="checkbox" {showemail}> Show my email
-    		</label>
+			<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>  
+	</div>
 	<div class="form-actions">
 		<a id="submitBtn" href="#" class="btn btn-primary">Save changes</a>
 	</div>
 </div>
 
+<script type="text/javascript" src="{relative_path}/src/forum/accountheader.js"></script>
 <script type="text/javascript" src="{relative_path}/src/forum/accountsettings.js"></script>

public/templates/admin/facebook.tpl

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

public/templates/admin/footer.tpl

@@ -1,6 +1,9 @@
 
 		</div>
 	</div>
+
+	<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>

public/templates/admin/gplus.tpl

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

public/templates/admin/groups.tpl

@@ -0,0 +1,100 @@
+<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>
+
+<script type="text/javascript" src="{relative_path}/src/forum/admin/groups.js"></script>

public/templates/admin/header.tpl

@@ -16,9 +16,12 @@
 	<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/requirejs/require.js"></script>
 	<script src="{relative_path}/vendor/bootbox/bootbox.min.js"></script>
+
 	<script>
 		require.config({
 			baseUrl: "{relative_path}/src/modules",
@@ -27,51 +30,55 @@
 	</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/nodebb.css" />
 	<link rel="stylesheet" type="text/css" href="{relative_path}/css/admin.css" />
 </head>
 
 <body class="admin">
 	<div class="navbar navbar-inverse navbar-fixed-top">
-		<div class="navbar-inner">
-			<div class="container-fluid">
-				<a class="brand" href="/admin/index">NodeBB ACP</a>
-				<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
+		<div class="container">
+			<div class="navbar-header">
+				<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
 					<span class="icon-bar"></span>
 					<span class="icon-bar"></span>
 					<span class="icon-bar"></span>
 				</button>
-				<div class="nav-collapse collapse">
-					<ul class="nav">
-						<li>
-						  <a href="/" target="_blank"><i class="icon-book"></i> Forum</a>
-						</li>
-						<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>
-					</ul>
-					<ul class="nav pull-right" id="right-menu">
-						<li><a href="/users" id="user_label"></a></li>
-					</ul>
-				</div>
+				<a class="navbar-brand" href="/admin/index">NodeBB ACP</a>
+			</div>
+			<div class="collapse navbar-collapse">
+				<ul class="nav navbar-nav">
+					<li>
+					  <a href="/" target="_blank"><i class="icon-book"></i> Forum</a>
+					</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="#" id="reconnect"></a>
+					</li>
+				</ul>
+				<ul class="nav pull-right" id="right-menu">
+					<li><a href="/users" id="user_label"></a></li>
+				</ul>
 			</div>
 		</div>
 	</div>
 
-	<div id="alert_window"></div>
-	
-	<div class="container-fluid">
-		<div class="row-fluid">
-			<div class="span3">
+	<div class="container">
+		<div class="row">
+			<div class="col-md-3">
 				<div class="well sidebar-nav">
 					<ul class="nav nav-list">
 						<li class="nav-header">NodeBB</li>
 						<li class='active'><a href='{relative_path}/admin/index'><i class='icon-home'></i> Home</a></li>
 						<li class=''><a href='{relative_path}/admin/categories/active'><i class='icon-folder-close-alt'></i> Categories</a></li>
 						<li class=''><a href='{relative_path}/admin/users/latest'><i class='icon-user'></i> Users</a></li>
+						<li class=""><a href="{relative_path}/admin/groups"><i class="icon-group"></i> Groups</a></li>
 						<li class=''><a href='{relative_path}/admin/topics'><i class='icon-book'></i> Topics</a></li>
 						<li class=''><a href='{relative_path}/admin/themes'><i class='icon-th'></i> Themes</a></li>
 						<li class=''><a href='{relative_path}/admin/plugins'><i class='icon-code-fork'></i> Plugins</a></li>
@@ -100,4 +107,4 @@
 					</ul>
 				</div><!--/.well -->
 			</div><!--/span-->
-			<div class="span9" id="content">
+			<div class="col-md-9" id="content">

public/templates/admin/index.tpl

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

public/templates/admin/motd.tpl

@@ -1,7 +1,7 @@
 
 <h1>MOTD</h1>
-
-<div class="alert motd">
+<hr />
+<div class="alert alert-warning motd">
 	<p>
 		The <strong>Message of the Day</strong> (MOTD) is typically a message shown to users when they first log into a forum or chat room.
 		In NodeBB, the MOTD is present at the top of the forum homepage, and can be customized much like a header.
@@ -9,14 +9,25 @@
 	<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();
+	var	loadDelay = setInterval(function() {
+		if (nodebb_admin) {
+			nodebb_admin.prepare();
+			clearInterval(loadDelay);
+		}
+	}, 500);
 </script>

public/templates/admin/plugins.tpl

@@ -13,9 +13,9 @@
 	<!-- 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>.

public/templates/admin/settings.tpl

@@ -2,64 +2,85 @@
 <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>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>Moderate Users</strong><br /> <input type="text" class="" value="10000"><br />
-		<strong>Create Pinned Topics</strong><br /> <input type="text" class="" value="100000"><br />
-		
+		<strong>Manage Thread</strong><br /> <input type="text" class="form-control" value="1000"><br />
+		<strong>Moderate Users</strong><br /> <input type="text" class="form-control" value="10000"><br />
+		<strong>Create Pinned Topics</strong><br /> <input type="text" class="form-control" 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>
-	<div class="alert alert-notify">
-		<strong>Post Delay</strong><br /> <input type="text" class="" value="10000" data-field="postDelay"><br />
-		<strong>Minimum Title Length</strong><br /> <input type="text" class="" value="3" data-field="minimumTitleLength"><br />
-		<strong>Minimum Post Length</strong><br /> <input type="text" class="" value="8" data-field="minimumPostLength"><br />
-		
+	<h3>User Settings</h3>
+	<div class="alert alert-warning">
+		<strong>Minimum Username Length</strong><br />
+		<input type="text" class="form-control" value="2" data-field="minimumUsernameLength"><br />
+		<strong>Maximum Username Length</strong><br />
+		<input type="text" class="form-control" value="16" data-field="maximumUsernameLength"><br />
+		<strong>Minimum Password Length</strong><br />
+		<input type="text" class="form-control" value="6" data-field="minimumPasswordLength"><br />
 	</div>
 </form>
 
-<button class="btn btn-large btn-primary" id="save">Save</button>
+<form>
+	<h3>Post Settings</h3>
+	<div class="alert alert-warning">
+		<strong>Post Delay</strong><br /> <input type="text" class="form-control" value="10000" data-field="postDelay"><br />
+		<strong>Minimum Title Length</strong><br /> <input type="text" class="form-control" value="3" data-field="minimumTitleLength"><br />
+		<strong>Minimum Post Length</strong><br /> <input type="text" class="form-control" value="8" data-field="minimumPostLength"><br />
+
+	</div>
+</form>
+
+<button class="btn btn-lg btn-primary" id="save">Save</button>
 
 <script>
-	nodebb_admin.prepare();
+	var	loadDelay = setInterval(function() {
+		if (nodebb_admin) {
+			nodebb_admin.prepare();
+			clearInterval(loadDelay);
+		}
+	}, 500);
 </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();

public/templates/admin/topics.tpl

@@ -20,7 +20,7 @@
 </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,25 @@
 <hr />
 
 <form>
-	<div class="alert alert-notify">
+	<div class="alert alert-warning">
 		<p>
 			Create a <strong>Twitter Application</strong> via the
 			<a href="https://dev.twitter.com/">Twitter Developers Page</a> and then
 			paste your application details here.
 		</p>
 		<br />
-		<input type="text" data-field="social:twitter:key" title="Consumer Key" class="input-large" placeholder="Consumer Key"><br />
-		<input type="text" data-field="social:twitter:secret" title="Consumer Secret" class="input-xlarge" placeholder="Consumer Secret">
+		<input type="text" data-field="social:twitter:key" title="Consumer Key" class="form-control input-lg" placeholder="Consumer Key"><br />
+		<input type="text" data-field="social:twitter:secret" title="Consumer Secret" class="form-control input-md" placeholder="Consumer Secret">
 	</div>
 </form>
 
-<button class="btn btn-large btn-primary" id="save">Save</button>
+<button class="btn btn-lg btn-primary" id="save">Save</button>
 
 <script>
-	nodebb_admin.prepare();
+	var	loadDelay = setInterval(function() {
+		if (nodebb_admin) {
+			nodebb_admin.prepare();
+			clearInterval(loadDelay);
+		}
+	}, 500);
 </script>

public/templates/admin/users.tpl

@@ -7,21 +7,21 @@
 	<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}">
-		<a href="/users/{users.userslug}">
-			<img src="{users.picture}" class="img-polaroid"/>
+	<div class="users-box" data-uid="{users.uid}" data-admin="{users.administrator}" data-username="{users.username}" data-banned="{users.banned}">
+		<a href="/user/{users.userslug}">
+			<img src="{users.picture}" class="img-thumbnail"/>
 		</a>
 		<br/>
-		<a href="/users/{users.userslug}">{users.username}</a>
+		<a href="/user/{users.userslug}">{users.username}</a>
 		<br/>
 		<div title="reputation">
 			<span id='reputation'>{users.reputation}</span>
@@ -32,17 +32,14 @@
 			<i class='icon-pencil'></i>
 		</div>
 		<div>
-			<a href="#" class="btn admin-btn">Admin</a>
-		</div>
-		<div>
-			<a href="#" class="btn delete-btn btn-danger">Delete</a>
+			<a href="#" class="btn btn-default ban-btn">Ban</a>
 		</div>
 	</div>
 	<!-- END users -->
 </ul>
 
 <div class="text-center {loadmore_display}">
-	<button id="load-more-users-btn" class="btn">Load More</button>
+	<button id="load-more-users-btn" class="btn btn-primary">Load More</button>
 </div>
 <input type="hidden" template-variable="yourid" value="{yourid}" />
 

public/templates/category.tpl

@@ -1,95 +1,92 @@
-<div class="container">
-	<ul class="breadcrumb">
-		<li itemscope="itemscope" itemtype="http://data-vocabulary.org/Breadcrumb">
-			<a href="/" itemprop="url"><span itemprop="title">Home</span></a>
-			<span class="divider">/</span>
-		</li>
-		<li class="active" itemscope="itemscope" itemtype="http://data-vocabulary.org/Breadcrumb">
-			<span itemprop="title">{category_name}</span>
-		</li>
-		<div id="category_active_users"></div>
-	</ul>
-</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>
+<ol class="breadcrumb">
+	<li itemscope="itemscope" itemtype="http://data-vocabulary.org/Breadcrumb">
+		<a href="/" itemprop="url"><span itemprop="title">[[global:home]]</span></a>
+	</li>
+	<li class="active" itemscope="itemscope" itemtype="http://data-vocabulary.org/Breadcrumb">
+		<span itemprop="title">{category_name} <a target="_blank" href="../{category_id}.rss"><i class="icon-rss-sign"></i></a></span>
+	</li>
+	<div id="category_active_users"></div>
+</ol>
 
 <div>
-
-	<button id="new_post" class="btn btn-primary btn-large {show_topic_button}">New Topic</button>
+	<button id="new_post" class="btn btn-primary btn-lg {show_topic_button}">[[category:new_topic_button]]</button>
 
 	<div class="inline-block pull-right">
-		<a target="_blank" href="../{category_id}.rss"><i class="icon-rss-sign icon-2x"></i></a>&nbsp;
 		<a href="#" id="facebook-share"><i class="icon-facebook-sign icon-2x"></i></a>&nbsp;
 		<a href="#" id="twitter-intent"><i class="icon-twitter-sign icon-2x"></i></a>&nbsp;
 		<a href="#" id="google-share"><i class="icon-google-plus-sign icon-2x"></i></a>&nbsp;
 	</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">
 		<!-- BEGIN topics -->
-		<a href="../../topic/{topics.slug}"><li class="category-item {topics.deleted-class}">
-			<div class="row-fluid">
-				<!-- <div class="span1 thread-rating hidden-phone hidden-tablet">
-					<span>
-						<i class="icon-star icon-3x"></i><br />
-						38
-					</span>
-				</div> -->
-				<div class="span12 topic-row">
-					<div class="latest-post visible-desktop">
-						<div class="pull-right">
-							<img style="width: 48px; height: 48px; /*temporary*/" src="{topics.teaser_userpicture}" />
-							<p><strong>{topics.teaser_username}</strong>: {topics.teaser_text}</p>
-							<span>posted {topics.teaser_timestamp} ago</span>
+
+			<li class="category-item {topics.deleted-class}">
+				<div class="row">
+					<div class="col-md-12 topic-row">
+						<div class="latest-post visible-lg visible-md">
+							<a href="../../topic/{topics.slug}#{topics.teaser_pid}">
+								<div class="pull-right">
+									<img class="img-rounded" style="width: 48px; height: 48px; /*temporary*/" src="{topics.teaser_userpicture}" />
+									<p>{topics.teaser_text}</p>
+									<p class="meta">
+										<strong>{topics.teaser_username}</strong> posted <span class="timeago" title="{topics.teaser_timestamp}"></span>
+									</p>
+								</div>
+							</a>
 						</div>
-					</div>
-					<div>
-						<h3><span class="topic-title"><span class="badge {topics.badgeclass}">{topics.postcount}</span>{topics.title}</span></h3>
-						<small>
-							<strong><i class="{topics.pin-icon}"></i><i class="{topics.lock-icon}"></i></strong>
-							Posted {topics.relativeTime} ago by 
-							<strong>{topics.username}</strong>.
-						</small> 
+						<a href="../../topic/{topics.slug}">
+							<div>
+								<h3><span class="topic-title"><span class="badge {topics.badgeclass}">{topics.postcount}</span>{topics.title}</span></h3>
+								<small>
+									<strong><i class="{topics.pin-icon}"></i> <i class="{topics.lock-icon}"></i></strong>
+									Posted <span class="timeago" title="{topics.relativeTime}"></span> by
+									<strong>{topics.username}</strong>.
+								</small>
+							</div>
+						</a>
 					</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">
 				<!-- BEGIN active_users -->
-				<a href="/users/{active_users.userslug}"><img title="{active_users.username}" src="{active_users.picture}" class="img-polaroid" /></a>
+				<a 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>

public/templates/config.json

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

public/templates/favourites.tpl

@@ -0,0 +1,27 @@
+<div class="well favourites">
+	<div class="account-username-box" data-userslug="{userslug}">
+		<span class="account-username">
+			<a href="/user/{userslug}">{username}</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>
+
+<script type="text/javascript" src="{relative_path}/src/forum/accountheader.js"></script>
+<script type="text/javascript" src="{relative_path}/src/forum/favourites.js"></script>

public/templates/followers.tpl

@@ -1,38 +1,31 @@
 
-<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="/users/{userslug}/followers">followers</a>
+			<a href="/user/{userslug}">{username}</a> <i class="icon-chevron-right"></i>
+			<a href="/user/{userslug}/followers">followers</a>
 		</span>
-		<div 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}">
-				<img src="{followers.picture}" class="img-polaroid"/>
+			<a href="/user/{followers.userslug}">
+				<img src="{followers.picture}" class="img-thumbnail"/>
 			</a>
 			<br/>
-			<a href="/users/{followers.userslug}">{followers.username}</a>
+			<a href="/user/{followers.userslug}">{followers.username}</a>
 			<br/>
 			<div title="reputation">
-				<span class='reputation'>{followers.reputation}</span>
+				<span class='formatted-number'>{followers.reputation}</span>
 				<i class='icon-star'></i>
 			</div>
 			<div title="post count">
-				<span class='postcount'>{followers.postcount}</span>
+				<span class='formatted-number'>{followers.postcount}</span>
 				<i class='icon-pencil'></i>
 			</div>
 		</div>
-
 		<!-- END followers -->
 	</div>
 	<div id="no-followers-notice" class="alert alert-warning hide">This user doesn't have any followers :(</div>

public/templates/following.tpl

@@ -1,39 +1,31 @@
 
-<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="/users/{userslug}/following">following</a>
+			<a href="/user/{userslug}">{username}</a> <i class="icon-chevron-right"></i>
+			<a href="/user/{userslug}/following">following</a>
 		</span>
-		<div 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}">
-				<img src="{following.picture}" class="img-polaroid"/>
+			<a href="/user/{following.userslug}">
+				<img src="{following.picture}" class="img-thumbnail"/>
 			</a>
 			<br/>
-			<a href="/users/{following.userslug}">{following.username}</a>
+			<a href="/user/{following.userslug}">{following.username}</a>
 			<br/>
 			<div title="reputation">
-				<span class='reputation'>{following.reputation}</span>
+				<span class='formatted-number'>{following.reputation}</span>
 				<i class='icon-star'></i>
 			</div>
 			<div title="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>
+			<a id="unfollow-btn" href="#" class="btn btn-default unfollow-btn" followingUid="{following.uid}" data-username="{following.username}">Unfollow</a>
 		</div>
 		<!-- END following -->
 	</div>

public/templates/footer.tpl

@@ -2,54 +2,59 @@
 
 	</div><!--END container -->
 
-	<div id="disconnect-modal" class="modal hide" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
-		<div class="modal-header">
-			<h3 id="myModalLabel">Socket Disconnect</h3>
-		</div>
-		<div class="modal-body">
-			<span id="disconnect-text">Looks like you disconnected, try reloading the page.</span>
-		</div>
-		<div class="modal-footer">
-			<a id="reload-button" href="/" class="btn btn-primary">Reload</a>
-		</div>
-	</div>
+	<div id="chat-modal" class="modal" tabindex="-1" role="dialog" aria-labelledby="Chat" 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">&times;</button>
+					<h3 id="myModalLabel">[[footer:chat.chatting_with]]</h3>
+				</div>
+				<div class="modal-body">
+					<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">
+					<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="chat-modal" class="modal hide" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
-		<div class="modal-header">
-			<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
-			<h3 id="myModalLabel">Chat with <span id="chat-with-name"></span></h3>
-		</div>
-		<div class="modal-body">
-			<textarea id="chat-content" cols="40" rows="10" readonly></textarea><br/>
-			<input id="chat-message-input" type="text" name="chat-message" placeholder="type chat message here press enter to send"/><br/>
-			<button type="button" id="chat-message-send-btn" href="#" class="btn btn-primary">Send</button>
-		</div>
-	</div>
 
 	<div id="alert_window"></div>
 
-	<div id="mobile-sidebar">
-	</div>
 
-	<!-- START Forum Info -->
-	<div id="footer" class="container hidden-phone" style="padding-top: 50px; display: none">
-		<div class="alert alert-info">
-			<span id="active_users"></span>; <span id="active_record"></span><br />
-			<span id="number_of_users"></span> <span id="post_stats"></span><br />
-			<span id="latest_user"></span>
+	<footer id="footer" class="container footer">
+		<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>
-		<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 -->
+		<div class="copyright">Copyright &copy; 2013 <a target="_blank" href="http://www.nodebb.org">NodeBB</a> by <a target="_blank" href="https://github.com/psychobunny">psychobunny</a>, <a href="https://github.com/julianlam" target="_blank">julianlam</a>, <a href="https://github.com/barisusakli" target="_blank">barisusakli</a> from <a target="_blank" href="http://www.designcreateplay.com">designcreateplay</a></div>
+	</footer>
+
 	<script>
 		$.getScript(RELATIVE_PATH + '/src/forum/footer.js');
 	</script>
-	
+
 </body>
 </html>

public/templates/header.tpl

@@ -4,78 +4,114 @@
 	<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">
 	<script>
 		var RELATIVE_PATH = "{relative_path}";
 	</script>
-	<script src="http://code.jquery.com/jquery.js"></script>
-	<script src="{relative_path}/vendor/jquery/js/jquery-ui-1.10.3.custom.min.js"></script>
-	<script src="{relative_path}/vendor/bootstrap/js/bootstrap.min.js"></script>
 	<script src="{relative_path}/socket.io/socket.io.js"></script>
-	<script src="{relative_path}/src/app.js"></script>
-	<script src="{relative_path}/vendor/requirejs/require.js"></script>
-	<script src="{relative_path}/vendor/bootbox/bootbox.min.js"></script>
+	<!-- BEGIN clientScripts -->
+	<script src="{relative_path}/{clientScripts.script}"></script>
+	<!-- END clientScripts -->
 	<script>
 		require.config({
 			baseUrl: "{relative_path}/src/modules",
 			waitSeconds: 3
 		});
 	</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" />
-
 </head>
 
 <body>
-	<div id="mobile-menu-overlay">
-	</div>
-	<div class="navbar navbar-inverse navbar-fixed-top" id="header-menu">
-		<div class="navbar-inner">
-			<div class="container">
-				<a class="brand" href="/">{title}</a>
-				<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
+	<div class="navbar navbar-inverse navbar-fixed-top header" role="navigation" id="header-menu">
+		<div class="container">
+			<div class="navbar-header">
+				<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
 					<span class="icon-bar"></span>
 					<span class="icon-bar"></span>
 					<span class="icon-bar"></span>
 				</button>
-				<div class="nav-collapse collapse">
-					<ul id="main-nav" class="nav nodebb-inline-block">
-						<li>
-							<a href="/recent">Recent</a>
-						</li>
-						<li>
-							<a href="/unread">Unread</a>
-						</li>
-						<li>
-							<a href="/users">Users</a>
-						</li>
-					</ul>
-					<ul id="right-menu" class="nav pull-right nodebb-inline-block">
-						<li class="notifications dropdown text-center">
-							<a class="dropdown-toggle" data-toggle="dropdown" href="#" id="notif_dropdown"><i class="icon-circle-blank"></i></a>
-							<ul id="notif-list" class="dropdown-menu" aria-labelledby="notif_dropdown">
-								<li><a href="#"><i class="icon-refresh icon-spin"></i> Loading Notifications</a></li>
-							</ul>
-						</li>
-						<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>
+				<a href="/">
+					<h1 class="navbar-brand forum-title">{title}</h1>
+				</a>
+			</div>
+
+			<div class="navbar-collapse collapse navbar-ex1-collapse">
+				<ul id="main-nav" class="nav navbar-nav">
+					<li>
+						<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="/users">[[global:header.users]]</a>
+					</li>
+					<li class="visible-xs">
+						<a href="/search">[[global:header.search]]</a>
+					</li>
+					<li class="visible-xs">
+						<a href="/search">Search</a>
+					</li>
+					<li>
+						<a href="/"></a>
+					</li>
+				</ul>
+
+				<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>
+
+				<ul id="logged-in-menu" class="nav navbar-nav navbar-right hide">
+					<li>
+						<a href="#" id="reconnect"></a>
+					</li>
+
+					<li id="notifications-list" class="notifications dropdown text-center hidden-xs">
+						<a class="dropdown-toggle" data-toggle="dropdown" href="#" id="notif_dropdown"><i class="icon-circle-blank"></i></a>
+						<ul id="notif-list" class="dropdown-menu" aria-labelledby="notif_dropdown">
+							<li>
+								<a href="#"><i class="icon-refresh icon-spin"></i> [[global:notifications.loading]]</a>
+							</li>
+						</ul>
+					</li>
+
+					<li>
+						<a id="user_label" href="">
+							<img src=""/>
+							<span></span>
+						</a>
+					</li>
+
+					<li id="logout-link">
+						<a href="#">Log out</a>
+					</li>
+				</ul>
+
+				<ul id="logged-out-menu" class="nav navbar-nav navbar-right">
+					<li id="register-link">
+						<a href="/register">Register</a>
+					</li>
+					<li id="login-link">
+						<a href="/login">Login</a>
+					</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>
 	</div>
-	
+
 	<input id="csrf_token" type="hidden" template-variable="csrf" value="{csrf}" />
 
-	
-	<div class="container" id="content">
-
+	<div class="container" id="content">

public/templates/home.tpl

@@ -1,13 +1,13 @@
-<div class="hero-unit {motd_class}">
+<div class="jumbotron {motd_class}">
 	{motd}
 </div>
 
-<div class="row category-row">
+<div class="row home">
 	<!-- BEGIN categories -->
-	<div class="span3">
+	<div class="col-md-3 col-xs-6">
 		<a href="category/{categories.slug}">
 			<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>

public/templates/install/basic.tpl

@@ -30,10 +30,10 @@
 
 <hr />
 <div class="pull-right">
-	<button data-path="mail" class="btn btn-primary btn-large">Next &ndash; <i class="icon-envelope"></i> Mail</button>
+	<button data-path="mail" class="btn btn-primary btn-lg">Next &ndash; <i class="icon-envelope"></i> Mail</button>
 </div>
 <div>
-	<button data-path="redis" class="btn btn-primary btn-large">Previous &ndash; <i class="icon-hdd"></i> Redis</button>
+	<button data-path="redis" class="btn btn-primary btn-lg">Previous &ndash; <i class="icon-hdd"></i> Redis</button>
 </div>
 
 <script>

public/templates/install/footer.tpl

@@ -9,7 +9,7 @@
 				// 	ajaxify.go('install/redis');
 				// 	app.alert({
 				// 		alert_id: 'config-ready',
-				// 		type: 'error',
+				// 		type: 'danger',
 				// 		timeout: 10000,
 				// 		title: 'NodeBB Configuration Not Ready!',
 				// 		message:	'NodeBB cannot proceed with setup at this time as Redis database information ' +
@@ -110,7 +110,6 @@
 			contentEl.addEventListener('click', function(e) {
 				if (e.target.hasAttribute('data-path')) {
 					var	href = 'install/' + e.target.getAttribute('data-path');
-					console.log(href);
 					if (!e.target.disabled) ajaxify.go(href);
 				}
 			}, false);
@@ -135,7 +134,7 @@
 						timeout: 2500,
 						title: 'Configuration Not Saved',
 						message: 'NodeBB encountered a problem saving your changes',
-						type: 'error'
+						type: 'danger'
 					});
 				}
 			});

public/templates/install/header.tpl

@@ -26,7 +26,7 @@
 		<div class="navbar-inner">
 			<div class="container">
 				<a class="brand" href="/install">NodeBB Installation</a>
-				<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
+				<button type="button" class="btn navbar-btn" data-toggle="collapse" data-target=".nav-collapse">
 					<span class="icon-bar"></span>
 					<span class="icon-bar"></span>
 					<span class="icon-bar"></span>

public/templates/install/mail.tpl

@@ -23,7 +23,7 @@
 
 <hr />
 <div class="pull-right">
-	<button data-path="social" class="btn btn-primary btn-large">Next &ndash; <i class="icon-facebook"></i> Social</button>
+	<button data-path="social" class="btn btn-primary btn-lg">Next &ndash; <i class="icon-facebook"></i> Social</button>
 </div>
 
 <script>

public/templates/install/privileges.tpl

@@ -27,10 +27,10 @@
 
 <hr />
 <div class="pull-right">
-	<button id="start-nodebb" class="btn btn-success btn-large"><i class="icon-thumbs-up"></i> Start using NodeBB!</button>
+	<button id="start-nodebb" class="btn btn-success btn-lg"><i class="icon-thumbs-up"></i> Start using NodeBB!</button>
 </div>
 <div>
-	<button data-path="social" class="btn btn-primary btn-large">Previous &ndash; <i class="icon-facebook"></i> Social</button>
+	<button data-path="social" class="btn btn-primary btn-lg">Previous &ndash; <i class="icon-facebook"></i> Social</button>
 </div>
 
 <script>

public/templates/install/redis.tpl

@@ -32,7 +32,7 @@
 
 <hr />
 <div class="pull-right">
-	<button data-path="basic" class="btn btn-primary btn-large" disabled>Next &ndash; <i class="icon-cog"></i> Basic</button>
+	<button data-path="basic" class="btn btn-primary btn-lg" disabled>Next &ndash; <i class="icon-cog"></i> Basic</button>
 </div>
 
 <script>

public/templates/install/social.tpl

@@ -34,10 +34,10 @@
 
 <hr />
 <div class="pull-right">
-	<button data-path="privileges" class="btn btn-primary btn-large">Next &ndash; <i class="icon-legal"></i> Privileges</button>
+	<button data-path="privileges" class="btn btn-primary btn-lg">Next &ndash; <i class="icon-legal"></i> Privileges</button>
 </div>
 <div>
-	<button data-path="mail" class="btn btn-primary btn-large">Previous &ndash; <i class="icon-envelope"></i> Mail</button>
+	<button data-path="mail" class="btn btn-primary btn-lg">Previous &ndash; <i class="icon-envelope"></i> Mail</button>
 </div>
 
 <script>

public/templates/login.tpl

@@ -1,29 +1,63 @@
-<h1>Login</h1>
-<div class="row-fluid">
-	<div class="well {login_window:spansize}">
-		<h4>Login via Username &amp; Password</h4>
-		<div class="alert alert-error" id="error" style="display:none">
-			<button type="button" class="close" data-dismiss="alert">&times;</button>
-			<strong>Failed Login Attempt</strong> <p></p>
+<ol class="breadcrumb">
+	<li itemscope="itemscope" itemtype="http://data-vocabulary.org/Breadcrumb">
+		<a href="/" itemprop="url"><span itemprop="title">[[global:home]]</span></a>
+	</li>
+	<li class="active" itemscope="itemscope" itemtype="http://data-vocabulary.org/Breadcrumb">
+		<span itemprop="title">[[login:login]]</span>
+	</li>
+</ol>
+
+
+<div class="row">
+	<div class="{login_window:spansize}">
+		<div class="well well-lg">
+			<div class="alert alert-danger" id="login-error-notify" style="display:none">
+				<button type="button" class="close" data-dismiss="alert">&times;</button>
+				<strong>[[login:failed_login_attempt]]</strong> <p></p>
+			</div>
+
+			<form class="form-horizontal" role="form">
+				<div class="form-group">
+					<label for="username" class="col-lg-2 control-label">[[login:username]]</label>
+					<div class="col-lg-10">
+						<input class="form-control" type="text" placeholder="Enter Username" name="username" id="username" />
+					</div>
+				</div>
+				<div class="form-group">
+					<label for="password" class="col-lg-2 control-label">[[login:password]]</label>
+					<div class="col-lg-10">
+						<input class="form-control" type="password" placeholder="Enter Password" name="password" id="password" />
+					</div>
+				</div>
+				<div class="form-group">
+					<div class="col-lg-offset-2 col-lg-10">
+						<div class="checkbox">
+						<label>
+							<input type="checkbox"> [[login:remember_me]]
+						</label>
+						</div>
+					</div>
+				</div>
+				<div class="form-group">
+					<div class="col-lg-offset-2 col-lg-10">
+						<button class="btn btn-primary" id="login" type="submit">[[login:login]]</button> &nbsp; <a href="/reset">[[login:forgot_password]]</a>
+					</div>
+				</div>
+				<input type="hidden" name="_csrf" value="{token}" id="csrf-token" />
+			</form>
+
 		</div>
-		
-		<form>
-			<label>Username</label><input type="text" placeholder="Enter Username" name="username" id="username" /><br />
-			<label>Password</label><input type="password" placeholder="Enter Password" name="password" id="password" /><br />
-			<input type="hidden" name="_csrf" value="{token}" id="csrf-token" />
-			<button class="btn btn-primary" id="login" type="submit">Login</button> &nbsp; <a href="/reset">Forgot Password?</a>
-		</form>
-		
-		<span id="login-error-notify" class="label label-important hide">Invalid username/password</span><br/>
 	</div>
-	
-	<div class="well span6 {alternate_logins:display}">
-		<h4>Alternative Logins</h4>
-		<ul class="alt-logins">
-			<li data-url="/auth/twitter" class="twitter {twitter:display}"><i class="icon-twitter-sign icon-3x"></i></li>
-			<li data-url="/auth/google" class="google {google:display}"><i class="icon-google-plus-sign icon-3x"></i></li>
-			<li data-url="/auth/facebook" class="facebook {facebook:display}"><i class="icon-facebook-sign icon-3x"></i></li>
-		</ul>
+
+	<div class="col-md-6 {alternate_logins:display}">
+		<div class="well well-lg">
+			<h4>[[login:alternative_logins]]</h4>
+			<ul class="alt-logins">
+				<li data-url="/auth/twitter" class="twitter {twitter:display}"><i class="icon-twitter-sign icon-3x"></i></li>
+				<li data-url="/auth/google" class="google {google:display}"><i class="icon-google-plus-sign icon-3x"></i></li>
+				<li data-url="/auth/facebook" class="facebook {facebook:display}"><i class="icon-facebook-sign icon-3x"></i></li>
+			</ul>
+		</div>
 	</div>
 </div>
 

public/templates/logout.tpl

@@ -1,7 +1,13 @@
-<div class="alert" id="message">
-	<strong>Logout</strong>
-	<p>You have successfully logged out of NodeBB</p>
-	<p>
-		<a href="/">NodeBB Home</a>
-	</p>
+<ol class="breadcrumb">
+	<li itemscope="itemscope" itemtype="http://data-vocabulary.org/Breadcrumb">
+		<a href="/" itemprop="url"><span itemprop="title">[[global:home]]</span></a>
+	</li>
+	<li class="active" itemscope="itemscope" itemtype="http://data-vocabulary.org/Breadcrumb">
+		<span itemprop="title">[[global:logout]]</span>
+	</li>
+</ol>
+
+<div class="alert alert-success" id="message">
+	<h4>[[global:logout.title]]</h4>
+	<p>[[global:logout.message]]</p>
 </div>

public/templates/noscript/category.tpl

@@ -1,17 +1,19 @@
-		<ul class="breadcrumb">
-			<li><a href="/">Home</a><span class="divider">/</span></li>
+		<ol class="breadcrumb">
+			<li><a href="/">Home</a></li>
 			<li class="active">{category_name}</li>
 			<div id="category_active_users"></div>
-		</ul>
+		</ol>
 		<ul class="topics">
 			<!-- BEGIN topics -->
 			<li>
+				<span class="timestamp">{topics.teaser_timestamp}</span>
 				<a href="../../topic/{topics.slug}">{topics.title} ({topics.postcount})</a>
 				<div class="teaser">
-					<img class="img-polaroid" src="../../graph/users/{topics.teaser_username}/picture" />
+					<img class="img-thumbnail" src="{topics.teaser_userpicture}" />
 					<p>
-						{topics.teaser_text} &mdash; {topics.teaser_timestamp} ago
+						{topics.teaser_text}
 					</p>
+					<div class="clear"></div>
 				</div>
 			</li>
 			<!-- END topics -->

public/templates/noscript/header.tpl

@@ -1,6 +1,6 @@
-		<div class="alert alert-error">
+		<div class="alert alert-danger">
 			<p>
-				Your browser does not seem to support javascript. As a result, your viewing experience will be diminished.
+				Your browser does not seem to support javascript. As a result, your viewing experience will be diminished, and you have been placed in <strong>read-only mode</strong>.
 			</p>
 			<p>
 				Please download a browser that supports javascript, or enable it, if it disabled (i.e. NoScript).

public/templates/noscript/topic.tpl

@@ -1,12 +1,13 @@
 		<ul class="posts">
 			<!-- BEGIN main_posts -->
 			<li>
-				<div class="row-fluid">
-					<div class="span2">
-						<img src="{main_posts.picture}" /><br />
-						{main_posts.username}
+				<a name="{main_posts.pid}"></a>
+				<div class="row">
+					<div class="col-lg-2 profile">
+						<img class="img-thumbnail" src="{main_posts.picture}" /><br />
+						<span class="username">{main_posts.username}</span>
 					</div>
-					<div class="span10">
+					<div class="col-lg-10">
 						{main_posts.content}
 					</div>
 				</div>
@@ -14,12 +15,13 @@
 			<!-- END main_posts -->
 			<!-- BEGIN posts -->
 			<li>
-				<div class="row-fluid">
-					<div class="span2">
-						<img src="{posts.picture}" /><br />
-						{posts.username}
+				<a name="{posts.pid}"></a>
+				<div class="row">
+					<div class="col-lg-2 profile">
+						<img class="img-thumbnail" src="{posts.picture}" /><br />
+						<span class="username">{posts.username}</span>
 					</div>
-					<div class="span10">
+					<div class="col-lg-10">
 						{posts.content}
 					</div>
 					<div class="clear"></div>

public/templates/outgoing.tpl

@@ -1,11 +1,27 @@
-<div class="hero-unit">
-	<h2 class="form-signin-heading">Now Leaving NodeBB</h2>
-	<p>
-		You are now leaving NodeBB.
-	</p>
-	<br />
-	<p>
-		<a href="{url}" rel="nofollow" class="btn btn-large">Continue to {url}</a>
-		<a href="{home}" class="btn btn-large btn-inverse">Return to NodeBB</a>
-	</p>
-</div>
+<div class="outgoing">
+	<ol class="breadcrumb">
+		<li itemscope="itemscope" itemtype="http://data-vocabulary.org/Breadcrumb">
+			<a href="/" itemprop="url"><span itemprop="title">Home</span></a>
+		</li>
+		<li class="active" itemscope="itemscope" itemtype="http://data-vocabulary.org/Breadcrumb">
+			<span itemprop="title">Outgoing Link</span>
+		</li>
+	</ol>
+
+	<div class="well">
+		<h3>
+			You are now leaving NodeBB.
+		</h3>
+		<p>
+			<a href="{url}" rel="nofollow" class="btn btn-primary btn-lg">Continue to {url}</a>
+			<a id="return-btn" href="#" class="btn btn-lg btn-warning">Return to NodeBB</a>
+		</p>
+	</div>
+</div>
+
+<script>
+	$('#return-btn').on('click', function() {
+		history.back();
+		return false;
+	});
+</script>

public/templates/recent.tpl

@@ -1,11 +1,8 @@
-<div class="container">
-	<ul class="breadcrumb">
-		<li><a href="/">Home</a><span class="divider">/</span></li>
-		<li class="active">{category_name}</li>
-		<div id="category_active_users"></div>
-	</ul>
-</div>
-
+<ol class="breadcrumb">
+	<li><a href="/">Home</a></li>
+	<li class="active">{category_name}</li>
+	<div id="category_active_users"></div>
+</ol>
 
 <a href="/recent">
 	<div class="alert hide" id="new-topics-alert"></div>
@@ -21,23 +18,29 @@
 		<!-- BEGIN topics -->
 		<a href="../../topic/{topics.slug}" id="tid-{topics.tid}">
 			<li class="category-item {topics.deleted-class}">
-				<div class="row-fluid">
-					<div class="span12 topic-row img-polaroid">
-						<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 class="row">
+					<div class="col-md-12 col-xs-12 topic-row img-thumbnail">
+						<div class="latest-post visible-lg visible-md">
+							<a href="../../topic/{topics.slug}#{topics.teaser_pid}">
+								<div class="pull-right">
+									<img class="img-rounded" style="width: 48px; height: 48px; /*temporary*/" src="{topics.teaser_userpicture}" />
+									<p>{topics.teaser_text}</p>
+									<p class="meta">
+										<strong>{topics.teaser_username}</strong> posted <span class="timeago" title="{topics.teaser_timestamp}"></span>
+									</p>
+								</div>
+							</a>
+						</div>
+						<a href="../../topic/{topics.slug}">
+							<div>
+								<h3><span class="topic-title"><span class="badge {topics.badgeclass}">{topics.postcount}</span>{topics.title}</span></h3>
+								<small>
+									<strong><i class="{topics.pin-icon}"></i> <i class="{topics.lock-icon}"></i></strong>
+									Posted <span class="timeago" title="{topics.relativeTime}"></span> by
+									<strong>{topics.username}</strong>.
+								</small>
 							</div>
-						</div>
-						<div>
-							<h3><span class="topic-title"><span class="badge {topics.badgeclass}">{topics.postcount}</span>{topics.title}</span></h3>
-							<small>
-								<strong><i class="{topics.pin-icon}"></i><i class="{topics.lock-icon}"></i></strong>
-								Posted {topics.relativeTime} ago by 
-								<strong>{topics.username}</strong>.
-							</small> 
-						</div>
+						</a>
 					</div>
 				</div>
 			</li>
@@ -47,4 +50,4 @@
 	</div>
 </div>
 
-<script type="text/javascript" src="{relative_path}/src/forum/recent.js"></script>
+<script type="text/javascript" src="{relative_path}/src/forum/recent.js"></script>