Index: /CKEditor/branches/prototype/_source/plugins/specialchar/dialogs/specialchar.js
===================================================================
--- /CKEditor/branches/prototype/_source/plugins/specialchar/dialogs/specialchar.js	(revision 2841)
+++ /CKEditor/branches/prototype/_source/plugins/specialchar/dialogs/specialchar.js	(revision 2842)
@@ -24,13 +24,13 @@
 	return {
 		title : editor.lang.specialChar.title,
-		minWidth : 400,
-		minHeight : 300,
+		minWidth : 450,
+		minHeight : 350,
 		buttons : [ CKEDITOR.dialog.cancelButton ],
 		onLoad :  function()
 		{
-			html = [ '<table style="width: 100%; height: 100%; border-collapse: separate;" align="center" cellspacing="2" cellpadding="2" border="0">' ];
+			html = [ '<table style="width: 320px; height: 100%; border-collapse: separate;" align="center" cellspacing="2" cellpadding="2" border="0">' ];
 			html.push( '<tbody>' );
 
-			var cols = 20 ;
+			var cols = 17 ;
 			var i = 0 ;
 
@@ -46,5 +46,5 @@
 					}
 					else
-						html.push("<td class='DarkBackground SpecialCharsOut'>&nbsp;");
+						html.push("<td class='DarkBackground'>&nbsp;");
 					html.push("<\/td>");
 					i++;
@@ -64,52 +64,89 @@
 					{
 						type : 'hbox',
-						widths : [ '85%', '15%' ],
-						align : 'right',
+						align : 'top',
+						widths : [ '300px', '90px' ],
 						children :
 						[
 							{
-								type : 'html',
-								id : 'charContainer',
-								html : '',
-								onMouseover : function( evt )
-								{
-									var dialog = this.getDialog();
-									var preview = dialog.getContentElement( 'info', 'charPreview' ).getElement();
-									var target = evt.data.getTarget();
-									var targetName = target.getName();
+								type : 'hbox',
+								align : 'top',
+								padding : 0,
+								widths : [ '350px' ],
+								children :
+								[
+									{
+										type : 'html',
+										id : 'charContainer',
+										html : '',
+										onMouseover : function( evt )
+										{
+											var dialog = this.getDialog();
+											var htmlPreview = dialog.getContentElement( 'info', 'htmlPreview' ).getElement();
+											var preview = dialog.getContentElement( 'info', 'charPreview' ).getElement();
+											var target = evt.data.getTarget();
+											var targetName = target.getName();
 
-									if ( targetName == 'td' )
-										if ( value = target.$.getAttribute( 'value' ) )
-											preview.setHtml( value );
-								},
-								onMouseout : function( evt )
-								{
-									var dialog = this.getDialog();
-									var preview = dialog.getContentElement( 'info', 'charPreview' ).getElement();
-									preview.setHtml( '&nbsp;' );
-								},			
-								onClick : function( evt )
-								{
-									var target = evt.data.getTarget();
-									var targetName = target.getName();
-									var editor = this.getDialog().getParentEditor();
-									if ( targetName == 'td' )
-									{
-										target = target.$;
-										if ( value = target.getAttribute( 'value' ) )
+											if ( targetName == 'td' )
+												if ( value = target.$.getAttribute( 'value' ) )
+												{
+													preview.setHtml( value );
+													target.addClass( "LightBackground" );
+													htmlPreview.setHtml( CKEDITOR.tools.htmlEncode( value ) );
+												}
+										},
+										onMouseout : function( evt )
 										{
-											this.getDialog().restoreSelection();
-											editor.insertElement( CKEDITOR.dom.element.createFromHtml( value ) );
-											this.getDialog().hide();
+											var dialog = this.getDialog();
+											var preview = dialog.getContentElement( 'info', 'charPreview' ).getElement();
+											var htmlPreview = dialog.getContentElement( 'info', 'htmlPreview' ).getElement();
+											var target = evt.data.getTarget();
+											var targetName = target.getName();
+											preview.setHtml( '&nbsp;' );
+											htmlPreview.setHtml( '&nbsp;' );
+
+											if ( targetName == 'td' )
+												target.removeClass( "LightBackground" );
+										},			
+										onClick : function( evt )
+										{
+											var target = evt.data.getTarget();
+											var targetName = target.getName();
+											var editor = this.getDialog().getParentEditor();
+											if ( targetName == 'td' )
+											{
+												target = target.$;
+												if ( value = target.getAttribute( 'value' ) )
+												{
+													this.getDialog().restoreSelection();
+													editor.insertElement( CKEDITOR.dom.element.createFromHtml( value ) );
+													this.getDialog().hide();
+												}
+											}
 										}
 									}
-								}
+								]
 							},
 							{
-								type : 'html',
-								id : 'charPreview',
-								style : 'border:1px solid #eeeeee;background-color:#EAEAD1;font-size:28px;height:40px;padding-top:8px;font-family:\'Microsoft Sans Serif\',Arial,Helvetica,Verdana;text-align:center;',
-								align : 'center',
-								html : '<div>&nbsp;</div>',
+								type : 'vbox',
+								align : 'top',
+								children :
+								[
+									{
+										type : 'html',
+										html : '<div></div>',
+									},
+									{
+										type : 'html',
+										id : 'charPreview',
+										style : 'border:1px solid #eeeeee;background-color:#EAEAD1;font-size:28px;height:40px;padding-top:9px;font-family:\'Microsoft Sans Serif\',Arial,Helvetica,Verdana;text-align:center;',
+										html : '<div>&nbsp;</div>',
+									},
+									{
+										type : 'html',
+										id : 'htmlPreview',
+										style : 'border:1px solid #eeeeee;background-color:#EAEAD1;font-size:14px;height:20px;padding-top:2px;font-family:\'Microsoft Sans Serif\',Arial,Helvetica,Verdana;text-align:center;',
+										html : '<div>&nbsp;</div>',
+									}
+								]
 							}
 						]