$(function(){
    // header 나의 실천현황 버튼
    $('header div.right .wrap').click(function(){
			alert('로그인이 필요합니다!\n탄소단식 책임관에 참여하기 위해서는 로그인이 필요합니다.');
		location.href='/eco/login.php'; // eco 디렉토리 내 로그인 페이지
	    });
    // header 나의 실천현황 닫기 버튼
    $('header div.right .layer_area .close_btn').click(function(){
        $('header div.right .wrap').removeClass('active');
        $('header div.right .layer_area').removeClass('active');
    });


    // 탑으로 이동 버튼
    $(".TopTobtn").click(function () {
        $('html, body').animate({scrollTop: '0'}, 680);
    })
    $(window).scroll(function () {

        let pos = $(window).scrollTop();
        if (pos >= 400) {
            $(".TopTobtn").fadeIn();
        } else if(pos >= 1200) {
            const odometer = document.querySelectorAll(".odometer");
            odometer[0].innerHTML = 100;
            odometer[1].innerHTML = 134099;
        } else {
            $(".TopTobtn").fadeOut();
        }
     })


    // focus 테두리 스타일 스크립트
    $('.layout_max .box_style01 .box .right input').on("focus", function(){
        var input = $(this);
        var label = $(this).parents('.box');
        label.addClass('focussed');
        input.on("blur", function(){
            label.removeClass('focussed');
        });
    });

    // 나의실천현황 달성 표시
    $.each($('.percent_wrap .box .current_bar'), function(index, item){
        if($(this).parent().parent().parent().hasClass('Refuse')){
            $(this).data('ranking', data.refuse.ranking);
            $(this).data('num', data.refuse.num);
            $(this).data('label', data.refuse.label);
			$(this).data('goal', data.refuse.goal);
            $(this).data('en', data.refuse.en);
        }
        else if($(this).parent().parent().parent().hasClass('Repurpose')){
            $(this).data('ranking', data.repurpose.ranking);
            $(this).data('num', data.repurpose.num);
            $(this).data('label', data.repurpose.label);
			$(this).data('goal', data.repurpose.goal);
            $(this).data('en', data.repurpose.en);
        }
        else if($(this).parent().parent().parent().hasClass('Reuse')){
            $(this).data('ranking', data.reuse.ranking);
            $(this).data('num', data.reuse.num);
            $(this).data('label', data.reuse.label);
			$(this).data('goal', data.reuse.goal);
            $(this).data('en', data.reuse.en);
        }
        else if($(this).parent().parent().parent().hasClass('Reduce')){
            $(this).data('ranking', data.reduce.ranking);
            $(this).data('num', data.reduce.num);
            $(this).data('label', data.reduce.label);
			$(this).data('goal', data.reduce.goal);
            $(this).data('en', data.reduce.en);
        }
        else if($(this).parent().parent().parent().hasClass('Rethink')){
            $(this).data('ranking', data.rethink.ranking);
            $(this).data('num', data.rethink.num);
            $(this).data('label', data.rethink.label);
			$(this).data('goal', data.rethink.goal);
            $(this).data('en', data.rethink.en);
        }
        else if($(this).parent().parent().parent().hasClass('Recycle')){
            $(this).data('ranking', data.recycle.ranking);
            $(this).data('num', data.recycle.num);
            $(this).data('label', data.recycle.label);
			$(this).data('goal', data.recycle.goal);
            $(this).data('en', data.recycle.en);
        }
        ranking += $(this).data('ranking');
    });

    // 나의실천현황 퍼센트 막대 및 표시
    $.each($('.current_bar'), function(index, item){
		movebar($(this), $(this).data('ranking'), $(this).data('goal'), index);
    });


    // 파이차트 전체 GR 통계
    var chartArea = document.getElementById('totalChart')

    if(chartArea != undefined){
        var config = {
            type: 'pie',
            data: {
                datasets: [{
                    labels: 'state',
                    backgroundColor: [
                        '#027F37',
                        '#9DC73D',
                        '#1677A6',
                        '#FF9D00',
                        '#BD8860',
                        '#43A74B',
                    ],
                    borderColor: 'transparent',
                    borderWidth: 1,
                }]
            },
            options: {
                responsive: true,
                plugins: {
                    datalabels: {
                        display: true,
                        formatter:  function (value, context) {
                            return context.chart.data.labels[context.value];
                        },
                        color: 'white',
                        backgroundColor: null,
                        font: {
                        size: 16,
                        weight: 'bold'
                        }
                    }
                },
                animation: {
                    duration: 0,
                },
                legend: {
                    display: false,
                },
            },
        };

        var totalChart = new Chart(chartArea, config);
        let rank = [];
        $.each($('.box .current_bar'), function(index, item){
            rank.push($(this));
        });
        rank.sort(function(a, b){
            if(a.data('num') > b.data('num')) return -1;
            if(a.data('num') === b.data('num')) return 0;
            if(a.data('num') < b.data('num')) return 1;
        });

        config.data.labels.splice(-1, 1);
        config.data.datasets[0].data.pop();
        totalChart.update();

        let color = [];
        $.each(rank, function(index, item){
            config.data.labels.push($(this).data('label'));
            config.data.datasets[0].data.push($(this).data('num'));
            $('.box_style01.chart .top_wrap > .right ul li .left').eq(index).html($(this).data('label') + "<span></span>");
            $('.box_style01.chart .top_wrap > .right ul li .left').eq(index).find('span').text("_" + $(this).data('en'));
            $('.box_style01.chart .top_wrap > .right ul li .right').eq(index).find('span').text($(this).data('num'));
        })

        totalChart.update();
    }


    // 개인 차트
    let person_data = [
        {
            num : 0,
            ranking : 36000,
            label : '거절하기',
            en : 'refuse',
        },
        {
            num : 0,
            ranking : 56000,
            label : '용도변경',
            en : 'repurpose',
        },
        {
            num : 0,
            ranking : 86000,
            label : '다시쓰기',
            en : 'reuse',
        },
        {
            num : 0,
            ranking : 6000,
            label : '아껴쓰기',
            en : 'reduce'
        },
        {
            num : 0,
            ranking : 550,
            label : '생각하기',
            en : 'rethink'
        },
        {
            num : 0,
            ranking : 3000,
            label : '분리하기',
            en : 'recycle'
        }
    ]

    var chartArea_person = document.getElementById('myChart');
    if(chartArea_person != undefined){
        var config2 = {
            type: 'pie',
            data: {
                datasets: [{
                    labels: 'state',
                    backgroundColor: [
                        '#027F37',
                        '#9DC73D',
                        '#1677A6',
                        '#FF9D00',
                        '#BD8860',
                        '#43A74B',
                    ],
                    borderColor: 'transparent',
                    borderWidth: 1,
                }]
            },
            options: {
                responsive: true,
                plugins: {
                    datalabels: {
                        display: true,
                        formatter:  function (value, context) {
                            return context.chart.data.labels[context.value];
                        },
                        color: 'white',
                        backgroundColor: null,
                        font: {
                        size: 16,
                        weight: 'bold'
                        }
                    }
                },
                animation: {
                    duration: 0,
                },
                legend: {
                    display: false,
                },
            },
        };

        var personChart = new Chart(chartArea_person, config2);
        let person_rank = [];
        person_rank = person_data;

        person_rank.sort(function(a, b){
            if(a.num > b.num) return -1;
            if(a.num === b.num) return 0;
            if(a.num < b.num) return 1;
        });
        console.log(person_rank);

        config2.data.labels.splice(-1, 1);
        config2.data.datasets[0].data.pop();
        personChart.update();

        let color = [];
        for(i in person_rank){
            config2.data.labels.push(person_rank[i].label);
            config2.data.datasets[0].data.push(person_rank[i].num);
            $('.box_style01.chart .top_wrap > .right ul li .left').eq(i).html(person_rank[i].label + "<span></span>");
            $('.box_style01.chart .top_wrap > .right ul li .left').eq(i).find('span').text("_" + person_rank[i].en);
            $('.box_style01.chart .top_wrap > .right ul li .right').eq(i).find('span').text(person_rank[i].num);
        }

        personChart.update();
    }
})

function movebar(bar, num, allnum, index){

	let temp = num / allnum * 100;
	temp = Math.round(temp);
	if(temp > 100) temp = 100;

	if(allnum > 0) {
		let temp = (allnum - num) / allnum * 100;
	}else{
		temp = 0;
	}

	if( index > 0 ) {
	    bar.css('width', temp + '%');
		bar.parent().next().text(temp + '%');
	} else {
		console.log(index);
	}
}

function sendLinkFacebook(){
    var facebook_share_url = "https://www.facebook.com/sharer/sharer.php?u=https://6R.catb.kr/templates/pages/main.php";
    window.open(facebook_share_url,
                'Share on Facebook',
                'scrollbars=no, width=500, height=500');
}
function shareTwitter() {
    var sendText = "탄소단식책임관";
    var sendUrl = "https://6R.catb.kr/templates/pages/main.php";
    window.open("https://twitter.com/intent/tweet?text=" + sendText + "&url=" + sendUrl);
}

function shareKakaoStory() {
    loc = 'https://story.kakao.com/share?url=https://6R.catb.kr/templates/pages/main.php';
    window.open(loc);
}