(function ($) {

    var fsUtil = function () {
        var build = function (div, options) {
            $(div).empty();
            div = div.get(0);
            var resBox = _hh.createTag({
                name: "div",
                parent: div,
                className: "fnt-select",
            });
            var familySpan = _hh.createTag({
                name: "span",
                className: "fnt-family",
                parent: resBox,
                onclick: function () {
                    var ul = $(this).parent().parent().find(".fnt-selectbox");
                    var val = ul.css("display");
                    if (val === "none")
                        ul.css("display", "block");
                    else
                        ul.css("display", "");
                }
            });
            $(familySpan.ownerDocument).on('click', function (event) {
                if (!$(event.target).hasAnyClass('fnt-select', 'fnt-family', 'fnt-size',
                    'fnt-ulsize', 'fnt-ulfamily', 'fnt-selectbox', 'fnt-item')) {
                    var magazine = $(".rich-texteditor").length > 0;
                    if (magazine) {
                        $(".fnt-selectbox").css("display", "");
                    } else {
                        $(div).trigger('outOfTable', [event.target]);
                    }
                }
            });

            _hh.createTag({
                name: "span",
                className: "fnt-size",
                parent: resBox,
                onclick: function () {
                    var ul = $(this).parent().parent().find(".fnt-selectbox");
                    var val = ul.css("display");
                    if (val === "none")
                        ul.css("display", "block");
                    else
                        ul.css("display", "");
                }
            });

            var selectListBox = _hh.createTag({
                name: "div",
                className: "fnt-selectbox",
                parent: div
            });
            var ulFamily = _hh.createTag({
                name: "ul",
                className: "fnt-ulfamily",
                parent: selectListBox
            });
            var ulSize = _hh.createTag({
                name: "ul",
                className: "fnt-ulsize",
                parent: selectListBox
            });

            for (var i = 0; i < fontFamilies.length; i++) {
                _hh.createTag({
                    name: "li",
                    text: fontFamilies[i].text,
                    className: "fnt-item" + fontFamilies[i].value === options.textFontFamily ? " fnt-selected" : "",
                    attributes: { "data-value": fontFamilies[i].value },
                    parent: ulFamily,
                    onclick: function () {
                        var parent = $(this).closest(".fnt-selector");
                        var data = {
                            textFontFamily: this.getAttribute("data-value"),
                            textFontSize: parent.find(".fnt-ulsize .fnt-selected").attr("data-value"),
                        }
                        setValue(parent.get(0), data);

                        if (!options.magazine) {
                            if ($(this).hasClass("fnt-selected"))
                                parent.trigger('selectionchange', [{ type: "textFontFamily", value: $(this).attr("data-value") }]);
                            else
                                parent.trigger('selectionchange', [{ type: "textFontFamily", value: undefined }]);
                        } else {

                            _h.kocnx().mgvm().designSelectedModel().toggleCommand(null, "fontName", $(this).attr("data-value"));

                        }
                    }
                });

            }
            for (var i = 0; i < fontSizes.length; i++) {
                _hh.createTag({
                    name: "li",
                    text: fontSizes[i].text,
                    className: "fnt-item" + fontSizes[i].value === options.textFontSize ? " fnt-selected" : "",
                    attributes: { "data-value": fontSizes[i].value },
                    parent: ulSize,
                    onclick: function () {
                        var parent = $(this).closest(".fnt-selector");
                        var data = {
                            textFontFamily: parent.find(".fnt-ulfamily .fnt-selected").attr("data-value"),
                            textFontSize: $(this).attr("data-value"),
                        }
                        setValue(parent.get(0), data);
                        if (!options.magazine) {
                            if ($(this).hasClass("fnt-selected"))
                                parent.trigger('selectionchange', [{ type: "textFontSize", value: $(this).attr("data-value") }]);
                            else
                                parent.trigger('selectionchange', [{ type: "textFontSize", value: undefined }]);
                        } else {
                            _h.kocnx().mgvm().designSelectedModel().toggleCommand(null, "fontSize", $(this).attr("data-value"));
                        }
                    }
                });
            }
            setValue(div, options);
        }
        var setValue = function (target, values) {
            var familyText = fontFamilies[0].text;
            var fontText = fontSizes[6].text;
            $(target).find("li").removeClass("fnt-selected");
            if (values.textFontFamily) {
                var familyText = fontFamilies.filter(a => a.value === values.textFontFamily)[0].text;
                $(target).find(".fnt-family").text(familyText);
                $(target).find(".fnt-ulfamily")
                    .find('[data-value="' + values.textFontFamily + '"]').addClass("fnt-selected");
            }

            if (values.textFontSize) {
                var fontText = fontSizes.filter(a => a.value === values.textFontSize)[0].text;
                $(target).find(".fnt-size").text(fontText);
                $(target).find(".fnt-ulsize")
                    .find('[data-value="' + values.textFontSize + '"]').addClass("fnt-selected");
            }
        }
        var getValues = function (target) {
            var familyText = $(target).find(".fnt-family")[0];
            var family, size;
            if (familyText) {
                family = fontFamilies.filter(a => a.text === familyText.innerText)[0].value;
            }

            var fontSize = $(target).find(".fnt-size")[0];
            if (fontSize) {
                size = fontSizes.filter(a => a.text === fontSize.innerText)[0].value;
            }
            return [family, size];
        }
        return {
            build: build,
            setValue: setValue,
            getValues: getValues
        };
    }();

    var fsMethods = {
        init: function (options) {
            fsUtil.build(this, options);
        },
        setValue: function (values) {
            fsUtil.setValue(this, values);
        },
        getValues: function () {
            var values = fsUtil.getValues(this);
            return values;
        }
    }


    $.fn.fontSelector = function (methodOrOptions) {
        if (fsMethods[methodOrOptions]) {
            return fsMethods[methodOrOptions].apply(this, Array.prototype.slice.call(arguments, 1));
        } else if (typeof methodOrOptions === 'object' || !methodOrOptions) {

            return fsMethods.init.apply(this, arguments);
        } else {
            $.error('Method ' + methodOrOptions + ' does not exist on jQuery.fontSelector');
        }
    };

})(jQuery);
