/**
 * 
 * Media Library Class Definition
 * 
 */
var bdMediaLibrary = function(xcb){
	this.parentElem = null;
	this.callback = xcb;
	this.editor = null;
	var pinstance = this;
	
	this.setCallback = function(cb){
		this.callback = cb;
	}
	
	this.isAttached = function(){
		return this.parentElem !== null;
	}
	
	this.attach = function(elem){
		this.parentElem = elem;
		
		//
		// Register with the 'add custom' (upload new content) button
		//
		$(this.parentElem).find('.cf-add-media-wrap').on('click', function(e){
			e.preventDefault();
			
			if(typeof pinstance.callback.addcustom !== 'undefined')
				pinstance.callback.addcustom();
			else{
				// Simulate a click on the file input button
				// to show the file browser dialog
				var input = $(this).parent().find('.cf-library-form input')[0];
				$(input).click();
			}
		});
		
		//
		// Register with the 'commit' (done) button
		//
		$(this.parentElem).find('.btn-media-commit').on('click', function(e){
			e.preventDefault();
			
			var files = $(elem).find('.cf-library-list input.mediaiteminput');
			var selected = [];
			
			for(var i = 0; i != files.length; i++){
				if($(files[i]).prop('checked')){
					var ident = $(files[i]).val();
					selected.push(ident);
				}
			}
			
			if(typeof pinstance.callback.chosen !== 'undefined')
				pinstance.callback.chosen(selected);
			
		});
		
		//
		// Register to close the media library
		//
		$(this.parentElem).find('a.close-upload-media').on('click', function(e){
			e.preventDefault();
			
			if(typeof callback.cancelled !== 'undefined')
				callback.cancelled();
		});
		
		//
		// Register to 'go back'
		//
		$(this.parentElem).find('a.back-arrow').on('click', function(e){
			e.preventDefault();
			
			if(typeof pinstance.callback.cancelled !== 'undefined')
				pinstance.callback.cancelled();
		});
		
		var endpoint = '/content/upload/';
		var params = [];
		
		if(typeof pinstance.callback.uploadurl !== 'undefined')
			endpoint = pinstance.callback.uploadurl;
		
		if(typeof pinstance.callback.postdata !== 'undefined')
			params = pinstance.callback.postdata;
		
		fileUploadAttach(
			//
			// Form which facilitates upload
			//
			$(pinstance.parentElem).find('.cf-library-form')[0],
			
			endpoint,
			
			params,
		
			function(type, data){
				if(type == 'start'){
					//cfToggleDropContainer('exit');
				
					var clone = $(pinstance.parentElem).find('.cf-library-item-template li').clone();
					$(clone).attr('id', 'mli'+data.file.ref);
					$(clone).find('.cf-media-progress').knob({"fgColor":"#b31a00"});
					$(pinstance.parentElem).find('.cf-library-list').append(clone);
				
					$(pinstance.parentElem).find('#mli'+data.file.ref+' .cf-remove-media').on('click', function(e){
						e.preventDefault();
					
						//
						// Allow the user to abort the upload if it's in progress
						//
						if($(this).closest('li').hasClass('working')){
							data.jqXHR.abort();
						}
					
						$(this).closest('li').remove();
						//cfUpdateEditor();
					});
				
				}else if(type == 'progress'){
					$(pinstance.parentElem).find('#mli'+data.file.ref).find('.cf-media-progress').val(data.progress).change();
				
				}else if(type == 'one'){
					$(pinstance.parentElem).find('#mli'+data.file.ref).find('.cf-progress-wrap').remove();
					
					var response = jQuery.parseJSON(data.jqXHR.responseText);
					if(response.status == 'success'){
					
						if(typeof pinstance.callback.uploaded !== 'undefined'){
							$(pinstance.parentElem).find('#mli'+data.file.ref).remove();
							pinstance.callback.uploaded(response.ident);
						}else{
							console.log(response.ident);
							$(pinstance.parentElem).find('#mli'+data.file.ref).removeClass('working');
							$(pinstance.parentElem).find('#mli'+data.file.ref+' img').attr('src', '/content/'+response.ident+'/llist');
							$(pinstance.parentElem).find('#mli'+data.file.ref+' input.mediaiteminput').val(response.ident);
						}
					}else{
						$(pinstance.parentElem).find('#mli'+data.file.ref).remove();
						console.log(response);
					}
				}
			
				//cfUpdateEditor();
			});
		
		this.viewBrowse();
	}
	
	this.clearSelected = function(){
		var files = $(this.parentElem).find('.cf-library-list input.mediaiteminput');
		files.prop('checked', false);
	}
	
	this.select = function(ident){
		var item = $(this.parentElem).find('input#chk'+ident)[0];
		if(item)
			$(item).prop('checked', true);
	}
	
	this.viewBrowse = function(){
		//$(this.parentElem).show();
		$(this.parentElem).find('.create-flow-panel').hide();
		$(this.parentElem).find('.create-flow-panel.medialibrary-browse').show();
	}
	
	this.viewEdit = function(ident, viewport){
		//$(this.parentElem).show();
		$(this.parentElem).find('.create-flow-panel').hide();
		var elem = $(this.parentElem).find('.create-flow-panel.medialibrary-edit-photo')[0];
		var pinstance = this;
		
		if(!this.editor){
			this.editor = new bdPhotoEditor({
				cancelled: function(){
					pinstance.viewBrowse();
				},
				save: function(ident){
					pinstance.viewBrowse();
					
					if(typeof pinstance.callback.save !== 'undefined')
						pinstance.callback.save(ident);
				},
				edit: function(cropinfo){
					if(typeof pinstance.callback.edit !== 'undefined')
						pinstance.callback.edit(ident, cropinfo);
				}
			});
		}
		
		if(typeof bdwidget !== 'undefined'){
			bdwidget('medialibraryeditor', {ident:ident})
				.done(function( html ) {
					$(elem).html(html);
			
					pinstance.editor.attach(
						elem,
						ident,
						viewport);
			
					$(elem).show();
				});
		}else{
		
			$.post( "/x/medialibraryeditor", {ident:ident})
				.done(function( html ) {
					$(elem).html(html);
			
					pinstance.editor.attach(
						elem,
						ident,
						viewport);
			
					$(elem).show();
				});
		}
	}
	
	this.viewNone = function(){
		$(this.parentElem).hide();
	}
	
	this.view = function(){
		$(this.parentElem).show();
	}
}

/**
 * 
 * Photo Editor Class Definition
 * 
 */
var bdPhotoEditor = function(callback){
	this.parentElem = null;
	this.callback = callback;
	this.ident = null;
	this.cropper = null;
	this.size = 'hires';
	this.drawer = new bdImageDrawer({});
	this.viewport = { width: 500, height: 282, type: 'square' };
	var pinstance = this;
	
	this.isAttached = function(){
		return this.parentElem !== null;
	}
	
	this.attach = function(elem, ident, viewport){
		this.parentElem = elem;
		this.ident = ident;
		this.viewport = { width: 500, height: 282, type: 'square' };
		
		if(typeof viewport !== 'undefined')
			this.viewport = viewport;
		
		//
		// Register to 'go back'
		//
		$(this.parentElem).find('a.back-arrow').on('click', function(e){
			e.preventDefault();
			
			if(typeof callback.cancelled !== 'undefined')
				callback.cancelled();
		});
		
		$(this.parentElem).find('.cfphototabs a.crop-btn, .cfphototabs a.link-btn').on('click', function(e){
			e.preventDefault();
			showTab(elem, $(this).attr('data-ref'));
		});
		
		$(this.parentElem).find('.cfphototabs a.cfphotosave').on('click', function(e){
			
			var cropinfo = null;
			if(pinstance.cropper){
				cropinfo = pinstance.cropper.get();
				cropinfo.ident = pinstance.ident;
				cropinfo.size = pinstance.size;
				
				if(typeof callback.edit !== 'undefined')
					callback.edit(cropinfo);
				else{
					$.post('/content/crop.php', cropinfo)
						.done(function(response){
					
						var json = JSON.parse(response);
					
						if(json.result=='success'){
							console.log(json.ident);
						
							if(typeof callback.save !== 'undefined')
								callback.save(json.ident);
						}
					});
				}
			}
		});
		
		$(this.parentElem).find('.cfphototabs a.cfphotocancel').on('click', function(e){
			console.log('cancel');
			
			if(typeof callback.cancelled !== 'undefined')
				callback.cancelled();
		});
		
		this.viewEdit();
		
		var img = $(this.parentElem).find('.crop-space img')[0];
		//$(img).attr('src', '/content/'+ident+'/'+pinstance.size);
		
		this.cropper = new Croppie(img, {
			enforceBoundary: false,
			viewport: this.viewport
			});
		
		this.drawer.attach(
			$(this.parentElem).find('.cfphotoedit-tab-link .image-space')[0],
			ident,
			pinstance.size
		);
	}
	
	this.viewEdit = function(){
		showTab(this.parentElem, 'edit');
	}
	
	this.viewLink = function(){
		showTab(this.parentElem, 'link');
	}
	
	var showTab = function(elem, name){
		var cropinfo = null;
		var img = $(pinstance.parentElem).find('.crop-space img')[0];
		
		if(pinstance.cropper)
			cropinfo = pinstance.cropper.get();
		
		var panes = $($(elem).find('.cfphototabpanes')[0]);
		var pane = $(panes.find('.cfphotoedit-tab-'+name)[0]);
		
		if(!pane.is(':visible')){
			panes.find('.cfphotoedit-tab-pane').hide();
			pane.show();
			
			if(name == 'link')
				pinstance.drawer.refresh($(img).attr('data-ident'), cropinfo);
			
		}
	}
}

var bdImageDrawer = function(callback){
	this.parentElem = null;
	this.callback = callback;
	this.ident = null;
	this.canvas = null;
	this.ctx = null;
	this.rect = {};
	this.dragging = false;
	this.imageObj = null;
	this.width = 562;
	this.height = 400;
	this.loaded = false;
	this.offset = null;
	this.cropinfo = null;
	this.size = 'hires';
	
	var pinstance = this;
	
	this.attach = function(elem, ident, size){
		this.parentElem = elem;
		this.canvas = $(this.parentElem).find('canvas')[0];
		
		this.canvas.addEventListener('mousedown', this.mouseDown, false);
		this.canvas.addEventListener('mouseup', this.mouseUp, false);
		this.canvas.addEventListener('mousemove', this.mouseMove, false);
		
		this.size=size;
	}
	
	this.refresh = function(ident, cropinfo) {
		this.ident = ident;
		
		this.imageObj = null;
		this.rect = {};
		this.dragging = false;
		this.loaded = false;
		
		this.offset = getViewOffset(this.canvas);
		this.width = $(this.canvas).outerWidth();
		this.height = $(this.canvas).outerHeight();
		
		this.canvas.width = this.width;
		this.canvas.height = this.height;
		
		this.ctx = this.canvas.getContext('2d');
		this.cropinfo = cropinfo;
		
		this.imageObj = new Image();
		this.imageObj.onload = function () { 
			pinstance.ctx.drawImage(
				pinstance.imageObj,
				pinstance.cropinfo.points[0],
				pinstance.cropinfo.points[1],
				pinstance.cropinfo.points[2]-pinstance.cropinfo.points[0],
				pinstance.cropinfo.points[3]-pinstance.cropinfo.points[1],
				0,
				0,
				pinstance.width,
				pinstance.height); 
			
			pinstance.loaded = true;
		};
		
		this.imageObj.src = '/content/'+this.ident+'/hires';
	}
	
	this.mouseDown = function(e) {
		pinstance.rect.startX = e.pageX - pinstance.offset.x;
		pinstance.rect.startY = e.pageY - pinstance.offset.y;
		pinstance.dragging = true;
	}
	
	this.mouseUp = function() {
		pinstance.dragging = false;
	}
	
	this.mouseMove = function(e) {
		if (pinstance.dragging && pinstance.loaded) {
			console.log(this.offsetLeft);
			pinstance.ctx.clearRect(0, 0, pinstance.width, pinstance.height);
			pinstance.ctx.drawImage(pinstance.imageObj,
				pinstance.cropinfo.points[0],
				pinstance.cropinfo.points[1],
				pinstance.cropinfo.points[2]-pinstance.cropinfo.points[0],
				pinstance.cropinfo.points[3]-pinstance.cropinfo.points[1],
				0,
				0,
				pinstance.width,
				pinstance.height); 
			pinstance.rect.w = (e.pageX - pinstance.offset.x) - pinstance.rect.startX;
			pinstance.rect.h = (e.pageY - pinstance.offset.y) - pinstance.rect.startY;
			pinstance.ctx.strokeStyle = 'red';
			pinstance.ctx.strokeRect(pinstance.rect.startX, pinstance.rect.startY, pinstance.rect.w, pinstance.rect.h);
			
		}
	}
}

var bdSipAssignModal = function(xcb){
	this.parentElem = null;
	this.callback = xcb;
	this.editor = null;
	var pinstance = this;
	
	this.isAttached = function(){
		return this.parentElem !== null;
	}
	
	this.attach = function(elem){
		this.parentElem = elem;
		
		$(this.parentElem).find('.btn-assign-item').on('click', function(e){
			e.preventDefault();
			
			var selected = $(pinstance.parentElem).find('.sip-list-wrap input:checked');
			if(selected.length){
				var sips = [];
				$.each(selected, function(i,v){
					sips.push($(v).val());
				});
				
				pinstance.callback.assign(sips);
			}
		});
		
		$(this.parentElem).find('.popup-assign-content-close').click(function(e) {
			e.preventDefault();
			pinstance.callback.cancelled();
		});
		
	}
}