// ==UserScript==
// @name         arcalive
// @namespace    Violentmonkey Scripts
// @version      1.0
// @description  Extract image URL from specific element and log it to console
// @author       Your Name
// @match        https://arca.live/b/*
// @grant        none
// @downloadURL none
// ==/UserScript==

// 썸네일 이미지 가져오기
(function() {
    'use strict';

    // 이미지 프리뷰 링크를 찾아서 이벤트 핸들러를 추가합니다.
    document.querySelectorAll('a.title.preview-image').forEach(function(link) {
        link.addEventListener('click', function(event) {
            event.preventDefault(); // 기본 동작 방지

            // 이미지의 src 속성을 가져옵니다.
            var imageUrl = link.querySelector('img').getAttribute('src');

            // "&type=list" 부분을 제거합니다.
            imageUrl = imageUrl.replace(/&type=list/g, '');

            // 새로운 URL로 리다이렉션합니다.
            window.location.href = imageUrl;
        });
    });
})();

// 썸네일 이미지 생성
setTimeout(function() {
    // 요소를 찾기 위한 CSS 선택자
    var selector = 'a.vrow.column:not(.notice)';

    // 요소들을 모두 가져오기
    var elements = document.querySelectorAll(selector);

    // 모두 열기 버튼 요소 생성
    var newButton = document.createElement('a');
    newButton.className = 'btn btn-sm btn-primary float-left'; // btn-danger 대신 btn-primary로 변경
    newButton.href = '#'; // #으로 설정하여 페이지 이동을 방지합니다.
    newButton.innerHTML = '<span class="ion-android-list"></span><span> 모두 열기 </span>'; // 버튼 텍스트 및 아이콘 설정

    // 버튼 클릭 시 동작하는 함수 정의
    newButton.addEventListener('click', function(event) {
        event.preventDefault(); // 기본 동작 방지

        // 각 요소의 href 속성 값 새 탭에서 열기
        elements.forEach(function(element) {
            var href = element.getAttribute('href');
            var classes = element.className.split(' ');

            // 필터된 클래스를 가지고 있는 요소는 제외
            if (href && !classes.includes('filtered') && !classes.includes('filtered-keyword')) {
                window.open(href, '_blank'); // 새 탭에서 링크 열기
            }
        });
    });

    // 모두 열기 버튼을 삽입할 위치 찾기
    var targetElement = document.querySelector('.form-control.select-list-type');

    // 모두 열기 버튼을 삽입할 위치의 앞에 모두 열기 버튼 추가
    targetElement.parentNode.insertBefore(newButton, targetElement);

    // 각 요소에 대한 처리
    elements.forEach(function(element) {
        // vcol col-title 요소 앞에 vcol col-box 요소 생성
        var vcolTitle = element.querySelector('.vrow-top .vcol.col-title');
        var vcolBox = document.createElement('span');
        vcolBox.className = 'vcol col-box';
        vcolBox.style.width = '5rem';
        vcolBox.style.height = '5rem';

        // 이미지를 담는 div 요소 생성
        var imageContainer = document.createElement('span');
        imageContainer.className = 'image-container'; // 클래스 설정
        imageContainer.style.width = '100%'; // 이미지의 너비와 높이와 동일하게 설정
        imageContainer.style.height = '100%';
        imageContainer.style.overflow = 'hidden'; // 이미지가 넘치지 않도록 설정

        // 이미지가 있는지 확인
        var imageElement = element.querySelector('.vrow-preview img');

        // 이미지가 있는 경우에만 처리
        if (imageElement) {
            // vrow column 요소의 높이를 4rem으로 설정
            element.style.height = '5.5rem';

            // vcol col-id 요소의 너비를 3rem으로 설정
            var vcolId = element.querySelector('.vrow-top .vcol.col-id');
            vcolId.style.width = '3rem';

            // 이미지의 src 속성을 가져옵니다.
            var imageUrl = imageElement.getAttribute('src');

            // 이미지 요소 생성 및 설정
            var image = document.createElement('img');
            image.src = imageUrl;
            image.style.width = '100%'; // 부모 요소인 imageContainer에 꽉 차도록 설정
            image.style.height = 'auto'; // 이미지의 비율 유지

            // 이미지를 imageContainer에 추가
            imageContainer.appendChild(image);

            // vrow-preview의 width와 height를 150px로 설정
            var vrowPreview = element.querySelector('.vrow-preview');
            vrowPreview.style.width = '30rem';
            vrowPreview.style.height = 'auto';
            vrowPreview.style.top = 'auto';
            vrowPreview.style.left = '10rem';

            vrowPreview.style.display = 'none';

            // 이미지에 마우스를 올리면 클래스명 변경
            image.addEventListener('mouseenter', function() {
                imageElement.src = imageUrl.replace('&type=list', '');
                vrowPreview.style.display = null;
            });

            // 이미지를 벗어나면 다시 클래스명 변경
            image.addEventListener('mouseleave', function() {
                vrowPreview.style.display = 'none';
            });

        } else {
            // 이미지가 없는 경우에는 높이를 4rem으로 설정하지 않음
            // vcol col-id 요소의 너비를 3rem으로 설정
            var vcolId = element.querySelector('.vrow-top .vcol.col-id');
            vcolId.style.width = '3rem';
        }

        // vcol col-box 요소에 이미지를 추가
        vcolBox.appendChild(imageContainer);

        // vcol col-box 요소를 vcol col-title 요소 앞에 삽입
        vcolTitle.parentNode.insertBefore(vcolBox, vcolTitle);
    });
}, 100);