// ==UserScript==
// @name         <marquee> to CSS (for Pale Moon)
// @namespace    cidoku.net
// @description  Replaces <marquee>s with a CSS animation. It doesn't support all attributes.
// @match        *://*/*
// @grant        none
// @license      CC0
// ==/UserScript==

(function() {
    'use strict';
    
    var style = document.createElement('style');
    style.setAttribute('data-marquee-style', true);
    
    style.innerHTML += `
        .__marquee-container {
           width:100%;
           white-space: nowrap;
           overflow: hidden;
        }
    `;

    if (!document.head.querySelector('style[data-marquee-style]')) {
        document.head.appendChild(style);
    }
    
    var marquees = document.getElementsByTagName('marquee');
    
    for (var i = marquees.length - 1; i >= 0; i--) {
        var marquee = marquees[i];
        var marquee_classes = marquee.className;
        var content = document.createElement('div');
        content.innerHTML = marquee.innerHTML;
        content.classList.add('__marquee-content' + i);
        content.className += ' ' + marquee_classes;
        marquee.parentNode.replaceChild(content, marquee);

        var container = document.createElement('div');
        container.classList.add('__marquee-container');
        content.parentNode.insertBefore(container, content);
        container.appendChild(content);

        var scrollamount = marquee.getAttribute('scrollamount') || 6;
        var duration = (content.clientWidth + container.clientWidth) / (15 * scrollamount);
        var direction = marquee.getAttribute('direction') || 'left';
        var start = direction == 'right'? -100 : 100;
        var end = direction == 'right'? 100 : -100;

        style.innerHTML += `
            @keyframes __marquee${i} {
                0% { left: ${start}%; }
                100% { left: ${end}%; }
            }

            .__marquee-content${i} {
                position: relative;
                display: inline-block;
                animation: __marquee${i} ${duration}s linear infinite;
            }
        `;
        document.head.appendChild(style);
    }
})();