function usingDevice($target, type) {
    let $this = $target;
    let device = $this.data(type + "-use-device") || "";
    let isDesktop = document.preDesktopSize;
    let isUse = true;
    switch (device.toLowerCase()) {
        case "mobile":
        case "m":
            isUse = isDesktop === false;
            break;
        case "desktop":
        case "d":
            isUse = isDesktop === true;
            break;
        default:
            isUse = true;
            break;
    }

    return isUse;
}
// #region --- Binding Click Event ---
; (function ($, window, document, undefined) {
    let BindingClickEvents = function (evt) {
        let $target = $(this);
        let actions = $target.data("click");
        if (!actions) {
            return;
        }
        actions = actions.split(",");
        for (let i = 0, l = actions.length; i < l; ++i) {
            if (actions[i].substr(0, 2) === "g-") {
                handleClickEvents(actions[i], $target, evt);
            }
        }
    };
    let handleClickEvents = function (type, $target, evt) {
        if (usingDevice($target, type) === false) {
            return false;
        }
        switch (type) {
            case "g-groupfilter":
                groupFilter($target, type);
                break;
            case "g-groupfilternew":
                groupFilterNew($target, type);
                break;
            case "g-popup":
                fnPop_Up($target, type);
                break;
            case "fnTabs":
                fnTabs($target, type);
                break;
        }
    };
    $(document).on("click", "[data-click]", BindingClickEvents);

    let groupFilter = function ($target, trigger) {
        let $this = $target;
        let no = $this.data('no');
        let $selected = $this.find('li.active');
        let selectedKey = $selected.data('groupfilter-key');
        let filters = $(document).find('[data-' + trigger + ']');

        for (var i = 0; i < filters.length; ++i) {
            let $element = $(filters[i]);
            let key = $element.data('groupfilter-key');

            if (selectedKey === key) {
                $element.show();
                $element.css('display', '');
            } else if (no == $element.data('no')) {
                $element.css('display', 'none');
            }
        }
    }

    let groupFilterNew = function ($target, trigger) {
        let $this = $target;
        let no = $this.data('no');
        let $selected = $this.find('li.active');
        let selectedKey = $selected.data('groupfilter-key');        
        let filters = $(document).find('[data-' + trigger + ']');

        for (var i = 0; i < filters.length; ++i) {
            let $element = $(filters[i]);
            let key = $element.data('groupfilter-key');
            let keySec = $element.data('groupfilter-key-sec');

            if (selectedKey === key) {
                $element.show();
                $element.css('display', 'inline-block');
            } else if (selectedKey === keySec) {
                $element.show();
                $element.css('display', '');
            } else if (no == $element.data('no')) {
                $element.css('display', 'none');
            }
        }
    }

    let fnPop_Up = function ($target, trigger) {
        let $this = $target;
        let target = $this.data('popup-target');
        let popUp;
        if (!!target) {
            popUp = $(document).find('[data-' + trigger + '="' + target + '"]');
        } else {
            popUp = $this.find('[data-' + trigger + ']');
            if (!popUp.length) {
                popUp = $this.parent().find('[data-' + trigger + ']');
            }
        }

        if (!!popUp.length && popUp.length === 1) {
            let $el = $(popUp);
            $el.css('text-align', 'left');

            let $html = popUp.find('[data-temp-src]');
            let url = $html.data('temp-src');
            $html.attr('src', url);

            $.fancybox.open($el, {
                smallBtn: true,
                toolbar: false,
                btnTpl: {
                    smallBtn: '<a data-fancybox-close="" style="cursor: pointer;" class="close" title="Close"></a>'
                }
            });
        }

        return false;
    };

    let fnTabs = function ($target, trigger) {
        let $this = $target;
        let key = $this.data("tab-target");
        let targetElements = $(document).find("[data-" + trigger + "]");
        for (let ix = 0, length = targetElements.length; ix < length; ++ix) {
            let $element = $(tabsElement[ix]);
            if ($html.data('tab-key') == key) {
                $element.css('display', '');
            } else {
                $element.css('display', 'none');
            }
        }
    };
})(jQuery, window, document);
// #endregion

// #region --- Binding Change Event ---
; (function ($, window, document, undefined) {
    let BindingChangeEvents = function (evt) {
        let $target = $(this);
        let actions = $target.data("change");
        if (!actions) {
            return;
        }
        actions = actions.split(",");
        for (let i = 0, l = actions.length; i < l; ++i) {
            if (actions[i].substr(0, 2) === "g-") {
                handleChangeEvents(actions[i], $target, evt);
            }
        }
    };
    let handleChangeEvents = function (type, $target, evt) {
        switch (type) {
            case "g-datafilter":
                dataFilter($target, type);
                break;
            case "g-linkage":
                linkage($target, type);
                break;
        }
    };
    $(document).on("change", "select[data-change]", BindingChangeEvents);

    let dataFilter = function ($target, trigger) {
        let $this = $target;
        let no = $this.data('no');

        let $selected = $this.find('option:selected');
        let selectedKey = $selected.data('datafilter-key');
        let filters = $(document).find('[data-' + trigger + ']');
        for (let i = 0, l = filters.length; i < l; ++i) {
            let $element = $(filters[i]);
            let key = $element.data('datafilter-key');
            if (selectedKey === key) {
                $element.css('display', '');
            } else if (no == $element.data('no')) {
                $element.css('display', 'none');                
            }
        }
    };

    let linkage = function ($target, trigger) {
        let findContent = function (trigger, targetKey) {
            let $els = $(document).find('[data-' + trigger + ']');
            let match = $els.filter('[data-linkage-key="' + targetKey + '"]');
            let mismatch = $els.filter('[data-linkage-key!="' + targetKey + '"]');
            match.css('display', '');
            mismatch.css('display', 'none');
            if (!!match.length) {
                mismatch.css('display', 'none');
            }
        };

        let $this = $target;
        let $selected = $this.find('option:selected');
        let targetKey = '';
        for (let ix = 0, length = $selected.length; ix < length; ++ix) {
            if ($selected[ix].parentNode.tagName === "SELECT") {
                targetKey = $($selected[ix]).data('linkage-target');
                break;
            }
        }

        let next = $this.data('linkage-next');
        let $next = $this.parent().parent().find('select[data-linkage="' + next + '"]');
        if (!!$next.length) {
            let $els = $next.find('option');
            let match = $els.filter('[data-linkage-key="' + targetKey + '"]');
            let mismatch = $els.filter('[data-linkage-key!="' + targetKey + '"]');
            //match.css('display', '');
            //mismatch.css('display', 'none');
            handleOption(match, mismatch);
            if (!!match.length) {
                $next.css('display', '');
                $(match[0]).prop('selected', true).change();
            } else {
                $next.css('display', 'none');
                findContent(trigger, targetKey);
            }
        } else {
            findContent(trigger, targetKey);
        }

        let previous = $this.data('linkage');
        let $previous = $this.parent().parent().find('select[data-linkage="' + previous + '"]');
        if (!!$previous.length) {
            targetKey = $selected.data('linkage-target');
        }
    };

    function handleOption(arrShow, arrHide) {
        for (let ix = 0, length = arrHide.length; ix < length; ++ix) {
            if (arrHide[ix].parentNode.tagName === "SELECT") {
                $(arrHide[ix]).wrap('<span style="display: none;"></span>');
            }
        }
        for (let ix = 0, length = arrShow.length; ix < length; ++ix) {
            if (arrShow[ix].parentNode.tagName === "SPAN") {
                $(arrShow[ix]).unwrap('span');
            }
        }
    }

})(jQuery, window, document);
// #endregion

// #region --- Binding Event ---
; (function ($, window, document, undefined) {
    let InitialzeClickEvent = function () {
        let els = document.querySelectorAll('[data-click]');
        for (let ix = 0, length = els.length; ix < length; ++ix) {
            let $target = $(els[ix]);
            $target.css('cursor', 'pointer');
        }
    };
    let InitialzeChangeEvents = function () {
        let els = document.querySelectorAll('select[data-change]');
        for (let ix = 0, length = els.length; ix < length; ++ix) {
            let $target = $(els[ix]);
            $target.prop('selectedIndex', $target.prop('selectedIndex')).change();
        }
    };
    let BindingEvents = function () {
        let els = document.querySelectorAll('[data-event]');
        for (let ix = 0, length = els.length; ix < length; ++ix) {
            handleEvents(els[ix]);
        }
    };
    handleEvents = function (elem) {
        let $target = $(elem);
        let actions = $target.data("event");
        if (!actions) {
            return;
        }

        actions = actions.split(",");
        for (let i = 0, l = actions.length; i < l; ++i) {
            if (actions[i].substr(0, 2) === "g-") {
                switch (actions[i]) {
                    case "g-youtubeFactory":
                        new youtubeFactory($target);
                        break;
                    case "g-randomImg":
                        new randomImg($target);
                        break;
                }

            }
        }
    };

    let youtubeFactory = function ($target) {
        let $this = $target;
        let src = $this.data('youtubefactory');
        let thumbImg = '0.jpg';
        let thumbType = $this.data('youtubefactory-thumb');
        switch (thumbType) {
            case 'default':
                // thumbnail 120*90
                thumbImg = 'default.jpg';
                break;
            case 'mqdefault':
                // Medium Quality 320*180
                thumbImg = 'mqdefault.jpg';
                break;
            case 'hqdefault':
                // High Quality 480 * 360
                thumbImg = 'hqdefault.jpg';
                break;
            case 'sddefault':
                // Standard Definition 640*480
                thumbImg = 'sddefault.jpg';
                break;
            case 'maxresdefault':
                // Maximum Resolution 1280 * 720
                thumbImg = 'maxresdefault.jpg';
                break;
            case '0':
            default:
                // Full size 480 * 360
                thumbImg = '0.jpg';
                break;
        }

        let options = {
            matcher: /(youtube\.com|youtu\.be|youtube\-nocookie\.com)\/(watch\?(.*&)?v=|v\/|u\/|embed\/?)?(videoseries\?list=(.*)|[\w-]{11}|\?listType=(.*)&list=(.*))(.*)/i,
            url: "//www.youtube.com/embed/{4}",
            thumb: "//img.youtube.com/vi/{4}/" + thumbImg,
            paramPlace: 8
        };

        let url = src;
        let thumb = src;

        let rez = src.match(options.matcher);
        if (!!rez) {
            paramObj = {};
            if (options.paramPlace && rez[options.paramPlace]) {
                let urlParams = rez[options.paramPlace];
                if (urlParams[0] === "?") {
                    urlParams = urlParams.substring(1);
                }
                urlParams = urlParams.split("&");

                for (let i = 0; i < urlParams.length; ++i) {
                    let param = urlParams[i].split("=", 2);
                    if (param.length === 2) {
                        paramObj[param[0]] = decodeURIComponent(param[1].replace(/\+/g, " "));
                    }
                }
            }

            url = this.formatYoutube(options.url, rez, paramObj);
            thumb = this.formatYoutube(options.thumb, rez);
        }

        let srcElement = $this.find('[data-youtubefactory-src]');
        for (let ix = 0, length = srcElement.length; ix < length; ++ix) {
            let $html = $(srcElement[ix]);
            let type = $html.data('youtubefactory-src');
            switch (type) {
                case 'thumbnail':
                    $html.attr('src', thumb);
                    break;
                case 'url':
                    $html.attr('data-temp-src', url);
                    break;
            }
        }
    };
    youtubeFactory.prototype.formatYoutube = function (url, rez, params) {
        let _params = params || "";
        let _url = url;
        let _rez = rez;
        if (!_url) {
            return;
        }

        $.each(_rez, function (key, value) {
            _url = _url.replace("{" + key + "}", value || "");
        });

        if ($.type(_params) === "object") {
            _params = $.param(_params, true);
        }
        if (_params.length) {
            _url = _url + (_url.indexOf("?") > 0 ? "&" : "?") + _params;
        }

        return _url;
    };

    let randomImg = function ($target) {
        let $this = $target;
        let src = $this.data('randomimg');
        if (!!src) {
            let srcArray = src.split('|');
            let srcArrayLength = srcArray.length;
            let $els = $this.find('[data-randomimg-src]');
            let index = 0;
            for (let ix = 0, length = $els.length; ix < length; ++ix) {
                index = this.random(srcArrayLength);
                $els[ix].src = srcArray[index];
            }
        }

    };
    randomImg.prototype.random = function (x) {
        return Math.floor(Math.random() * x);
    };

    $(function () {
        InitialzeClickEvent();
        InitialzeChangeEvents();
        BindingEvents();
    });
})(jQuery, window, document);
// #endregion