sxFormFile = function(){
	
	var self = this;
	var url = '';
	
	this.init = function(article_id, url){

		this.article_id = article_id;
		
		this.url = url || '/simpla/ajax/file.php';

		this.$input = $('#art-files-input');
		this.$filesDiv = $('.sx-form-images');
		this.initFiles();		

		this.$filesDiv.on('click', '.sx-form-image-remove', function(){
			self.removeFile($(this).attr('data-id'));
		});
		
		this.setFilesSortable();

	}
	
	this.saveFiles = function(dfd){
		var i, flag = true;
		dfd = dfd || $.Deferred();
		for(i=0;i<self.files.length;++i){
			if(self.files[i].uploaded) continue;
			flag = false;
			self.files[i].uploaded = true;
			self.files[i].formData.id = i;
				self.files[i].submit().done(function(){			
				self.saveFiles(dfd);
			});
			break;
		}
		if(flag) dfd.resolve();
		return dfd.promise();
	}
	
	this.initFiles = function(){
		
		this.$input.fileupload({
			url: self.url,
			autoUpload: true,
			acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i,
			maxFileSize: 10000000,
	        previewMaxWidth: 120,
	        previewMaxHeight: 120,
	        disableImageResize: false,
	        imageMaxWidth: 1600,
    		imageMaxHeight: 1600,
	        previewCrop: true,
	        formData: {article_id: self.article_id}
		}).on('fileuploadadd', function (e, data) {

		}).on('fileuploadprocessalways', function (e, data, x) {
			self.fileReady(data);
			
		});
		this.$input.bind('fileuploaddone',function(e, data){
			$('.sx-form-images [data-id='+data.files[0]._id+']').attr('data-id', data.result);
			self.reorder();
			self.setFilesSortable();
		});
	}
	
	this.fileReady = function(data){

		if(data.files[0].error) return;

		if(!data._id) data._id = data.files[0]._id = Math.floor(Math.random() * 100000);;
		this.getPreview(data.files[0]).done(function(img){
			var div = $('<div title="'+data.files[0].name+'" class="sx-form-preview" style="display:none" data-id="'+data._id+'"/>');
			div.append(img);
			div.append('<div class="sx-move-photo"><img src="/images/move.png"></div>');		
			div.append('<div class="sx-remove-photo"><button type="button" class="btn btn-danger btn-xs sx-form-image-remove" data-id="'+data._id+'"><b>X</b></button></div>');
			self.$filesDiv.append(div);
			div.fadeIn('fast');
			data.div = div; 
			data.uploaded = false;
			
		});
	}
	
	this.reorder = function(){
		var ids = [];
		this.$filesDiv.find('.sx-form-preview').each(function(){
			ids.push( $(this).attr('data-id') );
		});
		$.post(this.url, {action: 'reorder', ids: ids});
	}
	
	this.getPreview = function(file){
		var dfd = $.Deferred();
		dfd.resolve(file.preview);                             
		return dfd.promise();
	}

	
	this.removeFile = function(id){
		$('.sx-form-preview[data-id='+id+']').fadeOut('fast', function(){
			$('.sx-form-preview[data-id='+id+']').remove();
		});
		$.post(this.url, {action: 'remove', id: id});
	}
	
	
	this.setFilesSortable = function(){
        this.$filesDiv.sortable({
            handle: '.sx-move-photo',
            cursor: "move",
            items: '.sx-form-preview',
            stop: (event, ui) => {
                self.reorder();
            }
        });
    }

	
	
}