Utaite Wiki
No edit summary
No edit summary
Line 1,298: Line 1,298:
   
 
function applyHighlights(text) {
 
function applyHighlights(text) {
text = "<span class='notutorialinfo'>!<span class='tutorialtooltip'></span></span>"
+
text = "<div class='notutorialinfo'>!<div class='tutorialtooltip'></div></div>"
 
+text
 
+text
 
.replace(/</g, '&lt;')
 
.replace(/</g, '&lt;')
.replace(/\n/g, "\n<span class='notutorialinfo'>!<span class='tutorialtooltip'></span></span>")
+
.replace(/\n/g, "\n<div class='notutorialinfo'>!<div class='tutorialtooltip'></div></div>")
 
+"\r\n";
 
+"\r\n";
 
for (i in tips) {
 
for (i in tips) {
Line 1,307: Line 1,307:
 
text = text.replace(
 
text = text.replace(
 
new RegExp(
 
new RegExp(
"(^|\n)<span class='(.*)tutorialinfo'>!<span class='tutorialtooltip'>((.|\n)*)</span></span>(.*)" + i.replace(/[.*+?^${}()|[\]\\]/g, '\\$&') + "(.*)\n", "g"
+
"(^|\n)<div class='(.*)tutorialinfo'>!<span class='tutorialtooltip'>((.|\n)*)</div></div>(.*)" + i.replace(/[.*+?^${}()|[\]\\]/g, '\\$&') + "(.*)\n", "g"
 
),
 
),
"$1<span class='tutorialinfo'>!<span class='tutorialtooltip'>$4"+tips[i].join('\n').replace(/'/g, "&#39").replace(/"/g, "&quot;")+"</span></span>$5"+i+"$6\n"
+
"$1<div class='tutorialinfo'>!<div class='tutorialtooltip'>$3"+tips[i].join('\n').replace(/'/g, "&#39").replace(/"/g, "&quot;")+"</div></div>$4"+i+"$5\n"
 
).replace (new RegExp("<span style=info>", "g"), "<span style='color:#179e0a; font-size:larger'>")
 
).replace (new RegExp("<span style=info>", "g"), "<span style='color:#179e0a; font-size:larger'>")
 
.replace (new RegExp("<span style=use>", "g"), "<span style='color:#0a689e; font-size:larger'>")
 
.replace (new RegExp("<span style=use>", "g"), "<span style='color:#0a689e; font-size:larger'>")

Revision as of 05:00, 7 September 2018

/*<pre><nowiki>*/
//-----------------------------------------------------------------------------
//get content of the [[tutorial]] page
//-----------------------------------------------------------------------------
var tutorial;
$(function gettutorial () {
    $.ajax({
        url: 'https://utaite.wikia.com/wiki/Utaite_Wiki:Tutorial',
        success: function (html) {
            tutorial = '<div class="tutorialloader">' + $(html).find('#mw-content-text').html() + '</div>';
        }
    });
});

//-----------------------------------------------------------------------------
// Loads the current source of the page "pagename" (as stored in the database)
// and inserts it at the cursor position
//-----------------------------------------------------------------------------
function doPreload(pagename) {
    var loader = new ContentLoader();
    loader.callback = onPreloadArrival;
    loader.send('/index.php?title=' + pagename + '&action=raw&ctype=text/plain');
}

function insertAtCursor(myField, myValue) {
    //IE support
    if (document.selection) {
        myField.focus();
        sel = document.selection.createRange();
        sel.text = myValue;
    }
    //MOZILLA/NETSCAPE support
    else if (myField.selectionStart || myField.selectionStart == '0') {
        var startPos = myField.selectionStart;
        var endPos = myField.selectionEnd;
        myField.value = myField.value.substring(0, startPos)
            + myValue
            + myField.value.substring(endPos, myField.value.length);
    }
    else {
        myField.value += myValue;
    }
	//update textarea overlay on insert of templates
    handleInput();
}
/* end preload code */

/* Template Preloads
 * Original by User:Grunny
 * Source - w:c:starwars:MediaWiki:Wikia.js
 * Altered to replace Wiki's template preloads by runescape wiki
 */
function customPreloadTemplates() {

    if (( mw.config.get('wgAction') !== 'edit' && mw.config.get('wgCanonicalSpecialPageName') !== 'CreatePage' ) || !$('div.module_content').length) {
        return;
    }

    var preloadOptionsHtml = '',
        $preloadOptionsList,
        preloadBaseHtml = '<div id="lf-preload" style="display: block;">Standard preloads:<br /></div>' +
            '<div id="cust-preload">Custom preload pagename:<br /><span id="lf-preload-pagename-w"></span><span id="lf-preload-button-w"></span></div>'

    $('span.cke_buttons.cke_toolbar_templates').replaceWith(preloadBaseHtml);

    $.get(mw.config.get('wgScript'), {
        title: 'Template:Stdpreloads',
        action: 'raw',
        ctype: 'text/plain'
    }, function (data) {
        var lines = data.split('\n');
        for (var i = 0; i < lines.length; i++) {
            var value = ( lines[i].indexOf('-- ') === 0 ) ? lines[i].substring(3) : " ";
            preloadOptionsHtml += '<option value="' + value + '">' + lines[i] + '</option>';
        }
        $preloadOptionsList = $('<select />').attr('id', 'stdSummaries').html(preloadOptionsHtml).change(function () {
            var value = $(this).val();
            if (value !== '') {
                value = 'Template:' + value + '/preload';
                value = value.replace(' ', '_');
                $.get(mw.config.get('wgScript'), {title: value, action: 'raw', ctype: 'text/plain'}, function (data) {


                    if ($('#cke_wpTextbox1 #cke_contents_wpTextbox1 .cke_source').length) {
                        insertAtCursor($('#cke_wpTextbox1 #cke_contents_wpTextbox1 .cke_source')[0], data);
                    } else {
                        insertAtCursor(document.getElementById('wpTextbox1'), data);
                    }
                });
            }
        });

        $('div#lf-preload').append($preloadOptionsList);
    });

    $('#lf-preload-pagename-w').html('<input type="text" class="textbox" />');
    $('#lf-preload-button-w').html('<input type="button" class="button" value="Insert" onclick="doCustomPreloadOasis()" />');

}

function doCustomPreloadOasis() {
    var value = $('#lf-preload-pagename-w > input').val();
    value = value.replace(' ', '_');
    $.get(mw.config.get('wgScript'), {title: value, action: 'raw', ctype: 'text/plain'}, function (data) {

        if ($('#cke_wpTextbox1 #cke_contents_wpTextbox1 .cke_source').length) {
            insertAtCursor($('#cke_wpTextbox1 #cke_contents_wpTextbox1 .cke_source')[0], data);
        } else {
            insertAtCursor(document.getElementById('wpTextbox1'), data);
        }
    });
}

//-----------------------------------------------------------------------------
//link to converter in editor, format, and video-> tutorial; thanks to UltimateSupreme with helping to put it for visual editors as well w:c:Thread:608344
//-----------------------------------------------------------------------------
function addfeatures() {
    icon = "<a style='display:block; color:#000000' href='http://image.online-convert.com/convert-to-png?quality=10' target='_blank' title='Convert Photo'><div><div style='position:absolute; top:4px; width:45px; right:2px'><img src='https://images.wikia.nocookie.net/nicodougasingers/images/6/68/Converter_sprite.png'/></div><span class='cke_label' style='position:absolute; bottom:0px; text-align:center; width:45px; font-size:80%'>Convert</span></div></a><a id='formatter' style='display:block; color:#000000' title='Format Playlist'><div><div style='position:absolute; top:4px; width:45px; right:2px'><img src='https://vignette.wikia.nocookie.net/nicodougasingers/images/e/e3/Formatter_sprite.png/revision/latest?cb=20161215153534'/></div><span class='cke_label' style='position:absolute; bottom:0px; text-align:center; width:45px; font-size:80%'>Format</span></div></a><a class='tutorialicon' style='display:block; color:#000000' title='Load Tutorial'><div><div style='position:absolute; top:4px; width:45px;'><img src='https://vignette.wikia.nocookie.net/nicodougasingers/images/d/df/Tutorial.png/revision/latest?cb=20170411175309'/></div><span class='cke_label' style='position:absolute; bottom:0px; text-align:center; width:45px; font-size:80%'>Tutorial</span></div></a><div id='formatcontent'></div>";
	$('.cke_button.RTEImageButton.cke_button_big').append(icon);
};


//-----------------------------------------------------------------------------
//Custom YT & TM player
//-----------------------------------------------------------------------------
$(function loader() {
    if (document.querySelector('.ytvideo') !== null) {
        load(".ytvideo",
            "<div style='width: 300px; overflow: hidden; height: 200px; margin-top: 5px; margin-bottom: 5px; margin-right: 5px; position:relative; top:0; border: 3px solid #0f0f0f; border-radius:10px'><iframe width='300' height='200' src='https://www.youtube.com/embed/",
            "?version=3&hl=en_US&theme=dark&color=white&loop=1&showinfo=0&autohide=0&disablekb=1&autoplay=0' frameborder='0' allowfullscreen=0></iframe></div>");
    }
    if (document.querySelector('.ytsample') !== null) {
        load(".ytsample",
            "<div style='width: 202px; overflow: hidden; height: 21px; margin-top: 5px; margin-bottom: 5px; margin-right: 5px; position:relative; top:0; border: 3px solid #0f0f0f; border-radius:10px'><iframe width='202px' height='21' src='https://www.youtube.com/embed/",
            "?version=3&hl=en_US&theme=dark&color=white&loop=1&showinfo=0&autohide=0&disablekb=1&autoplay=0' frameborder='0' allowfullscreen=0></iframe></div>");
    }
    if (document.querySelector('.tmsample') !== null) {
        load(".tmsample",
            "<source lang='html4strict'><div style='height:21px; width:202px; overflow:hidden; margin-top: 5px; margin-bottom: 5px; margin-right: 5px; background:#000000; border: 3px solid #0f0f0f; border-radius:10px'><audio controls='controls' style='width:202px'><source src='https://",
            "' type='audio/mp3'/></audio></div></source>");
    }
});

function load(sample, template1, template2) {
    $(sample).first().ready(function () {
        var id = document.querySelector(sample).title;
        $(sample).first().append(template1 + id + template2);
    });
    if ($(sample).length >= 2) {
        $(sample).eq(1).ready(function () {
            var id = document.querySelectorAll(sample)[1].title;
            $(sample).eq(1).append(template1 + id + template2);
        });
    };
    if ($(sample).length >= 3) {
        $(sample).eq(2).ready(function () {
            var id = document.querySelectorAll(sample)[2].title;
            $(sample).eq(2).append(template1 + id + template2);
        });
    };
    if ($(sample).length >= 4) {
        $(sample).eq(3).ready(function () {
            var id = document.querySelectorAll(sample)[3].title;
            $(sample).eq(3).append(template1 + id + template2);
        });
    };
}

//-----------------------------------------------------------------------------
//stuff for the formatter
//-----------------------------------------------------------------------------
function formatcaller() {
    $('.tutorialicon').click(function () {
        if ($('.tutorialicon').hasClass('tutorialopen')) {
            $('.tutorialicon').removeClass('tutorialopen');
            $('#tutorialcontent').empty();
            return;
        }
        $('.tutorialicon').addClass('tutorialopen');
        $('#tutorialcontent').append(tutorial);
    });

    $('#formatter').click(function () {
        if ($('#formatter').hasClass('formatteropen')) {
            $('#formatter').removeClass('formatteropen');
            $('#formatcontent').empty();
            return;
        }
        $('#formatter').addClass('formatteropen');
        $('#formatcontent').html("<div id='formatwindow'><img src='https://images.wikia.nocookie.net/__cb1481713639/common/skins/oasis/images/icon_close.png'></button><br><span>NND mylists</span><br><input type='text' name='nnd' placeholder='7359936 25396393 31424334 13892546 26633779'><br><span>BB userspace</span><br><input type='text' name='bb' placeholder='11073'><br><span>YT usernames</span><br><input type='text' name='ytun' placeholder='splendiferousfantasy'><br><span>YT channels</span><br><input type='text' name='ytch' placeholder='UCMsNS10PzxzEayT7UHS4p6g'><br><span>YT playlists</span><br><input type='text' name='ytpl' placeholder='PLOA7lc-qUd88NjN4adz8Di8ZHT6jwIFrS PLOA7lc-qUd8_mcFeaVAKWKbg9FSy35SIV'><br><span>SoundCloud ID</span><br><input type='text' name='sc' placeholder='sumashu missingnumber'><br><br><input type='button' value='Format!'></div>");
        format();
    });
    function song(title, yt, nnd, sc, bb, date) {
        this.title = title;
        this.yt = yt;
        this.nnd = nnd;
        this.sc = sc;
        this.bb = bb;
        this.date = date;
    };

    function format() {
        $('#formatwindow input[type=button]').click(function () {
            var nnd = [];
            var ytun = [];
            var ytch = [];
            var ytpl = [];
            var sc = [];
            var bb = [];
            var list = [];
            var listsc = [];

            if (!$('input[name=nnd]').val() == '') {
                nnd = $('input[name=nnd]').val().split(" ");
                for (var i = 0; i < nnd.length; i++) {
                    var url = "https://query.yahooapis.com/v1/public/yql?q=select%20title%2CpubDate%2Clink%20from%20rss%20where%20url%3D'http%3A%2F%2Fwww.nicovideo.jp%2Fmylist%2F" + nnd[i] + "%2Fvideo%3Frss%3D2.0'&diagnostics=true";
                    $.ajax({
                        type: "GET",
                        url: url,
                        dataType: "xml",
                        success: function (xml) {
                            $(xml).find('item').each(function () {
                                list.push(new song($(this).find('title').text(), '', $(this).find('link').text().split("/watch/")[1], '', '', $(this).find('pubDate').text().split(' ')[3] + '.' + getmon($(this).find('pubDate').text().split(' ')[2]) + '.' + $(this).find('pubDate').text().split(' ')[1]))
                            });
                        }
                    });
                }
            }
            ;
            if (!$('input[name=bb]').val() == '') {
                bb = $('input[name=bb]').val().split(" ");
                var token = " ";
                for (var i = 0; i < bb.length; i++) {
                    //find number of pages then call bbformat on all pages
                            console.log('calling bb ajax');
							//changed to yquery
                    var url = "https://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20json%20where%20url%3D'http%3A%2F%2Fspace.bilibili.com%2Fajax%2Fmember%2FgetSubmitVideos%3Fmid%3D" + bb[i] + "'&diagnostics=true";
					console.log('current url: '+url);
                    $.ajax({
                        type: "GET",
                        url: url,
                        dataType: "xml",
                        success: function (xml) {
                            console.log('bilibili ajax successful');
                            var pages = $(xml).find('pages').text();
                            for (var j = 0; j <= pages; j++) {
                                bbformat("https://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20json%20where%20url%3D'http%3A%2F%2Fspace.bilibili.com%2Fajax%2Fmember%2FgetSubmitVideos%3Fmid%3D" + $(xml).find('mid:eq(0)').text() + "%26page%3D", j, list);
                            }
                        }
                    });
					
					
                }
            }
            ;
            if (!$('input[name=ytch]').val() == '') {
                ytch = $('input[name=ytch]').val().split(" ");
                var token = " ";
                for (var i = 0; i < ytch.length; i++) {
                    ytchformat(ytch[i], '', list);
                }
            }
            ;
            if (!$('input[name=ytun]').val() == '') {
                ytun = $('input[name=ytun]').val().split(" ");
                var token = " ";
                for (var i = 0; i < ytun.length; i++) {
                    ytunformat(ytun[i], '', list);
                }
            }
            ;
            if (!$('input[name=ytpl]').val() == '') {
                ytpl = $('input[name=ytpl]').val().split(" ");
                var token = " ";
                for (var i = 0; i < ytpl.length; i++) {
                    ytplformat(ytpl[i], '', list);
                }
            }
            ;
            if (!$('input[name=sc]').val() == '') {
                sc = $('input[name=sc]').val().split(" ");
                var url = " ";
                for (var i = 0; i < sc.length; i++) {
					url = "https://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20json%20where%20url%3D'http%3A%2F%2Fapi.soundcloud.com%2Fresolve.json%3Furl%3Dhttp%3A%2F%2Fsoundcloud.com%2F"+sc[i]+"%2Ftracks%26client_id%3D2t9loNQH90kzJcsFCODdigxfp325aq4z'&diagnostics=true"
                    console.log('calling sc ajax');	
					$.ajax({
						type: "GET",
						url: url,
						dataType: "xml",
						success: function (xml) {
							$(xml).find('json').find('json').each(function () {
								listsc.push(new song($(this).find('title').text(), '', '', $(this).find('permalink_url:eq(1)').text(), '', $(this).find('created_at').text().split(' ')[0].replace('/', '.').replace('/', '.')))
							});
						}
					});
                }
            }
            ;
            //$(document).ajaxStop(function(){})
            $(document).ajaxStop(function () {
                list.sort(function (a, b) {
                    if (a.title < b.title) return -1;
                    if (a.title > b.title) return 1;
                    return 0;
                });
                list.sort(function (a, b) {
                    if (a.date < b.date) return -1;
                    if (a.date > b.date) return 1;
                    return 0;
                });
                for (var i = 0; i < list.length - 1; i++) {
                    if ((list[i + 1].title == list[i].title) && (list[i + 1].date == list[i].date)) {
                        if (list[i + 1].nnd != '') {
                            list[i].nnd = list[i + 1].nnd;
                        } else {
                            list[i].yt = list[i + 1].yt;
                        }
                        list.splice(i + 1, 1);
                        i--;
                    }
                }
                var rmv = ['【歌ってみた】', 'を歌ってみた', '歌ってみた', '(english cover)', 'english cover', 'cover', 'english', 'vers.', 'ver.', 'vers', 'ver', 'french', 'german', 'chinese', 'spanish', 'rap', 'screamo', 'piano', 'tv size', 'tv-size', 'acapella', 'a capella', 'short', 'band', 'acoustic', 'arrange', 'parody', '替え歌ってみた', '替え歌', '--', '- -'];
                var out = '==List of Covered Songs==\n{{Playlist|content = \n';
                var ver = '';
                for (var i = 0; i < list.length; i++) {
                    ver = verformat(list[i].title);
                    for (var j = 0; j < rmv.length; j++) {
                        list[i].title = list[i].title.replace(new RegExp(" \\b"+rmv[j]+"\\b", "ig"), " ").replace(new RegExp(" \\b"+rmv[j]+"\\b", "ig"), " ").replace(new RegExp("\\b"+rmv[j]+"\\b", "ig"), " ");
                    }
			list[i].title = list[i].title.replace('ENG', '');

			list[i].title = list[i].title.replace(' ', ' ').replace('|', '-').replace('[', '「').replace(']', '」').replace('()', '').replace('--', '').replace('- -', '').replace('  ', ' ');

			list[i].title = list[i].title.trim();

			list[i].title = list[i].title.replace('Private video', '(Private video)').replace('Deleted video', '(Deleted video)');


                    if (list[i].yt != '' && list[i].nnd != '') {
                        out = out.concat("# \"[https://www.youtube.com/watch?v=" + list[i].yt + " " + list[i].title + "]\" {{nnd|" + list[i].nnd + "}}" + ver + " (" + list[i].date + ")\n")
                    }
                    else if (list[i].yt != '' && list[i].nnd == '') {
                        out = out.concat("# \"[https://www.youtube.com/watch?v=" + list[i].yt + " " + list[i].title + "]\" " + ver + " (" + list[i].date + ")\n")
                    }
                    else if (list[i].yt == '' && list[i].nnd != '') {
                        out = out.concat("# \" " + list[i].title + "\" {{nnd|" + list[i].nnd + "}}" + ver + " (" + list[i].date + ")\n")
                    }
                    else if (list[i].bb != '' && list[i].nnd != '') {
                        out = out.concat("# \"[http://www.bilibili.com/video/" + list[i].bb + " " + list[i].title + "]\" {{nnd|" + list[i].nnd + "}}" + ver + " (" + list[i].date + ")\n")
                    }
                    else {
                        out = out.concat("# \"[http://www.bilibili.com/video/" + list[i].bb + " " + list[i].title + "]\" " + ver + " (" + list[i].date + ")\n")
                    }
                }
                out = out.concat('}}\n');
                var outsc = '===Songs on SoundCloud===\n{{Playlist|notice = soundcloud|content = \n'
                for (var i = 0; i < listsc.length; i++) {
                    ver = verformat(listsc[i].title);
					
                    for (var j = 0; j < rmv.length; j++) {
                        listsc[i].title = listsc[i].title.replace(new RegExp(" \\b"+rmv[j]+"\\b", "ig"), " ").replace(new RegExp(" \\b"+rmv[j]+"\\b", "ig"), " ").replace(new RegExp("\\b"+rmv[j]+"\\b", "ig"), " ");
                    }
					listsc[i].title = listsc[i].title.replace(' ', ' ').replace('|', '-').replace('[', '「').replace(']', '」').replace('()', '').replace('--', '').replace('  ', ' ');
                    outsc = outsc.concat("# \"[" + listsc[i].sc + " " + listsc[i].title + "]\" " + ver + " (" + listsc[i].date + ")\n");
                }
                outsc = outsc.concat('}}\n');
                if (listsc.length <= 0) {
                    outsc = '';
                }

                $('#formatcontent').html("<div id='formatwindow'><img src='https://images.wikia.nocookie.net/__cb1481713639/common/skins/oasis/images/icon_close.png'></button><textarea readonly name=res>" + out + outsc + "</textarea></div>");
                $('#formatwindow .close').click(function () {
                    $('#formatcontent').empty();
                });
            })
        })
    }
    function verformat(title) {
        var tmp = ' -';
        var t = '';
        if (title.toLowerCase().indexOf('english') > -1 || title.indexOf('英語') > -1 || title.indexOf('ENG') > -1) {
            tmp += 'English ';
        }
        if (title.toLowerCase().indexOf('french') > -1 || title.toLowerCase().indexOf('français') > -1) {
            tmp += 'French ';
        }
        if (title.toLowerCase().indexOf('german') > -1 || title.toLowerCase().indexOf('deutsch') > -1) {
            tmp += 'German ';
        }
        if (title.toLowerCase().indexOf('chinese') > -1 || title.indexOf('中文') > -1) {
            tmp += 'Chinese ';
        }
        if (title.toLowerCase().indexOf('spanish') > -1 || title.toLowerCase().indexOf('español') > -1) {
            tmp += 'Spanish ';
        }
        if (title.toLowerCase().indexOf('indonesia') > -1) {
            tmp += 'Indonesian ';
        }
        if (title.toLowerCase().indexOf('rap') > -1) {
            tmp += 'Rap ';
        }
        if (title.toLowerCase().indexOf('screamo') > -1) {
            tmp += 'Screamo ';
        }
        if (title.toLowerCase().indexOf('piano') > -1 || title.indexOf('ピアノ') > -1) {
            tmp += 'Piano ';
        }
        if (title.toLowerCase().indexOf('tv size') > -1 || title.toLowerCase().indexOf('tv-size') > -1) {
            tmp += 'TV size ';
        }
        if (title.toLowerCase().indexOf('acapella') > -1 || title.toLowerCase().indexOf('a capella') > -1) {
            tmp += 'Acapella ';
        }
        if (title.toLowerCase().indexOf('short') > -1) {
            tmp += 'Short ';
        }
        if (title.toLowerCase().indexOf('band') > -1 || title.indexOf('バンド') > -1) {
            if (title.toLowerCase().indexOf('band edition') > -1) {
                t = ' -Band edition-';
            } else {
                tmp += 'Band ';
            }
        }
        if (title.toLowerCase().indexOf('acoustic') > -1) {
            tmp += 'Acoustic ';
        }
        if (title.toLowerCase().indexOf('arrange') > -1 || title.indexOf('アレンジ') > -1) {
            tmp += 'Arrange ';
        }
        if (title.toLowerCase().indexOf('parody') > -1 || title.indexOf('替え歌') > -1) {
            tmp += 'Parody ';
        }
        if (tmp == ' -') {
            return '' + t;
        }
        return tmp + 'ver.-' + t
    }
    function ytunformat(url, token, list) {
		            var u = "https://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20json%20where%20url%3D'https%3A%2F%2Fwww.googleapis.com%2Fyoutube%2Fv3%2Fchannels%3Fkey%3DAIzaSyD5bC5qiEP-_25Llg2ciYNM9sW-WP6a6ck%26part%3Did%26forUsername%3D"+url+"'&diagnostics=true";
                            console.log('calling yt ajax');
					console.log('function url: '+url);
					console.log('current url: '+u);
                    $.ajax({
                        type: "GET",
                        url: u,
                        dataType: "xml",
                        success: function (xml) {
							console.log('yt username ajax successful');
                            $(xml).find('items').each(function () {
								var id = $(this).find('id').text();
								var uu = id;
								if (token == '') {
								} else {
									uu = id + "%26pageToken%3D" + token;
								}
								uu = "https://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20json%20where%20url%3D'https%3A%2F%2Fwww.googleapis.com%2Fyoutube%2Fv3%2Fsearch%3Forder%3Ddate%26part%3Dsnippet%26maxResults%3D50%26key%3DAIzaSyD5bC5qiEP-_25Llg2ciYNM9sW-WP6a6ck%26channelId%3D"+uu+"'&diagnostics=true";
								console.log('calling yt chid ajax');
					console.log('function url: '+url);
					console.log('current url: '+uu);
								$.ajax({
									type: "GET",
									url: uu,
									dataType: "xml",
									success: function (xml) {
										var token = " ";
										token = $(xml).find('nextPageToken').text();
										console.log("token='"+token+"'");
										$(xml).find('items').each(function () {
											console.log("check if id=null"+$(this).find('videoId').text())
											var tmp = " ";
											tmp = $(this).find('videoId').text();
											if (tmp != " ") {
												list.push(new song($(this).find('title').text(), $(this).find('videoId').text(), '', '', '', $(this).find('publishedAt').text().split('T')[0].replace('-', '.').replace('-', '.')));
											}
										});
										if (token != " ") {
											ytchformat(id, token, list);
											console.log("token='"+token+"'");
											console.log("token not empty");
										}
									}
								});
                            });
                        }
                    });
    };
    function ytchformat(url, token, list) {
		var u = url;
		if (token == '') {
		} else {
			u = url + "%26pageToken%3D" + token;
		}
		u = "https://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20json%20where%20url%3D'https%3A%2F%2Fwww.googleapis.com%2Fyoutube%2Fv3%2Fsearch%3Forder%3Ddate%26part%3Dsnippet%26maxResults%3D50%26key%3DAIzaSyD5bC5qiEP-_25Llg2ciYNM9sW-WP6a6ck%26channelId%3D"+u+"'&diagnostics=true";
		console.log('calling yt chid ajax');
		console.log('function url: '+url);
		console.log('current url: '+u);
		$.ajax({
			type: "GET",
			url: u,
			dataType: "xml",
			success: function (xml) {
				var token = " ";
				token = $(xml).find('nextPageToken').text();
				console.log("token='"+token+"'");
				$(xml).find('items').each(function () {
					console.log("check if id=null"+$(this).find('videoId').text())
					var tmp = " ";
					tmp = $(this).find('videoId').text();
					if (tmp != " ") {
						console.log($(this).find('title').text());
						console.log($(this).find('videoId').text());
						console.log($(this).find('publishedAt').text());
						list.push(new song($(this).find('title').text(), $(this).find('videoId').text(), '', '', '', $(this).find('publishedAt').text().split('T')[0].replace('-', '.').replace('-', '.')));
					}
				});
				if (token != " ") {
					ytchformat(url, token, list);
					console.log("token='"+token+"'");
					console.log("token not empty");
				}
			}
		});
	};
    function ytplformat(url, token, list) {
		var u = url;
		if (token == '') {
		} else {
			u = url + "%26pageToken%3D" + token;
		}
		u = "https://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20json%20where%20url%3D'https%3A%2F%2Fwww.googleapis.com%2Fyoutube%2Fv3%2FplaylistItems%3Fpart%3Dsnippet%26key%3DAIzaSyD5bC5qiEP-_25Llg2ciYNM9sW-WP6a6ck%26playlistId%3D"+u+"'&diagnostics=true";
		console.log('calling yt chid ajax');
		console.log('function url: '+url);
		console.log('current url: '+u);
		$.ajax({
			type: "GET",
			url: u,
			dataType: "xml",
			success: function (xml) {
				var token = " ";
				token = $(xml).find('nextPageToken').text();
				console.log("token='"+token+"'");
				$(xml).find('items').each(function () {
					console.log("check if id=null"+$(this).find('videoId').text())
					var tmp = " ";
					tmp = $(this).find('videoId').text();
					if (tmp != " ") {
						list.push(new song($(this).find('title').text(), $(this).find('videoId').text(), '', '', '', $(this).find('publishedAt').text().split('T')[0].replace('-', '.').replace('-', '.')));
					}
				});
				if (token != " ") {
					ytplformat(url, token, list);
					console.log("token='"+token+"'");
					console.log("token not empty");
				}
			}
		});
    };

    function bbformat(url, page, list) {
        console.log('calling bb ajax');
        //console.log('bbformat called with url:'+url+page);
		console.log('function url: '+url+page+"'&diagnostics=true");
        $.ajax({
            type: "GET",
            url: url + page + "'&diagnostics=true",
            dataType: "xml",
            success: function (xml) {
				$(xml).find('vlist').each(function () {
					var d = new Date(parseInt($(this).find('created').text()) * 1000)
					list.push(new song($(this).find('title').text(), '', '', '', 'av'+ $(this).find('aid').text(), d.getFullYear() + "." + ("0" + d.getMonth()).slice(-2) + "." + ("0" + d.getDate()).slice(-2)))
				});
            }
        });
    };

    function getmon(mon) {
        switch (mon) {
            case 'Jan':
                return '01';
                break;
            case 'Feb':
                return '02';
                break;
            case 'Mar':
                return '03';
                break;
            case 'Apr':
                return '04';
                break;
            case 'May':
                return '05';
                break;
            case 'Jun':
                return '06';
                break;
            case 'Jul':
                return '07';
                break;
            case 'Aug':
                return '08';
                break;
            case 'Sep':
                return '09';
                break;
            case 'Oct':
                return '10';
                break;
            case 'Nov':
                return '11';
                break;
            case 'Dec':
                return '12';
                break;
        }
    }
}

//tutorial hints - WIP: still more things to do, but concept is done
var $textarea;
var $highlights;

$(function() {
	$('#mw-content-text').prepend("<div id='textareaoverlay'></div>");
	$textarea = $('#wpTextbox1');
	$highlights = $('#textareaoverlay');
	bindEvents();
	handleInput();
});

var tips = {
  "{{uptodate": [
    "<span style=use>Usage</span>",
    "{{uptodate|<span style=ph>Month XX, 20XX</span>}}",
    "",
    "<span style=ex>Examples</span>",
    "{{uptodate|August 03, 2013}}",
    "",
    "<span style=info>Information</span>",
    "> Use if List of Covered Songs is complete",
    "> Date = date of latest update of List of Covered Songs",
    "> Remove whole template if List of Covered Songs isn't up to date"
    ],
  "{{empty": [
    "<span style=use>Usage</span>",
    "{{empty}}",
    "",
    "<span style=info>Information</span>",
    "> Use if page has barely any content on it",
    "> Remove otherwise"
    ],
  "{{WIP": [
    "<span style=use>Usage</span>",
    "{{WIP|<span style=ph>XXX</span>}}",
    "",
    "<span style=ex>Examples</span>",
    "{{WIP|}}",
    "{{WIP|songlist}}",
    "{{WIP|description}}",
    "",
    "<span style=info>Information</span>",
    "> Use {{WIP}} if page is rather incomplete (short description, not complete songlist, etc.)",
    "> Use {{WIP|songlist}} if List of Covered Songs isn't complete, but rest of page (description, gallery, trivia, etc.) is",
    "> Use {{WIP|description}} if description isn't up to par, but rest of page (gallery, songlist, trivia, etc.) is complete"],
  "{{complete": [
    "<span style=use>Usage</span>",
    "{{complete}}",
    "",
    "<span style=info>Information</span>",
    "Use if you believe page is 100% complete",
    "> Remove otherwise"
    ],
  "|site": [
    "<span style=use>Usage</span>",
    "{{Singer|site = <span style=ph>XX</span>}}",
    "",
    "<span style=ex>Examples</span>",
    "{{Singer|site = nnd}}",
    "{{Singer|site = yt}}",
    "{{Singer|site = bb}}",
    "", 
    "<span style=info>Information</span>",
    "> choose nnd, yt, or bb based on which site singer is most active on",
    "> This also adds appropriate category to page"
    ],
  "|image ": [
    "<span style=use>Usage</span>",
    "|image = <span style=ph>XXX</span>",
    "",
    "<span style=ex>Examples</span>",
    "|image = sorarutwitter.png",
    "",
    "<span style=info>Information</span>",
    "> Use a decent looking image for main avatar",
    "> Refrain from using a face-avatar (icon-size)",
    "> Only use fanart, if no high quality official art can be found",
    "",
    "<span style=imp>Important</span>",
    "> Definitely cite illustrator no matter if image is fanart or official (see officialillustrator or otherillustrator)"
    ],
  "|image=": [
    "<span style=use>Usage</span>",
    "|image = <span style=ph>XXX</span>",
    "",
    "<span style=ex>Examples</span>",
    "|image = sorarutwitter.png",
    "",
    "<span style=info>Information</span>",
    "> Use a decent looking image for main avatar",
    "> Refrain from using a face-avatar (icon-size)",
    "> Only use fanart, if no high quality official art can be found",
    "",
    "<span style=imp>Important</span>",
    "> Definitely cite illustrator no matter if image is fanart or official (see officialillustrator or otherillustrator)"
    ],
  "|imagesong": [
    "<span style=use>Usage</span>",
    "|imagesong = <span style=ph>XXX</span>",
    "",
    "<span style=ex>Examples</span>",
    "|imagesong = magnet",
    "|imagesong = [https://www.youtube.com/watch?v=1234567 magnet]",
    "|imagesong = [https://www.youtube.com/watch?v=1234567 magnet] {{nnd|1234567}}",
    "",
    "<span style=info>Information</span>",
    "> If image is from a song cover, write song name here. You may link to song cover"
    ],
    "|imagegroup": [
      "<span style=use>Usage</span>",
      "|imagegroup = <span style=ph>XXX</span>",
      "",
      "<span style=ex>Examples</span>",
      "|imagegroup = his Twitter account",
      "|imagegroup = Sorairo Muffler",
      "",
      "<span style=info>Information</span>",
      " > If image is from an official collaboration group, write group name here"
      ],
    "|officialillustrator": [
      "<span style=use>Usage</span>",
      "|officialillustrator = <span style=ph>XXX</span>",
      "",
      "<span style=ex>Examples</span>",
      "|officialillustrator = [[Avatar Illustrators#M|MACCO]]",
      "|officialillustrator = [[Avatar Illustrators#O|Ohagi (おはぎ)]]",
      "|officialillustrator = [http://www.pixiv.net/member.php?id=3661299 Funota (ふのた)]",
      "|officialillustrator = {{VW|Haruyo|Haruyo (春夜)}}",
      "",
      "<span style=info>Information</span>",
      "> If image is an official image, link illustrator here",
      "> Use [[Avatar Illustrators#I|Illustratornameromaji (Illustratornamejapanese)]] where I is letter, illustrator's name begins with, for artists featured on Avatar Illustrators",
      "> Use [http://www.websitelinkname.com Illustratornameromaji (Illustratornamejapanese)] to link to illustrator's website",
      "> Use {{VW|Pagename|Illustratornameromaji (Illustratornamejapanese)}} where Pagename is pagename of article on VOCALOID wiki, to link to VOCALOID wiki",
      "",
      "<span style=imp>Important</span>",
      "> Add artist to our list of artist permissions, if not already present",
      "If artist frequently draws for certain utaite, add them to Avatar Illustrators page. Fanart doesn't count"
      ],
    "|otherillustrator": [
      "<span style=use>Usage</span>",
      "|otherillustrator = <span style=ph>XXX</span>",
      "",
      "<span style=ex>Examples</span>",
      "|otherillustrator = [http://www.pixiv.net/member.php?id=3661299 Funota (ふのた)]",
      "|otherillustrator = {{VW|Haruyo|Haruyo (春夜)}}",
      "",
      "<span style=info>Information</span>",
      "> If image is a fan image, link illustrator here",
      "> Use [http://www.websitelinkname.com Illustratornameromaji (Illustratornamejapanese)] to link to illustrator's website",
      "> Use {{VW|Pagename|Illustratornameromaji (Illustratornamejapanese)}} where Pagename is pagename of article on VOCALOID wiki, to link to VOCALOID wiki",
      "",
      "<span style=imp>Important</span>",
      "> Add artist to our list of artist permissions, if not already present"
      ],
    "|officialjapname": [
      "<span style=use>Usage</span>",
      "|officialjapname = <span style=ph>XXX</span>",
      "",
      "<span style=ex>Examples</span>",
      "|officialjapname = そらる",
      "|officialjapname = 完全体セル",
      "",
      "<span style=info>Information</span>",
      "> If singer's original name is japanese, write it here in japanese symbols",
      "",
      "<span style=imp>Important</span>",
      "> Also write romaji in officialromajiname",
      "> If using officialjapname, don't use officialchinname or officialengname"
      ],
    "|officialromajiname": [
      "<span style=use>Usage</span>",
      "|officialromajiname = <span style=ph>XXX</span>",
      "",
      "<span style=ex>Examples</span>",
      "|officialromajiname = soraru",
      "|officialromajiname = kanzentai seru",
      "",
      "<span style=info>Information</span>",
      "> > romaji transcription of japanese name",
      "",
      "<span style=imp>Important</span>",
      "> Also write japanese in officialjapname"
      ],
    "|officialchinname": [
      "<span style=use>Usage</span>",
      "|officialchinname = <span style=ph>XXX</span>",
      "",
      "<span style=ex>Examples</span>",
      "|officialchinname = YUKI裏式",
      "",
      "<span style=info>Information</span>",
      "> If singer's original name is chinese, write it here in chinese symbols",
      "",
      "<span style=imp>Important</span>",
      "> Also write pinyin in officialpinyinname",
      "> If using officialchinname, don't use officialjapname or officialengname"
      ],
    "|officialpinyinname": [
      "<span style=use>Usage</span>",
      "|officialpinyinname = <span style=ph>XXX</span>",
      "",
      "<span style=ex>Examples</span>",
      "|officialpinyinname = YUKI-Lǐ Shì",
      "",
      "<span style=info>Information</span>",
      "> pinyin transcription of chinese name",
      "",
      "<span style=imp>Important</span>",
      "> Also write chinese in officialchinname"
      ],
    "|officialengname": [
      "<span style=use>Usage</span>",
      "|officialengname = <span style=ph>XXX</span>",
      "",
      "<span style=ex>Examples</span>",
      "|officialengname = JubyPhonic",
      "",
      "<span style=info>Information</span>",
      "> If singer's original name is non-japanese and non-chinese",
      "> If using officialengname, don't use officialchinname or officialjapname"
      ],
    "|officialnameinfo": [
      "<span style=use>Usage</span>",
      "|officialnameinfo = <span style=ph>XXX</span>",
      "",
      "<span style=ex>Examples</span>",
      "|officialnameinfo = , lit. perfect cell",
      "",
      "",
      "<span style=info>Information</span>",
      "> Field can be filled with direct translation of singer's official name."
      ],
    "|aka": [
      "<span style=use>Usage</span>",
      "|aka = <span style=ph>XXX</span>",
      "",
      "<span style=ex>Examples</span>",
      "|aka = Screaming Cinderella",
      "",
      "<span style=info>Information</span>",
      "> Field can be filled with singer's fan nickname, other usernames, or fan titles"
      ],
    "country": [
      "<span style=use>Usage</span>",
      "|country = <span style=ph>XXX</span>",
      "",
      "<span style=ex>Examples</span>",
      "|country = France",
      "",
      "",
      "<span style=info>Information</span>",
      "> Country of origin of singer, if not from Japan"
      ],
    "birthday": [
      "<span style=use>Usage</span>",
      "|birthday = <span style=ph>XX</span>|birthmonth = <span style=ph>XX</span>|birthyear = <span style=ph>XXXX</span>|birthref = <span style=ph>XXX</span>",
      "",
      "<span style=ex>Examples</span>",
      "|birthday = 06|birthmonth = 04|birthyear = 1996|birthref = <ref>[http://www.websitelinkname.com Soraru's blogpost about his birthday]</ref> ",
      "",
      "<span style=info>Information</span>",
      "> Use double digits for birthday and birthmonth",
      "",
      "<span style=imp>Important</span>",
      "> Citation for birthday source is a must. See tutorial for how to cite",
      "> Don't fill age if birthday, birthmonth and birthyear are all filled out"
      ],
    "|age": [
      "<span style=use>Usage</span>",
      "|age = <span style=ph>XX</span>",
      "",
      "<span style=ex>Examples</span>",
      "|age = 32",
      "",
      "<span style=imp>Important</span>",
      "> Don't fill age if birthday, birthmonth and birthyear are all filled out"
      ],
    "|status": [
      "<span style=use>Usage</span>",
      "|status = <span style=ph>XXX</span>",
      "",
      "<span style=ex>Examples</span>",
      "|status = Active",
      "|status = Inactive",
      "|status = Inactive as Utaite<br>Active as professional singer"
      ],
    "|years": [
      "<span style=use>Usage</span>",
      "|years = <span style=ph>20XX-20XX</span>",
      "",
      "<span style=ex>Examples</span>",
      "|years = 2012-present",
      "|years = 2012-2015",
      "",
      "<span style=info>Information</span>",
      "> Years in which singer has been active",
      "> Use present if they are still active to date",
      "> Singers with no new covers as of one year are considered inactive"
      ],
    "|BBuserspace": [
      "<span style=use>Usage</span>",
      "|BBuserspace = <span style=ph>XXX</span>",
      "",
      "<span style=ex>Examples</span>",
      "|BBuserspace = 11073",
      "",
      "<span style=info>Information</span>",
      "> If singer has a Bilibili account",
      "> For the user space http://space.bilibili.com/11073 use 11073"
      ],
    "|BBuserspaceinfo": [
      "<span style=use>Usage</span>",
      "|BBuserspaceinfo = <span style=ph>XXX</span>",
      "",
      "<span style=ex>Examples</span>",
      "|BBuserspaceinfo = main",
      "",
      "<span style=info>Information</span>",
      "> Additional info on user space if needed"
      ],
    "|YTusername": [
      "<span style=use>Usage</span>",
      "|YTusername = <span style=ph>XXX</span>",
      "",
      "<span style=ex>Examples</span>",
      "|YTusername = Lollialolitachan",
      "",
      "<span style=info>Information</span>",
      "> Use if singer has a YT account with username",
      "> For https://www.youtube.com/user/Lollialolitachan use Lollialolitachan",
      "",
      "<span style=imp>Important</span>",
      "> Doesn't work if singer has YT account without username"
      ],
    "|YTinfo": [
      "<span style=use>Usage</span>",
      "|YTinfo = <span style=ph>XXX</span>",
      "",
      "<span style=ex>Examples</span>",
      "|YTinfo = secondary",
      "",
      "<span style=info>Information</span>",
      "> Additional info on the account if needed"
      ],
    "|YTchannel": [
      "<span style=use>Usage</span>",
      "|YTchannel = <span style=ph>XXX</span>",
      "",
      "<span style=ex>Examples</span>",
      "|YTchannel = UCP_PHPuynkNUM6Cezwx2m6g 詩人のぴやっほゃチャンネル",
      "",
      "<span style=info>Information</span>",
      "> Use if singer has a YT account without username",
      "> For https://www.youtube.com/channel/UCP_PHPuynkNUM6Cezwx2m6g (called \"詩人のぴやっほゃチャンネル\" use UCP_PHPuynkNUM6Cezwx2m6g 詩人のぴやっほゃチャンネル"
      ],
    "|YTchannelinfo": [
      "<span style=use>Usage</span>",
      "|YTchannelinfo = <span style=ph>XXX</span>",
      "",
      "<span style=ex>Examples</span>",
      "|YTchannelinfo = secondary",
      "",
      "<span style=info>Information</span>",
      "> Additional info on the account if needed"
      ],
    "|NNDuserpage": [
      "<span style=use>Usage</span>",
      "|NNDuserpage = <span style=ph>XXX</span>",
      "",
      "<span style=ex>Examples</span>",
      "|NNDuserpage = 28385",
      "",
      "<span style=info>Information</span>",
      "> If the singer as a NND account",
      "> For http://www.nicovideo.jp/user/28385 use 28385"
      ],
    "|NNDuserpageinfo": [
      "<span style=use>Usage</span>",
      "|NNDuserpageinfo = <span style=ph>XXX</span>",
      "",
      "<span style=ex>Examples</span>",
      "|NNDuserpageinfo = main",
      "",
      "<span style=info>Information</span>",
      "> Additional info on the account if needed"
      ],
    "|mylist1": [
      "<span style=use>Usage</span>",
      "|mylist1 = <span style=ph>XXX</span>",
      "",
      "<span style=ex>Examples</span>",
      "|mylist1 = 20876482",
      "",
      "<span style=info>Information</span>",
      "> For http://www.nicovideo.jp/mylist/20876482 use 20876482"
      ],
    "|mylist1info": [
      "<span style=use>Usage</span>",
      "|mylist1info = <span style=ph>XXX</span>",
      "",
      "<span style=ex>Examples</span>",
      "|mylist1info = collabs",
      "",
      "<span style=info>Information</span>",
      "> Additional info on the mylist if needed"
      ],
    "|nicommu1": [
      "<span style=use>Usage</span>",
      "|nicommu1 = <span style=ph>XXX</span>",
      "",
      "<span style=ex>Examples</span>",
      "|nicommu1 = co28059",
      "",
      "<span style=info>Information</span>",
      "> For http://com.nicovideo.jp/community/co28059 use co28059"
      ],
    "|nicommu1info": [
      "<span style=use>Usage</span>",
      "|nicommu1info = <span style=ph>XXX</span>",
      "",
      "<span style=ex>Examples</span>",
      "|nicommu1info = private",
      "",
      "<span style=info>Information</span>",
      "> Additional info on the nicommu"
      ],
    "|NNDchannel1": [
      "<span style=use>Usage</span>",
      "|NNDchannel1 = <span style=ph>XXX</span>",
      "",
      "<span style=ex>Examples</span>",
      "|NNDchannel1 = recogch",
      "",
      "<span style=info>Information</span>",
      "> For http://ch.nicovideo.jp/recogch use recogch"
      ],
    "|NNDchannel1info": [
      "<span style=use>Usage</span>",
      "|NNDchannel1info = <span style=ph>XXX</span>",
      "",
      "<span style=ex>Examples</span>",
      "|NNDchannel1info = announcements",
      "",
      "<span style=info>Information</span>",
      "> Additional info on the NND channel"
      ],
    "|partner": [
      "<span style=use>Usage</span>",
      "|partner = <span style=ph>XXX</span>",
      "",
      "<span style=ex>Examples</span>",
      "|partner = [[Soraru]], [[Lon]], [[Mafumafu]]",
      "",
      "<span style=info>Information</span>",
      "> List singers that singer has collaborated with 2+ times, excluding large group collaborations"
      ],
    "|otheractivity": [
      "<span style=use>Usage</span>",
      "|otheractivity = <span style=ph>XXX</span>",
      "",
      "<span style=ex>Examples</span>",
      "|otheractivity = gamer, illustrator, mixer, producer",
      "",
      "<span style=info>Information</span>",
      "> Other activities singer is known for"
      ],
    "{{YTsample": [
      "<span style=use>Usage</span>",
      "{{YTsample|\"<span style=ph>XXX</span>\", composed by <span style=ph>XXX</span>|<span style=ph>XXX</span>}}",
      "",
      "<span style=ex>Examples</span>",
      "{{YTsample|\"[[ECHO]]\", composed by {{VW|Crusher-P}}|zSOuXCZVvc4}}",
      "",
      "<span style=info>Information</span>",
      "> Link a sample cover (solo preferrably) on YT here",
      "> For https://www.youtube.com/watch?v=zSOuXCZVvc4 use zSOuXCZVvc4 as YT id",
      "",
      "<span style=imp>Important</span>",
      "> If the singer has forbidden reprints, don't link to reprints, but if the singer has a YT account themselves, use a cover on there and paste this note above the YT sample: '''Note: This sample is linked to the utaite's own upload on YouTube, as he has forbidden reprints to video sharing sites outside of Nico Nico Douga and his own channel on YouTube.'''"
      ],
    "==Affiliations and Collaboration Projects": [
      "<span style=use>Usage</span>",
      "==Affiliations and Collaboration Projects==",
      "# <span style=ph>XXX</span>",
      "",
      "<span style=ex>Examples</span>",
      "==Affiliations and Collaboration Projects==",
      "# Member of Groupnameromaji (Group1namejap)",
      "# Member of Group1nameromaji (Group1namejap) (vocals & XXX) with Othersinger1name (XXX & XXX) and Othersinger3name (XXX)",
      "# ''[[#Albumname|Albumname]]'' with Othersingername (Released on Month XX, 20XX)",
      "# ''[[Otherutaitename#Albumname|Albumname]]'' withOthersingername (Released on Month XX, 20XX)",
      "# ''{{CD|Albumname}}'' (Released on Month XX, 20XX)",
      "# ''[http://www.websitelinkname.com Albumname]'' (Producername album) {Released on Month XX, 20XX)",
      "",
      "<span style=info>Information</span>",
      "> Use # Member of Groupnameromaji (Group1namejap) for doujin circles and groups",
      "> Use # Member of Group1nameromaji (Group1namejap) (vocals & XXX) with Othersinger1name (XXX & XXX) and Othersinger3name (XXX) for doujin circles and groups. XXX are the different roles",
      "> Use # ''[[#Albumname|Albumname]]'' with Othersingername (Released on Month XX, 20XX) to link to a duet album on the same page",
      "> Use # ''[[Otherutaitename#Albumname|Albumname]]'' withOthersingername (Released on Month XX, 20XX) to link to an album on another singer's page (for e.g. a feature role)",
      "> Use # ''{{CD|Albumname}}'' (Released on Month XX, 20XX) to link to a collaboration album on a collaboration page",
      "> Use # ''[http://www.websitelinkname.com Albumname]'' (Producername album) {Released on Month XX, 20XX) to link to an external website. (Producername album) is optional to include",
      "",
      "<span style=imp>Important</span>",
      "> Don't link to Anime OST compilation albums",
      "> Only list band albums, if more than one person sings in it"
      ],
    "==Collaboration Units": [
      "<span style=use>Usage</span>",
      "==Collaboration Units==",
      "# <span style=ph>Unitnameromaji (Unitnamejap) with [[Otherutaitename]]</span>",
      "",
      "<span style=ex>Examples</span>",
      "# Lemoc Raros with [[Komeru]]"
      ],
    "==List of Covered Songs": [
      "<span style=use>Usage</span>",
      "{{Playlist|<span style=ph>...</span>}}",
      "",
      "<span style=ex>Examples</span>",
      "{{Playlist|notice = forbid|content = ",
      "# \"Songtitle\" {{nnd|nndid}} (Translation) (Notes) -XXX ver.- feat. [[Singer1]], [[Singer2]] and [[Singer3]] (YYYY.MM.DD) '''(Additional notes)'''",
      "# \n\"[http://www.youtube.com/watch?v=123ytnumber123 Suji Chigai]\n\" {{nnd|sm234567}} (Misguidance) (Parody of [[Suki Kirai]]) -Arrange ver.- feat. Kogeinu, [[Faneru]] and [[ASK]] (guest appearance) (2011.05.08)",
      "}}",
      "",
      "{{Playlist|content = ...",
      "# \"Songtitle\" {{nnd|nndid}} (Translation) (Notes) -XXX ver.- feat. [[Singer1]], [[Singer2]] and [[Singer3]] (YYYY.MM.DD) '''(Additional notes)'''",
      "# \n\"[http://www.youtube.com/watch?v=123ytnumber123 Suji Chigai]\n\" {{nnd|sm234567}} (Misguidance) (Parody of [[Suki Kirai]]) -Arrange ver.- feat. Kogeinu, [[Faneru]] and [[ASK]] (guest appearance) (2011.05.08)",
      "}}",
      "",
      "<span style=info>Information</span>",
      "> If singer forbids reprinting of their covers, use {{Playlist|notice = forbid|content = ...}}",
      "",
      "> Use romanization of song titles. If  song is romanized to an English title use that. Ex.) Ikasama Life Game instead of Ikasama Raifu Geimu",
      "> You can link to reprints of songs by writing [https://www.youtube.com/watch?v=Q5L1wOojuLE Songtitle]",
      "> Use {{nnd|nndid}} to link to the original on NND. The ID often begins with sm or nm",
      "> Provide translations of the song title (optional). Ex.) (Slowly getting faster and faster) for Dandan Hayaku Naru",
      "> Notes include additional infos. Ex.) (Parody of \"Songname\"), (Original), (Original with GigaP), (Anime OP/ED/Insert song/OST), (Bandname song)",
      "> Use hyphens (-) to note particular arranges or versions. Capitalize version titles. Ex.) -Band edition-, -Piano ver.-, -English ver.-, -Screamo Rearrange-",
      "If song features vocals of several singers use feat. to denote that. Ex.) feat. Soraru and [[Mafumafu]]",
      "> If song features a lot of (i.e. more than 9) different singers, alternatively you can write (XX singers collab) in place of feat. XX, XX, XX and XX",
      "> Add the year in a (YYYY.MM.DD) format. Don't use reprint dates as those are usually incorrect",
      "> If needed add addiitonal notes such as '''(Deleted)''', '''(Not in Mylist)''', '''(Community & YT only)''', {{example|'''(Private)''' or '''(Unlisted)'''",
      "",
      ">You may add subsections for e.g. TmBox or Soundcloud covers. Use {{Playlist|notice = sitename|content = ...}}. Replace sitename with tmbox, koebu, voiceblog or soundcloud",
      "",
      "<span style=imp>Important</span>",
      "> If you're adding songs to a playlist, add the song to the song page as well, if it exists!"
      ],
    "==Commercially Featured Works": [
      "<span style=use>Usage</span>",
      "{{Commercially featured",
      "|\"<span style=ph>XXX</span>XXX</span>\"|<span style=ph>XXX</span>Month XX, 20XX</span>",
      "|<span style=ph>XXX</span>XXX of XXX</span>",
      "}}",
      "",
      "<span style=ex>Examples</span>",
      "{{Commercially featured",
      "|\"Fast End\" with [[Mafumafu]]|January 09, 2016",
      "|Opening of te TV anime Reikenzan: Hoshikuzu-tachi no Utage",
      "}}",
      "",
      "<span style=info>Information</span>",
      "> This section is optional, and belongs right before the Albums section, but if the singer has sung openings, endings, insert songs, etc. for commercial products such as anime series, movies, or games include them here",
      "",
      "<span style=imp>Important</span>",
      "> Voice acting roles, MCing, mixing, composing or such activities don't belong here"
      ],
    "==Discography": [
      "<span style=use>Usage</span>",
      "{{Album|type=<span style=ph>...</span>}}",
      "",
      "<span style=ex>Examples</span>",
      "{{Album|type=collab",
      "|albumtitle =Romaji (Translation) (with [[Singer]]) (by Groupname)",
      "|image = Filename.png",
      "|datereleased = Month XX, 20XX",
      "|crossfadeyt = ytid",
      "|crossfadennd = nndid",
      "|albumartist = Artistnameromaji (Artistnamejap)",
      "|shops = {{l|shopname|id|additional notes|JP}}",
      "|trackXinfo = {{nnd|nndid}} (Translation) (Notes) -XXX ver.- (Bonus track)",
      "|trackXutaite = [[Singer1]], [[Singer2]]",
      "}}",
      "",
      "<span style=info>Information</span>",
      "> Albums can be used on singer pages, collaboration album pages, and group pages",
      "",
      "For album title use (with [[Singer]]) if the album is a duet album with another singer; Use (by Groupname) if the album is by a band or group",
      "For shops: These websites require the ID code only, instead of the full link: 7net, actfamily, akibaoo, amazon, animate, bunkyodo, cdjapan, d-stage, due, fasic, gamers, hmv, itunes, joysound, melonbooks, nicochokuhan, three, toranoana, tower, tsutaya, rakuten, recochoku, vvstore. They are lowercase: {{l|amazon|123456|-Limited ver.-}}",
      "Other shops: Need to be provided with the full URL and proper capitalization: {{l|Shopname|http://www.othershopname.com|-Limited ver.-}}",
      "Shops that don't ship internationally, should be marked with a JP. If not provided, the link would be falsely put into the internationally shipping section",
      "For non-japanese Amazon and iTunes use: {{l|Amazon|www.amazon.com/dp/123456}}, {{l|iTunes|https://itunes.apple.com/us/album/id123456}}",
      "",
      "Notes include additional infos. Ex.) (Parody of \"Songname\"), (Original), (Original with GigaP), (Anime OP/ED/Insert song/OST), (Bandname song)",
      "Use hyphens (-) to note particular arranges or versions. Capitalize version titles. Ex.) -Band edition-, -Piano ver.-, -English ver.-, -Screamo Rearrange- ",
      "",
      "> If an album has different version where some tracks vary or if the album has multiple discs, use tabbers",
      "<tabber>",
      "   XXX ver. =",
      "   {{Album",
      "   ...",
      "   }}",
      "   |-|",
      "   XXX ver.-",
      "   {{Album",
      "   ...",
      "   }}",
      "   </tabber> ",
      "",
      "<span style=imp>Important</span>",
      "> If you're adding an album, be sure to add the songs to the song pages as well, if they exist!",
      "> If you are adding collaboration albums to collaboration album pages, add the album to the List of Collaboration Albums table too!"
      ],
    "==Gallery": [
      "<span style=use>Usage</span>",
      "==Gallery==",
      "{{Gallery",
      "|<span style=ph>XXX</span>|<span style=ph>XXX</span>",
      "|<span style=ph>XXX</span>|<span style=ph>XXX</span>",
      "}}",
      "",
      "<span style=ex>Examples</span>",
      "==Gallery==",
      "{{Gallery",
      "|imagename1.png|Singername's avatar in XXX",
      "|imagename2.png|Singername as seen in XXX",
      "|imagename3.png|Singername as seen in his cover of \"Songname\"",
      "|imagename4.png|Singername as seen on Twitter",
      "|imagename5.png|Singername as seen in XXX{{AI|A|akka}}",
      "|imagename6.png|Singername as seen in XXX{{AI|B|Benichiru (べにちる)}}",
      "|imagename7.png|Singername as seen in ...{{pixiv|1149660|Kurono Kuro (くろのくろ)}}",
      "|imagename8.png|Singername as seen in XXX<br>Illust. by [http://www.website.com/member.php?id{{=}}12345 Kirei na Ossan (綺麗なおっさん)]",
      "}}",
      "",
      "<span style=info>Information</span>",
      "> Use {{AI|I|Illustratornameromaji (Illustratornamejapanese)}} if artist has entry on Avatar Illustrators",
      "> Use {{pixiv|123456|Illustratornameromaji (Illustratornamejapanese)}} to link to artist's pixiv",
      "> Use [http://www.website.com/ Illustratornameromaji (Illustratornamejapanese)] to link to artist's website",
      "",
      "> Keep the maximum of real life photos to 3",
      "> OK real life photos: snapshots of public (not private!) concert, official promotional photoshoots (for shows/projects/singles/album/official homepage, etc.), screenshots from PVs, photos uploaded by the singer themselves, pictures with the utaite blocking their face are okay",
      "> Bad real life photos: purikura (photo booth) pictures, inappropriate photos, \"standing in front of mirror\" pictures, pictures of pictures",
      "",
      "<span style=imp>Important</span>",
      "> If website has an \"=\" sign, substitute with \"{{=}}\". Else the template breaks!",
      "> Do not post pictures of singers that do not like reprints of their photos.",
      "> Do not forget to cite the source!",
      "> Do not post pictures of singers from magazines for purchase (except for official uploads)!"
      ],
    "==Trivia": [
      "<span style=use>Usage</span>",
      "==Trivia==",
      "<span style=ph>* XXX</span>",
      "",
      "<span style=ex>Examples</span>",
      "==Trivia==",
      "<span style=ph>* His favorite VOCALOID song is Wanderlast by {{VW|sasakure.UK}}.<ref name=website>[http://www.website.com Singername's profile section]</ref></span>",
      "<span style=ph>* His height is 175.7 cm (5'7\").<ref name=website/></span>",
      "<span style=ph>* He was born in the year of the Dragon and he is a Scorpio.{{cite}}</span>",
      "<span style=ph>* He was inspired to become an utaite by fellow utaite [[Gazelle]] and [[Shachou]].<ref>[http://www.twitter.com/... Singername's Tweet about how he became an utaite]</ref></span>",
      "",
      "<span style=imp>Important</span>",
      "> All Trivia needs to be cited! See tutorial on how to cite"
      ],
    "==External Links": [
      "<span style=use>Usage</span>",
      "==External Links==",
      "<span style=ph>* [http://www.websitelinkname.com Websitename]</span>",
      "",
      "<span style=ex>Examples</span>",
      "==External Links==",
      "<span style=ph>* [https://twitter.com/komeruu Twitter]</span>",
      "",
      "<span style=info>Information</span>",
      "> Only link to official accounts and websites of the singer such as Twitter, Ameblo, other blogs, Blomaga, TmBox, ask.fm, etc"
      ]
}
////////////////////////////////////////////////////////////////////////////////////////////////

function applyHighlights(text) {
  text = "<div class='notutorialinfo'>!<div class='tutorialtooltip'></div></div>"
    +text
    .replace(/</g, '&lt;')
    .replace(/\n/g, "\n<div class='notutorialinfo'>!<div class='tutorialtooltip'></div></div>")
    +"\r\n";
    for (i in tips) {
      if (tips.hasOwnProperty(i)) {
    text = text.replace(
		new RegExp(
			"(^|\n)<div class='(.*)tutorialinfo'>!<span class='tutorialtooltip'>((.|\n)*)</div></div>(.*)" + i.replace(/[.*+?^${}()|[\]\\]/g, '\\$&') + "(.*)\n", "g"
		),
		"$1<div class='tutorialinfo'>!<div class='tutorialtooltip'>$3"+tips[i].join('\n').replace(/'/g, "&#39").replace(/"/g, "&quot;")+"</div></div>$4"+i+"$5\n"
	).replace (new RegExp("<span style=info>", "g"), "<span style='color:#179e0a; font-size:larger'>")
.replace (new RegExp("<span style=use>", "g"), "<span style='color:#0a689e; font-size:larger'>")
.replace (new RegExp("<span style=ex>", "g"), "<span style='color:#9e0a9b; font-size:larger'>")
.replace (new RegExp("<span style=ph>", "g"), "<span style='color:#cccccc'>")
.replace (new RegExp("<span style=imp>", "g"), "<span style='color:red; font-size:larger'>");

      }
    }
console.log(text)
  return text;
}

function handleInput() {
  var text = $textarea.val();
  var highlightedText = applyHighlights(text);
  $highlights.html(highlightedText);
}

function handleScroll() {
  var scrollTop = $textarea.scrollTop();
  $highlights.scrollTop(scrollTop);
}

function bindEvents() {
  $textarea.on({
    'input': handleInput,
    'scroll': handleScroll
  });
}

//execute scripts when visual editor is loaded or when document.ready
$(function () {
    if (window.CKEDITOR) {
        CKEDITOR.on("instanceReady", function () {
			//if visual editor, switch to source editor by default
			$("#cke_1_contents").ready( function(){
				$(".cke_button__modesource").eq(0).trigger('click');
			});
            customPreloadTemplates();
			addfeatures();
			formatcaller();
        });
    } else {
		customPreloadTemplates();
		addfeatures();
		formatcaller();
	}
});

/*</nowiki></pre>*/