From f29b375ed4be7fa88bfd6646324133821201f12c Mon Sep 17 00:00:00 2001
From: Baris Soner Usakli <barisusakli@gmail.com>
Date: Fri, 20 Dec 2013 18:41:56 -0500
Subject: [PATCH] refactored composer so that it uses a different div for each
 instance, closes #575

---
 public/src/modules/composer.js | 685 +++++++++++++++++----------------
 src/websockets.js              |  17 +-
 2 files changed, 363 insertions(+), 339 deletions(-)

diff --git a/public/src/modules/composer.js b/public/src/modules/composer.js
index 63988eaaa0..62505897f6 100644
--- a/public/src/modules/composer.js
+++ b/public/src/modules/composer.js
@@ -1,381 +1,294 @@
 define(['taskbar'], function(taskbar) {
 	var composer = {
-		initialized: false,
 		active: undefined,
 		taskbar: taskbar,
-		posts: {},
-		postContainer: undefined,
+		posts: {}
 	};
 
-	function createImagePlaceholder(img) {
-		var text = $('.post-window textarea').val(),
-			textarea = $('.post-window textarea'),
-			imgText = "!["+img.name+"](uploading...)",
-			uuid = $('.post-window .imagedrop').parents('[data-uuid]').attr('data-uuid');
-
-		text += imgText;
-		textarea.val(text + " ");
-		if(!composer.posts[uuid].uploadsInProgress) {
-			composer.posts[uuid].uploadsInProgress = [];
-		}
-
-		composer.posts[uuid].uploadsInProgress.push(1);
+	composer.push = function(tid, cid, pid, text) {
 
-		socket.emit("api:posts.uploadImage", img, function(err, data) {
-			if(err) {
-				return app.alertError(err.message);
+		socket.emit('api:composer.push', {
+			tid: tid,	// Replying
+			cid: cid,	// Posting
+			pid: pid,	// Editing
+			body: text	// Predefined text
+		}, function(threadData) {
+
+			if(threadData.error) {
+				app.alert({
+					type: 'danger',
+					timeout: 5000,
+					alert_id: 'post_error',
+					title: 'Please Log In to Post',
+					message: 'Posting is currently restricted to registered members only, click here to log in',
+					clickfn: function() {
+						ajaxify.go('login');
+					}
+				});
+				return;
 			}
-			var currentText = textarea.val();
-			imgText = "!["+data.name+"](uploading...)";
-
-			if(!err)
-				textarea.val(currentText.replace(imgText, "!["+data.name+"]("+data.url+")"));
-			else
-				textarea.val(currentText.replace(imgText, "!["+data.name+"](upload error)"));
-			composer.posts[uuid].uploadsInProgress.pop();
-		});
-	}
 
-	function loadFile(file) {
-		var reader = new FileReader(),
-			dropDiv = $('.post-window .imagedrop');
+			var uuid = utils.generateUUID();
 
-		$(reader).on('loadend', function(e) {
-			var bin = this.result;
-			bin = bin.split(',')[1];
+			composer.taskbar.push('composer', uuid, {
+				title: (!threadData.cid ? (threadData.title || '') : 'New Topic'),
+				icon: threadData.picture
+			});
 
-			var img = {
-				name: file.name,
-				data: bin
+			composer.posts[uuid] = {
+				tid: threadData.tid,
+				cid: threadData.cid,
+				pid: threadData.pid,
+				title: threadData.title || '',
+				body: threadData.body || '',
+				modified: false
 			};
 
-			createImagePlaceholder(img);
-
-			dropDiv.hide();
+			composer.load(uuid);
 		});
+	}
 
-		reader.readAsDataURL(file);
+	composer.load = function(post_uuid) {
+		if($('#cmp-uuid-' + post_uuid).length) {
+			composer.activateReposition(post_uuid);
+		} else {
+			composer.createNewComposer(post_uuid);
+		}
 	}
 
-	function initializeFileReader() {
-		jQuery.event.props.push( "dataTransfer" );
+	composer.createNewComposer = function(post_uuid) {
 
-		var draggingDocument = false;
+		templates.preload_template('composer', function() {
 
-		if(window.FileReader) {
-			var drop = $('.post-window .imagedrop'),
-				textarea = $('.post-window textarea');
+			var composerTemplate = templates['composer'].parse({});
+			composerTemplate = $(composerTemplate);
 
-			$(document).on('dragstart', function(e) {
-				draggingDocument = true;
-			}).on('dragend', function(e) {
-				draggingDocument = false;
-			});
+			composerTemplate.attr('id', 'cmp-uuid-' + post_uuid);
 
-			textarea.on('dragenter', function(e) {
-				if(draggingDocument) {
-					return;
-				}
-				drop.css('top', textarea.position().top + 'px');
-				drop.show();
+			$(document.body).append(composerTemplate);
 
-				drop.on('dragleave', function(ev) {
-					drop.hide();
-					drop.off('dragleave');
-				});
-			});
+			composer.activateReposition(post_uuid);
 
-			function cancel(e) {
-				e.preventDefault();
-				return false;
-			}
+			var postContainer = $(composerTemplate[0]);
 
-			drop.on('dragover', cancel);
-			drop.on('dragenter', cancel);
+			if(config.imgurClientIDSet) {
+				initializeFileReader(post_uuid);
+			}
 
-			drop.on('drop', function(e) {
-				e.preventDefault();
-				var uuid = drop.parents('[data-uuid]').attr('data-uuid'),
-					dt = e.dataTransfer,
-					files = dt.files;
+			var postData = composer.posts[post_uuid],
+				titleEl = postContainer.find('.title'),
+				bodyEl = postContainer.find('textarea');
+
+			if (parseInt(postData.tid) > 0) {
+				titleEl.val('Replying to: ' + postData.title);
+				titleEl.prop('readOnly', true);
+			} else if (parseInt(postData.pid) > 0) {
+				titleEl.val(postData.title);
+				titleEl.prop('readOnly', true);
+				socket.emit('api:composer.editCheck', postData.pid, function(editCheck) {
+					if (editCheck.titleEditable) {
+						postContainer.find('input').prop('readonly', false);
+					}
+				});
+			} else {
+				titleEl.val(postData.title);
+				titleEl.prop('readOnly', false);
+			}
 
-				for (var i=0; i<files.length; i++) {
-					loadFile(files[i]);
-				}
+			bodyEl.val(postData.body);
 
-				if(!files.length)
-					drop.hide();
-				return false;
+			postContainer.on('change', 'input, textarea', function() {
+				composer.posts[post_uuid].modified = true;
 			});
-		}
-	}
 
-	composer.init = function() {
-		if (!composer.initialized) {
-			templates.preload_template('composer', function() {
-				$(document.body).append(templates['composer'].parse({}));
-				composer.postContainer = $('.composer')[0];
+			postContainer.on('click', '.action-bar button', function() {
+				var	action = $(this).attr('data-action');
 
-				if(config.imgurClientIDSet) {
-					initializeFileReader();
+				switch(action) {
+					case 'post':
+						composer.post(post_uuid);
+						break;
+					case 'discard':
+						if (composer.posts[post_uuid].modified) {
+							bootbox.confirm('Are you sure you wish to discard this post?', function(discard) {
+								if (discard) {
+									composer.discard(post_uuid);
+								}
+							});
+						} else {
+							composer.discard(post_uuid);
+						}
+						break;
 				}
+			});
 
-				socket.on('api:composer.push', function(threadData) {
-					if (!threadData.error) {
-						var uuid = utils.generateUUID();
-
-						composer.taskbar.push('composer', uuid, {
-							title: (!threadData.cid ? (threadData.title || '') : 'New Topic'),
-							icon: threadData.picture
-						});
-
-						composer.posts[uuid] = {
-							tid: threadData.tid,
-							cid: threadData.cid,
-							pid: threadData.pid,
-							title: threadData.title || '',
-							body: threadData.body || '',
-							modified: false
-						};
-						composer.load(uuid);
-					} else {
-						app.alert({
-							type: 'danger',
-							timeout: 5000,
-							alert_id: 'post_error',
-							title: 'Please Log In to Post',
-							message: 'Posting is currently restricted to registered members only, click here to log in',
-							clickfn: function() {
-								ajaxify.go('login');
-							}
-						});
-					}
-				});
-
-				socket.on('api:composer.editCheck', function(editCheck) {
-					if (editCheck.titleEditable === true) composer.postContainer.querySelector('input').readOnly = false;
-				});
-
-				// Post Window events
-				var	jPostContainer = $(composer.postContainer),
-					postContentEl = composer.postContainer.querySelector('textarea'),
-					resizeEl = jPostContainer.find('.resizer');
-
-				jPostContainer.on('change', 'input, textarea', function() {
-					var uuid = $(this).parents('.composer').attr('data-uuid');
-					if (this.nodeName === 'INPUT') composer.posts[uuid].title = this.value;
-					else if (this.nodeName === 'TEXTAREA') composer.posts[uuid].body = this.value;
+			postContainer.on('click', '.formatting-bar span', function() {
+				var postContentEl = postContainer.find('textarea'),
+					iconClass = $(this).find('i').attr('class'),
+					cursorEnd = postContentEl.val().length,
+					selectionStart = postContentEl[0].selectionStart,
+					selectionEnd = postContentEl[0].selectionEnd,
+					selectionLength = selectionEnd - selectionStart;
 
-					// Mark this post window as having been changed
-					composer.posts[uuid].modified = true;
-				});
 
-				jPostContainer.on('click', '.action-bar button', function() {
-					var	action = this.getAttribute('data-action'),
-						uuid = $(this).parents('.composer').attr('data-uuid');
-					switch(action) {
-						case 'post': composer.post(uuid); break;
-						case 'discard':
-							if (composer.posts[uuid].modified) {
-								bootbox.confirm('Are you sure you wish to discard this post?', function(discard) {
-									if (discard) composer.discard(uuid);
-								});
-							} else {
-								composer.discard(uuid);
-							}
-							break;
-					}
-				});
-
-				jPostContainer.on('click', '.formatting-bar span', function() {
-					var iconClass = this.querySelector('i').className,
-						cursorEnd = postContentEl.value.length,
-						selectionStart = postContentEl.selectionStart,
-						selectionEnd = postContentEl.selectionEnd,
-						selectionLength = selectionEnd - selectionStart;
-
-					function insertIntoInput(element, value) {
-						var start = postContentEl.selectionStart;
-						element.value = element.value.slice(0, start) + value + element.value.slice(start, element.value.length);
-						postContentEl.selectionStart = postContentEl.selectionEnd = start + value.length;
-					}
+				function insertIntoInput(element, value) {
+					var start = postContentEl[0].selectionStart;
+					element.val(element.val().slice(0, start) + value + element.val().slice(start, element.val().length));
+					postContentEl[0].selectionStart = postContentEl[0].selectionEnd = start + value.length;
+				}
 
-					switch(iconClass) {
-						case 'fa fa-bold':
-							if (selectionStart === selectionEnd) {
-								// Nothing selected
-								insertIntoInput(postContentEl, "**bolded text**");
-							} else {
-								// Text selected
-								postContentEl.value = postContentEl.value.slice(0, selectionStart) + '**' + postContentEl.value.slice(selectionStart, selectionEnd) + '**' + postContentEl.value.slice(selectionEnd);
-								postContentEl.selectionStart = selectionStart + 2;
-								postContentEl.selectionEnd = selectionEnd + 2;
-							}
-						break;
-						case 'fa fa-italic':
-							if (selectionStart === selectionEnd) {
-								// Nothing selected
-								insertIntoInput(postContentEl, "*italicised text*");
-							} else {
-								// Text selected
-								postContentEl.value = postContentEl.value.slice(0, selectionStart) + '*' + postContentEl.value.slice(selectionStart, selectionEnd) + '*' + postContentEl.value.slice(selectionEnd);
-								postContentEl.selectionStart = selectionStart + 1;
-								postContentEl.selectionEnd = selectionEnd + 1;
-							}
-						break;
-						case 'fa fa-list':
+				switch(iconClass) {
+					case 'fa fa-bold':
+						if (selectionStart === selectionEnd) {
 							// Nothing selected
-							insertIntoInput(postContentEl, "\n\n* list item");
-						break;
-						case 'fa fa-link':
-							if (selectionStart === selectionEnd) {
-								// Nothing selected
-								insertIntoInput(postContentEl, "[link text](link url)");
-							} else {
-								// Text selected
-								postContentEl.value = postContentEl.value.slice(0, selectionStart) + '[' + postContentEl.value.slice(selectionStart, selectionEnd) + '](link url)' + postContentEl.value.slice(selectionEnd);
-								postContentEl.selectionStart = selectionStart + selectionLength + 3;
-								postContentEl.selectionEnd = selectionEnd + 11;
-							}
-						break;
-					}
-				});
+							insertIntoInput(postContentEl, "**bolded text**");
+						} else {
+							// Text selected
+							postContentEl.val(postContentEl.val().slice(0, selectionStart) + '**' + postContentEl.val().slice(selectionStart, selectionEnd) + '**' + postContentEl.val().slice(selectionEnd));
+							postContentEl[0].selectionStart = selectionStart + 2;
+							postContentEl[0].selectionEnd = selectionEnd + 2;
+						}
+					break;
+					case 'fa fa-italic':
+						if (selectionStart === selectionEnd) {
+							// Nothing selected
+							insertIntoInput(postContentEl, "*italicised text*");
+						} else {
+							// Text selected
+							postContentEl.val(postContentEl.val().slice(0, selectionStart) + '*' + postContentEl.val().slice(selectionStart, selectionEnd) + '*' + postContentEl.val().slice(selectionEnd));
+							postContentEl[0].selectionStart = selectionStart + 1;
+							postContentEl[0].selectionEnd = selectionEnd + 1;
+						}
+					break;
+					case 'fa fa-list':
+						// Nothing selected
+						insertIntoInput(postContentEl, "\n\n* list item");
+					break;
+					case 'fa fa-link':
+						if (selectionStart === selectionEnd) {
+							// Nothing selected
+							insertIntoInput(postContentEl, "[link text](link url)");
+						} else {
+							// Text selected
+							postContentEl.val(postContentEl.val().slice(0, selectionStart) + '[' + postContentEl.val().slice(selectionStart, selectionEnd) + '](link url)' + postContentEl.val().slice(selectionEnd));
+							postContentEl[0].selectionStart = selectionStart + selectionLength + 3;
+							postContentEl[0].selectionEnd = selectionEnd + 11;
+						}
+					break;
+				}
+			});
 
-				var	resizeActive = false,
-					resizeCenterX = 0,
-					resizeOffset = 0,
-					resizeAction = function(e) {
-						if (resizeActive) {
-							position = (e.clientX + resizeOffset);
-							if (Math.abs(position - resizeSnaps.half) <= 15) {
-								// Half snap
-								jPostContainer.css('width', resizeSnaps.half);
-								resizeSavePosition(resizeSnaps.half);
-							} else if (Math.abs(position - resizeSnaps.none) <= 30) {
-								// Minimize snap
-								jPostContainer.css('width', bodyRect.width - resizeSnaps.none + 15);
-								resizeSavePosition(resizeSnaps.none);
-							} else if (position <= 30) {
-								// Full snap
-								jPostContainer.css('width', bodyRect.width - 15);
-								resizeSavePosition(bodyRect.width - 15);
-							} else {
-								// OH SNAP, NO SNAPS!
-								jPostContainer.css('width', bodyRect.width - position);
-								resizeSavePosition(bodyRect.width - position);
-							}
+			var	resizeActive = false,
+				resizeCenterX = 0,
+				resizeOffset = 0,
+				resizeAction = function(e) {
+					if (resizeActive) {
+						position = (e.clientX + resizeOffset);
+						if (Math.abs(position - resizeSnaps.half) <= 15) {
+							// Half snap
+							postContainer.css('width', resizeSnaps.half);
+							resizeSavePosition(resizeSnaps.half);
+						} else if (Math.abs(position - resizeSnaps.none) <= 30) {
+							// Minimize snap
+							postContainer.css('width', bodyRect.width - resizeSnaps.none + 15);
+							resizeSavePosition(resizeSnaps.none);
+						} else if (position <= 30) {
+							// Full snap
+							postContainer.css('width', bodyRect.width - 15);
+							resizeSavePosition(bodyRect.width - 15);
+						} else {
+							// OH SNAP, NO SNAPS!
+							postContainer.css('width', bodyRect.width - position);
+							resizeSavePosition(bodyRect.width - position);
 						}
-					},
-					resizeSavePosition = function(px) {
-						var	percentage = px/bodyRect.width;
-						localStorage.setItem('composer:resizePercentage', percentage);
-					},
-					resizeSnaps = {
-						none: 0,
-						half: 0,
-						full: 0
-					},
-					resizeRect, bodyRect;
-
-				resizeEl
-					.on('mousedown', function(e) {
-						bodyRect = document.body.getBoundingClientRect();
-						resizeRect = resizeEl[0].getBoundingClientRect();
-						resizeCenterX = resizeRect.left + (resizeRect.width/2);
-						resizeOffset = resizeCenterX - e.clientX;
-						resizeSnaps.half = bodyRect.width / 2;
-						resizeSnaps.none = bodyRect.width;
-						resizeActive = true;
-
-						$(document.body).on('mousemove', resizeAction);
-					})
-					.on('mouseup', function() {
-						resizeActive = false;
-						$(document.body).off('mousemove', resizeAction);
-					});
-
-				window.addEventListener('resize', function() {
-					if (composer.active !== undefined) composer.reposition(composer.active);
+					}
+				},
+				resizeSavePosition = function(px) {
+					var	percentage = px/bodyRect.width;
+					localStorage.setItem('composer:resizePercentage', percentage);
+				},
+				resizeSnaps = {
+					none: 0,
+					half: 0,
+					full: 0
+				},
+				resizeRect, bodyRect;
+
+			var resizeEl = postContainer.find('.resizer');
+
+			resizeEl
+				.on('mousedown', function(e) {
+					bodyRect = document.body.getBoundingClientRect();
+					resizeRect = resizeEl[0].getBoundingClientRect();
+					resizeCenterX = resizeRect.left + (resizeRect.width/2);
+					resizeOffset = resizeCenterX - e.clientX;
+					resizeSnaps.half = bodyRect.width / 2;
+					resizeSnaps.none = bodyRect.width;
+					resizeActive = true;
+
+					$(document.body).on('mousemove', resizeAction);
+				})
+				.on('mouseup', function() {
+					resizeActive = false;
+					$(document.body).off('mousemove', resizeAction);
 				});
 
-				composer.initialized = true;
+			window.addEventListener('resize', function() {
+				if (composer.active !== undefined) {
+					composer.activateReposition(composer.active);
+				}
 			});
-		}
+		});
 	}
 
-	composer.push = function(tid, cid, pid, text) {
-		if (!composer.initialized) {
-			var	args = arguments;
-			setTimeout(function() {
-				composer.push.apply(composer, args);
-			}, 500);
-		} else {
-			socket.emit('api:composer.push', {
-				tid: tid,	// Replying
-				cid: cid,	// Posting
-				pid: pid,	// Editing
-				body: text	// Predefined text
-			});
+	composer.activateReposition = function(post_uuid) {
+
+		if(composer.active && composer.active !== post_uuid) {
+			composer.minimize(composer.active);
 		}
-	}
 
-	composer.load = function(post_uuid) {
-		var post_data = composer.posts[post_uuid],
-			titleEl = composer.postContainer.querySelector('input'),
-			bodyEl = composer.postContainer.querySelector('textarea');
+		var	percentage = localStorage.getItem('composer:resizePercentage'),
+			bodyRect = document.body.getBoundingClientRect(),
+			postContainer = $('#cmp-uuid-' + post_uuid);
 
-		composer.reposition(post_uuid);
 		composer.active = post_uuid;
 
-		composer.postContainer.setAttribute('data-uuid', post_uuid);
-		if (parseInt(post_data.tid) > 0) {
-			titleEl.value = 'Replying to: ' + post_data.title;
-			titleEl.readOnly = true;
-		} else if (parseInt(post_data.pid) > 0) {
-			titleEl.value = post_data.title;
-			titleEl.readOnly = true;
-			socket.emit('api:composer.editCheck', post_data.pid);
-		} else {
-			titleEl.value = post_data.title;
-			titleEl.readOnly = false;
+		if (percentage) {
+			if (bodyRect.width >= 768) {
+				postContainer.css('width', Math.floor(bodyRect.width * percentage) + 'px');
+			} else {
+				postContainer.css('width', '100%');
+			}
 		}
-		bodyEl.value = post_data.body;
 
+		postContainer.css('visibility', 'visible');
 
-		// Direct user focus to the correct element
-		if ((parseInt(post_data.tid) || parseInt(post_data.pid)) > 0) {
-			bodyEl.focus();
-			bodyEl.selectionStart = bodyEl.value.length;
-			bodyEl.selectionEnd = bodyEl.value.length;
-		} else if (parseInt(post_data.cid) > 0) {
-			titleEl.focus();
-		}
+		composer.focusElements(post_uuid);
 	}
 
-	composer.reposition = function(post_uuid) {
-		// Resize the composer to the saved size
-		var	percentage = localStorage.getItem('composer:resizePercentage'),
-			bodyRect = document.body.getBoundingClientRect();
+	composer.focusElements = function(post_uuid) {
+		var postContainer = $('#cmp-uuid-' + post_uuid),
+			postData = composer.posts[post_uuid],
+			titleEl = postContainer.find('.title'),
+			bodyEl = postContainer.find('textarea');
 
-		if (percentage) {
-			if (bodyRect.width >= 768) {
-				composer.postContainer.style.width = Math.floor(bodyRect.width * percentage) + 'px';
-			} else {
-				composer.postContainer.style.width = '100%';
-			}
+		if ((parseInt(postData.tid) || parseInt(postData.pid)) > 0) {
+			bodyEl.focus();
+			bodyEl.selectionStart = bodyEl.val().length;
+			bodyEl.selectionEnd = bodyEl.val().length;
+		} else if (parseInt(postData.cid) > 0) {
+			titleEl.focus();
 		}
-
-		composer.postContainer.style.visibility = 'visible';
 	}
 
 	composer.post = function(post_uuid) {
-		// Check title and post length
 		var postData = composer.posts[post_uuid],
-			titleEl = composer.postContainer.querySelector('input'),
-			bodyEl = composer.postContainer.querySelector('textarea');
+			postContainer = $('#cmp-uuid-' + post_uuid),
+			titleEl = postContainer.find('.title'),
+			bodyEl = postContainer.find('textarea');
 
-		titleEl.value = titleEl.value.trim();
-		bodyEl.value = bodyEl.value.trim();
+		titleEl.val(titleEl.val().trim());
+		bodyEl.val(bodyEl.val().trim());
 
 		if(postData.uploadsInProgress && postData.uploadsInProgress.length) {
 			return app.alert({
@@ -387,7 +300,7 @@ define(['taskbar'], function(taskbar) {
 			});
 		}
 
-		if (titleEl.value.length < config.minimumTitleLength) {
+		if (titleEl.val().length < config.minimumTitleLength) {
 			return app.alert({
 				type: 'danger',
 				timeout: 2000,
@@ -397,7 +310,7 @@ define(['taskbar'], function(taskbar) {
 			});
 		}
 
-		if (bodyEl.value.length < config.minimumPostLength) {
+		if (bodyEl.val().length < config.minimumPostLength) {
 			return app.alert({
 				type: 'danger',
 				timeout: 2000,
@@ -410,20 +323,20 @@ define(['taskbar'], function(taskbar) {
 		// Still here? Let's post.
 		if (parseInt(postData.cid) > 0) {
 			socket.emit('api:topics.post', {
-				'title' : titleEl.value,
-				'content' : bodyEl.value,
+				'title' : titleEl.val(),
+				'content' : bodyEl.val(),
 				'category_id' : postData.cid
 			});
 		} else if (parseInt(postData.tid) > 0) {
 			socket.emit('api:posts.reply', {
 				'topic_id' : postData.tid,
-				'content' : bodyEl.value
+				'content' : bodyEl.val()
 			});
 		} else if (parseInt(postData.pid) > 0) {
 			socket.emit('api:posts.edit', {
 				pid: postData.pid,
-				content: bodyEl.value,
-				title: titleEl.value
+				content: bodyEl.val(),
+				title: titleEl.val()
 			});
 		}
 
@@ -432,20 +345,130 @@ define(['taskbar'], function(taskbar) {
 
 	composer.discard = function(post_uuid) {
 		if (composer.posts[post_uuid]) {
-			$(composer.postContainer).find('.imagedrop').hide();
+			$('#cmp-uuid-' + post_uuid).remove();
 			delete composer.posts[post_uuid];
-			composer.minimize();
+			composer.active = undefined;
 			taskbar.discard('composer', post_uuid);
 		}
 	}
 
-	composer.minimize = function(uuid) {
-		composer.postContainer.style.visibility = 'hidden';
+	composer.minimize = function(post_uuid) {
+		var postContainer = $('#cmp-uuid-' + post_uuid);
+		postContainer.css('visibility', 'hidden');
 		composer.active = undefined;
-		taskbar.minimize('composer', uuid);
+		taskbar.minimize('composer', post_uuid);
 	}
 
-	composer.init();
+	function initializeFileReader(post_uuid) {
+		if(jQuery.event.props.indexOf('dataTransfer') === -1) {
+			jQuery.event.props.push('dataTransfer');
+		}
+
+		var draggingDocument = false;
+
+		if(window.FileReader) {
+			var postContainer = $('#cmp-uuid-' + post_uuid),
+				drop = postContainer.find('.imagedrop'),
+				textarea = postContainer.find('textarea');
+
+			$(document).off('dragstart').on('dragstart', function(e) {
+				draggingDocument = true;
+			}).off('dragend').on('dragend', function(e) {
+				draggingDocument = false;
+			});
+
+			textarea.on('dragenter', function(e) {
+				if(draggingDocument) {
+					return;
+				}
+				drop.css('top', textarea.position().top + 'px');
+				drop.css('height', textarea.height());
+				drop.css('line-height', textarea.height() + 'px');
+				drop.show();
+
+				drop.on('dragleave', function(ev) {
+					drop.hide();
+					drop.off('dragleave');
+				});
+			});
+
+			function cancel(e) {
+				e.preventDefault();
+				return false;
+			}
+
+			drop.on('dragover', cancel);
+			drop.on('dragenter', cancel);
+
+			drop.on('drop', function(e) {
+				e.preventDefault();
+				var dt = e.dataTransfer,
+					files = dt.files;
+
+				for (var i=0; i<files.length; i++) {
+					loadFile(post_uuid, files[i]);
+				}
+
+				if(!files.length) {
+					drop.hide();
+				}
+				return false;
+			});
+		}
+	}
+
+	function loadFile(post_uuid, file) {
+		var reader = new FileReader(),
+			dropDiv = $('#cmp-uuid-' + post_uuid).find('.imagedrop');
+
+		$(reader).on('loadend', function(e) {
+			var bin = this.result;
+			bin = bin.split(',')[1];
+
+			var img = {
+				name: file.name,
+				data: bin
+			};
+
+			createImagePlaceholder(post_uuid, img);
+
+			dropDiv.hide();
+		});
+
+		reader.readAsDataURL(file);
+	}
+
+
+	function createImagePlaceholder(post_uuid, img) {
+		var postContainer = $('#cmp-uuid-' + post_uuid),
+			textarea = postContainer.find('textarea'),
+			text = textarea.val(),
+			imgText = "![" + img.name + "](uploading...)";
+
+		text += imgText;
+		textarea.val(text + " ");
+
+		if(!composer.posts[post_uuid].uploadsInProgress) {
+			composer.posts[post_uuid].uploadsInProgress = [];
+		}
+
+		composer.posts[post_uuid].uploadsInProgress.push(1);
+
+		socket.emit("api:posts.uploadImage", img, function(err, data) {
+			if(err) {
+				return app.alertError(err.message);
+			}
+			var currentText = textarea.val();
+			imgText = "![" + data.name + "](uploading...)";
+
+			if(!err) {
+				textarea.val(currentText.replace(imgText, "![" + data.name + "](" + data.url + ")"));
+			} else {
+				textarea.val(currentText.replace(imgText, "![" + data.name + "](upload error)"));
+			}
+			composer.posts[post_uuid].uploadsInProgress.pop();
+		});
+	}
 
 	return {
 		push: composer.push,
diff --git a/src/websockets.js b/src/websockets.js
index 55c606b909..2c2946e1e6 100644
--- a/src/websockets.js
+++ b/src/websockets.js
@@ -799,14 +799,15 @@ websockets.init = function(io) {
 			meta.configs.remove(key);
 		});
 
-		socket.on('api:composer.push', function(data) {
+		socket.on('api:composer.push', function(data, callback) {
 			if (parseInt(uid, 10) > 0 || parseInt(meta.config.allowGuestPosting, 10) === 1) {
 				if (parseInt(data.tid) > 0) {
 					topics.getTopicData(data.tid, function(err, topicData) {
-						if (data.body)
+						if (data.body) {
 							topicData.body = data.body;
+						}
 
-						socket.emit('api:composer.push', {
+						callback({
 							tid: data.tid,
 							title: topicData.title,
 							body: topicData.body
@@ -815,7 +816,7 @@ websockets.init = function(io) {
 				} else if (parseInt(data.cid) > 0) {
 					user.getUserFields(uid, ['username', 'picture'], function(err, userData) {
 						if (!err && userData) {
-							socket.emit('api:composer.push', {
+							callback({
 								tid: 0,
 								cid: data.cid,
 								username: userData.username,
@@ -836,7 +837,7 @@ websockets.init = function(io) {
 							});
 						}
 					], function(err, results) {
-						socket.emit('api:composer.push', {
+						callback({
 							title: results[1],
 							pid: data.pid,
 							body: results[0].content
@@ -844,16 +845,16 @@ websockets.init = function(io) {
 					});
 				}
 			} else {
-				socket.emit('api:composer.push', {
+				callback({
 					error: 'no-uid'
 				});
 			}
 		});
 
-		socket.on('api:composer.editCheck', function(pid) {
+		socket.on('api:composer.editCheck', function(pid, callback) {
 			posts.getPostField(pid, 'tid', function(err, tid) {
 				postTools.isMain(pid, tid, function(err, isMain) {
-					socket.emit('api:composer.editCheck', {
+					callback({
 						titleEditable: isMain
 					});
 				})