require('./bootstrap');

var targetPostBodyBlank = true //是否开启文章内容页a标签新窗口打开

/*****开关a标签是否在新窗口页打开*******/
function targetSwitch() {
    if (targetPostBodyBlank) {
        $(".post-body a").attr('target', '_blank')
    } else {
        $(".post-body a").attr('target', '_self')
    }
}

$(function () {
    targetSwitch()
    /************** 头部搜索 ***************/
    var searchTimer = false;
    $(".searchInput").focus(function (v) {
        $(this).parent().addClass("focus")
    })
    $(".searchInput").blur(function (v) {
        $(this).parent().removeClass("focus")
        $(".results").fadeOut("slow");
    })
    $(".searchInput").on("input", function (v) {
        if (searchTimer) {
            clearTimeout(searchTimer)
            searchTimer = false;
        }
        searchTimer = setTimeout(() => {
            q = $(this).val()
            $.ajax({
                url: "/search?q=" + q,
                method: "get",
                success: function (data) {
                    var h = "";
                    if (data.length == 0) {
                        h = '<div class="message empty"><div class="header">结果为空</div><div class="description">搜索结果为空！</div></div>'
                    } else {
                        for (let i = 0; i < data.length; i++) {
                            h += ' <a class="result" href="' + data[i].url + '"><div class="image">\n' +
                                '<img src="' + data[i].avatar + '"></div><div class="content">\n' +
                                '<div class="title">' + data[i].title + '</div>\n' +
                                '<div class="description">' + data[i].excerpt + '</div>' +
                                '</div></a>'
                        }
                    }
                    console.log(h)
                    h += '<a href="/search/list?q=' + q + '" class="action"><i class="fa fa-search icon"></i>当前列表仅搜加精，更多请搜全站</a>'
                    $(".results").html(h)
                    $(".results").fadeIn("slow");
                }
            })
        }, 200)
    })


    /************************流星雨特效*************************/
        // 1.1 设置canvas元素的宽高与浏览器一样
    var can = document.getElementById("rain");
// 1.2 获取浏览器宽高
    var w = window.innerWidth;
    var h = window.innerHeight;
// 1.3 给canvas元素设置宽高
    can.width = w
    can.height = h
// 1.4 当窗口大小发生变化的时候自动再调整canvas的宽高
    window.onresize = function() {
        w = window.innerWidth
        h = window.innerHeight
        can.width = w
        can.height = h
    }
// 2 如何用canvas绘制图形 画布(卷轴 -> 宣纸)
    var canContent = can.getContext("2d") //拿到画画的宣纸

    function Rain() {} //生成雨滴的封装函数

//随机函数,生成x和y的坐标
    function random(min, max) {
        return Math.random() * (max - min) + min
    }
    Rain.prototype = {
        init: function() {
            this.x = random(0, w) //雨滴初始的x坐标
            this.y = 0 //雨滴初始的y坐标
            this.v = random(4, 5) //下落加速度
            this.h = random(0.8 * h, 0.9 * h) //雨滴下落的地面
            this.r = 1//初始半径
            this.vr = random(0.4, 0.6) //半径增长率
            this.a = 1//初始透明度
            this.va = 0.96 // 透明度变化系数
        },
        draw: function() {
            if (this.y < this.h) {
                canContent.fillStyle = "#33ffff" //拿一只画实心图形的红色的笔
                canContent.fillRect(this.x, this.y, 2, 10) // 画一个实心的矩形
            } else {
                canContent.strokeStyle = "rgba(51,255,255," + this.a + ")"
                canContent.beginPath() //重新拿起笔
                canContent.arc(this.x, this.y, this.r, 0, Math.PI * 2)
                canContent.stroke();
            }

        },
        move: function() {
            if (this.y < this.h) {
                this.y += this.v
            } else {
                if (this.a > 0.02) {
                    this.r += this.vr
                    if(this.r > 50){
                        this.a *= this.va
                    }
                } else {
                    this.init()
                }
            }
            this.draw()
        }
    }

//复用性
    var rainArray = []

    function createRain() {
        var rain = new Rain()
        rain.init() //基本配置
        rain.draw()
        rainArray.push(rain)
    }
    createRain()
    for (var i = 0; i < 30; i++) {
        setTimeout(createRain, 200 * i)
    }

    function moveRain() {
        canContent.fillStyle = "rgba(0, 0, 0, 0.05)"
        canContent.fillRect(0, 0, w, h)
        for (var k = 0; k < rainArray.length; k++) {
            rainArray[k].move();
        }
    }
    function run(){
        moveRain()
        setTimeout(run, 100 / 60)
    }
    run()
    setInterval(moveRain, 1000 / 60) //所有的计算和渲染必须在16ms内完成
})



