var allcontents = [];


function addcontents(){
    var contents_json_url = "https://script.google.com/macros/s/AKfycbz1rZR-F4QZmZJGqPKr2OacV_HQ_-TqJS2R1wRtOIXjU5DI3i49Wuf3SRhj8Hxn8AazZw/exec"

    //APIを使って非同期データを取得する
    fetch(contents_json_url)
    .then(response => response.json())
    /*成功した処理*/
    .then(data => {
        //JSONから配列に変換
        allcontents = data;
        addcontent(allcontents);
        imagepreload(allcontents);
        console.log("データ取得" + allcontents);
    });
    

}


/*function putcontent(csv_text){ //key,valueを設定
    console.log("コンテンツ変更を開始");
    for(var n=0; n<csv_text.length-1; ++n){
        let contents = [];
        for(var i=0; i<csv_text[0].length; ++i){
            let content = csv_text[n+1][i];
            console.log(content);
            if(content){
                contents[csv_text[0][i]] = content;
            }
        }
        allcontents[n] = contents;
    }
    console.log(allcontents);
    addcontent(allcontents);
}*/


function addcontent(list){
    console.log(list)
    for(var i=0; i<list.length; ++i){
        if(true){
            document.getElementById("main").insertAdjacentHTML('beforeend', '<div class="section js-show-popup" id="' + i + '"></div>');
            document.getElementById(i).innerHTML = "<div class=\"section_contents\"><h2>" + list[i]["title"] + "</h2><p>" + list[i]["introduction1"] + "</p></div>";

            console.log("紹介BOX追加");
        }
    }

    popupImage();
    
}

function popupImage() {
    console.log("スタート");

    var popup = document.getElementById('main');
    let js_popup = document.getElementById('js-popup');
    var body = document.body;
    if(!popup) return;

    let blackBg = popup.querySelector('.js-black-bg');
    let closeBtn = popup.querySelector('.js-close-btn');
    //let showBtn = popup.querySelector('.js-show-popup');

    closePopUp(blackBg);
    closePopUp(closeBtn);
    //closePopUp(showBtn);

    var section = popup.querySelectorAll('.js-show-popup');
    for(sec of section){
        closePopUp(sec);
        chenge(sec);
    }
        
    function closePopUp(elem) {//上の要素のどれかをクリックしたら表示もしくは非表示
        if(!elem) return;
        elem.addEventListener('click', function() {
            body.classList.toggle('scroll-stop');
            js_popup.classList.toggle('is-show');
        });
    }
}


function chenge(e){
    e.addEventListener('click', function(){

        var contentslist = allcontents[e.id];
        console.log(contentslist);
        var contentskeys = Object.keys(contentslist);

        for(var i=0; i<contentskeys.length;++i){
            var content = document.getElementById(contentskeys[i]);
            console.log(content);
            if(content){
                if (contentskeys[i] == "image1" || contentskeys[i] == "image2" || contentskeys[i] == "image3" || contentskeys[i] == "map"){
                    if(contentslist[contentskeys[i]]){
                        if(contentslist[contentskeys[i]].match(/https:\/\/drive.google.com\/file\/d\//) != null){
                            content.src = contentslist[contentskeys[i]].replace(/https:\/\/drive.google.com\/file\/d\//, "http://drive.google.com/uc?export=view&id=").replace(/\/view\?usp=sharing/,"");
                        }else{
                            content.src = contentslist[contentskeys[i]];
                        }
                    }else{
                        content.src = "img/errer.jpg";
                    }
                    
                } else{
                    content.innerHTML = contentslist[contentskeys[i]];
                }
            }
            console.log(content+ "終了");
        }
    }, false);
}

var images = [];
function imagepreload(list){
    for(var i=0; i<list.length; i++){
        images[i] = [];
        for(var n=0; n<3; n++){
            images[i][n] = new Image();
            if(list[i]["image"+ (n+1)].match(/https:\/\/drive.google.com\/file\/d\//) != null){
                images.src = list[i]["image"+ (n+1)].replace(/https:\/\/drive.google.com\/file\/d\//, "http://drive.google.com/uc?export=view&id=").replace(/\/view\?usp=sharing/,"");
            }else{
                images[i][n].src = list[i]["image"+ (n+1)];
            }
            console.log(images[i][n].src+"プリロード");
        }
    }
}

addcontents();