RTE_DefaultConfig.svgCode_linkmedia = '<svg fill="#5F6368" width="100px" height="100px" viewBox="0 0 20 20"><g stroke-width="0"></g><g stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"><path d="M16 2H7.979C6.88 2 6 2.88 6 3.98V12c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 10H8V4h8v8zM4 10H2v6c0 1.1.9 2 2 2h6v-2H4v-6z"></path></g></svg>';

RTE_DefaultConfig.plugin_linkmedia = RTE_Plugin_LinkMedia;
function RTE_Plugin_LinkMedia() {
    var obj = this;
    var config, editor;

    obj.PluginName = "LinkMedia";

    obj.InitConfig = function (argconfig) {
        config = argconfig;
        config.plugins = config.plugins || {};
        config.plugins.linkmedia = {
            protocols: ['http://', 'https://'],
            width: '760',
            height: '550'
        };
    }

    obj.InitEditor = function (argeditor) {
        editor = argeditor;

        editor.attachEvent('exec_command_linkmedia', function (state, cmd, value) {
            obj.openDialog();
            state.returnValue = true;
        });

        editor.toolbarFactoryMap['linkmedia'] = function (cmd) {
            var span = editor.createToolbarButton(cmd);
            span.style.backgroundColor = '';
            span.style.padding = '4px';

            return span;
        };
    }

    obj.openDialog = function () {
        var currLink = editor.findSelectionElement('A');
        var params = parseLink(currLink);

        // 彈跳視窗
        var dialogTitle = editor.getLangText('linkmedia');
        var dialog = editor.createDialog(dialogTitle, 'rte-dialog-linkmedia');

        var dialogContent = appendTo(dialog, 'rte-dialog-content');

        // 通訊協定
        var column = appendTo(dialogContent, 'div', 'padding: 0px 5px;', 'col-sm-5 col-xs-6');
        var protocolEle = setProtocol(column, params);

        // URL
        var column = appendTo(dialogContent, 'div', 'padding: 0px 5px;', 'col-sm-7 col-xs-12');
        var urlEle = setUrl(column, params);
        urlEle.onkeyup = function (e) {
            var href = this.value;
            var protocol = parseProtocol(href);

            if (protocol) {
                urlEle.value = href.substr(protocol.length);
                protocolEle.value = protocol.toLowerCase();
            }
        }

        // 寬
        var column = appendTo(dialogContent, 'div', 'padding: 0px 5px;', 'col-sm-4 col-xs-6');
        var width = setWidth(column, params);
        // 高
        var column = appendTo(dialogContent, 'div', 'padding: 0px 5px;', 'col-sm-4 col-xs-6');
        var height = setHeight(column, params);
        // 僅出現影片
        var column = appendTo(dialogContent, 'div', 'padding: 0px 5px;', 'col-sm-4 col-xs-12');
        var videoOnly = setVideoOnly(column, params);

        // 預覽按鈕
        var column = appendTo(dialogContent, 'div', 'padding: 0px 5px;', 'col-sm-12 col-xs-12');
        var previewBtn = setPreviewBtn(column);
        previewBtn.onclick = function (e) {
            if ($(this).data('fancybox')) return false;

            $(this).data('fancybox', true);

            $(this).fancybox({
                'type': 'iframe',
                'preload': true,
                'margin': 20,
                'padding': 5,
                'autoSize': false,
                'beforeLoad': function () {
                    var selectedIndex = protocolEle.selectedIndex;
                    var selectedOption = protocolEle.options[selectedIndex];
                    var protocol = selectedOption.value;
                    var href = urlEle.value;

                    if (href == '') {
                        alert(editor.getLangText('linkmedia_noturl'));
                        return false;
                    }

                    href += (href.indexOf('?') != -1) ? '&popup=true&output=embed' : '?popup=true&output=embed';

                    this.width = width.value;
                    this.height = height.value;

                    this.href = protocol + href;
                }
            });

            $(this).trigger('click');

            return false;
        }
        // 彈跳視窗按鈕
        var divfooter = appendTo(dialog, 'rte-dialog-footer', null, 'rte-dialog-footer-right');

        var okBtn = appendTo(divfooter, 'rte-dialog-button');
        okBtn.innerText = editor.getLangText('ok');

        var cancelBtn = appendTo(divfooter, 'rte-dialog-button', null, 'rte-button-type-cancel');
        cancelBtn.innerText = editor.getLangText('cancel');

        okBtn.onclick = function () {
            var selectedIndex = protocolEle.selectedIndex;
            var selectedOption = protocolEle.options[selectedIndex];
            var protocol = selectedOption.value;
            var href = urlEle.value;

            if (href == '') {
                alert(editor.getLangText('linkmedia_noturl'));
                return false;
            }

            dialog.close();

            var relArr = new Array();
            relArr.push(width.value + 'x' + height.value);
            relArr.push((videoOnly.checked) ? 1 : 0);

            var attributes = {
                target: '_popup',
                rel: relArr.join(',')
            };

            attributes.href = (href.indexOf('/') === 0) ? href : protocol + href;

            if (currLink) {
                var link = currLink;
                setElementAttributes(link, attributes);
                return;
            }

            var editdoc = editor.getDocument();
            var link = editdoc.createElement('a');
            setElementAttributes(link, attributes);
            const selection = editor.getSelection();
            if (selection.isCollapsed) {
                link.innerHTML = attributes.href;
                editor.insertElement(link);
                editor.collapse(false);
                editor.focus();
            } else {
                const range = selection.getRangeAt(0);
                range.surroundContents(link);
            }
        }

        cancelBtn.onclick = function () {
            dialog.close();
        }
    }

    function parseLink(selectedLink) {
        var ret = {};

        if (!selectedLink) {
            return ret;
        }

        ret.href = selectedLink.getAttribute('href');

        var protocol = parseProtocol(ret.href);
        if (protocol) {
            ret.href = ret.href.substr(protocol.length);
            ret.protocol = protocol.toLowerCase();
        }

        if (selectedLink.rel) {
            var _rel = [];
            selectedLink.rel.split(' ').some(function (item) {
                if (item.indexOf(',') !== -1) {
                    _rel = item.split(',');
                    return true;
                }
            });
            if (_rel.length > 0) {
                var s = _rel[0].split('x');
                ret.width = s[0];
                ret.height = s[1];
                ret.videoOnly = (_rel[1] == 1) ? true : false
            }
        }

        return ret;
    }

    function parseProtocol(url) {
        var regex = /^(http|https):\/\/(?=.)/i;
        var result = regex.exec(url);
        return (result) ? result[0] : '';
    }

    function setProtocol(element, params) {
        var div = appendTo(element, 'rte-tabui-panel', 'padding: 0');
        var div = appendTo(div, "rte-dialog-line-url", "margin: 12px 0px;", "rte-dialog-line-select");
        var label = appendTo(div, 'rte-dialog-select-label');
        label.innerText = editor.getLangText('linkmedia_protocol');
        var select = appendTo(div, 'select', 'width: 100%;');
        for (const protocal of config.plugins.linkmedia.protocols) {
            var option = appendTo(select, 'option');
            option.innerHTML = protocal;
            option.setAttribute('value', protocal);
        }

        if (params.protocol) {
            select.value = params.protocol;
        }

        return select;
    }

    function setUrl(element, params) {
        var div = appendTo(element, 'rte-tabui-panel', 'padding: 0');
        var div = appendTo(div, "rte-dialog-line-url", "margin: 12px 0px;", "rte-dialog-line-input");
        var label = appendTo(div, 'rte-dialog-input-label');
        label.innerText = editor.getLangText('linkmedia_url');
        var input = appendTo(div, 'input', 'width: 100%;');
        input.type = 'text';
        if (params.href) {
            input.value = params.href;
        }
        input.focus();
        editor.setInputValueClassLogic(input);
        return input;
    }

    function setWidth(element, params) {
        var div = appendTo(element, 'rte-tabui-panel', 'padding: 0');
        var div = appendTo(div, "rte-dialog-line-url", "margin: 12px 0px;", "rte-dialog-line-input");
        var label = appendTo(div, 'rte-dialog-input-label');
        label.innerText = editor.getLangText('linkmedia_width');
        var input = appendTo(div, 'input', 'width: 100%;');
        input.type = 'text';
        input.value = (params.width) ? params.width : config.plugins.linkmedia.width;
        return input;
    }

    function setHeight(element, params) {
        var div = appendTo(element, 'rte-tabui-panel', 'padding: 0');
        var div = appendTo(div, "rte-dialog-line-url", "margin: 12px 0px;", "rte-dialog-line-input");
        var label = appendTo(div, 'rte-dialog-input-label');
        label.innerText = editor.getLangText('linkmedia_height');
        var input = appendTo(div, 'input', 'width: 100%;');
        input.type = 'text';
        input.value = (params.height) ? params.height : config.plugins.linkmedia.height;
        return input;
    }

    function setVideoOnly(element, params) {
        var div3 = appendTo(element, 'rte-dialog-line-matchcase', 'margin: 12px 0px;', 'rte-dialog-line-input');
        var styleforlabel = 'display:inline-block;position:static;width:100px;padding-left:15px;background-color:transparent;box-shadow:none';
        appendTo(div3, 'rte-dialog-input-label', styleforlabel, 'hidden-xs');
        var label3 = appendTo(div3, 'label');
        var checkbox = appendTo(label3, 'input', 'margin:2px;transform:translate(0,1px)');
        appendTo(label3, 'span', 'margin:0 0 2px 6px').innerText = editor.getLangText('linkmedia_videoonly');
        checkbox.type = 'checkbox';
        checkbox.checked = (params.videoOnly) ? true : false;
        return checkbox;
    }

    function setPreviewBtn(element) {
        var div = appendTo(element, 'rte-tabui-panel', 'padding: 0');
        var div = appendTo(div, "rte-dialog-line-url", "margin: 12px 0px;", "rte-dialog-line-input");
        var btn = appendTo(div, 'a', '', 'btn btn-default btn-sm');
        btn.innerText = editor.getLangText('linkmedia_preview');
        appendTo(div, 'div', 'margin:5px 0; white-space:normal').innerText = editor.getLangText('linkmedia_previewtext');
        appendTo(div, 'div', 'white-space:normal', 'fs-hint').innerText = '(' + editor.getLangText('linkmedia_previewhint') + ')';
        return btn;
    }

    function setElementAttributes(element, attributesPairs) {
        for (var name in attributesPairs) {
            element.setAttribute(name, attributesPairs[name]);
        }
    }

    function appendTo(parent, tagname, csstext, cssclass) {
        var tag = parent.ownerDocument.createElement(tagname);
        if (csstext) tag.style.cssText = csstext;
        if (cssclass) tag.className = cssclass;
        parent.appendChild(tag);
        return tag;
    }
}