$(function(){
	
	var dropbox = $('#dropbox'),
		message = $('.message', dropbox);
		

	dropbox.filedrop({
		// The name of the $_FILES entry:
		paramname:'pic',
		
		maxfiles: 100,
    	maxfilesize: 5,
		url: '../admin/dokumente/post_file.php',
		
		uploadFinished:function(i,file,response){
			$.data(file).addClass('done');
			// response is the JSON object that post_file.php returns
		},
		
    	error: function(err, file) {
			switch(err) {
				case 'BrowserNotSupported':
					showMessage('Your browser does not support HTML5 file uploads!');
					break;
				case 'TooManyFiles':
					alert('Too many files! Please select 5 at most! (configurable)');
					break;
				case 'FileTooLarge':
					alert(file.name+' is too large! Please upload files up to 2mb (configurable).');
					break;
				default:
					break;
			}
		},
		
		// Called before each upload is started
		beforeEach: function(file){
			
			if (	!file.type.match(/^image\//) &&
					! (	file.type == 'text/plain' ||
						file.type == 'application/msword' ||
						file.type == 'application/vnd.openxmlformats-officedocument.wordprocessingml.document' ||
						file.type == 'application/vnd.ms-excel'	||
						file.type == 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' ||
						file.type == 'application/pdf' ) ) {
				alert('Nur Bilder und folgende Dokumentarten sind erlaubt:\r\n.txt\r\n.doc\r\n.docx\r\n.xls\r\n.xlsx\r\n.pdf');
				return false;
			}
			
			
		},
		
		uploadStarted:function(i, file, len){
			createImage(file);
		},
		
		progressUpdated: function(i, file, progress) {
			$.data(file).find('.progress').width(progress);
		}
    	 
	});
	
	var template = '<div class="preview">'+
						'<span class="imageHolder">'+
							'<img />'+
							'<span class="uploaded"></span>'+
							'<span class="subtext"></span>'+
						'</span>'+
						'<div class="progressHolder">'+
							'<div class="progress"></div>'+
						'</div>'+
					'</div>'; 
	
	
	function createImage(file){

		var preview = $(template), image = $('img', preview);
			
		var reader = new FileReader();
		
		image.width = 100;
		image.height = 100;
		
		reader.onload = function(e){
			
			// e.target.result holds the DataURL which
			// can be used as a source of the image:
			$('span.subtext:last').text(file.name);
			
			if ( file.type == 'text/plain' ) {
				image.attr('src','/inc/css/filedrop/icon_txt.jpg');
			} else if ( file.type == 'application/msword' || file.type == 'application/vnd.openxmlformats-officedocument.wordprocessingml.document' ) {
				image.attr('src','/inc/css/filedrop/icon_doc.jpg');
			} else if ( file.type == 'application/vnd.ms-excel' || file.type == 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' ) {
				image.attr('src','/inc/css/filedrop/icon_xls.jpg');
			} else if ( file.type == 'application/pdf' ) {
				image.attr('src','/inc/css/filedrop/icon_pdf.png');
			} else {
				image.attr('src',e.target.result);
			}
		};
		
		// Reading the file as a DataURL. When finished,
		// this will trigger the onload function above:
		reader.readAsDataURL(file);
		
		
		message.hide();
		preview.appendTo(dropbox);
		
		// Associating a preview container
		// with the file, using jQuery's $.data():
		
		$.data(file,preview);
	}

	function showMessage(msg){
		message.html(msg);
	}

});