// ==UserScript==
// @name        2draw picrandom
// @namespace   *
// @description Displays random picture from the room archive each time when the user clicks the button.
// @include     http://2draw.me/archive/*
// @include     https://2draw.me/archive/*
// @match       http://2draw.me/archive/
// @match       https://2draw.me/archive/
// @version     1
// @grant       none
// ==/UserScript==

var style = document.createElement('style');
style.type = 'text/css';
style.innerHTML = "#randomPic {text-align:center; width:650px;color:#000;font-size:20px;}"
+"#randomPic a { display:inline !important; border:none !important; color:#eee !important; background-color: #aaa !important; font-size:20px !important; line-height: 21px !important; vertical-align: text-top !important;}"
+"#randomPic a:hover {display:inline !important; color:aqua !important;} "
+"#randomPic a:hover::after {display:inline !important;} ";
document.getElementsByTagName('head')[0].appendChild(style);

var completedThreads, locationParts = window.location.toString().split(/\//g);
if (locationParts.length === 6) { // we are on the room archive page
    var roomName = locationParts[4];
    var span = document.getElementById("range");
    var thumbs = document.getElementById("thumbs");
    completedThreads = ~~(thumbs.children[0].attributes["data-index"].value);

    var getRandomPicture = function(){
        var thread = Math.floor(Math.random() * completedThreads) + 1;
        var threadUrl = locationParts[0]+"//2draw.me/archive/base/"+thread+".htm";
        var reqListener = function() {
            var p = this.responseText, startIndex = p.indexOf("<pre>"), endIndex = p.indexOf("</pre>"), posts = [], lines = p.substr(startIndex, endIndex-startIndex).split(/\n/g);

            for (var i=0; i < lines.length; i++){
                var line = lines[i].split(/\t/g);
                if (line.length >= 3){
                    var timestamp = line[0].split(/,/)[0], author=line[1];
                    if (line[2].indexOf("<a href") != -1 || line[2].indexOf("<img") != -1){
                        var imageHtml = line[2].substr(0, line[2].indexOf(";"));
                        var legend = "Author: "+author+" (" + new Date(~~timestamp*1000).toLocaleString() + ", thread <a href="+threadUrl+">"+thread+"</a>)";
                        var newHtml = "<table id='randomPic'><tbody><tr><td>"+legend+"</td></tr><tr><td>"+imageHtml+"</td></tr></tbody></table>";
                        posts.push(newHtml);
                    }
                }
            }
            thumbs.innerHTML = posts[Math.floor(Math.random() * posts.length)];
        }

        var req = new XMLHttpRequest();
        req.addEventListener("load", reqListener);
        req.open("GET", threadUrl);
        req.send();
    }

    if (span) {
        span.insertAdjacentHTML("afterend", "&nbsp;<input type='button' id='rndPicture' value='Random picture'>");
        document.getElementById("rndPicture").addEventListener("click", getRandomPicture);
    }
}