/* global Colors */
var TileDefaultConfig = {
    tileDeferred: 0,
    size: "medium",
    cover: "",
    coverPosition: "center",
    effect: "",
    effectInterval: 3000,
    effectDuration: 500,
    target: null,
    canTransform: true,
    onClick: () => {},
    onTileCreate: () => {},
};

var METRO_THROWS = true;
var GRID_GAP = 5;

if(typeof isekai == 'undefined'){
    var isekai = {};
}

isekai.tile = {};

isekai.tile.setup = function (options) {
    TileDefaultConfig = jQuery.extend({}, TileDefaultConfig, options);
};

isekai.tile.init = function () {
    
};

(function($){
    function rand(min, max) { // min and max included 
        return Math.floor(Math.random() * (max - min + 1) + min)
    }

    var Utils = {
        isValue: function(val){
            return val !== undefined && val !== null && val !== "";
        },

        isUrl: function (val) {
            /* eslint-disable-next-line */
            return /^(\.\/|\.\.\/|ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@\-\/]))?/.test(val);
        },
    
        isTag: function(val){
            /* eslint-disable-next-line */
            return /^<\/?[\w\s="/.':;#-\/\?]+>/gi.test(val);
        },

        isType: function(o, t){
            if (!Utils.isValue(o)) {
                return false;
            }
    
            if (typeof o === t) {
                return o;
            }
    
            if (Utils.isTag(o) || Utils.isUrl(o)) {
                return false;
            }
    
            if (typeof window[o] === t) {
                return window[o];
            }
    
            if (typeof o === 'string' && o.indexOf(".") === -1) {
                return false;
            }
    
            if (typeof o === 'string' && o.indexOf("/") !== -1) {
                return false;
            }
    
            if (typeof o === 'string' && o.indexOf(" ") !== -1) {
                return false;
            }
    
            if (typeof o === 'string' && o.indexOf("(") !== -1) {
                return false;
            }
    
            if (typeof o === 'string' && o.indexOf("[") !== -1) {
                return false;
            }
    
            if (typeof o === "number" && t.toLowerCase() !== "number") {
                return false;
            }
    
            var ns = o.split(".");
            var i, context = window;
    
            for(i = 0; i < ns.length; i++) {
                context = context[ns[i]];
            }
    
            return typeof context === t ? context : false;
        },

        isFunc: function(f){
            return Utils.isType(f, 'function');
        },

        /**
         *
         * @param {TouchEvent|Event|MouseEvent} e
         * @returns {{x: (*), y: (*)}}
         */
        pageXY: function(e){
            return {
                x: e.changedTouches ? e.changedTouches[0].pageX : e.pageX,
                y: e.changedTouches ? e.changedTouches[0].pageY : e.pageY
            };
        },

        isRightMouse: function(e){
            return "which" in e ? e.which === 3 : "button" in e ? e.button === 2 : undefined;
        },

        func: function(f){
            /* jshint -W054 */
            return new Function("a", f);
        },

        exec: function(f, args, context){
            var result;
            if (f === undefined || f === null) {return false;}
            var func = Utils.isFunc(f);
    
            if (func === false) {
                func = Utils.func(f);
            }
    
            try {
                result = func.apply(context, args);
            } catch (err) {
                result = null;
                if (METRO_THROWS === true) {
                    throw err;
                }
            }
            return result;
        },
    };

    var FrameAnimation = {
        duration: 100,
        func: "linear",
    
        switch: function(current, next){
            current.hide();
            next.css({top: 0, left: 0}).show();
        },
    
        slideUp: function(current, next, duration, func){
            var h = current.parent().outerHeight(true);
            if (duration === undefined) {duration = this.duration;}
            if (func === undefined) {func = this.func;}
    
            current
                .css("z-index", 1)
                .animate({
                    draw: {
                        top: -h,
                        opacity: 0
                    },
                    dur: duration,
                    ease: func
                });
    
            next
                .css({
                    top: h,
                    left: 0,
                    zIndex: 2
                })
                .animate({
                    draw: {
                        top: 0,
                        opacity: 1
                    },
                    dur: duration,
                    ease: func
                });
        },
    
        slideDown: function(current, next, duration, func){
            var h = current.parent().outerHeight(true);
            if (duration === undefined) {duration = this.duration;}
            if (func === undefined) {func = this.func;}
    
            current
                .css("z-index", 1)
                .animate({
                    draw: {
                        top: h,
                        opacity: 0
                    },
                    dur: duration,
                    ease: func
                });
    
            next
                .css({
                    left: 0,
                    top: -h,
                    zIndex: 2
                })
                .animate({
                    draw: {
                        top: 0,
                        opacity: 1
                    },
                    dur: duration,
                    ease: func
                });
        },
    
        slideLeft: function(current, next, duration, func){
            var w = current.parent().outerWidth(true);
            if (duration === undefined) {duration = this.duration;}
            if (func === undefined) {func = this.func;}
            current
                .css("z-index", 1)
                .animate({
                    draw: {
                        left: -w,
                        opacity: 0
                    },
                    dur: duration,
                    ease: func
                });
    
            next
                .css({
                    left: w,
                    zIndex: 2
                })
                .animate({
                    draw: {
                        left: 0,
                        opacity: 1
                    },
                    dur: duration,
                    ease: func
                });
        },
    
        slideRight: function(current, next, duration, func){
            var w = current.parent().outerWidth(true);
            if (duration === undefined) {duration = this.duration;}
            if (func === undefined) {func = this.func;}
    
            current
                .css("z-index", 1)
                .animate({
                    draw: {
                        left:  w,
                        opacity: 0
                    },
                    dur: duration,
                    ease: func
                });
    
            next
                .css({
                    left: -w,
                    zIndex: 2
                })
                .animate({
                    draw: {
                        left: 0,
                        opacity: 1
                    },
                    dur: duration,
                    ease: func
                });
        },
    
        fade: function(current, next, duration){
            if (duration === undefined) {duration = this.duration;}
    
            current
                .animate({
                    draw: {
                        opacity: 0
                    },
                    dur: duration
                });
    
            next
                .css({
                    top: 0,
                    left: 0,
                    opacity: 0
                })
                .animate({
                    draw: {
                        opacity: 1
                    },
                    dur: duration
                });
        }
    };

    var Colors = {
        PALETTES: {
            ALL: "colorList",
            METRO: "colorListMetro",
            STANDARD: "colorListStandard"
        },

        colorListMetro: {
            lime: '#a4c400',
            green: '#60a917',
            emerald: '#008a00',
            blue: '#00AFF0',
            teal: '#00aba9',
            cyan: '#1ba1e2',
            cobalt: '#0050ef',
            indigo: '#6a00ff',
            violet: '#aa00ff',
            pink: '#dc4fad',
            magenta: '#d80073',
            crimson: '#a20025',
            red: '#CE352C',
            orange: '#fa6800',
            amber: '#f0a30a',
            yellow: '#fff000',
            brown: '#825a2c',
            olive: '#6d8764',
            steel: '#647687',
            mauve: '#76608a',
            taupe: '#87794e'
        },
    
        colorListStandard: {
            aliceBlue: "#f0f8ff",
            antiqueWhite: "#faebd7",
            aqua: "#00ffff",
            aquamarine: "#7fffd4",
            azure: "#f0ffff",
            beige: "#f5f5dc",
            bisque: "#ffe4c4",
            black: "#000000",
            blanchedAlmond: "#ffebcd",
            blue: "#0000ff",
            blueViolet: "#8a2be2",
            brown: "#a52a2a",
            burlyWood: "#deb887",
            cadetBlue: "#5f9ea0",
            chartreuse: "#7fff00",
            chocolate: "#d2691e",
            coral: "#ff7f50",
            cornflowerBlue: "#6495ed",
            cornsilk: "#fff8dc",
            crimson: "#dc143c",
            cyan: "#00ffff",
            darkBlue: "#00008b",
            darkCyan: "#008b8b",
            darkGoldenRod: "#b8860b",
            darkGray: "#a9a9a9",
            darkGreen: "#006400",
            darkKhaki: "#bdb76b",
            darkMagenta: "#8b008b",
            darkOliveGreen: "#556b2f",
            darkOrange: "#ff8c00",
            darkOrchid: "#9932cc",
            darkRed: "#8b0000",
            darkSalmon: "#e9967a",
            darkSeaGreen: "#8fbc8f",
            darkSlateBlue: "#483d8b",
            darkSlateGray: "#2f4f4f",
            darkTurquoise: "#00ced1",
            darkViolet: "#9400d3",
            deepPink: "#ff1493",
            deepSkyBlue: "#00bfff",
            dimGray: "#696969",
            dodgerBlue: "#1e90ff",
            fireBrick: "#b22222",
            floralWhite: "#fffaf0",
            forestGreen: "#228b22",
            fuchsia: "#ff00ff",
            gainsboro: "#DCDCDC",
            ghostWhite: "#F8F8FF",
            gold: "#ffd700",
            goldenRod: "#daa520",
            gray: "#808080",
            green: "#008000",
            greenYellow: "#adff2f",
            honeyDew: "#f0fff0",
            hotPink: "#ff69b4",
            indianRed: "#cd5c5c",
            indigo: "#4b0082",
            ivory: "#fffff0",
            khaki: "#f0e68c",
            lavender: "#e6e6fa",
            lavenderBlush: "#fff0f5",
            lawnGreen: "#7cfc00",
            lemonChiffon: "#fffacd",
            lightBlue: "#add8e6",
            lightCoral: "#f08080",
            lightCyan: "#e0ffff",
            lightGoldenRodYellow: "#fafad2",
            lightGray: "#d3d3d3",
            lightGreen: "#90ee90",
            lightPink: "#ffb6c1",
            lightSalmon: "#ffa07a",
            lightSeaGreen: "#20b2aa",
            lightSkyBlue: "#87cefa",
            lightSlateGray: "#778899",
            lightSteelBlue: "#b0c4de",
            lightYellow: "#ffffe0",
            lime: "#00ff00",
            limeGreen: "#32dc32",
            linen: "#faf0e6",
            magenta: "#ff00ff",
            maroon: "#800000",
            mediumAquaMarine: "#66cdaa",
            mediumBlue: "#0000cd",
            mediumOrchid: "#ba55d3",
            mediumPurple: "#9370db",
            mediumSeaGreen: "#3cb371",
            mediumSlateBlue: "#7b68ee",
            mediumSpringGreen: "#00fa9a",
            mediumTurquoise: "#48d1cc",
            mediumVioletRed: "#c71585",
            midnightBlue: "#191970",
            mintCream: "#f5fffa",
            mistyRose: "#ffe4e1",
            moccasin: "#ffe4b5",
            navajoWhite: "#ffdead",
            navy: "#000080",
            oldLace: "#fdd5e6",
            olive: "#808000",
            oliveDrab: "#6b8e23",
            orange: "#ffa500",
            orangeRed: "#ff4500",
            orchid: "#da70d6",
            paleGoldenRod: "#eee8aa",
            paleGreen: "#98fb98",
            paleTurquoise: "#afeeee",
            paleVioletRed: "#db7093",
            papayaWhip: "#ffefd5",
            peachPuff: "#ffdab9",
            peru: "#cd853f",
            pink: "#ffc0cb",
            plum: "#dda0dd",
            powderBlue: "#b0e0e6",
            purple: "#800080",
            rebeccaPurple: "#663399",
            red: "#ff0000",
            rosyBrown: "#bc8f8f",
            royalBlue: "#4169e1",
            saddleBrown: "#8b4513",
            salmon: "#fa8072",
            sandyBrown: "#f4a460",
            seaGreen: "#2e8b57",
            seaShell: "#fff5ee",
            sienna: "#a0522d",
            silver: "#c0c0c0",
            slyBlue: "#87ceeb",
            slateBlue: "#6a5acd",
            slateGray: "#708090",
            snow: "#fffafa",
            springGreen: "#00ff7f",
            steelBlue: "#4682b4",
            tan: "#d2b48c",
            teal: "#008080",
            thistle: "#d8bfd8",
            tomato: "#ff6347",
            turquoise: "#40e0d0",
            violet: "#ee82ee",
            wheat: "#f5deb3",
            white: "#ffffff",
            whiteSmoke: "#f5f5f5",
            yellow: "#ffff00",
            yellowGreen: "#9acd32"
        },
    
        colorList: {},

        colors: function(palette){
            var c = [];
            palette = palette || this.PALETTES.ALL;
            $.each(this[palette], function(){
                c.push(this);
            });
            return c;
        },
    }

    function Tile(options, element){
        this.init = function(options, element) {
            this.effectInterval = false;
            this.images = [];
            this.slides = [];
            this.currentSlide = -1;
            this.options = $.extend({}, TileDefaultConfig, options);
            this.element = element;
            this.hasIcon = false;
            this.hasBranding = false;

            this._fixSizeCallback = this.resize.bind(this);

            this._create();
        };
    
        this._create = function(){
            this._createTile();
            this._createEvents();
    
            this.element.trigger("tilecreate");
        };
    
        this._createTile = function(){
            function switchImage(el, img_src, i){
                setTimeout(function(){
                    el.fadeOut(500, function(){
                        el.css("background-image", "url(" + img_src + ")");
                        el.fadeIn();
                    });
                }, i * 300);
            }
    
            var that = this, element = this.element, o = this.options;
            var slides = element.find(".slide");
            var slides2 = element.find(".slide-front, .slide-back");
    
            element.addClass("tile-" + o.size);

            if(element.find('.icon').length > 0){
                this.hasIcon = true;
            }

            if(element.find('.branding-bar')){
                this.hasBranding = true;
            }
    
            if (o.effect.indexOf("hover-") > -1) {
                element.addClass("effect-" + o.effect);
                $.each(slides2, function(){
                    var slide = $(this);
    
                    if (slide.data("cover") !== undefined) {
                        that._setCover(slide, slide.data("cover"), slide.data("cover-position"));
                    }
                })
            }
    
            if (o.effect.indexOf("animate-") > -1 && slides.length > 1) {
                $.each(slides, function(i){
                    var slide = $(this);
    
                    that.slides.push(this);
    
                    if (slide.data("cover") !== undefined) {
                        this._setCover(slide, slide.data("cover"), slide.data("cover-position"));
                    }
    
                    if (i > 0) {
                        if (["animate-slide-up", "animate-slide-down"].indexOf(o.effect) > -1) slide.css("top", "100%");
                        if (["animate-slide-left", "animate-slide-right"].indexOf(o.effect) > -1) slide.css("left", "100%");
                        if (["animate-fade"].indexOf(o.effect) > -1) slide.css("opacity", 0);
                    }
                });
    
                this.currentSlide = 0;
    
                this._runEffects();
            }
    
            if (o.cover !== "") {
                this._setCover(element, o.cover);
            }
    
            if (o.effect === "image-set") {
                element.addClass("image-set");
    
                $.each(element.children("img"), function(){
                    var imgElem = document.createElement('img');
                    imgElem.src = this.src;
                    imgElem.srcset = this.srcset;
                    imgElem.alt = this.alt;
                    that.images.push(imgElem);
                    $(this).remove();
                });
    
                var temp = this.images.slice();
    
                for(var i = 0; i < 5; i++) {
                    var rnd_index = rand(0, temp.length - 1);
                    var div = $("<div>").addClass("img -js-img-"+i).css("background-image", "url("+temp[rnd_index].src+")");
                    element.prepend(div);
                    if (temp.length > 1) {
                        temp.splice(rnd_index, 1);
                    }
                }
    
                var a = [0, 1, 4, 3, 2];
    
                setInterval(function(){
                    var temp = that.images.slice();
                    var colors = Colors.colors(Colors.PALETTES.ALL), bg;
                    bg = colors[rand(0, colors.length - 1)];
    
                    element.css("background-color", bg);
    
                    for(var i = 0; i < a.length; i++) {
                        var rnd_index = rand(0, temp.length - 1);
                        var div = element.find(".-js-img-"+a[i]);
                        switchImage(div, temp[rnd_index].src, i);
                        if (temp.length > 1) {
                            temp.splice(rnd_index, 1);
                        }
                    }
    
                    a = a.reverse();
                }, 5000);
            }
        };
    
        this._runEffects = function(){
            var o = this.options;
    
            if (this.effectInterval === false) this.effectInterval = setInterval(function(){
                var current, next;
    
                current = $(this.slides[this.currentSlide]);
    
                this.currentSlide++;
                if (this.currentSlide === this.slides.length) {
                    this.currentSlide = 0;
                }
    
                next = this.slides[this.currentSlide];
    
                if (o.effect === "animate-slide-up") FrameAnimation.slideUp($(current), $(next), o.effectDuration);
                if (o.effect === "animate-slide-down") FrameAnimation.slideDown($(current), $(next), o.effectDuration);
                if (o.effect === "animate-slide-left") FrameAnimation.slideLeft($(current), $(next), o.effectDuration);
                if (o.effect === "animate-slide-right") FrameAnimation.slideRight($(current), $(next), o.effectDuration);
                if (o.effect === "animate-fade") FrameAnimation.fade($(current), $(next), o.effectDuration);
    
            }, o.effectInterval);
        };
    
        this._stopEffects = function(){
            clearInterval(this.effectInterval);
            this.effectInterval = false;
        };

        this.resize = function(){
            var ratio = 1;
            var padding = 0;
            var grid = this.element.parent('.tiles-grid');
            var gridWidth = 0;
            if(grid.length > 0){
                gridWidth = grid.width();
            }

            if(this.options.size == 'wide'){
                ratio = 0.5;
            }

            //修正长宽比
            var height = this.element.width() * ratio - padding;
            //this.element.height(height);

            if(this.hasIcon){
                var fontSize = height * 0.33;
                var iconDom = this.element.find('.icon');
                iconDom.css('font-size', fontSize + 'px');

                if(this.hasBranding){ //计算与标签的重叠
                    var iconBottom = (height + fontSize) / 2;

                    var brandingTop = height - this.element.find('.branding-bar').outerHeight();
                    var overlap = iconBottom - brandingTop + (height * 0.1);
                    if(overlap > 0){
                        iconDom.css('padding-bottom', overlap + 'px');
                    }
                }
            }
        }
    
        this._setCover = function(to, src, pos){
            if (!Utils.isValue(pos)) {
                pos = this.options.coverPosition;
            }
            to.css({
                backgroundImage: "url("+src+")",
                backgroundSize: "cover",
                backgroundRepeat: "no-repeat",
                backgroundPosition: pos
            });
        };
    
        this._createEvents = function(){
            var element = this.element, o = this.options;
    
            element.on('mousedown touchstart', function(e){
                var tile = $(this);
                var dim = {w: element.width(), h: element.height()};
                var X = Utils.pageXY(e).x - tile.offset().left,
                    Y = Utils.pageXY(e).y - tile.offset().top;
                var side;
    
                if (Utils.isRightMouse(e) === false) {
    
                    if (X < dim.w * 1 / 3 && (Y < dim.h * 1 / 2 || Y > dim.h * 1 / 2)) {
                        side = 'left';
                    } else if (X > dim.w * 2 / 3 && (Y < dim.h * 1 / 2 || Y > dim.h * 1 / 2)) {
                        side = 'right';
                    } else if (X > dim.w * 1 / 3 && X < dim.w * 2 / 3 && Y > dim.h / 2) {
                        side = 'bottom';
                    } else {
                        side = "top";
                    }
    
                    if (o.canTransform === true) tile.addClass("transform-" + side);
    
                    if (o.target !== null) {
                        setTimeout(function(){
                            document.location.href = o.target;
                        }, 100);
                    }
    
                    Utils.exec(o.onClick, [side], element[0]);
                    element.trigger("click", {
                        side: side
                    });
                }
            });
    
            element.on('mouseup touchend mouseleave', function(){
                $(this)
                    .removeClass("transform-left")
                    .removeClass("transform-right")
                    .removeClass("transform-top")
                    .removeClass("transform-bottom");
            });

            $(window).on('resize', this._fixSizeCallback);
            $(this._fixSizeCallback);
        };
    
        this.destroy = function(){
            var element = this.element;
    
            element.off('mousedown touchstart');
    
            element.off('mouseup touchend mouseleave');

            $(window).off('resize', this._fixSizeCallback);

            this._stopEffects();
        };

        this.init(options, element);
    };

    function getElementOptions(element){
        var options = {};
        $.each(element[0].attributes, function (index, attribute){
            if(attribute.name.startsWith('data-')){
                options[attribute.name.substr(5)] = attribute.value;
            }
        });

        return options;
    }

    $.fn.extend({
        tile: function(action, ...args){
            var result;
            this.each(function(){
                var element = $(this);
                if(element.attr('data-role') !== 'tile'){
                    throw new Error('This element isn\'t a tile element');
                }

                var tileObj = element.data('tile');
                if(action == 'init'){
                    if(tileObj){
                        throw new Error('Tile already inited.');
                    }

                    var options = args[0] || {};
                    options = $.extend({}, options, getElementOptions(element));
                    tileObj = new Tile(options, element);
                    element.data('tile', tileObj);
                } else {
                    if(!tileObj){
                        throw new Error('Tile not inited.');
                    }

                    if(!tileObj[action]){
                        throw new Error('Method: ' + action + ' not exists.');
                    }

                    result = tileObj[action].apply(tileObj, ...args);
                }
            });

            if(result == undefined){
                return this;
            } else {
                return result;
            }
        }
    });

    function resizeGrid(){
        $('.tiles-grid').each(function(){
            var dom = $(this);
            var width = dom.width();
            var gridSize = width / 4 - GRID_GAP;
            dom.css({
                gridTemplateColumns: 'repeat(4, ' + gridSize + 'px)',
                gridAutoRows: gridSize + 'px',
            });
        });
    }

    $('*[data-role="tile"]').tile('init');
    $(window).resize(resizeGrid);
    $(resizeGrid);

    function onCollapseDivChange(mutationsList){
        mutationsList.forEach((item) => {
            if(item.type == 'attributes' && item.attributeName == 'class'){
                $('*[data-role="tile"]').tile('resize');
                resizeGrid();
            }
        });
    }

    if($('body').hasClass('skin-minerva')){
        $('#mw-content-text .collapsible-block').each(function(){
            var dom = $(this);
            if(dom.find('*[data-role="tile"]').length > 0){ //存在tile，监听这个dom
                var observer = new MutationObserver(onCollapseDivChange);
                observer.observe(dom[0], {
                    attributes: true,
                });
            }
        });
    }
})(jQuery);