// ==UserScript==
// @name         Pitchfork Get Score On Scroll
// @namespace    http://www.lycos.fr
// @version      0.2
// @description  Directly show review score on global reviews page
// @author       You
// @match        *://pitchfork.com/reviews/albums/*
// @grant        none
// @downloadURL none
// ==/UserScript==

(function() {
    'use strict';

    var cssBlock = document.createElement('style');

    var cssContent = '' +
        '.cns-ads-stage { display: none !important; }' +
        '@keyframes loading { from {opacity: 1;} to {opacity: 0;} }' +
        '.grease-loading { animation: loading 1s infinite alternate ease; }' +
        '.grease-score { display: inline-block; position: absolute; left: 20px; top: 0; z-index: 10; color: #2B2B2B; background: rgba(255, 255, 255, 0.9); min-width: 42px; text-align: center; padding: 5px; border: 2px solid #2B2B2B; border-radius: 5px; font-size: 20px; font-weight: bold; opacity: 0; transition: 500ms ease; }' +
        '.grease-bnm .grease-score { border-color: #FF3530; color: #FF3530; }' +
        '';

    cssBlock.innerText = cssContent;

    document.head.appendChild(cssBlock); // Add CSS to Head

    function getScore(element, url) {

        var xhr = new XMLHttpRequest();

        xhr.addEventListener('readystatechange', function() {

            if (xhr.readyState == 4 && xhr.status == 200) {

                var rating = xhr.responseText.match(/\"display\_rating\"\:\"(\d{1,2}\.\d)\"/)[1];

                if (rating.match(/\.0$/)) {

                    rating = rating.replace(/\.0$/, '');
                }

                var score = document.createElement('span');

                score.classList.add('grease-score');

                score.innerText = rating;

                element.classList.remove('grease-loading');

                element.classList.add('grease-scored');

                if (element.querySelector('.meta .bnm')) {

                    element.classList.add('grease-bnm');

                }

                element.querySelector('a').appendChild(score);

                setTimeout(function() { score.style.opacity = '1'; }, 100);

            } // End of IF XHR State 4 responds 200

        }); // End of Event Listener ReadyStateChange

        xhr.open('GET', url, true);

        xhr.send();

    } // End of Function getScore

    function captureReviews() {

        var reviews = document.querySelectorAll('.review');

        var windowHeight = window.innerHeight;

        var offset = 100;

        for (var i = 0; i < reviews.length; i++) {

            if (!reviews[i].classList.contains('grease-added') && reviews[i].getBoundingClientRect().top <= (windowHeight - offset)) {

                reviews[i].classList.add('grease-added');

                //reviews[i].addEventListener('mouseover', function() {

                if (!reviews[i].classList.contains('grease-loading') && !reviews[i].classList.contains('grease-scored')) {

                    reviews[i].classList.add('grease-loading');

                    var url = reviews[i].querySelector('a').href;

                    getScore(reviews[i], url);

                } // End of If This Contains Class "grease-loading" && "grease-scored"

                //}); // End of Event Listener MouseOver

            } // End of If This Contains Class "grease-added" && Review in viewport

        } // End of Loop For Reviews

    } // End of Function captureReviews

    setInterval(captureReviews, 500);

})();