document.addEventListener( "DOMContentLoaded", function( event ) {

    // transliterate file name
    function __tr_file( str ) {
        let ext = str.match( /\.[^\.]+$/, "" );
        str = str.replace( /\.[^\.]+$/g, "" );
        cms.tr[" "] = "_";
        for ( let i in cms.tr ) {
            let re = new RegExp( i, "g" );
            str = str.replace( re, cms.tr[i] );
        }
        str = str.replace( /[^-A-Za-z0-9_]+/g, "" );
        if (ext[0]) {
            str = str+ext[0];
        }
        str = str.toLowerCase();
        return str;
    }

    // Upload files
    let input = document.querySelector( '[data-upload-form] input[type=file]' );
    input.onchange = async function( event ) {
        const formData = new FormData();
        let id = document.querySelector( '[data-upload-form] input[name=id]' );
        id = id.value;
        formData.append( 'id', id );
        formData.append( 'fn', 'upload_files' );
        let n = 0;
        for ( let i = 0; i < input.files.length; i++ ) {
            formData.append( 'myfile[]', input.files[i] );
            let f = __tr_file( input.files[i].name );
            f = '/uploads/'+id+'/'+f;
            let f_exists = document.querySelector( '[data-page-editor-files] .filesblocks [data-src="'+f+'"]' );
            if ( f_exists ) { n++; }
        }
        if ( n )  {
            let c = confirm(__("Files with the same names found on the server", "pages.mod.php")+' - '+n+' '+__("pc.", "pages.mod.php")+'\n'+__("Overwrite them or cancel the upload?", "pages.mod.php"));
            if ( !c ) {
                input.value = ''; // chrome fix
                return c;
            }
        }
        let bar = document.querySelector( '[data-settings="pages"] .bar' );
        bar.style.width = '100%';
        try {
            const response = await fetch( cms.api, { method: 'POST', body: formData } );
            const r        = await response.json();
            input.value = ''; // chrome fix
            if ( r.info_text ) {
                notify( r.info_text, r.info_class, 5000 );
                if ( r.info_class == 'info-success' ) {
                    let tmp = document.createElement( 'div' );
                    tmp.innerHTML = r.flist;
                    let imgs = tmp.querySelectorAll( 'img' );
                    imgs.forEach( function( img ) {
                        let file = img.getAttribute( 'data-src' );
                        let exists_file = document.querySelector( '[data-page-editor-files] .filesblocks [data-src="'+file+'"]' );
                        if ( exists_file ) {
                            exists_file.parentElement.remove();
                        }
                    } );
                    let container = document.querySelector( '[data-files-container]' );
                    container.innerHTML = r.flist + container.innerHTML;
                    // change
                    let checkboxes = container.querySelectorAll( 'input[type=checkbox]' );
                    checkboxes.forEach( function( checkbox ) {
                        checkbox.addEventListener( "change", img_rechecked );
                    } );
                    // dblclick
                    imgs = container.querySelectorAll( 'img' );
                    imgs.forEach( function( img ) {
                        img.addEventListener( "dblclick", img_lbox );
                    } );
                    // click
                    let filesblocks = document.querySelectorAll( '[data-page-editor-files] .filesblocks' );
                    filesblocks.forEach( function( filesblock ) {
                        filesblock.addEventListener( "click", img_click );
                    } );
                    // click on last
                    container.querySelector( '.filesblocks' ).click();
                    bar.style = ''; // hide progress bar
                }
            }
        } catch ( error ) {
            console.error( __('Error:'), error );
        }
    };

    /* Отмена редактирования страницы */
    let pageEditCancelBtns = document.querySelectorAll( '[data-page-cancel-btn]' );
    pageEditCancelBtns.forEach( function( button ) {
        button.onclick = function( e ){
            e.preventDefault();
            /* Отключить редактор */
            if ( window.codemirror_editor !== undefined ) {
                window.codemirror_editor.toTextArea();
            }
            /* Скрываем редактор */
            document.querySelector( '[data-page-editor]' ).classList.add( 'hidden' );
            /* Скрыть медиа файлы */
            document.querySelector( '[data-page-editor-files-close]' ).click();
            window.prevent_reload = false;
        };
    });

    function update_pages_list() {
        api2( {fn:'get_pages_list'}, set_pages_list );
    }
    if ( document.body.classList.contains( 'logged' ) ) {
        update_pages_list();
    }
    function createPage( e ) {
        e.preventDefault();
        let pid   = this.getAttribute('data-page-create');
        let sort  = this.getAttribute('data-page-sort');
        let sort2 = this.closest('[data-page-box]');
        if ( sort2 ) {
            sort2 = sort2.nextElementSibling;
            if ( sort2 ) {
                sort2 = sort2.querySelector('[data-page-sort]').getAttribute('data-page-sort');
            }
        }
        api2({fn:'create_page',pid:pid,sort:sort,sort2:sort2},function(r){
            if (r.result == 'timeout') {
                notify( __("Connection lost", "pages.mod.php"), 'info-error', 10000 );
            } else if (r.info_text) {
                notify( r.info_text, r.info_class, 5000 );
                if ( r.info_class == 'info-success' ) {
                    set_pages_list(r);
                }
            }
        });
    }
    // Создать страницу
    document.querySelector('[data-page-create="0"]').addEventListener( "click", createPage );

    function set_pages_list(r) {

        // Заполняем список страниц
        document.querySelector( '[data-pages-list]' ).innerHTML = r.list;

        /* Добавляем в выпадающий список родительские */
        let parentSelectors = document.querySelectorAll( '#pages [data-value]' );
        parentSelectors.forEach( function( el ) {
            let list = el.nextElementSibling.querySelector('.list-search');
            list.innerHTML = list.innerHTML + r.parents;
            /* Удаляем себя из списка чтобы не назначить себя родителем */
            let self = el.getAttribute( 'data-page-id' );
            el.nextElementSibling.querySelector( 'li[value="'+self+'"]' ).remove();
        });

        // Ищем все выпадающие списки на странице Страницы
        let selects = document.querySelectorAll( "#pages .select-grid" );
        select3( selects );
        searcher( selects, ".list-search li", "" );
        /* Кликаем по выбранной */
        parentSelectors.forEach( function( el ) {
            let parent = el.getAttribute( 'data-value' );
            el.nextElementSibling.classList.add( 'open' );
            el.nextElementSibling.querySelector( 'li[value="'+parent+'"]' ).click();
        });

        /* Выставляем шаблоны */
        let templates = document.querySelectorAll( '[data-page-template]' );
        templates.forEach( function( el ) {
            let tpl = el.getAttribute( 'data-page-template' );
            if ( el.querySelector( 'option[value="'+tpl+'"]' ) == null ) {
                el.innerHTML = '<option value="'+tpl+'">'+tpl+'</option>' + el.innerHTML;
            }
            el.value = tpl;
        });

        /* Call Mobile Menu */
        let mobMenuBtns = document.querySelectorAll( '[data-page-menu]' );
        mobMenuBtns.forEach( function( button ) {
            button.addEventListener( "click", function( e ){
                e.preventDefault();
                let id = this.getAttribute( 'data-page-menu' );
                document.querySelector( '[data-page-item="'+id+'"] .page-buttons' ).classList.add( 'open' );
            });
        });
        
        /* Close Mobile Menu */
        let mobMenuCloseBtns = document.querySelectorAll( '[data-settings="pages"] .page-buttons' );
        mobMenuCloseBtns.forEach( function( button ) {
            button.addEventListener( "click", function( e ){
                this.classList.remove( 'open' );
            });
        });

        /* Открыть свойства */
        let propOpenBtns = document.querySelectorAll( '[data-page-prop-open]' );
        propOpenBtns.forEach( function( button ) {
            button.addEventListener( "click", function( e ){
                e.preventDefault();
                let id = this.getAttribute( 'data-page-prop-open' );
                let prop = document.querySelector( '[data-page-prop="'+id+'"]' );
                prop.classList.remove( 'hidden' );
                prop.classList.add( 'openhot' );
                let item = document.querySelector( '[data-page-item="'+id+'"]' );
                item.classList.add( "hidden" );
                let buttons = document.querySelector( '[data-page-item="'+id+'"] .page-buttons' );
                buttons.classList.remove( "open" );
            });
        });

        /* Скрыть свойства (Отменить) */
        let propCancelBtns = document.querySelectorAll( '[data-page-prop-cancel]' );
        propCancelBtns.forEach( function( button ) {
            button.addEventListener( "click", function( e ){
                e.preventDefault();
                let id = this.getAttribute( 'data-page-prop-cancel' );
                let prop = document.querySelector( '[data-page-prop="'+id+'"]' );
                prop.classList.add( "hidden" );
                prop.classList.remove( "openhot" );
                let item = document.querySelector( '[data-page-item="'+id+'"]' );
                item.classList.remove( "hidden" );
            });
        });

        /* Сохранить свойства (Сохранить) */
        let saveBtns = document.querySelectorAll( '[data-page-prop-save]' );
        saveBtns.forEach( function( button ) {
            button.addEventListener( "click", function( e ){
                e.preventDefault();
                let id      = this.getAttribute( 'data-page-prop-save' );
                let selector =  '[data-page-id="'+id+'"]';
                let data = {
                    fn:          'save_prop',
                    id:          id,
                    title:       document.querySelector(selector+'[name="title"]').value,
                    seo_title:   document.querySelector(selector+'[name="seo_title"]').value,
                    type_url:    document.querySelector(selector+'[name="url"]').getAttribute('data-page-url-type'),
                    url:         document.querySelector(selector+'[name="url"]').value,
                    date:        document.querySelector(selector+'[name="date"]').value,
                    time:        document.querySelector(selector+'[name="time"]').value,
                    pid:         document.querySelector(selector+'[name="pid"]').getAttribute('data-value'),
                    template:    document.querySelector(selector+'[name="template"]').value,
                    sort:        document.querySelector(selector+'[name="sort"]').value,
                    description: document.querySelector(selector+'[name="description"]').value
                }
                api2( data, function( r ){
                    if ( r.result == 'timeout' ) {
                        notify( __( "Connection lost", "pages.mod.php"), 'info-error', 10000 );
                    } else if ( r.info_text ) {
                        notify( r.info_text, r.info_class, 5000 );
                        if ( r.list ) {
                            set_pages_list( r );
                        }
                        if ( r.info_class == 'info-success' ) {
                            /* Свернуть свойства */
                            let prop = document.querySelector( '[data-page-prop="'+data.id+'"]' );
                            prop.classList.add( "hidden" );
                            prop.classList.remove( "openhot" );
                            let item = document.querySelector( '[data-page-item="'+data.id+'"]' );
                            item.classList.remove( "hidden" );
                            /* Маркер последнего редактирования */
                            let items = document.querySelectorAll( '[data-page-item]' );
                            items.forEach( function( item ) {
                                item.classList.remove( "last-edited" );
                            });
                            document.querySelector('[data-page-item="'+data.id+'"]').classList.add('last-edited');
                            // Обновить Title и URL
                            document.querySelector('[data-page-item-link="'+data.id+'"]').innerHTML = r.title;
                            document.querySelector('[data-page-item-link="'+data.id+'"]').setAttribute( 'href', r.new_url );
                            document.querySelector('[data-page-id="'+data.id+'"][name=url]').value = r.short_url;
                        }
                        sendUpdateEvent();
                    }
                });
            });
        });

        /* Редактировать страницу */
        let editBtns = document.querySelectorAll( '[data-page-edit-btn]' );
        editBtns.forEach( function( button ) {
            button.addEventListener( "click", function( e ){
                e.preventDefault();
                let id = this.getAttribute( 'data-page-edit-btn' );
                document.querySelector( '[data-page-item="'+id+'"] .page-buttons' ).classList.remove( 'open' );
                /* Запрашиваем данные о странице с сервера */
                api2( {fn:'get_page',id:id},function( r ) {
                    if ( r.result == 'ok' ) {
                        /* Отключаем редактор */
                        document.querySelector( '[data-page-cancel-btn]' ).click();
                        /* Очищаем поля редактора */
                        document.querySelector('[data-page-title]').innerHTML = '';
                        document.querySelector('[data-page-title]').setAttribute('href', '');
                        document.querySelector('[data-page-text]').value = "";
                        document.querySelector('[data-page-text]').setAttribute('data-page-text','');
                        document.querySelector('[data-page-save-btn]').setAttribute('data-page-save-btn', '');
                        document.querySelector('[data-upload-form] input[name=id]').value = "";
                        document.querySelector('[data-link-file]').innerHTML = "";
                        
                        /* Сброс чекбоксов при обновлении страницы */
                        let fileCheckboxes = document.querySelectorAll( '[data-files-container] input[type=checkbox]' );
                        fileCheckboxes.forEach( function( checkbox ) {
                            checkbox.checked = false;
                        });
                        document.querySelector( '[data-media-del]' ).classList.add('disabled');

                        /* Заполняем поля редактора */
                        document.querySelector('[data-page-title]').innerHTML = r.page.title;
                        document.querySelector('[data-page-title]').setAttribute('href', r.page.url);
                        document.querySelector('[data-page-text]').value = r.page.text;
                        if (r.page.modified != null) /* значение null удаляет атрибут, чтобы не удалять - этот фикс */ {
                            document.querySelector('[data-page-text]').setAttribute('data-page-text', r.page.modified);
                        }
                        document.querySelector('[data-page-save-btn]').setAttribute('data-page-save-btn', r.page.id);
                        document.querySelector('[data-upload-form] input[name=id]').value = r.page.id;
                        /* Images */
                        document.querySelector('[data-files-container]').innerHTML = r.flist;
                        let imgCheckboxes = document.querySelectorAll( '[data-files-container] input[type=checkbox]' );
                        imgCheckboxes.forEach( function( checkbox ) {
                            checkbox.addEventListener( "change", img_rechecked );
                        });
                        let filesBlocks = document.querySelectorAll( '[data-page-editor-files] .filesblocks' );
                        filesBlocks.forEach( function( block ) {
                            block.addEventListener( "click", img_click );
                        });
                        let imgs = document.querySelectorAll( '[data-files-container] img' );
                        imgs.forEach( function( img ) {
                            img.addEventListener( "dblclick", img_lbox );
                        });

                        /* Prevent reload Window when clicking Refresh Cache */
                        window.prevent_reload = true;
                        /* Отображаем редактор */
                        document.querySelector('[data-page-editor]').classList.remove('hidden');
                        /* Выбираем тему */
                        var n = get_cookie('theme');
                        var theme = admin_styles[n][1];
                        
                        /* Подключаем редактор */
                        var txtarea = document.querySelector('[data-page-text]');
                        window.codemirror_editor = CodeMirror.fromTextArea(txtarea, {
                            mode: "application/x-httpd-php",
                            styleActiveLine: true,
                            lineNumbers: true,
                            lineWrapping: true,
                            autoCloseBrackets: true,
                            autoCloseTags: {
                                whenClosing: true,
                                whenOpening: true,
                                indentTags: ['div','ul','ol','script','style'],
                            },
                            smartIndent: true,
                            matchBrackets: true,
                            theme: theme,
                            phrases: {
                                "Search:":__("Search:", "pages.mod.php"),
                                "(Use /re/ syntax for regexp search)":__("(Use /re/ syntax for regexp search)", "pages.mod.php"),
                                "Replace all:":__("Replace all:", "pages.mod.php"),
                                "With:":__("With:", "pages.mod.php"),
                                "Replace:":__("Replace:", "pages.mod.php"),
                                "Replace?":__("Replace?", "pages.mod.php"),
                                "Yes":__("Yes", "pages.mod.php"),
                                "No":__("No", "pages.mod.php"),
                                "All":__("All", "pages.mod.php"),
                                "Stop":__("Stop", "pages.mod.php"),
                            },
                            extraKeys: { "Ctrl-Space": "autocomplete" }
                        });
                        let cm = window.codemirror_editor;
                        if ( cm.showHint ) {
                            cm.on( 'keydown', function( editor, event ) {
                                let isAlphaKey = /^[a-zA-Z]$/.test( event.key );
                                if ( cm.state.completionActive && isAlphaKey ) {
                                    return;
                                }

                                // Prevent autocompletion in string literals or comments
                                token = cm.getTokenAt( cm.getCursor() );
                                if ( token.type === 'string' || token.type === 'comment' ) {
                                    return;
                                }

                                innerMode = CodeMirror.innerMode( cm.getMode(), token.state ).mode.name;
                                cursor = cm.doc.getCursor();
                                lineBeforeCursor = cm.doc.getLine( cursor.line ).substring( 0, cursor.ch );

                                // disable autoclose tag before text
                                charAfterCursor  = cm.doc.getLine( cursor.line ).substring( cursor.ch, cursor.ch + 1 );
                                if ( charAfterCursor.match( /\S/ ) && charAfterCursor != '<' ) {
                                    if ( lineBeforeCursor.match( /<[^>]+$/ ) ) {
                                        tag = lineBeforeCursor.match( /<(\w+)\b[^>]*$/ );
                                        tag = tag[1];
                                        cm.options.autoCloseTags.dontCloseTags = [tag];
                                    } else {
                                        cm.options.autoCloseTags.dontCloseTags = null;
                                    }
                                } else {
                                    cm.options.autoCloseTags.dontCloseTags = null;
                                }
                                
                                if ( innerMode === 'html' || innerMode === 'xml' ) {
                                    shouldAutocomplete = event.key === '<' ||
                                        event.key === '/' && token.type === 'tag' ||
                                        isAlphaKey && token.type === 'tag' ||
                                        isAlphaKey && token.type === 'attribute' ||
                                        token.string === '=' && token.state.htmlState && token.state.htmlState.tagName;
                                } else if ( innerMode === 'css' ) {
                                    shouldAutocomplete = isAlphaKey ||
                                        event.key === ':' ||
                                        event.key === ' ' && /:\s+$/.test( lineBeforeCursor );
                                } else if ( innerMode === 'javascript' ) {
                                    shouldAutocomplete = isAlphaKey || event.key === '.';
                                } else if ( innerMode === 'clike' && cm.options.mode === 'php' ) {
                                    shouldAutocomplete = token.type === 'keyword' || token.type === 'variable';
                                }
                                if ( shouldAutocomplete ) {
                                    cm.showHint( { completeSingle: false } );
                                }
                            } );
                        }
                        cm.focus();
                    }
                    if (r.result == 'timeout') {
                        notify( __("Connection lost", "pages.mod.php"), 'info-error', 10000 );
                    }
                });
            });
        });

        /* Кнопка копирования ссылки */
        document.querySelector('[data-link-file-copy]').onclick = function( e ){
            let img = document.querySelector('[data-link-file]').innerText;
            let tmp = document.createElement( "textarea" );
            document.body.appendChild(tmp);
            tmp.value = img;
            tmp.select();
            let r = document.execCommand( "copy" );
            tmp.remove();
            if ( r ) {
                if ( img ) {
                    notify( __("Copyed","pages.mod.php"), 'info-success', 5000 );
                } else {
                    notify( __("Please select file", "pages.mod.php"), 'info-error', 5000 );
                }
            } else {
                notify( __( "Copy Error", "pages.mod.php"), 'info-error', 5000 );
            }
        };

        /* Сохранить страницу */
        let savePageBtns = document.querySelectorAll( '[data-page-save-btn],[data-page-save-close-btn]' );
        savePageBtns.forEach( function( button ) {
            button.onclick = function( e ){
                e.preventDefault();
                /* Сбросить изменения в textarea */
                window.codemirror_editor.save();
                let data = {
                    fn:'save_page',
                    id: document.querySelector('[data-page-save-btn]').getAttribute('data-page-save-btn'),
                    modified: document.querySelector('[data-page-text]').getAttribute('data-page-text'),
                    text: document.querySelector('[data-page-text]').value,
                    url: document.querySelector('[data-page-title]').getAttribute('href'), /* delete old page */
                    close: this.hasAttribute('data-page-save-close-btn')
                }
                api2( data,function( r ){
                    if ( r.info_text ) {
                        notify( r.info_text, r.info_class, 5000 );
                        /* Маркер последнего редактирования */
                        let items = document.querySelectorAll( '[data-page-item]' );
                        items.forEach( function( item ) {
                            item.classList.remove( 'last-edited' );
                        });
                        document.querySelector('[data-page-item="'+data.id+'"]').classList.add('last-edited');
                        if ( r.modified ) {
                            document.querySelector('[data-page-text]').setAttribute('data-page-text', r.modified);
                        }
                        /* Закрыть редактор */
                        if (data.close) {
                            document.querySelector('[data-page-cancel-btn]').click();
                        }
                    }
                    if (r.result == 'timeout') {
                        notify( __("Connection lost", "pages.mod.php"), 'info-error', 10000 );
                    }
                });
            };
        });
        document.querySelector('[data-page-editor]').addEventListener( "keydown", function( e ){
            if ( e.code == "KeyS" && e.ctrlKey == true ) {
                e.preventDefault();
                document.querySelector('[data-page-save-btn]').click();
            }
        });

        // Создать страницу
        let createPageBtns = document.querySelectorAll( '[data-pages-list] [data-page-create]' );
        createPageBtns.forEach( function( button ) {
            button.addEventListener( "click", createPage );
        });

        // Удалить страницу
        let delPageBtns = document.querySelectorAll( '[data-page-del]' );
        delPageBtns.forEach( function( button ) {
            button.addEventListener( "click", function( e ) {
                e.preventDefault();
                let id = this.getAttribute( 'data-page-del' );
                document.querySelector('[data-page-item="'+id+'"] .page-buttons').classList.remove('open');
                if ( !confirm( __( "Delete page? All attached files will be deleted.", "pages.mod.php") ) ) {
                    return;
                }
                let data = {
                    fn: 'del_page',
                    id: id
                };
                api2( data, function( r ) {
                    if ( r.result == 'timeout' ) {
                        notify( __( "Connection lost", "pages.mod.php" ), 'info-error', 10000 );
                    } else if ( r.info_text ) {
                        notify( r.info_text, r.info_class, 5000 );
                        if ( r.info_class == 'info-success' ) {
                            set_pages_list( r );
                        }
                    }
                });
            });
        });

        page_searcher.addEventListener( "keyup", page_searcher_fn );
        function page_searcher_fn( event ) {
            let items         = pages.querySelectorAll( '[data-page-box] > [data-page-item] h1 a' );
            let search_string = event.currentTarget.value;
            let regex   = new RegExp( search_string, 'i' );
            items.forEach( function( el ) {
                let content = el.textContent;
                let finded  = content.match( regex );
                if ( finded ) {
                    let par = el.closest( "[data-page-box" );
                    while ( par ) {
                        par.classList.remove( "searcher-hidden" );
                        par = par.parentElement;
                        par = par.closest( "[data-page-box" );
                    }
                    
                } else {
                    let par = el.closest("[data-page-box");
                    par.classList.add( "searcher-hidden" );
                }
            } );
        }

        /* Отфильтровать, подергав поиск после изменений в страницах */
        let update_searcher_ev = new Event( "keyup" );
        page_searcher.dispatchEvent( update_searcher_ev );

        sendUpdateEvent();

    }

    /* Send Update event to Menu module */
    function sendUpdateEvent() {
        if ( !document.skipFirstEvent ) document.skipFirstEvent = [];
        if ( document.skipFirstEvent['pages'] ) {
            let event = new Event("updated");
            document.querySelector( '[data-settings=pages]' ).dispatchEvent( event );
        } else {
            document.skipFirstEvent['pages'] = true;
        }
    }

    /* Показать медиатеку */
    document.querySelector( '[data-page-editor-files-btn]' ).onclick = function( e ){
        document.querySelector('[data-page-editor-buttons]').classList.add('hidden');
        document.querySelector('[data-page-editor-files]').classList.remove('hidden');
    };

    // Replace Dialog Toggle
    document.querySelector( '[data-page-editor-replace-btn]' ).onclick = function( e ){
        let dialog = document.querySelector( '.CodeMirror-dialog' );
        if ( dialog ) {
            dialog.remove();
        } else {
            window.codemirror_editor.execCommand( "replace" );
        }
    };

    /* Скрыть медиатеку */
    document.querySelector('[data-page-editor-files-close]').onclick = function( e ){
        document.querySelector('[data-page-editor-files]').classList.add('hidden');
        document.querySelector('[data-page-editor-buttons]').classList.remove('hidden');
    };

    /* Активный файл медиатеки */
    function img_click(){
        let fileBlocks = document.querySelectorAll( '[data-page-editor-files] .filesblocks' );
        fileBlocks.forEach( function( block ) {
            block.classList.remove('active-file');
        });
        this.classList.add('active-file');
        let i = this.querySelector( "img" );
        let t = i.getAttribute('data-type');
        let l = i.getAttribute('data-src');
        let w = i.getAttribute('width');
        let h = i.getAttribute('height');
        let e = l.replace(/.*\./, '');
        let img = ['webp','tiff','jpeg','jpg','png','svg','gif','bmp','ico'];
        let mus = ['mp3','ogg','m4a','flac'];
        let vid = ['mp4','mkv'];
        let a = '<a href="'+l+'" target=_blank>'+l+'</a>';
        if (img.indexOf(e) >= 0) {
            l = '&lt;img alt="" src="'+a+'"';
            if ( w ) {
                l += ' width="'+w+'"';
            }
            if ( h ) {
                l += ' height="'+h+'"';
            }
            l += '&gt;';
            document.querySelector('[data-link-file]').innerHTML = l;
        } else if (mus.indexOf(e) >= 0) {
            l = '&lt;audio src="'+a+'" controls>&lt;/audio>';
            document.querySelector('[data-link-file]').innerHTML = l;
        } else if (vid.indexOf(e) >= 0) {
            l = '&lt;video src="'+a+'" controls>&lt;/video>';
            document.querySelector('[data-link-file]').innerHTML = l;
        } else {
            l = '&lt;a href="'+a+'"&gt;TEXT&lt;/a&gt;';
            document.querySelector('[data-link-file]').innerHTML = l;
        }
    }

    /* Установка чекбоксов */
    function img_rechecked(){
        if (document.querySelectorAll('[data-files-container] input[type="checkbox"]:checked').length) {
            document.querySelector('[data-media-del]').classList.remove('disabled');
        } else {
            document.querySelector('[data-media-del]').classList.add('disabled');
        }
    }
    
    /* Просмотр в лайтбоксе */
    function img_lbox(){
        let src = this.getAttribute('data-src');
        let e = src.replace(/.*\./, '');
        let img = ['webp','tiff','jpeg','jpg','png','svg','gif','bmp','ico'];
        let mus = ['mp3','ogg','m4a','flac'];
        let vid = ['mp4','mkv'];
        if ( document.querySelector('#lbox-window') == null ) {
            if (img.indexOf(e) >= 0) {
                let i = document.createElement( "img" );
                i.src = src;
                let d = document.createElement( "div" );
                d.id = "lbox-window";
                d.appendChild( i );
                document.body.appendChild( d );
                document.querySelector('#lbox-window').addEventListener( "click", function( e ){
                    this.remove();
                });
            } else if (mus.indexOf(e) >= 0) {
                let a = document.createElement( "audio" );
                a.src = src;
                a.setAttribute( "controls", true );
                let d = document.createElement( "div" );
                d.id = "lbox-window";
                d.appendChild( a );
                document.body.appendChild( d );
                document.querySelector('#lbox-window').addEventListener( "click", function( e ){
                    this.remove();
                });
            } else if (vid.indexOf(e) >= 0) {
                let v = document.createElement( "video" );
                v.src = src;
                v.setAttribute( "controls", true );
                let d = document.createElement( "div" );
                d.id = "lbox-window";
                d.appendChild( v );
                document.body.appendChild( d );
                document.querySelector('#lbox-window').addEventListener( "click", function( e ){
                    this.remove();
                });
            }
            
        }
    }


    /* Удаление файлов */
    document.querySelector('[data-media-del]').onclick = function( e ){
        if (!this.classList.contains('disabled')) {
            let flist = [];
            let checkboxes = document.querySelectorAll( '[data-files-container] input[type=checkbox]:checked' );
            checkboxes.forEach( function( e ) {
                let f = e.closest('.filesblocks').querySelector('img').getAttribute('data-src');
                flist.push(f);
            });
            let data = {
                   fn: 'del_files',
                flist: flist
            };
            api2(data, function(r){
                if (r.result == 'timeout') {
                    notify( __("Connection lost", "pages.mod.php"), 'info-error', 10000 );
                } else if (r.info_text) {
                    document.querySelector('[data-link-file]').innerHTML = "";
                    notify( r.info_text, r.info_class, 5000 );
                    if ( r.info_class == 'info-success' ) {
                        for (let f in flist) {
                            document.querySelector('[data-files-container] img[data-src="'+flist[f]+'"]').parentElement.remove();
                        }
                        document.querySelector('[data-media-del]').classList.add('disabled');
                    }
                }
            });
        }
    };

} );
