#similarTopics {

        width: 500px;

        background: #E1EBF2;

        padding: 5px 10px;

        border-radius: 5px;

        margin: 5px 0 0 10em;

    }

 

    #similarTopics,

    #similarTopics .spinner,

    #similarTopics .topic-container,

    #similarTopics .similarTopics-title {

        display: none;

    }

 

    #similarTopics.visible,

    #similarTopics .spinner.visible,

    #similarTopics .similarTopics-title.visible,

    #similarTopics .topic-container.visible {

        display: block;

    }

 

    #similarTopics .topic {

        display: flex;

        border-bottom: 1px solid white;

        padding: 5px 0;

        margin: 5px 0;

    }

 

    #similarTopics .topic:last-child {

        border-bottom: none;

    }

 

    #similarTopics .topic-data {

        flex: 1;

    }

 

    #similarTopics .topic-flags {

        align-items: center;

        margin-right: 10px;

        position: relative;

    }

 

    #similarTopics .topic-icon {

        position: absolute;

        top: 0;

        left: 0;

        bottom: 0;

        right: 0;

        background: transparent 50% 50% no-repeat;

    }

 

    #similarTopics .similarTopics-title {

        border-bottom: 1px solid #0076b1;

        color: #0076b1;

        font-size: .9em;

        margin: .5em 0;

        text-transform: uppercase;

    }

 

    #similarTopics .topic-status {

        width: 27px;

        height: 27px;

        background: transparent 0 0 no-repeat;

    }

  
/* The following code is DOM-dependent. It may not work if you modify the posting structure in the forum templates */
 
    var FLRX = FLRX || {};
 
    FLRX.similarTopics = (function () {
 
        'use strict';
 
        let settings = { // default settings
            forums : [],
            searchIn : false,
            maxTopics : 5,
            wordMinLength: 4,
 
 
            autocomplete: false, // disable browser autocomplete from subject input
 
            /* Advanced settings */
            excludedCharacters : new RegExp(/[.,\/#!$%\^&\*¿?!¡;:{}\\=\-_`~"«“‘’”»()\[\]]/, 'g'), // The ignored characters from the topic title.
            dom : { // default settings (should work if left like this with unmodified templates)
 
                /* Search page */
                topicscontainer : '.forabg',
                topic          : 'dd.dterm',
                infocontainer  : '.span-tab',
                titlelink      : '.topictitle',
                userlink        : 'a[href^="/u"]',
                forumlink      : 'a[href^="/f"]',
                topicicon      : 'dl.icon',
 
                /* structure */
                visible        : 'visible',
 
                /* posting page */
                titleinput      : '#postingbox input[name="subject"]',
                inputcontainer  : 'dl',
 
                /* created elements */
                maincontainer  : $('<div />', { id : 'similarTopics' }),
                similartopiccont : $('<div />', { class : 'topic-container' }),
                loadingelm      : $('<div />', { class : 'spinner' })
                                    .append($('<div/>', { class:'double-bounce1' }))
                                    .append($('<div/>', { class:'double-bounce2' })),
                topicelmcont    : $('<div />', { class: 'topic' }),
                topicelmtitle  : $('<div />', { class: 'topic-title' }),
                topicdatacont  : $('<div />', { class: 'topic-data' }),
                topicflags      : $('<div />', { class: 'topic-flags' }),
                topiciconcont  : $('<div />', { class: 'topic-icon' }),
                topicstatus    : $('<div />', { class: 'topic-status' }),
                topicelminfo    : $('<div />', { class: 'topic-info' }),
                topicauthor    : $('<span />', { class: 'topic-author', text: 'by ' }),
                topicforum      : $('<span />', { class: 'topic-forum', text: ' in ' }),
similarstitle : $('<h4 />', { class: 'similarTopics-title', text: 'لقد تم استخدام هذا العنوان من قبل - راجع الرابط التالي حتى لا يكون الموضوع مكرر' }),
 
            },
        },
 
        structure = {},
 
        request,
 
        debounce = function(cb, delay) {
            let timeout;
            return function(...a) {
                clearTimeout(timeout);
                timeout = setTimeout( _ => { timeout = null;  cb.call(this, ...a);  }, delay);
            };
        },
 
        /* transforms a UTF8-encoded URI into Windows-1252 */
        sanitizeURI = function(uri) {
 
            /* For some reason Forumotion uses Windows-1252 encoding in search URIs.
            This workaround will only fix issues with Spanish characters */
 
            return uri.replace(/%C3%91/g, '%D1') // &Ntilde;
                .replace(/%C3%B1/g, '%F1') // &ntilde;
                .replace(/%C3%81/g, '%C1') // &Aacute;
                .replace(/%C3%89/g, '%C9') // &Eacute;
                .replace(/%C3%8D/g, '%CD') // &Iacute;
                .replace(/%C3%93/g, '%D3') // &Oacute;
                .replace(/%C3%9A/g, '%DA') // &Uacute;
                .replace(/%C3%9C/g, '%DC') // &Uuml;
                .replace(/%C3%A1/g, '%E1') // &aacute;
                .replace(/%C3%A9/g, '%E9') // &eacute;
                .replace(/%C3%AD/g, '%ED') // &iacute;
                .replace(/%C3%B3/g, '%F3') // &oacute;
                .replace(/%C3%BA/g, '%FA') // &uacute;
                .replace(/%C3%BC/g, '%FC'); // &uuml;
        },
 
        /* returns an object array (representation of topics) from a search URL synchronously */
        searchTopics = function(url, cb) {
            $.ajax({
                url : url,
            }).done(function(data) {
                let relatedTopics = [],
                    $forabg = $(settings.dom.topicscontainer, data);
                if($forabg.length) {
                    $forabg.find(settings.dom.topic).slice(0, settings.maxTopics).each(function() {
                     
                        let $this = $(this),
                        $topictitle = $this.find(settings.dom.titlelink),
                        $spantab = $this.find(settings.dom.infocontainer),
                        $forumlink = $spantab.find(settings.dom.forumlink),
                        $userlink = $spantab.find(settings.dom.userlink),
                        $topicicon = $this.closest(settings.dom.topicicon);
 
                        relatedTopics.push({
                            title  : $topictitle.text().trim(),
                            url    : $topictitle.attr('href'),
                            icon  : $this.css('background-image').slice(4, -1),
                            status : $topicicon.css('background-image').length
                                        ? $topicicon.css('background-image').slice(4, -1)
                                        : false,
                            forum  : {
                                name : $forumlink.text(),
                                url  : $forumlink.attr('href'),
                            },
                            user  : {
                                name : $userlink.text(),
                                url  : $userlink.attr('href'),
                            },
                        });
                    });
                }
 
                cb.call(this, relatedTopics);
            }).fail(_ => {let up; throw up || false});
        },
 
        /* returns an array with the words of a string that fulfil conditions of settings.excludedCharacters */
        getWords = function(str) {
            return str.trim().replace(settings.excludedCharacters, '').split(' ').filter(elm => elm.length >= settings.wordMinLength);
        },
 
        /* updates the similar topics DOM structure with the ones in the input array */
        updateDOM = function(arr) {
 
            structure.topiccontainer.empty();
 
            if(arr.length) {
                let docfrag = document.createDocumentFragment();
                $.each(arr, function(index, topic) {
 
                    let $topicTitle = settings.dom.topicelmtitle.clone(),
                    $topicContainer = settings.dom.topicelmcont.clone(),
                    $topicInfo      = settings.dom.topicelminfo.clone(),
                    $topicauthor    = settings.dom.topicauthor.clone(),
                    $topicstatus    = settings.dom.topicstatus.clone(),
                    $topicforum    = settings.dom.topicforum.clone(),
                    $topicflags    = settings.dom.topicflags.clone(),
                    $topicdata      = settings.dom.topicdatacont.clone(),
                    $topicicon      = settings.dom.topiciconcont.clone(),
 
                    /* link creation */
                    $topicLink  = $('<a />', { href: topic.url, text: topic.title }),
                    $forumlink  = $('<a />', { href: topic.forum.url, text: topic.forum.name }),
                    $authorlink = $('<a />', { href: topic.user.url, text: topic.user.name });
 
                    $topicicon.css('background-image', `url('${ topic.icon }')`);
                    topic.status && $topicstatus.css('background-image', `url('${ topic.status }')`);
 
                    $topicauthor.append($authorlink);
                    $topicforum.append($forumlink);
                    $topicTitle.append($topicLink);
                    $topicInfo.append($topicauthor, $topicforum);
                    $topicdata.append($topicTitle, $topicInfo);
                    $topicflags.append($topicstatus, $topicicon);
                    $topicContainer.append($topicflags, $topicdata);
 
                    docfrag.append($topicContainer[0]);
 
                });
                structure.topiccontainer[0].appendChild(docfrag);
             
            } else
                structure.maincontainer.removeClass(settings.dom.visible);
             
        },
 
        setLoadingStatus = function() {
            structure.loadingcontainer.addClass(settings.dom.visible);
            structure.recentstitle.removeClass(settings.dom.visible);
            structure.topiccontainer.removeClass(settings.dom.visible);
        },
        topicsRetrieved = function (){
            structure.loadingcontainer.removeClass(settings.dom.visible);
            structure.recentstitle.addClass(settings.dom.visible);
            structure.topiccontainer.addClass(settings.dom.visible);
        },
 
        searchAlgorithm = function(words, cb) {
            let params = {
                search_where    : settings.searchIn || `f${/\?f=(\d+)/.exec(location.search)[1]}`,
                show_results    : 'topics',
                sort_by        : 0,
                sort_dir        : 'DESC',
                search_terms    : 'all',
                search_keywords : words.join(' '),
            };
 
            searchTopics(`/search?${sanitizeURI($.param(params))}`, function(arr) {
                let relatedTopics = arr;
 
                if(relatedTopics.length < settings.maxTopics) {
                    params.search_terms = 'any';
                    searchTopics(`/search?${sanitizeURI($.param(params))}`, function(arr) {
                        let searchAnyWord = arr,
                        neededElms = settings.maxTopics - relatedTopics.length;
                        searchAnyWord = searchAnyWord.filter(elm => relatedTopics.find(e => e.url == elm.url) === undefined); // Ignore duplicates
                        relatedTopics = [...relatedTopics, ...searchAnyWord.slice(0, neededElms)];
 
                        cb.call(this, relatedTopics);
 
                    });
                }
             
                cb.call(this, relatedTopics);
 
            });
 
        },
 
        /* main function */
        searchSimilarTopics = function($title) {
            let words = getWords($title.val());
         
 
            if(words.length == 0)
                return;
 
            // for the first time, if it was hidden
            structure.maincontainer.addClass(settings.dom.visible);
 
            setLoadingStatus();
 
            searchAlgorithm(words, function(arr) {
                updateDOM(arr);
                topicsRetrieved();
            });
 
        },
        generateStructure = function($title) {
            let $similarTopics = settings.dom.maincontainer.clone(),
            $spinner = settings.dom.loadingelm.clone(),
            $topicsContainer = settings.dom.similartopiccont.clone(),
            $recentsTitle = settings.dom.similarstitle.clone();
         
            structure = {
                maincontainer    : $similarTopics,
                loadingcontainer : $spinner,
                topiccontainer  : $topicsContainer,
                recentstitle    : $recentsTitle,
            };
 
            $similarTopics.append($spinner, $recentsTitle, $topicsContainer);
 
            $title.closest(settings.dom.inputcontainer).after($similarTopics);
        },
        init = function(options) {
            $.extend(true, settings, options);
 
            let timeout,
            $title = $(settings.dom.titleinput);
 
            if(!settings.autocomplete)
                $title.attr('autocomplete', 'off');
 
            // append the basic dom structure (should be hidden by default with CSS)
            generateStructure($title);
 
            $title.on('keypress', debounce(function(e) {
                if(e.which !== 0)
                    searchSimilarTopics($title);
            }, 500));
 
        };
 
 
        /* API :-) */
        return {
            init : init,
        };
 
    })();
 
 
    !function() {
 
        const settings = {
            forums : [1,2,3,4,5,6,7], // Forum IDs (separated by comma) where the "Similar Topics" feature will be enabled. Set to true to enable the feature everywhere (not recommended).
            searchIn : '-1', // Where the searches will take place. Use -1 to search everywhere. If not set, it will search the forum where the topic is being created
            maxTopics : 5, // Maximum amount of topics shown
        };
 
 
        location.pathname == '/post' &&
        location.search.indexOf('&mode=newtopic') > -1 &&
        (settings.forums === true || settings.forums.some(id => location.search.indexOf(`?f=${id}`) > -1)) &&
        $(function() {
            FLRX.similarTopics.init(settings);
        });
 
    }();