// ==UserScript==
// @name         灰机汉化 滚动浏览
// @namespace    http://weibo.com/unluckyninja
// @version      1.0
// @description  显示模式切换按钮，点击后可切换cocos2d播放器为纯图片浏览
// @author       UnluckyNinja
// @include      http://smp*.yoedge.com/smp-app/*
// @require      https://greasyfork.org/scripts/2199-waitforkeyelements/code/waitForKeyElements.js?version=6349
// @require      https://code.jquery.com/jquery-3.2.1.min.js
// @require      https://cdn.jsdelivr.net/gh/eisbehr-/jquery.lazy@1.7.6/jquery.lazy.min.js
// @grant        GM_addStyle
// @grant        GM_setValue
// @grant        GM_getValue
// @downloadURL none
// ==/UserScript==

(function() {
    'use strict';
    // Your code here...
    var button = '<div id="scroll-button" style="position: fixed;top: 5px;right:5px;z-index:1000;">' +
            '<div class="settings-button" style="height:auto; padding: 2px;line-height: 1.3em">' +
            '<div id="enable-scrolling" class="tool-item" style="text-align: center;width:auto;">滚动浏览</div>' +
            '<hr>' +
            '<div id="image-width-drop" class="tool-item" style="text-align: center;width:auto">▼</div>' +
            '</div>' +
            '<div id="width-setting" class="tool-container" style="margin-top: 10px;padding: 2px;display:none;">' +
                '<label for="image-width" style="color: #111111;">宽度</label>' +
                '<input id="image-width" class="tool-item" type="number" placeholder="1080" min=480 max=4096 style="box-sizing: border-box;width: 100%;">' +
                '<div class="arrow" style="border-color: transparent transparent #E9E5E5 transparent;margin: auto;top: -14px;left: 0;right: 0;"></div>' +
            '</div>' +
        '</div>';
    GM_addStyle("input[type=number]::-webkit-inner-spin-button, " +
                "input[type=number]::-webkit-outer-spin-button { " +
                "  -webkit-appearance: none; " +
                "}");
    function buildImages(){
        var width = GM_getValue('imageWidth', 1080);
        var htmlList = '<div id="image-list" style="margin:0 auto;padding:0;width:fit-content;position:absolute;top:5px;left:0;right:0;display: none"></div>';
        var htmlImage = '<img class="lazy" style="margin:0;padding:0;display:block;width:'+width+'px;min-height: 200px;" data-src="" />';
        var list = $(htmlList);
        var imageTemplate = $(htmlImage);
        var pages = smp.config.pages.page;
        var orders = smp.config.pages.order;
        var len = orders.length;
        var order = null;
        var url = null;
        for (var i = 0; i < len; i++) {
            order = orders[i];
            url = pages[order];
            list.append(imageTemplate.clone(true).attr('data-src', url));
            list.append('<p style="margin-top: 5px; margin-bottom: 15px; color: white; text-align: center;">'+(i+1)+'</p>');
        }
        list.insertAfter('#Cocos2dGameContainer');
        $(function() {
            $('.lazy').Lazy();
        });
    }
    // 准备按钮
    var showButton = function(){
        var target = $('div#toolbar');
        if(!target.length){
            return;
        }
        $(button).appendTo(target);
        $('#enable-scrolling').click(function(){
            if(!$('#image-list').length){
                buildImages();
            }
            $('#gameCanvas').toggle();
            $('#image-list').toggle();
        });
        // 显示宽度输入框
        $('#image-width-drop').click(function(){
            $('#width-setting').show();
            $('#image-width').attr('placeholder',GM_getValue('imageWidth', 1080)).focus();
        });
        // 失去焦点时自动切换宽度 保存数值
        $('#image-width').blur(function(){
            $('#width-setting').hide();
            var value = $('#image-width').val();
            if(!value){
                return;
            }
            value = Math.min(Math.max(parseInt(value), 480), 4096);
            $('#image-list img').css('width', value);
            GM_setValue('imageWidth', value);
            $('#image-width').val('');
        });
    };
    waitForKeyElements ("div#normal-button", showButton);
})();