From e1372b379441e59aeec4cfdbf7e748cb0008162d Mon Sep 17 00:00:00 2001
From: Normann Lou <normannlou@gmail.com>
Date: Fri, 20 Apr 2012 16:11:15 +1200
Subject: [PATCH] ENHANCEMENT: toggle header and action label for image dialog
 popups (from content TinyMCE image icon)

---
 forms/HtmlEditorField.php     |  9 +++++++--
 javascript/HtmlEditorField.js | 20 +++++++++++++++++++-
 lang/en.yml                   |  3 ++-
 3 files changed, 28 insertions(+), 4 deletions(-)

diff --git a/forms/HtmlEditorField.php b/forms/HtmlEditorField.php
index ead1d5ff0..8cfabd8d4 100644
--- a/forms/HtmlEditorField.php
+++ b/forms/HtmlEditorField.php
@@ -422,14 +422,19 @@ class HtmlEditorField_Toolbar extends RequestHandler {
 		$fields = new FieldList(
 			new LiteralField(
 				'Heading',
-				sprintf('<h3>%s</h3>', _t('HtmlEditorField.IMAGE', 'Insert Image'))
+				sprintf('<h3 class="htmleditorfield-mediaform-heading insert">%s</h3>', _t('HtmlEditorField.INSERTIMAGE', 'Insert Image')).
+				sprintf('<h3 class="htmleditorfield-mediaform-heading update">%s</h3>', _t('HtmlEditorField.UpdateIMAGE', 'Update Image'))
 			),
 			$allFields
 		);
 		
 		$actions = new FieldList(
 			FormAction::create('insertimage', _t('HtmlEditorField.BUTTONINSERT', 'Insert'))
-				->addExtraClass('ss-ui-action-constructive')
+				->addExtraClass('ss-ui-action-constructive image-insert')
+				->setAttribute('data-icon', 'accept')
+				->setUseButtonTag(true),
+			FormAction::create('insertimage', _t('HtmlEditorField.BUTTONUpdate', 'Update'))
+				->addExtraClass('ss-ui-action-constructive image-update')
 				->setAttribute('data-icon', 'accept')
 				->setUseButtonTag(true)
 		);
diff --git a/javascript/HtmlEditorField.js b/javascript/HtmlEditorField.js
index a2a3af7e9..e67f79d78 100644
--- a/javascript/HtmlEditorField.js
+++ b/javascript/HtmlEditorField.js
@@ -653,6 +653,24 @@ ss.editorWrappers['default'] = ss.editorWrappers.tinyMCE;
 		 * of remove files as well.
 		 */
 		$('form.htmleditorfield-mediaform').entwine({
+			onmatch: function() {
+				this.toggleLooks();
+				this._super();
+			},
+			toggleLooks: function(){
+				var updateExisting = Boolean(this.find('.ss-htmleditorfield-file').length);
+				if(updateExisting){
+					this.find('.htmleditorfield-mediaform-heading.insert').hide();
+					this.find('.Actions .image-insert').hide();
+					this.find('.htmleditorfield-mediaform-heading.update').show();
+					this.find('.Actions .image-update').show();
+				}else{
+					this.find('.htmleditorfield-mediaform-heading.insert').show();
+					this.find('.Actions .image-insert').show();
+					this.find('.htmleditorfield-mediaform-heading.update').hide();
+					this.find('.Actions .image-update').hide();
+				}
+			},
 			onsubmit: function() {
 				var self = this, ed = this.getEditor();
 
@@ -682,7 +700,7 @@ ss.editorWrappers['default'] = ss.editorWrappers.tinyMCE;
 			},
 			redraw: function() {
 				this._super();
-
+				this.toggleLooks();
 				var ed = this.getEditor(), node = $(ed.getSelectedNode()),
 					hasItems = Boolean(this.find('.ss-htmleditorfield-file').length),
 					editingSelected = node.is('img');
diff --git a/lang/en.yml b/lang/en.yml
index 3e5bc122e..eeca272ba 100644
--- a/lang/en.yml
+++ b/lang/en.yml
@@ -287,7 +287,8 @@ en:
     FROMCMS: "From the CMS"
     FROMCOMPUTER: "From your computer"
     Find: "Find"
-    IMAGE: "Insert Image"
+    INSERTIMAGE: "Insert Image"
+    UPDATEIMAGE: "Update Image"
     IMAGEALTTEXT: "Alternative text (alt) - shown if image cannot be displayed"
     IMAGEDIMENSIONS: "Dimensions"
     IMAGEHEIGHTPX: "Height"