Stage('Управление полями загрузки картинок',    'uploadfields', Stage.DOMREADY,     function(){
    if(!window.thread.board) return; //не запускаем на главной
    if(!window.FileReader) return; //HTML5
    if(!window.FormData) return; //HTML5

    var FormFiles = window.FormFiles = {
        vip: true,
        max_files_size: Store.get('other.max_files_size') || window.thread.max_files_size,
        max: Store.get('other.max_files') || 4,
        inputsContainer: null,
        count: 0,
        files_size: 0,
        filtered: [], //тут файлы, которые фактически пойдут на сервер(удаленные удаляются)

        init: function(){
            var premium = Store.get('jsf34nfk3jh') && !Store.get('renewneeded');

            if(premium) {
                if(premium) $('.filer__limits').html('Макс объем: ' + this.max_files_size/1024 + 'Mб, макс кол-во файлов: ' + this.max);
            }
            $('.filer__input').change(this.onInputChangeMulti);
            $('.filer__thumbnails').on('click','.filer__delete', this.onDeleteMulti);

            var drag = $('.filer__drag-area');
            var postform = $('.makaba');
            drag.on('drag dragstart dragend dragover dragenter dragleave drop', this.fileDragHover)
                .on('drop', this.fileSelectHandler)
                .on('click', function() { $('#formimages').click(); });
            postform.on('paste', this.onClipboardPaste);

            this.draggable();
        },

        draggable: function() {
            var in_drag = false;
            $('.filer__thumbnails').on('mousedown','.filer__img',function(e){
                if(in_drag) return;
                if(e.which != 1) return;
                e.preventDefault();

                in_drag = $(this).closest('.filer__thumb').data('id');
            });
            $('.filer__thumbnails').on('mouseover','.filer__thumb',function(e){
                if(!in_drag) return;
                var this_id = $(this).data('id');
                if(in_drag == this_id) return;
                if(Math.abs(in_drag-this_id) > 1) return;

                FormFiles.swap(in_drag, this_id);
                in_drag = this_id;
            });

            $(window).mouseup(function(){
                if(!in_drag) return;
                in_drag = false;
            });
        },

        onClipboardPaste: function(e) {
            var items = (e.clipboardData || e.originalEvent.clipboardData).items;
            for (var i = 0; i < items.length; i++) {
                var item = items[i];
                if (item.kind === 'file') {
                  var blob = item.getAsFile();
                  //console.log(blob);
                  FormFiles.addMultiFiles([blob]);

                }
            }
        },

        onInputChangeMulti: function(e) {
            if(!this.files || !this.files[0]) return;
            if(FormFiles.count >= FormFiles.max || this.files.length > FormFiles.max) {
                alert('Вы можете загрузить не более ' + FormFiles.max + ' файлов!');
                this.value='';
                return;
            }
            FormFiles.addMultiFiles(this.files);
        },

        fileSelectHandler: function(e) {
            FormFiles.fileDragHover(e);
            e.dataTransfer = e.originalEvent.dataTransfer;
            var files = e.target.files || e.dataTransfer.files;
            if(FormFiles.count >= FormFiles.max || files.length > FormFiles.max) {
                alert('Вы можете загрузить не более ' + FormFiles.max + ' файлов!');
                this.value='';
                return;
            }
            FormFiles.addMultiFiles(files);
        },

        fileDragHover: function(e) {
            e.stopPropagation();
            e.preventDefault();
            e.target.className = 'filer__drag-area';
            $(e.target).addClass(e.type == 'dragover' ? 'filer__drag-area_hover' : '');
        },

        onDeleteMulti: function() {
            var el = $(this);
            var id = el.closest('.filer__thumb').data('id');
            FormFiles.removeFileMulti(id);
        },

        addMultiFiles: function(files) {
            for(var i=0;i<files.length;i++) {
                this.files_size += files[i].size/1024;
                if(this.files_size > this.max_files_size) {
                    alert('Превышен макс. объем данных для отправки, кол-во доступных для загрузки файлов - ' + i);
                    this.files_size -= files[i].size/1024;
                    break;
                }
                this.filtered.push(files[i]); //пишем файлы в массив, там можно их шатать, чтобы в sendForm высирать на сервер
                if(files[i].type.substr(0,5) == 'image') {
                    var reader = new FileReader();
                    reader.onload = (function () {
                        var info = {
                            name: files[i].name,
                            size: files[i].size,
                            type: files[i].type,
                            preview: '/newtest/resources/images/dvlogo.png'
                        };
                        return function (e) {
                            FormFiles.count++;
                            info.preview = e.target.result;
                            FormFiles.processFile(info);
                        }
                    })(files[i]);
                    reader.readAsDataURL(files[i]);
                }else{
                    FormFiles.count++;
                    this.processFile({name: files[i].name,size: files[i].size,type: files[i].type,preview: '/newtest/resources/images/dvlogo.png'});
                }
            }
        },

        removeFileMulti: function(id) {
            var name = $('.filer__thumb_c_' + id + ' .filer__img img').attr('title');

            $('.filer__thumb_c_' + id).remove();
            for(var i=id;i<=this.count;i++) {
                this.rename(i, i-1);
            }
            this.count--;

            var filesArr = Array.prototype.slice.call(FormFiles.filtered);
            for(var i=0;i<filesArr.length;i++) {
                if(filesArr[i].name === name) {
                    this.files_size -= filesArr[i].size/1024;
                    filesArr.splice(i,1);
                    break;
                }
            }
            this.filtered = filesArr;
        },

        rename: function(old_id, new_id) {
            $('.form-files-input-image' + old_id)
                .attr('name', 'file' + new_id)
                .removeClass('form-files-input-image' + old_id)
                .addClass('form-files-input-image' + new_id);

            $('.filer__thumb_c_' + old_id)
                .removeClass('filer__thumb_c_' + old_id)
                .addClass('filer__thumb_c_' + new_id)
                .data('id', new_id);

        },

        swap: function(id1, id2) {
            if(Math.abs(id1-id2) > 1) return;
            if(id1 == id2) return;

            var $boxex = $('.filer__thumb_c_' + id1);
            var $boxex2 = $('.filer__thumb_c_' + id2);

            for(var i=0;i<$boxex.length;i++) {
                if(id1 < id2) $($boxex2[i]).after($boxex[i]);
                else $($boxex2[i]).before($boxex[i]);
            }

            this.rename(id1, 'temp');
            this.rename(id2, id1);
            this.rename('temp', id2);

            var tmpval = this.filtered[id1-1];
            this.filtered[id1-1] = this.filtered[id2-1];
            this.filtered[id2-1] = tmpval;
        },

        processFile: function(file) {
            //console.log(file);
            var width= 100, height = 100;
            $('.filer__thumbnails').append('<div class="filer__thumb filer__thumb_c_' + this.count + '"  data-id="' + this.count + '">' +
                '<span class="filer__img"><img src="' + file.preview + '" style="max-width:' + width + 'px;max-height:' + height + 'px" title="' + file.name + '"></span>' +
                '<span class="filer__meta">' +
                    '<span class="filer__size">' + getReadableFileSizeString(file.size) + '</span> ' +
                    '<span class="filer__delete"><svg xmlns="http://www.w3.org/2000/svg"class="icon"><use xlink:href="#icon__delete"></use></svg></span>' +
                '</span>' +
                '<span class="filer__nsfw" style="display:none;">' + '<label for="img_nsfw">nsfw: </label><input type="checkbox" id="img_nsfw" name="image' + this.count + '_nsfw" value="1">' + '</span> ' +  // window.thread.board=='pa'
                '</div>' +
                (this.count==4?'<br>':''));
            if(window.thread.board=='pa') {
                $('.filer__nsfw').show();
            }
        },

        reset: function() {
            $('.filer__thumbnails').html('');
            $('#form-files-input-inputs-container').html('');
            this.count = 0;
            this.filtered = [];
            this.files_size = 0;
        },

        appendToForm: function(form) {
            $(form).append($('#form-files-input-inputs-container'));
        },
    };

    if(FormFiles.max) FormFiles.init();

});