// ==UserScript==
// @name         Bangumi EpPopuVisualizer
// @namespace    http://bgm.tv/user/prevails
// @version      0.2.6.1
// @description  标注ep的讨论人气
// @author       "Donuts."
// @grant        GM_getValue
// @grant        GM_setValue
// @match        http://bgm.tv/subject/*
// @match        http://bgm.tv/
// @match        https://bgm.tv/subject/*
// @match        https://bgm.tv/
// @match        http://bangumi.tv/subject/*
// @match        http://bangumi.tv/
// @match        http://chii.in/subject/*
// @match        http://chii.in/
// @require      https://code.jquery.com/jquery-2.2.4.min.js
// @encoding     utf-8
// @downloadURL none
// ==/UserScript==

function noNeed(isRoot) {
    if (isRoot) {
        return $('a.load-epinfo').length === 0;
    } else {
        return ($('a.focus.chl.anime').length === 0 && $('a.focus.chl.real').length === 0) || $('a.load-epinfo').length === 0;
    }
}

function getMax(arr) {
    if (arr.length === 0) {
        return 0;
    }
    return arr.reduce(function (a, b) {return a > b ? a : b;});
}

function getValues($lis) {
    var ids = [];
    $lis.each(function () {
        var $a = $(this).find('a');
        var id = $a[0].id.replace("prg_", '');
        ids.push(id);
    });
    return ids.map(getEpValue);
}

function colorToRgbaX(color) {
    var r = parseInt('0x' + color.substr(1, 2));
    var g = parseInt('0x' + color.substr(3, 2));
    var b = parseInt('0x' + color.substr(5, 2));
    return `rgba(${r},${g},${b},X)`;
}

function getPixel($e, attr) {
    return parseInt($e.css(attr));
}

function histogram_getHeight($a) {
    return getPixel($a, 'height') + 2 +
        getPixel($a, 'padding-top') + getPixel($a, 'padding-bottom');
}

function getShowMethod(viewMode) {
    var $expA = $('a.load-epinfo:eq(0)');
    var bottomPx = $expA.css('margin-bottom');
    var rightPx = $expA.css('margin-right');
    switch(viewMode) {
        case 'default':
        var colorX = colorToRgbaX(GM_getValue("default_color"));
        return function ($lis, values) {
            var max = getMax(values);
            if (max < 20) {
                max += (20 - max) / 2;
            }
            var colors = values.map(default_getColor(colorX, max));
            $lis.each(function (index) {
                var $a = $('a', this);
                $a.append(`<div style="position:absolute;right:${rightPx};bottom:0;height:${bottomPx};width:80%;background:${colors[index]};"></div>`);
            });
        };
        /////////////////////////////
        case 'histogram':
        var color = GM_getValue("histogram_color");
        var height = histogram_getHeight($expA);
        return function ($lis, values) {
            var max = getMax(values);
            if (max < 20) {
                max += (20 - max) / 2;
            }
            var lengths = values.map(histogram_getLength(height, max));
            $lis.each(function (index) {
                var $a = $('a', this);
                $a.append(`<div style="position:absolute;right:0;bottom:${bottomPx};width:${rightPx};height:${lengths[index]}px;background:${color};"></div>`);
            });
        };
    }
}

function getEpValue(id) {
    var value = $(`#subject_prg_content > #prginfo_${id} small.na`).html();
    value = value.substring(2, value.length - 1);
    return parseInt(value);
}

function default_getColor(colorX, max) {
    return function (v) {
        return colorX.replace('X', v / max);
    };
}

function histogram_getLength(height, max) {
    return function (v) {
        return height * v / max;
    };
}

function init() {
    if (!GM_getValue('viewMode')) {
        GM_setValue('viewMode', "default");
    }
    if (!GM_getValue('default_color')) {
        GM_setValue('default_color', '#ff8040');
    }
    if (!GM_getValue('histogram_color')) {
        GM_setValue('histogram_color', '#f7bac0');
    }
}

var isControlPanelLoaded = false;

function addControlPanel() {
    $('#columnHomeB').append('<div id="ep_popu_visualizer_control_panel" style="padding-left:10px;"><a class="l epv_control_panel_switch" href="javascript:;">EpPopuVisualizer 设置</a></div>');
    var $cp = $('#ep_popu_visualizer_control_panel');
    var mode = GM_getValue('viewMode');
    function refreshColor() {
        $('#epv_color_pick input').val(GM_getValue(GM_getValue('viewMode') + '_color'));
    }
    $('.epv_control_panel_switch').click(function () {
        if (!isControlPanelLoaded) {
            var $content = $(
`<div class="epv_content" style="margin-top:10px;display:none;">
    <div id="epv_mode_select">模式切换: 
        <input type="radio" name="viewMode" value="default" ${(mode === 'default' ? 'checked' : '')} />渐变色 (默认) 
        <input type="radio" name="viewMode" value="histogram" ${(mode === 'histogram' ? 'checked' : '')} />条形图 
    </div>
    <div id="epv_color_pick">颜色选择: 
        <input type="text" id="epv_color_text_input"  value="${GM_getValue(mode + '_color')}"> 
        <input id="epv_color_input" type="color" value="${GM_getValue(mode + '_color')}" style="height:1.3em;">
    </div>
</div>`
            );
            $cp.append($content);
            $('#epv_mode_select input').click(function () {
                GM_setValue('viewMode', $(this).val());
                refreshColor();
            });
            $('#epv_color_pick input').change(function () {
                GM_setValue(GM_getValue('viewMode') + "_color", $(this).val());
                refreshColor();
            });
            isControlPanelLoaded = true;
        }
        $(".epv_content", $cp).slideToggle('fast');
    });
}

function main() {
    init();
    var isRoot = location.pathname === '/';
    if (isRoot) {
        addControlPanel();
    }
    if (noNeed(isRoot)) {
        return;
    }
    var $uls;
    if (isRoot) {
        $uls = $('.infoWrapper_tv .prg_list');
    } else {
        $uls = $('.prg_list');
    }
    var show = getShowMethod(GM_getValue('viewMode'));
    $uls.each(function (index, element) {
        setTimeout(function () {
            var $lis = $('li:not(.subtitle)', element);
            var values = getValues($lis);
            show($lis, values);
        }, 150 * index + 500);
    });
}

main();