// ==UserScript==
// @name         不要画像削除（アリババ用）
// @namespace    http://tampermonkey.net/
// @version      0.2
// @description  アリババでメイン画像の横や上下に出る不要な画像を削除
// @license 　   MIT
// @match        *://*.1688.com/*
// @grant        none
// @downloadURL none
// ==/UserScript==

(function() {
    'use strict';

    let isScriptActive = false;
    let isHighlightActive = true;
    let observer = null;

    const selectorsToRemove = [
        '.sdmap-dynamic-offer-list',
        '.od-pc-offer-recommend',
        '.od-pc-offer-combi-recommend',
        '.od-pc-offer-top-sales',
        '.cht-recommends-detail',
        '.m-auto',
        '.activity-banner-img',
        'div[data-darksite-inline-background-image]',
        'table[border="0"]',
        'div[style*="background-color: #ffffff;"]',
        'div[id="hd_0_container_0"] > div:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2)',
        'div:nth-of-type(2) > div > div:nth-of-type(2) > div:nth-of-type(3)'

    ];

    function removeElements() {
        if (!isScriptActive) return;

        selectorsToRemove.forEach(selector => {
            const elements = document.querySelectorAll(selector);
            elements.forEach((element) => {
                if (!element.closest('div.sku-item-wrapper')) {
                    element.remove();
                }
            });
        });

        const toggleButton = document.getElementById('toggleButton');
        toggleButton.innerText = '削除済み';
        toggleButton.style.backgroundColor = '#B0BEC5';
        toggleButton.style.cursor = 'default';
        toggleButton.disabled = true;
    }

    function highlightElements() {
        if (!isHighlightActive) return;

        selectorsToRemove.forEach(selector => {
            const elements = document.querySelectorAll(selector);
            elements.forEach((element) => {
                if (!element.closest('div.sku-item-wrapper')) {
                    element.style.position = 'relative';
                    const overlay = document.createElement('div');
                    overlay.style.position = 'absolute';
                    overlay.style.top = '0';
                    overlay.style.left = '0';
                    overlay.style.width = '100%';
                    overlay.style.height = '100%';
                    overlay.style.backgroundColor = 'rgba(255, 0, 0, 0.3)';
                    overlay.style.pointerEvents = 'none';
                    overlay.classList.add('highlight-overlay');
                    element.appendChild(overlay);
                }
            });
        });

        const images = document.querySelectorAll('img.desc-img-loaded');
        images.forEach((img) => {
            const hasHeightAttr = img.hasAttribute('height') && img.getAttribute('height') !== '';
            const hasStyleHeight = img.style.height && img.style.height !== '';
            const srcContainsR = img.src.includes('__r__');

            if (!hasHeightAttr && !hasStyleHeight && !srcContainsR && !img.closest('div.sku-item-wrapper')) {
                img.style.position = 'relative';
                const overlay = document.createElement('div');
                overlay.style.position = 'absolute';
                overlay.style.top = '0';
                overlay.style.left = '0';
                overlay.style.width = '100%';
                overlay.style.height = '100%';
                overlay.style.backgroundColor = 'rgba(255, 0, 0, 0.3)';
                overlay.style.pointerEvents = 'none';
                overlay.classList.add('highlight-overlay');
                img.appendChild(overlay);
            }
        });
    }

    function removeHighlight() {
        const overlays = document.querySelectorAll('.highlight-overlay');
        overlays.forEach(overlay => {
            overlay.remove();
        });
    }

    function toggleScript() {
        isScriptActive = !isScriptActive;
        const toggleButton = document.getElementById('toggleButton');

        if (isScriptActive) {
            removeElements();
        }
    }

    function toggleHighlight() {
        isHighlightActive = !isHighlightActive;
        const highlightButton = document.getElementById('highlightButton');

        if (isHighlightActive) {
            highlightButton.innerText = 'ハイライト停止';
            highlightElements();
        } else {
            highlightButton.innerText = 'ハイライト開始';
            removeHighlight();
        }
    }

    function createToggleButton() {
        const button = document.createElement('button');
        button.id = 'toggleButton';
        button.innerText = '画像を削除';
        button.style.position = 'fixed';
        button.style.bottom = '60px';
        button.style.right = '20px';
        button.style.zIndex = '1000';
        button.style.padding = '10px 20px';
        button.style.backgroundColor = '#4CAF50';
        button.style.color = 'white';
        button.style.border = 'none';
        button.style.borderRadius = '5px';
        button.style.cursor = 'pointer';
        button.style.boxShadow = '0px 4px 6px rgba(0, 0, 0, 0.1)';
        button.style.fontSize = '14px';
        button.style.fontFamily = 'Arial, sans-serif';

        button.addEventListener('click', toggleScript);

        document.body.appendChild(button);
    }

    function createHighlightButton() {
        const button = document.createElement('button');
        button.id = 'highlightButton';
        button.innerText = 'ハイライト停止';
        button.style.position = 'fixed';
        button.style.bottom = '20px';
        button.style.right = '20px';
        button.style.zIndex = '1000';
        button.style.padding = '10px 20px';
        button.style.backgroundColor = '#FF9800';
        button.style.color = 'white';
        button.style.border = 'none';
        button.style.borderRadius = '5px';
        button.style.cursor = 'pointer';
        button.style.boxShadow = '0px 4px 6px rgba(0, 0, 0, 0.1)';
        button.style.fontSize = '14px';
        button.style.fontFamily = 'Arial, sans-serif';

        button.addEventListener('click', toggleHighlight);

        document.body.appendChild(button);
    }

    window.addEventListener('load', () => {
        highlightElements();
    });

    createToggleButton();
    createHighlightButton();

})();