//                          ###  index_upper.js  ###
//                  ¸ÞÀÎÆäÀÌÁöÀÇ ÃÖ»ó´Ü ½½¶óÀ̵带 ±¸ÇöÇÕ´Ï´Ù.
//
//
//      upperSlide_maker() : ½½¶óÀÌµå ±¸Çö¿¡ ÇÊ¿äÇÑ º¯¼ö¿Í ±â´ÉÀ» °ü¸®ÇÕ´Ï´Ù. 
//      owlInit() : DOM ÀÛ¼ºÀÌ ¿Ï·áµÈ ÈÄ owl-carouselÀ» ÃʱâÈ­ÇÕ´Ï´Ù.      
//
//
//          ½½¶óÀ̵带 Ãß°¡/Á¦°ÅÇϽ÷Á¸é, variables¿¡ Ç׸ñÀ» Ãß°¡/Á¦°ÅÇØÁÖ¼¼¿ä.
//               #######################################################
//               ###  imgsrc  - ½½¶óÀÌµå »çÁøÀÇ À̸§ÀÔ´Ï´Ù.          ###
//               ###               (°æ·Î img/index/upperslide)       ###
//               ###  title   - ½½¶óÀ̵å Á¦¸ñÀÔ´Ï´Ù.                 ###
//               ###  content - ½½¶óÀÌµå ³»¿ëÀÔ´Ï´Ù.                 ###
//               ###  link    - ¹öÆ°À» ´©¸£¸é À̵¿ÇÒ ÆäÀÌÁöÀÔ´Ï´Ù.   ###
//               #######################################################






function upperSlide_maker()
{
    var variables = 
    [
        {
            imgsrc: "slide1.jpg",
            title: "Luxury Trendy Restaurant",
            content: "ÇÁ¸®¹Ì¾ö Æйи® ·¹½ºÅä¶û",
            link: "brand.php"
        },


        {
            imgsrc: "slide2.jpg",
            title: "Lovely First Birthday",
            content: "Æò»ý ±â¾ï¿¡ ³²´Â »ýÀÏÀÜÄ¡",
            link: "bday.php"
        },


        {
            imgsrc: "slide3.jpg",
            title: "Premium Family Restaurant",
            content: "°æ±â ÃÖ´ë±Ô¸ðÀÇ ºßÆä ¸ÀÁý",
            link: "brand.php"
        },


        {
            imgsrc: "slide4.jpg",
            title: "Memorable Party",
            content: "¸ÀÀÖ´Â Áñ°Å¿òÀÌ °¡µæÇÑ °÷",
            link: "menu.php"
        },


        {
            imgsrc: "slide5.jpg",
            title: "Elegant Exciting Party",
            content: "¼ÒÁßÇÑ »ç¶÷µé°úÀÇ Æ¯º°½Ã°£",
            link: "bday.php"
        },


        {
            imgsrc: "slide6.jpg",
            title: "Fantastic Birthday",
            content: "±â»Ý °¡µæÇÑ ¼ÒÁßÇÑ Ãß¾ï",
            link: "bday.php"
        },
    ];



    variables.forEach(function(box) 
    {
        var htmlContent = `
            <div class="img-box">
                <img src="img/index/upperslide/${box.imgsrc}">
                <div class="box">  
                    <div class="sub-orange">
                        <span class="line"></span> 
                        <p class="sub-title text-shad-brown">${box.title}</p>  
                        <span class="line"></span> 
                    </div>
                    <h1 class="fontstr"><span class="fontstr text-shad-brown">${box.content}</span></h1>                          
                    <a itemprop="url" href="${box.link}" target="_self" class="eltdf-btn eltdf-btn-outline-slit">
                        <svg height="50" width="162.828"><rect height="50" width="162.828"></rect></svg>
                        <span>View more</span>
                    </a>                 
                </div>
            </div>
        `;


        $(".slide-1").append(htmlContent);
    });


    return true;
};






// -------- owl-carousel ÃʱâÈ­ --------
function owlInit()
{
    $(".slide-1").owlCarousel
    ({
        loop:true,   
        nav:true,     
        items:1,      
        autoplay:true,
        smartSpeed: 500,
        animateOut: 'fadeOut',
        animateIn: 'fadeIn',
        autoplayTimeout:5000
    })
}
// -------- owl-carousel ÃʱâÈ­ --------