$(document).ready(onDeviceReady);

var device  = null;
var comm    = comm ? comm : {};
comm.PREV_INFO = [];

comm.lang = 'en'; 

//document.getElementById("view").setAttribute('content','user-scalable=yes, width=device-width, minimum-scale=1, maximum-scale=10');

(function($, window, document, undefined) {

    'use strict';

    $(document).ready(function() {
        if (navigator.userAgent.indexOf('Mac OS X') != -1) {
          $("body").addClass("mac");
        }
    });
})(jQuery, window, document);

function getOSInfo() {
    var agent = navigator.userAgent;

    if(agent.match(/Android/i)) {
        device = 'Android';
    }
    else if(agent.match(/iPhone|iPod/i)) {
        device = 'iPhone';
    }
    else if(agent.match(/iPad/i)) {
        device = 'iPad';
    }
    else if(agent.match(/BlackBerry/i)) {
        device = 'BlackBerry';
    }
    else if(agent.match(/Opera Mini/i)) {
        device = 'Opera';
    }
    else if(agent.match(/IEMobile/i)) {
        device = 'Windows';
    }
    else if(agent.match(/Trident\/(\d.\d)/i)) {
        device = 'IE';
    }
    return device;
}

function onDeviceReady() {
    Const.DEV = getOSInfo();

    comm.check_dpi();   //for window resize

    $(window).resize(comm.check_dpi);   //resize addEventListener

    <!--  -->
    
    comm.loading = comm.loadingBar();

    if(typeof vm != 'undefined' &&  typeof vm.init == 'function') {
        vm.init();
    }

    comm.eventListener();
};
comm.megatelNotice = function(text) {
    console.log("In megatelNotice");
    if(location.pathname == '/' || location.pathname == '/business') {
        if ( $.cookie('notice-onceaweek') != '1' ){
            comm.modalNoticeTxt('', text, 'Don\'t show for a week');
        }
    }
};
comm.megatelNoticeImage = function(src) {
    if(location.pathname == '/' || location.pathname == '/business') {
        if ( $.cookie('notice-onceaweek') != '1' ){
            comm.modalNotice('', '/assets/imgs/popup/'+src, 'Don\'t show for a week');
        }
    }
};
comm.eventListener = function() {

    $(document).on('click', '.navigation > .menu li', comm.menuActive);
    $(document).on('click', '._lang_change > li', comm.langChange);
    $(document).on('click', '._lang_change > a', comm.langChange);
    $(document).on('click', '._lang_change > div > a', comm.langChange);
    $('#btnLang').on('click', comm.menuDropdown);
    $('#logout_ok').on('click', function() {
        location.href="/logout2";
    });
    $('.main-navigation').on('click', '.menu-down-icon > a', comm.preventMobileLink);
    $('.join-modal').on('click', comm.joinModalOpen);
    $('.modal .delete').on('click', comm.joinModalClose);

    if(window.history.length > 1) {
        $('#returnPage').off().on('click', comm.returnPage);
    }
    else {
        $('#returnPage').hide();
    }
};

comm.blockScroll = function(evnt) {
    evnt.preventDefault();
}
comm.loadingBar = function() {

    var tag = '<div class="modal" id="Progress_Loading" style="display:none;"><div class="modal-background"><div><img src="/assets/imgs/loading.svg"/></div></div></div>';
    $('body').append(tag);


    return {
        show : function() {
            document.addEventListener('mousewheel', comm.blockScroll, { passive: false });
            document.addEventListener('touchmove', comm.blockScroll, { passive: false });
            $('#Progress_Loading').show();
    <!-- transition-delay: 1s; -->


            <!--  -->
        },
        hide : function() {
            document.removeEventListener('mousewheel', comm.blockScroll);
            document.removeEventListener('touchmove', comm.blockScroll);
            <!-- $('#Progress_Loading').find('img').css('transform', 'translate(-200%, -200%)'); -->
            $('#Progress_Loading').hide();
            <!-- setTimeout(function() {$('#Progress_Loading').hide();}, 1800); -->
        }
    };

};


comm.terms = function(url, title, target) {
   
    if(title) {
        $('._modal_terms_title').html(title);
    }
    $('#_modal_terms_message').load(url+' .terms');

    if(target) {
        $('#'+target).modal('show');
    }
    else {
        $('.modal.terms').modal('show');
    }
};
comm.toast = function(msg, delay) {
    if(!msg) return false;

    var innerHtml = '<div id="toastArea" class="toast-wrap"><div class="toast-card">'
        +'<div id="toastMsg" role="alert" aria-live="assertive" aria-atomic="true" class="toast bg-dark text-white m-auto" data-autohide="true" style="width: fit-content;">'
        +'<div class="toast-body">'
        +msg
        +'</div></div></div></div>';

    $('.main-content').append(innerHtml);
    $('#toastMsg').toast({delay: delay || 800});
    $('#toastMsg').toast('show');
    $('#toastMsg').on('hidden.bs.toast', function () {
        $('#toastArea').remove();
    });
};
/*************
option = {
    head: head,
    msg: msg,
    type: type, //warngin or not
    okBtn: OK,  //OK Button Text
    cancelBtn: Cancel,   //Cancel Button Text
};
*************/
comm.modalOn = function(option, callback, cancelCallBack=null) {
    var opt = {
        head: option.head || 'Megatel'
        ,msg: option.msg || ''
        ,type: option.type || ''
    };

    var callbackFn = typeof callback == 'function' ? callback : null;


    option.okBtn ? $('#_modal_ok').text(option.okBtn) : $('#_modal_ok').text('OK');
    option.cancelBtn ? $('#_modal_cancel').text(option.cancelBtn) : $('#_modal_cancel').text('Cancel');

    if($('#_modal_notification').length) {
        $('#_modal_head').text(opt.head);
        $('#_modal_message').html(opt.msg);
        $('#_modal_cancel').hide();

        if(callbackFn !== null) {
            $('#_modal_message').replaceClass('text-center', 'text-left');
            $('#_modal_cancel').show();
			$('#_modal_ok').off('click');
            $('#_modal_ok').on('click', callbackFn);
            if(cancelCallBack !== null){
                $('#_modal_cancel').off('click');
                $('#_modal_cancel').on('click', cancelCallBack);
            }
        }
        else {
            $('#_modal_message').replaceClass('text-left', 'text-center');
        }

        $('#_modal_notification').modal('show');
    }
    else {
        if(callbackFn !== null) {
            $('.modal-confirm #_modal_head').text(opt.head);
            $('.modal-confirm #_modal_message').html(opt.msg).replaceClass('has-text-centered', 'has-text-left');
            $('.modal-confirm #_modal_cancel').hide();

            $('.modal-confirm #_modal_cancel').show();
            $('.modal-confirm #_modal_ok').off('click');
            $('.modal-confirm #_modal_ok').on('click', callbackFn);
            if(cancelCallBack !== null){
                $('.modal-confirm #_modal_cancel').off('click');
                $('.modal-confirm #_modal_cancel').on('click', cancelCallBack);
            }else {
                $('.modal-confirm #_modal_cancel').on('click', function(){
                    $('.modal-confirm').removeClass('is-active');
                });
            }
            $('.modal-confirm').addClass('is-active');
        }
        else {
            $('.modal.noti #_modal_head').text(opt.head);
            $('.modal.noti #_modal_message').html(opt.msg);
            $('.modal.noti #_modal_cancel').hide();

            if(opt.type == 'warning') {
                $('#_warn').show();
            }
            $('.modal.noti').addClass('is-active');
        }
    }
}
comm.modalNotice = function(title, img, comment) {
    var html = [];

    html.push('<div class="modal notice">');
    html.push('<div class="modal-background"></div>');
    html.push('<div class="modal-card" style="max-width: 450px;">');
    html.push('<div class="modal-card-head">');
    if(title) {
        html.push('<p class="modal-card-title"><i class="fad fa-microphone"></i>&nbsp;'+title+'</p><button class="delete" aria-label="close"></button>');
    }
    else {
        html.push('<p class="modal-card-title"><i class="fad fa-microphone"></i>&nbsp;Notice</p><button class="delete" aria-label="close"></button>');
    }
    html.push('</div>');
    html.push('<div class="modal-card-body">');
    html.push('<div class="content">');
    html.push('<figure>');
    html.push('<img alt="Notice" src="'+img+'">');
    html.push('</figure>');
    html.push('</div></div>');
    html.push('<div class="modal-card-foot">');
    html.push('<label for="notice_chk" class="checkbox"><input id="notice_chk" name="notice_chk" type="checkbox">&nbsp;')
    if(comment) {
        html.push(comment);
    }
    else {
        html.push('Don\'t show for a week');
    }
    html.push('</label></div></div></div>');
    $('body').append(html.join(''));
    $('body').addClass('modal-open');
    $('.modal.notice').addClass('is-active');
    $('.modal.notice .delete').on('click', comm.noticeClose);
};

comm.modalNoticeTxt = function(title, txt, comment) {
    var html = [];

    html.push('<div class="modal notice">');
    html.push('<div class="modal-background"></div>');
    html.push('<div class="modal-card" style="max-width: 450px;">');
    html.push('<div class="modal-card-head">');
    if(title) {
        html.push('<p class="modal-card-title"><i class="fas fa-microphone"></i>&nbsp;'+title+'</p><button class="delete" aria-label="close"></button>');
    }
    else {
        html.push('<p class="modal-card-title"><i class="fas fa-microphone"></i>&nbsp;Notice</p><button class="delete" aria-label="close"></button>');
    }
    html.push('</div>');
    html.push('<div class="modal-card-body">');
    html.push('<div class="content">');
    html.push('<figure>');
    html.push(txt);
    html.push('</figure>');
    html.push('</div></div>');
    html.push('<div class="modal-card-foot">');
    html.push('<label for="notice_chk" class="checkbox"><input id="notice_chk" name="notice_chk" type="checkbox">&nbsp;')
    if(comment) {
        html.push(comment);
    }
    else {
        html.push('Don\'t show for a week');
    }
    html.push('</label></div></div></div>');
    $('body').append(html.join(''));
    $('body').addClass('modal-open');
    $('.modal.notice').addClass('is-active');
    $('.modal.notice .delete').on('click', comm.noticeClose);
};
comm.myMegatelNotice = function(src, isImg) {

    if(isImg) {
        $('#_modalNoticeImg').empty();
        $('#_modalNoticeImg').append('<img src="/assets/imgs/popup/'+src+'" />');
    }
    else {
        $('#_modalNoticeMyMegatel').empty();
        $('#_modalNoticeMyMegatel').append(src);
    }


//    if($.cookie('outage-mymegatel-popup') != 1) {
        $('#_modal_image').modal('show');
//    }

//    $('#_modal_image').on('hidden.bs.modal', function (e) {
//       $.cookie('outage-mymegatel-popup','1',{expires:7,path:'/',domain:'megatel.co.nz'});
//    });
};


comm.noticeClose = function() {
    if($('#notice_chk').is(':checked')) {
        $.cookie('notice-onceaweek','1',{expires:7,path:'/',domain:'megatel.co.nz'});
    }
     $('body').removeClass('modal-open');
};
comm.joinModalOpen = function() {
    $('.modal.join').addClass('is-active');
    $('body').addClass('modal-open');
};
comm.joinModalClose = function() {
    $('body').removeClass('modal-open');
    if(window.location.href.indexOf('myMegatel') !== -1) {
        $('#_join_modal').modal('hide');
    }
    else {
        $('.modal').removeClass('is-active');
    }
};


comm.goHome = function() {
    location.href = '/';
};
comm.returnPage = function() {
    history.go(-1);
}
comm.capitalize = function() { // 각 단어의 첫글자를 대문자로
    var caps = $(this).val();
    caps = caps.charAt(0).toUpperCase() + caps.slice(1);
    $(this).val(caps);
};

comm.makePromotion = function(dataList, target, cloneObj, availableData) {

    var cgroup = 'ON';
    var clone = null;
    var arr = [];
    target.html('');
    if(!target.hasClass('owl-carousel')) {
       var owlNode = target.append('<div id="owlNode" class="testimonials owl-carousel navs carousel-items-2 columns-style-2"></div>');
    }

    for(var i=0; i < dataList.length; i++){
        var resObj = dataList[i];
        var showYN = 'Y';
        if(availableData!=undefined){
            $.each(availableData,function(i, v){
            <!-- console.log(i, v, resObj.icon); -->
                if(v == 'N'){
                    if(i=='broadband' && resObj.icon.indexOf('b')>=0){
                        showYN = 'N';
                    } else if(i=='power' && resObj.icon.indexOf('p')>=0){
                        showYN = 'N';
                    } else if(i=='gas' && resObj.icon.indexOf('g')>=0){
                        showYN = 'N';
                    }
                }
            });
        }
        <!-- console.log(showYN); -->
        if(showYN == 'Y' && (resObj.group == undefined  || resObj.group.indexOf('|'+cgroup)>=0)){
            clone = cloneObj.children().clone();
            clone.find('#planType').html(resObj.planType);
            if(resObj.cent) {
                clone.find('#price').text(resObj.price);
                clone.find('#cent').text(resObj.cent);
            } else {
                clone.find('#item_title').html(resObj.price);
                clone.find('.item-title').text('');
            }
            if(!resObj.planType) {
                clone.find('.title-wrap').addClass('d-flex');
                clone.find('.item-title-long').addClass('fit-center');
            }
            clone.find('#disc1').html(resObj.disc1);
            clone.find('.promotion-icon').addClass('icon-' + resObj.icon);
            if(resObj.disc) {
                for(var j = 0; j < resObj.disc.length; j++) {
                    var p = '<p class="main">'+resObj.disc[j]+'</p>';
                    clone.find('#itemContent').append(p);
                }
            }
            if(typeof resObj.badge != 'undefined') {
                clone.find('.badge').css('display', 'block');
                clone.find('.badge div').text(resObj.badge);
                clone.find('.top-bar').removeClass('top-bar');
                clone.find('#bundle').addClass('bundle-right');
            }
            else {
                clone.find('.badge').removeClass('badge');
                clone.find('#bundle').addClass('bundle-center');
            }
            if(resObj.tnc) {
                clone.find('#tnc').attr('href', resObj.tnc);
            }
            clone.find('#joinus').attr('data-pid', resObj.id);
            clone.find('#bundle strong').html(resObj.bundle);
        }
        arr.push(clone);
    }

    if(!owlNode) {
        target.append(arr);
    }
    else {
        $('#owlNode').append(arr);
    }
};


comm.makePromotion2 = function(dataList, target, cloneObj, availableData, curPG) {
    if(curPG==undefined) curPG = 'X';

    var cgroup = 'ON';
    var clone = null;
    var arr = [];
    target.empty();

    var $owl = $('.owl-carousel');
    $owl.trigger('destroy.owl.carousel');
    $owl.html($owl.find('.owl-stage-outer').html()).removeClass('owl-loaded');

	var bnw = '';
	var en_promo = '';
	if(availableData!=undefined){
		$.each(availableData,function(i, v){
		<!-- console.log(i, v, resObj.icon); -->
			if(i == 'bnw'){
				bnw = v;
			}
			else if(i == 'en_promo'){
				en_promo = v;
			}
		});
	}
	if(bnw=='') bnw = 'CH';

    for(var i=0; i < dataList.length; i++){
        var resObj = dataList[i];
        var showYN = 'Y';
        if(availableData!=undefined){
            $.each(availableData,function(i, v){
            <!-- console.log(i, v, resObj.icon); -->
                if(v == 'N'){
                    if(i=='broadband' && resObj.icon.indexOf('b')>=0){
                        showYN = 'N';
                    } else if(i=='power' && resObj.icon.indexOf('p')>=0){
                        showYN = 'N';
                    } else if(i=='gas' && resObj.icon.indexOf('g')>=0){
                        showYN = 'N';
                    }
                }
            });
        }

        ///////cross sale
        if(showYN == 'N' && (resObj.icon=='b'+curPG || resObj.icon=='bw'+curPG)) showYN = 'Y';

		//broadband network
		if( resObj.icon.indexOf('b')>=0 && resObj.bnw && resObj.bnw.indexOf('|'+bnw)<0 ) showYN = 'N';

        ///////Enable Promotion
        if( resObj.icon.indexOf('b')>=0 && en_promo!='Y' && resObj.en_pro=='Y') showYN = 'N';


        <!-- console.log(showYN); -->
        if(showYN == 'Y' && (!resObj.group  || resObj.group.indexOf('|'+cgroup)>=0)    ){
            clone = cloneObj.children().clone();
            clone.find('#topTitle').html(resObj.topTitle);
            clone.find('#planType').html(resObj.planType);
            clone.find('#bundleTyp').html(resObj.bundleTyp);
            if(resObj.cent) {
                clone.find('#price').html(resObj.price);
                if(resObj.viewCent == false) {
                    clone.find('#cent').text('');
                } else {
                    clone.find('#cent').text(resObj.cent);
                }
            } else {
                clone.find('#item_title').html(resObj.price);
                clone.find('.item-title').text('');
            }
            if(!resObj.planType) {
                clone.find('.item-title').css('padding-top', '31px');
            }
            if(resObj.disc1) {
                if(typeof resObj.disc1 === 'object') {
                    clone.find('#upSpeed').text(resObj.disc1.up);
                    clone.find('#downSpeed').text(resObj.disc1.down);
                }
                else if(typeof resObj.disc1 === 'string') {
                    clone.find('#disc1').html(resObj.disc1);
                }
            }
            else {
                clone.find('#disc1').remove();
                clone.find('.middle-area hr').remove();
            }

            clone.find('#itemContent').html(resObj.disc);

            if(typeof resObj.badge != 'undefined') {
                if(resObj.badge == 'Special Promotion') {
                    clone.find('#topTitle').removeClass('top-title');
                    clone.find('.badge-wrap').addClass('special');
                }
                clone.find('#bundle').addClass('bundle-right');
                clone.find('.badge').css('display', 'block');
                clone.find('.badge div').text(resObj.badge);
                clone.find('.top-bar').removeClass('top-bar');
            }
            else {
                clone.find('.badge').removeClass('badge');
                clone.find('#topTitle').removeClass('top-title');
                clone.find('#bundle').addClass('bundle-center');
            }
            if(resObj.tnc) {
                clone.find('#tnc').attr('href', resObj.tnc);
                clone.find('#tnc').attr('data-title', resObj.bundleTyp);
            }

            clone.find('.back-tit').html(resObj.back_tit);

            if(typeof resObj.back_ctn === 'object') {
                for(var j = 0; j < resObj.back_ctn.length; j++) {
                    var p = '<p>• '+resObj.back_ctn[j]+'</p>';
                    clone.find('.back-ctn').append(p);
                }
            }
            else if(typeof resObj.back_ctn === 'string') {
                clone.find('.back-ctn').html(resObj.back_ctn);
            }
            clone.find('#joinus').attr('data-pid', resObj.id);
            clone.find('#joinus').attr('data-bmax', resObj.bbIsMax);
            clone.find('#joinus').attr('data-fonly', resObj.bbFibreOnly);
            clone.find('#joinus').attr('data-icon', resObj.icon);
            clone.find('#bundle strong').html(resObj.bundle);
            clone.find('resObj.bundle')
        }
        arr.push(clone);
    }

    target.append(arr);
    comm.carousel(function() {
        target.on('changed.owl.carousel',function(){
            target.trigger('stop.owl.autoplay')
        });
    });
};

comm.menuDropdown = function() {
    $('#menuDropdown').slideToggle('fast');
};
comm.menuActive = function() {
    $('.navigation > .menu li').removeClass('current');
    $(this).addClass('current');
};
comm.preventMobileLink = function(e) {
    if(Const.WIDTH < 1088) {
        e.preventDefault();
    }
};
comm.langChange = function(e) {
    var code = $(this).data('code');
    Const.LANG = code;
console.log('code',code);
    $.ajax({
        type: 'GET',
        url: '/lang/'+code,
        dataType: 'text',
        success: function(response){
            location.reload();
        }
    });
};

comm.check_dpi = function() {
    Const.WIDTH = $(window).width();
    Const.HEIGHT = $(window).height();
    Const.DEV = getOSInfo();
};

comm.importJS = function(script, fn) {
    fn = typeof fn == 'function' ? fn : null;
    var s = document.createElement("script");
    s.src = script;
    s.onload = function(e){
        if(fn != null) {
            fn();
        }
    };
    document.head.appendChild(s);
}

comm.widget, comm.initAddressFinder = function(target, callback) {  //addressFinder 초기설정
    comm.widget = new AddressFinder.Widget(
        target
        , 'DCGW7B46KTLEJVMUFX8H'
        , 'NZ', {
            "address_params": {
                "post_box":0,
            }
            , "byline":false
        }
    );
    comm.widget.on('result:select', callback);
};

comm.addressFinder = function(target, callback) {
    var script = document.createElement('script');
    script.src = 'https://api.addressfinder.io/assets/v3/widget.js';
    script.async = true;
    script.onload = function() {
        comm.initAddressFinder(target,callback);
    };
    document.body.appendChild(script);
};

comm.callICP = function(path, formBox, callback, errCallback) {  //icp number 확인위한 ajax 통신
    if(path == '') return false;

    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });

    $.ajax({
        type: "POST",
        url: path,
        data: formBox,
        dataType: "json",
        success: function(response){
            // console.log(response);
            if(callback) callback(response);
            //callback(response);
        },
        error: function(response){
            if(errCallback) errCallback(response);
            else console.log(response);
        }
    });
};
comm.inputNotkor = function(e) {
    var input = $(this).val();
    var unit = $(this).data('unit');
    var len = input.length - unit.length;
    var data = e.originalEvent.data;

    var setCursorPosition = function( elem, pos ) {
        if( elem.setSelectionRange ) {
            elem.setSelectionRange(pos, pos);
        } else if( elem.createTextRange ) {
            var range = elem.createTextRange();
            range.collapse(true);
            range.moveEnd('character', pos);
            range.moveStart('character', pos);
            range.select();
        }
        return this;
    };

    if(/[^0-9]/.test(data)) {
        input = input.replace(/[^0-9]/g, '');
        if(input.length >= 1 && input.indexOf(unit) === -1) {
            $(this).val(input + ' '+ unit);
            setCursorPosition(this, $(this).val().length - unit.length - 1);
        }
        else {
            $(this).val(input);
        }
        return false;
    }
    else {
        if($(this).val().indexOf(unit) === -1) {
            $(this).val(input + ' '+ unit);
            setCursorPosition(this, 1);
            return false;
        }
    }

    setCursorPosition(this, len-1);
};
comm.ajaxPost = function(path, param, succBack, errBack) {
    var succBackFn = typeof succBack == 'function' ? succBack : null;
    var errBackFn = typeof errBack == 'function' ? errBack : function(err) {
        console.log(err);
        console.log(err.statusCode);
        if(err.status == 419) {
            location.reload();
        }
    };
    var options = {
        url         : path,
        type        : 'POST',
        dataType    : 'JSON',
        data        : param,
        timeout     : 20000,
    };

    if(typeof param == 'string' && comm.isJson(param)) {
        options.contentType = 'application/json';
    }

    options.success = function(data){
        if(succBackFn) {
            succBackFn(data);
        }
    };
    options.error = function(err){
        comm.loading.hide();
        errBackFn(err);
    };

    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': '1ss2oqhMr35Cb2WebxxUThKvrQBJBHO43ZgxsWLY'
        }
    });
    $.ajax(options);
};
comm.ajaxGet = function(path, param, succBack, errBack) {
    var succBackFn = typeof succBack == 'function' ? succBack : null;
    var errBackFn = typeof errBack == 'function' ? errBack : function(err) {
        console.log(err);
        console.log(err.statusCode);
        if(err.status == 419) {
            location.reload();
        }
    };

    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': '1ss2oqhMr35Cb2WebxxUThKvrQBJBHO43ZgxsWLY'
        }
    });
    $.ajax({
        url     : path,
        type    : 'GET',
        dataType: 'JSON',
        data    : param,
        timeout : 20000,
        success : function(data){
            if(succBackFn) {
                succBackFn(data);
            }
        },
        error : function(err){
            comm.loading.hide();
            errBackFn(err)
        }
    });
};

/***********************
options = {
    url: url
    type: 'POST',
    dataType: 'JSON',
    params: data
}
***********************/
comm.ajax = function(options, callback, errCallback) {

    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': '1ss2oqhMr35Cb2WebxxUThKvrQBJBHO43ZgxsWLY'
        }
    });

    $.ajax({
        url     : options.url,
        type    : options.type || 'POST',
        dataType: options.dataType || 'JSON',
        data    : options.params || {},
        timeout : 20000,
        success : function(data){
            if(typeof callback === 'function') {
                callback(data);
            }
        },
        error : function(err){
            comm.loading.hide();
            if(typeof errCallback === 'function') {
                errCallback(err);
            }
            else {
                if(err.status == 419) {
                    location.reload();
                }
            }
        }
    });

};

comm.isJson = function(str) {
    try {
        JSON.parse(str);
        return true;
    } catch (e) {
        return false;
    }
};

comm.addValidator = function() {
    // add method for validator checking
    $.validator.methods.matches = function( value, element, params ) {
        var re = new RegExp(params);
        return this.optional( element ) || re.test( value );
    };
    $.validator.methods.ccexp = function(value, element, params) {
        var minMonth = moment().format('MM');
        var minYear = moment().format('YY');
        var month, year = null;

        var exp = $(params).val().split('/');

        if(exp[0] && exp[1]) {
            month = parseInt(exp[0], 10);
            year = parseInt(exp[1], 10);
        }

        return (year > minYear || (year == minYear && month >= minMonth));
    };
};

comm.tooltip = function() {
    if(Const.DEV === 'Android' || Const.DEV === 'iPhone') {
        $('.popover').focusin(function() {
            $(this).addClass('active');
        });
        $('.popover').focusout(function() {
            $(this).removeClass('active');
        });
    }
};
comm.flipCard = function() {
    var front = $(this).closest('.flip-card').find('.flip-card-front');
    $(this).closest('.flip-card').toggleClass('inverse');

    $(front).hasClass('hide') ? setTimeout(function() {
        $(front).removeClass('hide');
    }, 300) : $(front).addClass('hide');
};

comm.setCustomSelect = function(target) {
    var clsName = target || 'custom-select';
    var x, i, j, l, ll, selElmnt, a, b, c;
    x = document.getElementsByClassName(clsName);
    l = x.length;

    var closeAllSelect = null;
    var event = new Event('change');

    for (i = 0; i < l; i++) {
      selElmnt = x[i].getElementsByTagName("select")[0];
      ll = selElmnt.length;
      a = document.createElement("DIV");
      a.setAttribute("class", "select-selected");
      a.id = selElmnt.name;
      a.innerHTML = selElmnt.options[selElmnt.selectedIndex].innerHTML;
      x[i].appendChild(a);
      b = document.createElement("DIV");
      b.setAttribute("class", "select-items select-hide");
      for (j = 1; j < ll; j++) {
        c = document.createElement("DIV");
        c.innerHTML = selElmnt.options[j].innerHTML;
        c.dataset.value = selElmnt.options[j].value;
        c.addEventListener("click", function(e) {
            var y, i, k, s, h, sl, yl;
            s = this.parentNode.parentNode.getElementsByTagName("select")[0];
            sl = s.length;
            h = this.parentNode.previousSibling;
            for (i = 0; i < sl; i++) {
              if (s.options[i].innerHTML == this.innerHTML) {
                s.selectedIndex = i;
                h.innerHTML = this.innerHTML;
                y = this.parentNode.getElementsByClassName("same-as-selected");
                yl = y.length;
                for (k = 0; k < yl; k++) {
                  y[k].removeAttribute("class");
                }
                s.dispatchEvent(event);
                s.value = this.dataset.value;
                this.setAttribute("class", "same-as-selected");
                break;
              }
            }
            h.click();
        });
        b.appendChild(c);
      }
      x[i].appendChild(b);
      a.addEventListener("click", function(e) {
          e.stopPropagation();
          closeAllSelect(this);
          this.nextSibling.classList.toggle("select-hide");
          this.classList.toggle("select-arrow-active");
        });
    }
    var closeAllSelect = function(elmnt) {
      var x, y, i, xl, yl, arrNo = [];
      x = document.getElementsByClassName("select-items");
      y = document.getElementsByClassName("select-selected");
      xl = x.length;
      yl = y.length;
      for (i = 0; i < yl; i++) {
        if (elmnt == y[i]) {
          arrNo.push(i)
        } else {
          y[i].classList.remove("select-arrow-active");
        }
      }
      for (i = 0; i < xl; i++) {
        if (arrNo.indexOf(i)) {
          x[i].classList.add("select-hide");
        }
      }
    }
    document.addEventListener("click", closeAllSelect);
};

// dl/dd/dt 펼치기 / 닫기
comm.accordion = function(callback) {
    var $dl = $('.__accordion');

    if( $dl.find('dt').hasClass('on') ) {
        $dl.find('.on').next().slideDown();
    }
    $dl.find('dt').off().on('click', function() {

        if(typeof callback !== 'undefined') {
            if(!callback()) {
                return false;
            }
        }

        function slideDown(target) {
            slideUp();
            $(target).addClass('on').next().slideDown({
                complete: function(){
                     $('html').animate({scrollTop: $(target).offset().top - 100}, 'fast');
                }
            });
        }

        function slideUp() {
            $('dt').removeClass('on').next().slideUp();
        };
        $(this).hasClass('on') ? slideUp() : slideDown($(this));
    });
};

/**************vendor script for action *****************/

comm.beefToggle = function() {
  /**
     * Accordions ===========================
     * Save DOM selectors.
     */
    var $container_class = $('.accordions');
    var $default_class = $('.beefup');
    var $toggle_buttons_class = $('.toggle-buttons');

    /**
     * default options.
     */
    var $default_options = {
        openSingle: true,
        openSpeed: 300,
        closeSpeed: 300
    };

    /**
     * default settings.
     */
    // we have accordions selector?
    if ($container_class.length) {

        // loop throw main containers
        $container_class.each(function() {
            // we have beefup selector?
            if ($default_class.length) {
                $(this).find($default_class).beefup($default_options);
            }
        });
    }

    // we have toggle buttons selector?
    if ($toggle_buttons_class.length) {
        $toggle_buttons_class.each(function() {

            var $this = $(this);
            var $beefup = $this.find($default_class).beefup($default_options);

            // open all
            $this.find('.toggle-open-all').on('click', function() {
                $beefup.open();
            });

            // close all
            $this.find('.toggle-close-all').on('click', function() {
                $beefup.close();
            });

            // open accordion using button
            $this.find('.buttons-group').find('.button').each(function(index) {
                $(this).on('click', function() {

                    if (!$(this).hasClass('toggle-open-all') && !$(this).hasClass('toggle-close-all')) {

                        $this.find($container_class).find($default_class).each(function(item) {

                            if (index === item) {
                                $beefup.click($(this));
                            }
                        });
                    }
                });
            });
        });
    }
};

comm.tabsList = function() {

    /**
     * Tabs ===========================
     * @source https://codepen.io/0zero4four/pen/PPjZzj
     */

    var TabBlock = {
        s: {
            animLen: 300
        },

        init: function() {
            TabBlock.bindUIActions();
            TabBlock.hideInactive();
        },

        bindUIActions: function() {
            $('.tabs').on('click', 'li', function() {
                TabBlock.switchTab($(this));
            });
        },

        hideInactive: function() {
            var $tabBlocks = $('.tabs-list');

            $tabBlocks.each(function(i) {
                var
                    $tabBlock = $($tabBlocks[i]),
                    $panes = $tabBlock.find('.tab-block'),
                    $activeTab = $tabBlock.find('li.is-active');

                $panes.hide();
                $($panes[$activeTab.index()]).show();
            });
        },

        switchTab: function($tab) {
            var $context = $tab.closest('.tabs-list');

            if (!$tab.hasClass('is-active')) {
                $tab.siblings().removeClass('is-active');
                $tab.addClass('is-active');

                TabBlock.showPane($tab.index(), $context);
            }
        },

        showPane: function(i, $context) {
            var $panes = $context.find('.tab-block');
            $panes.slideUp(TabBlock.s.animLen);
            $($panes[i]).slideDown(TabBlock.s.animLen);
        }
    };

    // we have tabs selector?
    if ($('.tabs-list').length) {
        TabBlock.init();
    }
};

comm.dropdown = function(dropdownEle) {

    var $dropdown = dropdownEle ? dropdownEle : $('.dropdown');

    // dropdown
    if ($dropdown.length) {
        $dropdown.each(function() {
            $(this).off().on('click', function() {
                $(this).toggleClass('is-active');
            });
        });
    }
};

comm.dropSelect = function(){
    comm.dropdown();
    $('.selector .dropdown-item').off().on('click', function () {
        var title = $(this).closest('.selector').find('.drop-select');
        var id = $(this).closest('.dropdown-menu').attr('id');
        var txt = $(title).data('value') !== '' ? $(title).data('value') + ' - ' + $(this).data('value') : $(this).data('value');
        $(title).text(txt);

        $(this).closest('.selector').find('.dropdown').addClass('is-selected');
        $('input[name='+id+']').val($(this).data('value')).trigger('change');
    });
}

comm.flexslider = function(target) {
    var $slider = $('.flexslider');
    var $slider_thumbnails = $('.flexslider.thumbnails');
    // var $slider_intro = $('.flexslider.intro');
    var $slider_intro = $(target);

    /**
     * default options.
     */
    var intro_options = {
        animation: "slide",
    };

    var thumbnails_options = {
        animation: "slide",
        controlNav: "thumbnails",
    };

    // show slider after load page content
    $slider_thumbnails.show();
    $slider_intro.show();

    // we have default slider selector?
    if ($slider_thumbnails.length) {
        $slider_thumbnails.flexslider(thumbnails_options);
    }

    if ($slider_intro.length) {
        $slider_intro.flexslider(intro_options);
    }
};

comm.carousel = function(callback) {
     /**
     * Save DOM selectors.
     */
    var $slider = $('.owl-carousel');
    var $slider_navs = $('.owl-carousel.navs');
    var $slider_dots = $('.owl-carousel.dots');
    var $slider_fullwidth = $('.owl-carousel.scrollbar');

    // check @rtl
    var html_dir = $('html').attr('dir');
    var is_rtl = false;
    if ($('body').hasClass('rtl') || $('html').hasClass('rtl') || html_dir == 'rtl') {
        is_rtl = true;
    }

    var auto = false;
    var dot = true;
    var nav = false;
    if($slider.hasClass('auto')) {
        auto = true;
    }
    if($slider.hasClass('no-dot')) {
        dot = false;
    }
    if($slider.hasClass('navs')) {
        nav = true;
    }

    /**
     * default options.
     */
    var default_options = {
        rtl: is_rtl,
        items: 1,
        loop: auto,
        smartSpeed: 1000,
        dots: dot,
        nav: nav,
        autoplay: auto,
        autoplayTimeout: 3000,
        autoplaySpeed: 1000,
        autoplayHoverPause: true,
    };

    // show carousel slider after load page content
    $slider.show();


    // we have navs slider selector?
    if ($slider.length) {

        var responsive = {
            // breakpoint from 0 up
            0: {
                items: 1,
                margin: 30
            },
            // breakpoint from 769 up
            769: {
                items: 3,
            },
            // breakpoint from 1088 up
            1088: {
                items: 3,
            },
            // breakpoint from 1280 up
            1280: {
                items: 3,
            }
        };
        $slider.each(function() {

            // custom items per class
            if ($(this).hasClass('carousel-items-2')) {
                default_options.items = 2;

                if ($(this).hasClass('no-margin')) {
                    default_options.margin = 0;
                    default_options.responsive = {
                        0: {
                            items: 1,
                            margin: 30
                        },
                        1088: {
                            items: 2,
                        }
                    };

                } else {
                    default_options.margin = 30;
                    default_options.responsive = {
                        0: {
                            items: 1,
                            // margin: 0,
                            margin: 30,
                        },
                        1088: {
                            items: 2,
                            margin: 30,
                        }
                    };
                }
            }

            if ($(this).hasClass('carousel-items-3')) {
                default_options.items = 3;
                if ($(this).hasClass('no-margin')) {
                    default_options.margin = 0;
                    responsive[0].margin = 30;
                    default_options.responsive = responsive;
                } else {
                    responsive[769].items = 2;
                    default_options.margin = 30;
                    default_options.responsive = responsive;
                }
            }

            if ($(this).hasClass('carousel-items-4')) {
                default_options.items = 4;

                if ($(this).hasClass('no-margin')) {
                    default_options.margin = 0;
                    responsive[0].margin = 30;
                    responsive[1280].items = 4;
                    default_options.responsive = responsive;
                } else {
                    default_options.margin = 30;
                    responsive[1280].items = 4;
                    default_options.responsive = responsive;
                }
            }

            if ($(this).hasClass('carousel-items-5')) {
                default_options.items = 5;
                if ($(this).hasClass('no-margin')) {
                    default_options.margin = 0;
                    responsive[0].margin = 30;
                    responsive[1280].items = 5;
                    default_options.responsive = responsive;
                } else {
                    default_options.margin = 30;
                    responsive[1280].items = 5;
                    default_options.responsive = responsive;
                }
            }

            if ($(this).hasClass('carousel-items-6')) {
                default_options.items = 6;
                if ($(this).hasClass('no-margin')) {
                    default_options.margin = 0;
                    responsive[0].margin = 30;
                    responsive[1280].items = 6;
                    default_options.responsive = responsive;
                } else {
                    default_options.margin = 30;
                    responsive[1280].items = 6;
                    default_options.responsive = responsive;
                }
            }
            // default 1 item
            $(this).owlCarousel(default_options);
        });

    } // end check $slider_navs

    if(typeof callback === 'function') callback();

};

/**
 * slider
 * */
comm.slideMake = function() {
  var itemWidth = $('.slide-outer').width();
  $('.slide-item').width(itemWidth);
  $('.slide_wrapper').width($('.slide-outer').width() * $('.slide-item').length);
  $(window).resize(function() {
    var itemWidth = $('.slide-outer').width();
    $('.slide-item').width(itemWidth);
    $('.slide_wrapper').width($('.slide-outer').width() * $('.slide-item').length);
    $act = $('.slide_wrapper').find('.active');
    var boxWidth = $('.slide-outer').width() * $act.index();
    $('.slide_wrapper').css('transform', 'translateX(-'+boxWidth+'px)');
  });
};
comm.slideLeft = function() {
  $act = $('.slide_wrapper').find('.active');
  var idx = $act.index();
  var len = $('.slide-item').length;
  var boxWidth = $('.slide-outer').width() * (idx - 1);

  if(idx == 0) return false;

  $act.css('display','none');
  $('.slide_wrapper').css('transform', 'translateX(-'+boxWidth+'px)');

  $act.removeClass('active');
  $act.prev().addClass('active');
};
comm.slideRight = function() {
  $act = $('.slide_wrapper').find('.active');
  var idx = $act.index();
  var len = $('.slide-item').length;
  var boxWidth = $('.slide-outer').width() * (idx + 1);

  if(idx == (len-1)) return false;

  $act.css('display', 'block');
  $act.next().css('display', 'block');
  $act.removeClass('active');
  $act.next().addClass('active');

  $('.slide_wrapper').css('transform', 'translateX(-'+boxWidth+'px)');

};

comm.isMobile = function() {
    return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
};

const calendar_date = {};
const calendar_month = {};
const calendar_year = {};
const datepickerInput = {};
    
comm.calendarInit = function(opt) {
    opt = opt ? opt : comm.calendarOpt;
    const beforeDate = opt.beforeDate || '';
    const afterDate = opt.afterDate || '';
    const disabledPast = opt.disabledPast || '';
    const disabledFuture = opt.disabledFuture || '';
    const id = opt.id || 'calendar';
console.log(opt);
    let state = null;
    
    let options = {  year: 'numeric', month: 'long' }
    calendar_date[id] = document.querySelector("#calendar_date");
    calendar_month[id] = document.querySelector("#calendar_month");
    calendar_year[id] = document.querySelector("#calendar_year");
    datepickerInput[id] = document.querySelector("#" + id || 'datepickerInput');

console.log(calendar_date);

    const init = function() {
        state = {
            current: new Date()
        };
        render();
    };
    const preMonth = function() {
        state.current.setMonth(state.current.getMonth()-1);
        render();
    };
    const nextMonth = function() {
        state.current.setMonth(state.current.getMonth()+1);
        render();
    };
    const preYear = function() {
        state.current.setYear(state.current.getFullYear()-1);
        render();
    };
    const nextYear = function() {
        state.current.setYear(state.current.getFullYear()+1);
        render();
    };
    const preYears = function() {
        state.current.setYear(state.current.getFullYear()-10);
        render();
    };
    const nextYears = function() {
        state.current.setYear(state.current.getFullYear()+10);
        render();
    };
    const showMonth = function() {
        calendar_month[id].className = 'calendar position-absolute';
        calendar_date[id].className = 'd-none position-absolute'
    };
    const showYear = function() {
        calendar_year[id].className = 'calendar position-absolute';
        calendar_month[id].className = 'd-none position-absolute'
    };
    const showCalendar = function() {
        let today = new Date();
        let todayDate = today.getFullYear()+'-'+(today.getMonth()+1)+'-'+today.getDate();
        calendar_date[id].className = 'calendar position-absolute';
        
        let els = document.getElementsByClassName("date");
        for(let i = 0; i < els.length; i++)
        {
            if(datepickerInput[id].value == els[i].value) {
                els[i].classList.add("active");
            }else {
                els[i].classList.remove("active");
            }
            if(todayDate == els[i].value) {
                els[i].classList.add("today");
            }
        }
    };

    const renderWeek = function() {
        let week = document.querySelector("#week");
        week.innerHTML = '';
        cal_days_labels = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
        for (var i = 0; i <= 6; i++) {
            week.innerHTML += '<div class="day">'+ cal_days_labels[i] + '</div>';
        }
    };
    

    const renderDate = function(date, list) {
        let cell = document.createElement("button");
        const startDate = new Date().toISOString().split('T')[0];
        
        this.selectDate = function(o) {
            datepickerInput[id].value = o.value;
            calendar_date[id].className = 'd-none position-absolute';
        };
        
        cell.className = "date" + (date.getMonth() === state.current.getMonth() ? "" : " fadeout");
        cell.setAttribute("onmousedown", "selectDate(this)");

        let month = (date.getMonth()+1);
        let day = date.getDate();
        if( month < 10 && day < 10 ) {
            month = '0' + month;
            day = '0' + day;
        }else if ( month < 10 ) {
            month = '0' + month;
        }else if ( day < 10 ) { 
            day = '0' + day;
        }

        if(disabledPast || disabledFuture || beforeDate || afterDate) {
            if(disabledPast && (startDate > date.toISOString().split('T')[0]) ) {
                cell.classList.add('fadeout');
                cell.setAttribute("disabled", true);
            }
            else if(disabledFuture && (startDate < date.toISOString().split('T')[0]) ) {
                cell.classList.add('fadeout');
                cell.setAttribute("disabled", true);
            }
            else if(beforeDate && beforeDate > date.toISOString().split('T')[0]) {
                cell.classList.add('fadeout');
                cell.setAttribute("disabled", true);
            }
            else if(afterDate && afterDate < date.toISOString().split('T')[0]) {
                cell.classList.add('fadeout');
                cell.setAttribute("disabled", true);
            }
            else {
                cell.setAttribute("value", (day + '/' + month + '/' + date.getFullYear()) );    
            }
           
            cell.textContent = date.getDate();
        }
        else {
            cell.setAttribute("value", (day + '/' + month + '/' + date.getFullYear()) );    
            cell.textContent = date.getDate();
        }
        list.appendChild(cell);
    }
    const renderMonth = function(mon, monlist) {
        months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];

        this.selectMonth = function(o){
            state.current.setMonth(o.value);
            render();
            calendar_month[id].className = 'd-none position-absolute';
            calendar_date[id].className = 'calendar position-absolute';
        };

        for (var i = 0; i <= 11; i++) {
            monlist.innerHTML += '<button class="mon" onclick="selectMonth(this);" value="'+ [i] + '">'+ months[i] + '</button>';
        }
    };

    const renderYears = function(years, yearlist) {
        let currentYear = state.current.getFullYear();
        let order = currentYear % 10;            
        let recentYear = currentYear - (order+1);
        
        this.selectYear = function(o){
            state.current.setYear(o.value);
            render();            
            calendar_year[id].className = 'd-none position-absolute';
            calendar_month[id].className = 'calendar position-absolute';
        };

        for (var i = 0; i < 12; i++) {
            yearlist.innerHTML += '<button class="mon" onclick="selectYear(this);" value="'+ (recentYear+i) + '">'+ (recentYear+i) + '</button>';
        }
    };

    const render = function() {
        let head = document.querySelector("#year-month");
        head.textContent = new Intl.DateTimeFormat('en-US', options).format(state.current);            
        // head.textContent = state.current.getFullYear() + " / " + (state.current.getMonth()+1);
        let list = document.querySelector("#list");
        list.innerHTML = ""; 

        let firstDate = new Date(state.current.getFullYear(), state.current.getMonth(), 1);
        let date = new Date(firstDate.getFullYear(), firstDate.getMonth(), 1);
        date.setDate(date.getDate() - date.getDay());

        while( date < firstDate ){
            renderDate(date, list);
            date.setDate(date.getDate()+1);
        }

        while( date.getMonth() === state.current.getMonth() ){
            renderDate(date, list);
            date.setDate(date.getDate()+1);
        }

        while( date.getDay() > 0 ){
            renderDate(date, list);
            date.setDate(date.getDate()+1);
        }

        let year = document.querySelector("#year");
        year.textContent = state.current.getFullYear();
        let monlist = document.querySelector("#monlist");
        monlist.innerHTML = "";
        let mon = (state.current.getMonth()+1);
        renderMonth(mon, monlist);

        let years = document.querySelector("#years");
        let currentYear = state.current.getFullYear();
        let order = currentYear % 10;
        let recentYear = currentYear - (order+1);
        years.textContent = ( recentYear +  " - " + (recentYear + 11) );
        let yearlist = document.querySelector("#yearlist");
        yearlist.innerHTML = "";            
        renderYears(years, yearlist);
    };

    renderWeek();
    init();

    
    
    const hideCalendar = function(){
        calendar_date[id].className = 'd-none position-absolute';
    };
    const toggleCalendar = function(o){
        const thisId = $(o).attr('id');
        console.log(thisId);
        console.log(calendar_date[thisId]);
        if (calendar_date[thisId].classList.contains("d-none") && calendar_year[thisId].classList.contains("d-none") && calendar_month[thisId].classList.contains("d-none") ) {
            showCalendar();
        } else {
            hideCalendar();
        }
    };
    
    const checkDate = function(o){
        let dateVal = o.value;
        let dateYear = dateVal.substr(4, 4);
        
        if ( dateVal.length == 8 ){                
            let dateMonth = dateVal.substr(2, 2);
            let dateDay = dateVal.substr(0, 2);
            if( dateDay > 31 ) {
                clearInput();
            } else {
                dateVal = dateDay + "/" + dateMonth + "/" + dateYear;
                o.value = dateVal;
                renderCalendar();
            }
            
        }else if(dateVal.length == 7) {
            let dateMonth = dateVal.substr(2, 1);
            let dateDay = dateVal.substr(0, 2);
            if( dateDay > 31 ) {
                clearInput();
            }else {
                dateVal = dateDay + "/0" + dateMonth + "/" + dateYear;
                o.value = dateVal;
                renderCalendar();
            }
        }
        function clearInput(){
            o.focus();
            o.value = '';
        }
        function renderCalendar(){
            let innerText = new Date(datepickerInput[id].value);
            state.current = innerText;
            hideCalendar();
            render();
        }
    };

    return {
        checkDate: checkDate,
        preMonth: preMonth,
        nextMonth: nextMonth,
        showMonth: showMonth,
        preYear: preYear,
        nextYear: nextYear,
        showYear: showYear,
        preYears: preYears,
        nextYears: nextYears,
        toggleCalendar: toggleCalendar
    };
};