//                                      ###  bday_partyroom.js  ###
//                  (돌잔치 전용룸) 페이지의 (Party Room) 소개 카드를 구현합니다.
//
//
//                  room_slide_maker()     : 소개 카드의 대표사진을 관리합니다.   
//                  swiper_instanciation() : 소개 카드 생성 후, swiper 인스턴스를 생성합니다.
//                  slide_popup()          : 소개 카드를 클릭했을 때 동작을 구현합니다.
//
//                  게시글을 추가/제거하시려면, variables에 항목을 추가/제거해주세요.
//
//
//                                               variables
//                          ####################################################
//                          ###  thumb_src  -  썸네일 사진입니다.            ###
//                          ###                (경로 img/bday/partyroom)     ###
//                          ###  name_eng   -  (영문) 해당 룸의 이름입니다.  ###
//                          ###  name_kor   -  (한글) 해당 룸의 이름입니다.  ###
//                          ###  limit      -  룸의 인원제한 설명입니다.     ### 
//                          ####################################################
//
//
//                              img_variables (사진 썸네일 클릭 시 슬라이드 사진들)
//             ####################################################################################
//             ###  img_about  -  사진이 띄워질 룸 이름입니다.                                  ###
//             ###                name_eng와 이름이 동일해야 오류를 발생시키지 않습니다.        ###
//             ###  img_name   -  이미지 이름의 일부입니다.                                     ###
//             ###                 (img/bday/bday-table-) 다음에 올 영문 이니셜 두 글자입니다.  ###
//             ###  img_numto  -  슬라이드에 띄워질 이미지의 개수입니다.                        ###
//             ####################################################################################
//             ###                                  img_about: "Aladin"                         ###
//             ###                                  img_name: "al"                              ###
//             ###                                  img_numto: 5                                ###
//             ###                                                                              ###
//             ###  =>  "Aladin(알라딘)" 룸의 사진을 누르면,                                    ###
//             ###      (img/bday/bday-table-) al1.jpg, al2.jpg, al3.jpg, al4.jpg, al5.jpg      ###
//             ###      를 슬라이드로 출력.                                                     ###
//             ####################################################################################
//
//
//




var var_num = 0;
var class_names = [];
var id_names = [];



function room_slide_maker()
{
    var variables =
    [
        {
            thumb_src: "bday1.jpg",
            name_eng: "Banquet Hall",
            name_kor: "대연회장",
            limit: "200석 / 보증 150명",
        },


        {
            thumb_src: "bday2.jpg",
            name_eng: "Aladin",
            name_kor: "알라딘",
            limit: "75석 / 보증 50명",
        },


        {
            thumb_src: "bday3.jpg",
            name_eng: "Cinderella",
            name_kor: "신데렐라",
            limit: "75석 / 보증 50명",
        },


        {
            thumb_src: "bday4.jpg",
            name_eng: "OZ",
            name_kor: "오즈",
            limit: "75석 / 보증 50명",
        },


        {
            thumb_src: "bday5.jpg",
            name_eng: "Sun & Moon",
            name_kor: "해와 달",
            limit: "50석 / 보증 30명",
        },


        {
            thumb_src: "bday6.jpg",
            name_eng: "Louvre",
            name_kor: "루브르",
            limit: "98석 / 보증 70명",
        },


        {
            thumb_src: "bday7.jpg",
            name_eng: "Milano",
            name_kor: "밀라노",
            limit: "64석 / 보증 40명",
        },


        {
            thumb_src: "bday8.jpg",
            name_eng: "Sydney",
            name_kor: "시드니",
            limit: "32석 / 보증 20명",
        },


        {
            thumb_src: "bday9.jpg",
            name_eng: "Venice",
            name_kor: "베니스",
            limit: "48석 / 보증 35명",
        },


        {
            thumb_src: "bday10.jpg",
            name_eng: "Sarangchae",
            name_kor: "사랑채",
            limit: "84석 / 보증 60명",
        },

        {
            thumb_src: "bday11.jpg",
            name_eng: "Mini Room",
            name_kor: "미니 룸",
            limit: "80석",
        },

        {
            thumb_src: "bday12.jpg",
            name_eng: "PhotoZone",
            name_kor: "촬영장소",
            limit: "스냅사진",
        },
    ]


    var img_variables =
    [
        {
            img_about: "Banquet Hall",
            img_name: "de",
            img_numto: 1,
        },


        {
            img_about: "Aladin",
            img_name: "al",
            img_numto: 5,
        },


        {
            img_about: "Cinderella",
            img_name: "cin",
            img_numto: 5,
        },


        {
            img_about: "OZ",
            img_name: "oz",
            img_numto: 6,
        },


        {
            img_about: "Sun & Moon",
            img_name: "sun",
            img_numto: 6,
        },


        {
            img_about: "Louvre",
            img_name: "lo",
            img_numto: 4,
        },


        {
            img_about: "Milano",
            img_name: "mi",
            img_numto: 6,
        },


        {
            img_about: "Sydney",
            img_name: "syd",
            img_numto: 5,
        },


        {
            img_about: "Venice",
            img_name: "ve",
            img_numto: 5,
        },


        {
            img_about: "Sarangchae",
            img_name: "sa",
            img_numto: 4,
        },

        {
            img_about: "Mini Room",
            img_name: "Mini",
            img_numto: 1,
        },


        {
            img_about: "PhotoZone",
            img_name: "photozone",
            img_numto: 1,
        },
    ]



















    var_num = variables.length;
    var class_counter = 0;
    var id_counter = 0;
    var result_counter = 0;


    for(var i = 1; i <= variables.length; i++)
    {
        class_names.push("moreSwiper" + i);
        id_names.push("img_slide" + i);
    }


    function getSwiper(idx)
    {
        return class_names[idx];
    }


    function getId(idx)
    {
        return id_names[idx];
    }



    variables.forEach(function(box) 
    {
        var htmlContent1 = 
        `
        <div class="col-12 col-md-6 col-lg-6">    
            <div class="hall">                 
                <div class="bday-name">
                    <div class="text-primary bday-eng text-end">${box.name_eng}</div>    
                    <div class="text-end bday-tit bday-tit1">${box.name_kor}</div>    
                    <div class="text-end bday-tit seat">${box.limit}</div>    
                </div>
                <img src="img/bday/partyroom/${box.thumb_src}" alt="bday">  
                <div id="slider">
                    <div class="more">           
                        <div class="swiper ${getSwiper(class_counter++)}">      
                            <div class="swiper-wrapper" id="${getId(id_counter++)}">


                            </div> 
                            <span class="swiper-pagination"></span>
                            <span class="swiper-button-prev"></span>
                            <span class="swiper-button-next"></span>              
                        </div>
                        <div class="room_name">                           
                            <h2 class="bday-eng">${box.name_eng}</h2>
                            <h2>${box.name_kor}</h2>
                        </div>
                    </div>
                </div>
            </div>                 
        </div> 
        `;
        $("#thumb").append(htmlContent1);



        for(i = 0; i < img_variables.length; i++)
        {
            if(box.name_eng == img_variables[i].img_about)
            {
                for (var j = 1; j <= img_variables[i].img_numto; j++)
                {
                    var htmlContent2 = 
                    `
                    <div class="swiper-slide">
                        <div class="swiper-card">
                            <div class="img_wrap">
                                <img src="img/bday/slides/bday-table-${img_variables[i].img_name+j}.jpg">
                            </div>   
                        </div>          
                    </div>
                    `;


                    $(`#${getId(result_counter)}`).append(htmlContent2);
                }
                break;
                
            }
        }
        result_counter++;
    })


    return true;
}





function slide_popup()
{
    $(".about11 .hall").click(function()
    {      
        $(this).find(".more").css({display:"block"});
        $(".close").css({display:"block"});
        $(".cook-filter").css({display:"block"});
    })





    $(".close").click(function()
    {      
        $(".more").css({display:"none"});
        $(".close").css({display:"none"});  
        $(".cook-filter").css({display:"none"});      
    })
}








function swiper_instanciation()
{
    var swiper_names = {};
    
    for(i = 1; i <= var_num; i++)
    {
        swiper_names[`swiper${i}`] = new Swiper(`.${class_names[i-1]}`, {
            centeredSlides: true,
            slidesPerView: 1,
            grabCursor: true,
            freeMode: false,
            loop: true,
            mousewheel: false,
            keyboard: {
                enabled: true
            },
            autoplay: {
                delay: 2000,
                disableOnInteraction: false
            },
            pagination: {
                el: ".swiper-pagination",
                dynamicBullets: false,
                clickable: true
            },
            navigation: {
                nextEl: ".swiper-button-next",
                prevEl: ".swiper-button-prev"
            }
        })
    }
}