const boardEl = document.querySelector(".board_10");

boardEl.style.display = "none";

//이미지 태그 가져오기
const imgEl = document.querySelectorAll(".board_output_gallery_img");




//페이지 주소들 가져오기
//console.log(imgEl[0].children[0].attributes[0].nodeValue);
//console.log(imgEl[1].children[0].attributes[0].nodeValue);
//console.log(imgEl[2].children[0].attributes[0].nodeValue);


//이미지 주소 가져오기
//console.log(imgEl[0].children[0].children[0].attributes[1].nodeValue);
//console.log(imgEl[1].children[0].children[0].attributes[1].nodeValue);
//console.log(imgEl[2].children[0].children[0].attributes[1].nodeValue);




//제목태그 가져오기
const subTitleEl = document.querySelectorAll(".board_output_gallery_subject");
//console.log(subTitleEl);


//제목 링크 가져오기
//console.log(subTitleEl[0].children[0].attributes[0].nodeValue);
//console.log(subTitleEl[1].children[0].attributes[0].nodeValue);
//console.log(subTitleEl[2].children[0].attributes[0].nodeValue);


//링크 제목
//console.log(subTitleEl[0].children[0].innerHTML);
//console.log(subTitleEl[1].children[0].innerHTML);
//console.log(subTitleEl[2].children[0].innerHTML);


//작성일자 가져오기
const dateEl = document.querySelectorAll(".board_output_gallery_etc");


//작성일자
//console.log(dateEl[0].innerHTML);
//console.log(dateEl[1].innerHTML);
//console.log(dateEl[2].innerHTML);


//프로모션 섹션 가져오기
const promotionEl = document.querySelector(".promotion");
//console.log(promotionEl);

//프로모션 뒤의 이미지 넣기
const promotionEl_1_1 = promotionEl.querySelector(".promotion_1 .back");
promotionEl_1_1.insertBefore(imgEl[0].children[0].children[0].cloneNode(true),promotionEl_1_1.firstChild);
const promotionEl_2_1 = promotionEl.querySelector(".promotion_2 .back");
promotionEl_2_1.insertBefore(imgEl[1].children[0].children[0].cloneNode(true),promotionEl_2_1.firstChild);
const promotionEl_3_1 = promotionEl.querySelector(".promotion_3 .back");
promotionEl_3_1.insertBefore(imgEl[2].children[0].children[0].cloneNode(true),promotionEl_3_1.firstChild);



//프로모션의 이미지 넣기
const promotionEl_1 = promotionEl.querySelector(".promotion_1 .front");
promotionEl_1.appendChild(imgEl[0].children[0].children[0]);

const promotionEl_2 = promotionEl.querySelector(".promotion_2 .front");
promotionEl_2.appendChild(imgEl[1].children[0].children[0]);

const promotionEl_3 = promotionEl.querySelector(".promotion_3 .front");
promotionEl_3.appendChild(imgEl[2].children[0].children[0]);


//프로모션의 제목 넣어주기
const titleEl_1 = promotionEl.querySelector('.title_1');
titleEl_1.innerHTML = `${subTitleEl[0].children[0].innerHTML}`;
const titleEl_2 = promotionEl.querySelector('.title_2');
titleEl_2.innerHTML = `${subTitleEl[1].children[0].innerHTML}`;
const titleEl_3 = promotionEl.querySelector('.title_3');
titleEl_3.innerHTML = `${subTitleEl[2].children[0].innerHTML}`;

//프로모션 제목 스타일 넣어주기
titleEl_1.style.fontSize = '24px';
titleEl_2.style.fontSize = '24px';
titleEl_3.style.fontSize = '24px';


titleEl_1.style.marginBottom = '20px';
titleEl_2.style.marginBottom = '20px';
titleEl_3.style.marginBottom = '20px';


titleEl_1.style.color = '#000';
titleEl_2.style.color = '#000';
titleEl_3.style.color = '#000';

//프로모션의 제목 자르기
if(subTitleEl[0].children[0].innerHTML.length > 13){
const firstTxt_1 = subTitleEl[0].children[0].innerHTML.slice(0, 13);
const secondTxt_1 = subTitleEl[0].children[0].innerHTML.slice(13 ,subTitleEl[0].children[0].innerHTML.length);
titleEl_1.innerHTML = '<div>'+firstTxt_1+'</div>'+'<div>'+secondTxt_1+'</div>';
}


if(subTitleEl[1].children[0].innerHTML.length > 13){
const firstTxt_2 = subTitleEl[1].children[0].innerHTML.slice(0, 13);
const secondTxt_2 = subTitleEl[1].children[0].innerHTML.slice(13 ,subTitleEl[1].children[0].innerHTML.length);
titleEl_2.innerHTML = '<div>'+firstTxt_2+'</div>'+'<div>'+secondTxt_2+'</div>';
}



if(subTitleEl[2].children[0].innerHTML.length > 13){
const firstTxt_3 = subTitleEl[2].children[0].innerHTML.slice(0, 13);
const secondTxt_3 = subTitleEl[2].children[0].innerHTML.slice(13 ,subTitleEl[2].children[0].innerHTML.length);
titleEl_3.innerHTML = '<div>'+firstTxt_3+'</div>'+'<div>'+secondTxt_3+'</div>';
}

//작성일자 가져오기
const dateEl_1 = promotionEl.querySelector(".date_1");
dateEl_1.innerHTML = `${dateEl[0].innerHTML}`
const dateEl_2 = promotionEl.querySelector(".date_2");
dateEl_2.innerHTML = `${dateEl[0].innerHTML}`
const dateEl_3 = promotionEl.querySelector(".date_3");
dateEl_3.innerHTML = `${dateEl[0].innerHTML}`;



//작성일자 스타일
dateEl_1.style.fontSize = "16px";
dateEl_2.style.fontSize = "16px";
dateEl_3.style.fontSize = "16px";

dateEl_1.style.marginBottom = '20px';
dateEl_2.style.marginBottom = '20px';
dateEl_3.style.marginBottom = '20px';



//버튼 클릭 시 링크 이동
const btn_1 = promotionEl.querySelector(".promotion_1 .btn-pro_1");
btn_1.addEventListener("click", function(){
    const newPageUrl_1 = `http://www.nasalok.com/default/${subTitleEl[0].children[0].attributes[0].nodeValue}`
    window.location.href = newPageUrl_1;
})
const btn_2 = promotionEl.querySelector(".promotion_2 .btn-pro_2");
btn_2.addEventListener("click", function(){
    const newPageUrl_2 = `http://www.nasalok.com/default/${subTitleEl[1].children[0].attributes[0].nodeValue}`
    window.location.href = newPageUrl_2;
})
const btn_3 = promotionEl.querySelector(".promotion_3 .btn-pro_3");
btn_3.addEventListener("click", function(){
    const newPageUrl_3 = `http://www.nasalok.com/default/${subTitleEl[2].children[0].attributes[0].nodeValue}`
    window.location.href = newPageUrl_3;
})

//새소식 스타일 적용
const hTwoEl = document.querySelector("section > h2");
hTwoEl.style.fontSize = '32px';
hTwoEl.style.padding = "16px";


//버튼 스타일 적용

const proBtns = promotionEl.querySelectorAll("Button");
console.log(proBtns);
proBtns.forEach((proBtn) => {
proBtn.style.width = '100px';
proBtn.style.height = '50px';
proBtn.style.fontSize = '16px';
proBtn.style.border = "1px solid #333";
proBtn.style.borderRadius = '5px';
proBtn.style.backgroundColor = 'white';
proBtn.style.color = '#333';
proBtn.style.fontWeight = 'bold';
proBtn.style.transition = '0.3s';
 proBtn.addEventListener('mouseover', function() {
        // 마우스가 요소 위에 있을 때 스타일 변경
        proBtn.style.backgroundColor = '#333';
        proBtn.style.color = 'white';
         proBtn.style.cursor = "pointer";


    });

    proBtn.addEventListener('mouseout', function() {
        // 마우스가 요소를 벗어났을 때 스타일 초기화
        proBtn.style.backgroundColor = 'white';
        proBtn.style.color = '#333';
    });
})