use alert for bookmark

public/language/en_GB/topic.json

@@ -22,6 +22,8 @@
 	"tools": "Tools",
 	"flag": "Flag",
 
+	"bookmark_instructions" : "Click here to return to your last position or close to discard.",
+
 	"flag_title": "Flag this post for moderation",
 	"deleted_message": "This thread has been deleted. Only users with thread management privileges can see it.",
 

public/src/app.js

@@ -175,23 +175,27 @@ var socket,
 		var alert = $('#' + alert_id);
 		var title = params.title || '';
 
-		function startTimeout(div, timeout) {
+		function fadeOut() {
-			var timeoutId = setTimeout(function () {
+			alert.fadeOut(500, function () {
-				$(div).fadeOut(1000, function () {
 				$(this).remove();
 			});
+		}
+
+		function startTimeout(timeout) {
+			var timeoutId = setTimeout(function () {
+				fadeOut();
 			}, timeout);
 
-			$(div).attr('timeoutId', timeoutId);
+			alert.attr('timeoutId', timeoutId);
 		}
 
 		if (alert.length > 0) {
 			alert.find('strong').html(title);
 			alert.find('p').html(params.message);
-			alert.attr('class', "alert alert-dismissable alert-" + params.type);
+			alert.attr('class', 'alert alert-dismissable alert-' + params.type);
 
 			clearTimeout(alert.attr('timeoutId'));
-			startTimeout(alert, params.timeout);
+			startTimeout(params.timeout);
 
 			alert.children().fadeOut('100');
 			translator.translate(alert.html(), function(translatedHTML) {
@@ -199,42 +203,45 @@ var socket,
 				alert.html(translatedHTML);
 			});
 		} else {
-			var div = $('<div id="' + alert_id + '" class="alert alert-dismissable alert-' + params.type +'"></div>'),
+			alert = $('<div id="' + alert_id + '" class="alert alert-dismissable alert-' + params.type +'"></div>');
-				button = $('<button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>'),
-				strong = $('<strong>' + title + '</strong>'),
-				p = $('<p>' + params.message + '</p>');
 
-			div.append(button)
+			alert.append($('<button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>'))
-				.append(strong)
+				.append($('<strong>' + title + '</strong>'))
-				.append(p);
+				.append($('<p>' + params.message + '</p>'));
 
-			button.on('click', function () {
+			if (params.location == null) {
-				div.remove();
-			});
-
-			if (params.location == null)
 				params.location = 'alert_window';
+			}
+
+			translator.translate(alert.html(), function(translatedHTML) {
+				alert.html(translatedHTML);
+				$('#' + params.location).prepend(alert.fadeIn('100'));
 
-			translator.translate(div.html(), function(translatedHTML) {
+				if(typeof params.closefn === 'function') {
-				div.html(translatedHTML);
+					alert.find('button').on('click', function () {
-				$('#' + params.location).prepend(div.fadeIn('100'));
+						params.closefn();
+						fadeOut();
+					});
+				}
 			});
 
 			if (params.timeout) {
-				startTimeout(div, params.timeout);
+				startTimeout(params.timeout);
 			}
 
-			if (params.clickfn) {
+			if (typeof params.clickfn === 'function') {
-				div.on('click', function () {
+				alert.on('click', function () {
 					params.clickfn();
-					div.fadeOut(500, function () {
+					fadeOut();
-						$(this).remove();
-					});
 				});
 			}
 		}
 	};
 
+	app.removeAlert = function(id) {
+		$('#' + 'alert_button_' + id).remove();
+	}
+
 	app.alertSuccess = function (message, timeout) {
 		if (!timeout)
 			timeout = 2000;

public/src/forum/topic.js

@@ -14,6 +14,7 @@ define(['composer', 'forum/pagination'], function(composer, pagination) {
 		if(data.url.indexOf('topic') !== 0) {
 			$('.pagination-block').addClass('hide');
 			$('#header-topic-title').html('').hide();
+			app.removeAlert('bookmark');
 		}
 	});
 
@@ -310,7 +311,18 @@ define(['composer', 'forum/pagination'], function(composer, pagination) {
 			if (window.location.hash) {
 				Topic.scrollToPost(window.location.hash.substr(1), true);
 			} else if (bookmark) {
+				app.alert({
+					alert_id: 'bookmark',
+					message: '[[topic:bookmark_instructions]]',
+					timeout: 0,
+					type: 'info',
+					clickfn : function() {
 						Topic.scrollToPost(parseInt(bookmark, 10), true);
+					},
+					closefn : function() {
+						localStorage.removeItem('topic:' + tid + ':bookmark');
+					}
+				});
 			} else {
 				updateHeader();
 			}
@@ -1023,11 +1035,10 @@ define(['composer', 'forum/pagination'], function(composer, pagination) {
 			var el = $(this);
 
 			if (elementInView(el)) {
-				var index = parseInt(el.attr('data-index'), 10) + 1;
+				if(!parseInt(el.attr('data-index'), 10)) {
-				if(index === 0) {
+					localStorage.removeItem('topic:' + templates.get('topic_id') + ':bookmark');
-					localStorage.removeItem("topic:" + templates.get('topic_id') + ":bookmark");
 				} else {
-					localStorage.setItem("topic:" + templates.get('topic_id') + ":bookmark", el.attr('data-pid'));
+					localStorage.setItem('topic:' + templates.get('topic_id') + ':bookmark', el.attr('data-pid'));
 
 					if (!scrollingToPost) {
 						var newUrl = window.location.protocol + '//' + window.location.host + window.location.pathname + '#' + el.attr('data-pid')