12 files changed, 397 insertions, 196 deletions
diff --git a/phpBB/adm/index.php b/phpBB/adm/index.php
index 519f6c8310..7dc8e4b13d 100644
--- a/phpBB/adm/index.php
+++ b/phpBB/adm/index.php
@@ -50,8 +50,8 @@ define('IN_ADMIN', true);
 // Some oft used variables
 $safe_mode		= (@ini_get('safe_mode') == '1' || strtolower(@ini_get('safe_mode')) === 'on') ? true : false;
 $file_uploads	= (@ini_get('file_uploads') == '1' || strtolower(@ini_get('file_uploads')) === 'on') ? true : false;
-$module_id		= request_var('i', '');
-$mode			= request_var('mode', '');
+$module_id		= $request->variable('i', '');
+$mode			= $request->variable('mode', '');
 
 // Set custom style for admin area
 $template->set_custom_style(array(
diff --git a/phpBB/adm/style/acp_icons.html b/phpBB/adm/style/acp_icons.html
index f18dad0ef6..e723129e37 100644
--- a/phpBB/adm/style/acp_icons.html
+++ b/phpBB/adm/style/acp_icons.html
@@ -89,6 +89,9 @@
 	<!-- ENDIF -->
 		<td>{L_WIDTH}</td>
 		<td>{L_HEIGHT}</td>
+	<!-- IF not S_SMILIES -->
+		<td>{L_ALT_TEXT}</td>
+	<!-- ENDIF -->
 		<td>{L_DISPLAY_ON_POSTING}</td>
 	<!-- IF ID or S_ADD -->
 		<td>{L_ORDER}</td>
@@ -102,7 +105,7 @@
 	<!-- BEGIN items -->
 		<tr>
 
-		<td style="text-align: center;"><img src="{items.IMG_SRC}" alt="" title="" /><input type="hidden" name="image[{items.IMG}]" value="1" /></td>
+		<td style="text-align: center;"><img src="{items.IMG_SRC}" alt="{items.TEXT_ALT}" title="{items.TEXT_ALT}" /><input type="hidden" name="image[{items.IMG}]" value="1" /></td>
 		<td style="vertical-align: top;">[{items.IMG}]</td>
 		<!-- IF S_SMILIES -->
 			<td><input class="text post" type="text" name="code[{items.IMG}]" value="{items.CODE}" size="10" maxlength="50" /></td>
@@ -110,6 +113,9 @@
 		<!-- ENDIF -->
 		<td><input class="text post" type="number" size="3" name="width[{items.IMG}]" value="{items.WIDTH}" /></td>
 		<td><input class="text post" type="number" size="3" name="height[{items.IMG}]" value="{items.HEIGHT}" /></td>
+		<!-- IF not S_SMILIES -->
+			<td><input class="text post" type="text" name="alt[{items.IMG}]" value="{items.ALT}" size="10" maxlength="50" /></td>
+		<!-- ENDIF -->
 		<td>
 			<input type="checkbox" class="radio" name="display_on_posting[{items.IMG}]"{items.POSTING_CHECKED} onclick="toggle_select('{items.A_IMG}', this.checked, '{items.S_ROW_COUNT}');"/>
 			<!-- IF items.S_ID -->
diff --git a/phpBB/adm/style/acp_permissions.html b/phpBB/adm/style/acp_permissions.html
index 6dc9dca2e7..004027df41 100644
--- a/phpBB/adm/style/acp_permissions.html
+++ b/phpBB/adm/style/acp_permissions.html
@@ -327,14 +327,9 @@
 	<br class="responsive-hide" /><br class="responsive-hide" />
 
 	<!-- include tooltip file -->
-	<script type="text/javascript" src="style/tooltip.js"></script>
-	<script type="text/javascript">
-	// <![CDATA[
-		window.onload = function(){enable_tooltips_select('set-permissions', '{LA_ROLE_DESCRIPTION}', 'role')};
-	// ]]>
-	</script>
-
-	<form id="set-permissions" method="post" action="{U_ACTION}">
+	<!-- INCLUDEJS tooltip.js -->
+
+	<form id="set-permissions" method="post" action="{U_ACTION}" data-role-description="{L_ROLE_DESCRIPTION}">
 
 	{S_HIDDEN_FIELDS}
 
diff --git a/phpBB/adm/style/admin.css b/phpBB/adm/style/admin.css
index 0c00e5339e..cf009562b3 100644
--- a/phpBB/adm/style/admin.css
+++ b/phpBB/adm/style/admin.css
@@ -1782,7 +1782,7 @@ li.pagination ul {
 
 /* Action Highlighting
 ---------------------------------------- */
-.successbox, .errorbox {
+.successbox, .errorbox, .warningbox {
 	padding: 8px;
 	margin: 10px 0;
 	color: #FFFFFF;
@@ -1806,6 +1806,10 @@ li.pagination ul {
 	background-color: #BC2A4D;
 }
 
+.warningbox {
+	background-color: #fca600;
+}
+
 .successbox h3, .errorbox h3 {
 	color: #FFFFFF;
 	margin: 0 0 0.5em;
@@ -1864,6 +1868,7 @@ li.pagination ul {
 	color: #000;
 	text-align: center;
 	border: 1px solid #AAA;
+	opacity: .95;
 }
 
 .tooltip span.top {
@@ -2441,6 +2446,39 @@ fieldset.permissions .padding {
 	display: none !important;
 }
 
+.roles-options > .dropdown {
+	left: auto;
+	top: 3em;
+	width: 250px;
+}
+
+.roles-options {
+	-webkit-user-select: none;
+	-moz-user-select: none;
+	-ms-user-select: none;
+	-o-user-select: none;
+	user-select: none;
+	width: 250px;
+}
+
+.roles-options > span {
+	border: 1px solid #DEDEDE;
+	border-radius: 3px;
+	padding: 4px;
+	width: 250px;
+	display: block;
+	background: url('../images/arrow_down.gif') no-repeat 245px .7em;
+}
+
+.roles-options li {
+	list-style: none;
+}
+
+.roles-highlight {
+	background-color: #1e90ff;
+	color: #fff;
+}
+
 
 /* Classes for additional tasks
 ---------------------------------------- */
@@ -2489,3 +2527,30 @@ fieldset.permissions .padding {
 	clear: both;
 	display: block;
 }
+
+#progress-bar {
+	position: relative;
+	width: 90%;
+	height: 25px;
+	margin: 20px auto;
+	border: 1px solid #cecece;
+}
+
+#progress-bar #progress-bar-text {
+	position: absolute;
+	top: 0;
+	width: 100%;
+	text-align: center;
+	line-height: 25px;
+	font-weight: bold;
+}
+
+#progress-bar #progress-bar-filler {
+	display: block;
+	position: relative;
+	top: 0;
+	left: 0;
+	background-color: #3c84ad;
+	width: 0;
+	height: 25px;
+}
diff --git a/phpBB/adm/style/captcha_recaptcha.html b/phpBB/adm/style/captcha_recaptcha.html
index d3038fd714..3f61c76cb1 100644
--- a/phpBB/adm/style/captcha_recaptcha.html
+++ b/phpBB/adm/style/captcha_recaptcha.html
@@ -1,32 +1,12 @@
 <!-- IF S_RECAPTCHA_AVAILABLE -->
 	<dl>
 	<dd>
-		<script type="text/javascript">
-		// <![CDATA[
-		var RecaptchaOptions = {
-			lang : '{LA_RECAPTCHA_LANG}',
-			theme : 'clean'
-		};
-		// ]]>
-		</script>
-		<script type="text/javascript" src="{RECAPTCHA_SERVER}/challenge?k={RECAPTCHA_PUBKEY}{RECAPTCHA_ERRORGET}"></script>
-		<script type="text/javascript">
-		// <![CDATA[
-		<!-- IF S_CONTENT_DIRECTION eq 'rtl' -->
-			document.getElementById('recaptcha_table').style.direction = 'ltr';
-		<!-- ENDIF -->
-		// ]]>
-		</script>
-
-
 	<noscript>
-	<div>
-		<object data="{RECAPTCHA_SERVER}/noscript?k={RECAPTCHA_PUBKEY}{RECAPTCHA_ERRORGET}" type="text/html" height="300" width="500"></object><br />
-		<textarea name="recaptcha_challenge_field" rows="3" cols="40"></textarea>
-		<input type="hidden" name="recaptcha_response_field" value="manual_challenge" />
-	</div>
+		<div>{L_RECAPTCHA_NOSCRIPT}</div>
 	</noscript>
 
+		<script src="{RECAPTCHA_SERVER}.js?hl={LA_RECAPTCHA_LANG}" async defer></script>
+		<div class="g-recaptcha" data-sitekey="{RECAPTCHA_PUBKEY}"></div>
 	</dd>
 	</dl>
 <!-- ELSE -->
diff --git a/phpBB/adm/style/installer_footer.html b/phpBB/adm/style/installer_footer.html
new file mode 100644
index 0000000000..617d3dc254
--- /dev/null
+++ b/phpBB/adm/style/installer_footer.html
@@ -0,0 +1,21 @@
+					</div>
+				</div><!-- /#main -->
+			</div>
+		</div><!-- /#acp -->
+	</div>
+
+	<div id="page-footer">
+		<div class="copyright">
+			Powered by <a href="https://www.phpbb.com/">phpBB</a>&reg; Forum Software &copy; phpBB Limited
+		</div>
+	</div>
+</div>
+
+<script type="text/javascript" src="{T_JQUERY_LINK}"></script>
+<!-- IF S_ALLOW_CDN --><script type="text/javascript">window.jQuery || document.write(unescape('%3Cscript src="{T_ASSETS_PATH}/javascript/jquery.min.js" type="text/javascript"%3E%3C/script%3E'));</script><!-- ENDIF -->
+<script type="text/javascript" src="{T_ASSETS_PATH}/javascript/core.js?assets_version={T_ASSETS_VERSION}"></script>
+<!-- INCLUDEJS admin.js -->
+{$SCRIPTS}
+
+</body>
+</html>
diff --git a/phpBB/adm/style/installer_form.html b/phpBB/adm/style/installer_form.html
new file mode 100644
index 0000000000..669f7aa834
--- /dev/null
+++ b/phpBB/adm/style/installer_form.html
@@ -0,0 +1,56 @@
+<form id="<!-- IF FORM_ID -->{FORM_ID}<!-- ELSE -->install_install<!-- ENDIF -->" method="POST" action="{U_ACTION}">
+<!-- IF .options -->
+<!-- IF S_FORM_ELEM_COUNT > 1 -->
+<fieldset>
+<!-- ENDIF -->
+
+	<!-- BEGIN options -->
+		<!-- IF options.S_LEGEND -->
+			<!-- IF not options.S_FIRST_ROW -->
+			</fieldset>
+
+			<fieldset>
+			<!-- ENDIF -->
+		<legend>{options.LEGEND}</legend>
+		<!-- ELSE -->
+
+			<!-- IF options.TYPE <> 'submit' -->
+		<dl>
+			<dt><label for="{options.KEY}">{options.TITLE}{L_COLON}</label><!-- IF options.S_EXPLAIN --><br /><span class="explain">{options.TITLE_EXPLAIN}</span><!-- ENDIF --></dt>
+			<dd>
+				<!-- IF options.TYPE == 'text' -->
+				<input type="text" name="{options.KEY}" value="{options.DEFAULT}" />
+				<!-- ENDIF -->
+				<!-- IF options.TYPE == 'email' -->
+				<input type="email" name="{options.KEY}" value="{options.DEFAULT}" />
+				<!-- ENDIF -->
+				<!-- IF options.TYPE == 'password' -->
+				<input type="password" name="{options.KEY}" />
+				<!-- ENDIF -->
+				<!-- IF options.TYPE == 'select' -->
+				<select name="{options.KEY}">
+					<!-- BEGIN options.OPTIONS -->
+					<option value="{options.OPTIONS.value}"<!-- IF options.OPTIONS.selected --> selected<!-- ENDIF -->>{options.OPTIONS.label}</option>
+					<!-- END options.OPTIONS -->
+				</select>
+				<!-- ENDIF -->
+				<!-- IF options.TYPE == 'radio' -->
+					<!-- BEGIN options.OPTIONS -->
+				<input type="radio" name="{options.KEY}" value="{options.OPTIONS.value}" <!-- IF options.OPTIONS.selected -->checked<!-- ENDIF --> /> {options.OPTIONS.label}
+					<!-- END options.OPTIONS -->
+				<!-- ENDIF -->
+			</dd>
+		</dl>
+			<!-- ELSE -->
+<!-- IF S_FORM_ELEM_COUNT > 1 -->
+</fieldset>
+<!-- ENDIF -->
+				<fieldset class="submit-buttons">
+					<legend>{L_SUBMIT}</legend>
+					<input class="button1" type="submit" name="{options.KEY}" value="{options.TITLE}" />
+				</fieldset>
+			<!-- ENDIF -->
+		<!-- ENDIF-->
+	<!-- END options -->
+<!-- ENDIF -->
+</form>
diff --git a/phpBB/adm/style/installer_header.html b/phpBB/adm/style/installer_header.html
new file mode 100644
index 0000000000..775caa7c67
--- /dev/null
+++ b/phpBB/adm/style/installer_header.html
@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<html dir="{S_CONTENT_DIRECTION}" lang="{S_USER_LANG}">
+<head>
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1" />
+	<!-- IF META -->{META}<!-- ENDIF -->
+	<title>{PAGE_TITLE}</title>
+
+	<link href="{T_TEMPLATE_PATH}/admin.css" rel="stylesheet" type="text/css" media="screen" />
+</head>
+
+<body class="{S_CONTENT_DIRECTION} nojs">
+<div id="wrap">
+	<div id="page-header">
+		<h1>{L_INSTALL_PANEL}</h1>
+		<p id="skip"><a href="#acp">{L_SKIP}</a></p>
+		<!-- IF S_LANG_SELECT -->
+		<form method="post" action="#" id="language_selector">
+			<fieldset class="nobg">
+				<label for="language">{L_SELECT_LANG}{L_COLON}</label>
+				<select  id="language" name="language">
+					<!-- BEGIN language_select_item -->
+					<option value="{language_select_item.VALUE}"<!-- IF language_select_item.SELECTED --> selected="selected"<!-- ENDIF -->>{language_select_item.NAME}</option>
+					<!-- END language_select_item -->
+				</select>
+				<input class="button1" type="submit" id="change_lang" name="change_lang" value="{L_CHANGE}" />
+			</fieldset>
+		</form>
+		<!-- ENDIF -->
+	</div>
+
+	<div id="page-body">
+		<div id="tabs">
+			<ul>
+				<!-- BEGIN t_block1 -->
+				<li class="tab<!-- IF t_block1.S_SELECTED --> activetab<!-- ENDIF -->"><a href="{t_block1.U_TITLE}">{t_block1.L_TITLE}</a></li>
+				<!-- END t_block1 -->
+			</ul>
+		</div>
+
+		<div id="acp">
+			<div id="content">
+				<div id="menu">
+					<div class="menu-block no-header">
+						<ul>
+							<!-- BEGIN l_block1 -->
+							<li<!-- IF l_block1.S_SELECTED --> id="activemenu"<!-- ENDIF -->><a href="{l_block1.U_TITLE}"><span>{l_block1.L_TITLE}</span></a></li>
+							<!-- END l_block1 -->
+							<!-- BEGIN l_block2 -->
+							<li<!-- IF l_block2.S_SELECTED --> id="activemenu"<!-- ENDIF -->><span<!-- IF l_block2.S_COMPLETE --> class="completed"<!-- ENDIF --> id="installer-stage-{l_block2.STAGE_NAME}">{l_block2.L_TITLE}</span></li>
+							<!-- END l_block2 -->
+						</ul>
+					</div>
+				</div>
+
+				<div id="main" class="install-body">
+					<div class="main">
diff --git a/phpBB/adm/style/installer_install.html b/phpBB/adm/style/installer_install.html
new file mode 100644
index 0000000000..53a91f2700
--- /dev/null
+++ b/phpBB/adm/style/installer_install.html
@@ -0,0 +1,13 @@
+<!-- INCLUDE installer_header.html -->
+<h1>{TITLE}</h1>
+<p>{CONTENT}</p>
+<!-- IF SHOW_INSTALL_START_FORM -->
+<form id="install_install" method="post" action="{U_ACTION}">
+	<fieldset class="submit-buttons">
+		<legend>{L_SUBMIT}</legend>
+		<input class="button1" name="install" type="submit" value="{L_INSTALL}" />
+	</fieldset>
+</form>
+<!-- ENDIF -->
+<!-- INCLUDEJS {T_ASSETS_PATH}/javascript/installer.js -->
+<!-- INCLUDE installer_footer.html -->
diff --git a/phpBB/adm/style/installer_main.html b/phpBB/adm/style/installer_main.html
new file mode 100644
index 0000000000..f14fe4da70
--- /dev/null
+++ b/phpBB/adm/style/installer_main.html
@@ -0,0 +1,6 @@
+<!-- INCLUDE installer_header.html -->
+
+	<h1>{TITLE}</h1>
+	<p>{BODY}</p>
+
+<!-- INCLUDE installer_footer.html -->
diff --git a/phpBB/adm/style/permission_mask.html b/phpBB/adm/style/permission_mask.html
index 7b5c071693..347da3181e 100644
--- a/phpBB/adm/style/permission_mask.html
+++ b/phpBB/adm/style/permission_mask.html
@@ -39,11 +39,23 @@
 		</div>
 		<dl class="permissions-simple">
 			<dt style="width: 20%"><label for="role{p_mask.S_ROW_COUNT}{p_mask.f_mask.S_ROW_COUNT}">{L_ROLE}{L_COLON}</label></dt>
-			<!-- IF p_mask.f_mask.S_ROLE_OPTIONS -->
-				<dd style="margin-{S_CONTENT_FLOW_BEGIN}{L_COLON} 20%"><select id="role{p_mask.S_ROW_COUNT}{p_mask.f_mask.S_ROW_COUNT}" name="role[{p_mask.f_mask.UG_ID}][{p_mask.f_mask.FORUM_ID}]" onchange="set_role_settings(this.options[selectedIndex].value, 'advanced{p_mask.S_ROW_COUNT}{p_mask.f_mask.S_ROW_COUNT}'); init_colours('{p_mask.S_ROW_COUNT}{p_mask.f_mask.S_ROW_COUNT}')">{p_mask.f_mask.S_ROLE_OPTIONS}</select></dd>
-			<!-- ELSE -->
+			{% if role_options %}
+				<dd style="margin-{S_CONTENT_FLOW_BEGIN}{L_COLON} 20%">
+					<div class="dropdown-container dropdown-button-control roles-options" data-alt-text="{LA_ROLE_DESCRIPTION}">
+						<span title="Roles" class="button icon-button tools-icon dropdown-trigger dropdown-select">{L_NO_ROLE_ASSIGNED}</span>
+						<div class="dropdown hidden">
+							<ul class="dropdown-contents" id="role{p_mask.S_ROW_COUNT}{p_mask.f_mask.S_ROW_COUNT}" >
+								{% for role in loops.role_options %}
+									<li data-id="{{ role.ID }}" data-target-id="advanced{p_mask.S_ROW_COUNT}{p_mask.f_mask.S_ROW_COUNT}" data-title="{{ role.TITLE }}"{% if role.SELECTED == true %} data-selected="{{ role.SELECTED }}"{% endif %}>{{ role.ROLE_NAME }}</li>
+								{% endfor %}
+							</ul>
+						</div>
+						<input type="hidden" name="role[{p_mask.f_mask.UG_ID}][{p_mask.f_mask.FORUM_ID}]"{% if S_ROLE_ID %}value="{{ S_ROLE_ID }}"{% endif %} />
+					</div>
+				</dd>
+			{% else %}
 				<dd>{L_NO_ROLE_AVAILABLE}</dd>
-			<!-- ENDIF -->
+			{% endif %}
 		</dl>
 	<!-- ENDIF -->
 
diff --git a/phpBB/adm/style/tooltip.js b/phpBB/adm/style/tooltip.js
index 3a89008706..68964034f0 100644
--- a/phpBB/adm/style/tooltip.js
+++ b/phpBB/adm/style/tooltip.js
@@ -10,206 +10,196 @@ phpBB Development Team:
 	- further adjustements
 */
 
-var head_text, tooltip_mode;
+(function($) { // Avoid conflicts with other libraries
 
-/**
-* Enable tooltip replacements for links
-*/
-function enable_tooltips_link(id, headline, sub_id) {
-	var links, i, hold;
-
-	head_text = headline;
-
-	if (!document.getElementById || !document.getElementsByTagName) {
-		return;
-	}
-
-	hold = document.createElement('span');
-	hold.id = '_tooltip_container';
-	hold.setAttribute('id', '_tooltip_container');
-	hold.style.position = 'absolute';
+'use strict';
 
-	document.getElementsByTagName('body')[0].appendChild(hold);
-
-	if (id === null) {
-		links = document.getElementsByTagName('a');
-	} else {
-		links = document.getElementById(id).getElementsByTagName('a');
-	}
-
-	for (i = 0; i < links.length; i++) {
-		if (sub_id) {
-			if (links[i].id.substr(0, sub_id.length) === sub_id) {
-				prepare(links[i]);
-			}
-		} else {
-			prepare(links[i]);
-		}
-	}
-
-	tooltip_mode = 'link';
-}
+var tooltips = [];
 
 /**
-* Enable tooltip replacements for selects
+ * Enable tooltip replacements for selects
+ * @param {string} id ID tag of select
+ * @param {string} headline Text that should appear on top of tooltip
+ * @param {string} [subId] Sub ID that should only be using tooltips (optional)
 */
-function enable_tooltips_select(id, headline, sub_id) {
-	var links, i, hold;
-
-	head_text = headline;
-
-	if (!document.getElementById || !document.getElementsByTagName) {
-		return;
-	}
+phpbb.enableTooltipsSelect = function (id, headline, subId) {
+	var $links, hold;
 
-	hold = document.createElement('span');
-	hold.id = '_tooltip_container';
-	hold.setAttribute('id', '_tooltip_container');
-	hold.style.position = 'absolute';
+	hold = $('<span />', {
+		id:		'_tooltip_container',
+		css: {
+			position: 'absolute'
+		}
+	});
 
-	document.getElementsByTagName('body')[0].appendChild(hold);
+	$('body').append(hold);
 
-	if (id === null) {
-		links = document.getElementsByTagName('option');
+	if (!id) {
+		$links = $('.roles-options li');
 	} else {
-		links = document.getElementById(id).getElementsByTagName('option');
+		$links = $('.roles-options li', '#' + id);
 	}
 
-	for (i = 0; i < links.length; i++) {
-		if (sub_id) {
-			if (links[i].parentNode.id.substr(0, sub_id.length) === sub_id) {
-				prepare(links[i]);
+	$links.each(function () {
+		var $this = $(this);
+
+		if (subId) {
+			if ($this.parent().attr('id').substr(0, subId.length) === subId) {
+				phpbb.prepareTooltips($this, headline);
 			}
 		} else {
-			prepare(links[i]);
+			phpbb.prepareTooltips($this, headline);
 		}
-	}
-
-	tooltip_mode = 'select';
-}
+	});
+};
 
 /**
-* Prepare elements to replace
+ * Prepare elements to replace
+ *
+ * @param {jQuery} $element Element to prepare for tooltips
+ * @param {string} headText Text heading to display
 */
-function prepare(element) {
-	var tooltip, text, desc, title;
+phpbb.prepareTooltips = function ($element, headText) {
+	var $tooltip, text, $desc, $title;
 
-	text = element.getAttribute('title');
+	text = $element.attr('data-title');
 
 	if (text === null || text.length === 0) {
 		return;
 	}
 
-	element.removeAttribute('title');
-	tooltip = create_element('span', 'tooltip');
-
-	title = create_element('span', 'top');
-	title.appendChild(document.createTextNode(head_text));
-	tooltip.appendChild(title);
-
-	desc = create_element('span', 'bottom');
-	desc.innerHTML = text;
-	tooltip.appendChild(desc);
-
-	set_opacity(tooltip);
+	$title = $('<span />', {
+		class: 'top',
+		css: {
+			display:	'block'
+		}
+	})
+		.append(document.createTextNode(headText));
+
+	$desc = $('<span />', {
+		class: 'bottom',
+		html: text,
+		css: {
+			display: 'block'
+		}
+	});
 
-	element.tooltip = tooltip;
-	element.onmouseover = show_tooltip;
-	element.onmouseout = hide_tooltip;
+	$tooltip = $('<span />', {
+		class: 'tooltip',
+		css: {
+			display: 'block'
+		}
+	})
+		.append($title)
+		.append($desc);
 
-	if (tooltip_mode === 'link') {
-		element.onmousemove = locate;
-	}
-}
+	tooltips[$element.attr('data-id')] = $tooltip;
+	$element.on('mouseover', phpbb.showTooltip);
+	$element.on('mouseout', phpbb.hideTooltip);
+};
 
 /**
-* Show tooltip
+ * Show tooltip
+ *
+ * @param {object} $element Element passed by .on()
 */
-function show_tooltip(e) {
-	document.getElementById('_tooltip_container').appendChild(this.tooltip);
-	locate(this);
-}
+phpbb.showTooltip = function ($element) {
+	var $this = $($element.target);
+	$('#_tooltip_container').append(tooltips[$this.attr('data-id')]);
+	phpbb.positionTooltip($this);
+};
 
 /**
-* Hide tooltip
+ * Hide tooltip
 */
-function hide_tooltip(e) {
+phpbb.hideTooltip = function () {
 	var d = document.getElementById('_tooltip_container');
 	if (d.childNodes.length > 0) {
 		d.removeChild(d.firstChild);
 	}
-}
+};
 
 /**
-* Set opacity on tooltip element
+ * Correct positioning of tooltip container
+ *
+ * @param {jQuery} $element Tooltip element that should be positioned
 */
-function set_opacity(element) {
-	element.style.filter = 'alpha(opacity:95)';
-	element.style.KHTMLOpacity = '0.95';
-	element.style.MozOpacity = '0.95';
-	element.style.opacity = '0.95';
-}
+phpbb.positionTooltip = function ($element) {
+	var offset;
 
-/**
-* Create new element
-*/
-function create_element(tag, c) {
-	var x = document.createElement(tag);
-	x.className = c;
-	x.style.display = 'block';
-	return x;
-}
-
-/**
-* Correct positioning of tooltip container
-*/
-function locate(e) {
-	var posx = 0;
-	var posy = 0;
+	$element = $element.parent();
+	offset = $element.offset();
 
-	e = e.parentNode;
+	$('#_tooltip_container').css({
+		top: offset.top + 30,
+		left: offset.left - 205
+	});
+};
 
-	if (e.offsetParent) {
-		for (posx = 0, posy = 0; e.offsetParent; e = e.offsetParent) {
-			posx += e.offsetLeft;
-			posy += e.offsetTop;
+/**
+ * Prepare roles drop down select
+ */
+phpbb.prepareRolesDropdown = function () {
+	var $options = $('.roles-options li');
+	var $rolesOptions = $options.closest('.roles-options');
+	var $span = $rolesOptions.children('span');
+
+	// Prepare highlighting of select options and settings update
+	$options.each(function () {
+		var $this = $(this);
+
+		// Correctly show selected option
+		if (typeof $this.attr('data-selected') !== 'undefined') {
+			$rolesOptions.closest('.roles-options')
+				.children('span')
+				.text($this.text())
+				.attr('data-default', $this.text())
+				.attr('data-default-val', $this.attr('data-id'));
 		}
-	} else {
-		posx = e.offsetLeft;
-		posy = e.offsetTop;
-	}
 
-	if (tooltip_mode === 'link') {
-		document.getElementById('_tooltip_container').style.top=(posy+20) + 'px';
-		document.getElementById('_tooltip_container').style.left=(posx-20) + 'px';
-	} else {
-		document.getElementById('_tooltip_container').style.top=(posy+30) + 'px';
-		document.getElementById('_tooltip_container').style.left=(posx-205) + 'px';
+		$this.on('mouseover', function () {
+			var $this = $(this);
+			$options.removeClass('roles-highlight');
+			$this.addClass('roles-highlight');
+		}).on('click', function () {
+			var $this = $(this);
+
+			// Update settings
+			set_role_settings($this.attr('data-id'), $this.attr('data-target-id'));
+			init_colours($this.attr('data-target-id').replace('advanced', ''));
+
+			// Set selected setting
+			$rolesOptions.children('span')
+				.text($this.text());
+			$rolesOptions.children('input[type=hidden]')
+				.val($this.attr('data-id'));
+
+			// Trigger hiding of selection options
+			$('body').trigger('click');
+		});
+	});
+
+	// Save default text of drop down if there is no default set yet
+	if (typeof $span.attr('data-default') === 'undefined') {
+		$span.attr('data-default', $span.text());
 	}
 
-/*
-	if (e == null)
-	{
-		e = window.event;
-	}
+	// Prepare resetting drop down on form reset
+	$options.closest('form').on('reset', function () {
+		$span.text($span.attr('data-default'));
+		$rolesOptions.children('input[type=hidden]')
+			.val($span.attr('data-id'));
+	});
 
-	if (e.pageX || e.pageY)
-	{
-		posx = e.pageX;
-		posy = e.pageY;
-	}
-	else if (e.clientX || e.clientY)
-	{
-		if (document.documentElement.scrollTop)
-		{
-			posx = e.clientX+document.documentElement.scrollLeft;
-			posy = e.clientY+document.documentElement.scrollTop;
-		}
-		else
-		{
-			posx = e.clientX+document.body.scrollLeft;
-			posy = e.clientY+document.body.scrollTop;
-		}
-	}
-*/
-}
+};
+
+// Run onload functions for RolesDropdown and tooltips
+$(function() {
+	// Enable tooltips
+	phpbb.enableTooltipsSelect('set-permissions', $('#set-permissions').attr('data-role-description'), 'role');
+
+	// Prepare dropdown
+	phpbb.prepareRolesDropdown();
+});
+
+})(jQuery); // Avoid conflicts with other libraries