$(document).ready(function(){

    // Prevent the default action when a file is dropped on the window
    $(document).on('drop dragover', function (e) {
        e.preventDefault();
    });
	
	$('.photo-back-button').on('click', function(event){
		fileUploadShowMedia();
		event.preventDefault();
	});
});

var bindFileUploadChoose = function(formElement, callbackFunc){
	
	var closeBtn = $($(formElement).find('.cr-close-media-btn'));
	closeBtn.on('click', function(e){
		$('.dropfile-parts').hide();
		$('.dropfile-parts.dropfilewrap').show();
		e.preventDefault();
	});
	
	$(formElement).find('.add-more-people').on('click', 
		function(event){
			fileUploadShowMedia();
			event.preventDefault();
		});
	
	$(formElement).find('.drop-btn-delete').on('click', 
		function(e){
			if(callbackFunc)
				callbackFunc('clear', null);
			fileUploadReset(formElement);
			e.preventDefault();
		});
	
	$(formElement).find('.drop-btn-edit').on('click', 
		function(e){
			$(formElement).find('.icon-obi-check').toggleClass('off');
			if($(formElement).find('.icon-obi-check').hasClass('off')){
				$(this).html('Edit');
				$(formElement).find('.obi-edit-menu').addClass('off');
			}else{
				$(this).html('Cancel');
				$(formElement).find('.obi-edit-menu').removeClass('off');
			}
			e.preventDefault();
		});
	
}

var fileUploadReset = function(formElement){
	
	$(formElement).find('.dropfile-parts').hide();
	$(formElement).find('.dropfile-parts.dropfilewrap').show();
	
}

var croppieInstance = [];

var dropfile_reset = function(formElement){
	fileUploadReset();
	var remove = [];
	
	for(var i = 0; i < croppieInstance.length; i++){
		var id = croppieInstance[i][0];
		if(id == formElement)
			remove[remove.length] = i;
	}
	
	for(var i = 0; i < remove.length; i++){
		croppieInstance.splice(i, 1);
	}
}

var fileUploadShowMedia = function(){
	$('.dropfile-parts').hide();
	$('.dropfile-parts.dropfilechoosemedia').show();
	
	$.get('/x/medialist').done(function(html){
		$('.dropfile-parts.dropfilechoosemedia .pp-add-media').html(html);
	});
}

var bindFileUpload = function(formElement, callbackFunc, flavour){
	
	//var overall = 0;
	//var knobs = new Array();
	
	/*$('#drop a').click(function(){
		// Simulate a click on the file input button
		// to show the file browser dialog
		$(this).parent().find('input').click();
	});*/
	
	var shape = 'square';
	var width = 200;
	var height = 200;
	
	if(flavour == 'profile'){
		shape = 'circle';
	}else if(flavour == 'post'){
		width = 250;
		height = 122;
	}else if(flavour == 'sip'){
		width = 250;
		height = 160;
	}
	
	var fileCount = 0;
	var viewport = { width: width, height: height, type: shape };
	
	bindFileUploadChoose(formElement, callbackFunc);
	
	// Initialize the jQuery File Upload plugin
	//$('#upload').fileupload({
	$(formElement).fileupload({
		
		url: '/content/upload/',
		
		// This element will accept file drag/drop uploading
		dropZone: $(formElement).find('.add-photo-section'),
		
		// This function is called when a file is added to the queue;
		// either via the browse button, or via drag/drop:
		add: function (e, data) {
			
   			//var ul = $('#upload ul');
			var ul = $(formElement).find('ul.uploadprogress');
			
			var progressInput = $(formElement).find('.progressInput');
			
			if(!progressInput.length){
		        var tpl = $('<li class="uploadProgress">'+
					'<input type="text" value="0" data-width="48" data-height="48" '+
		            ' data-fgColor="#0788a5" data-readOnly="1" data-bgColor="#3e4043" '+
					' class="progressInput" />'+
					'<p>Uploading..</p><span></span></li>');
				
				// Append the file name and file size
				//tpl.find('p').text(data.files[0].name)
				//   			 .append('<i>' + formatFileSize(data.files[0].size) + '</i>');
				
				// Add the HTML to the UL element
				//data.context = tpl.appendTo(ul);
				tpl.appendTo(ul);
				
				// Initialize the knob plugin
				tpl.find('input').knob({"fgColor":"#b31a00"});
				
				// Listen for clicks on the cancel icon
				/*tpl.find('span').click(function(){
					
					if(tpl.hasClass('working')){
						jqXHR.abort();
					}
					
					tpl.fadeOut(function(){
						tpl.remove();
					});
					
		        });*/
			}
			
			dropfile_callback('start', data);
			
			if(callbackFunc)
				callbackFunc('start', data);
			
			fileCount++;
			
			// Automatically upload the file once it is added to the queue
			var jqXHR = data.submit();
		},
		
		progressall: function(e, data){
			var progress = parseInt(data.loaded / data.total * 100, 10);
			$(formElement).find('.progressInput').val(progress).change();
		},
		
		done: function(e, data){
			dropfile_callback('one', data);
			
			if(callbackFunc)
				callbackFunc('one', data);
			
			if(--fileCount == 0){
				dropfile_callback('all', data);
			
				if(callbackFunc)
					callbackFunc('all', data);
			}
		},
		
		fail: function(e, data){
			// Something has gone wrong
			dropfile_callback('fail', data);
			
			if(callbackFunc)
				callbackFunc('fail', data);
		}	
	});
	
	var dropfile_callback = function(event, data){
		
		if(event == 'start'){
			$(formElement).find('.file-upload-intro').hide();
		}else if(event == 'one'){
		}else if(event == 'all'){
			$(formElement).find('ul.uploadprogress').empty();
			$(formElement).find('.file-upload-intro').show();
			
			var response = jQuery.parseJSON(data.jqXHR.responseText);
			if(response.status == 'success'){
				dropfile_showcropper(viewport, formElement, response.ident, callbackFunc);
			}
		}
	}
	
	// Helper function that formats the file sizes
	function formatFileSize(bytes) {
		if (typeof bytes !== 'number') {
			return '';
		}
		
		if (bytes >= 1000000000) {
			return (bytes / 1000000000).toFixed(2) + ' GB';
		}
		
		if (bytes >= 1000000) {
			return (bytes / 1000000).toFixed(2) + ' MB';
		}
		
		return (bytes / 1000).toFixed(2) + ' KB';
	}
	
};

var dropfile_showcropper = function(viewport, formElement, imageIdent, cbFunc){
	
	var ins = null;
	var i = 0;
	
	for(i; i < croppieInstance.length; i++){
		if(croppieInstance[i][0] == formElement){
			if(croppieInstance[i][1]){
				ins = croppieInstance[i][1];
				break;
			}
		}
	}
	
	if(ins){
		console.log('reusing for: '+'/content/'+imageIdent+'/hires');
		//ins.destroy();
		//croppieInstance.splice(i, 1);
		ins.bind({url:'/content/'+imageIdent+'/hires'});
	}else{
		//
		
		var match = $(formElement).find('.dropfile-parts.image-position img');
		
		console.log(match.length + ' croppies');
		
		var img = $(formElement).find('.dropfile-parts.image-position img')[0];
		$(img).attr('src', '/content/'+imageIdent+'/hires');
		
		ins = new Croppie(img, 
			{
				viewport: viewport,
				update: function (data) {
					if(cbFunc){
						data.viewport = viewport;
						cbFunc('crop', data);
					}
				}
			}
		);
		
		croppieInstance[croppieInstance.length] = [
			formElement,
			ins
		];
	}
	
	for(i = 0; i < croppieInstance.length; i++){
		console.log(i+': '+croppieInstance[i][0]+'/'+croppieInstance[i][1]);
	}
	
	$(formElement).find('.dropfile-parts').hide();
	$(formElement).find('.dropfile-parts.image-position').show();
	
	return ins;
}