// ==UserScript==
// @name         arcaliveDualMode
// @namespace    http://tampermonkey.net/
// @version      0.41
// @description  아카라이브 심야식당 게시글 목록을 둘로나눠, 좌우에 각각 보여줍니다.
// @author       Jayscript
// @match        https://arca.live/b/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=arca.live
// @grant        none
// @license      MIT
// @downloadURL none
// ==/UserScript==
"use strict";

let originalMediaWidth = getOriginalMediaWidth();

function arcaliveDualMode()
{
    if (window.innerWidth >1800)
    {
        removeRightSidebar();
        expandContentWrapper();
        moveArticlesToRightPlane();
        restoreMediaSize();
    }
}

function getOriginalMediaWidth() {
    let image=document.querySelector('.fr-view.article-content img')
    return image? image.offsetWidth : null;
};

function removeRightSidebar()
{
    document.querySelector('.right-sidebar').style = 'display:none;';
}

function expandContentWrapper()
{
    let contentWrapper = document.querySelector('.content-wrapper.clearfix');
    contentWrapper.style='margin:0 5rem 0;max-width:100%';
    let containerBoard = document.querySelector('.containe-fluid.board-article');
    containerBoard.style='margin:0';
}
function moveArticlesToRightPlane()
{
    cloneArticleListAndArrangeIt();
    deleteDuplicatedArticles();
}

function cloneArticleListAndArrangeIt()
{
    let articleList = document.querySelector('.article-list');
    let articleList2 = articleList.cloneNode(true);
    articleList.after(articleList2);

    articleList.style='margin:5 0rem 0 0;float:left;width:49%;';
    articleList2.style='margin:5 0rem 0 0;float:right;width:49%;';
}
function deleteDuplicatedArticles()
{
    let articleList = document.querySelector('.article-list');
    let articleList2 = document.querySelectorAll('.article-list')[1];

    let articles=articleList.querySelectorAll('a.vrow:not(.notice)');
    let articles2=articleList2.querySelectorAll('a.vrow:not(.notice)');
    let noticesInArticles2=articleList2.querySelectorAll('a.vrow.notice');

    articles.forEach((el, i) => i>=15 && el.remove());
    articles2.forEach((el, i) => i<15 && el.remove());
    noticesInArticles2.forEach((el)=>el.remove());
}

function restoreMediaSize()
{
    let images = document.querySelectorAll('.fr-view.article-content img');
    let videos = document.querySelectorAll('.fr-view.article-content video');
    images.forEach(function (el) { el.style.width = `${originalMediaWidth}px`;});
    videos.forEach(function (el) { el.style.width = `${originalMediaWidth}px`;});
}


addEventListener('load',setTimeout(arcaliveDualMode,0));