Index: branches/RC/core/admin_templates/js/template_manager.js
===================================================================
diff -u -N -r11661 -r11690
--- branches/RC/core/admin_templates/js/template_manager.js	(.../template_manager.js)	(revision 11661)
+++ branches/RC/core/admin_templates/js/template_manager.js	(.../template_manager.js)	(revision 11690)
@@ -1,13 +1,54 @@
-function TemplateManager ($edit_url) {
+function TemplateManager ($edit_url, $browse_url, $edting_mode) {
 	this._editUrl = $edit_url;
+	this.browseUrl = $browse_url;
+	this.editingMode = $edting_mode; // from 1 to 4
 
 	this._blocks = {};
 
 	this._blockOrder = Array ();
 
+	var $template_manager = this;
+
 	$(document).ready(
 		function() {
-			aTemplateManager.searchBlocks();
+			$template_manager.searchBlocks();
+
+			if (!$template_manager.editingMode) {
+				return ;
+			}
+
+			// show special toolbar when in any of 4 browse modes
+			var $head_frame = getFrame('head');
+			var $extra_toolbar = $head_frame.$('div.front-extra-toolbar').clone(); // clone to keep original untouched
+
+			$('a', $extra_toolbar).each(
+				function() {
+					var $editing_mode = $(this).attr('href').replace('#', '');
+
+					$(this).attr('href', $template_manager.browseUrl.replace('#EDITING_MODE#', $editing_mode));
+
+					if ($editing_mode == $template_manager.editingMode) {
+						$(this).parents('td:first').addClass('button-active').prevAll('td:first').addClass('button-active');
+					}
+				}
+			);
+
+			$head_frame.$('#extra_toolbar').html( $extra_toolbar.html() );
+
+			if ($template_manager.editingMode == 2) {
+				// Layout Mode
+				$('div.movable-area').sortable(
+					{
+						placeholder: 'move-helper',
+						handle: '.movable-header',
+						items: 'div.movable-element',
+						connectWith: ['div.movable-area'],
+						start: function(e, ui) {
+							ui.placeholder.height( ui.item.height() );
+						}
+					}
+				);
+			}
 		}
 	);
 }