infinite loader will insert posts in correct order

public/src/app.js

@@ -365,14 +365,45 @@ var socket,
 		});
 	}
 
-	app.createNewPosts = function (data) {
+	app.createNewPosts = function (data, infiniteLoaded) {
+		if(!data || (data.posts && !data.posts.length))
+			return;
+
 		if (data.posts[0].uid !== app.uid) {
  			data.posts[0].display_moderator_tools = 'none';
  		}
 
+ 		function removeAlreadyAddedPosts() {
+			data.posts = data.posts.filter(function(post) {
+ 				return $('#post-container li[data-pid="' + post.pid +'"]').length === 0;
+	 		});
+ 		}
+
+ 		function findInsertionPoint() {
+ 			var after = null,
+ 				firstPid = data.posts[0].pid;
+ 			$('#post-container li[data-pid]').each(function() {
+				if(parseInt(firstPid, 10) > parseInt($(this).attr('data-pid'), 10))
+				after = $(this);
+			else
+				return false;
+			});
+			return after;
+ 		}
+
+ 		removeAlreadyAddedPosts();
+ 		if(!data.posts.length)
+ 			return;
+ 		var insertAfter = findInsertionPoint();
+
 		var html = templates.prepare(templates['topic'].blocks['posts']).parse(data);
 		translator.translate(html, function(translatedHTML) {
-			$(translatedHTML).appendTo("#post-container")
+			var translated = $(translatedHTML);
+			if(!infiniteLoaded) {
+				translated.removeClass('infiniteloaded');
+			}
+
+			translated.insertAfter(insertAfter)
 				.hide()
 				.fadeIn('slow');
 
@@ -404,12 +435,12 @@ var socket,
 
 		socket.emit('api:topic.loadMore', {
 			tid: tid,
-			after: document.querySelectorAll('#post-container li[data-pid]').length
+			after: $('#post-container .post-row.infiniteloaded').length
 		}, function (data) {
 			app.infiniteLoaderActive = false;
 			if (data.posts.length) {
 				$('#loading-indicator').attr('done', '0');
-				app.createNewPosts(data);
+				app.createNewPosts(data, true);
 			} else {
 				$('#loading-indicator').attr('done', '1');
 			}

public/src/forum/topic.js

@@ -118,7 +118,6 @@ define(function() {
 					var loadingEl = document.getElementById('categories-loading');
 					if (loadingEl) {
 						socket.once('api:categories.get', function(data) {
-							console.log(data);
 							// Render categories
 							var categoriesFrag = document.createDocumentFragment(),
 								categoryEl = document.createElement('li'),
@@ -286,8 +285,7 @@ define(function() {
 				});
 			}
 		};
-		$('#post-container').on('click', '.post_reply', reply_fn);
-		$('.topic-main-buttons').on('click', '.post_reply', reply_fn);
+		$('.topic').on('click', '.post_reply', reply_fn);
 
 		$('#post-container').on('click', '.quote', function() {
 			if (thread_state.locked !== '1') {

public/templates/topic.tpl

@@ -26,7 +26,7 @@
 	<ul id="post-container" class="container" data-tid="{topic_id}">
 		<!-- BEGIN main_posts -->
 
-			<li class="row post-row main-post" data-pid="{main_posts.pid}" data-uid="{main_posts.uid}" data-username="{main_posts.username}" data-deleted="{main_posts.deleted}" itemscope itemtype="http://schema.org/Article">
+			<li class="row post-row main-post infiniteloaded" data-pid="{main_posts.pid}" data-uid="{main_posts.uid}" data-username="{main_posts.username}" data-deleted="{main_posts.deleted}" itemscope itemtype="http://schema.org/Article">
 				<a id="post_anchor_{main_posts.pid}" name="{main_posts.pid}"></a>
 				<div class="col-md-12">
 					<div class="post-block">
@@ -129,7 +129,7 @@
 
 		<!-- BEGIN posts -->
 
-			<li class="row post-row sub-posts" data-pid="{posts.pid}" data-uid="{posts.uid}" data-username="{posts.username}" data-deleted="{posts.deleted}" itemscope itemtype="http://schema.org/Comment">
+			<li class="row post-row sub-posts infiniteloaded" data-pid="{posts.pid}" data-uid="{posts.uid}" data-username="{posts.username}" data-deleted="{posts.deleted}" itemscope itemtype="http://schema.org/Comment">
 				<a id="post_anchor_{posts.pid}" name="{posts.pid}"></a>
 				<meta itemprop="datePublished" content="{posts.relativeTime}">
 				<meta itemprop="dateModified" content="{posts.relativeEditTime}">