//CSVファイルを読み込む関数getCSV()の定義
/*function addcontents(){
    var req = new XMLHttpRequest(); // HTTPでファイルを読み込むためのXMLHttpRrequestオブジェクトを生成
    req.open("get", "kankoti.csv", true); // アクセスするファイルを指定
    req.send(null); // HTTPリクエストの発行
	
    // レスポンスが返ってきたらconvertCSVtoArray()を呼ぶ	
    req.onload = function(){
	convertCSVtoArray(req.responseText); // 渡されるのは読み込んだCSVデータ
    }
}
 
// 読み込んだCSVデータを二次元配列に変換する関数convertCSVtoArray()の定義
function convertCSVtoArray(str){ // 読み込んだCSVデータが文字列として渡される
    var result = []; // 最終的な二次元配列を入れるための配列
    var tmp = str.split("\n"); // 改行を区切り文字として行を要素とした配列を生成
 
    // 各行ごとにカンマで区切った文字列を要素とした二次元配列を生成
    for(var i=0;i<tmp.length;++i){
    	    result[i] = tmp[i].split(',');
    }

    //result[1] = tmp[1].split(',');//実際のコンテンツ内容を入れる
    console.log(result);

    putcontent(result);
}*/

var allcontents = [];


function addcontents(){
    var contents_json_url = "https://script.googleusercontent.com/macros/echo?user_content_key=0biDvd_E306BND8kETO18PXUbyDqe-4HIbpHx_-KNRIALdgLB2NtO6jjP0gXqeiJPJ_pTfcBlkeO5WMuv3VimnEPn8Q0chw8m5_BxDlH2jW0nuo2oDemN9CCS2h10ox_1xSncGQajx_ryfhECjZEnA2jO5woZ4icdZ1gzPJgYAmYvY0BE75k20lS_lcwjFunapcJkVlXKg0V_BqDmkNHTxJ1h3QTYjqByaGoFRwBP2ko-pQex2NJyA&lib=M9Noh40XReJk3LDX4uyUc1aJFgJfzwc-W"

    //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+"プリロード");
        }
    }
}