// ==UserScript==
// @name           TheColiSmilies
// @namespace      https://userscripts-mirror.org/
// @description    Over 70 new smileys for The Coli!
// @author         numbrz
// @match          https://www.thecoli.com/threads/*
// @match          https://thecoli.com/threads/*
// @match          https://www.thecoli.com/forums/*/post-thread
// @match          https://thecoli.com/forums/*/post-thread
// @match          https://www.thecoli.com/conversations/*
// @version        1.9
// ==/UserScript==

function getStorageValue(key, defaultValue) {
    return localStorage.getItem(key) || defaultValue;
}

function setStorageValue(key, value) {
    localStorage.setItem(key, value);
}

var smiliesUrl = getStorageValue("smilies", "|").split("|");
smiliesUrl.pop();

// Original URLs
smiliesUrl.push("http://i.imgur.com/EmjbUBO.png");
smiliesUrl.push("http://i.imgur.com/cIDzJ.png");
smiliesUrl.push("http://i.imgur.com/fiefz6F.jpg");
smiliesUrl.push("http://i.imgur.com/F3nNv0f.png");
smiliesUrl.push("http://i.imgur.com/LoxptTL.png");
smiliesUrl.push("http://i.imgur.com/SfcY06Q.png");
smiliesUrl.push("http://i1233.photobucket.com/albums/ff390/ShaneDawg021/drakeohno1.png");
smiliesUrl.push("http://i.imgur.com/sLFY4kZ.png");
smiliesUrl.push("http://i.imgur.com/kKEpfGI.png");
smiliesUrl.push("http://i.imgur.com/NbLoQMj.gif");
smiliesUrl.push("http://i.imgur.com/EOKiJas.png");
smiliesUrl.push("http://i.imgur.com/DFLXB32.png");
smiliesUrl.push("http://i.imgur.com/d7T9Shk.jpg");

// Additional URLs
smiliesUrl.push("https://i.imgur.com/dX5Epp2.png");
smiliesUrl.push("https://www.thecoli.com/styles/default/xenforo/smilies/hamster.png");
smiliesUrl.push("https://www.thecoli.com/styles/default/xenforo/smilies/usure.png");
smiliesUrl.push("https://www.thecoli.com/styles/default/xenforo/smilies/rejoice.png");
smiliesUrl.push("https://www.thecoli.com/styles/default/xenforo/smilies/dwill.png");
smiliesUrl.push("https://www.thecoli.com/styles/default/xenforo/smilies/smugfavre.png");
smiliesUrl.push("https://www.thecoli.com/styles/default/xenforo/smilies/jawalrus.png");
smiliesUrl.push("https://www.thecoli.com/styles/default/xenforo/smilies/leo.png");
smiliesUrl.push("https://www.thecoli.com/styles/default/xenforo/smilies/pachah1.png");
smiliesUrl.push("https://www.thecoli.com/styles/default/xenforo/smilies/wtb3.png");
smiliesUrl.push("https://www.thecoli.com/styles/default/xenforo/smilies/merchant.png");
smiliesUrl.push("https://www.thecoli.com/styles/default/xenforo/smilies/llLG0.png");
smiliesUrl.push("https://www.thecoli.com/styles/default/xenforo/smilies/trash.png");
smiliesUrl.push("https://i.imgur.com/dX5Epp2.png");
smiliesUrl.push("https://www.thecoli.com/styles/default/xenforo/smilies/ld.png");
smiliesUrl.push("https://www.thecoli.com/styles/default/xenforo/smilies/ooh.png");
smiliesUrl.push("https://www.thecoli.com/styles/default/xenforo/smilies/krs.png");
smiliesUrl.push("https://www.thecoli.com/styles/default/xenforo/smilies/smugdon.png");
smiliesUrl.push("https://www.thecoli.com/styles/default/xenforo/smilies/shaq2.png");
smiliesUrl.push("https://www.thecoli.com/styles/default/xenforo/smilies/babylawd.png");
smiliesUrl.push("https://www.thecoli.com/styles/default/xenforo/smilies/win.png");
smiliesUrl.push("https://www.thecoli.com/media/superman-cape.22015/full");
smiliesUrl.push("https://www.thecoli.com/styles/default/xenforo/smilies/mindblown.png");
smiliesUrl.push("https://www.thecoli.com/styles/default/xenforo/smilies/rudy2.png");
smiliesUrl.push("https://www.thecoli.com/styles/default/xenforo/smilies/smugbiden.png");
smiliesUrl.push("https://www.thecoli.com/styles/default/xenforo/smilies/drool.gif");
smiliesUrl.push("https://www.thecoli.com/styles/default/xenforo/smilies/biggrin.gif");
smiliesUrl.push("https://www.thecoli.com/styles/default/xenforo/smilies/evil.gif");
smiliesUrl.push("https://www.thecoli.com/styles/default/xenforo/smilies/ninja_1.gif");
smiliesUrl.push("https://www.thecoli.com/styles/default/xenforo/smilies/king.gif");
smiliesUrl.push("https://www.thecoli.com/styles/default/xenforo/smilies/no.gif");
smiliesUrl.push("https://www.thecoli.com/styles/default/xenforo/smilies/drunk.gif");
smiliesUrl.push("https://www.thecoli.com/styles/default/xenforo/smilies/facepalm.gif");
smiliesUrl.push("https://www.thecoli.com/styles/default/xenforo/smilies/rambo.gif");
smiliesUrl.push("https://www.thecoli.com/styles/default/xenforo/smilies/hug.gif");
smiliesUrl.push("https://www.thecoli.com/styles/default/xenforo/smilies/smiley-vault-character-028.gif");
smiliesUrl.push("https://www.thecoli.com/styles/default/xenforo/smilies/gag.gif");
smiliesUrl.push("https://www.thecoli.com/styles/default/xenforo/smilies/mj.gif");
smiliesUrl.push("https://www.thecoli.com/styles/default/xenforo/smilies/boss.gif");
smiliesUrl.push("https://www.thecoli.com/styles/default/xenforo/smilies/zzz.gif");
smiliesUrl.push("https://www.thecoli.com/styles/default/xenforo/smilies/beatdeadhorse.gif");
smiliesUrl.push("https://www.thecoli.com/styles/default/xenforo/smilies/stylin.gif");
smiliesUrl.push("https://www.thecoli.com/styles/default/xenforo/smilies/sleepsmilie.gif");
smiliesUrl.push("https://www.thecoli.com/styles/default/xenforo/smilies/dj2.gif");
smiliesUrl.push("https://www.thecoli.com/styles/default/xenforo/smilies/camby.png");
smiliesUrl.push("https://www.thecoli.com/styles/default/xenforo/smilies/coffee.gif");
smiliesUrl.push("https://www.thecoli.com/styles/default/xenforo/smilies/sad.gif");
smiliesUrl.push("https://www.thecoli.com/styles/default/xenforo/smilies/smile.gif");
smiliesUrl.push("https://www.thecoli.com/styles/default/xenforo/smilies/dry.gif");
smiliesUrl.push("https://www.thecoli.com/styles/default/xenforo/smilies/tongue.gif");
smiliesUrl.push("https://www.thecoli.com/styles/default/xenforo/smilies/bustback.gif");
smiliesUrl.push("https://www.thecoli.com/styles/default/xenforo/smilies/weirdo.gif");
smiliesUrl.push("https://www.thecoli.com/styles/default/xenforo/smilies/ban.gif");
smiliesUrl.push("https://www.thecoli.com/styles/default/xenforo/smilies/stop.gif");
smiliesUrl.push("https://www.thecoli.com/styles/default/xenforo/smilies/piss.gif");
smiliesUrl.push("https://www.thecoli.com/styles/default/xenforo/smilies/popcorn.gif");
smiliesUrl.push("https://www.thecoli.com/styles/default/xenforo/smilies/clap.gif");
smiliesUrl.push("https://www.thecoli.com/styles/default/xenforo/smilies/smh.gif");
smiliesUrl.push("https://www.thecoli.com/styles/default/xenforo/smilies/smoker.gif");
smiliesUrl.push("https://www.thecoli.com/styles/default/xenforo/smilies/blink.gif");
smiliesUrl.push("https://www.thecoli.com/styles/default/xenforo/smilies/rolleyes.gif");
smiliesUrl.push("https://www.thecoli.com/styles/default/xenforo/smilies/rip.gif");
smiliesUrl.push("https://www.thecoli.com/styles/default/xenforo/smilies/tu.gif");
smiliesUrl.push("https://www.thecoli.com/styles/default/xenforo/smilies/eek.gif");
smiliesUrl.push("https://www.thecoli.com/styles/default/xenforo/smilies/scheme.gif");
smiliesUrl.push("https://www.thecoli.com/styles/default/xenforo/smilies/hula.gif");
smiliesUrl.push("https://www.thecoli.com/styles/default/xenforo/smilies/devil.gif");
smiliesUrl.push("https://www.thecoli.com/styles/default/xenforo/smilies/yawn.gif");
smiliesUrl.push("https://www.thecoli.com/styles/default/xenforo/smilies/wub.gif");
smiliesUrl.push("https://www.thecoli.com/styles/default/xenforo/smilies/slapfight.gif");
smiliesUrl.push("https://www.thecoli.com/styles/default/xenforo/smilies/cook.gif");
smiliesUrl.push("https://www.thecoli.com/styles/default/xenforo/smilies/handshake.gif");
smiliesUrl.push("https://www.thecoli.com/styles/default/xenforo/smilies/yayo.gif");
smiliesUrl.push("https://www.thecoli.com/styles/default/xenforo/smilies/yes.gif");
smiliesUrl.push("https://www.thecoli.com/styles/default/xenforo/smilies/huh.gif");
smiliesUrl.push("https://www.thecoli.com/styles/default/xenforo/smilies/old.gif");
smiliesUrl.push("https://www.thecoli.com/styles/default/xenforo/smilies/hmm.gif");
smiliesUrl.push("https://www.thecoli.com/styles/default/xenforo/smilies/mad.gif");
smiliesUrl.push("https://www.thecoli.com/styles/default/xenforo/smilies/bow.gif");
smiliesUrl.push("https://www.thecoli.com/styles/default/xenforo/smilies/guilty.gif");
smiliesUrl.push("https://www.thecoli.com/styles/default/xenforo/smilies/queen.gif");
smiliesUrl.push("https://www.thecoli.com/styles/default/xenforo/smilies/cool.gif");
smiliesUrl.push("https://www.thecoli.com/styles/default/xenforo/smilies/cheers.gif");
smiliesUrl.push("https://www.thecoli.com/styles/default/xenforo/smilies/fire.gif");
smiliesUrl.push("https://www.thecoli.com/styles/default/xenforo/smilies/whistle.gif");
smiliesUrl.push("https://www.thecoli.com/styles/default/xenforo/smilies/violent.gif");
smiliesUrl.push("https://www.thecoli.com/styles/default/xenforo/smilies/thumbsdown.gif");
smiliesUrl.push("https://www.thecoli.com/styles/default/xenforo/smilies/confused.gif");
smiliesUrl.push("https://www.thecoli.com/styles/default/xenforo/smilies/angry.gif");
smiliesUrl.push("http://i.imgur.com/kix2b.png");
smiliesUrl.push("http://i.imgur.com/7QFXvPL.jpg");
smiliesUrl.push("http://i.imgur.com/hSv3ubt.png");
smiliesUrl.push("http://i.imgur.com/DBK3DDN.png");
smiliesUrl.push("http://i.imgur.com/VsqFGj1.png");
smiliesUrl.push("http://i.imgur.com/vi02eiN.png");
smiliesUrl.push("http://i.imgur.com/vjSuGkn.png");
smiliesUrl.push("http://i.imgur.com/uY4clRq.png");
smiliesUrl.push("http://i.imgur.com/LxlP95K.png");
smiliesUrl.push("http://i.imgur.com/EnyTCdb.png");
smiliesUrl.push("http://i.imgur.com/pzOPQz4.png");
smiliesUrl.push("http://i.imgur.com/l15FShP.png");
smiliesUrl.push("http://i.imgur.com/BkIcJOM.png");
smiliesUrl.push("http://i.imgur.com/HMQ8zQQ.png");
smiliesUrl.push("http://i.imgur.com/oNkSCgM.png");
smiliesUrl.push("http://i.imgur.com/7bv7Iza.png");
smiliesUrl.push("http://i.imgur.com/86V6ycJ.png");
smiliesUrl.push("http://i.imgur.com/PVok5Df.png");
smiliesUrl.push("http://i.imgur.com/EupBlIY.png");
smiliesUrl.push("http://i.imgur.com/CkHljcm.png");
smiliesUrl.push("http://i.imgur.com/Qf0Vl8v.png");
smiliesUrl.push("http://i.imgur.com/q4DuFoA.png");
smiliesUrl.push("http://i.imgur.com/ouFWb10.png");
smiliesUrl.push("http://i.imgur.com/8qR3JTW.png");
smiliesUrl.push("http://i.imgur.com/7IC5IhG.png");
smiliesUrl.push("http://i.imgur.com/ZPo0ouj.png");
smiliesUrl.push("http://i.imgur.com/b965IiN.png");
smiliesUrl.push("http://i.imgur.com/PnEd1ks.png");
smiliesUrl.push("http://i.imgur.com/UGHu9Tr.png");
smiliesUrl.push("http://i.imgur.com/u62UMg0.png");
smiliesUrl.push("http://i.imgur.com/3853YHY.png");
smiliesUrl.push("http://i.imgur.com/ez6DGzF.png");
smiliesUrl.push("http://i.imgur.com/M2RazVk.png");
smiliesUrl.push("http://i.imgur.com/0syIhzU.png");
smiliesUrl.push("http://i.imgur.com/09Z7ygz.png");
smiliesUrl.push("http://i686.photobucket.com/albums/vv224/SoebyART/aubreywithdachicken.png");
smiliesUrl.push("http://i.imgur.com/8VKXv.png");
smiliesUrl.push("http://i1233.photobucket.com/albums/ff390/ShaneDawg021/stephenahand.png");
smiliesUrl.push("http://i679.photobucket.com/albums/vv153/Khameleon05/beleedat.png");
smiliesUrl.push("http://i679.photobucket.com/albums/vv153/Khameleon05/dontwant.png");
smiliesUrl.push("http://i679.photobucket.com/albums/vv153/Khameleon05/th_hmmm-1.png");
smiliesUrl.push("http://i.imgur.com/04Q0aii.png");
smiliesUrl.push("http://i.imgur.com/sluzJHR.png");
smiliesUrl.push("http://i1233.photobucket.com/albums/ff390/ShaneDawg021/obamalaugh3_zps4f596990.png");
smiliesUrl.push("http://i1233.photobucket.com/albums/ff390/ShaneDawg021/westbrookcmonson_zpse72004bd.png");
smiliesUrl.push("http://i1233.photobucket.com/albums/ff390/ShaneDawg021/bigpokey.png");
smiliesUrl.push("http://i1233.photobucket.com/albums/ff390/ShaneDawg021/paulydareyoukiddingme.png");
smiliesUrl.push("http://i1233.photobucket.com/albums/ff390/ShaneDawg021/willfreshprincescared.png");
smiliesUrl.push("http://i1233.photobucket.com/albums/ff390/ShaneDawg021/raydisgusted.png");
smiliesUrl.push("http://i1233.photobucket.com/albums/ff390/ShaneDawg021/jayzbiglaugh2.png");
smiliesUrl.push("http://i1233.photobucket.com/albums/ff390/ShaneDawg021/smiletongue.png");
smiliesUrl.push("http://i1233.photobucket.com/albums/ff390/ShaneDawg021/wtheellll.png");

let lastCursorPosition;
let smiliesContainer;

function insertIntoEditable(shortname) {
   var smilies = smiliesUrl.map((url, index) => ({ url, shortname: `smiley${index}` }));

   var smiley = smilies.find(smiley => smiley.shortname === shortname);
   if (!smiley) return;

   var editableElement = document.querySelector(".fr-element.fr-view[contenteditable='true']");

   if (!editableElement) {
       console.log("Could not find the editable element.");
       return;
   }

   // Save the current selection
   var selection = window.getSelection();
   var range = selection.getRangeAt(0);

   // Check if the insertion point is within the contenteditable area
   if (!editableElement.contains(range.startContainer)) {
       console.log("Insertion point is not within the contenteditable area.");
       return;
   }

   // Create the image element
   var img = document.createElement("img");
   img.src = smiley.url;
   img.classList.add("fr-fic", "fr-dii", "fr-draggable");

   // Insert the image at the current range
   range.deleteContents();
   range.insertNode(img);

   // Create a text node with a space after the image
   var spaceNode = document.createTextNode('\u00A0');
   range.setStartAfter(img);
   range.insertNode(spaceNode);

   // Move the cursor after the inserted space
   range.setStartAfter(spaceNode);
   range.setEndAfter(spaceNode);
   selection.removeAllRanges();
   selection.addRange(range);

   // Trigger input event to ensure changes are recognized
   var inputEvent = new Event('input', {
       bubbles: true,
       cancelable: true,
   });
   editableElement.dispatchEvent(inputEvent);

   // Update last cursor position
   lastCursorPosition = range.cloneRange();

   console.log("Inserting smiley:", shortname);
   console.log("Editable element found:", editableElement);
   console.log("Selection:", selection);
   console.log("Range:", range);
}

function observeEditableField() {
    var editableElement = document.querySelector(".fr-element.fr-view[contenteditable='true']");

    if (editableElement) {
        editableElement.addEventListener('mouseup', saveCursorPosition);
        editableElement.addEventListener('keyup', saveCursorPosition);
        editableElement.addEventListener('keydown', handleKeyNavigation);
    }
}

function saveCursorPosition() {
   var selection = window.getSelection();

   if (selection.rangeCount > 0) {
       lastCursorPosition = selection.getRangeAt(0).cloneRange();
   }
}

function handleKeyNavigation(event) {
    if (event.key === 'ArrowLeft' || event.key === 'ArrowRight') {
        var selection = window.getSelection();
        var range = selection.getRangeAt(0);
        var currentNode = range.startContainer;
        var offset = range.startOffset;

        function findValidPosition(node, direction) {
            while (node) {
                if (node.nodeType === Node.ELEMENT_NODE && node.tagName === 'IMG') {
                    return direction === 'left' ? node : node.nextSibling;
                }
                if (node.nodeType === Node.TEXT_NODE && node.textContent.trim() !== '') {
                    return node;
                }
                node = direction === 'left' ? node.previousSibling : node.nextSibling;
            }
            return null;
        }

        var newNode, newOffset;

        if (event.key === 'ArrowLeft') {
            if (currentNode.nodeType === Node.TEXT_NODE && offset > 0) {
                newNode = currentNode;
                newOffset = offset - 1;
            } else {
                newNode = findValidPosition(currentNode.previousSibling || currentNode.parentNode.previousSibling, 'left');
                newOffset = newNode && newNode.nodeType === Node.TEXT_NODE ? newNode.textContent.length : 0;
            }
        } else { // ArrowRight
            if (currentNode.nodeType === Node.TEXT_NODE && offset < currentNode.textContent.length) {
                newNode = currentNode;
                newOffset = offset + 1;
            } else {
                newNode = findValidPosition(currentNode.nextSibling || currentNode.parentNode.nextSibling, 'right');
                newOffset = 0;
            }
        }

        if (newNode) {
            range = document.createRange();
            range.setStart(newNode, newOffset);
            range.collapse(true);
            selection.removeAllRanges();
            selection.addRange(range);
            event.preventDefault();
        }
    }
}

function insertImgsIntoElement(elem, urls) {
    let smilies = urls.map((url, index) => ({ url, shortname: `smiley${index}` }));

    for (var i = 0; i < urls.length; i++) {
        var img = document.createElement("Img");
        img.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg=="; // Placeholder image
        img.dataset.src = urls[i]; // Store actual URL in dataset
        img.style.cursor = "pointer";

        var listener = function(shortname){
            return function(event){
                event.stopPropagation(); // Stop event from bubbling
                insertIntoEditable(shortname);
            };
        }(smilies[i].shortname);

        img.addEventListener('click', listener, false);

        elem.appendChild(img);
    }
}

function loadSmiliesImages(container) {
    var images = container.querySelectorAll('img');
    images.forEach(function(img) {
        if (img.dataset.src) {
            img.src = img.dataset.src;
            delete img.dataset.src;
        }
    });
}

// Find the first editable field or textarea
let editableFields = document.querySelectorAll('[contenteditable="true"], .fr-element.fr-view.fr-element-scroll-visible, textarea.input');

if (editableFields.length > 0) {
   // Create a container for smileys
   smiliesContainer = document.createElement("div");
   smiliesContainer.id = "mySmilies";
   smiliesContainer.style.maxWidth = "100%"; // Set max-width to 100%
   smiliesContainer.style.minHeight = "150px"; // Set initial height to display three rows
   smiliesContainer.style.maxHeight = "75px"; // Set max-height to 75px (will be overridden by resizable)
   smiliesContainer.style.overflowY = "auto"; // Make it scrollable
   smiliesContainer.style.display = "none"; // Hide by default

   // Add CSS rule to prevent text selection within smileys container but allow clicking on images
   var style = document.createElement('style');
   style.innerHTML = ` 
       #mySmilies {
           user-select: none;
           max-width: 100%;
           min-height: 150px; /* Initial height */
           overflow-y: auto;
           resize: vertical; /* Make resizable */
           overflow: hidden; /* Hide overflow */
       }
       #mySmilies img {
           pointer-events: auto;
           max-width: 100%;
           height: auto;
       }
       #mySmilies {
           border-bottom: 5px solid #ccc; /* Add border for better visibility */
           padding-bottom: 5px; /* Add padding for better visibility */
       }
   `;
   document.head.appendChild(style);

   // Create a toggle button
   let toggleButton = document.createElement("button");
   toggleButton.textContent = "Show/hide Smilies";

   toggleButton.addEventListener('click', function(event) {
       event.preventDefault(); // Prevent default form submission
       smiliesContainer.style.display = smiliesContainer.style.display === "none" ? "block" : "none";

       if (smiliesContainer.style.display === "block") {
           loadSmiliesImages(smiliesContainer); // Load images when container is shown
       }
   });

   // Insert smiley images into the container with placeholder URLs initially
   insertImgsIntoElement(smiliesContainer, smiliesUrl);

   // Insert the container and toggle button above or below the first editable field
   // Ensure they are not part of the content editable area
   let wrapperDiv = document.createElement("div");
   wrapperDiv.appendChild(toggleButton);
   wrapperDiv.appendChild(smiliesContainer);

   if (editableFields[0].contentEditable === "true") {
       editableFields[0].parentNode.insertBefore(wrapperDiv, editableFields[0]);
   } else {
       editableFields[0].parentNode.insertBefore(wrapperDiv, editableFields[0].nextSibling);
   }

   observeEditableField();
}