var GroobeeUi,
    groobeeUi;

var graphToolTipOpt = {};
var test;

// $.widget( "ui.selectmenu", $.ui.selectmenu, {
//     _renderItem: function( ul, item ) {
//                            var that = this;
//        $.each( items, function( index, item ) {
//          that._renderItemData( ul, item );
//        });
//        $( ul ).find( "li:odd" ).addClass( "odd" );
//     }
// });
// $.widget( "ui.selectmenu", $.ui.selectmenu, {
// _renderItem: function( ul, item ) {
//  var li = $( "<li>" ),
//      wrapper = $( "<div>", { html: $(item.element[0]).text() } );
//  if ( item.disabled ) {
//      li.addClass( "ui-state-disabled" );
//  }

//  li.addClass('ttest')
//  return li.append( wrapper ).appendTo( ul );
// }
// _renderMenu : function( ul, items ) {
//  var that = this;
//  console.log(ul)
//  $.each( items, function( index, item ) {
//      that._renderItemData( ul, item );
//  });
//          $( ul ).find( "li:odd" ).addClass( "odd" );
// }
// })



GroobeeUi = (function() {
    var tag = {},
        obj = {},
        opt = {},
        win = window,
        doc = document,
        grbPrototype = GroobeeUi.prototype,
        layerClose = {
            bool: null
        },
        initFunc = {},
        _this;


    function GroobeeUi() {
        _this = this;

        (function initTag() {
            tag.page = {};
            tag.form = {
                checkboxs: $('.form-chk'),
                radios: $('.form-radio'),
                selects: $('.select-menu')
            }
            tag.btns = {
                sortLayer: $('.box-sort-layer'),
                updown: $('.btns-updown')
            }
            tag.tab = {
                wrap: $('.tab-box')
            }
            tag.scrollbar = {
                wrap: $('.scroll-box')
            }
            tag.toggleBtns = $('*[data-toggle-btn]');
            tag.takenFild = {
                wrap: $('.box-token-field ')
            }
            tag.layerSelect = {
                btnsAttr: '*[data-btn-layer]',
                btnClose: '[data-btn-close=layer]',
                wrap: $('.layer.layer-cmm'),
                btnSmall: '.layer.layer-cmm .btn-depth-small',
                btnMiddle: '.layer.layer-cmm .btn-depth-mid '
            }
            tag.datePicker = {
                btns: $('*[data-btns-func=datepicker]')
            }
        }());


        // 초기 설정
        (function initFunc() {
            new _this.init.select(tag.form.selects); // 셀렉트 초기화
            new _this.init.tab; // 텝 초기화
            new _this.init.toggleBtn; // 토글 버튼 초기화
            new _this.init.scrollBar; // 스크롤 버튼 초기화
            layerClose.obj = _this.init.layerSelect(tag.layerSelect); // 검색 레이어
            // _this.init.datePicker = new _this.init.datePicker // 달력 선택 초기화

            new _this.cmmFunc.docMouseUp;


        }());

        $.each($('textarea:not(.none-auto)'), function() {
            var offset = this.offsetHeight - this.clientHeight;
            var resizeTextarea = function(el) {
                // if (el.scrollHeight + offset > 106) {
                //  $(this).val($(this).val().substr(0, textCountLimit));
                //  return
                // };
                $(el).css('height', 'auto').css('height', el.scrollHeight + offset);
            };
            $(this).on('keyup input', function() { resizeTextarea(this); })
        });
    }
    grbPrototype.pages = {};

    grbPrototype.pages.cmm = function(argument) {
        new _this.btns.sortLayer;
        new _this.btns.updown;
        new _this.init.autoTextarea;
        new _this.init.datePicker // 달력 선택 초기화
        _this.init.takenFild = new _this.init.takenFild(tag.takenFild.wrap); // 토큰 필드
    }

    // segment
    grbPrototype.pages.segment = function(argument) {

        console.log(':::::::::: segment :::::::::: ');

        // 버튼 관련 함수 호출
        new _this.btns.sortLayer;
        new _this.btns.updown;
        new _this.init.autoTextarea;
        new _this.init.datePicker // 달력 선택 초기화
        _this.init.takenFild = new _this.init.takenFild(tag.takenFild.wrap); // 토큰 필드

        tag.page.list = {};
        tag.page.list.wrap = $('.segment.segment-list');
        tag.page.list.btnsFaover = tag.page.list.wrap.find('.btns-favor');

        // 텝 리스트 , 즐겨 찾기 관련 설정
        // $.each( $('.tab-box.type-page .tab-btns button') , function ( _idx , _elem) {

        //  $(_elem).on('mouseup' , function() {
        //      var oprateFunc = null ;
        //      if( $(this).closest('li').hasClass('type-list')){
        //          oprateFunc = function ( _elem ) {
        //              _elem.closest('tr').hasClass('hide') ? _elem.closest('tr').removeClass('hide') : null;
        //          }
        //      } else if( $(this).closest('li').hasClass('type-favor')){
        //          oprateFunc = function ( _elem ) {
        //              !_elem.hasClass('active') ? _elem.closest('tr').addClass('hide') : null;
        //          }
        //      }
        //      $.each( tag.page.list.btnsFaover , function ( _idx, _elem) {
        //          oprateFunc($(_elem))
        //      })
        //  });
        // });


        // 세그먼트 만들기 시첨 셀렉트
        $('.selet-viewpoint').selectmenu({
            change: function(event, ui) {
                var veiwpointElem = $(event.target).closest('.viewpoint');
                var classList = veiwpointElem[0].classList.value.split(' ');
                var typeViewText = {
                    default: 'viewpoint-default',
                    past: 'viewpoint-past',
                    current: 'viewpoint-current',
                    psnct: 'viewpoint-psnct'
                };
                var classes = null;

                $.each(classList, function(_idx, _data) {
                    switch (_data) {
                        case typeViewText.default:
                            classes = typeViewText.default;
                            break;
                        case typeViewText.past:
                            classes = typeViewText.past;
                            break;
                        case typeViewText.current:
                            classes = typeViewText.current;
                            break;
                        case typeViewText.psnct:
                            classes = typeViewText.psnct;
                            break;
                        default:
                            ;
                    }
                })
                console.log(ui.item.value);
                if (classes == typeViewText.past || classes == typeViewText.psnct) {
                    console.log('::::::::: datePicker - 초기화 :::::::::::')
                    // $('#reportrange').data('daterangepicker').setStartDate( startDay );
                    // $('#reportrange').data('daterangepicker').setEndDate( endDay );
                }
                (function function_name(argument) {
                    veiwpointElem
                        .removeClass(classes)
                        .addClass('viewpoint-' + ui.item.value);
                }());
            }
        });

    };
    // campagin
    grbPrototype.pages.campagin = function(argument) {

        console.log(':::::::::: campagin :::::::::: ');

        // 버튼 관련 함수 호출
        new _this.btns.sortLayer;
        new _this.btns.updown;
        new _this.init.autoTextarea;
        _this.init.datePicker = new _this.init.datePicker // 달력 선택 초기화
        _this.init.takenFild = new _this.init.takenFild(tag.takenFild.wrap); // 토큰 필드

        tag.page.list = {};
    };

    // recommend
    grbPrototype.pages.recommend = function(argument) {

        console.log(':::::::::: recommend :::::::::: ');

        // 버튼 관련 함수 호출
        new _this.btns.sortLayer;
        new _this.btns.updown;
        new _this.init.autoTextarea;
        _this.init.datePicker = new _this.init.datePicker // 달력 선택 초기화
        _this.init.takenFild = new _this.init.takenFild(tag.takenFild.wrap); // 토큰 필드

        // 알고리즘 토큰 설정
        tag.algorismTaken = {};
        tag.algorismTaken.wrap = $('.box-taken-algorism');
        if (tag.algorismTaken.wrap.length) {
            // $(document).on('click' , '.box-taken-algorism .close' , function (e) {
            //  $(this).closest('.taken').remove()
            // })
            // tag.algorismTaken.takens = tag.algorismTaken.wrap.find('.taken');
        }
    };

    // app push
    grbPrototype.pages.appPush = function(argument) {

        console.log(':::::::::: appPush :::::::::: ');

        // 버튼 관련 함수 호출
        new _this.btns.sortLayer;
        new _this.btns.updown;
        new _this.init.autoTextarea;
        _this.init.datePicker = new _this.init.datePicker // 달력 선택 초기화
        _this.init.takenFild = new _this.init.takenFild(tag.takenFild.wrap); // 토큰 필드

    };

    // ai segment
    grbPrototype.pages.aisegment = function(argument) {
        _this.init.takenFild = new _this.init.takenFild(tag.takenFild.wrap); // 토큰 필드
        _this.init.datePicker = new _this.init.datePicker // 달력 선택 초기화
    };

    //kakao
    grbPrototype.pages.kakao = function (argument) {
        console.log(':::::::::: kakao :::::::::: ');

        // 버튼 관련 함수 호출
        new _this.btns.sortLayer;
        new _this.btns.updown;
        new _this.init.autoTextarea ;
        _this.init.datePicker = new _this.init.datePicker // 달력 선택 초기화
        _this.init.takenFild = new _this.init.takenFild(tag.takenFild.wrap); // 토큰 필드

        tag.page.list = {};
    }

    //sms
    grbPrototype.pages.sms = function (argument) {
        console.log(':::::::::: sms :::::::::: ');

        // 버튼 관련 함수 호출
        new _this.btns.sortLayer;
        new _this.btns.updown;
        new _this.init.autoTextarea ;
        _this.init.datePicker = new _this.init.datePicker // 달력 선택 초기화
        _this.init.takenFild = new _this.init.takenFild(tag.takenFild.wrap); // 토큰 필드

        tag.page.list = {};
    }

    // monitoring
    grbPrototype.pages.monitoring = function(argument) {
        _this.init.takenFild = new _this.init.takenFild(tag.takenFild.wrap); // 토큰 필드
    };

    // init 세팅 함수
    grbPrototype.init = {
        select: function(_select) {
            var selects = _select;
            var appendVal = 'body';
            if (selects.length == 0) return;

            $.each(selects, function(_idx, _elem) {
                if ($(_elem).hasClass('set-custom')) return;

                // select menu layer 구조 위치 변수  설정
                if ($(_elem).closest('.box-controller').length) {
                    appendVal = '.box-controller';
                } else if ($(_elem).closest('.modal-wrap').length) {
                    appendVal = '#' + $(_elem).closest('.modal-wrap').attr('id');
                }
                var elemFunc = $(_elem).selectmenu({
                    create: function(event, ui) {
                        var eTarget = event.target;
                        $.each(eTarget.classList, function(_idx, _class) {
                            if (_class == 'select-menu') return;
                            $(event.target).closest('.form-select').addClass(_class);
                        });
                    },
                    change: function(event, ui) {

                    },
                    // appendTo: appendVal,
                    _renderMenu: function(ul, items) {
                        var that = this;
                        $.each(items, function(index, item) {
                            that._renderItemData(ul, item);
                        });
                        $(ul).find("li:odd").addClass("odd");
                    }
                });
                elemFunc.selectmenu('menuWidget').addClass('overflow');
                // console.log(elemFunc.selectmenu("option", "appendTo"))
                var objElement = elemFunc.selectmenu('instance');
                // select메뉴 타입 설정
                switch (objElement.element.data('selectType')) {
                    // 메뉴 최대 갯수 5개 제한 설정
                    case 'max':
                        objElement.menu.addClass('set-scroll');;
                        break;
                    case 'max-260':
                        objElement.menu.addClass('set-scroll-260');
                        break;
                    default:
                        return;
                }

            });
        },
        toggleBtn: function() {
            if (tag.toggleBtns.length == 0) return;
            $.each(tag.toggleBtns, function(_idx, _elem) {
                $(_elem).on('click', function() {
                    console.log(1111111111);
                    $(this).toggleClass('active');
                });
            });
        },
        tab: function() {
            if (tag.tab.wrap.length == 0) return;
            tag.tab.boxBtn = tag.tab.wrap.find('.tab-btns');
            tag.tab.boxCotn = tag.tab.wrap.find('.tab-btns');
            tag.tab.btns = tag.tab.boxBtn.find('button');
            $.each(tag.tab.btns, function(_idx, _elem) {
                $(_elem).on('click', function() {
                    $(this).closest('li').addClass('active');
                    $(this).closest('li').siblings('li').removeClass('active')
                });
            });
        },
        scrollBar: function(_elem) {
            const target = _elem || tag.scrollbar.wrap;
            if (tag.scrollbar.wrap.length == 0) return;
            $.each(target, function(_idx, _elem) {
                var option = {
                    theme: "dark",
                    // scrollButtons:{enable:true},
                    // snapAmount:50,
                    snapOffset: 5000,
                    // scrollbarPosition: "outside"
                }
                option.scrollbarPosition = $(_elem).hasClass('type-outside') ? 'outside' : 'inside';
                if (_idx == 3) {
                    option.snapOffset = 10;
                }
                $(_elem).mCustomScrollbar(option);
            })
        },
        takenFild: function(_wrap) {
            if (_wrap.length == 0) return;
            var tags = {},
                filed,
                intiFunc = {},
                _self = null,
                takenFild;

            tags.wrap = _wrap;

            function takenFild() {
                _self = this;
                _self.intiFunc.setFild(tags.wrap);

                //  Element Roop
                // $.each( tags.wrap , function ( _idx , _elem ) {
                //  var taken = $(_elem);
                //  var takenType = taken.data('takenType');

                //  // taken filded 설정
                //  var filed = taken.find('.token-field').tokenfield({
                //      showAutocompleteOnFocus: true
                //  }).on('tokenfield:initialize' , function (e) {
                //  }).on('tokenfield:createdtoken', function(e) {
                //      var eTarget = $(e.target).closest('.tokenfield');
                //      if ($(e.target).closest('.tokenfield').find('.token').length) {
                //          eTarget.addClass('invalid')

                //      }
                //  }).on('tokenfield:removedtoken', function(e) {
                //      var eTarget = $(e.target).closest('.tokenfield');
                //      if ($(e.target).closest('.tokenfield').find('.token').length == 0) {
                //          eTarget.removeClass('invalid')
                //      }
                //      // if( takenType == 'referer'){ // 리버러 url 입력 일 경우
                //      //  _self.setFunc.countReferer(filed , e);
                //      // }
                //  })


                //  // valide 체크로 placehoder 구현
                //  $(taken).find('.token-input').on('change input focusout', function(e) {
                //      var eType = e.type;
                //      if( eType == 'change' ){
                //          if ($(this).val().replace(/ /gi, "").length == 0) {
                //              $(this).closest('.tokenfield').removeClass('invalid');
                //          } else {
                //              $(this).closest('.tokenfield').addClass('invalid')
                //          };
                //      } else if( eType == 'input' && $(this).closest('.tokenfield').find('.token').length >= 1){
                //          if( $(this).val().replace(/ /gi, "").length == 0) return ;
                //          $(this).closest('.referer-url').addClass('active')
                //      } else if( eType == 'focusout' ){

                //      }
                //  });

                //  switch( takenType ){
                //      case 'addTag' : // 태그 추가
                //          _self.intiFunc.typeAddTag( filed )
                //      ;
                //      break;
                //      case 'referer' :
                //          _self.intiFunc.typeReferer( filed )
                //      ;
                //      break;
                //      default:;
                //  }
                // });

                // taken 라벨 삭제 버튼 이벤트 공통
                $(document).on('click', '.box-tag-lable.delete button', function() {
                    $(this).closest('.box-tag-lable').remove();
                });

            }

            takenFild.prototype.intiFunc = {
                setFild: function(_fild) {
                    $.each(_fild, function(_idx, _elem) {
                        var taken = $(_elem);
                        var takenType = taken.data('takenType');

                        // taken filded 설정
                        var filed = taken.find('.token-field').tokenfield({
                            showAutocompleteOnFocus: true
                        }).on('tokenfield:initialize', function(e) {}).on('tokenfield:createdtoken', function(e) {
                            var eTarget = $(e.target).closest('.tokenfield');
                            if ($(e.target).closest('.tokenfield').find('.token').length) {
                                eTarget.addClass('invalid')

                            }
                        }).on('tokenfield:removedtoken', function(e) {
                            var eTarget = $(e.target).closest('.tokenfield');
                            if ($(e.target).closest('.tokenfield').find('.token').length == 0 && $(".token-input").val().replace(/ /gi, "").length == 0) {
                                eTarget.removeClass('invalid')
                            }
                            // if( takenType == 'referer'){ // 리버러 url 입력 일 경우
                            //  _self.setFunc.countReferer(filed , e);
                            // }
                        })


                        // valide 체크로 placehoder 구현
                        $(taken).find('.token-input').on('change input focusout', function(e) {
                            var eType = e.type;
                            if (eType == 'change') {
                                if ($(this).val().replace(/ /gi, "").length == 0) {
                                    $(this).closest('.tokenfield').removeClass('invalid');
                                } else {
                                    $(this).closest('.tokenfield').addClass('invalid')
                                };
                            } else if (eType == 'input' && $(this).closest('.tokenfield').find('.token').length >= 1) {
                                if ($(this).val().replace(/ /gi, "").length == 0) return;
                                $(this).closest('.referer-url').addClass('active')
                            } else if (eType == 'focusout') {

                            }
                        });

                        // console.log(takenType);

                        switch (takenType) {
                            case 'addTag': // 태그 추가
                                _self.intiFunc.typeAddTag(filed);
                                break;
                            case 'referer':
                                _self.intiFunc.typeReferer(filed);
                                break;
                            default:
                                ;
                        }
                    });

                },
                typeAddTag: function(_filed) {

                    // console.log('typeAddTag');

                    var filed = _filed;

                    // 태그 리스트 내 추가 이벤트 등록
                    tags.fildList = $(tags.wrap).closest('*[data-add-tag="default"]');
                    // if (tags.fildList.find('.tag-list').length) {
                    $(document).on('click', '.tag-filter .tag-list li a', function(e) {
                        var valText = $(this)[0].childNodes[0];
                        $(filed).tokenfield('createToken', valText.data);
                        return false;
                    });
                    // }

                    // 태그추가 팝업 확인,취소 버튼 클릭
                    $(tags.fildList).find('*[data-btn-add-tag]').on('click', function() {
                        // 취소 클릭
                        if ($(this).data('btnAddTag') == 'cancel') {

                        }
                        // 등록(확인) 클릭
                        else if ($(this).data('btnAddTag') == 'confirm') {
                            var arrVal = $(filed).tokenfield('getTokens');
                            $.each(arrVal, function(_idx, _data) {
                                $('.table-option .tag .t-desc').prepend(createElem(_data.value)).ㅐ
                            });

                            function createElem(_data) {
                                _data = replaceLTGT(_data);
                                return '<span class="box-tag-lable delete"><span class="txt">' + _data + '</span><button type="button">close</button></span>'
                            }

                        }
                        $(filed).tokenfield('destroy');
                        $(filed).val('');
                        $(filed).tokenfield();
                    });
                },
                typeReferer: function(_filed) {
                    var filed = _filed;

                    // url 입력 초기 클릭
                    $(document).on('click', '.referer-url', function(e) {
                        e.stopPropagation();
                        var eTarget = $(e.target),
                            refererElem = eTarget.closest('.referer-url');

                        if (refererElem.hasClass('active')) return;
                        $(this).addClass('active');
                        $(this).data('insertType', 'text');
                        $(this).attr('data-insert-type', 'text');
                        // console.log($(this));
                        if ($(this).find('*[data-taken-type]').data('takenType') == 'referer') {
                            $(this).find('.placeholder').addClass('active')
                        } else {
                            $(this).find('input.token-input').focus();
                        }

                        $.each(refererElem.find('.token'), function(index, item) {
                            $(item).find('.token-label').css('max-width', '388px');
                        });

                    });

                    // 입력 탑입 관련 버튼
                    $(document).on('click', '.btns-referer .ico', function(e) {
                        if ($(this).data())
                            var dataVal = null,
                                elemReferer = $(this).closest('.referer-url'),
                                targetInput = null;
                        if ($(this).hasClass('text')) {
                            dataVal = 'text';
                            targetInput = '.token-input';
                        } else if ($(this).hasClass('file')) {
                            dataVal = 'file';
                            targetInput = '.input-txt input';
                        }
                        if (elemReferer.data('insertType') == dataVal) return;
                        // $(this).addClass('active').siblings().removeClass('active');
                        elemReferer.data('insertType', dataVal);
                        elemReferer.attr('data-insert-type', dataVal);
                        elemReferer.find(targetInput).focus();
                    });

                    // 파일 업로드 이벤트
                    $(document).on('click dblclick drop dragover dragend', '.referer-url  .input-file', function(e) {
                        var eType = e.type;
                        if (eType == 'dblclick') {
                            $(this).closest('.input-file').find('label').trigger('click')
                        } else if (eType == 'drop') {
                            $(this).closest('.input-file').removeClass('over')
                        } else if (eType == 'dragover') {
                            $(this).closest('.input-file').addClass('over')
                        }
                    });

                    // 파일 업로드 이벤트
                    $(document).on('input', '.referer-url  .input-file input[type=file]', function(e) {
                        var thisVal = $(this).val().split(/\\/g).slice(-1)[0];
                        $(this).closest('.box-file-upload').find('.input-txt input').val(thisVal).attr('value', thisVal)
                    });

                    // // 확인 , 취소 버튼 클릭
                    // $(document).on('click' , '.referer-url .box-foot .btns-default' , function (e) {
                    //  console.log($(this));
                    //
                    //  var refererElem = $(this).parent().parent().parent();
                    //
                    //  console.log(refererElem);
                    //
                    //  if( $(this).data('btnType') == 'cancel'){ // 취소 버튼 클릭
                    //      refererElem.find('.token').remove();
                    //  }
                    //
                    //  // else if($(this).data('btnType') == 'confirm'){ // 완료 버튼 클릭
                    //  //  var showingTokenCnt = 1;
                    //  //  var inputWidth = refererElem.find('.box-inner').width() - 80;   // 외 n건에 대한 보정치
                    //  //  var itemWidthSum = 0;
                    //  //  var isOverflow = false;
                    //  //
                    //  //  $.each(refererElem.find('.token'), function(index, item) {
                    //  //      itemWidthSum += item.getBoundingClientRect().width;
                    //  //      if (inputWidth >= itemWidthSum) {
                    //  //          if (index > 0) {
                    //  //              showingTokenCnt++;
                    //  //          }
                    //  //      } else {
                    //  //          isOverflow = true;
                    //  //      }
                    //  //
                    //  //      $(item).show();
                    //  //  });
                    //  //
                    //  //  // 1개일때는 over-item 적용하지 않음.
                    //  //  if (refererElem.find('.token').length == 1)
                    //  //      isOverflow = false;
                    //  //
                    //  //  //  외 o건 노출 처리
                    //  //  // 외 n건의 width : 약 62px
                    //  //  if( isOverflow ){
                    //  //      $.each(refererElem.find('.token'), function(index, item) {
                    //  //          if (index == 0 && item.getBoundingClientRect().width >= 388) {  // 특정 width로 한정
                    //  //              $(item).find('.token-label').css('max-width', '320px');
                    //  //          }
                    //  //
                    //  //          if (index + 1 > showingTokenCnt) {
                    //  //              $(item).hide();
                    //  //          }
                    //  //      });
                    //  //
                    //  //      var moreTxt = '외 ' + (refererElem.find('.token').length - showingTokenCnt) + '건';
                    //  //      refererElem.addClass('over-item');
                    //  //      refererElem.find('.box-token-field').data('etcVal' , moreTxt);
                    //  //      refererElem.find('.box-token-field').attr('data-etc-val' , moreTxt);
                    //  //  } else {
                    //  //      refererElem.removeClass('over-item');
                    //  //  }
                    //  // }
                    //
                    //  refererElem.find('.box-file-upload input').val('');
                    //  refererElem.find('.token-input').val('');
                    //  refererElem.removeClass('active')
                    //
                    //  return false;
                    // })

                    // tokenfield close event
                    $(document).on('click', "div.token a.close", function(e) {
                        $(this).parent().remove();
                        return false;
                    });

                    function closedReferer() {}
                }
            }
            takenFild.prototype.setFunc = {
                countReferer: function(_filed, e) {
                    var eTarget = $(e.target);
                    console.log('countReferer')
                    $(document).on('click', '.segment-make-list .referer-url', function(e) {
                        console.log(e)
                    })
                    eTarget.closest('.referer-url').addClass('acitve')
                    // if(eTarget.closest('.tokenfield').find('.token').length < 2){
                    //  eTarget.closest('.referer-url').removeClass('active');
                    // }
                }
            }

            return new takenFild;
        },
        // 검색 레이어
        layerSelect: function(_objElem) {
            var elems = _objElem;
            var targetLayer = null;
            var activetLayer = null;
            var _that = this;
            var _self = null;
            var eType = null;
            var objValue = null;
            var activeMidBtn = null
            var layerSelect = function(argument) {
                $(document).on('mouseenter mouseleave click', elems.btnsAttr, function(e) {
                    var eTarget = $(e.target);
                    _self = $(this);
                    eType = e.type;
                    if (eType == 'mouseenter') {
                        _self.addClass('layer-hover');
                    } else if (eType == 'mouseleave') {
                        _self.removeClass('layer-hover');
                    } else if (eType == 'click' && (eTarget.hasClass('layer-hover') || eTarget.closest('.layer-hover')) ){
                        targetLayer = $('.layer[data-layer-type=' + $(this).data('btnLayer') + ']');
                        activetLayer = $('.layer.active[data-layer-type]');
                        if (activetLayer.length) { // clsoe
                            console.log('layer :: clsoe');
                            activetLayer.removeClass('active');
                            _self.removeClass('active');
                            layerClose.bool = false;
                        } else { // open
                            console.log('layer :: open');
                            objValue = {
                                offset: $(this).offset(),
                                height: $(this).outerHeight(),
                                width: $(this).outerWidth()
                            }
                            layerClose.bool = true;
                            if (_self.hasClass('active')) {
                                _self.removeClass('active');
                            } else {
                                _self.addClass('active');
                                targetLayer.addClass('active');
                            }

                            targetLayer.css({
                                'top': (objValue.offset.top + objValue.height) + 'px',
                                'left': objValue.offset.left + 'px',
                                'width': objValue.width + 'px'
                            });
                            if ($(this).data('setValue') == 'default' || $(this).data('setValue') == null || $(this).data('setValue') == undefined) return;
                            activeMidBtn = targetLayer.find('*[data-select-val=' + $(this).data('setValue') + ']');
                            targetLayer.find('.active').removeClass('active');
                            activeMidBtn.addClass('active');
                            if (targetLayer.find('.btn-depth-mid').length) {
                                activeMidBtn.closest('ul').siblings('.btn-depth-mid').addClass('active');
                            }

                        }
                    }
                });
            }
            $.each([tag.layerSelect.btnSmall, tag.layerSelect.btnClose, tag.layerSelect.btnMiddle], function(_idx, _target) {
                $(document).on('click', _target, function(argument) {
                    if ($(this).hasClass('btn-depth-mid')) {
                        $(this).toggleClass('active');
                    } else {
                        // 기본 내용 버튼 클릭
                        if ($(this).hasClass('btn-depth-small')) {
                            $('.form-select.search .btns-area.active')
                                .text($(this).text())
                                .data('setValue', $(this).data('selectVal'))
                                .attr('data-set-value', $(this).data('selectVal'))
                        }
                        layerClose();
                    }
                });
            })


            // $(document).on('click' ,  , function (argument) {
            //  layerClose();
            // });

            layerSelect.prototype.closeFunc = function(e) {
                var eTarget = e.target;
                if (!$(eTarget).closest('.layer-cmm').length) {
                    if ($(eTarget).hasClass('layer-hover') && $(eTarget).hasClass('active')) return;
                    layerClose.bool = false;
                    layerClose()
                }
            }

            function layerClose(argument) {
                $('.form-select.search .active').removeClass('active');
                $('.layer.active').removeClass('active');
            }
            return new layerSelect;
        },
        autoTextarea: function() {
            // $.each($('.form-textarea.auto-height textarea'), function() {
            //  var offset = this.offsetHeight - this.clientHeight;
            //  var resizeTextarea = function(el) {
            // if (el.scrollHeight + offset > 106) {
            //  $(this).val($(this).val().substr(0, textCountLimit));
            //  return
            // };
            //  $(el).css('height', 'auto').css('height', el.scrollHeight + offset);
            // };
            // $(this).on('keyup input', function() { resizeTextarea(this); })
            // });
        },
        // 달력 선택
        datePicker: function(argument) {
            if (tag.datePicker.btns.length == 0) return;
            var _self = null;

            function datePicker(argument) {
                _self = this;
                var startDay = moment().subtract(7, 'days').format('YYYY-MM-DD');
                var endDay = moment().subtract(1, 'days').format('YYYY-MM-DD');
                var dateType = 'YYYY-MM-DD';
                var thisContainer = null;

                $.each(tag.datePicker.btns, function(_idx, _elem) {
                    var minDateData = null;
                    const todayMoment = moment();
                    const todayDate = todayMoment.subtract(0, 'days').format('YYYY-MM-DD');
                    const todaySetDate = todayMoment.subtract(1, 'days').format('YYYY-MM-DD');
                    const caleandarBtn = $(_elem).find('button')[0];
                    const reangeObj = {
                        'default' : {
                            '최근 7일': [moment().subtract(7, 'days'), moment().subtract(1, 'days')],
                            '최근 14일': [moment().subtract(14, 'days'), moment().subtract(1, 'days')],
                            '최근 30일': [moment().subtract(30, 'days'), moment().subtract(1, 'days')],
                            '최근 60일': [moment().subtract(60, 'days'), moment().subtract(1, 'days')],
                            '최근 90일': [moment().subtract(90, 'days'), moment().subtract(1, 'days')]
                        },
                        '30~365' : {
                            '최근 30일': [moment().subtract(30, 'days'), moment().subtract(1, 'days')],
                            '최근 60일': [moment().subtract(60, 'days'), moment().subtract(1, 'days')],
                            '최근 90일': [moment().subtract(90, 'days'), moment().subtract(1, 'days')],
                            '최근 180일': [moment().subtract(180, 'days'), moment().subtract(1, 'days')],
                            '최근 1년': [moment().subtract(365, 'days'), moment().subtract(1, 'days')]
                        }
                    }
                    var maxDate = false;
                    if( caleandarBtn.dataset.setDate){// button에 data-set-date attribute가 있을 경우 반응형 설정
                        groobeeUi.init.observer(caleandarBtn, function (_mutation, observer) {
                            const mutation = _mutation[0];
                            if(mutation.type == 'attributes' && mutation.attributeName == 'data-set-date'){
                                const calendar = $(_elem).data('daterangepicker');
                                const setDate = mutation.target.dataset.setDate;
                                const newValue = setDate.indexOf('~') > 0 ? setDate.split('~') : [setDate];
                                calendar.setStartDate(newValue[0]);
                                calendar.setEndDate(newValue[1] || newValue[0]);
                            }
                        })
                    }
                    var dateText = caleandarBtn.dataset.setDate == undefined ? startDay + ' ~ ' + endDay : setDateCaculate(caleandarBtn);
                    if ($(_elem).hasClass('one')) {
                        dateText = $(_elem).data('startDate') === undefined ? moment().subtract(0, 'days').format('YYYY-MM-DD') : $(_elem).data('startDate');
                        minDateData = $(_elem).data('minDate') ? $(_elem).data('minDate') : dateText;
                    }
                    $(_elem).find('button')[0].childNodes[0].textContent = dateText;
                    if( $(_elem).find('button').data('setDate') !== undefined ){
                        maxDate = todaySetDate
                    } else if($(_elem).data('maxDate') !== undefined  ){
                        maxDate = $(_elem).data('maxDate')
                    }

                    // 시간 포함 타입 일경우 1
                    if ($(_elem).hasClass('time')) {}
                    thisContainer = $(_elem).daterangepicker({
                        autoApply: false,
                        singleDatePicker: true,
                        oneDatePicker: $(_elem).hasClass('one') ? true : false,
                        timeSelect: $(_elem).hasClass('time'),
                        maxDate30: $(_elem).hasClass('max-date-31'),
                        minDate: minDateData,
                        maxDate: maxDate,
                        ranges: $(_elem).data('rangeType') ? reangeObj[$(_elem).data('rangeType')] : reangeObj['default'],
                        locale: {
                            format: dateType,
                            applyLabel : $(_elem).hasClass('max-date-31') ? '조회' : '확인'
                        },
                    }, _self.setSelect);

                    $(_elem).on('show.daterangepicker' , function (ev, model) {
                        const btnElement = model.element;
                        btnElement.addClass('active');
                        if(model.element.hasClass('end')){
                            model.container.find('.drp-calendar td.available.active div').trigger('mousedown.daterangepicker')
                        }
                    })

                    // 시작 & 종료일 타입 시작일 종료일 확인시 적용 이벤트 콜백
                    if($(_elem).closest('*[data-set-datepicker=startAndEnd]').length){
                        $(_elem).on('apply.daterangepicker' , function (ev, model) {
                            const target = $(ev.currentTarget);
                            const boxStartEnd = $(model.element).closest('*[data-set-datepicker=startAndEnd]');
                            const startObj = boxStartEnd.find('.box-calendar-range.start').data('daterangepicker');
                            const endObj = boxStartEnd.find('.box-calendar-range.end').data('daterangepicker');
                            const startDate = startObj.startDate.format('YYYY-MM-DD');
                            const endDate = endObj.startDate.format('YYYY-MM-DD');
                            setTimeout(function (argument) {
                                if( target.hasClass('start') ){ // 시작일시 버튼 클릭 조건
                                    console.log()
                                    const countDay = moment.duration(moment(endDate).diff(moment(startDate))).asDays();
                                    let minDate = target.data('daterangepicker').startDate.format('YYYY-MM-DD');
                                    const timeData = {
                                        start : startObj.getter.date.start.time ,
                                        end : endObj.getter.date.start.time,
                                    }
                                    let setEndDate = countDay < 0 ? moment(minDate).subtract(-6, 'days').format('YYYY-MM-DD') : endDate;
                                    const startHour = moment(`${setEndDate} ${timeData.start[0]}:${timeData.start[1]}`);
                                    const endHour = moment(`${endDate} ${timeData.end[0]}:${timeData.end[1]}`);
                                    const countTime = moment.duration(endHour.diff(startHour)).asHours() ;
                                    const nextTime = {};

                                    if( countDay == 0 && countTime < 1){ // 시작, 종료일 1시간 이하 일 경우
                                        const hourElem01 =  endObj.timeSelector.hourElem01.find('select');
                                        const minuteElem01 =  endObj.timeSelector.minuteElem01.find('select');
                                        const changeTime = moment(startHour).subtract(-1, 'hour').format('HH:mm').split(':');
                                        nextTime[String(changeTime[0])] = changeTime[1];
                                        console.log(`startDate : ` , startDate , countTime, setEndDate ,endDate, nextTime)
                                        console.log(setEndDate);
                                        if(timeData.start[0] == '23') {
                                            setEndDate = moment(setEndDate).subtract(-1, 'days').format('YYYY-MM-DD')
                                            minDate = moment(setEndDate).subtract(0, 'days').format('YYYY-MM-DD')
                                        } ;
                                        // debugger;
                                    } else if(countDay < 0){
                                    }
                                    endObj.updateMinDate(minDate); // 시작일 기준 disable 처리
                                    endObj.setOneDate(setEndDate,nextTime );
                                } else if( target.hasClass('end') && moment(startDate).isSame(endDate) )  { // 종료일 버튼 클릭 || 현재일과 종료일 동일

                                };

                            });
                            // 시작일시 버튼 클릭시 시간이 종료일 시간이 이전 이라면 자동 1시간 뒤로 자동 및 설정
                        });

                    }
                    $(_elem).on('showCalendar.daterangepicker' , function (ev, model) { // 최대 31일 이상 선택 되는 경우 작업
                        if(!$(_elem).hasClass('max-date-31')) return ;
                        const container = model.container;
                        const dateLength = container.find('.in-range:not(.off)').length;
                        if(dateLength + 1 > 31){
                            container.addClass('disabled-max-30')
                            container.find('.applyBtn').attr('disabled' , '')
                        } else {
                            container.removeClass('disabled-max-30')
                            container.find('.applyBtn').removeAttr('disabled')
                        }
                    })
                     // hideCalendar.daterangepicker
                    $(_elem).on('hide.daterangepicker' , function (ev, model) {
                        const btnElement = model.element;
                        btnElement.removeClass('active');
                        btnElement.removeClass('failNdayMax');
                    })

                    var dateArr = $(_elem).find('button').text().split('~');
                    $(_elem).data('daterangepicker').setStartDate(dateArr[0]);
                    $(_elem).data('daterangepicker').setEndDate(dateArr[1]);
                });

                function setDateCaculate (_btn) {
                    const dateText = $(_btn).data('setDate') || _btn.textContent ;
                    const todayDate = moment().subtract(0, 'days').format('YYYY-MM-DD');
                    let startDay = '';
                    let endDay = '';
                    if( dateText.indexOf('~') > 0){ // single Date , range Date 구분 조건
                        const dateArr = dateText.split('~');
                        startDay = moment(dateArr[0]);
                        endDay = moment(dateArr[1]);
                    } else {
                        startDay = todayDate == dateText ? moment().subtract(1, 'days') : moment(dateText);
                        endDay = moment(dateText).subtract(7, 'days');
                    }

                    let setDate =  _btn.closest('.box-calendar-range').classList.contains('max-date-31') ? endDay.format('YYYY-MM-DD') + ' ~ ' + startDay.format('YYYY-MM-DD') : startDay.format('YYYY-MM-DD') + ' ~ ' + endDay.format('YYYY-MM-DD');
                    return setDate ;
                }
            }
            datePicker.prototype.setSelect = function(_start, _end) {
                if (this == window) return;
                var startDate = _start.format('YYYY-MM-DD'),
                    endDate = this.oneDatePicker ? '' : ' ~ ' + _end.format(' YYYY-MM-DD');
                this.element.find('button')[0].childNodes[0].textContent = startDate + endDate;
                // console.log('datePicker.prototype.setSelect')
                // this.element.find('button').html(_start.format('YYYY-MM-DD') + ' ~ ' + _end.format(' YYYY-MM-DD'));

            }
            datePicker.prototype.setTimePick = function(_elem, _btns) {
                console.log(elem)
                var elem = {};
                var valTime = null;
                elem.container = _elem;
                elem.wrap = _btns;
                elem.timeBox = elem.container.find('.drp-time');
                elem.starHr = elem.timeBox.find('.form-select select').eq(0).val();
                elem.starMn = elem.timeBox.find('.form-select select').eq(1).val();
                if (!elem.container.hasClass('oneDate')) {
                    elem.endHr = elem.timeBox.find('.form-select select').eq(2).val();
                    elem.endMn = elem.timeBox.find('.form-select select').eq(3).val();
                    valTime = elem.container.find('.chk-all input').is(':checked') ? '00:00 ~ 23:59' : elem.starHr + ':' + elem.starMn + ' ~ ' + elem.endHr + ':' + elem.endMn;
                } else {
                    valTime = elem.container.find('.chk-all input').is(':checked') ? '00:00 ~ 23:59' : elem.starHr + ':' + elem.starMn;
                }
                elem.wrap.find('span').text(valTime);

            }
            return new datePicker;
        },
        // 추천 에디터
        boxRecommendResize: function() {
            var grbItemBox = $('.grb-item-box');
            if (grbItemBox.hasClass('type-col')) {
                var grbBoxWidth = grbItemBox.find('.grb-list-wrap').innerWidth();
                var setLength = grbItemBox.data('setLength');
                var pdLeft;
                switch (setLength) {
                    case 3:
                        pdLeft = 55;
                        break;
                    case 4:
                        pdLeft = 40;
                        break;
                    case 5:
                        pdLeft = 32;
                        break;
                    case 6:
                        pdLeft = 28;
                        break;
                }
                var cellWidth = (grbBoxWidth - (pdLeft * (setLength - 1))) / setLength;
                grbItemBox.find('.grb-list-wrap li').css({
                    'width': Math.floor(cellWidth) + 'px',
                    'padding-left': pdLeft + 'px'
                })
            } else if (grbItemBox.hasClass('type-row')) {
                var grbBoxHeight = grbItemBox.innerHeight();
                var tatalHeight = 480;
                var cellHeight = Math.floor((grbBoxHeight - 480) / 3);
                grbItemBox.css('width', cellHeight + 'px')
            }
        },
        observer: function (_target , _callBackFunc) { // elemenet 반응형 설정 함수
            const targetNode = _target.jquery ? _target[0] : _target;
            const config = { attributes: true, childList: true, subtree: true };

            // 변화를 감지할 콜백 함수를 정의합니다.
            const callback = function(mutationsList, observer) {
                _callBackFunc(mutationsList ,observer)
            };

            // 새로운 MutationObserver 인스턴스를 생성하고 설정합니다.
            const observer = new MutationObserver(callback);
            observer.observe(targetNode, config);

        }

    }
    grbPrototype.btns = {
        sortLayer: function() {
            if (tag.btns.sortLayer == 0) return;
            var btns = tag.btns.sortLayer;
            /*$.each(btns.find('> .txt'), function(_idx, _elem) {
                $(_elem).on('click', function() {
                    var _that = $(this);
                    var thisBtns = $(this).closest(btns);
                    thisBtns.toggleClass('active')
                    $(document).on('mouseup', function(e) {
                        var eTarget = e.target;
                        if (!$(eTarget).closest(thisBtns).length) {
                            thisBtns.removeClass('active')
                        }
                    })
                });
            });*/
            // 추천, 캠페인 관련 페이지 임시
            /*
                        $(document).on('click', '.box-sort-layer .txt', function() {
                            if ($(this).closest('.recommend-list').length || $(this).closest('.campaign-list').length) return;
                            console.log(333333333333331313);
                            var _that = $(this);
                            var thisBtns = $(this).closest('.box-sort-layer');
                            thisBtns.toggleClass('active')
                            $(document).on('mouseup', function(e) {
                                var eTarget = e.target;
                                if (!$(eTarget).closest(thisBtns).length) {
                                    thisBtns.removeClass('active')
                                }
                            })
                        });
            */

        },
        updown: function() {
            if (tag.btns.updown == 0) return;
            var btns = tag.btns.updown;
            // $.each(btns, function(_idx, _elem) {
            //  $(_elem).on('click', function() {
            //      var elemData = $(this).data('sortDate');
            //      var _that = $(this);
            //      $.each(btns, function(_idx, _elem) {
            //          if (!_that.is($(_elem))) {
            //              setDateAttr($(this), 'sort-date', 'default');
            //          }
            //      });
            //      switch (elemData) {
            //          case 'up':
            //              setDateAttr($(this), 'sort-date', 'down');
            //              break;
            //          case 'down':
            //              setDateAttr($(this), 'sort-date', 'up');
            //              break;
            //          default:
            //              setDateAttr($(this), 'sort-date', 'down');
            //      }

            //  });
            // });

            $(document).on('click', '.btns-updown[data-sort-date]', function() {
                // 추천, 캠페인 관련 페이지 임시
                if ($(this).closest('.recommend-list').length || $(this).closest('.campaign-list').length) return;
                var elemData = $(this).data('sortDate');
                var _that = $(this);
                $.each(btns, function(_idx, _elem) {
                    if (!_that.is($(_elem))) {
                        setDateAttr($(this), 'sort-date', 'default');
                    }
                });
                switch (elemData) {
                    case 'up':
                        setDateAttr($(this), 'sort-date', 'down');
                        break;
                    case 'down':
                        setDateAttr($(this), 'sort-date', 'up');
                        break;
                    default:
                        setDateAttr($(this), 'sort-date', 'down');
                }
            });
        }
    }

    grbPrototype.cmmFunc = {
        docMouseUp: function(argument) {
            $(document).on('mouseup', function(e) {
                if( e.target == $('*[data-btn-layer]')[0] ||  e.target.closest('*[data-btn-layer]') ) return;
                new layerClose.obj.closeFunc(e);
            });
            (function(argument) {
                // body...
            }());
        }
    }


    return GroobeeUi;
}());


function setDateAttr(_elem, _name, _val) {
    _elem.data(_name, _val);
    _elem.attr('data-' + _name, _val);
}

$(function() {
    groobeeUi = new GroobeeUi;

});

function boxRecommendResize(_grbItemBox) {

    var grbItemBox = _grbItemBox || $('.grab-recommend-list');
    if (grbItemBox.first().hasClass('type-col')) {
        var grbBoxWidth = grbItemBox.find('.grb-list-wrap').innerWidth();
        var setLength = grbItemBox.data('setLength');
        var pdLeft;
        switch (setLength) {
            case 3:
                pdLeft = 55;
                break;
            case 4:
                pdLeft = 40;
                break;
            case 5:
                pdLeft = 32;
                break;
            case 6:
                pdLeft = 28;
                break;
        }
        var cellWidth = (grbBoxWidth - (pdLeft * (setLength - 1))) / setLength;
        grbItemBox.find('.grb-list-wrap li').css({
            'width': Math.floor(cellWidth) + 'px',
            'padding-left': pdLeft + 'px'
        });
        if (grbItemBox.hasClass('slide-pc') && grbItemBox.hasClass('line-one')) {
            console.log(Math.floor(cellWidth), grbItemBox.find('.grb-title').height(), grbItemBox.find('.grb-swiper-button').height() / 2)
            var topValue = (Math.floor(cellWidth / 2) + grbItemBox.find('.grb-title').height()) - (grbItemBox.find('.grb-swiper-button').height() / 2);
            grbItemBox.find('.grb-swiper-button').css('top', topValue)

        }
    } else if (grbItemBox.hasClass('type-row')) {
        console.log(2222222222222)
        var grbBoxHeight = grbItemBox.innerHeight();
        var tatalHeight = 480;
        var cellHeight = Math.floor((grbBoxHeight - 480) / 3);
        grbItemBox.css('width', cellHeight + 'px')
    }
}

// 그래프 컬러값
var graphColorObj = {
    a: '#27478c',
    b: '#4782ff',
    c: '#a2c0ff',
    d: '#4444ab',
    e: '#7272e5',
    f: '#b7b2f2',
    g: '#21767b',
    h: '#37b6bd',
    i: '#80e9eb',
    j: '#315f42',
    k: '#7acda5',
    l: '#b5fae0',
    m: '#d3af65',
    n: '#ffdb7e',
    o: '#fff195',
    p: '#c46355',
    q: '#ff8d79',
    r: '#ffc6b1',
    s: '#ce3146',
    t: '#ee3d57',
    u: '#fcabb6'
}
var graphAbnColorObj = {
    a: '#27478c',
    b: '#4782ff',
    c: '#a2c0ff',
    d: '#7272e5',
    e: '#b7b2f2',
    f: '#37b6bd',
    g: '#80e9eb',
    h: '#ffdb7e',
    i: '#ff8d79',
    j: '#ee3d57',
    z: '#b1b4b7',
}

graphToolTipOpt.recommend = {};
graphToolTipOpt.campaign = {};
graphToolTipOpt.dashboard = {};
graphToolTipOpt.appPush = {};
graphToolTipOpt.kakao = {};
graphToolTipOpt.sms = {};

// 추천 통계
graphToolTipOpt.recommend.default = {
    line: {
        color: graphAbnColorReturn(['a', 'b', 'c']),
        tp: {
            headerFormat: '<span class="tit-tooltip">{point.key}</span><table class="box-txt">',
            pointFormat: '<tr><th class="txt-tooltip"><p class="dot" style="background:{series.color}; "></p>{series.name}</th>' +
                ' <td class="txt-tooltip">{point.y}</td></tr>',
            footerFormat: '</table>',
            shared: true,
            useHTML: true,
            backgroundColor: 'rgba(38,37,59,0.9)',
            borderRadius: '5'
        }
    },
    stick: {
        color: graphAbnColorReturn(['a', 'b', 'c']),
        tp: {
            headerFormat: '<span class="tit-tooltip">{point.key}</span><table class="box-txt">',
            pointFormat: '<tr><th class="txt-tooltip"><p class="dot" style="background:{series.color}; "></p>{series.name}</th>' +
                ' <td class="txt-tooltip">{point.y}</td></tr>',
            footerFormat: '</table>',
            shared: true,
            useHTML: true,
            backgroundColor: 'rgba(38,37,59,0.9)',
            borderRadius: '5'
        }
    }
}


graphToolTipOpt.recommend.algorithm = {
    donut: {
        color: graphColorReturn('all'),
        tp: {
            enabled: true,
            headerFormat: '',
            pointFormat: '<span class="tit-tooltip">{point.name}</span><table class="box-txt">' +
                '<tr>' +
                '<th class="txt-tooltip"><p class="dot" style="background:{point.color};"></p>{point.title}</th>' +
                '<td class="txt-tooltip">{point.y}</td>' +
                '</tr>' +
                '<tr>' +
                '<th class="txt-tooltip"><p class="dot" style="background:{point.color};"></p>비중</th>' +
                '<td class="txt-tooltip">{point.rate} %</td>' +
                '</tr>',
            footerFormat: '</table>',
            useHTML: true,
            shared: true,
            backgroundColor: 'rgba(38,37,59,0.9)',
            borderRadius: '5'
        }
    },
    stick: {
        color: graphColorReturn('all'),
        tp: {
            enabled: true,
            headerFormat: '',
            pointFormat: '<span class="tit-tooltip">{point.name}</span><table class="box-txt">' +
                '<tr>' +
                '<th class="txt-tooltip"><p class="dot" style="background:{point.color};"></p>{point.title}</th>' +
                '<td class="txt-tooltip">{point.y}{point.itemUnit}</td>' +
                '</tr>' +
                '<tr>' +
                '<th class="txt-tooltip"><p class="dot" style="background:{point.color};"></p>순위</th>' +
                '<td class="txt-tooltip">{point.rank} 위</td>' +
                '</tr>',
            footerFormat: '</table>',
            useHTML: true,
            shared: false,
            backgroundColor: 'rgba(38,37,59,0.9)',
            borderRadius: '5',
            followPointer: true,
            followTouchMove: true
        }
    }
}

// 캠페인 통계
graphToolTipOpt.campaign.default = {
    line: {
        color: graphAbnColorReturn(['a', 'b', 'c']),
        tp: {
            headerFormat: '<span class="tit-tooltip">{point.key}</span><table class="box-txt">',
            pointFormat: '<tr><th class="txt-tooltip"><p class="dot" style="background:{series.color}; "></p>{series.name}</th>' +
                ' <td class="txt-tooltip">{point.y}</td></tr>',
            footerFormat: '</table>',
            shared: true,
            useHTML: true,
            backgroundColor: 'rgba(38,37,59,0.9)',
            borderRadius: '5'
        }
    },
    stick: {
        color: graphAbnColorReturn(['a', 'b', 'c']),
        tp: {
            headerFormat: '<span class="tit-tooltip">{point.key}</span><table class="box-txt">',
            pointFormat: '<tr><th class="txt-tooltip"><p class="dot" style="background:{series.color}; "></p>{series.name}</th>' +
                ' <td class="txt-tooltip">{point.y}</td></tr>',
            footerFormat: '</table>',
            shared: true,
            useHTML: true,
            backgroundColor: 'rgba(38,37,59,0.9)',
            borderRadius: '5'
        }
    }
}

graphToolTipOpt.campaign.abn = {
    line: {
        color: graphAbnColorReturn(['all']),
        tp: {
            headerFormat: '<span class="tit-tooltip">{point.key}</span><p class="tit-sub">노출 수</p><table class="box-txt">',
            pointFormat: '<tr><th class="txt-tooltip"><p class="dot" style="background:{series.color}; "></p>{series.name}</th>' +
                ' <td class="txt-tooltip">{point.y}</td></tr>',
            footerFormat: '</table>',
            shared: false,
            useHTML: true,
            backgroundColor: 'rgba(38,37,59,0.9)',
            borderRadius: '5',
            followPointer: true,
            followTouchMove: true

        }
    },
    stick: {
        color: graphAbnColorReturn(['all']),
        tp: {
            headerFormat: '<span class="tit-tooltip">{point.key}</span><p class="tit-sub">노출 수</p><table class="box-txt">',
            pointFormat: '<tr><th class="txt-tooltip"><p class="dot" style="background:{series.color}; "></p>{series.name}</th>' +
                ' <td class="txt-tooltip">{point.y}</td></tr>',
            footerFormat: '</table>',
            shared: false,
            useHTML: true,
            backgroundColor: 'rgba(38,37,59,0.9)',
            borderRadius: '5',
            followPointer: true,
            followTouchMove: true
        }
    }
}

graphToolTipOpt.campaign.dynamicDefault = {
    line: {
        color: graphAbnColorReturn(['a', 'b', 'c', 'd']),
        tp: {
            headerFormat: '<span class="tit-tooltip">{point.key}</span><table class="box-txt">',
            pointFormat: '<tr><th class="txt-tooltip"><p class="dot" style="background:{series.color}; "></p>{series.name}</th>' +
                ' <td class="txt-tooltip">{point.y} %</td></tr>',
            footerFormat: '</table>',
            shared: true,
            useHTML: true,
            backgroundColor: 'rgba(38,37,59,0.9)',
            borderRadius: '5',
            followPointer: true,
            followTouchMove: true

        }
    },
    stick: {
        color: graphAbnColorReturn(['a', 'b', 'c', 'd']),
        tp: {
            headerFormat: '<span class="tit-tooltip">{point.key}</span><table class="box-txt">',
            pointFormat: '<tr><th class="txt-tooltip"><p class="dot" style="background:{series.color}; "></p>{series.name}</th>' +
                ' <td class="txt-tooltip">{point.y} %</td></tr>',
            footerFormat: '</table>',
            shared: true,
            useHTML: true,
            backgroundColor: 'rgba(38,37,59,0.9)',
            borderRadius: '5',
            followPointer: true,
            followTouchMove: true
        }
    }
}

graphToolTipOpt.campaign.dynamicAbn = {
    line: {
        color: graphAbnColorReturn(['all']),
        tp: {
            headerFormat: '<span class="tit-tooltip">{point.key}</span><table class="box-txt">',
            pointFormat: '<tr><th class="txt-tooltip"><p class="dot" style="background:{series.color}; "></p>{series.name}</th>' +
                ' <td class="txt-tooltip">{point.y}</td></tr>',
            footerFormat: '</table>',
            shared: false,
            useHTML: true,
            backgroundColor: 'rgba(38,37,59,0.9)',
            borderRadius: '5',
            followPointer: true,
            followTouchMove: true

        }
    },
    stick: {
        color: graphAbnColorReturn(['all']),
        tp: {
            headerFormat: '<span class="tit-tooltip">{point.key}</span><table class="box-txt">',
            pointFormat: '<tr><th class="txt-tooltip"><p class="dot" style="background:{series.color}; "></p>{series.name}</th>' +
                ' <td class="txt-tooltip">{point.y}</td></tr>',
            footerFormat: '</table>',
            shared: false,
            useHTML: true,
            backgroundColor: 'rgba(38,37,59,0.9)',
            borderRadius: '5',
            followPointer: true,
            followTouchMove: true
        }
    }
}

graphToolTipOpt.campaign.dynamicUrlDefault = {
    line: {
        color: graphAbnColorReturn(['a', 'b', 'c']),
        tp: {
            headerFormat: '<span class="tit-tooltip">{point.key}</span><table class="box-txt">',
            pointFormat: '<tr><th class="txt-tooltip"><p class="dot" style="background:{series.color}; "></p>{series.name}</th>' +
                ' <td class="txt-tooltip">{point.y}</td></tr>',
            footerFormat: '</table>',
            shared: true,
            useHTML: true,
            backgroundColor: 'rgba(38,37,59,0.9)',
            borderRadius: '5',
            followPointer: true,
            followTouchMove: true

        }
    },
    stick: {
        color: graphAbnColorReturn(['a', 'b', 'c']),
        tp: {
            headerFormat: '<span class="tit-tooltip">{point.key}</span><table class="box-txt">',
            pointFormat: '<tr><th class="txt-tooltip"><p class="dot" style="background:{series.color}; "></p>{series.name}</th>' +
                ' <td class="txt-tooltip">{point.y}</td></tr>',
            footerFormat: '</table>',
            shared: true,
            useHTML: true,
            backgroundColor: 'rgba(38,37,59,0.9)',
            borderRadius: '5',
            followPointer: true,
            followTouchMove: true
        }
    }
}

graphToolTipOpt.campaign.dynamicUrlAbn = {
    line: {
        color: graphAbnColorReturn(['all']),
        tp: {
            headerFormat: '<span class="tit-tooltip">{point.key}</span><table class="box-txt">',
            pointFormat: '<tr><th class="txt-tooltip"><p class="dot" style="background:{series.color}; "></p>{series.name}</th>' +
                ' <td class="txt-tooltip">{point.y}</td></tr>',
            footerFormat: '</table>',
            shared: false,
            useHTML: true,
            backgroundColor: 'rgba(38,37,59,0.9)',
            borderRadius: '5',
            followPointer: true,
            followTouchMove: true

        }
    },
    stick: {
        color: graphAbnColorReturn(['all']),
        tp: {
            headerFormat: '<span class="tit-tooltip">{point.key}</span><table class="box-txt">',
            pointFormat: '<tr><th class="txt-tooltip"><p class="dot" style="background:{series.color}; "></p>{series.name}</th>' +
                ' <td class="txt-tooltip">{point.y}</td></tr>',
            footerFormat: '</table>',
            shared: false,
            useHTML: true,
            backgroundColor: 'rgba(38,37,59,0.9)',
            borderRadius: '5',
            followPointer: true,
            followTouchMove: true
        }
    }
}

graphToolTipOpt.dashboard.default = {
    line: {
        color: ['#4782ff', '#a2c0ff'],
        tp: {
            headerFormat: '<span class="tit-tooltip">{point.key}</span><p class="tit-sub"></p><table class="box-txt">',
            pointFormat: '<tr><th class="txt-tooltip"><p class="dot" style="background:{series.color}; "></p>{series.name}</th>' +
                ' <td class="txt-tooltip">{point.y}</td></tr>',
            footerFormat: '</table>',
            shared: false,
            useHTML: true,
            backgroundColor: 'rgba(38,37,59,0.9)',
            borderRadius: '5',
            followPointer: true,
            followTouchMove: true

        }
    }
}

// 앱푸시
graphToolTipOpt.appPush.default = {
    line: {
        color: graphAbnColorReturn(['a', 'b' , 'c'])
    },
    stick: {
        color: graphAbnColorReturn(['a', 'b' , 'c'])
    }
}

// 카카오
graphToolTipOpt.kakao.default = {
    line: {
        color: graphAbnColorReturn(['a', 'b', 'c'])
    },
    stick: {
        color: graphAbnColorReturn(['a', 'b', 'c'])
    }
}

// sms
graphToolTipOpt.sms.default = {
    line: {
        color: graphAbnColorReturn(['a', 'b', 'c'])
    },
    stick: {
        color: graphAbnColorReturn(['a', 'b', 'c'])
    }
}

function graphColorReturn(_type) {
    var arr = [];
    if (_type == 'all') {
        for (val in graphColorObj) {
            arr.push(graphColorObj[val])
            // console.log();
        }
    } else if (Array.isArray(_type)) {
        $.each(_type, function(_idx, _val) {
            arr.push(graphColorObj[_val]);
        })
    }
    return arr;
}

function graphAbnColorReturn(_type) {
    var arr = [];
    if (_type == 'all') {
        for (val in graphAbnColorObj) {
            arr.push(graphAbnColorObj[val])
            // console.log();
        }
    } else if (Array.isArray(_type)) {
        $.each(_type, function(_idx, _val) {
            arr.push(graphAbnColorObj[_val]);
        })
    }
    return arr;
}

function replaceLTGT(_str) {
    return _str.split('<').join('&lt;').split('>').join('&gt;');
}