// JavaScript Document

var data = {
    win_w: 840,
    win_h: 1000
}

var init = function () {
    var bannerH = (data.win_h),
		Top = 129,
		timeTop = (bannerH / 2) - 105;
    $('#cybj').css('height', (data.win_h) + 'px');
    $('#canvas').css('top', Top + 'px');

    var index = 0,
        timer1 = null;
}

$(document).ready(function () {
    init();
    new alan.scrollAnimate();
    ind.canvas();
    ind.picCanvas();
});
window.onresize = function () {
    data.win_w = 840;
    data.win_h = 1140;
    init();
}
var ind = {

    canvas: function () {
        var canvas = document.getElementById('canvas');
        if (canvas) {
            var ctx = canvas.getContext('2d'),
				cicle1 = new Circle(),
				cicle2 = new Circle(),
				mouse = thisMouse(canvas),
				position = { x: 0, y: 0 },
				click = { x: 0, y: 0 };
            var index = 0,
				thisClick = null,
				thisNum = 0,
				done = false;
            var mr = 0.1;
            var mrv = 0;
            var moveV = 0.002;
            var c = mCircle(4, canvas.width / 2, canvas.height / 2, cicle1.r);

            // console.log(canvas.width);
            // console.log(canvas.height);
            // console.log(cicle1.r);

            cicle1.x0 = canvas.width / 2;
            cicle1.y0 = canvas.height / 2;
            cicle2.x0 = canvas.width / 2;
            cicle2.y0 = canvas.height / 2;
            cicle2.color = 'rgba(146,157,193,0.4)';
            cicle2.g = 3.9;
            cicle1.g = 1.9;
            canvas.addEventListener('mouseover', function () {
                moveV = 0;
            });
            canvas.addEventListener('mouseout', function () {
                moveV = 0.002;
            });
            canvas.addEventListener('click', function () {
                done = false;
                cicle1.g = thisClick.angle;

            });

            $("#bloc-title li").hover(function () {
                // console.log(111);
                _this = $(this).index();
                // $(this).addClass("cur")
                timeSlider(_this);
                titleSlider(_this);
                moveV = 0;
            }, function () {
                moveV = 0.002;
                // $(this).removeClass("cur");
                timeSlider(_this);
                titleSlider(_this);
            });

            (function drawFrame() {
                window.requestAnimationFrame(drawFrame, canvas);
                ctx.clearRect(0, 0, canvas.width, canvas.height);
                position.x = cicle1.x0 + Math.sin(Math.PI * cicle1.g) * cicle1.r;
                position.y = cicle1.y0 + Math.cos(Math.PI * cicle1.g) * cicle1.r;




                cicle1.g += moveV;

                if (cicle1.g >= 2) {
                    cicle1.g = 0;
                }
                if (moveV > 0) {
                    done = false;
                }
                for (key in c) {
                    c[key].x = mouse.x;
                    c[key].y = mouse.y - 0;
                    if (c[key].x0.toFixed(1) == position.y.toFixed(1) && c[key].y0.toFixed(1) == position.x.toFixed(1)) {
                        c[index].fcolor = 'rgba(171,206,3,0)';
                        c[key].fcolor = 'rgba(171,206,3,0)';
                        index = key;
                        thisNum = key;
                        if (!done) {
                            picSlider(thisNum);
                            timeSlider(thisNum);
                            titleSlider(thisNum);
                            done = true;
                        }
                    }
                    if (c[key].ifon) {
                        if (c[key].r < 41) {
                            c[key].r++;
                        }
                        thisClick = c[key];
                        thisNum = key;
                    } else {
                        if (c[key].r >= 41) {
                            c[key].r -= c[key].mrv;
                        }
                    }
                    if (c[index].r <= 41) {
                        c[index].r += c[index].mrv;
                    }
                    c[key].draw(ctx);
                }
                cicle2.draw(ctx);
                cicle1.draw(ctx);
            } ());
        }

    },
    picCanvas: function () {
        var index = $("#index");
        if (index.length > 0) {
            var canvas = [];
            var index = 0;
            // var num=1;
            var num = 0;
            var timer = null;
            var _this = 0;
            for (var i = 1; i < 4; i++) {
                var thisCanvas = {};
                thisCanvas.id = document.getElementById("canvas" + i + "");
                thisCanvas.ctx = thisCanvas.id.getContext('2d');
                thisCanvas.circle = new Circle();
                thisCanvas.circle.x0 = thisCanvas.id.width / 2;
                thisCanvas.circle.y0 = thisCanvas.id.height / 2;
                thisCanvas.circle.color = '#f88c00';
                thisCanvas.circle.r = 51;
                thisCanvas.circle.g = 1.5;
                thisCanvas.v = 0;
                canvas.push(thisCanvas);
            }
            for (var n = 1; n < 5; n++) {
                circleShow(n);
            }
            start(num);
            $('.picChoose .pr').on('click', function () {
                clearInterval(timer);
                canvas[index].circle.color = 'rgba(171,206,3,0)';
                n = parseInt($(this).attr('data-num'));
                // console.log(n);
                $('.nextPic1').eq(n).addClass('thisPic').siblings().removeClass('thisPic');
                start(n + 1);
            });

            function start(n) {
                canvas[0].circle.g = 1.500;
                canvas[1].circle.g = 1.500;
                canvas[2].circle.g = 1.500;
                canvas[3].circle.g = 1.500;
                $('.nextPic1').eq(n - 1).addClass('thisPic').siblings().removeClass('thisPic');
                canvas[n - 1].circle.color = '#f88c00';
                canvas[n - 1].circle.g = 1.505;
                index = n - 1;
                n++;
                num = n;
                if (n > 4) {
                    num = 1;
                }
                timer = setTimeout(function () {
                    start(num);
                }, 20);
            }
            function circleShow(index) {
                var mycanvas = canvas[index - 1].id,
					ctx = canvas[index - 1].ctx,
					circle = canvas[index - 1].circle,
					v = canvas[index - 1].v;
                (function drawFrame() {
                    window.requestAnimationFrame(drawFrame, mycanvas);
                    ctx.clearRect(0, 0, mycanvas.width, mycanvas.height);
                    circle.g += v;
                    if (circle.g >= 2) {
                        circle.g = 0;
                    }
                    if (circle.g > 1.49 && circle.g <= 1.5) {
                        v = 0;
                    } else {
                        v = 0.005;
                    }
                    circle.draw2(ctx);
                } ());
            }
        }
    }
}


function Circle() {
    this.x0 = 0;
    this.y0 = 0;
    this.x = 0;
    this.y = 0;
    this.r = 382;
    this.g = 0;
    this.mrv = 0.1;
    this.angle = 0;
    this.lineWidth = 3;
    this.color = '#f88c00';
    this.fcolor = 'rgba(255,255,255,0)';
    this.ifon = false;

}

Circle.prototype.draw = function (context) {
    context.save();
    context.translate(this.x0, this.y0);
    context.strokeStyle = this.color;
    context.fillStyle = this.fcolor;
    context.lineWidth = this.lineWidth;
    context.beginPath();
    context.arc(0, 0, this.r, Math.PI * 1.9, Math.PI * this.g);
    if (context.isPointInPath(this.x, this.y)) {
        this.ifon = true;
    } else {
        this.ifon = false;
    }
    context.stroke();
    context.fill();
    context.restore();

}
Circle.prototype.draw2 = function (context) {
    context.save();
    context.translate(this.x0, this.y0);
    context.strokeStyle = this.color;
    context.fillStyle = this.fcolor;
    context.lineWidth = this.lineWidth;
    context.beginPath();
    context.arc(0, 0, this.r, Math.PI * 1.9, Math.PI * this.g);
    if (context.isPointInPath(this.x, this.y)) {
        this.ifon = true;
    } else {
        this.ifon = false;
    }
    context.stroke();
    context.fill();
    context.restore();

}



function mCircle(num, x, y, r) {
    var c = [];
    var angle = 1.9;
    for (var i = 0; i < num; i++) {
        var cl = new Circle();
        cl.x0 = x + Math.cos(Math.PI * angle) * r;
        cl.y0 = y + Math.sin(Math.PI * angle) * r;
        cl.r = 41;
        cl.lineWidth = 1;
        cl.g = 3.9;
        cl.angle = angle;
        cl.color = 'rgba(2,56,134,0)';
        c.push(cl);
        angle += 0.4;
        if (angle == 2.3) {
            angle = 0.3;
        }
    }
    // console.log(c);
    return c;

}

function picSlider(n) {
    $('.nextPic').eq(n).addClass('thisPic').siblings().removeClass('thisPic');
}

function timeSlider(n) {
    $('#bloc-qh li').eq(n).addClass('liBlock').siblings().removeClass('liBlock');
}

function titleSlider(n) {
    $('#bloc-title li').eq(n).addClass('cur').siblings().removeClass('cur');
}



/*鍦ㄥ厓绱犱腑榧犳爣鐨勫潗鏍�*/
function thisMouse(elem) {

    var mouse = { x: 0, y: 0 };
    elem.addEventListener('mousemove', function (e) {
        var x, y;
        if (e.pageX || e.pageY) {
            x = e.pageX;
            y = e.pageY;
        } else {
            x = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
            y = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
        }
        x -= elem.offsetLeft;
        y -= elem.offsetTop;
        mouse.x = x;
        mouse.y = y;
    }, false);
    return mouse;
}