/********************************
    Start Date : 2020.06.25
    영흥 에너지파크 ui.js
********************************/

/* S: Common */

var ui = {
    init: function(){
        if ($('.header_mobile_menu_icon').length) {this.hamburger.init();this.scrollHeader.init();} // Hamburger Menu 
        if ($('.pageNav .item a').length) {this.navigation.init();} // Sub Navgation Menu 
        if ( $('.gnb_wrap').length ) {this.gnbHover.init();}    //gnb hover event
    },
    gnbHover : {
        action : '.gnb',
        target : '.snb',
        init : function(){
            var _this = this;

            _this.evtHandler();
        },
        evtHandler : function(){
            var _this = this;

            $(_this.action).find('>ul>li').mouseenter(function(){
                var $this = $(this);
                _this.snbOpen($this);
            }).mouseleave(function(){
                var $this = $(this);
                _this.snbClose($this);
            });
            $(_this.action).find('>ul>li>a').focusin(function(){
                var $this = $(this).parent();
                $(_this.action).find('.snb_menu').hide();
                _this.snbOpen($this);
            });
        },
        snbOpen : function($this){
            var _this = this;

            $this.find('.snb_menu').show();
        },
        snbClose: function($this){
            var _this = this;

            $this.find('.snb_menu').hide();
        }
    },
    scrollHeader : {    //Mobile 스크롤시 Header BG
        wrap : '#header_wrap',
        init : function(){
            var _this = this;
            _this.evtHandler();
        },
        evtHandler : function(){
            var _this = this;
            $(window).on('scroll', function(){
                if($(this)[0].scrollY == 0){
                    _this.delHeader();
                }else{
                    _this.actHeader();
                }
            });
        },
        actHeader : function(){
            var _this = this;
            $(_this.wrap).addClass('scrolling');
        },
        delHeader : function(){
            var _this = this;
            $(_this.wrap).removeClass('scrolling');
        }
    },
    hamburger : {   // 모바일 햄버거 전체화면
        wrap : '.hamburger_wrap',
        target : '.hamburger_wrap .ham_menu',
        btnOpen : '.header_mobile_menu_icon',
        btnClose : '.btn_ham_close',
        menuList : '.hamburger_wrap .menu_list > li',
        subMenu : '.sub_menu',
        init : function(){
            var _this = this;
            _this.evtHandler();
        },
        evtHandler : function(){
            var _this = this;
            $(_this.btnOpen).on('click', function(){
               _this.open();
            });
            $(_this.btnClose).on('click', function(){
                _this.close();
            });
            $(_this.menuList).children('a').on('click', function(){
                var _target = $(this);
                _this.slide(_target);
            });
        },
        open : function(){
            var _this = this;
            $(_this.wrap).show();
            $(_this.target).animate({'right':'0px'}, 500,
            function(){
                $(_this.btnClose).show();
                $('body').css({'overflow':'hidden'});
            });
        },
        close : function(){
            var _this = this;
            $(_this.btnClose).hide();
            $(_this.target).animate({'right':'-100%'}, 500,
            function(){
                $(_this.wrap).hide();
            });
            $('body').css({'overflow':''});
        },
        slide : function(_target){
            var _this = this;
            if( _target.parent().children(_this.subMenu).length > 0 ){ 
                _target.parent().children(_this.subMenu).stop().slideToggle();
                _target.parent().siblings().children(_this.subMenu).stop().slideUp();
                if(_target.parent().hasClass('on')){
                    $(_this.menuList).removeClass('on');
                }else{
                    $(_this.menuList).removeClass('on');
                    _target.parent().addClass('on');
                }
            };
        }
    },
    
    navigation : {  //PC 상세 네비게이션 버튼
        wrap : '.pageNav',
        btnbox : '.pageNav .item',
        btn : '.pageNav .item a',
        target : '.pageNav .item ul',
        init : function(){
            var _this = this;
            
            _this.evtHandler();
        },
        evtHandler : function(){
            var _this = this;

            $(_this.btn).on('click', function(){
                var iftext = !$(this).parent('.item').hasClass('on');
                _this.reset();

                if( iftext ){
                    _this.active($(this));
                }
            });
        },
        reset : function(){
            var _this = this;
            $(_this.target).slideUp();
            $(_this.btnbox).removeClass('on');
        },
        active : function($this){
            var _this = this;

            $this.parent('.item').addClass('on');
            $this.siblings('ul').slideDown();
        }
    },
};
/* E: Common */

/* S: Step1. 에너지파크 */
var uiInfo = {
    init: function(){
        if($('.box_select').length) {this.selectBox.init();}    //Seletc box
    },
    selectBox : {    //Mobile 스크롤시 Header BG
        target : '.box_select select',
        init : function(){
            var _this = this;

            _this.evtHandler();
        },
        evtHandler : function(){
            var _this = this;

            $(_this.target).change(function(){
                var select_name = $(this).children("option:selected").text();
                $(this).siblings("label").text(select_name);
            });
        }
    }
};

/* E: Step1. 에너지파크 */

/* S: Step2. 시설소개 */
var basicImg = $(".basic_img");
var allView = $(".all_view");
var facilityOl = $('.facility_info ul li');
var facilityImg = $('.facility_img ul li');
var thisInx = $(this).index();

$(facilityOl).on('click', function(){
    thisInx = $(this).index();
    $(facilityOl).eq(thisInx).siblings(facilityOl).removeClass("on");
    if(!$(this).hasClass("on")){
        $(this).addClass("on");
    }
    facilityImg.removeClass("on");
    if(!$(facilityImg.eq(thisInx)).hasClass("on")){
        facilityImg.eq(thisInx).addClass("on");
        basicImg.hide();
        allView.show();
        $('.facility_btn_area').show();
    }
});

allView.on('click', function(){
    facilityOl.removeClass('on');
    facilityImg.removeClass('on');
    basicImg.show();
    $('.facility_btn_area').hide();
});

$('.facility_img .btn_ex_next').on('click', function(){
    var nextIdx = $('.facility_info ul li.on').index() + 1;

    //reset
    facilityOl.removeClass('on');
    facilityImg.removeClass('on');

    if( nextIdx >= facilityOl.length ){
        facilityOl.eq(0).addClass("on");
        facilityImg.eq(0).addClass("on");
    }else{
        facilityOl.eq(nextIdx).addClass("on");
        facilityImg.eq(nextIdx).addClass("on");
    }
    
});


$('.facility_img .btn_ex_prev').on('click', function(){
    var prevIdx = $('.facility_info ul li.on').index() - 1;
    var listIdx = facilityOl.length -1;

    //reset
    facilityOl.removeClass('on');
    facilityImg.removeClass('on');

    if( prevIdx < 0 ){
        facilityOl.eq(listIdx).addClass("on");
        facilityImg.eq(listIdx).addClass("on");
    }else{
        facilityOl.eq(prevIdx).addClass("on");
        facilityImg.eq(prevIdx).addClass("on");
    }
    
});

/* E: Step2. 시설소개 */

/* S: Step3. 오시는길 */
//Function
/* E: Step3. 오시는길 */

/* S: Step4. 고객광장 */
//Function
/* E: Step4. 고객광장 */


$(window).load(function(){
    ui.init();  // 개발에서 하나만 호출 필요
    uiInfo.init();  //개발에서 하나만 호출 필요
});