// ==UserScript==
// @name         FA Additional BBCode Helper
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  Adds clickable functionality to common BBCode inputs
// @author       JaysonHusky
// @match        https://www.furaffinity.net/controls/journal/
// @grant        none
// @require      https://code.jquery.com/jquery-latest.js
// @downloadURL none
// ==/UserScript==

(function() {
    'use strict';
     // Add Special Stylesheet for keywords
		var JaysBBCodeCSS=document.createElement('style');
		var jayBBCodeStyle=document.createTextNode(`
			#abhjh {
border-radius: 3px;
background:rgba(1,0,0,0.1);
margin-right:5px;
				padding:3px;
}
a#whatsthis {
float:right;
clear:right;
font-size: 10px;
}
.helpcur {
cursor: help;
}

a.additionalbbcodeclicker{
				cursor:pointer;
margin-right; 10px;
			}
table#additionalbbcodes td.clickable{
				background: transparent;
transition: 1s all;
text-align:center;
}
table#additionalbbcodes td.clickable:hover{
				background: grey;
transition: 1s all;
			}
#abhjhbox {
font-size: 11px;
display:block;
margin: 10px;
}
		`);
		JaysBBCodeCSS.appendChild(jayBBCodeStyle);
		document.getElementsByTagName('body')[0].appendChild(JaysBBCodeCSS);
   $('form .floatleft').append(`
<br/><br/>
<div id="abhjh">
<h3>&nbsp;&nbsp;Additional BBCode Helper</h3>
<br/>
<table id="additionalbbcodes" border="0" style="width:680px;">
<tr>
</tr>
<tr>
<td><b>Links</b></td>
<td width="10px"></td>
<td class="clickable"><a class="additionalbbcodeclicker" onclick="performInsert(this, \'[url]\', \'[/url]\');">URL</a></td>
<td class="clickable"><a class="additionalbbcodeclicker" onclick="performInsert(this, \':icon\', \':\');">Username &amp; Icon</a></td>
<td class="clickable"><a class="additionalbbcodeclicker" onclick="performInsert(this, \':link\', \':\');">Username Only</a></td>
<td class="clickable"><a class="additionalbbcodeclicker" onclick="performInsert(this, \':\', \'icon:\');">Icon Only</a></td>
</tr>
<tr>
<td><b>Formatting</b></td>
<td width="10px"></td>
<td class="clickable"><a class="additionalbbcodeclicker" onclick="performInsert(this, \'[color=white]\', \'[/color]\');">Color</a></td>
<td class="clickable"><a class="additionalbbcodeclicker" onclick="performInsert(this, \'[quote]\', \'[/quote]\');">Quote</a></td>
<td class="clickable"><a class="additionalbbcodeclicker" onclick="performInsert(this, \'[s]\', \'[/s]\');">Strikethrough</a></td>
<td class="clickable"><a class="additionalbbcodeclicker" onclick="performInsert(this, \'[sup]\', \'[/sup]\');">Superscript</a></td>
<td class="clickable"><a class="additionalbbcodeclicker" onclick="performInsert(this, \'[sub]\', \'[/sub]\');">Subscript</a></td>
</tr>
<tr>
<td><b>Media</b></td>
<td width="10px"></td>
<td class="clickable"><a class="additionalbbcodeclicker" onclick="performInsert(this, \'[yt]\', \'[/yt]\');">YouTube</a></td>
</tr>
</table>
<span id="abhjhbox">Additional BBCode Helper is a add-on to add clickable functionality to the most commonly used BBCode on FurAffinity.<br/>You must highlight the text you want to "wrap" in the tags before clicking the tag you want.</span>
</div>
<br/>
`);
})();