$(function(){
    // header 나의 실천현황 버튼
    $('header div.right .wrap').click(function(){
			alert('로그인이 필요합니다!\n탄소단식 챌린지에 참여하기 위해서는 교구 홈페이지에 로그인/회원가입이 필요합니다.'); 
		location.href='/eco/?path=1';
	    });
    // 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');
            // input.off("blur");
        });
    });
    
    // 나의실천현황 등수 표기
    $.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');
    });
    // 전체 등수 구하기
    //ranking = ranking / $('.percent_wrap .box .current_bar').length;
    //ranking = Math.round(ranking);
    //$('.target_wrap .current_bar').data('ranking', ranking);
	//$('.target_wrap .current_bar').data('goal', avg_rate);
    
    
    // 나의실천현황 등수에 따라 바 표기
    $.each($('.current_bar'), function(index, item){
        //movebar($(this), $(this).data('ranking'), all);
		movebar($(this), $(this).data('ranking'), $(this).data('goal'), index);
		//console.log(index, $(this).data('goal'));
    });

    // 등수 표기
    //$('header div.right .layer_area .text_wrap .info_wrap .layer.two .ranking').text(ranking + '위');


    // 그래프로 보는 GR 통계
    // 차트를 그럴 영역을 dom요소로 가져온다.
 
    var chartArea = document.getElementById('totalChart')

    if(chartArea != undefined){
        var config = {
            type: 'pie',
            data: {
                // labels: ['거절하기', '고쳐쓰기', '다시쓰기', '아껴쓰기', '재고하기', '재생하기'],
                datasets: [{
                    labels: 'state',
                    // data: [15, 13, 6, 8, 9, 8],
                    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: function (context) {
                        //  return context.dataset.backgroundColor;
                        // },
                        color: 'white',
                        //color: 'rgba(255, 255, 255, 1.0)',
                        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){
			//console.log($(this));
            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: {
                // labels: ['거절하기', '고쳐쓰기', '다시쓰기', '아껴쓰기', '재고하기', '재생하기'],
                datasets: [{
                    labels: 'state',
                    // data: [15, 13, 6, 8, 9, 8],
                    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: function (context) {
                        //  return context.dataset.backgroundColor;
                        // },
                        color: 'white',
                        //color: 'rgba(255, 255, 255, 1.0)',
                        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;
        // $.each(person_data, function(index, item){
        //     console.log($(this));
        //     rank.push($(this));
        // });

        //console.log(person_rank);
        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){
			//console.log(person_rank[i]);
            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;
	}
	//console.log(num, allnum, index, temp);
	
	if( index > 0 ) {
	    //let temp = (allnum - num) / allnum * 100;
	    bar.css('width', temp + '%');
		bar.parent().next().text(temp + '%');
	} else {
		console.log(index);
		//bar.css('width', num + '%');
		//bar.parent().next().text(temp + '%');
	}
	
    /*let temp = (allnum - num) / allnum * 100;
    temp = Math.round(temp);
    bar.css('width', temp + '%');
	
    if(bar.parent().next().hasClass('num')){
        bar.parent().next().text(temp + '%');

    } else {
        //bar.parent().parent().next().text(temp + '%');
		bar.parent().parent().next().text(temp + '%');
		alert(num);
    }*/
}

// 페이스북 공유
function sendLinkFacebook(){
    var facebook_share_url = "https://www.facebook.com/sharer/sharer.php?u=https://dev.brighten.co.kr/busaneco/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://dev.brighten.co.kr/busaneco/templates/pages/main.php"; // 전달할 URL
    window.open("https://twitter.com/intent/tweet?text=" + sendText + "&url=" + sendUrl);
}

function shareKakaoStory() {
    loc = 'https://story.kakao.com/share?url=https://dev.brighten.co.kr/busaneco/templates/pages/main.php';
    window.open(loc);
}