From 4bbf6ff1aa08188575541c5193ef16770a82a36e Mon Sep 17 00:00:00 2001
From: Alexander Ebert <ebert@woltlab.com>
Date: Sun, 3 May 2015 20:15:22 +0200
Subject: [PATCH] Initial commit for WCF 2.2 w/ require.js

This is a highly experimental version and it is neither complete nor fully working. You cannot even install it at this time, if you really must play around with it, use version 2.1 and copy the necessary changes/additions.

At this point it is not meant to be actively development in terms of new features or API changes, I'm solely focusing on playing around with require.js and see how these things turn out.
---
 README.md                                     |   8 +-
 com.woltlab.wcf/package.xml                   | 128 +--
 .../templates/headIncludeJavaScript.tpl       |  65 +-
 wcfsetup/install/files/js/WCF.js              | 857 +-----------------
 .../files/js/WoltLab/WCF/CallbackList.js      |  65 ++
 wcfsetup/install/files/js/WoltLab/WCF/Core.js |  75 ++
 .../files/js/WoltLab/WCF/DOM/Traverse.js      | 174 ++++
 .../install/files/js/WoltLab/WCF/DOM/Util.js  | 160 ++++
 .../js/WoltLab/WCF/Date/Time/Relative.js      |  85 ++
 .../files/js/WoltLab/WCF/Dictionary.js        | 112 +++
 .../files/js/WoltLab/WCF/Event/Handler.js     | 115 +++
 .../files/js/WoltLab/WCF/UI/Alignment.js      | 167 ++++
 .../js/WoltLab/WCF/UI/Dropdown/Simple.js      | 362 ++++++++
 .../install/files/js/WoltLab/WCF/UI/Mobile.js | 172 ++++
 .../files/js/WoltLab/WCF/UI/TabMenu.js        |  36 +
 .../files/js/WoltLab/WCF/UI/TabMenu/Simple.js | 300 ++++++
 wcfsetup/install/files/js/require.js          |  36 +
 wcfsetup/install/files/style/layout.less      |   4 +
 18 files changed, 1968 insertions(+), 953 deletions(-)
 create mode 100644 wcfsetup/install/files/js/WoltLab/WCF/CallbackList.js
 create mode 100644 wcfsetup/install/files/js/WoltLab/WCF/Core.js
 create mode 100644 wcfsetup/install/files/js/WoltLab/WCF/DOM/Traverse.js
 create mode 100644 wcfsetup/install/files/js/WoltLab/WCF/DOM/Util.js
 create mode 100644 wcfsetup/install/files/js/WoltLab/WCF/Date/Time/Relative.js
 create mode 100644 wcfsetup/install/files/js/WoltLab/WCF/Dictionary.js
 create mode 100644 wcfsetup/install/files/js/WoltLab/WCF/Event/Handler.js
 create mode 100644 wcfsetup/install/files/js/WoltLab/WCF/UI/Alignment.js
 create mode 100644 wcfsetup/install/files/js/WoltLab/WCF/UI/Dropdown/Simple.js
 create mode 100644 wcfsetup/install/files/js/WoltLab/WCF/UI/Mobile.js
 create mode 100644 wcfsetup/install/files/js/WoltLab/WCF/UI/TabMenu.js
 create mode 100644 wcfsetup/install/files/js/WoltLab/WCF/UI/TabMenu/Simple.js
 create mode 100644 wcfsetup/install/files/js/require.js

diff --git a/README.md b/README.md
index 1c36ff544f..75a12a7d1e 100644
--- a/README.md
+++ b/README.md
@@ -1,4 +1,4 @@
-WoltLab Community Framework 2.1
+WoltLab Community Framework 2.2
 ===============================
 
 WoltLab Community Framework is a free web-framework, designed and developed for complex community applications. The framework applies the latest and most modern technologies, it is structured completly object-oriented, constantly enhanced and forms the base for all WoltLab products.
@@ -6,9 +6,11 @@ WoltLab Community Framework is a free web-framework, designed and developed for
 Version notes
 -------------
 
-This is the **stable** tree of WCF, changes will be rejected unless they fix an existing issue without changing the API.
+This is the **EXPERIMENTAL/crash-for-sure** tree of WCF, it contains work in progress subject to change. At no point it is guaranteed to yield a successful build.
 
-If you wish to access the **oldstable WCF 2.0.x** branch, please see here: [WCF 2.0.x](https://github.com/WoltLab/WCF/tree/2.0)
+Other versions:
+- **stable** branch: [WCF 2.1.x](https://github.com/WoltLab/WCF/tree/master)
+- **oldstable** branch: [WCF 2.0.x](https://github.com/WoltLab/WCF/tree/2.0)
 
 About Redactor
 --------------
diff --git a/com.woltlab.wcf/package.xml b/com.woltlab.wcf/package.xml
index 333a3b576b..dfa081cefb 100644
--- a/com.woltlab.wcf/package.xml
+++ b/com.woltlab.wcf/package.xml
@@ -5,8 +5,8 @@
 		<packagedescription><![CDATA[Free web-framework, designed and developed for complex community applications.]]></packagedescription>
 		<packagedescription language="de"><![CDATA[Freies Web-Framework, das für komplexe Community-Anwendungen entworfen und entwickelt wurde.]]></packagedescription>
 		<isapplication>1</isapplication>
-		<version>2.1.3</version> <!-- codename: typhoon -->
-		<date>2015-04-14</date>
+		<version>2.2.0 Alpha 1</version> <!-- codename: vortex -->
+		<date>2015-05-03</date>
 	</packageinformation>
 	
 	<authorinformation>
@@ -42,128 +42,4 @@
 		<instruction type="aclOption">aclOption.xml</instruction>
 		<instruction type="script">acp/post_install.php</instruction>
 	</instructions>
-	
-	<instructions type="update" fromversion="2.0.12">
-		<!-- pre-update check to prevent update from WCF < 2.0.10 -->
-		<instruction type="file">pre_update_check.tar</instruction>
-		<instruction type="script" run="standalone">acp/pre_update_com.woltlab.wcf_2.1.php</instruction>
-		
-		<!-- the actual update -->
-		<instruction type="option" run="standalone">option.xml</instruction>
-		
-		<instruction type="file">files.tar</instruction>
-		<instruction type="script">acp/update_com.woltlab.wcf_2.1.php</instruction>
-		
-		<instruction type="template" run="standalone">templates.tar</instruction>
-		
-		<instruction type="acpTemplate" run="standalone">acptemplates.tar</instruction>
-		
-		<instruction type="language" run="standalone">language/*.xml</instruction>
-		
-		<instruction type="sql" run="standalone">update_210.sql</instruction>
-		
-		<instruction type="sql" run="standalone">update_user1_210.sql</instruction>
-		<instruction type="sql" run="standalone">update_user2_210.sql</instruction>
-		<instruction type="sql" run="standalone">update_user3_210.sql</instruction>
-		<instruction type="sql" run="standalone">update_user4_210.sql</instruction>
-		<instruction type="sql" run="standalone">update_user5_210.sql</instruction>
-		
-		<instruction type="acpMenu">acpMenu.xml</instruction>
-		<instruction type="bbcode">bbcode.xml</instruction>
-		<instruction type="style">blue-temptation-style.tgz</instruction>
-		<instruction type="clipboardAction">clipboardAction.xml</instruction>
-		<instruction type="coreObject">coreObject.xml</instruction>
-		<instruction type="cronjob">cronjob_update210.xml</instruction>
-		<instruction type="dashboardBox">dashboardBox.xml</instruction>
-		<instruction type="objectTypeDefinition">objectTypeDefinition.xml</instruction>
-		<instruction type="objectType">objectType.xml</instruction>
-		<instruction type="option">option.xml</instruction>
-		<instruction type="pageMenu">pageMenu.xml</instruction>
-		<instruction type="userGroupOption">userGroupOption.xml</instruction>
-		<instruction type="userMenu">userMenu.xml</instruction>
-		<instruction type="userNotificationEvent">userNotificationEvent.xml</instruction>
-		<instruction type="userOption">userOption.xml</instruction>
-		<instruction type="userProfileMenu">userProfileMenu.xml</instruction>
-		
-		<instruction type="script" run="standalone">acp/update_mqc_com.woltlab.wcf_2.1.php</instruction>
-		<instruction type="script" run="standalone">acp/rebuild_comments_com.woltlab.wcf_2.1.php</instruction>
-	</instructions>
-	
-	<instructions type="update" fromversion="2.0.12 pl 1">
-		<!-- pre-update check to prevent update from WCF < 2.0.10 -->
-		<instruction type="file">pre_update_check.tar</instruction>
-		<instruction type="script" run="standalone">acp/pre_update_com.woltlab.wcf_2.1.php</instruction>
-		
-		<!-- the actual update -->
-		<instruction type="option" run="standalone">option.xml</instruction>
-		
-		<instruction type="file">files.tar</instruction>
-		<instruction type="script">acp/update_com.woltlab.wcf_2.1.php</instruction>
-		
-		<instruction type="template" run="standalone">templates.tar</instruction>
-		
-		<instruction type="acpTemplate" run="standalone">acptemplates.tar</instruction>
-		
-		<instruction type="language" run="standalone">language/*.xml</instruction>
-		
-		<instruction type="sql" run="standalone">update_210.sql</instruction>
-		
-		<instruction type="sql" run="standalone">update_user1_210.sql</instruction>
-		<instruction type="sql" run="standalone">update_user2_210.sql</instruction>
-		<instruction type="sql" run="standalone">update_user3_210.sql</instruction>
-		<instruction type="sql" run="standalone">update_user4_210.sql</instruction>
-		<instruction type="sql" run="standalone">update_user5_210.sql</instruction>
-		
-		<instruction type="acpMenu">acpMenu.xml</instruction>
-		<instruction type="bbcode">bbcode.xml</instruction>
-		<instruction type="style">blue-temptation-style.tgz</instruction>
-		<instruction type="clipboardAction">clipboardAction.xml</instruction>
-		<instruction type="coreObject">coreObject.xml</instruction>
-		<instruction type="cronjob">cronjob_update210.xml</instruction>
-		<instruction type="dashboardBox">dashboardBox.xml</instruction>
-		<instruction type="objectTypeDefinition">objectTypeDefinition.xml</instruction>
-		<instruction type="objectType">objectType.xml</instruction>
-		<instruction type="option">option.xml</instruction>
-		<instruction type="pageMenu">pageMenu.xml</instruction>
-		<instruction type="userGroupOption">userGroupOption.xml</instruction>
-		<instruction type="userMenu">userMenu.xml</instruction>
-		<instruction type="userNotificationEvent">userNotificationEvent.xml</instruction>
-		<instruction type="userOption">userOption.xml</instruction>
-		<instruction type="userProfileMenu">userProfileMenu.xml</instruction>
-		
-		<instruction type="script" run="standalone">acp/update_mqc_com.woltlab.wcf_2.1.php</instruction>
-		<instruction type="script" run="standalone">acp/rebuild_comments_com.woltlab.wcf_2.1.php</instruction>
-	</instructions>
-	
-	<!-- Heads up! Keep all update blocks below in sync! -->
-	
-	<instructions type="update" fromversion="2.1.2">
-		<instruction type="acpTemplate">acptemplates_update.tar</instruction>
-		<instruction type="file">files_update.tar</instruction>
-		<instruction type="template">templates_update.tar</instruction>
-	</instructions>
-	
-	<instructions type="update" fromversion="2.1.2 pl 1">
-		<instruction type="acpTemplate">acptemplates_update.tar</instruction>
-		<instruction type="file">files_update.tar</instruction>
-		<instruction type="template">templates_update.tar</instruction>
-	</instructions>
-	
-	<instructions type="update" fromversion="2.1.2 pl 2">
-		<instruction type="acpTemplate">acptemplates_update.tar</instruction>
-		<instruction type="file">files_update.tar</instruction>
-		<instruction type="template">templates_update.tar</instruction>
-	</instructions>
-	
-	<instructions type="update" fromversion="2.1.2 pl 3">
-		<instruction type="acpTemplate">acptemplates_update.tar</instruction>
-		<instruction type="file">files_update.tar</instruction>
-		<instruction type="template">templates_update.tar</instruction>
-	</instructions>
-	
-	<instructions type="update" fromversion="2.1.2 pl 4">
-		<instruction type="acpTemplate">acptemplates_update.tar</instruction>
-		<instruction type="file">files_update.tar</instruction>
-		<instruction type="template">templates_update.tar</instruction>
-	</instructions>
 </package>
diff --git a/com.woltlab.wcf/templates/headIncludeJavaScript.tpl b/com.woltlab.wcf/templates/headIncludeJavaScript.tpl
index dacb6f49e7..d10950f90c 100644
--- a/com.woltlab.wcf/templates/headIncludeJavaScript.tpl
+++ b/com.woltlab.wcf/templates/headIncludeJavaScript.tpl
@@ -42,6 +42,9 @@
 <script src="{@$__wcf->getPath()}js/3rdParty/jquery-ui.timepicker{if !ENABLE_DEBUG_MODE}.min{/if}.js?v={@LAST_UPDATE_TIME}"></script>
 <script src="{@$__wcf->getPath()}js/WCF.Assets.js?v={@LAST_UPDATE_TIME}"></script>
 <script src="{@$__wcf->getPath()}js/WCF.js?v={@LAST_UPDATE_TIME}"></script>
+
+<script src="{@$__wcf->getPath()}js/require.js?v={@LAST_UPDATE_TIME}"></script>
+
 {else}
 <script src="{@$__wcf->getPath()}js/WCF.Combined.min.js?v={@LAST_UPDATE_TIME}"></script>
 {/if}
@@ -128,13 +131,65 @@
 		{event name='javascriptLanguageImport'}
 	});
 	
-	new WCF.Date.Time();
+	$(function() {
+	console.time('wcf');
+	//WCF.TabMenu.init();
+	//WCF.System.FlexibleMenu.init();
+	console.timeEnd('wcf');
+	});
+</script>
+
+<script data-relocate="true">
+	requirejs.config({
+		baseUrl: '{@$__wcf->getPath()}js',
+		map: {
+			'*': {
+				'CallbackList': 'WoltLab/WCF/CallbackList',
+				'Core': 'WoltLab/WCF/Core',
+				'Dictionary': 'WoltLab/WCF/Dictionary',
+				'DOM/Traverse': 'WoltLab/WCF/DOM/Traverse',
+				'DOM/Util': 'WoltLab/WCF/DOM/Util',
+				'EventHandler': 'WoltLab/WCF/Event/Handler',
+				'UI/Alignment': 'WoltLab/WCF/UI/Alignment',
+				'UI/SimpleDropdown': 'WoltLab/WCF/UI/Dropdown/Simple'
+			}
+		}
+	});
+	
+	/*require(function(require) {
+		var ui = require('WCF/UI');
+		
+		console.debug(ui);
+	});*/
+	
+	define('jQuery', [], function() { return window.jQuery; });
+	define('enquire', [], function() { return window.enquire; });
 	
-	WCF.Dropdown.init();
-	WCF.System.Mobile.UX.init();
+	$.holdReady(true);
+	require(['Core'], function(core) {
+		core.setup();
+	});
+	/*
+	require(['WoltLab/WCF/Date/Time/Relative', 'UI/SimpleDropdown'], function(relative, dropdown) {
+		relative.init();
+		
+		console.time('wcfNew');
+		dropdown.setup();
+		console.timeEnd('wcfNew');
+		
+		$.holdReady(false);
+	});
+	*/
+	/*
+	require(function(require) {
+		var core = require('WoltLab/WCF/Core');
+		
+		core.Init();
+	});
 	
-	WCF.TabMenu.init();
-	WCF.System.FlexibleMenu.init();
+	require(['WoltLab/WCF/Core'], function(core) {
+		core.Init();
+	});*/
 </script>
 
 {if ENABLE_DEBUG_MODE}
diff --git a/wcfsetup/install/files/js/WCF.js b/wcfsetup/install/files/js/WCF.js
index 31486786d7..a132200bde 100755
--- a/wcfsetup/install/files/js/WCF.js
+++ b/wcfsetup/install/files/js/WCF.js
@@ -409,11 +409,7 @@ $.fn.extend({
 	 * @return	string
 	 */
 	wcfIdentify: function() {
-		if (!this.attr('id')) {
-			this.attr('id', WCF.getRandomID());
-		}
-		
-		return this.attr('id');
+		return window.domUtilIdentify(this[0]);
 	},
 	
 	/**
@@ -624,14 +620,7 @@ $.extend(WCF, {
 	 * @return	string
 	 */
 	getRandomID: function() {
-		var $elementID = '';
-		
-		do {
-			$elementID = 'wcf' + this._idCounter++;
-		}
-		while ($.wcfIsset($elementID));
-		
-		return $elementID;
+		return window.domUtilGetUniqueId();
 	},
 	
 	/**
@@ -832,6 +821,8 @@ WCF.Dropdown = {
 	 */
 	_dropdowns: { },
 	
+	
+	
 	/**
 	 * container for dropdown menus
 	 * @var	object
@@ -844,78 +835,14 @@ WCF.Dropdown = {
 	 */
 	_menus: { },
 	
-	/**
-	 * Initializes dropdowns.
-	 */
-	init: function() {
-		if (this._menuContainer === null) {
-			this._menuContainer = $('<div id="dropdownMenuContainer" />').appendTo(document.body);
-		}
-		
-		var self = this;
-		$('.dropdownToggle:not(.jsDropdownEnabled)').each(function(index, button) {
-			self.initDropdown($(button), false);
-		});
-		
-		if (!this._didInit) {
-			this._didInit = true;
-			
-			WCF.CloseOverlayHandler.addCallback('WCF.Dropdown', $.proxy(this._closeAll, this));
-			WCF.DOMNodeInsertedHandler.addCallback('WCF.Dropdown', $.proxy(this.init, this));
-			$(document).on('scroll', $.proxy(this._scroll, this));
-		}
-	},
-	
-	/**
-	 * Handles dropdown positions in overlays when scrolling in the overlay.
-	 * 
-	 * @param	object		event
-	 */
-	_dialogScroll: function(event) {
-		var $dialogContent = $(event.currentTarget);
-		$dialogContent.find('.dropdown.dropdownOpen').each(function(index, element) {
-			var $dropdown = $(element);
-			var $dropdownID = $dropdown.wcfIdentify();
-			var $dropdownOffset = $dropdown.offset();
-			var $dialogContentOffset = $dialogContent.offset();
-			
-			var $verticalScrollTolerance = $(element).height() / 2;
-			
-			// check if dropdown toggle is still (partially) visible
-			if ($dropdownOffset.top + $verticalScrollTolerance <= $dialogContentOffset.top) {
-				// top check
-				WCF.Dropdown.toggleDropdown($dropdownID);
-			}
-			else if ($dropdownOffset.top >= $dialogContentOffset.top + $dialogContent.height()) {
-				// bottom check
-				WCF.Dropdown.toggleDropdown($dropdownID);
-			}
-			else if ($dropdownOffset.left <= $dialogContentOffset.left) {
-				// left check
-				WCF.Dropdown.toggleDropdown($dropdownID);
-			}
-			else if ($dropdownOffset.left >= $dialogContentOffset.left + $dialogContent.width()) {
-				// right check
-				WCF.Dropdown.toggleDropdown($dropdownID);
-			}
-			else {
-				WCF.Dropdown.setAlignmentByID($dropdown.wcfIdentify());
-			}
-		});
-	},
+	_api: null,
 	
 	/**
-	 * Handles dropdown positions in overlays when scrolling in the document.
-	 * 
-	 * @param	object		event
+	 * Initializes dropdowns.
 	 */
-	_scroll: function(event) {
-		for (var $containerID in this._dropdowns) {
-			var $dropdown = this._dropdowns[$containerID];
-			if ($dropdown.data('isOverlayDropdownButton') && $dropdown.hasClass('dropdownOpen')) {
-				this.setAlignmentByID($containerID);
-			}
-		}
+	init: function(api) {
+		if (api) this._api = api;
+		else if (this._api !== null) this._api.initAll();
 	},
 	
 	/**
@@ -925,42 +852,7 @@ WCF.Dropdown = {
 	 * @param	boolean		isLazyInitialization
 	 */
 	initDropdown: function(button, isLazyInitialization) {
-		if (button.hasClass('jsDropdownEnabled') || button.data('target')) {
-			return;
-		}
-		
-		var $dropdown = button.parents('.dropdown');
-		if (!$dropdown.length) {
-			// broken dropdown, ignore
-			console.debug("[WCF.Dropdown] Invalid dropdown passed, button '" + button.wcfIdentify() + "' does not have a parent with .dropdown, aborting.");
-			return;
-		}
-		
-		var $dropdownMenu = button.next('.dropdownMenu');
-		if (!$dropdownMenu.length) {
-			// broken dropdown, ignore
-			console.debug("[WCF.Dropdown] Invalid dropdown passed, dropdown '" + $dropdown.wcfIdentify() + "' does not have a dropdown menu, aborting.");
-			return;
-		}
-		
-		$dropdownMenu.detach().appendTo(this._menuContainer);
-		var $containerID = $dropdown.wcfIdentify();
-		if (!this._dropdowns[$containerID]) {
-			button.addClass('jsDropdownEnabled').click($.proxy(this._toggle, this));
-			
-			this._dropdowns[$containerID] = $dropdown;
-			this._menus[$containerID] = $dropdownMenu;
-			
-			if (!$containerID.match(/^wcf\d+$/)) {
-				$dropdownMenu.attr('data-source', $containerID);
-			}
-		}
-		
-		button.data('target', $containerID);
-		
-		if (isLazyInitialization) {
-			button.trigger('click');
-		}
+		this._api.init(button[0], isLazyInitialization);
 	},
 	
 	/**
@@ -969,11 +861,7 @@ WCF.Dropdown = {
 	 * @param	string		containerID
 	 */
 	removeDropdown: function(containerID) {
-		if (this._menus[containerID]) {
-			$(this._menus[containerID]).remove();
-			delete this._menus[containerID];
-			delete this._dropdowns[containerID];
-		}
+		this._api.remove(containerID);
 	},
 	
 	/**
@@ -984,14 +872,7 @@ WCF.Dropdown = {
 	 * @param	jQuery		dropdownMenu
 	 */
 	initDropdownFragment: function(dropdown, dropdownMenu) {
-		var $containerID = dropdown.wcfIdentify();
-		if (this._dropdowns[$containerID]) {
-			console.debug("[WCF.Dropdown] Cannot register dropdown identified by '" + $containerID + "' as a fragement.");
-			return;
-		}
-		
-		this._dropdowns[$containerID] = dropdown;
-		this._menus[$containerID] = dropdownMenu.detach().appendTo(this._menuContainer);
+		this._api.initFragment(dropdown[0], dropdownMenu[0]);
 	},
 	
 	/**
@@ -1001,16 +882,7 @@ WCF.Dropdown = {
 	 * @var		object		callback
 	 */
 	registerCallback: function(identifier, callback) {
-		if (!$.isFunction(callback)) {
-			console.debug("[WCF.Dropdown] Callback for '" + identifier + "' is invalid");
-			return false;
-		}
-		
-		if (!this._callbacks[identifier]) {
-			this._callbacks[identifier] = [ ];
-		}
-		
-		this._callbacks[identifier].push(callback);
+		this._api.registerCallback(identifier, callback);
 	},
 	
 	/**
@@ -1020,47 +892,7 @@ WCF.Dropdown = {
 	 * @param	string		targetID
 	 */
 	_toggle: function(event, targetID) {
-		var $targetID = (event === null) ? targetID : $(event.currentTarget).data('target');
-		
-		// check if 'isOverlayDropdownButton' is set which indicates if
-		// the dropdown toggle is in an overlay
-		var $target = this._dropdowns[$targetID];
-		if ($target && $target.data('isOverlayDropdownButton') === undefined) {
-			var $dialogContent = $target.parents('.dialogContent');
-			$target.data('isOverlayDropdownButton', $dialogContent.length > 0);
-			
-			if ($dialogContent.length) {
-				$dialogContent.on('scroll', this._dialogScroll);
-			}
-		}
-		
-		// close all dropdowns
-		for (var $containerID in this._dropdowns) {
-			var $dropdown = this._dropdowns[$containerID];
-			var $dropdownMenu = this._menus[$containerID];
-			
-			if ($dropdown.hasClass('dropdownOpen')) {
-				$dropdown.removeClass('dropdownOpen');
-				$dropdownMenu.removeClass('dropdownOpen');
-				
-				this._notifyCallbacks($containerID, 'close');
-			}
-			else if ($containerID === $targetID && $dropdownMenu[0].children.length > 0) {
-				$dropdown.addClass('dropdownOpen');
-				$dropdownMenu.addClass('dropdownOpen');
-				
-				this._notifyCallbacks($containerID, 'open');
-				
-				this.setAlignment($dropdown, $dropdownMenu);
-			}
-		}
-		
-		WCF.Dropdown.Interactive.Handler.closeAll();
-		
-		if (event !== null) {
-			event.stopPropagation();
-			return false;
-		}
+		this._api._toggle(event, targetID);
 	},
 	
 	/**
@@ -1069,7 +901,7 @@ WCF.Dropdown = {
 	 * @param	string		containerID
 	 */
 	toggleDropdown: function(containerID) {
-		this._toggle(null, containerID);
+		this._api._toggle(null, containerID);
 	},
 	
 	/**
@@ -1079,11 +911,9 @@ WCF.Dropdown = {
 	 * @return	jQuery
 	 */
 	getDropdown: function(containerID) {
-		if (this._dropdowns[containerID]) {
-			return this._dropdowns[containerID];
-		}
+		var dropdown = this._api.getDropdown(containerID);
 		
-		return null;
+		return (dropdown) ? $(dropdown) : null;
 	},
 	
 	/**
@@ -1093,11 +923,9 @@ WCF.Dropdown = {
 	 * @return	jQuery
 	 */
 	getDropdownMenu: function(containerID) {
-		if (this._menus[containerID]) {
-			return this._menus[containerID];
-		}
+		var menu = this._api.getDropdownMenu(containerID);
 		
-		return null;
+		return (menu) ? $(menu) : null;
 	},
 	
 	/**
@@ -1106,17 +934,7 @@ WCF.Dropdown = {
 	 * @param	string		containerID
 	 */
 	setAlignmentByID: function(containerID) {
-		var $dropdown = this.getDropdown(containerID);
-		if ($dropdown === null) {
-			console.debug("[WCF.Dropdown] Unable to find dropdown identified by '" + containerID + "'");
-		}
-		
-		var $dropdownMenu = this.getDropdownMenu(containerID);
-		if ($dropdownMenu === null) {
-			console.debug("[WCF.Dropdown] Unable to find dropdown menu identified by '" + containerID + "'");
-		}
-		
-		this.setAlignment($dropdown, $dropdownMenu);
+		this._api.setAlignmentById(containerID);
 	},
 	
 	/**
@@ -1126,169 +944,14 @@ WCF.Dropdown = {
 	 * @param	jQuery		dropdownMenu
 	 */
 	setAlignment: function(dropdown, dropdownMenu) {
-		// force dropdown menu to be placed in the upper left corner, otherwise
-		// it might cause the calculations to be a bit off if the page exceeds
-		// the window boundaries during getDimensions() making it visible
-		if (!dropdownMenu.data('isInitialized')) {
-			dropdownMenu.data('isInitialized', true).css({ left: 0, top: 0 });
-		}
-		
-		// get dropdown position
-		var $dropdownDimensions = dropdown.getDimensions('outer');
-		var $dropdownOffsets = dropdown.getOffsets('offset');
-		var $menuDimensions = dropdownMenu.getDimensions('outer');
-		var $windowWidth = $(window).width();
-		
-		// check if button belongs to an i18n textarea
-		var $button = dropdown.find('.dropdownToggle');
-		if ($button.hasClass('dropdownCaptionTextarea')) {
-			// use button dimensions instead
-			$dropdownDimensions = $button.getDimensions('outer');
-		}
-		
-		// get alignment
-		var $align = 'left';
-		if (($dropdownOffsets.left + $menuDimensions.width) > $windowWidth) {
-			$align = 'right';
-		}
-		
-		// calculate offsets
-		var $left = 'auto';
-		var $right = 'auto';
-		if ($align === 'left') {
-			dropdownMenu.removeClass('dropdownArrowRight');
-			
-			$left = $dropdownOffsets.left;
-		}
-		else {
-			dropdownMenu.addClass('dropdownArrowRight');
-			
-			$right = ($windowWidth - ($dropdownOffsets.left + $dropdownDimensions.width));
-		}
-		
-		// rtl works the same with the exception that we need to offset it with the right boundary
-		if (WCF.Language.get('wcf.global.pageDirection') == 'rtl') {
-			var $oldLeft = $left;
-			var $oldRight = $right;
-			
-			// use reverse positioning
-			if ($left == 'auto') {
-				dropdownMenu.removeClass('dropdownArrowRight');
-			}
-			else {
-				$right = $windowWidth - ($dropdownOffsets.left + $dropdownDimensions.width);
-				$left = 'auto';
-				
-				if ($right + $menuDimensions.width > $windowWidth) {
-					// exceeded window width, restore ltr values
-					$left = $oldLeft;
-					$right = $oldRight;
-					
-					dropdownMenu.addClass('dropdownArrowRight');
-				}
-			}
-		}
-		
-		if ($left == 'auto') $right += 'px';
-		else $left += 'px';
-		
-		// calculate vertical offset
-		var $wasHidden = true;
-		if (dropdownMenu.hasClass('dropdownOpen')) {
-			$wasHidden = false;
-			dropdownMenu.removeClass('dropdownOpen');
-		}
-		
-		var $bottom = 'auto';
-		var $top = $dropdownOffsets.top + $dropdownDimensions.height + 7;
-		
-		if ($.browser.smartphone) {
-			var $align = 'bottom';
-			var $forceLimit = false;
-			var $windowHeight = $(window).height();
-			var $projectedBottom = $top + $menuDimensions.height;
-			
-			// dropdown exceeds bottom boundary, check if the difference is lower if we open it towards top
-			if ($projectedBottom > $windowHeight) {
-				var $projectedTop = $dropdownOffsets.top + 10 - $menuDimensions.height;
-				
-				// align upwards
-				if ($projectedTop >= 0) {
-					$align = 'top';
-				}
-				else {
-					$forceLimit = true;
-					
-					// check which direction (up or down) provides more space
-					var $differenceTop = Math.abs($projectedTop);
-					var $differenceBottom = Math.abs($projectedBottom - $windowHeight);
-					if ($differenceBottom <= $differenceTop) {
-						$align = 'bottom';
-					}
-					else {
-						$align = 'top';
-					}
-				}
-			}
-			
-			if ($align == 'top') {
-				$bottom = $(window).height() - $dropdownOffsets.top + 10;
-				$top = 'auto';
-				
-				if ($forceLimit) {
-					$top = 0;
-					dropdownMenu.children('ul.scrollableDropdownMenu').css('max-height', $bottom);
-				}
-				
-				dropdownMenu.addClass('dropdownArrowBottom');
-			}
-			else {
-				if ($forceLimit) {
-					$bottom = 0;
-					var $ul = dropdownMenu.children('ul.scrollableDropdownMenu');
-					$ul.css('max-height', Math.min($ul.css('max-height').replace(/px$/, ''), $windowHeight - $top));
-				}
-				
-				dropdownMenu.removeClass('dropdownArrowBottom');
-			}
-		}
-		else {
-			if ($top + $menuDimensions.height > $(window).height() + $(document).scrollTop()) {
-				$bottom = $(window).height() - $dropdownOffsets.top + 10;
-				$top = 'auto';
-				
-				dropdownMenu.addClass('dropdownArrowBottom');
-			}
-			else {
-				dropdownMenu.removeClass('dropdownArrowBottom');
-			}
-		}
-		
-		if (!$wasHidden) {
-			dropdownMenu.addClass('dropdownOpen');
-		}
-		
-		dropdownMenu.css({
-			bottom: $bottom,
-			left: $left,
-			right: $right,
-			top: $top
-		});
+		this._api.setAlignment(dropdown[0], dropdownMenu[0]);
 	},
 	
 	/**
 	 * Closes all dropdowns.
 	 */
 	_closeAll: function() {
-		for (var $containerID in this._dropdowns) {
-			var $dropdown = this._dropdowns[$containerID];
-			if ($dropdown.hasClass('dropdownOpen')) {
-				$dropdown.removeClass('dropdownOpen');
-				this._menus[$containerID].removeClass('dropdownOpen');
-				
-				this._notifyCallbacks($containerID, 'close');
-			}
-		}
+		this._api.closeAll();
 	},
 	
 	/**
@@ -1297,28 +960,7 @@ WCF.Dropdown = {
 	 * @param	string		containerID
 	 */
 	close: function(containerID) {
-		if (!this._dropdowns[containerID]) {
-			return;
-		}
-		
-		this._dropdowns[containerID].removeClass('dropdownOpen');
-		this._menus[containerID].removeClass('dropdownOpen');
-	},
-	
-	/**
-	 * Notifies callbacks.
-	 * 
-	 * @param	string		containerID
-	 * @param	string		action
-	 */
-	_notifyCallbacks: function(containerID, action) {
-		if (!this._callbacks[containerID]) {
-			return;
-		}
-		
-		for (var $i = 0, $length = this._callbacks[containerID].length; $i < $length; $i++) {
-			this._callbacks[containerID][$i](containerID, action);
-		}
+		this._api.close(containerID);
 	},
 	
 	/**
@@ -1328,15 +970,7 @@ WCF.Dropdown = {
 	 * @return	boolean
 	 */
 	destroy: function(containerID) {
-		if (this._dropdowns[containerID] === undefined) {
-			return false;
-		}
-		
-		this.close(containerID);
-		
-		this._menus[containerID].remove();
-		delete this._menus[containerID];
-		delete this._dropdowns[containerID];
+		this._api.destroy(containerID);
 	}
 };
 
@@ -3610,128 +3244,6 @@ WCF.Date.Util = {
 	}
 };
 
-/**
- * Handles relative time designations.
- */
-WCF.Date.Time = Class.extend({
-	/**
-	 * Date of current timestamp
-	 * @var	Date
-	 */
-	_date: 0,
-	
-	/**
-	 * list of time elements
-	 * @var	jQuery
-	 */
-	_elements: null,
-	
-	/**
-	 * difference between server and local time
-	 * @var	integer
-	 */
-	_offset: null,
-	
-	/**
-	 * current timestamp
-	 * @var	integer
-	 */
-	_timestamp: 0,
-	
-	/**
-	 * Initializes relative datetimes.
-	 */
-	init: function() {
-		this._elements = $('time.datetime');
-		this._offset = null;
-		this._timestamp = 0;
-		
-		// calculate relative datetime on init
-		this._refresh();
-		
-		// re-calculate relative datetime every minute
-		new WCF.PeriodicalExecuter($.proxy(this._refresh, this), 60000);
-		
-		// bind dom node inserted listener
-		WCF.DOMNodeInsertedHandler.addCallback('WCF.Date.Time', $.proxy(this._domNodeInserted, this));
-	},
-	
-	/**
-	 * Updates element collection once a DOM node was inserted.
-	 */
-	_domNodeInserted: function() {
-		this._elements = $('time.datetime');
-		this._refresh();
-	},
-	
-	/**
-	 * Refreshes relative datetime for each element.
-	 */
-	_refresh: function() {
-		this._date = new Date();
-		this._timestamp = (this._date.getTime() - this._date.getMilliseconds()) / 1000;
-		if (this._offset === null) {
-			this._offset = this._timestamp - TIME_NOW;
-		}
-		
-		this._elements.each($.proxy(this._refreshElement, this));
-	},
-	
-	/**
-	 * Refreshes relative datetime for current element.
-	 * 
-	 * @param	integer		index
-	 * @param	object		element
-	 */
-	_refreshElement: function(index, element) {
-		var $element = $(element);
-		
-		if (!$element.attr('title')) {
-			$element.attr('title', $element.text());
-		}
-		
-		var $timestamp = $element.data('timestamp') + this._offset;
-		var $date = $element.data('date');
-		var $time = $element.data('time');
-		var $offset = $element.data('offset');
-		
-		// skip for future dates
-		if ($element.data('isFutureDate')) return;
-		
-		// timestamp is less than 60 seconds ago
-		if ($timestamp >= this._timestamp || this._timestamp < ($timestamp + 60)) {
-			$element.text(WCF.Language.get('wcf.date.relative.now'));
-		}
-		// timestamp is less than 60 minutes ago (display 1 hour ago rather than 60 minutes ago)
-		else if (this._timestamp < ($timestamp + 3540)) {
-			var $minutes = Math.max(Math.round((this._timestamp - $timestamp) / 60), 1);
-			$element.text(WCF.Language.get('wcf.date.relative.minutes', { minutes: $minutes }));
-		}
-		// timestamp is less than 24 hours ago
-		else if (this._timestamp < ($timestamp + 86400)) {
-			var $hours = Math.round((this._timestamp - $timestamp) / 3600);
-			$element.text(WCF.Language.get('wcf.date.relative.hours', { hours: $hours }));
-		}
-		// timestamp is less than 6 days ago
-		else if (this._timestamp < ($timestamp + 518400)) {
-			var $midnight = new Date(this._date.getFullYear(), this._date.getMonth(), this._date.getDate());
-			var $days = Math.ceil(($midnight / 1000 - $timestamp) / 86400);
-			
-			// get day of week
-			var $dateObj = WCF.Date.Util.getTimezoneDate(($timestamp * 1000), $offset * 1000);
-			var $dow = $dateObj.getDay();
-			var $day = WCF.Language.get('__days')[$dow];
-			
-			$element.text(WCF.Language.get('wcf.date.relative.pastDays', { days: $days, day: $day, time: $time }));
-		}
-		// timestamp is between ~700 million years BC and last week
-		else {
-			var $string = WCF.Language.get('wcf.date.shortDateTimeFormat');
-			$element.text($string.replace(/\%date\%/, $date).replace(/\%time\%/, $time));
-		}
-	}
-});
-
 /**
  * Hash-like dictionary. Based upon idead from Prototype's hash
  * 
@@ -4365,6 +3877,12 @@ WCF.TabMenu = {
 	 * Initializes all TabMenus
 	 */
 	init: function() {
+		require(['WoltLab/WCF/UI/TabMenu'], function(tabMenu) {
+			tabMenu.init();
+		});
+		
+		return;
+		
 		var $containers = $('.tabMenuContainer:not(.staticTabMenuContainer)');
 		var self = this;
 		$containers.each(function(index, tabMenu) {
@@ -7368,148 +6886,6 @@ WCF.System.FlexibleMenu = {
  */
 WCF.System.Mobile = { };
 
-/**
- * Handles general navigation and UX on mobile devices.
- */
-WCF.System.Mobile.UX = {
-	/**
-	 * true if mobile optimizations are enabled
-	 * @var	boolean
-	 */
-	_enabled: false,
-	
-	/**
-	 * main container
-	 * @var	jQuery
-	 */
-	_main: null,
-	
-	/**
-	 * sidebar container
-	 * @var	jQuery
-	 */
-	_sidebar: null,
-	
-	/**
-	 * Initializes the WCF.System.Mobile.UX class.
-	 */
-	init: function() {
-		this._enabled = false;
-		this._main = $('#main');
-		this._sidebar = this._main.find('> div > div > .sidebar');
-		
-		if ($.browser.touch) {
-			$('html').addClass('touch');
-		}
-		
-		enquire.register('screen and (max-width: 800px)', {
-			match: $.proxy(this._enable, this),
-			unmatch: $.proxy(this._disable, this),
-			setup: $.proxy(this._setup, this),
-			deferSetup: true
-		});
-		
-		if ($.browser.msie && this._sidebar.width() > 305) {
-			// sidebar is rarely broken on IE9/IE10
-			this._sidebar.css('display', 'none').css('display', '');
-		}
-	},
-	
-	/**
-	 * Initializes the mobile optimization once the media query matches.
-	 */
-	_setup: function() {
-		this._initSidebarToggleButtons();
-		this._initSearchBar();
-		this._initButtonGroupNavigation();
-		
-		WCF.CloseOverlayHandler.addCallback('WCF.System.Mobile.UX', $.proxy(this._closeMenus, this));
-		WCF.DOMNodeInsertedHandler.addCallback('WCF.System.Mobile.UX', $.proxy(this._initButtonGroupNavigation, this));
-	},
-	
-	/**
-	 * Enables the mobile optimization.
-	 */
-	_enable: function() {
-		this._enabled = true;
-		
-		if ($.browser.msie) {
-			this._sidebar.css('display', 'none').css('display', '');
-		}
-	},
-	
-	/**
-	 * Disables the mobile optimization.
-	 */
-	_disable: function() {
-		this._enabled = false;
-		
-		if ($.browser.msie) {
-			this._sidebar.css('display', 'none').css('display', '');
-		}
-	},
-	
-	/**
-	 * Initializes the sidebar toggle buttons.
-	 */
-	_initSidebarToggleButtons: function() {
-		var $sidebarLeft = this._main.hasClass('sidebarOrientationLeft');
-		var $sidebarRight = this._main.hasClass('sidebarOrientationRight');
-		if ($sidebarLeft || $sidebarRight) {
-			// use icons if language item is empty/non-existant
-			var $languageShowSidebar = 'wcf.global.sidebar.show' + ($sidebarLeft ? 'Left' : 'Right') + 'Sidebar';
-			if ($languageShowSidebar === WCF.Language.get($languageShowSidebar) || WCF.Language.get($languageShowSidebar) === '') {
-				$languageShowSidebar = '<span class="icon icon16 icon-double-angle-' + ($sidebarLeft ? 'left' : 'right') + '" />';
-			}
-			
-			var $languageHideSidebar = 'wcf.global.sidebar.hide' + ($sidebarLeft ? 'Left' : 'Right') + 'Sidebar';
-			if ($languageHideSidebar === WCF.Language.get($languageHideSidebar) || WCF.Language.get($languageHideSidebar) === '') {
-				$languageHideSidebar = '<span class="icon icon16 icon-double-angle-' + ($sidebarLeft ? 'right' : 'left') + '" />';
-			}
-			
-			// add toggle buttons
-			var self = this;
-			$('<span class="button small mobileSidebarToggleButton">' + $languageShowSidebar + '</span>').appendTo($('.content')).click(function() { self._main.addClass('mobileShowSidebar'); });
-			$('<span class="button small mobileSidebarToggleButton">' + $languageHideSidebar + '</span>').appendTo($('.sidebar')).click(function() { self._main.removeClass('mobileShowSidebar'); });
-		}
-	},
-	
-	/**
-	 * Initializes the search bar.
-	 */
-	_initSearchBar: function() {
-		var $searchBar = $('.searchBar:eq(0)');
-		
-		var self = this;
-		$searchBar.click(function() {
-			if (self._enabled) {
-				$searchBar.addClass('searchBarOpen');
-			}
-		});
-		
-		this._main.click(function() { $searchBar.removeClass('searchBarOpen'); });
-	},
-	
-	/**
-	 * Initializes the button group lists, converting them into native dropdowns.
-	 */
-	_initButtonGroupNavigation: function() {
-		$('.buttonGroupNavigation:not(.jsMobileButtonGroupNavigation)').each(function(index, navigation) {
-			var $navigation = $(navigation).addClass('jsMobileButtonGroupNavigation');
-			var $button = $('<a class="dropdownLabel"><span class="icon icon24 icon-list" /></a>').prependTo($navigation);
-			
-			$button.click(function() { $button.next().toggleClass('open'); return false; });
-		});
-	},
-	
-	/**
-	 * Closes menus.
-	 */
-	_closeMenus: function() {
-		$('.jsMobileButtonGroupNavigation > ul.open').removeClass('open');
-	}
-};
-
 /**
  * Stores object references for global access.
  */
@@ -11639,173 +11015,16 @@ $.widget('ui.wcfSlideshow', {
 	}
 });
 
-/**
- * Custom tab menu implementation for WCF.
- */
-$.widget('ui.wcfTabs', $.ui.tabs, {
-	/**
-	 * Workaround for ids containing a dot ".", until jQuery UI devs learn
-	 * to properly escape ids ... (it took 18 months until they finally
-	 * fixed it!)
-	 * 
-	 * @see	http://bugs.jqueryui.com/ticket/4681
-	 * @see	$.ui.tabs.prototype._sanitizeSelector()
-	 */
-	_sanitizeSelector: function(hash) {
-		return hash.replace(/([:\.])/g, '\\$1');
-	},
-	
-	/**
-	 * @see	$.ui.tabs.prototype.select()
-	 */
-	select: function(index) {
-		if (!$.isNumeric(index)) {
-			// panel identifier given
-			this.panels.each(function(i, panel) {
-				if ($(panel).wcfIdentify() === index) {
-					index = i;
-					return false;
-				}
-			});
-			
-			// unable to identify panel
-			if (!$.isNumeric(index)) {
-				console.debug("[ui.wcfTabs] Unable to find panel identified by '" + index + "', aborting.");
-				return;
-			}
-		}
+jQuery.fn.extend({
+	wcfTabs: function(method) {
+		var parameters = arguments;
 		
-		this._setOption('active', index);
-	},
-	
-	/**
-	 * Selects a specific tab by triggering the 'click' event.
-	 * 
-	 * @param	string		tabIdentifier
-	 */
-	selectTab: function(tabIdentifier) {
-		tabIdentifier = '#' + tabIdentifier;
-		
-		this.anchors.each(function(index, anchor) {
-			var $anchor = $(anchor);
-			if ($anchor.prop('hash') === tabIdentifier) {
-				$anchor.trigger('click');
-				return false;
+		require(['DOM/Util', 'WoltLab/WCF/UI/TabMenu'], (function(DOMUtil, TabMenu) {
+			var container = TabMenu.getTabMenu(DOMUtil.identify(this[0]));
+			if (container !== null) {
+				container[method].apply(container, Array.prototype.slice.call(parameters, 1));
 			}
-		});
-	},
-	
-	/**
-	 * Returns the currently selected tab index.
-	 * 
-	 * @return	integer
-	 */
-	getCurrentIndex: function() {
-		return this.lis.index(this.lis.filter('.ui-tabs-selected'));
-	},
-	
-	/**
-	 * Returns true if identifier is used by an anchor.
-	 * 
-	 * @param	string		identifier
-	 * @param	boolean		isChildren
-	 * @return	boolean
-	 */
-	hasAnchor: function(identifier, isChildren) {
-		var $matches = false;
-		
-		this.anchors.each(function(index, anchor) {
-			var $href = $(anchor).attr('href');
-			if (/#.+/.test($href)) {
-				// split by anchor
-				var $parts = $href.split('#', 2);
-				if (isChildren) {
-					$parts = $parts[1].split('-', 2);
-				}
-				
-				if ($parts[1] === identifier) {
-					$matches = true;
-					
-					// terminate loop
-					return false;
-				}
-			}
-		});
-		
-		return $matches;
-	},
-	
-	/**
-	 * Shows default tab.
-	 */
-	revertToDefault: function() {
-		var $active = this.element.data('active');
-		if (!$active || $active === '') $active = 0;
-		
-		this.select($active);
-	},
-	
-	/**
-	 * @see	$.ui.tabs.prototype._processTabs()
-	 */
-	_processTabs: function() {
-		var that = this;
-		
-		this.tablist = this._getList()
-			.addClass( "ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all" )
-			.attr( "role", "tablist" );
-		
-		this.tabs = this.tablist.find( "> li:has(a[href])" )
-			.addClass( "ui-state-default ui-corner-top" )
-			.attr({
-				role: "tab",
-				tabIndex: -1
-			});
-		
-		this.anchors = this.tabs.map(function() {
-				return $( "a", this )[ 0 ];
-			})
-			.addClass( "ui-tabs-anchor" )
-			.attr({
-				role: "presentation",
-				tabIndex: -1
-			});
-		
-		this.panels = $();
-		
-		this.anchors.each(function( i, anchor ) {
-			var selector, panel,
-				anchorId = $( anchor ).uniqueId().attr( "id" ),
-				tab = $( anchor ).closest( "li" ),
-				originalAriaControls = tab.attr( "aria-controls" );
-			
-			// inline tab
-			selector = anchor.hash;
-			panel = that.element.find( that._sanitizeSelector( selector ) );
-			
-			if ( panel.length) {
-				that.panels = that.panels.add( panel );
-			}
-			if ( originalAriaControls ) {
-				tab.data( "ui-tabs-aria-controls", originalAriaControls );
-			}
-			tab.attr({
-				"aria-controls": selector.substring( 1 ),
-				"aria-labelledby": anchorId
-			});
-			panel.attr( "aria-labelledby", anchorId );
-		});
-		
-		this.panels
-			.addClass( "ui-tabs-panel ui-widget-content ui-corner-bottom" )
-			.attr( "role", "tabpanel" );
-	},
-	
-	/**
-	 * @see	$.ui.tabs.prototype.load()
-	 */
-	load: function( index, event ) {
-		return;
+		}).bind(this));
 	}
 });
 
diff --git a/wcfsetup/install/files/js/WoltLab/WCF/CallbackList.js b/wcfsetup/install/files/js/WoltLab/WCF/CallbackList.js
new file mode 100644
index 0000000000..148d77571b
--- /dev/null
+++ b/wcfsetup/install/files/js/WoltLab/WCF/CallbackList.js
@@ -0,0 +1,65 @@
+"use strict";
+
+/**
+ * Simple API to store and invoke multiple callbacks per identifier.
+ * 
+ * @author	Alexander Ebert
+ * @copyright	2001-2015 WoltLab GmbH
+ * @license	GNU Lesser General Public License <http://opensource.org/licenses/lgpl-license.php>
+ * @module	WoltLab/WCF/CallbackList
+ */
+define(['Dictionary'], function(Dictionary) {
+	/**
+	 * @constructor
+	 */
+	var CallbackList = function() {
+		this._dictionary = new Dictionary();
+	};
+	CallbackList.prototype = {
+		/**
+		 * Adds a callback for given identifier.
+		 * 
+		 * @param	{string}	identifier	arbitrary string to group and identify callbacks
+		 * @param	{function}	callback	callback function
+		 * @return	{boolean}	false if callback is not a function
+		 */
+		add: function(identifier, callback) {
+			if (typeof callback !== 'function') {
+				throw new TypeError("Expected a valid callback as second argument for identifier '" + identifier + "'.");
+				return false;
+			}
+			
+			if (!this._dictionary.has(identifier)) {
+				this._dictionary.set(identifier, []);
+			}
+			
+			this._dictionary.get(identifier).push(callback);
+			
+			return true;
+		},
+		
+		/**
+		 * Removes all callbacks registered for given identifier
+		 * 
+		 * @param	{string}	identifier	arbitrary string to group and identify callbacks
+		 */
+		remove: function(identifier) {
+			this._dictionary.remove(identifier);
+		},
+		
+		/**
+		 * Invokes callback function on each registered callback.
+		 * 
+		 * @param	{string}		identifier	arbitrary string to group and identify callbacks
+		 * @param	{function(function)}	callback	function called with the individual callback as parameter
+		 */
+		forEach: function(identifier, callback) {
+			var callbacks = this._dictionary.get(identifier);
+			if (callbacks !== null) {
+				callbacks.forEach(callback);
+			}
+		}
+	};
+	
+	return CallbackList;
+});
\ No newline at end of file
diff --git a/wcfsetup/install/files/js/WoltLab/WCF/Core.js b/wcfsetup/install/files/js/WoltLab/WCF/Core.js
new file mode 100644
index 0000000000..6eb70df14f
--- /dev/null
+++ b/wcfsetup/install/files/js/WoltLab/WCF/Core.js
@@ -0,0 +1,75 @@
+"use strict";
+
+/**
+ * Provides the basic core functionality.
+ * 
+ * @author	Alexander Ebert
+ * @copyright	2001-2015 WoltLab GmbH
+ * @license	GNU Lesser General Public License <http://opensource.org/licenses/lgpl-license.php>
+ * @module	WoltLab/WCF/Core
+ */
+define(['jQuery'], function($) {
+	/**
+	 * @constructor
+	 */
+	var Core = function() {};
+	Core.prototype = {
+		/**
+		 * Initializes the core UI modifications and unblocks jQuery's ready event.
+		 */
+		setup: function() {
+			require(['WoltLab/WCF/Date/Time/Relative', 'UI/SimpleDropdown', 'WoltLab/WCF/UI/Mobile', 'WoltLab/WCF/UI/TabMenu'], function(relativeTime, simpleDropdown, uiMobile, TabMenu) {
+				relativeTime.setup();
+				simpleDropdown.setup();
+				uiMobile.setup();
+				TabMenu.init();
+				
+				$.holdReady(false);
+			});
+		},
+		
+		/**
+		 * Merges objects with the first argument.
+		 * 
+		 * @param	{object}	out		destination object
+		 * @param	{...object}	arguments	variable number of objects to be merged into the destination object
+		 * @return	{object}	destination object with all provided objects merged into
+		 */
+		extend: function(out) {
+			out = out || {};
+			
+			for (var i = 1, length = arguments.length; i < length; i++) {
+				var obj = arguments[i];
+				
+				if (!obj) continue;
+				
+				for (var key in obj) {
+					if (obj.hasOwnProperty(key)) {
+						if (typeof obj[key] === 'object') {
+							this.extend(out[key], obj[key]);
+						}
+						else {
+							out[key] = obj[key];
+						}
+					}
+				}
+			}
+			
+			return out;
+		},
+		
+		triggerEvent: function(el, eventName) {
+			var ev;
+			if (document.createEvent) {
+				ev = new Event(eventName);
+				el.dispatchEvent(ev);
+			}
+			else {
+				ev = document.createEventObject();
+				el.fireEvent('on' + eventName, ev);
+			}
+		}
+	};
+	
+	return new Core();
+});
diff --git a/wcfsetup/install/files/js/WoltLab/WCF/DOM/Traverse.js b/wcfsetup/install/files/js/WoltLab/WCF/DOM/Traverse.js
new file mode 100644
index 0000000000..1eb7b5afe0
--- /dev/null
+++ b/wcfsetup/install/files/js/WoltLab/WCF/DOM/Traverse.js
@@ -0,0 +1,174 @@
+"use strict";
+
+/**
+ * Provides helper functions to traverse the DOM.
+ * 
+ * @author	Alexander Ebert
+ * @copyright	2001-2015 WoltLab GmbH
+ * @license	GNU Lesser General Public License <http://opensource.org/licenses/lgpl-license.php>
+ * @module	WoltLab/WCF/DOM/Traverse
+ */
+define(['DOM/Util'], function(DOMUtil) {
+	/** @const */ var NONE = 0;
+	/** @const */ var SELECTOR = 1;
+	/** @const */ var CLASS_NAME = 2;
+	/** @const */ var TAG_NAME = 3;
+	
+	var _probe = [
+		function(el, none) { return true; },
+		function(el, selector) { return DOMUtil.matches(el, selector); },
+		function(el, className) { return el.classList.contains(className); },
+		function(el, tagName) { return el.nodeName === tagName; }
+	];
+	
+	var _parent = function(el, type, value) {
+		el = el.parentNode;
+		
+		while (el instanceof Element) {
+			if (_probe[type](el, value)) {
+				return el;
+			}
+			
+			el = el.parentNode;
+		}
+		
+		return null;
+	};
+	
+	var _sibling = function(el, siblingType, type, value) {
+		if (el instanceof Element) {
+			if (el[siblingType] !== null && _probe[type](el[siblingType], value)) {
+				return el[siblingType];
+			}
+		}
+		
+		return null;
+	};
+	
+	/**
+	 * @constructor
+	 */
+	var DOMTraverse = function() {};
+	DOMTraverse.prototype = {
+		/**
+		 * Examines parent nodes and returns the first parent that matches the given selector.
+		 * 
+		 * @param	{Element}	el		child element
+		 * @param	{string}	selector	CSS selector to match parent nodes against
+		 * @return	{(Element|null)}	null if no parent node matched the selector
+		 */
+		parentBySel: function(el, selector) {
+			return _parent(el, SELECTOR, selector);
+		},
+		
+		/**
+		 * Examines parent nodes and returns the first parent that has the given CSS class set.
+		 * 
+		 * @param	{Element}	el		child element
+		 * @param	{string}	className	CSS class name
+		 * @return	{(Element|null)}	null if there is no parent node with given class
+		 */
+		parentByClass: function(el, className) {
+			return _parent(el, CLASS_NAME, className);
+		},
+		
+		/**
+		 * Examines parent nodes and returns the first parent which equals the given tag.
+		 * 
+		 * @param	{Element}	el		child element
+		 * @param	{string}	tagName		element tag name
+		 * @return	{(Element|null)}	null if there is no parent node of given tag type
+		 */
+		parentByTag: function(el, tagName) {
+			return _parent(el, TAG_NAME, tagName);
+		},
+		
+		/**
+		 * Returns the next element sibling.
+		 * 
+		 * @param	{Element}	el		element
+		 * @return	{(Element|null)}	null if there is no next sibling element
+		 */
+		next: function(el) {
+			return _sibling(el, 'nextElementSibling', NONE, null);
+		},
+		
+		/**
+		 * Returns the next element sibling that matches the given selector.
+		 * 
+		 * @param	{Element}	el		element
+		 * @param	{string}	selector	CSS selector to match parent nodes against
+		 * @return	{(Element|null)}	null if there is no next sibling element or it does not match the selector
+		 */
+		nextBySel: function(el, selector) {
+			return _sibling(el, 'nextElementSibling', SELECTOR, selector);
+		},
+		
+		/**
+		 * Returns the next element sibling with given CSS class.
+		 * 
+		 * @param	{Element}	el		element
+		 * @param	{string}	className	CSS class name
+		 * @return	{(Element|null)}	null if there is no next sibling element or it does not have the class set
+		 */
+		nextByClass: function(el, className) {
+			return _sibling(el, 'nextElementSibling', CLASS_NAME, className);
+		},
+		
+		/**
+		 * Returns the next element sibling with given CSS class.
+		 * 
+		 * @param	{Element}	el		element
+		 * @param	{string}	className	CSS class name
+		 * @return	{(Element|null)}	null if there is no next sibling element or it does not have the class set
+		 */
+		nextByTag: function(el, tagName) {
+			return _sibling(el, 'nextElementSibling', CLASS_NAME, className);
+		},
+		
+		/**
+		 * Returns the previous element sibling.
+		 * 
+		 * @param	{Element}	el		element
+		 * @return	{(Element|null)}	null if there is no previous sibling element
+		 */
+		prev: function(el) {
+			return _sibling(el, 'previousElementSibling', NONE, null);
+		},
+		
+		/**
+		 * Returns the previous element sibling that matches the given selector.
+		 * 
+		 * @param	{Element}	el		element
+		 * @param	{string}	selector	CSS selector to match parent nodes against
+		 * @return	{(Element|null)}	null if there is no previous sibling element or it does not match the selector
+		 */
+		prevBySel: function(el, selector) {
+			return _sibling(el, 'previousElementSibling', SELECTOR, selector);
+		},
+		
+		/**
+		 * Returns the previous element sibling with given CSS class.
+		 * 
+		 * @param	{Element}	el		element
+		 * @param	{string}	className	CSS class name
+		 * @return	{(Element|null)}	null if there is no previous sibling element or it does not have the class set
+		 */
+		prevByClass: function(el, className) {
+			return _sibling(el, 'previousElementSibling', CLASS_NAME, className);
+		},
+		
+		/**
+		 * Returns the previous element sibling with given CSS class.
+		 * 
+		 * @param	{Element}	el		element
+		 * @param	{string}	className	CSS class name
+		 * @return	{(Element|null)}	null if there is no previous sibling element or it does not have the class set
+		 */
+		prevByTag: function(el, tagName) {
+			return _sibling(el, 'previousElementSibling', CLASS_NAME, className);
+		}
+	};
+	
+	return new DOMTraverse();
+});
\ No newline at end of file
diff --git a/wcfsetup/install/files/js/WoltLab/WCF/DOM/Util.js b/wcfsetup/install/files/js/WoltLab/WCF/DOM/Util.js
new file mode 100644
index 0000000000..ffa911b368
--- /dev/null
+++ b/wcfsetup/install/files/js/WoltLab/WCF/DOM/Util.js
@@ -0,0 +1,160 @@
+"use strict";
+
+/**
+ * Provides helper functions to work with DOM nodes.
+ * 
+ * @author	Alexander Ebert
+ * @copyright	2001-2015 WoltLab GmbH
+ * @license	GNU Lesser General Public License <http://opensource.org/licenses/lgpl-license.php>
+ * @module	WoltLab/WCF/DOM/Util
+ */
+define(function() {
+	var _matchesSelectorFunction = '';
+	var _possibleFunctions = ['matches', 'webkitMatchesSelector', 'mozMatchesSelector', 'msMatchesSelector'];
+	for (var i = 0; i < 4; i++) {
+		if (Element.prototype.hasOwnProperty(_possibleFunctions[i])) {
+			_matchesSelectorFunction = _possibleFunctions[i];
+			break;
+		}
+	}
+	
+	var _idCounter = 0;
+	
+	/**
+	 * @constructor
+	 */
+	var DOMUtil = function() {};
+	DOMUtil.prototype = {
+		/**
+		 * Returns a unique element id.
+		 * 
+		 * @return	{string}	unique id
+		 */
+		getUniqueId: function() {
+			var elementId;
+			
+			do {
+				elementId = 'wcf' + _idCounter++;
+			}
+			while (document.getElementById(elementId) !== null);
+			
+			return elementId;
+		},
+		
+		/**
+		 * Returns the element's id. If there is no id set, a unique id will be
+		 * created and assigned.
+		 * 
+		 * @param	{Element}	el	element
+		 * @return	{string}	element id
+		 */
+		identify: function(el) {
+			if (!el || !(el instanceof Element)) {
+				return null;
+			}
+			
+			var id = el.getAttribute('id');
+			if (!id) {
+				id = this.getUniqueId();
+				el.setAttribute('id', id);
+			}
+			
+			return id;
+		},
+		
+		/**
+		 * Returns true if element matches given CSS selector.
+		 * 
+		 * @param	{Element}	el		element
+		 * @param	{string}	selector	CSS selector
+		 * @return	{boolean}	true if element matches selector
+		 */
+		matches: function(el, selector) {
+			return el[_matchesSelectorFunction](selector);
+		},
+		
+		/**
+		 * Returns the outer height of an element including margins.
+		 * 
+		 * @param	{Element}		el		element
+		 * @param	{CSSStyleDeclaration=}	styles		result of window.getComputedStyle()
+		 * @return	{integer}	outer height in px
+		 */
+		outerHeight: function(el, styles) {
+			styles = styles || window.getComputedStyle(el);
+			
+			var height = el.offsetHeight;
+			height += ~~styles.marginTop + ~~styles.marginBottom;
+			
+			return height;
+		},
+		
+		/**
+		 * Returns the outer width of an element including margins.
+		 * 
+		 * @param	{Element}		el		element
+		 * @param	{CSSStyleDeclaration=}	styles		result of window.getComputedStyle()
+		 * @return	{integer}	outer width in px
+		 */
+		outerWidth: function(el, styles) {
+			styles = styles || window.getComputedStyle(el);
+			
+			var width = el.offsetWidth;
+			width += ~~styles.marginLeft + ~~styles.marginRight;
+			
+			return width;
+		},
+		
+		/**
+		 * Returns the outer dimensions of an element including margins.
+		 * 
+		 * @param	{Element}		el		element
+		 * @return	{{height: integer, width: integer}}	dimensions in px
+		 */
+		outerDimensions: function(el) {
+			var styles = window.getComputedStyle(el);
+			
+			return {
+				height: this.outerHeight(el, styles),
+				width: this.outerWidth(el, styles)
+			};
+		},
+		
+		/**
+		 * Returns the element's offset relative to the document's top left corner.
+		 * 
+		 * @param	{Element}	el	element
+		 * @return	{{left: integer, top: integer}}		offset relative to top left corner
+		 */
+		offset: function(el) {
+			var rect = el.getBoundingClientRect();
+			
+			return {
+				top: rect.top + document.body.scrollTop,
+				left: rect.left + document.body.scrollLeft
+			}
+		},
+		
+		/**
+		 * Applies a list of CSS properties to an element.
+		 * 
+		 * @param	{Element}		el	element
+		 * @param	{Object<string, mixed}	styles	list of CSS styles
+		 */
+		setStyles: function(el, styles) {
+			for (var property in styles) {
+				if (styles.hasOwnProperty(property)) {
+					el.style.setProperty(property, styles[property]);
+				}
+			}
+		}
+	};
+	
+	var domUtilObj = new DOMUtil();
+	
+	// expose methods on the window object for backwards-compatibility
+	window.domUtilGetUniqueId = domUtilObj.getUniqueId.bind(domUtilObj);
+	window.domUtilIdentify = domUtilObj.identify.bind(domUtilObj);
+	
+	return domUtilObj;
+});
diff --git a/wcfsetup/install/files/js/WoltLab/WCF/Date/Time/Relative.js b/wcfsetup/install/files/js/WoltLab/WCF/Date/Time/Relative.js
new file mode 100644
index 0000000000..477d740a1b
--- /dev/null
+++ b/wcfsetup/install/files/js/WoltLab/WCF/Date/Time/Relative.js
@@ -0,0 +1,85 @@
+"use strict";
+
+/**
+ * Transforms <time> elements to display the elapsed time relative to the current time.
+ * 
+ * @author	Alexander Ebert
+ * @copyright	2001-2015 WoltLab GmbH
+ * @license	GNU Lesser General Public License <http://opensource.org/licenses/lgpl-license.php>
+ * @module	WoltLab/WCF/Date/Time/Relative
+ */
+define(function() {
+	var _elements = null;
+	var _offset = null;
+	
+	/**
+	 * @constructor
+	 */
+	var DateTimeRelative = function() {};
+	DateTimeRelative.prototype = {
+		/**
+		 * Transforms <time> elements on init and binds event listeners.
+		 */
+		setup: function() {
+			_elements = document.getElementsByTagName('time');
+			
+			this._refresh();
+			
+			new WCF.PeriodicalExecuter(this._refresh.bind(this), 60000);
+			
+			WCF.DOMNodeInsertedHandler.addCallback('WCF.Date.Time', this._refresh.bind(this));
+		},
+		
+		_refresh: function() {
+			var date = new Date();
+			var timestamp = (date.getTime() - date.getMilliseconds()) / 1000;
+			if (_offset === null) _offset = timestamp - TIME_NOW;
+			
+			for (var i = 0, length = _elements.length; i < length; i++) {
+				var element = _elements[i];
+				
+				if (!element.classList.contains('datetime') || element.getAttribute('data-is-future-date')) continue;
+				
+				if (!element.getAttribute('title')) element.setAttribute('title', element.textContent.trim());
+				
+				var elTimestamp = ~~element.getAttribute('data-timestamp') + _offset;
+				var elDate = element.getAttribute('data-date');
+				var elTime = element.getAttribute('data-time');
+				var elOffset = element.getAttribute('data-offset');
+				
+				// timestamp is less than 60 seconds ago
+				if (elTimestamp >= timestamp || timestamp < (elTimestamp + 60)) {
+					element.textContent = WCF.Language.get('wcf.date.relative.now');
+				}
+				// timestamp is less than 60 minutes ago (display 1 hour ago rather than 60 minutes ago)
+				else if (timestamp < (elTimestamp + 3540)) {
+					var minutes = Math.max(Math.round((timestamp - elTimestamp) / 60), 1);
+					element.textContent = WCF.Language.get('wcf.date.relative.minutes', { minutes: minutes });
+				}
+				// timestamp is less than 24 hours ago
+				else if (timestamp < (elTimestamp + 86400)) {
+					var hours = Math.round((timestamp - elTimestamp) / 3600);
+					element.textContent = WCF.Language.get('wcf.date.relative.hours', { hours: hours });
+				}
+				// timestamp is less than 6 days ago
+				else if (timestamp < (elTimestamp + 518400)) {
+					var midnight = new Date(date.getFullYear(), date.getMonth(), date.getDate());
+					var days = Math.ceil((midnight / 1000 - elTimestamp) / 86400);
+					
+					// get day of week
+					var dateObj = WCF.Date.Util.getTimezoneDate((elTimestamp * 1000), elOffset * 1000);
+					var dow = dateObj.getDay();
+					var day = WCF.Language.get('__days')[dow];
+					
+					element.textContent = WCF.Language.get('wcf.date.relative.pastDays', { days: days, day: day, time: elTime });
+				}
+				// timestamp is between ~700 million years BC and last week
+				else {
+					element.textContent = WCF.Language.get('wcf.date.shortDateTimeFormat').replace(/\%date\%/, elDate).replace(/\%time\%/, elTime);
+				}
+			}
+		}
+	};
+	
+	return new DateTimeRelative();
+});
diff --git a/wcfsetup/install/files/js/WoltLab/WCF/Dictionary.js b/wcfsetup/install/files/js/WoltLab/WCF/Dictionary.js
new file mode 100644
index 0000000000..505253c744
--- /dev/null
+++ b/wcfsetup/install/files/js/WoltLab/WCF/Dictionary.js
@@ -0,0 +1,112 @@
+"use strict";
+
+/**
+ * Dictionary implemention relying on an object or if supported on a Map to hold key => value data.
+ * 
+ * @author	Alexander Ebert
+ * @copyright	2001-2015 WoltLab GmbH
+ * @license	GNU Lesser General Public License <http://opensource.org/licenses/lgpl-license.php>
+ * @module	WoltLab/WCF/Dictionary
+ */
+define(function() {
+	var _hasMap = window.hasOwnProperty('Map');
+	
+	/**
+	 * @constructor
+	 */
+	var Dictionary = function() {
+		this._dictionary = (_hasMap) ? new Map() : {};
+	};
+	Dictionary.prototype = {
+		/**
+		 * Sets a new key with given value, will overwrite an existing key.
+		 * 
+		 * @param	{string}	key	key
+		 * @param	{*}		value	value
+		 */
+		set: function(key, value) {
+			if (typeof key !== "string") {
+				throw new TypeError("Only strings can be used as keys, rejected '" +  + "' (" + typeof key + ").");
+				return;
+			}
+			
+			if (_hasMap) this._dictionary.set(key, value);
+			else this._dictionary[key] = value;
+		},
+		
+		/**
+		 * Removes a key from the dictionary.
+		 * 
+		 * @param	{string}	key	key
+		 */
+		remove: function(key) {
+			if (_hasMap) this._dictionary.remove(key);
+			else this._dictionary[key] = undefined;
+		},
+		
+		/**
+		 * Returns true if dictionary contains a value for given key and is not undefined.
+		 * 
+		 * @param	{string}	key	key
+		 * @return	{boolean}	true if key exists and value is not undefined
+		 */
+		has: function(key) {
+			if (_hasMap) return this._dictionary.has(key);
+			else {
+				return (this._dictionary.hasOwnProperty(key) && typeof this._dictionary[key] !== "undefined");
+			}
+		},
+		
+		/**
+		 * Retrieves a value by key, returns null if not found or undefined.
+		 * 
+		 * @param	{string}	key	key
+		 * @return	{*}
+		 */
+		get: function(key) {
+			if (this.has(key)) {
+				if (_hasMap) return this._dictionary.get(key);
+				else return this._dictionary[key];
+			}
+			
+			return null;
+		},
+		
+		/**
+		 * Iterates over the dictionary keys and values, callback function should expect the
+		 * value as first parameter and the key name second.
+		 * 
+		 * @param	{function<*, string>}	callback	callback for each iteration
+		 */
+		forEach: function(callback) {
+			if (typeof callback !== "function") {
+				throw new TypeError("forEach() expects a callback as first parameter.");
+			}
+			
+			if (_hasMap) {
+				this._dictionary.forEach(callback);
+			}
+			else {
+				var keys = Object.keys(this._dictionary);
+				for (var i = 0, length = keys.length; i < length; i++) {
+					callback(this._dictionary[keys[i]]);
+				}
+			}
+		}
+	};
+	
+	Object.defineProperty(Dictionary.prototype, 'size', {
+		enumerable: false,
+		configurable: true,
+		get: function() {
+			if (_hasMap) {
+				return this._dictionary.size;
+			}
+			else {
+				return Object.keys(this._dictionary).length;
+			}
+		}
+	});
+	
+	return Dictionary;
+});
\ No newline at end of file
diff --git a/wcfsetup/install/files/js/WoltLab/WCF/Event/Handler.js b/wcfsetup/install/files/js/WoltLab/WCF/Event/Handler.js
new file mode 100644
index 0000000000..21b63967bb
--- /dev/null
+++ b/wcfsetup/install/files/js/WoltLab/WCF/Event/Handler.js
@@ -0,0 +1,115 @@
+"use strict";
+
+/**
+ * Versatile event system similar to the WCF-PHP counter part.
+ * 
+ * @author	Alexander Ebert
+ * @copyright	2001-2015 WoltLab GmbH
+ * @license	GNU Lesser General Public License <http://opensource.org/licenses/lgpl-license.php>
+ * @module	WoltLab/WCF/Event/Handler
+ */
+define(['Dictionary'], function(Dictionary) {
+	var _listeners = new Dictionary();
+	
+	/**
+	 * @constructor
+	 */
+	var EventHandler = function() {};
+	EventHandler.prototype = {
+		/**
+		 * Adds an event listener.
+		 * 
+		 * @param	{string}		identifier	event identifier
+		 * @param	{string}		action		action name
+		 * @param	{function(object)}	callback	callback function
+		 * @return	{string}	uuid required for listener removal
+		 */
+		add: function(identifier, action, callback) {
+			if (typeof callback !== 'function') {
+				throw new TypeError("[WoltLab/WCF/Event/Handler] Expected a valid callback for '" + action + "@" + identifier + "'.");
+			}
+			
+			var actions = _listeners.get(identifier);
+			if (actions === null) {
+				actions = dictionary.create();
+				_listeners.set(identifier, actions);
+			}
+			
+			var callbacks = actions.get(action);
+			if (callbacks === null) {
+				callbacks = dictionary.create();
+				actions.set(action, callbacks);
+			}
+			
+			var uuid = WCF.getUUID();
+			callbacks.set(uuid, callback);
+			
+			return uuid;
+		},
+		
+		/**
+		 * Fires an event and notifies all listeners.
+		 * 
+		 * @param	{string}	identifier	event identifier
+		 * @param	{string}	action		action name
+		 * @param	{object=}	data		event data
+		 */
+		fire: function(identifier, action, data) {
+			data = data || {};
+			
+			var actions = _listeners.get(identifier);
+			if (actions !== null) {
+				var callbacks = actions.get(action);
+				if (callbacks !== null) {
+					callbacks.forEach(function(callback) {
+						callback(data);
+					});
+				}
+			}
+		},
+		
+		/**
+		 * Removes an event listener, requires the uuid returned by add().
+		 * 
+		 * @param	{string}	identifier	event identifier
+		 * @param	{string}	action		action name
+		 * @param	{string}	uuid		listener uuid
+		 */
+		remove: function(identifier, action, uuid) {
+			var actions = _listeners.get(identifier);
+			if (actions === null) {
+				return;
+			}
+			
+			var callbacks = actions.get(action);
+			if (callbacks === null) {
+				return;
+			}
+			
+			callbacks.remove(uuid);
+		},
+		
+		/**
+		 * Removes all event listeners for given action. Omitting the second parameter will
+		 * remove all listeners for this identifier.
+		 * 
+		 * @param	{string}	identifier	event identifier
+		 * @param	{string=}	action		action name
+		 */
+		removeAll: function(identifier, action) {
+			var actions = _listeners.get(identifier);
+			if (actions === null) {
+				return;
+			}
+			
+			if (typeof action === 'undefined') {
+				_listeners.remove(identifier);
+			}
+			else {
+				actions.remove(action);
+			}
+		}
+	};
+	
+	return new EventHandler();
+});
\ No newline at end of file
diff --git a/wcfsetup/install/files/js/WoltLab/WCF/UI/Alignment.js b/wcfsetup/install/files/js/WoltLab/WCF/UI/Alignment.js
new file mode 100644
index 0000000000..bff6c610e7
--- /dev/null
+++ b/wcfsetup/install/files/js/WoltLab/WCF/UI/Alignment.js
@@ -0,0 +1,167 @@
+"use strict";
+
+/**
+ * Utility class to align elements relatively to another.
+ * 
+ * @author	Alexander Ebert
+ * @copyright	2001-2015 WoltLab GmbH
+ * @license	GNU Lesser General Public License <http://opensource.org/licenses/lgpl-license.php>
+ * @module	WoltLab/WCF/UI/Alignment
+ */
+define(['Core', 'DOM/Util'], function(Core, DOMUtil) {
+	/**
+	 * @constructor
+	 */
+	var UiAlignment = function() {};
+	UiAlignment.prototype = {
+		_tryAlignmentHorizontal: function(align, elDimensions, refDimensions, refOffsets, windowWidth) {
+			var left = 'auto';
+			var right = 'auto';
+			var result = true;
+			
+			if (align === 'left') {
+				left = refOffsets.left;
+				if (left + elDimensions.width > windowWidth) {
+					result = false;
+				}
+			}
+			else {
+				right = refOffsets.left + refDimensions.width;
+				if (right - elDimensions.width < 0) {
+					result = false;
+				}
+			}
+			
+			return {
+				left: left,
+				right: right,
+				result: result
+			}
+		},
+		_tryAlignmentVertical: function(align, elDimensions, refDimensions, refOffsets, windowHeight, verticalOffset) {
+			var bottom = 'auto';
+			var top = 'auto';
+			var result = true;
+			
+			if (align === 'top') {
+				bottom = refOffsets.top + verticalOffset;
+				if (bottom - elDimensions.height < 0) {
+					result = false;
+				}
+			}
+			else {
+				top = refOffsets.top + refDimensions.height + verticalOffset;
+				if (top + elDimensions.height > windowHeight) {
+					result = false;
+				}
+			}
+			
+			return {
+				bottom: bottom,
+				top: top,
+				result: result
+			}
+		},
+		
+		/**
+		 * Sets the alignment for target element relatively to the reference element.
+		 * 
+		 * @param	{Element}		el		target element
+		 * @param	{Element}		ref		reference element
+		 * @param	{object<string, *>}	options		list of options to alter the behavior
+		 */
+		set: function(el, ref, options) {
+			options = Core.extend({
+				// offset to reference element
+				verticalOffset: 7,
+				
+				// align the pointer element, expects .pointer as a direct child of given element
+				pointer: false,
+				
+				// use static pointer positions, expects two items: class to move it to the bottom and the second to move it to the right
+				pointerClassNames: [],
+				
+				// alternate element used to calculate dimensions
+				refDimensionsElement: null,
+				
+				// preferred alignment, possible values: left/right and top/bottom
+				horizontal: 'left',
+				vertical: 'bottom',
+				
+				// allow flipping over axis, possible values: both, horizontal, vertical and none
+				allowFlip: 'both'
+			}, options);
+			
+			if (!Array.isArray(options.pointerClassNames) || options.pointerClassNames.length !== 2) options.pointerClassNames = [];
+			if (options.horizontal !== 'right') options.horizontal = 'left';
+			if (options.vertical !== 'bottom') options.horizontal = 'top';
+			if (['both', 'horizontal', 'vertical', 'none'].indexOf(options.allowFlip) === -1) options.allowFlip = 'both';
+			
+			// place element in the upper left corner to prevent calculation issues due to possible scrollbars
+			DOMUtil.setStyles(el, {
+				bottom: 'auto',
+				left: '0px',
+				right: 'auto',
+				top: '0px'
+			});
+			
+			var elDimensions = DOMUtil.outerDimensions(el);
+			var refDimensions = DOMUtil.outerDimensions((options.refDimensionsElement instanceof Element ? options.refDimensionsElement : ref));
+			var refOffsets = DOMUtil.offset(ref);
+			var windowHeight = window.innerHeight;
+			var windowWidth = window.innerWidth;
+			
+			// in rtl languages we simply swap the value for 'horizontal'
+			if (WCF.Language.get('wcf.global.pageDirection') === 'rtl') {
+				options.horizontal = (options.horizontal === 'left') ? 'right' : 'left';
+			}
+			
+			var horizontal = this._tryAlignmentHorizontal(options.horizontal, elDimensions, refDimensions, refOffsets, windowWidth);
+			if (!horizontal.result && (options.allowFlip === 'both' || options.allowFlip === 'horizontal')) {
+				var horizontalFlipped = this._tryAlignmentHorizontal((options.horizontal === 'left' ? 'right' : 'left'), elDimensions, refDimensions, refOffsets, windowWidth);
+				// only use these results if it fits into the boundaries, otherwise both directions exceed and we honor the demanded direction
+				if (horizontalFlipped.result) {
+					horizontal = horizontalFlipped;
+				}
+			}
+			
+			var left = horizontal.left;
+			var right = horizontal.right;
+			
+			var vertical = this._tryAlignmentVertical(options.vertical, elDimensions, refDimensions, refOffsets, windowHeight, options.verticalOffset);
+			if (!vertical.result && (options.allowFlip === 'both' || options.allowFlip === 'vertical')) {
+				var verticalFlipped = this._tryAlignmentVertical((options.vertical === 'top' ? 'bottom' : 'top'), elDimensions, refDimensions, refOffsets, windowHeight, options.verticalOffset);
+				// only use these results if it fits into the boundaries, otherwise both directions exceed and we honor the demanded direction
+				if (verticalFlipped.result) {
+					vertical = verticalFlipped;
+				}
+			}
+			
+			var bottom = vertical.bottom;
+			var top = vertical.top;
+			
+			// set pointer position
+			if (options.pointer) {
+				var pointer = null;
+				
+				console.debug("TODO");
+			}
+			else if (options.pointerClassNames.length === 2) {
+				var pointerRight = 0;
+				var pointerBottom = 1;
+				
+				el.classList[(top === 'auto' ? 'add' : 'remove')](options.pointerClassNames[pointerBottom]);
+				el.classList[(left === 'auto' ? 'add' : 'remove')](options.pointerClassNames[pointerRight]);
+			}
+			
+			DOMUtil.setStyles(el, {
+				bottom: bottom + (bottom !== 'auto' ? 'px' : ''),
+				left: left + (left !== 'auto' ? 'px' : ''),
+				right: right + (right !== 'auto' ? 'px' : ''),
+				top: top + (top !== 'auto' ? 'px' : '')
+			});
+		}
+	};
+	
+	return new UiAlignment();
+});
diff --git a/wcfsetup/install/files/js/WoltLab/WCF/UI/Dropdown/Simple.js b/wcfsetup/install/files/js/WoltLab/WCF/UI/Dropdown/Simple.js
new file mode 100644
index 0000000000..38c9e96d4e
--- /dev/null
+++ b/wcfsetup/install/files/js/WoltLab/WCF/UI/Dropdown/Simple.js
@@ -0,0 +1,362 @@
+"use strict";
+
+/**
+ * Simple Dropdown
+ * 
+ * @author	Alexander Ebert
+ * @copyright	2001-2015 WoltLab GmbH
+ * @license	GNU Lesser General Public License <http://opensource.org/licenses/lgpl-license.php>
+ * @module	WoltLab/WCF/UI/Dropdown/Simple
+ */
+define(
+	[       'CallbackList', 'Dictionary', 'UI/Alignment', 'DOM/Traverse', 'DOM/Util'],
+	function(CallbackList,   Dictionary,    uiAlignment,    DOMTraverse,    DOMUtil)
+{
+	var _availableDropdowns = null;
+	var _callbacks = null;
+	var _dropdowns = null;
+	var _menus = null;
+	var _menuContainer = null;
+	
+	/**
+	 * @constructor
+	 */
+	var SimpleDropdown = function() { };
+	SimpleDropdown.prototype = {
+		/**
+		 * Performs initial setup such as setting up dropdowns and binding listeners.
+		 */
+		setup: function() {
+			_menuContainer = document.createElement('div');
+			_menuContainer.setAttribute('id', 'dropdownMenuContainer');
+			document.body.appendChild(_menuContainer);
+			
+			_callbacks = new CallbackList();
+			_dropdowns = new Dictionary();
+			_menus = new Dictionary();
+			
+			_availableDropdowns = document.getElementsByClassName('dropdownToggle');
+			
+			this.initAll();
+			
+			WCF.Dropdown.init(this);
+			
+			WCF.CloseOverlayHandler.addCallback('WoltLab/WCF/UI/Dropdown/Simple', this.closeAll.bind(this));
+			WCF.DOMNodeInsertedHandler.addCallback('WoltLab/WCF/UI/Dropdown/Simple', this.initAll.bind(this));
+			
+			document.addEventListener('scroll', this._onScroll.bind(this));
+		},
+		
+		/**
+		 * Loops through all possible dropdowns and registers new ones.
+		 */
+		initAll: function() {
+			for (var i = 0, length = _availableDropdowns.length; i < length; i++) {
+				this.init(_availableDropdowns[i], false);
+			}
+		},
+		
+		/**
+		 * Initializes a dropdown.
+		 * 
+		 * @param	{Element}	button
+		 * @param	{boolean}	isLazyInitialization
+		 */
+		init: function(button, isLazyInitialization) {
+			if (button.classList.contains('jsDropdownEnabled') || button.getAttribute('data-target')) {
+				return false;
+			}
+			
+			var dropdown = DOMTraverse.parentByClass(button, 'dropdown');
+			if (dropdown === null) {
+				throw "Invalid dropdown passed, button '" + DOMUtil.identify(button) + "' does not have a parent with .dropdown.";
+				return;
+			}
+			
+			var menu = DOMTraverse.nextByClass(button, 'dropdownMenu');
+			if (menu === null) {
+				throw "Invalid dropdown passed, button '" + DOMUtil.identify(button) + "' does not have a menu as next sibling.";
+				return;
+			}
+			
+			// move menu into global container
+			_menuContainer.appendChild(menu);
+			
+			var containerId = DOMUtil.identify(dropdown);
+			if (!_dropdowns.has(containerId)) {
+				button.classList.add('jsDropdownEnabled');
+				button.addEventListener('click', this._toggle.bind(this));
+				
+				_dropdowns.set(containerId, dropdown);
+				_menus.set(containerId, menu);
+				
+				if (!containerId.match(/^wcf\d+$/)) {
+					menu.setAttribute('data-source', containerId);
+				}
+			}
+			
+			button.setAttribute('data-target', containerId);
+			
+			if (isLazyInitialization) {
+				event.trigger(button, 'click');
+			}
+		},
+		
+		/**
+		 * Initializes a remote-controlled dropdown.
+		 * 
+		 * @param	{Element}	dropdown	dropdown wrapper element
+		 * @param	{Element}	menu		menu list element
+		 */
+		initFragment: function(dropdown, menu) {
+			var containerId = DOMUtil.identify(dropdown);
+			if (_dropdowns.has(dropdown)) {
+				throw "Dropdown identified by '" + DOMUtil.identify(dropdown) + "' has already been registered.";
+				return;
+			}
+			
+			_dropdowns.set(containerId, dropdown);
+			_menuContainer.appendChild(menu);
+			
+			_menus.set(containerId, menu);
+		},
+		
+		/**
+		 * Registers a callback for open/close events.
+		 * 
+		 * @param	{string}			containerId	dropdown wrapper id
+		 * @param	{function(string, string)}	callback
+		 */
+		registerCallback: function(containerId, callback) {
+			_callbacks.add(containerId, callback);
+		},
+		
+		/**
+		 * Returns the requested dropdown wrapper element.
+		 * 
+		 * @return	{Element}	dropdown wrapper element
+		 */
+		getDropdown: function(containerId) {
+			return _dropdowns.get(containerId);
+		},
+		
+		/**
+		 * Returns the requested dropdown menu list element.
+		 * 
+		 * @return	{Element}	menu list element
+		 */
+		getDropdownMenu: function(containerId) {
+			return _menus.get(containerId);
+		},
+		
+		/**
+		 * Toggles the requested dropdown between opened and closed.
+		 * 
+		 * @param	{string}	containerId	dropdown wrapper id
+		 */
+		toggleDropdown: function(containerId) {
+			this._toggle(null, containerId);
+		},
+		
+		/**
+		 * Calculates and sets the alignment of given dropdown.
+		 * 
+		 * @param	{Element}	dropdown	dropdown wrapper element
+		 * @param	{Element}	dropdownMenu	menu list element
+		 */
+		setAlignment: function(dropdown, dropdownMenu) {
+			// check if button belongs to an i18n textarea
+			var button = dropdown.querySelector('.dropdownToggle');
+			var refDimensionsElement = null;
+			if (button !== null && button.classList.contains('dropdownCaptionTextarea')) {
+				refDimensionsElement = button;
+			}
+			
+			uiAlignment.set(dropdownMenu, dropdown, {
+				pointerClassNames: ['dropdownArrowBottom', 'dropdownArrowRight'],
+				refDimensionsElement: refDimensionsElement
+			});
+		},
+		
+		/**
+		 * Calculats and sets the alignment of the dropdown identified by given id.
+		 * 
+		 * @param	{string}	containerId	dropdown wrapper id
+		 */
+		setAlignmentById: function(containerId) {
+			var dropdown = _dropdowns.get(containerId);
+			if (dropdown === null) {
+				throw "Unknown dropdown identifier '" + containerId + "'.";
+				return;
+			}
+			
+			var menu = _menus.get(containerId);
+			
+			this.setAlignment(dropdown, menu);
+		},
+		
+		/**
+		 * Closes the dropdown identified by given id without notifying callbacks.
+		 * 
+		 * @param	{string}	containerId	dropdown wrapper id
+		 */
+		close: function(containerId) {
+			var dropdown = _dropdowns.get(containerId);
+			if (dropdown !== null) {
+				dropdown.classList.remove('dropdownOpen');
+				_menus.get(containerId).classList.remove('dropdownOpen');
+			}
+		},
+		
+		/**
+		 * Closes all dropdowns.
+		 */
+		closeAll: function() {
+			_dropdowns.forEach((function(dropdown, containerId) {
+				if (dropdown.classList.contains('dropdownOpen')) {
+					dropdown.classList.remove('dropdownOpen');
+					_menus.get(containerId).classList.remove('dropdownOpen');
+					
+					this._notifyCallbacks(containerId, 'close');
+				}
+			}).bind(this));
+		},
+		
+		/**
+		 * Destroys a dropdown identified by given id.
+		 * 
+		 * @param	{string}	containerId	dropdown wrapper id
+		 * @return	{boolean}	false for unknown dropdowns
+		 */
+		destroy: function(containerId) {
+			if (!_dropdowns.has(containerId)) {
+				return false;
+			}
+			
+			this.close(containerId);
+			
+			var menu = _menus.get(containerId);
+			_menus.parentNode.removeChild(menu);
+			
+			_menus.remove(containerId);
+			_dropdowns.remove(containerId);
+			
+			return true;
+		},
+		
+		/**
+		 * Handles dropdown positions in overlays when scrolling in the overlay.
+		 * 
+		 * @param	{Event}		event	event object
+		 */
+		_onDialogScroll: function(event) {
+			var dialogContent = event.currentTarget;
+			var dropdowns = dialogContent.querySelectorAll('.dropdown.dropdownOpen');
+			
+			for (var i = 0, length = dropdowns.length; i < length; i++) {
+				var dropdown = dropdowns[i];
+				var containerId = DOMUtil.identify(dropdown);
+				var offset = DOMUtil.offset(dropdown);
+				var dialogOffset = DOMUtil.offset(dialogContent);
+				
+				// check if dropdown toggle is still (partially) visible
+				if (offset.top + dropdown.clientHeight <= dialogOffset.top) {
+					// top check
+					this.toggleDropdown(containerId);
+				}
+				else if (offset.top >= dialogOffset.top + dialogContent.offsetHeight) {
+					// bottom check
+					this.toggleDropdown(containerId);
+				}
+				else if (offset.left <= dialogOffset.left) {
+					// left check
+					this.toggleDropdown(containerId);
+				}
+				else if (offset.left >= dialogOffset.left + dialogContent.offsetWidth) {
+					// right check
+					this.toggleDropdown(containerId);
+				}
+				else {
+					this.setAlignment(containerId, _menus.get(containerId));
+				}
+			}
+		},
+		
+		/**
+		 * Recalculates dropdown positions on page scroll.
+		 */
+		_onScroll: function() {
+			_dropdowns.forEach((function(dropdown, containerId) {
+				if (dropdown.getAttribute('data-is-overlay-dropdown-button') === true && dropdown.classList.contains('dropdownOpen')) {
+					this.setAlignment(dropdown, _menus.get(containerId));
+				}
+			}).bind(this));
+		},
+		
+		/**
+		 * Notifies callbacks on status change.
+		 * 
+		 * @param	{string}	containerId	dropdown wrapper id
+		 * @param	{string}	action		can be either 'open' or 'close'
+		 */
+		_notifyCallbacks: function(containerId, action) {
+			_callbacks.forEach(containerId, function(callback) {
+				callback(containerId, action);
+			});
+		},
+		
+		/**
+		 * Toggles the dropdown's state between open and close.
+		 * 
+		 * @param	{?Event}	event		event object, should be 'null' if targetId is given
+		 * @param	{string=}	targetId	dropdown wrapper id
+		 * @return	{boolean}	'false' if event is not null
+		 */
+		_toggle: function(event, targetId) {
+			targetId = (event === null) ? targetId : event.currentTarget.getAttribute('data-target');
+			
+			// check if 'isOverlayDropdownButton' is set which indicates if
+			// the dropdown toggle is in an overlay
+			var dropdown = _dropdowns.get(targetId);
+			if (dropdown !== null && dropdown.getAttribute('data-is-overlay-dropdown-button') === null) {
+				var dialogContent = DOMTraverse.parentByClass(dropdown, 'dialogContent');
+				dropdown.setAttribute('data-is-overlay-dropdown-button', (dialogContent !== null));
+				
+				if (dialogContent !== null) {
+					dialogContent.addEventListener('scroll', this._onDialogScroll.bind(this));
+				}
+			}
+			
+			// close all dropdowns
+			_dropdowns.forEach((function(dropdown, containerId) {
+				var menu = _menus.get(containerId);
+				
+				if (dropdown.classList.contains('dropdownOpen')) {
+					dropdown.classList.remove('dropdownOpen');
+					menu.classList.remove('dropdownOpen');
+					
+					this._notifyCallbacks(containerId, 'close');
+				}
+				else if (containerId === targetId && menu.childElementCount > 0) {
+					dropdown.classList.add('dropdownOpen');
+					menu.classList.add('dropdownOpen');
+					
+					this._notifyCallbacks(containerId, 'open');
+					
+					this.setAlignment(dropdown, menu);
+				}
+			}).bind(this));
+			
+			WCF.Dropdown.Interactive.Handler.closeAll();
+			
+			if (event !== null) {
+				event.stopPropagation();
+				return false;
+			}
+			
+			return true;
+		}
+	};
+	
+	return new SimpleDropdown();
+});
\ No newline at end of file
diff --git a/wcfsetup/install/files/js/WoltLab/WCF/UI/Mobile.js b/wcfsetup/install/files/js/WoltLab/WCF/UI/Mobile.js
new file mode 100644
index 0000000000..ac34683b6a
--- /dev/null
+++ b/wcfsetup/install/files/js/WoltLab/WCF/UI/Mobile.js
@@ -0,0 +1,172 @@
+"use strict";
+
+/**
+ * Modifies the interface to provide a better usability for mobile devices.
+ * 
+ * @author	Alexander Ebert
+ * @copyright	2001-2015 WoltLab GmbH
+ * @license	GNU Lesser General Public License <http://opensource.org/licenses/lgpl-license.php>
+ * @module	WoltLab/WCF/UI/Mobile
+ */
+define(['jQuery', 'enquire', 'DOM/Traverse'], function($, enquire, DOMTraverse) {
+	var _buttonGroupNavigations = null;
+	var _enabled = false;
+	var _main = null;
+	var _sidebar = null;
+	
+	/**
+	 * @constructor
+	 */
+	var UiMobile = function() {};
+	UiMobile.prototype = {
+		/**
+		 * Initializes the mobile UI using enquire.js.
+		 */
+		setup: function() {
+			_buttonGroupNavigations = document.getElementsByClassName('buttonGroupNavigation');
+			_main = document.getElementById('main');
+			_sidebar = _main.querySelector('#main > div > div > .sidebar');
+			
+			if ($.browser.touch) {
+				document.documentElement.classList.add('touch');
+			}
+			
+			enquire.register('screen and (max-width: 800px)', {
+				match: this.enable.bind(this),
+				unmatch: this.disable.bind(this),
+				setup: this._init.bind(this),
+				deferSetup: true
+			});
+			
+			if ($.browser.msie && _sidebar.clientWidth > 305) {
+				this._fixSidebarIE();
+			}
+		},
+		
+		/**
+		 * Enables the mobile UI.
+		 */
+		enable: function() {
+			_enabled = true;
+			
+			if ($.browser.msie) this._fixSidebarIE();
+		},
+		
+		/**
+		 * Disables the mobile UI.
+		 */
+		disable: function() {
+			_enabled = false;
+			
+			if ($.browser.msie) this._fixSidebarIE();
+		},
+		
+		_fixSidebarIE: function() {
+			// sidebar is rarely broken on IE9/IE10
+			_sidebar.style.setProperty('display', 'none');
+			_sidebar.style.removeProperty('display');
+		},
+		
+		_init: function() {
+			this._initSidebarToggleButtons();
+			this._initSearchBar();
+			this._initButtonGroupNavigation();
+			
+			WCF.CloseOverlayHandler.addCallback('WoltLab/WCF/UI/Mobile', this._closeAllMenus.bind(this));
+			WCF.DOMNodeInsertedHandler.addCallback('WoltLab/WCF/UI/Mobile', this._initButtonGroupNavigation.bind(this));
+		},
+		
+		_initSidebarToggleButtons: function() {
+			var sidebarPosition = (_main.classList.contains('sidebarOrientationLeft')) ? 'Left' : '';
+			sidebarPosition = (sidebarPosition) ? sidebarPosition : (_main.classList.contains('sidebarOrientationRight') ? 'Right' : '');
+			
+			if (!sidebarPosition) {
+				return;
+			}
+			
+			// use icons if language item is empty/non-existant
+			var languageShowSidebar = 'wcf.global.sidebar.show' + sidebarPosition + 'Sidebar';
+			if (languageShowSidebar === WCF.Language.get(languageShowSidebar) || WCF.Language.get(languageShowSidebar) === '') {
+				languageShowSidebar = document.createElement('span');
+				languageShowSidebar.className = 'icon icon16 fa-angle-double-' + sidebarPosition.toLowerCase();
+			}
+			
+			var languageHideSidebar = 'wcf.global.sidebar.hide' + sidebarPosition + 'Sidebar';
+			if (languageHideSidebar === WCF.Language.get(languageHideSidebar) || WCF.Language.get(languageHideSidebar) === '') {
+				languageHideSidebar = document.createElement('span');
+				languageHideSidebar.className = 'icon icon16 fa-angle-double-' + (sidebarPosition === 'Left' ? 'right' : 'left');
+			}
+			
+			// add toggle buttons
+			var showSidebar = document.createElement('span');
+			showSidebar.className = 'button small mobileSidebarToggleButton';
+			showSidebar.addEventListener('click', function() { _main.classList.add('mobileShowSidebar'); });
+			if (languageShowSidebar instanceof Element) showSidebar.appendChild(languageShowSidebar);
+			else showSidebar.textContent = languageShowSidebar;
+			
+			var hideSidebar = document.createElement('span');
+			hideSidebar.className = 'button small mobileSidebarToggleButton';
+			hideSidebar.addEventListener('click', function() { _main.classList.remove('mobileShowSidebar'); });
+			if (languageHideSidebar instanceof Element) hideSidebar.appendChild(languageHideSidebar);
+			else hideSidebar.textContent = languageHideSidebar;
+			
+			document.querySelector('.content').appendChild(showSidebar);
+			_sidebar.appendChild(hideSidebar);
+		},
+		
+		_initSearchBar: function() {
+			var _searchBar = document.querySelector('.searchBar');
+			
+			_searchBar.addEventListener('click', function() {
+				if (_enabled) {
+					_searchBar.classList.add('searchBarOpen');
+					
+					return false;
+				}
+				
+				return false;
+			});
+			
+			_main.addEventListener('click', function() { _searchBar.classList.remove('searchBarOpen'); });
+		},
+		
+		_initButtonGroupNavigation: function() {
+			for (var i = 0, length = _buttonGroupNavigations.length; i < length; i++) {
+				var navigation = _buttonGroupNavigations[i];
+				
+				if (navigation.classList.contains('jsMobileButtonGroupNavigation')) continue;
+				else navigation.classList.add('jsMobileButtonGroupNavigation');
+				
+				var button = document.createElement('a');
+				button.classList.add('dropdownLabel');
+				
+				var span = document.createElement('span');
+				span.className = 'icon icon24 fa-list';
+				button.appendChild(span);
+				
+				button.addEventListener('click', function(ev) {
+					var next = DOMTraverse.next(button);
+					if (next !== null) {
+						next.classList.toggle('open');
+						
+						ev.stopPropagation();
+						return false;
+					}
+					
+					return true;
+				});
+				
+				navigation.insertBefore(button, navigation.firstChild);
+			}
+		},
+		
+		_closeAllMenus: function() {
+			var openMenus = document.querySelectorAll('.jsMobileButtonGroupNavigation > ul.open');
+			for (var i = 0, length = openMenus.length; i < length; i++) {
+				openMenus[i].classList.remove('open');
+			}
+		}
+	};
+	
+	return new UiMobile();
+});
diff --git a/wcfsetup/install/files/js/WoltLab/WCF/UI/TabMenu.js b/wcfsetup/install/files/js/WoltLab/WCF/UI/TabMenu.js
new file mode 100644
index 0000000000..be211c846a
--- /dev/null
+++ b/wcfsetup/install/files/js/WoltLab/WCF/UI/TabMenu.js
@@ -0,0 +1,36 @@
+"use strict";
+
+define(['Dictionary', 'DOM/Util', './TabMenu/Simple'], function(Dictionary, DOMUtil, SimpleTabMenu) {
+	var _tabMenus = new Dictionary();
+	
+	/**
+	 * @constructor
+	 */
+	var UiTabMenu = function() {};
+	UiTabMenu.prototype = {
+		init: function() {
+			var tabMenus = document.querySelectorAll('.tabMenuContainer:not(.staticTabMenuContainer)');
+			for (var i = 0, length = tabMenus.length; i < length; i++) {
+				var container = tabMenus[i];
+				var containerId = DOMUtil.identify(container);
+				
+				if (_tabMenus.has(containerId)) {
+					continue;
+				}
+				
+				var tabMenu = new SimpleTabMenu(containerId, container);
+				if (tabMenu.validate()) {
+					tabMenu.init();
+					
+					_tabMenus.set(containerId, tabMenu);
+				}
+			}
+		},
+		
+		getTabMenu: function(containerId) {
+			return _tabMenus.get(containerId);
+		}
+	};
+	
+	return new UiTabMenu();
+});
diff --git a/wcfsetup/install/files/js/WoltLab/WCF/UI/TabMenu/Simple.js b/wcfsetup/install/files/js/WoltLab/WCF/UI/TabMenu/Simple.js
new file mode 100644
index 0000000000..6be0a66ebd
--- /dev/null
+++ b/wcfsetup/install/files/js/WoltLab/WCF/UI/TabMenu/Simple.js
@@ -0,0 +1,300 @@
+"use strict";
+
+/**
+ * Simple tab menu implementation with a straight-forward logic.
+ * 
+ * @author	Alexander Ebert
+ * @copyright	2001-2015 WoltLab GmbH
+ * @license	GNU Lesser General Public License <http://opensource.org/licenses/lgpl-license.php>
+ * @module	WoltLab/WCF/UI/TabMenu/Simple
+ */
+define(['jQuery', 'Dictionary', 'DOM/Util', 'EventHandler'], function($, Dictionary, DOMUtil, EventHandler) {
+	/**
+	 * @param	{string}	containerId	container id
+	 * @param	{Element}	container	container element
+	 * @constructor
+	 */
+	var TabMenuSimple = function(containerId, container) {
+		this._container = container;
+		this._containers = new Dictionary();
+		this._containerId = containerId;
+		this._isLegacy = null;
+		this._isParent = false;
+		this._parent = null;
+		this._tabs = new Dictionary();
+	};
+	
+	TabMenuSimple.prototype = {
+		/**
+		 * Validates the properties and DOM structure of this container.
+		 * 
+		 * Expected DOM:
+		 * <element class="tabMenuContainer">
+		 * 	<nav>
+		 * 		<ul>
+		 * 			<li data-name="foo"><a>bar</a></li>
+		 * 		</ul>
+		 * 	</nav>
+		 * 	
+		 * 	<element id="foo">baz</element>
+		 * </element>
+		 * 
+		 * @return	{boolean}	false if any properties are invalid or the DOM does not match the expectations
+		 */
+		validate: function() {
+			if (!this._container.classList.contains('tabMenuContainer')) {
+				return false;
+			}
+			
+			var nav = document.querySelector('#' + this._containerId + ' > nav');
+			if (nav === null) {
+				return false;
+			}
+			
+			// get children
+			var tabs = nav.getElementsByTagName('li');
+			if (tabs.length === null) {
+				return false;
+			}
+			
+			var containers = document.querySelectorAll('#' + this._containerId + ' > .tabMenuContent');
+			for (var i = 0, length = containers.length; i < length; i++) {
+				var container = containers[i];
+				var name = container.getAttribute('data-name');
+				
+				if (!name) {
+					name = DOMUtil.identify(container);
+				}
+				
+				container.setAttribute('data-name', name);
+				this._containers.set(name, container);
+			}
+			
+			for (var i = 0, length = tabs.length; i < length; i++) {
+				var tab = tabs[i];
+				var name = this._getTabName(tab);
+				
+				if (!name) {
+					continue;
+				}
+				
+				if (this._tabs.has(name)) {
+					throw "Tab names must be unique, li[data-name='" + name + "'] (tab menu id: '" + this._containerId + "') exists more than once.";
+					return false;
+				}
+				
+				var container = this._containers.get(name);
+				if (container === null) {
+					throw "Expected content element for li[data-name='" + name + "'] (tab menu id: '" + this._containerId + "').";
+					return false;
+				}
+				else if (container.parentNode !== this._container) {
+					throw "Expected content element '" + name + "' (tab menu id: '" + this._containerId + "') to be a direct children.";
+					return false;
+				}
+				
+				// check if tab holds exactly one children which is an anchor element
+				if (tab.childElementCount !== 1 || tab.children[0].nodeName !== 'A') {
+					throw "Expected exactly one <a> as children for li[data-name='" + name + "'] (tab menu id: '" + this._containerId + "').";
+					return false;
+				}
+				
+				this._tabs.set(name, tab);
+			}
+			
+			if (!this._tabs.size) {
+				throw "Expected at least one tab (tab menu id: '" + this._containerId + "').";
+				return false;
+			}
+			
+			if (this._isLegacy) {
+				this._container.setAttribute('data-is-legacy', true);
+				
+				this._tabs.forEach(function(tab, name) {
+					tab.setAttribute('aria-controls', name);
+				});
+			}
+			
+			return true;
+		},
+		
+		/**
+		 * Initializes this tab menu.
+		 * 
+		 * @param	{Dictionary=}	oldTabs		previous list of tabs
+		 */
+		init: function(oldTabs) {
+			oldTabs = oldTabs || null;
+			
+			// bind listeners
+			this._tabs.forEach((function(tab) {
+				if (oldTabs === null || oldTabs.get(tab.getAttribute('data-name')) !== tab) {
+					tab.children[0].addEventListener('click', this._onClick.bind(this));
+				}
+			}).bind(this));
+			
+			if (oldTabs === null) {
+				var preselect = this._container.getAttribute('data-preselect');
+				if (preselect === "true" || preselect === null || preselect === "") preselect = true;
+				if (preselect === "false") preselect = false;
+				
+				this._containers.forEach(function(container) {
+					container.classList.add('hidden');
+				});
+				
+				if (preselect !== false) {
+					if (preselect !== true) {
+						var tab = this._tabs.get(preselect);
+						if (tab !== null) {
+							this.select(null, tab, true);
+						}
+					}
+					else {
+						var selectTab = null;
+						this._tabs.forEach(function(tab) {
+							if (selectTab === null && tab.previousElementSibling === null) {
+								selectTab = tab; 
+							}
+						});
+						
+						if (selectTab !== null) {
+							this.select(null, selectTab, true);
+						}
+					}
+				}
+			}
+		},
+		
+		/**
+		 * Selects a tab.
+		 * 
+		 * @param	{?(string|integer)}	name		tab name or sequence no
+		 * @param	{Element=}		tab		tab element
+		 * @param	{boolean=}		disableEvent	suppress event handling
+		 */
+		select: function(name, tab, disableEvent) {
+			tab = tab || this._tabs.get(name);
+			
+			if (tab === null) {
+				// check if name is an integer
+				if (~~name == name) {
+					name = ~~name;
+					
+					var i = 0;
+					this._tabs.forEach(function(item) {
+						if (i === name) {
+							tab = item;
+						}
+						
+						i++;
+					});
+				}
+				
+				if (tab === null) {
+					throw "Expected a valid tab name (tab menu id: '" + this._containerId + "').";
+					return;
+				}
+			}
+			
+			if (!name) name = tab.getAttribute('data-name');
+			
+			// unmark active tab
+			var oldTab = document.querySelector('#' + this._containerId + ' > nav > ul > li.active');
+			var oldContent = null;
+			if (oldTab !== null) {
+				oldTab.classList.remove('active');
+				oldContent = this._containers.get(oldTab.getAttribute('data-name'));
+				oldContent.classList.remove('active');
+				oldContent.classList.add('hidden');
+				
+				if (this._isLegacy) {
+					oldTab.classList.remove('ui-state-active');
+					oldContent.classList.remove('ui-state-active');
+				}
+			}
+			
+			tab.classList.add('active');
+			var newContent = this._containers.get(name);
+			newContent.classList.add('active');
+			
+			if (this._isLegacy) {
+				tab.classList.add('ui-state-active');
+				newContent.classList.add('ui-state-active');
+				newContent.classList.remove('hidden');
+			}
+			
+			if (disableEvent !== true) {
+				EventHandler.fire('com.woltlab.wcf.simpleTabMenu_' + this._containerId, 'select', {
+					active: tab,
+					previous: oldTab,
+				});
+				
+				if (this._isLegacy) {
+					// simulate jQuery UI Tabs event
+					$(this._container).trigger('wcftabsbeforeactivate', {
+						newTab: $(tab),
+						oldTab: $(oldTab),
+						newPanel: $(newContent),
+						oldPanel: $(oldContent)
+					});
+				}
+			}
+		},
+		
+		/**
+		 * Rebuilds all tabs, must be invoked after adding or removing of tabs.
+		 * 
+		 * Warning: Do not remove tabs if you plan to add these later again or at least clone the nodes
+		 *          to prevent issues with already bound event listeners. Consider hiding them via CSS.
+		 */
+		rebuild: function() {
+			var oldTabs = this._tabs;
+			
+			this.validate();
+			this.init(oldTabs);
+		},
+		
+		/**
+		 * Handles clicks on a tab.
+		 * 
+		 * @param	{object}	event	event object
+		 */
+		_onClick: function(event) {
+			var tab = event.currentTarget.parentNode;
+			
+			this.select(null, tab);
+		},
+		
+		/**
+		 * Returns the tab name.
+		 * 
+		 * @param	{Element}	tab	tab element
+		 * @return	{string}	tab name
+		 */
+		_getTabName: function(tab) {
+			var name = tab.getAttribute('data-name');
+			
+			// handle legacy tab menus
+			if (!name) {
+				if (tab.childElementCount === 1 && tab.children[0].nodeName === 'A') {
+					var href = tab.children[0].getAttribute('href');
+					if (href.match(/#([^#]+)$/)) {
+						name = RegExp.$1;
+						
+						if (document.getElementById(name) === null) {
+							name = null;
+						}
+						else {
+							this._isLegacy = true;
+							tab.setAttribute('data-name', name);
+						}
+					}
+				}
+			}
+			
+			return name;
+		}
+	};
+	
+	return TabMenuSimple;
+});
diff --git a/wcfsetup/install/files/js/require.js b/wcfsetup/install/files/js/require.js
new file mode 100644
index 0000000000..2205c616ac
--- /dev/null
+++ b/wcfsetup/install/files/js/require.js
@@ -0,0 +1,36 @@
+/*
+ RequireJS 2.1.17 Copyright (c) 2010-2015, The Dojo Foundation All Rights Reserved.
+ Available via the MIT or new BSD license.
+ see: http://github.com/jrburke/requirejs for details
+*/
+var requirejs,require,define;
+(function(ba){function G(b){return"[object Function]"===K.call(b)}function H(b){return"[object Array]"===K.call(b)}function v(b,c){if(b){var d;for(d=0;d<b.length&&(!b[d]||!c(b[d],d,b));d+=1);}}function T(b,c){if(b){var d;for(d=b.length-1;-1<d&&(!b[d]||!c(b[d],d,b));d-=1);}}function t(b,c){return fa.call(b,c)}function m(b,c){return t(b,c)&&b[c]}function B(b,c){for(var d in b)if(t(b,d)&&c(b[d],d))break}function U(b,c,d,e){c&&B(c,function(c,g){if(d||!t(b,g))e&&"object"===typeof c&&c&&!H(c)&&!G(c)&&!(c instanceof
+RegExp)?(b[g]||(b[g]={}),U(b[g],c,d,e)):b[g]=c});return b}function u(b,c){return function(){return c.apply(b,arguments)}}function ca(b){throw b;}function da(b){if(!b)return b;var c=ba;v(b.split("."),function(b){c=c[b]});return c}function C(b,c,d,e){c=Error(c+"\nhttp://requirejs.org/docs/errors.html#"+b);c.requireType=b;c.requireModules=e;d&&(c.originalError=d);return c}function ga(b){function c(a,k,b){var f,l,c,d,e,g,i,p,k=k&&k.split("/"),h=j.map,n=h&&h["*"];if(a){a=a.split("/");l=a.length-1;j.nodeIdCompat&&
+Q.test(a[l])&&(a[l]=a[l].replace(Q,""));"."===a[0].charAt(0)&&k&&(l=k.slice(0,k.length-1),a=l.concat(a));l=a;for(c=0;c<l.length;c++)if(d=l[c],"."===d)l.splice(c,1),c-=1;else if(".."===d&&!(0===c||1===c&&".."===l[2]||".."===l[c-1])&&0<c)l.splice(c-1,2),c-=2;a=a.join("/")}if(b&&h&&(k||n)){l=a.split("/");c=l.length;a:for(;0<c;c-=1){e=l.slice(0,c).join("/");if(k)for(d=k.length;0<d;d-=1)if(b=m(h,k.slice(0,d).join("/")))if(b=m(b,e)){f=b;g=c;break a}!i&&(n&&m(n,e))&&(i=m(n,e),p=c)}!f&&i&&(f=i,g=p);f&&(l.splice(0,
+g,f),a=l.join("/"))}return(f=m(j.pkgs,a))?f:a}function d(a){z&&v(document.getElementsByTagName("script"),function(k){if(k.getAttribute("data-requiremodule")===a&&k.getAttribute("data-requirecontext")===i.contextName)return k.parentNode.removeChild(k),!0})}function e(a){var k=m(j.paths,a);if(k&&H(k)&&1<k.length)return k.shift(),i.require.undef(a),i.makeRequire(null,{skipMap:!0})([a]),!0}function n(a){var k,c=a?a.indexOf("!"):-1;-1<c&&(k=a.substring(0,c),a=a.substring(c+1,a.length));return[k,a]}function p(a,
+k,b,f){var l,d,e=null,g=k?k.name:null,j=a,p=!0,h="";a||(p=!1,a="_@r"+(K+=1));a=n(a);e=a[0];a=a[1];e&&(e=c(e,g,f),d=m(r,e));a&&(e?h=d&&d.normalize?d.normalize(a,function(a){return c(a,g,f)}):-1===a.indexOf("!")?c(a,g,f):a:(h=c(a,g,f),a=n(h),e=a[0],h=a[1],b=!0,l=i.nameToUrl(h)));b=e&&!d&&!b?"_unnormalized"+(O+=1):"";return{prefix:e,name:h,parentMap:k,unnormalized:!!b,url:l,originalName:j,isDefine:p,id:(e?e+"!"+h:h)+b}}function s(a){var k=a.id,b=m(h,k);b||(b=h[k]=new i.Module(a));return b}function q(a,
+k,b){var f=a.id,c=m(h,f);if(t(r,f)&&(!c||c.defineEmitComplete))"defined"===k&&b(r[f]);else if(c=s(a),c.error&&"error"===k)b(c.error);else c.on(k,b)}function w(a,b){var c=a.requireModules,f=!1;if(b)b(a);else if(v(c,function(b){if(b=m(h,b))b.error=a,b.events.error&&(f=!0,b.emit("error",a))}),!f)g.onError(a)}function x(){R.length&&(ha.apply(A,[A.length,0].concat(R)),R=[])}function y(a){delete h[a];delete V[a]}function F(a,b,c){var f=a.map.id;a.error?a.emit("error",a.error):(b[f]=!0,v(a.depMaps,function(f,
+d){var e=f.id,g=m(h,e);g&&(!a.depMatched[d]&&!c[e])&&(m(b,e)?(a.defineDep(d,r[e]),a.check()):F(g,b,c))}),c[f]=!0)}function D(){var a,b,c=(a=1E3*j.waitSeconds)&&i.startTime+a<(new Date).getTime(),f=[],l=[],g=!1,h=!0;if(!W){W=!0;B(V,function(a){var i=a.map,j=i.id;if(a.enabled&&(i.isDefine||l.push(a),!a.error))if(!a.inited&&c)e(j)?g=b=!0:(f.push(j),d(j));else if(!a.inited&&(a.fetched&&i.isDefine)&&(g=!0,!i.prefix))return h=!1});if(c&&f.length)return a=C("timeout","Load timeout for modules: "+f,null,
+f),a.contextName=i.contextName,w(a);h&&v(l,function(a){F(a,{},{})});if((!c||b)&&g)if((z||ea)&&!X)X=setTimeout(function(){X=0;D()},50);W=!1}}function E(a){t(r,a[0])||s(p(a[0],null,!0)).init(a[1],a[2])}function I(a){var a=a.currentTarget||a.srcElement,b=i.onScriptLoad;a.detachEvent&&!Y?a.detachEvent("onreadystatechange",b):a.removeEventListener("load",b,!1);b=i.onScriptError;(!a.detachEvent||Y)&&a.removeEventListener("error",b,!1);return{node:a,id:a&&a.getAttribute("data-requiremodule")}}function J(){var a;
+for(x();A.length;){a=A.shift();if(null===a[0])return w(C("mismatch","Mismatched anonymous define() module: "+a[a.length-1]));E(a)}}var W,Z,i,L,X,j={waitSeconds:7,baseUrl:"./",paths:{},bundles:{},pkgs:{},shim:{},config:{}},h={},V={},$={},A=[],r={},S={},aa={},K=1,O=1;L={require:function(a){return a.require?a.require:a.require=i.makeRequire(a.map)},exports:function(a){a.usingExports=!0;if(a.map.isDefine)return a.exports?r[a.map.id]=a.exports:a.exports=r[a.map.id]={}},module:function(a){return a.module?
+a.module:a.module={id:a.map.id,uri:a.map.url,config:function(){return m(j.config,a.map.id)||{}},exports:a.exports||(a.exports={})}}};Z=function(a){this.events=m($,a.id)||{};this.map=a;this.shim=m(j.shim,a.id);this.depExports=[];this.depMaps=[];this.depMatched=[];this.pluginMaps={};this.depCount=0};Z.prototype={init:function(a,b,c,f){f=f||{};if(!this.inited){this.factory=b;if(c)this.on("error",c);else this.events.error&&(c=u(this,function(a){this.emit("error",a)}));this.depMaps=a&&a.slice(0);this.errback=
+c;this.inited=!0;this.ignore=f.ignore;f.enabled||this.enabled?this.enable():this.check()}},defineDep:function(a,b){this.depMatched[a]||(this.depMatched[a]=!0,this.depCount-=1,this.depExports[a]=b)},fetch:function(){if(!this.fetched){this.fetched=!0;i.startTime=(new Date).getTime();var a=this.map;if(this.shim)i.makeRequire(this.map,{enableBuildCallback:!0})(this.shim.deps||[],u(this,function(){return a.prefix?this.callPlugin():this.load()}));else return a.prefix?this.callPlugin():this.load()}},load:function(){var a=
+this.map.url;S[a]||(S[a]=!0,i.load(this.map.id,a))},check:function(){if(this.enabled&&!this.enabling){var a,b,c=this.map.id;b=this.depExports;var f=this.exports,l=this.factory;if(this.inited)if(this.error)this.emit("error",this.error);else{if(!this.defining){this.defining=!0;if(1>this.depCount&&!this.defined){if(G(l)){if(this.events.error&&this.map.isDefine||g.onError!==ca)try{f=i.execCb(c,l,b,f)}catch(d){a=d}else f=i.execCb(c,l,b,f);this.map.isDefine&&void 0===f&&((b=this.module)?f=b.exports:this.usingExports&&
+(f=this.exports));if(a)return a.requireMap=this.map,a.requireModules=this.map.isDefine?[this.map.id]:null,a.requireType=this.map.isDefine?"define":"require",w(this.error=a)}else f=l;this.exports=f;if(this.map.isDefine&&!this.ignore&&(r[c]=f,g.onResourceLoad))g.onResourceLoad(i,this.map,this.depMaps);y(c);this.defined=!0}this.defining=!1;this.defined&&!this.defineEmitted&&(this.defineEmitted=!0,this.emit("defined",this.exports),this.defineEmitComplete=!0)}}else this.fetch()}},callPlugin:function(){var a=
+this.map,b=a.id,d=p(a.prefix);this.depMaps.push(d);q(d,"defined",u(this,function(f){var l,d;d=m(aa,this.map.id);var e=this.map.name,P=this.map.parentMap?this.map.parentMap.name:null,n=i.makeRequire(a.parentMap,{enableBuildCallback:!0});if(this.map.unnormalized){if(f.normalize&&(e=f.normalize(e,function(a){return c(a,P,!0)})||""),f=p(a.prefix+"!"+e,this.map.parentMap),q(f,"defined",u(this,function(a){this.init([],function(){return a},null,{enabled:!0,ignore:!0})})),d=m(h,f.id)){this.depMaps.push(f);
+if(this.events.error)d.on("error",u(this,function(a){this.emit("error",a)}));d.enable()}}else d?(this.map.url=i.nameToUrl(d),this.load()):(l=u(this,function(a){this.init([],function(){return a},null,{enabled:!0})}),l.error=u(this,function(a){this.inited=!0;this.error=a;a.requireModules=[b];B(h,function(a){0===a.map.id.indexOf(b+"_unnormalized")&&y(a.map.id)});w(a)}),l.fromText=u(this,function(f,c){var d=a.name,e=p(d),P=M;c&&(f=c);P&&(M=!1);s(e);t(j.config,b)&&(j.config[d]=j.config[b]);try{g.exec(f)}catch(h){return w(C("fromtexteval",
+"fromText eval for "+b+" failed: "+h,h,[b]))}P&&(M=!0);this.depMaps.push(e);i.completeLoad(d);n([d],l)}),f.load(a.name,n,l,j))}));i.enable(d,this);this.pluginMaps[d.id]=d},enable:function(){V[this.map.id]=this;this.enabling=this.enabled=!0;v(this.depMaps,u(this,function(a,b){var c,f;if("string"===typeof a){a=p(a,this.map.isDefine?this.map:this.map.parentMap,!1,!this.skipMap);this.depMaps[b]=a;if(c=m(L,a.id)){this.depExports[b]=c(this);return}this.depCount+=1;q(a,"defined",u(this,function(a){this.defineDep(b,
+a);this.check()}));this.errback?q(a,"error",u(this,this.errback)):this.events.error&&q(a,"error",u(this,function(a){this.emit("error",a)}))}c=a.id;f=h[c];!t(L,c)&&(f&&!f.enabled)&&i.enable(a,this)}));B(this.pluginMaps,u(this,function(a){var b=m(h,a.id);b&&!b.enabled&&i.enable(a,this)}));this.enabling=!1;this.check()},on:function(a,b){var c=this.events[a];c||(c=this.events[a]=[]);c.push(b)},emit:function(a,b){v(this.events[a],function(a){a(b)});"error"===a&&delete this.events[a]}};i={config:j,contextName:b,
+registry:h,defined:r,urlFetched:S,defQueue:A,Module:Z,makeModuleMap:p,nextTick:g.nextTick,onError:w,configure:function(a){a.baseUrl&&"/"!==a.baseUrl.charAt(a.baseUrl.length-1)&&(a.baseUrl+="/");var b=j.shim,c={paths:!0,bundles:!0,config:!0,map:!0};B(a,function(a,b){c[b]?(j[b]||(j[b]={}),U(j[b],a,!0,!0)):j[b]=a});a.bundles&&B(a.bundles,function(a,b){v(a,function(a){a!==b&&(aa[a]=b)})});a.shim&&(B(a.shim,function(a,c){H(a)&&(a={deps:a});if((a.exports||a.init)&&!a.exportsFn)a.exportsFn=i.makeShimExports(a);
+b[c]=a}),j.shim=b);a.packages&&v(a.packages,function(a){var b,a="string"===typeof a?{name:a}:a;b=a.name;a.location&&(j.paths[b]=a.location);j.pkgs[b]=a.name+"/"+(a.main||"main").replace(ia,"").replace(Q,"")});B(h,function(a,b){!a.inited&&!a.map.unnormalized&&(a.map=p(b))});if(a.deps||a.callback)i.require(a.deps||[],a.callback)},makeShimExports:function(a){return function(){var b;a.init&&(b=a.init.apply(ba,arguments));return b||a.exports&&da(a.exports)}},makeRequire:function(a,e){function j(c,d,m){var n,
+q;e.enableBuildCallback&&(d&&G(d))&&(d.__requireJsBuild=!0);if("string"===typeof c){if(G(d))return w(C("requireargs","Invalid require call"),m);if(a&&t(L,c))return L[c](h[a.id]);if(g.get)return g.get(i,c,a,j);n=p(c,a,!1,!0);n=n.id;return!t(r,n)?w(C("notloaded",'Module name "'+n+'" has not been loaded yet for context: '+b+(a?"":". Use require([])"))):r[n]}J();i.nextTick(function(){J();q=s(p(null,a));q.skipMap=e.skipMap;q.init(c,d,m,{enabled:!0});D()});return j}e=e||{};U(j,{isBrowser:z,toUrl:function(b){var d,
+e=b.lastIndexOf("."),k=b.split("/")[0];if(-1!==e&&(!("."===k||".."===k)||1<e))d=b.substring(e,b.length),b=b.substring(0,e);return i.nameToUrl(c(b,a&&a.id,!0),d,!0)},defined:function(b){return t(r,p(b,a,!1,!0).id)},specified:function(b){b=p(b,a,!1,!0).id;return t(r,b)||t(h,b)}});a||(j.undef=function(b){x();var c=p(b,a,!0),e=m(h,b);d(b);delete r[b];delete S[c.url];delete $[b];T(A,function(a,c){a[0]===b&&A.splice(c,1)});e&&(e.events.defined&&($[b]=e.events),y(b))});return j},enable:function(a){m(h,a.id)&&
+s(a).enable()},completeLoad:function(a){var b,c,d=m(j.shim,a)||{},g=d.exports;for(x();A.length;){c=A.shift();if(null===c[0]){c[0]=a;if(b)break;b=!0}else c[0]===a&&(b=!0);E(c)}c=m(h,a);if(!b&&!t(r,a)&&c&&!c.inited){if(j.enforceDefine&&(!g||!da(g)))return e(a)?void 0:w(C("nodefine","No define call for "+a,null,[a]));E([a,d.deps||[],d.exportsFn])}D()},nameToUrl:function(a,b,c){var d,e,h;(d=m(j.pkgs,a))&&(a=d);if(d=m(aa,a))return i.nameToUrl(d,b,c);if(g.jsExtRegExp.test(a))d=a+(b||"");else{d=j.paths;
+a=a.split("/");for(e=a.length;0<e;e-=1)if(h=a.slice(0,e).join("/"),h=m(d,h)){H(h)&&(h=h[0]);a.splice(0,e,h);break}d=a.join("/");d+=b||(/^data\:|\?/.test(d)||c?"":".js");d=("/"===d.charAt(0)||d.match(/^[\w\+\.\-]+:/)?"":j.baseUrl)+d}return j.urlArgs?d+((-1===d.indexOf("?")?"?":"&")+j.urlArgs):d},load:function(a,b){g.load(i,a,b)},execCb:function(a,b,c,d){return b.apply(d,c)},onScriptLoad:function(a){if("load"===a.type||ja.test((a.currentTarget||a.srcElement).readyState))N=null,a=I(a),i.completeLoad(a.id)},
+onScriptError:function(a){var b=I(a);if(!e(b.id))return w(C("scripterror","Script error for: "+b.id,a,[b.id]))}};i.require=i.makeRequire();return i}var g,x,y,D,I,E,N,J,s,O,ka=/(\/\*([\s\S]*?)\*\/|([^:]|^)\/\/(.*)$)/mg,la=/[^.]\s*require\s*\(\s*["']([^'"\s]+)["']\s*\)/g,Q=/\.js$/,ia=/^\.\//;x=Object.prototype;var K=x.toString,fa=x.hasOwnProperty,ha=Array.prototype.splice,z=!!("undefined"!==typeof window&&"undefined"!==typeof navigator&&window.document),ea=!z&&"undefined"!==typeof importScripts,ja=
+z&&"PLAYSTATION 3"===navigator.platform?/^complete$/:/^(complete|loaded)$/,Y="undefined"!==typeof opera&&"[object Opera]"===opera.toString(),F={},q={},R=[],M=!1;if("undefined"===typeof define){if("undefined"!==typeof requirejs){if(G(requirejs))return;q=requirejs;requirejs=void 0}"undefined"!==typeof require&&!G(require)&&(q=require,require=void 0);g=requirejs=function(b,c,d,e){var n,p="_";!H(b)&&"string"!==typeof b&&(n=b,H(c)?(b=c,c=d,d=e):b=[]);n&&n.context&&(p=n.context);(e=m(F,p))||(e=F[p]=g.s.newContext(p));
+n&&e.configure(n);return e.require(b,c,d)};g.config=function(b){return g(b)};g.nextTick="undefined"!==typeof setTimeout?function(b){setTimeout(b,4)}:function(b){b()};require||(require=g);g.version="2.1.17";g.jsExtRegExp=/^\/|:|\?|\.js$/;g.isBrowser=z;x=g.s={contexts:F,newContext:ga};g({});v(["toUrl","undef","defined","specified"],function(b){g[b]=function(){var c=F._;return c.require[b].apply(c,arguments)}});if(z&&(y=x.head=document.getElementsByTagName("head")[0],D=document.getElementsByTagName("base")[0]))y=
+x.head=D.parentNode;g.onError=ca;g.createNode=function(b){var c=b.xhtml?document.createElementNS("http://www.w3.org/1999/xhtml","html:script"):document.createElement("script");c.type=b.scriptType||"text/javascript";c.charset="utf-8";c.async=!0;return c};g.load=function(b,c,d){var e=b&&b.config||{};if(z)return e=g.createNode(e,c,d),e.setAttribute("data-requirecontext",b.contextName),e.setAttribute("data-requiremodule",c),e.attachEvent&&!(e.attachEvent.toString&&0>e.attachEvent.toString().indexOf("[native code"))&&
+!Y?(M=!0,e.attachEvent("onreadystatechange",b.onScriptLoad)):(e.addEventListener("load",b.onScriptLoad,!1),e.addEventListener("error",b.onScriptError,!1)),e.src=d,J=e,D?y.insertBefore(e,D):y.appendChild(e),J=null,e;if(ea)try{importScripts(d),b.completeLoad(c)}catch(m){b.onError(C("importscripts","importScripts failed for "+c+" at "+d,m,[c]))}};z&&!q.skipDataMain&&T(document.getElementsByTagName("script"),function(b){y||(y=b.parentNode);if(I=b.getAttribute("data-main"))return s=I,q.baseUrl||(E=s.split("/"),
+s=E.pop(),O=E.length?E.join("/")+"/":"./",q.baseUrl=O),s=s.replace(Q,""),g.jsExtRegExp.test(s)&&(s=I),q.deps=q.deps?q.deps.concat(s):[s],!0});define=function(b,c,d){var e,g;"string"!==typeof b&&(d=c,c=b,b=null);H(c)||(d=c,c=null);!c&&G(d)&&(c=[],d.length&&(d.toString().replace(ka,"").replace(la,function(b,d){c.push(d)}),c=(1===d.length?["require"]:["require","exports","module"]).concat(c)));if(M){if(!(e=J))N&&"interactive"===N.readyState||T(document.getElementsByTagName("script"),function(b){if("interactive"===
+b.readyState)return N=b}),e=N;e&&(b||(b=e.getAttribute("data-requiremodule")),g=F[e.getAttribute("data-requirecontext")])}(g?g.defQueue:R).push([b,c,d])};define.amd={jQuery:!0};g.exec=function(b){return eval(b)};g(q)}})(this);
diff --git a/wcfsetup/install/files/style/layout.less b/wcfsetup/install/files/style/layout.less
index 6f96815a62..1450273c69 100644
--- a/wcfsetup/install/files/style/layout.less
+++ b/wcfsetup/install/files/style/layout.less
@@ -1570,6 +1570,10 @@ html[dir="rtl"] {
 	min-height: @wcfGapLarge;
 	position: relative;
 	z-index: 20; /* Prevents border overlay during transition */
+	
+	&.hidden {
+		display: none;
+	}
 }
 
 /* sub tabs */
-- 
2.20.1