Index: branches/5.0.x/core/admin_templates/js/template_manager.js
===================================================================
diff -u -r12117 -r12298
--- branches/5.0.x/core/admin_templates/js/template_manager.js	(.../template_manager.js)	(revision 12117)
+++ branches/5.0.x/core/admin_templates/js/template_manager.js	(.../template_manager.js)	(revision 12298)
@@ -2,11 +2,11 @@
 	this._editUrl = $edit_url;
 	this.browseUrl = $browse_url;
 	this._saveLayoutUrl = $save_layout_url;
-	this.editingMode = $edting_mode; // from 1 to 4
+	this.editingMode = $edting_mode; // from {1 - browse, 2 - content, 3 - design}
 
 	this._blocks = {};
-
 	this._blockOrder = Array ();
+	this.inDrag = false; // don't process mouse over/out events while in drag mode
 
 	var $template_manager = this;
 
@@ -18,7 +18,7 @@
 				return ;
 			}
 
-			// show special toolbar when in any of 4 browse modes
+			// show special toolbar when in any of 3 browse modes
 			var $head_frame = getFrame('head');
 			var $extra_toolbar = $head_frame.$('div.front-extra-toolbar').clone(); // clone to keep original untouched
 
@@ -39,8 +39,27 @@
 			$head_frame.$('#extra_toolbar').html( $extra_toolbar.html() );
 
 			if ($template_manager.editingMode == 2) {
-				// Layout Mode
+				// Content Mode
 
+				$('div.cms-edit-btn')
+				.mouseover(
+					function(e) {
+						$(this).css('opacity', 1);
+					}
+				)
+				.mouseout(
+					function(e) {
+						$(this).css('opacity', 0.5);
+					}
+				);
+
+				// make all spans with phrases clickable
+				$template_manager.setupEditTranslationButtons(document);
+			}
+
+			if ($template_manager.editingMode == 3) {
+				// Design Mode
+
 				$template_manager.renumberMovableElements();
 
 				$('div.movable-area').sortable(
@@ -51,27 +70,86 @@
 						connectWith: ['div.movable-area'],
 						tolerance: 'pointer',
 						start: function(e, ui) {
+							$template_manager.inDrag = true;
 							ui.placeholder.height( ui.item.height() );
+						},
+						stop: function(e, ui) {
+							$template_manager.inDrag = false;
+
+							// mouseout doesn't happen while in drag, so compensate it here
+							var $header = $('.movable-header', ui.item);
+							$('div.block-edit-block-btn-container', $header).mouseout();
+						},
+						change: function(e, ui) {
+							$('div.cms-layout-btn-container').show();
 						}
 					}
 				);
 			}
+		}
+	);
+}
 
-			$('div.cms-edit-btn')
+TemplateManager.prototype.setupEditTranslationButtons = function ($container) {
+	$("span[name='cms-translate-phrase']", $container).each(
+		function() {
+			var $me = $(this);
+			var $parent_link = $me.parents('a:first');
+
+			if ($parent_link.length == 0) {
+				// span in not inside "a" tag
+
+				$me.prepend('<div class="cms-edit-btn"><div class="cms-btn-text">Edit</div></div>');
+				$('div.cms-edit-btn:first', $me).click(TemplateManager.prototype.translatePhrase);
+				$me.dblclick(
+					function ($e) {
+						$('div.cms-edit-btn:first', this).click();
+						return false;
+					}
+				);
+
+				var $effect_element = $me;
+			}
+			else {
+				// span is inside "a" tag
+				var $clone = $me.clone();
+				$clone.empty().attr('title', '');
+
+				$parent_link.html( $me.html() ).wrap($clone);
+				$parent_link.before('<div class="cms-edit-btn" title="' + $me.attr('title') + '"><div class="cms-btn-text">Edit</div></div>');
+				$parent_link.prev('div.cms-edit-btn:first').click(TemplateManager.prototype.translatePhrase);
+
+				var $effect_element = $parent_link.parents("span[name='cms-translate-phrase']:first");
+			}
+
+			$effect_element
 			.mouseover(
-				function(e) {
-					$(this).css('opacity', 1);
+				function($e) {
+					$('div.cms-edit-btn', this).css('display', 'inline');
 				}
 			)
 			.mouseout(
-				function(e) {
-					$(this).css('opacity', 0.5);
+				function($e) {
+					$('div.cms-edit-btn', this).hide();
 				}
 			);
 		}
 	);
 }
 
+TemplateManager.prototype.translatePhrase = function ($e) {
+	var $translate_url = $(this).parents("span[name='cms-translate-phrase']:first").attr('href');
+
+	if ($translate_url.match(/javascript:(.*)/)) {
+		eval(RegExp.$1);
+	}
+	else {
+		window.location.href = RegExp.$1;
+	}
+
+	return false;
+}
+
 TemplateManager.prototype.renumberMovableElements = function () {
 	var $area_index = 0;
 	// 1. dynamically assign IDs to all movable elements
@@ -114,6 +192,7 @@
 
 			if ($data == 'OK') {
 				$message = 'New Layout Saved';
+				$('div.cms-layout-btn-container').hide();
 				$me.renumberMovableElements();
 			}
 			else {
@@ -130,6 +209,10 @@
 	TB.show($settings);
 }
 
+TemplateManager.prototype.cancelLayout = function () {
+	window.location.href = window.location.href;
+}
+
 TemplateManager.prototype.onBtnClick = function ($e, $element) {
 	var $id = $element.id.replace(/_btn$/, '');
 	var $block_info = this._blocks[$id];
@@ -141,12 +224,40 @@
 }
 
 TemplateManager.prototype.onMouseOver = function ($e, $element) {
-	$($element).addClass('block-edit-btn-container-over');
+	if (this.inDrag) {
+		return ;
+	}
+
+	$element = $($element);
+
+	if ($element.hasClass('block-edit-design-btn-container')) {
+		$($element).addClass('block-edit-design-btn-container-over');
+		$('div.cms-edit-design-btn:first', $element).show();
+	}
+	else {
+		$($element).addClass('block-edit-block-btn-container-over');
+		$('div.cms-edit-block-btn:first', $element).show();
+	}
+
 	$e.stopPropagation();
 }
 
 TemplateManager.prototype.onMouseOut = function ($e, $element) {
-	$($element).removeClass('block-edit-btn-container-over');
+	if (this.inDrag) {
+		return ;
+	}
+
+	$element = $($element);
+
+	if ($element.hasClass('block-edit-design-btn-container')) {
+		$($element).removeClass('block-edit-design-btn-container-over');
+		$('div.cms-edit-design-btn:first', $element).hide();
+	}
+	else {
+		$($element).removeClass('block-edit-block-btn-container-over');
+		$('div.cms-edit-block-btn:first', $element).hide();
+	}
+
 	$e.stopPropagation();
 }
 
@@ -175,22 +286,24 @@
 
 	var $btn = document.getElementById($element.id + '_btn');
 
-	$($btn).bind(
-		'click',
+	$($btn).click(
 		function(ev) {
 			TemplateManager.prototype.onBtnClick.call(aTemplateManager, ev, this);
 		}
 	);
 
-	$($element).bind(
-		'mouseover',
+	$($element)
+	.dblclick(
 		function(ev) {
+			TemplateManager.prototype.onBtnClick.call(aTemplateManager, ev, this);
+		}
+	)
+	.mouseover(
+		function(ev) {
 			TemplateManager.prototype.onMouseOver.call(aTemplateManager, ev, this);
 		}
-	);
-
-	$($element).bind(
-		'mouseout',
+	)
+	.mouseout(
 		function(ev) {
 			TemplateManager.prototype.onMouseOut.call(aTemplateManager, ev, this);
 		}