// ==UserScript==
// @name        [s4s] interface
// @namespace   s4s4s4s4s4s4s4s4s4s
// @include     https://boards.4chan.org/s4s/thread/*
// @include     http://boards.4chan.org/s4s/thread/*
// @version     1.02
// @grant       none
// @author      le fun css man AKA Doctor Worse Than Hitler
// @email       doctorworsethanhitler@gmail.com
// @description Lets you view the greenposts.
// @downloadURL none
// ==/UserScript==
// basic post html

/////////////////////////////////////////////////////////////////////
//////// WANNA SET SOME STUFF UP HERE? GO FOR IT BBY! ///////////////
//////// IT IS THE CONFIGURATION SPOTS WOW            ///////////////
var TEXT_COLOR = 'inherit';  // any css option for color is fine, eg #000, #000000, red, etc
/////////////////////////////////////////////////////////////////////
// (more to come for above)


var baseHTML = '<div class="sideArrows" id="sa&AFTER_NO&-&ID&">&gt;&gt;</div><div id="p&AFTER_NO&-&ID&" class="post reply" style="background-color: #6f6; border:2px solid green !important;"><div class="postInfo desktop" id="pi&AFTER_NO&-&ID&"><input name="ignore" value="delete" type="checkbox"><span class="nameBlock"><span class="name">&USERNAME&</span> </span> <span class="dateTime" data-utc="&TIMESTAMP&">&DATE& </span>';
var noHTML = '<span class="postNum desktop"><a href="#p&AFTER_NO&-&ID&" title="Link to this post">No.</a><a href="javascript:quote(\'&AFTER_NO&-&ID&\');" title="Reply to this post">&AFTER_NO&-&ID&</a></span>';
var baseHTML2 = '</div><blockquote class="postMessage" style="color:'+TEXT_COLOR+';" id="m&AFTER_NO&-&ID&"><span>&TEXT&</span></blockquote></div>';

var url = "https://funposting.online/interface/";
// ripped from https://www.elated.com/articles/working-with-dates/ -- is there not a better way to do this? who cares.
var day_names = new Array();
day_names[day_names.length] = "Sun";
day_names[day_names.length] = "Mon";
day_names[day_names.length] = "Tue";
day_names[day_names.length] = "Wed";
day_names[day_names.length] = "Thu";
day_names[day_names.length] = "Fri";
day_names[day_names.length] = "Sat";

//shamelessly ripped from https://stackoverflow.com/questions/247483/http-get-request-in-javascript
var HttpClient = function() {
    this.get = function(aUrl, aCallback) {
        var anHttpRequest = new XMLHttpRequest();
        anHttpRequest.onreadystatechange = function() {
            if (anHttpRequest.readyState == 4 && anHttpRequest.status == 200)
                aCallback(anHttpRequest.responseText);
        }

        anHttpRequest.open("GET", aUrl, true);
        anHttpRequest.send(null);
    }
}

// add a post to the proper position in the thread
function addPost(aPost) {
    console.log(aPost)
    var options = {
        weekday: 'long',
        year: 'numeric',
        month: 'long',
        day: 'numeric'
    };;
    var posthtml = baseHTML;
    if(aPost["options"] == "numberless") {
      		posthtml += baseHTML2;
          posthtml = posthtml.replace(/\&AFTER_NO\&/g, "XXXXXX");
    } 
    else {
          posthtml += noHTML;
          posthtml += baseHTML2
          posthtml = posthtml.replace(/\&AFTER_NO\&/g, aPost["after_no"]);
    }
    posthtml = posthtml.replace(/\&ID\&/g, aPost["id"]);
    posthtml = posthtml.replace(/\&TEXT\&/g, aPost["text"]);
    posthtml = posthtml.replace(/\&TIMESTAMP\&/g, aPost["timestamp"]);
    var d = new Date(aPost["timestamp"] * 1000);
    posthtml = posthtml.replace(/\&DATE\&/g, d.toLocaleDateString() + ' (' + day_names[d.getDay()] + ') ' + d.toLocaleTimeString());
    posthtml = posthtml.replace(/\&USERNAME\&/g, aPost["username"]);
    console.log(posthtml);
    var after_post = document.getElementById('pc' + aPost["after_no"]);
    console.log(after_post);

    var post = document.createElement("div");
    post.className = "postContainer replyContainer";
    post.id = 'pc' + aPost["after_no"]; // if the last post in a thread isn't a valid post based on the id, when the thread updates the whole fugging thread is reloaded. this is a hacky work around sorry.
    post.innerHTML = posthtml;

    // add the post
    after_post.parentNode.insertBefore(post, after_post.nextSibling);


    return;
}

// what thread are we in?
function getThread() {
    var thread = document.getElementsByClassName("thread")[0].id;
    return thread.split('t')[1];
}

console.log(getThread());


function LocalMain () {
  // add in all the posts
  var client = new HttpClient();
  client.get(url+'get.php?thread=' + getThread(), function(response) {
      var arr = JSON.parse(response);
      console.log(arr);

      Object.keys(arr).forEach(function(k) {
          addPost(arr[k]);
      });
  });

  var form = document.createElement("div");
  form.innerHTML = '<form name="post" action="'+url+'post.php" method="post" enctype="multipart/form-data"> <input name="thread" value="'+ getThread()+'" type="hidden"> <table class="postForm hideMobile" id="postForm" style="display: table; border: 2px solid #0f0; background-color: #9f9"> <tbody> <tr><td colspan="2" style="text-align:center; background-color:green">[s4s] Interface Green Posting Form</td></tr> <tr data-type="Name"> <td style="background-color:green">Name</td> <td> <input name="username" tabindex="1" placeholder="Anonymous" type="text"> </td> </tr> <tr data-type="Name"> <td style="background-color:green">Options</td> <td> <input name="options" tabindex="1" placeholder="Options" type="text"> </td> </tr> <tr data-type="Options"> <td style="background-color:green">Submit: </td> <td> <input value="Post" tabindex="6" type="submit"> </td> </tr> <tr data-type="Comment"> <td style="background-color:green">Comment</td> <td> <textarea name="text" cols="48" rows="4" tabindex="4" wrap="soft"></textarea> </td> </tr> </tbody> </table> </form>'
  document.getElementsByClassName("thread")[0].parentNode.insertBefore(form, document.getElementsByClassName("thread")[0].nextSibling);

}

// run this stufffffff
window.addEventListener ("load", LocalMain, false);