chat options

/* old code: replaced with localStorage.
Cookies are sent to the server every time you request a page, while they do make for good cross-page storage, localStorage was created to take over that functionality.
For some reason most people have never heard of it. You can consider yourself a JS hipster now, I guess.
It's basically a group of self explanatory functions:
localStorage.getItem('name of item');
localStorage.setItem('name of item', 'stuff to store');
localStorage.removeItem('name of item');
You can only store strings, unfortunately. Coincidentally, this is also true of cookies. There's probably a connection there.
Anyway, to get around that, as you'll see below, we use the JSON object.

// function to set a cookie
function setCookie( cookie_name, data ) {
    var splitServer = wgServer.split("//");
    var domain = splitServer[1];
    document.cookie =
        cookie_name + "=" + data +
        "; max-age=" + 60*60*24*150 +
        "; path=/; domain=" + domain ;
}

// function to get a cookie
function getCookie( cookie_name, pos ) {
    var i, x, y, cookie_array = document.cookie.split(";");
    for (i=0; i<cookie_array.length; i++) {
        x = cookie_array[i].substr(0,cookie_array[i].indexOf("="));
        y = cookie_array[i].substr(cookie_array[i].indexOf("=")+1);
        x = x.replace(/^\s+|\s+$/g,"");
        if (x == cookie_name) {
            var style_objects = y.split(", ");
            return unescape(style_objects[pos]);
        }
    }
}
*/

/* old code: is now an object.
Objects are generally cleaner than global variables - ideally when writing this kind of code, you want to keep everything you do inside a single global object, to minimize the chance of collision with other people's code. Of course, on Wikia, most people don't write code, so it's not as important.
The main reason why it's better as an object is because now we can save and load it with a one liner - JSON.parse and JSON.stringify.
These are also two things that an odd number of people have never heard of. Now you're a bigger JS hipster.
JSON.stringify accepts anything and returns a string that represents that data. For example, JSON.stringify('foo') returns the string "foo", quotes included (it also escapes everything by itself - 'foo"' would return "foo\""). JSON.stringify([1, 2, 'bar']) returns the string [1,2,"bar"].
It's kind of hard to explain like this. If you're confused, pop open console and try it out. It's really cool.
JSON.parse does the opposite, it takes the output of JSON.stringify and turns it back into an object (or string, or array, etc).
This is default, too. No libraries. Cool stuff.
Basically, since it's an object now, we can JSON.stringify the object and store it in localStorage. Then when we load it, we get it out of localStorage and JSON.parse it.
Quick and easy.

// defining various global variables
var backgroundColour = getCookie("customisation", 0);
var fontColour = getCookie("customisation", 1);
var chatHacksEnabled = getCookie("customisation", 2);
var fontChoice = getCookie("customisation", 3);
var tabCompleteEnabled = getCookie("customisation", 4);
var multiKickEnabled = getCookie("customisation", 5);
var multiPMEnabled = getCookie("customisation", 6);
var searchBarEnabled = getCookie("customisation", 7);
var ignoreURLEnabled = getCookie("customisation", 8);
var stopSideScrollEnabled = getCookie("customisation", 9);
var surroundColour = getCookie("customsation", 10);
*/

//load options
var data = localStorage.getItem('chat-options');
if(!data) { //nothing saved yet
    var options = {
        backgroundColour: '',
        fontColour: '',
        chatHacksEnabled: false,
        fontChoice: '',
        tabCompleteEnabled: false,
        multiKickEnabled: false,
        multiPMEnabled: false,
        searchBarEnabled: false,
        ignoreURLEnabled: false,
        stopSideScrollEnabled: false,
        surroundColour: ''
    }
}
else {var options = JSON.parse(data);}

// defining various global variables
var chatHacksLoaded = false;
var tabCompleteLoaded = false;
var multiKickLoaded = false;
var multiKickDisplayer = '';
var ignoreURLDisplayer = ''; //to stop non-admins/chatmods being able to load the multikick script
var multiPMLoaded = false;
var searchBarLoaded = false;

/* old code: merged into updateChatSkin.
These two functions are really pretty similar. Luckily all the logic in updateChatSkin evaluates correctly on load as well - so there's no need for two different functions.

// called when chat is loaded to update the skin
function loadChatSkin() {
*/

// function to update the skin after the settings are saved
function updateChatSkin() {
    /* old code: replaced with DOM.
    If you haven't figured it out by now, I absolutely despise jQuery. It encourages bad coding practices, it's slow, it's never really necessary, and I really just hate it. A lot.
    Anywho, Wikia luckily has been getting better at putting ids on their unique elements (bad HTML practices 101: NEVER IDENTIFY A UNIQUE ELEMENT WITH A CLASS. Why do people do that? Because it's easy with jQuery. (no, that isn't your fault.)) so we can use document.getElementById to get these. Fun fact: the body tag and the head tag are both stored for easy access at document.body and document.head. Another thing most people don't seem to know. Bigger hipster.
    .style is the standard way of setting CSS properties from JS. Basically, any CSS property that has a hyphen in it (like background-color) becomes camel case (backgroundColor). They work just like you'd expect them to, element.style.backgroundColor = 'red' will make it red, element.style.width = '150px' will make it 150 pixels wide, etc.

    $('body').css({"background-color":surroundColour});
    $('.WikiaPage').css({"background-color":backgroundColour, "color":fontColour, "font-family":fontChoice});
    $('.Chat').css({"font-family":fontChoice});
    $('.Rail').css({"font-family":fontChoice});
    $('.ChatHeader').css({"background-color":backgroundColour, "font-family":fontChoice});
    */
    document.body.style.backgroundColor = surroundColour
    document.getElementById('WikiaPage').style.backgroundColor = backgroundColour;
    document.getElementById('WikiaPage').style.color = fontColour;
    document.getElementById('WikiaPage').style.fontFamily = fontChoice;
    document.getElementById('Chat').style.fontFamily = fontChoice;
    document.getElementById('Rail').style.fontFamily = fontChoice;
    document.getElementById('ChatHeader').style.backgroundColor = backgroundColour;
    document.getElementById('ChatHeader').style.fontFamily = fontChoice;
    /* old code: streamlined.
    A more advanced concept with if statements is that the condition is actually just an expression. Operators like &&, || and == aren't specific to ifs - try it in console. You can just type 'foo' == 'foo' and it'll output true, no if() needed.
    The technical way ifs work is that if the expression inside evaluates to true, then the code is run. Most things in JS are expressions (like thing && thing), so you can do a lot with that. Just a variable is an expression - so if(var1) {code} is valid. If whatever that variable is evaluates to true, then the code is run.
    "evaluates to true" may be a little confusing, so to clarify:
    If it's a boolean, then it's just that. Obvious.
    0 is false. Every other number, including negatives, is true.
    '' (an empty string) is false. Any string with contents is true.
    Every array is true, even empty ones. This is probably because arrays are really objects, and:
    Every object is true, even empty ones.
    undefined and null are both false. For trivia, undefined == null is true, but undefined === null is false.
    NaN is false. Also for trivia, NaN is the only value in JS that doesn't equal itself. Seriously, NaN == NaN is false. I didn't believe it either. You're supposed to use isNaN() instead.
    So basically, if(thing == true) is the same as if(thing).
    For if(thing == false), you can use if(!thing). ! as you may or may not know is the boolean operator for "not".

    Also remember that this is also run on load now. If you think about what all the variables would be set to on load, you'll see it works both on load and after load.
    As you'll see farther down, all of the thingEnabled variables are booleans now instead of the strings 'true' or 'false'.

    if (chatHacksLoaded == false && chatHacksEnabled == "true" && $('#pingspan').length <= 0) {
        importScriptPage("User:Monchoman45/ChatHacks.js","c");
        chatHacksLoaded = true;
    }
    if (tabCompleteLoaded == false && tabCompleteEnabled == "true") {
        importScriptPage("User:Joeytje50/tabinsert.js","rs");
    }
    if (multiKickLoaded == false && multiKickEnabled == "true" && $('#multiKickerButton').length <= 0) {
        importScriptPage("User:Madnessfan34537/multikick.js","cod");
    }
    if (multiKickEnabled == "true") {
        $('<a id="multiKickerButton" class="wikia-button" href="javascript:showPopup()" style="position:absolute; right:55px; top:22px;">Multikick</a>').appendTo('.Write'); // to prevent issues with the button not loading
    }
    if (multiPMLoaded == false && multiPMEnabled == "true") {
        importScriptPage("MediaWiki:Chat.js/multipms.js","cod");
    }
    if (searchBarLoaded == false && searchBarEnabled == "true") {
        importScriptPage("MediaWiki:Chat.js/searchbar.js","cod");
    }
    */

    if(!chatHacksLoaded && options.chatHacksEnabled) {
        importScriptPage('User:Monchoman45/ChatHacks.js', 'c');
        chatHacksLoaded = true;
    }
    if(!tabCompleteLoaded && options.tabCompleteEnabled) {
        importScriptPage('User:Joeytje50/tabinsert.js', 'rs');
        tabCompleteLoaded = true;
    }
    if(!multiKickLoaded && options.multiKickEnabled) {
        importScriptPage('User:Madnessfan34537/multikick.js', 'cod');
        $('<a id="multiKickerButton" class="wikia-button" href="javascript:showPopup()" style="position:absolute; right:55px; top:22px;">Multikick</a>').appendTo('.Write'); // to prevent issues with the button not loading
        multiKickLoaded = true;
    }
    if(!multiPMLoaded && options.multiPMEnabled) {
        importScriptPage('MediaWiki:Chat.js/multipms.js', 'cod');
        multiPMLoaded = true;
    }
    if(!searchBarLoaded && options.searchBarEnabled) {
        importScriptPage('MediaWiki:Chat.js/searchbar.js', 'cod');
        searchBarLoaded = true;
    }
    /* old code: can be disabled now.
    ignoreURLLoaded and stopSideScrollLoaded don't exist anymore, because we don't really need them. Basically, by putting an id on the style tags, we can check to see if they're already there with document.getElementById. All HTML elements are objects, which per above, evaluate to true in an if, and document.getElementById returns null if the id isn't in the DOM.
    This also introduces two more things: Creating elements without jQuery and removing elements without jQuery (die jQuery, die!).
    document.createElement accepts a tag name, and returns an empty element object. With that you can use all the basic properties to set stuff. Most attributes have an easy access object property, like name="", value="", id="", all that stuff. class="" is className, for some odd reason. innerHTML is a cute property, you can give it an HTML string, and it will be parsed and turned into elements.
    document.createElement doesn't put the element onto the page, it creates it floating in digital space. There are a few ways to put it on the page:
    element.appendChild(child) does exactly what you think it does. It's basically jQuery's .append(), except you can't give it an HTML string.
    element.insertBefore(sibling) is a bit weirder. "element" has to be the element you want to put on the page, and "sibling" is the element it will be before. So to explain better, let's say you have <div id="div"><span id="span"></span></div>. If you created an input element, input.insertBefore(document.getElementById('span')) would then make it <div id="div"><input id="input" /><span id="span"></span></div>. This is really important, because:
    There is no element.prependChild or element.insertAfter. For both of these, you can use sibling references - element.previousSibling and element.nextSibling - as well as element.firstChild and element.lastChild. firstChild and lastChild are self explanatory.
    If you have <span id="1"></span><span id="2"></span>, 1.nextSibling is 2 and 2.previousSibling is 1. On the flip side, 1.previousSibling and 2.nextSibling are both null, because 1 is the first child and 2 is the last child - there is no element before 1, and there is no element after 2.
    Now for removing an element. For this we use parent.removeChild(child). This sometimes makes for code that looks stupidly redundant - if don't know the parent off hand, you end up with element.parentNode.removeChild(element). Nevertheless, it's better than jQuery, because it's not jQuery. jQuery is too mainstream.
    In this particular case, we know the parent is the head tag, so we just use that.

    if (ignoreURLLoaded == false && ignoreURLEnabled == "true") {
        $('head').append('<style type="text/css">li[data-user="URL"] {display:none;}</style>');
    }
    if (stopSideScrollLoaded == false && stopSideScrollEnabled == "true") {
        $('head').append('<style type="text/css">#WikiaPage .Chat .message {word-wrap: break-word; }</style>');
    }
    */
    if(options.ignoreURLEnabled) {
        var css = document.createElement('style');
        css.type = 'text/css';
        css.id = 'ignoreURL';
        css.innerHTML = 'li[data-user="URL"] {display:none;}';
        document.head.appendChild(css);
    }
    else if(document.getElementById('ignoreURL')) {
        document.head.removeChild(document.getElementById('ignoreURL'));
    }
    if(options.stopSideScrollEnabled) {
        var css = document.createElement('style');
        css.type = 'text/css';
        css.id = 'stopSideScroll';
        css.innerHTML = '#WikiaPage .Chat .message {word-wrap: break-word;}';
        document.head.appendChild(css);
    }
    else if(document.getElementById('stopSideScroll')) {
        document.head.removeChild(document.getElementById('stopSideScroll'));
    }
}

/* old code: killed (most of the) jQuery.
jQuery's .show() basically just checks what kind of element it's looking at (block like div or inline like span) and sets .style.display to that. So that's easy to kill. .hide() is even easier, it's just .style.display = 'none'. .attr is slightly different, it's a direct map to .setAttribute(), which is a cover-all function - if a particular attribute doesn't have an easy access property (for example, all data- attributes), you can set it anyway using that function. In this case, however, we're setting selected, which has an easy access property.
$('select option[value="thing"]') is more difficult. What this will do is loop through every option tag inside a select tag (jQuery manages this with multiple for loops. Very inefficient), and check to see if the value attribute is the right one.
To fix that, I used the id on the select tag, to make it easier to get to the option tags. This alone accounts for most of the efficiency loss you would end up with by using jQuery - 'tagname tagname' is a horridly inefficient selector. To try to explain why it's bad, consider the selector 'span a'. To make sure it gets every a tag inside every span tag, it would have to do document.getElementsByTagName('span') - and then loop through that list, and do element.getElementsByTagName('a') on each one. That, however, could create many duplicates - so for each a tag it finds, it has to loop through all the other a tags it has, and make sure it hasn't already been added. And that takes a while - 'tagname tagname' is, in fact, not only the least efficient jQuery selector, but also (as I recall) the least efficient CSS selector in general.
So, that in mind, we get the select tag with document.getElementById. Select tags have the convenience property options, which is all the options for the select tag. Easy. Loop through all of those, and find the one we want.
Also, if you're wondering - getElementById and getElementsByTagName are both incredibly efficient functions, because they do no processing. Their return values are cached when the document is parsed by your browser. That makes for an increase in memory consumption, but a much larger decrease in processor usage. It's a nice tradeoff, considering RAM is cheap and processor cycles aren't.
Aside from that, we also get an efficiency boost jQuery can't claim by using "break". If you don't already know (and I'm pretty sure you do, but I'm bored), break causes a loop to terminate prematurely. By not looping over options that definitely aren't the one we want (because we already found that one), we save some time. Only a millisecond or two, but damn it those milliseconds are important.
You'll also notice that .blackout is now the id optionsBlackout (it still has the class, though). That's because previously, every time you opened the options window, it would create a new blackout element - but when you closed it, it would just hide the blackout, so you would end up with lots of hidden blackout elements. Now it'll just create one along with the options window, and show/hide it with the window.

// function to open the options interface
function openOptions() {
    $("select option[value='" + fontChoice + "']").attr("selected","selected"); // sets the font selector to the one chosen currently
    $('#optionsWindow').show();
    $('body').append('<div style="height: 100%; width: 100%; z-index: 2000000001; opacity: 0.65; display: block;" data-opacity="0.65" class="blackout"></div>');
}

function cancelChanges() {
    $('#optionsWindow').hide();
    $('.blackout').hide();
}
*/

// function to open the options interface
function openOptions() {
    var opts = document.getElementById('fontList').options;
    for(var i = 0; i < opts.length; i++) {
        if(opts[i].value == options.fontChoice) {
            opts[i].selected = true; // sets the font selector to the one chosen currently
            break;
        }
    }
    document.getElementById('optionsWindow').style.display = 'block';
    document.getElementById('optionsBlackout').style.display = 'block';
}

function cancelChanges() {
    document.getElementById('optionsWindow').style.display = 'none';
    document.getElementById('optionsBlackout').style.display = 'none';
}

/* old code: killed jQuery and condensed.
.val() is the same as .value - MOST of the time. It's not on a select tag. Instead, select tags have the property selectedIndex, which is the position of the option that is selected. .val() returns the value attribute of that option tag. So we have to do select.options[select.selectedIndex].value. Annoying, but it's worth it to kill jQuery, because jQuery is bad.
checkbox.checked == 1 works because checked is a boolean, and 1 evaluates to true - therefore, 1 == true. The property checked is false if the attribute isn't there (and I think also if the attribute value is "false".), and since it makes more sense to use the actual value true instead of the string true, we'll just set it to whatever checkbox.checked is.

// function to grab all the inputted values and assign them to variables
function updateCookie() {
    backgroundColour = $('#backgroundColourinput').val();
    fontColour = $('#fontColourinput').val();
    fontChoice = $('#fontList').val();
    surroundColour = $('#surroundColourinput').val();
    if (document.getElementById('chatHacks').checked == 1) {
        chatHacksEnabled = "true";
    }
    else {
        chatHacksEnabled = "false";
    }
    if (document.getElementById('tabComplete').checked == 1) {
        tabCompleteEnabled = "true";
    }
    else {
        tabCompleteEnabled = "false";
    }
    if (document.getElementById('multiKick').checked == 1) {
        multiKickEnabled = "true";
    }
    else {
        multiKickEnabled = "false";
    }
    if (document.getElementById('multiPM').checked == 1) {
        multiPMEnabled = "true";
    }
    else {
        multiPMEnabled = "false";
    }
    if (document.getElementById('searchBar').checked == 1) {
        searchBarEnabled = "true";
    }
    else {
        searchBarEnabled = "false";
    }
    if (document.getElementById('ignoreURL').checked == 1) {
        ignoreURLEnabled = "true";
    }
    else {
        ignoreURLEnabled = "false";
    }
    if (document.getElementById('stopSideScroll').checked == 1) {
        stopSideScrollEnabled = "true";
    }
    else {
        stopSideScrollEnabled = "false";
    }
    setDaCookie();
    updateChatSkin();
    $('#optionsWindow').hide();
    $('.blackout').hide();
}
*/

// function to grab all the inputted values and assign them to variables
function updateOptions() {
    optoins.backgroundColour = document.getElementById('backgroundColourinput').value;
    options.fontColour = document.getElementById('fontColourinput').value;
    options.fontChoice = document.getElementById('fontList').value;
    options.surroundColour = document.getElementById('surroundColourinput').value;
    options.chatHacksEnabled = document.getElementById('chatHacks').checked;
    options.tabCompleteEnabled = document.getElementById('tabComplete').checked;
    options.multiKickEnabled = document.getElementById('multiKick').checked;
    options.multiPMEnabled = document.getElementById('multiPM').checked;
    options.searchBarEnabled = document.getElementById('searchBar').checked;
    options.ignoreURLEnabled = document.getElementById('ignoreURL').checked;
    optoins.stopSideScrollEnabled = document.getElementById('stopSideScroll').checked;
    localStorage.setItem('chat-options', JSON.stringify(options));
    updateChatSkin();
    document.getElementById('optionsWindow').style.display = 'none';
    document.getElementById('optionsBlackout').style.display = 'none';
}

/* old code: removed.
I took this out because now we're cool cats and we can use localStorage.setItem('chat-options', JSON.stringify(window.options)), and this was only ever called once anyway.

// function to set the cookie
function setDaCookie() {
    setCookie("customisation", backgroundColour + ", " + fontColour + ", " + chatHacksEnabled + ", " + fontChoice + ", " + tabCompleteEnabled + ", " +  multiKickEnabled + ", " + multiPMEnabled + ", " + searchBarEnabled + ", " + ignoreURLEnabled + ", " + stopSideScrollEnabled + ", " + surroundColour);
}
*/

/* old code: replaced with ternary operators.
A ternary operator is like an inline if statement. It looks like this:
(condition ? output if true : output if false)
Ternary operators are expressions, so this works:
'foo ' + (foo == 'bar' ? 'bar' : 'baz') + ' shme'
Generally I don't like them, but it's much cleaner than a bunch of top level functions that only get called once.

// functions to check if various scripts are loaded, so the buttons can be checked by default
function checkIfChatHacksEnabled() {
    if (chatHacksEnabled == "true") {
        return("checked");
    }
    else {
        return("");
    }
}

function checkIfTabCompleteEnabled() {
    if (tabCompleteEnabled == "true") {
        return("checked");
    }
    else {
        return("");
    }
}

function checkIfMultiKickEnabled() {
    if (multiKickEnabled == "true") {
        return("checked");
    }
    else {
        return("");
    }
}

function checkIfMultiPMEnabled() {
    if (multiPMEnabled == "true") {
        return("checked");
    }
    else {
        return("");
    }
}

function checkIfSearchBarEnabled() {
    if (searchBarEnabled == "true") {
        return("checked");
    }
    else {
        return("");
    }
}
function checkIfIgnoreURLEnabled() {
    if (ignoreURLEnabled == "true") {
        return("checked");
    }
    else {
        return("");
    }
}
function checkIfStopSideScrollEnabled() {
    if (stopSideScrollEnabled == "true") {
        return("checked");
    }
    else {
        return("");
    }
}

// Variables to check various checkboxes
var chatHacksChecker = checkIfChatHacksEnabled();
var tabCompleteChecker = checkIfTabCompleteEnabled();
var multiKickChecker = checkIfMultiKickEnabled();
var multiPMChecker = checkIfMultiPMEnabled();
var searchBarChecker = checkIfSearchBarEnabled();
var ignoreURLChecker = checkIfIgnoreURLEnabled();
var stopSideScrollChecker = checkIfStopSideScrollEnabled();
*/

// **** Stuff to do as soon as chat is loaded ****
// Check if user is chatmod or admin
/* old code: killed jQuery.
$.inArray is probably about as efficient as writing out a for loop, if you're only checking one thing. It won't break though, so if it's a big array, always write out your own for loop. You can save a lot of execution time that way.
Since we're checking two things here, what this is actually doing is going through once to see if 'chatmoderator' is in there, and then if if isn't, go through again and see if sysop is in there. Not very efficient.
Why doesn't it always go through the array twice? Because of the way boolean operators work, JS can skip code that won't change the output. Consider the expression foo || aBigFunction(). If foo is true, it doesn't matter what aBigFunction() returns, the expression will still be true. So it won't be called - JS won't waste the time. Conversely, if you have foo && aBigFunction(), aBigFunction won't be called if foo is false.
Anywhore, our for loop checks for 'chatmoderator' and 'sysop' at the same time, and breaks if it's either one. If the loop finishes without finding either, mod is false, and multiKickDisplayer is set to disabled.

if ( $.inArray('chatmoderator', wgUserGroups) > -1 || $.inArray('sysop', wgUserGroups) > -1 ) {
    multiKickDisplayer = '';
}
*/

var mod = false;
for(var i = 0; i < wgUserGroups.length; i++) {
    if(wgUserGroups[i] == 'chatmoderator' || wgUserGroups[i] == 'sysop') {
        multiKickDisplayer = '';
        mod = true;
        break;
    }
}
if(!mod) {multiKickDisplayer = 'disabled="disabled"';}

if(wgServer == 'http://callofduty.wikia.com') {ignoreURLDisplayer = '';}
else {ignoreURLDisplayer = 'disabled="disabled"';}

/* old code: killed jQuery.
I didn't leave a copy of the old code here because it's very similar and very long and you already know how this works. The only new thing is element.style.cssText - it's basically the style="" attribute on the tag. You'll also see the ternary operators in the HTML, and at the bottom that we used setAttribute() for data-opacity on optionsBlackout. Otherwise, more of the same.
Congratulations on reading all of my very long and very technical explanations of simple things. Even if you only remember half of it (hopefully the jQuery sucks half), hopefully you'll benefit.
*/
// Add HTML for the interface
var optionsWindow = document.createElement('section');
optionsWindow.style.cssText = 'left:50%; top: 50px; width: 600px; z-index: 2000000002; margin-left:-300px;';
optionsWindow.className = 'modalWrapper';
optionsWindow.id = 'optionsWindow';
optoinsWindow.innerHTML = '<button class="close wikia-chiclet-button" onclick="cancelChanges()"><img src="http://slot2.images.wikia.nocookie.net/__cb57523/common/skins/oasis/images/icon_close.png"></button><h1>Options</h1><section class="modalContent"><div><form method="" name="" class="WikiaForm "><fieldset><p style="font-size:120%; font-weight:bold; font-style:italic;">Colour changes</p><p style="font-size:80%;">Enter a <a href="http://www.w3schools.com/html/html_colornames.asp" target="_blank">colour name</a> or <a href="http://html-color-codes.info/" target="_blank">colour hex</a><p>Chat background&nbsp;<input type="text" name="backgroundColourinput" id="backgroundColourinput" value="' + options.backgroundColour + '"/></p><br/><p>Surround&nbsp;<input type="text" name="surroundColourinput" id="surroundColourinput" value="' + surroundColour + '"/></p><br/><p>Font colour&nbsp;<input type="text" name="fontColourinput" id="fontColourinput" value="' + options.fontColour + '"/></p><br/><p style="font-size:120%; font-weight:bold; font-style:italic;">Font</p><p>Font family <select id="fontList"><option value="arial" style="font-family:arial;">Arial</option><option value="courier new" style="font-family:courier new;">Courier new</option><option value="georgia" style="font-family:georgia;">Georgia</option><option value="palatino linotype" style="font-family:palatino linotype;">Palatino linotype</option><option value="Comic Sans MS" style="font-family:Comic Sans MS;">Comic sans</option><option value="tahoma" style="font-family:tahoma;">Tahoma</option><option value="Trebuchet MS" style="font-family:Trebuchet MS;">Trebuchet MS</option><option value="Verdana" style="font-family:Verdana;">Verdana</option><option value="Lucida Console" style="font-family:Lucida Console;">Lucida Console</option></select></p><br/><p style="font-size:120%; font-weight:bold; font-style:italic;">Added functionality</p><input type="checkbox" name="chatHacks" value="chatHacks" id="chatHacks" ' + (chatHacksEnabled ? 'checked' : '') + '/> Enable <a href="http://c.wikia.com/wiki/User:Monchoman45/ChatHacks.js" target="_blank">chathacks</a>&nbsp;&nbsp;&nbsp;&nbsp;<input type="checkbox" name="multiPM" value="multiPM" id="multiPM" ' + (multiPMEnabled ? 'checked' : '') + '/> Enable <a href="http://callofduty.wikia.com/wiki/User:Madnessfan34537/multipm.js" target="_blank">multi PM</a><br/><input type="checkbox" name="tabComplete" value="tabComplete" id="tabComplete" ' + (tabCompleteEnabled ? 'checked' : '') + '/>Enable <a href="http://runescape.wikia.com/wiki/User:Joeytje50/tabinsert.js" target="_blank">tab complete</a>&nbsp;&nbsp;&nbsp;<input type="checkbox" name="searchBar" value="searchBar" id="searchBar" ' + (searchBarEnabled ? 'checked' : '') + '/>Enable <a href="http://callofduty.wikia.com/wiki/MediaWiki:Chat.js/searchbar.js" target="_blank">search bar</a><br/><input type="checkbox" name="multiKick" value="multiKick" id="multiKick" '  + multiKickDisplayer + (multiKickEnabled ? 'checked' : '')) + '/>Enable <a href="http://callofduty.wikia.com/wiki/User:Madnessfan34537/multikick.js" target="_blank">multi kick</a>&nbsp;&nbsp;&nbsp;&nbsp;<input type="checkbox" name="ignoreURL" value="ignoreURL" id="ignoreURL" ' + ignoreURLDisplayer + (ignoreURLEnabled ? 'checked' : '') + '/>Ignore URL in main chat<br /><input type="checkbox" name="stopSideScroll" value="stopSideScroll" id="stopSideScroll" ' + (stopSideScrollEnabled ? 'checked' : '') + '/>Stop the sidescroll bar to appear after someone spams</fieldset></form><div style="float:right;"><a onclick="updateCookie()" class="wikia-button">Update!</a>&nbsp;<a onclick="cancelChanges()" id="cancel" class="wikia-button secondary">Cancel</a></div></section>';
document.body.appendChild(optionsWindow);
var blackout = document.createElement('div');
blackout.style.cssText = 'height: 100%; width: 100%; z-index: 2000000001; opacity: 0.65; display: none;';
blackout.setAttribute('data-opacity', '0.65');
blackout.id = 'optionsBlackout';
blackout.className = 'blackout';
document.body.appendChild(blackout);

// Add Options button
var button = document.createElement('div');
button.onclick = openOptions;
button.style.cssText = 'margin:0 auto; cursor: pointer; font-size:150%; bottom:4px; padding-bottom:2px; border-bottom: 1px solid #CCCCCC; width:90%;';
button.innerHTML = '<img src="http://www.derehamreclaim.co.uk/_images-pages/icon-hammerSpanner.jpg" width="18px"/>&nbsp;Options'
button.insertBefore(document.getElementById('Rail').firstChild);

window.onload = updateChatSkin // Load the current configuration