1 /**

     2  * editor_template_src.js

     3  *

     4  * Copyright 2009, Moxiecode Systems AB

     5  * Released under LGPL License.

     6  *

     7  * License: http://tinymce.moxiecode.com/license

     8  * Contributing: http://tinymce.moxiecode.com/contributing

     9  */

    10 

    11 (function(tinymce) {

    12 	var DOM = tinymce.DOM, Event = tinymce.dom.Event, extend = tinymce.extend, each = tinymce.each, Cookie = tinymce.util.Cookie, lastExtID, explode = tinymce.explode;

    13 

    14 	// Generates a preview for a format

    15 	function getPreviewCss(ed, fmt) {

    16 		var name, previewElm, dom = ed.dom, previewCss = '', parentFontSize, previewStylesName;

    17 

    18 		previewStyles = ed.settings.preview_styles;

    19 

    20 		// No preview forced

    21 		if (previewStyles === false)

    22 			return '';

    23 

    24 		// Default preview

    25 		if (!previewStyles)

    26 			previewStyles = 'font-family font-size font-weight text-decoration text-transform color background-color';

    27 

    28 		// Removes any variables since these can't be previewed

    29 		function removeVars(val) {

    30 			return val.replace(/%(\w+)/g, '');

    31 		};

    32 

    33 		// Create block/inline element to use for preview

    34 		name = fmt.block || fmt.inline || 'span';

    35 		previewElm = dom.create(name);

    36 

    37 		// Add format styles to preview element

    38 		each(fmt.styles, function(value, name) {

    39 			value = removeVars(value);

    40 

    41 			if (value)

    42 				dom.setStyle(previewElm, name, value);

    43 		});

    44 

    45 		// Add attributes to preview element

    46 		each(fmt.attributes, function(value, name) {

    47 			value = removeVars(value);

    48 

    49 			if (value)

    50 				dom.setAttrib(previewElm, name, value);

    51 		});

    52 

    53 		// Add classes to preview element

    54 		each(fmt.classes, function(value) {

    55 			value = removeVars(value);

    56 

    57 			if (!dom.hasClass(previewElm, value))

    58 				dom.addClass(previewElm, value);

    59 		});

    60 

    61 		// Add the previewElm outside the visual area

    62 		dom.setStyles(previewElm, {position: 'absolute', left: -0xFFFF});

    63 		ed.getBody().appendChild(previewElm);

    64 

    65 		// Get parent container font size so we can compute px values out of em/% for older IE:s

    66 		parentFontSize = dom.getStyle(ed.getBody(), 'fontSize', true);

    67 		parentFontSize = /px$/.test(parentFontSize) ? parseInt(parentFontSize, 10) : 0;

    68 

    69 		each(previewStyles.split(' '), function(name) {

    70 			var value = dom.getStyle(previewElm, name, true);

    71 

    72 			// If background is transparent then check if the body has a background color we can use

    73 			if (name == 'background-color' && /transparent|rgba\s*\([^)]+,\s*0\)/.test(value)) {

    74 				value = dom.getStyle(ed.getBody(), name, true);

    75 

    76 				// Ignore white since it's the default color, not the nicest fix

    77 				if (dom.toHex(value).toLowerCase() == '#ffffff') {

    78 					return;

    79 				}

    80 			}

    81 

    82 			// Old IE won't calculate the font size so we need to do that manually

    83 			if (name == 'font-size') {

    84 				if (/em|%$/.test(value)) {

    85 					if (parentFontSize === 0) {

    86 						return;

    87 					}

    88 

    89 					// Convert font size from em/% to px

    90 					value = parseFloat(value, 10) / (/%$/.test(value) ? 100 : 1);

    91 					value = (value * parentFontSize) + 'px';

    92 				}

    93 			}

    94 

    95 			previewCss += name + ':' + value + ';';

    96 		});

    97 

    98 		dom.remove(previewElm);

    99 

   100 		return previewCss;

   101 	};

   102 

   103 	// Tell it to load theme specific language pack(s)

   104 	tinymce.ThemeManager.requireLangPack('advanced');

   105 

   106 	tinymce.create('tinymce.themes.AdvancedTheme', {

   107 		sizes : [8, 10, 12, 14, 18, 24, 36],

   108 

   109 		// Control name lookup, format: title, command

   110 		controls : {

   111 			bold : ['bold_desc', 'Bold'],

   112 			italic : ['italic_desc', 'Italic'],

   113 			underline : ['underline_desc', 'Underline'],

   114 			strikethrough : ['striketrough_desc', 'Strikethrough'],

   115 			justifyleft : ['justifyleft_desc', 'JustifyLeft'],

   116 			justifycenter : ['justifycenter_desc', 'JustifyCenter'],

   117 			justifyright : ['justifyright_desc', 'JustifyRight'],

   118 			justifyfull : ['justifyfull_desc', 'JustifyFull'],

   119 			bullist : ['bullist_desc', 'InsertUnorderedList'],

   120 			numlist : ['numlist_desc', 'InsertOrderedList'],

   121 			outdent : ['outdent_desc', 'Outdent'],

   122 			indent : ['indent_desc', 'Indent'],

   123 			cut : ['cut_desc', 'Cut'],

   124 			copy : ['copy_desc', 'Copy'],

   125 			paste : ['paste_desc', 'Paste'],

   126 			undo : ['undo_desc', 'Undo'],

   127 			redo : ['redo_desc', 'Redo'],

   128 			link : ['link_desc', 'mceLink'],

   129 			unlink : ['unlink_desc', 'unlink'],

   130 			image : ['image_desc', 'mceImage'],

   131 			cleanup : ['cleanup_desc', 'mceCleanup'],

   132 			help : ['help_desc', 'mceHelp'],

   133 			code : ['code_desc', 'mceCodeEditor'],

   134 			hr : ['hr_desc', 'InsertHorizontalRule'],

   135 			removeformat : ['removeformat_desc', 'RemoveFormat'],

   136 			sub : ['sub_desc', 'subscript'],

   137 			sup : ['sup_desc', 'superscript'],

   138 			forecolor : ['forecolor_desc', 'ForeColor'],

   139 			forecolorpicker : ['forecolor_desc', 'mceForeColor'],

   140 			backcolor : ['backcolor_desc', 'HiliteColor'],

   141 			backcolorpicker : ['backcolor_desc', 'mceBackColor'],

   142 			charmap : ['charmap_desc', 'mceCharMap'],

   143 			visualaid : ['visualaid_desc', 'mceToggleVisualAid'],

   144 			anchor : ['anchor_desc', 'mceInsertAnchor'],

   145 			newdocument : ['newdocument_desc', 'mceNewDocument'],

   146 			blockquote : ['blockquote_desc', 'mceBlockQuote']

   147 		},

   148 

   149 		stateControls : ['bold', 'italic', 'underline', 'strikethrough', 'bullist', 'numlist', 'justifyleft', 'justifycenter', 'justifyright', 'justifyfull', 'sub', 'sup', 'blockquote'],

   150 

   151 		init : function(ed, url) {

   152 			var t = this, s, v, o;

   153 

   154 			t.editor = ed;

   155 			t.url = url;

   156 			t.onResolveName = new tinymce.util.Dispatcher(this);

   157 			s = ed.settings;

   158 

   159 			ed.forcedHighContrastMode = ed.settings.detect_highcontrast && t._isHighContrast();

   160 			ed.settings.skin = ed.forcedHighContrastMode ? 'highcontrast' : ed.settings.skin;

   161 

   162 			// Setup default buttons

   163 			if (!s.theme_advanced_buttons1) {

   164 				s = extend({

   165 					theme_advanced_buttons1 : "bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,styleselect,formatselect",

   166 					theme_advanced_buttons2 : "bullist,numlist,|,outdent,indent,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code",

   167 					theme_advanced_buttons3 : "hr,removeformat,visualaid,|,sub,sup,|,charmap"

   168 				}, s);

   169 			}

   170 

   171 			// Default settings

   172 			t.settings = s = extend({

   173 				theme_advanced_path : true,

   174 				theme_advanced_toolbar_location : 'top',

   175 				theme_advanced_blockformats : "p,address,pre,h1,h2,h3,h4,h5,h6",

   176 				theme_advanced_toolbar_align : "left",

   177 				theme_advanced_statusbar_location : "bottom",

   178 				theme_advanced_fonts : "Andale Mono=andale mono,times;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;Comic Sans MS=comic sans ms,sans-serif;Courier New=courier new,courier;Georgia=georgia,palatino;Helvetica=helvetica;Impact=impact,chicago;Symbol=symbol;Tahoma=tahoma,arial,helvetica,sans-serif;Terminal=terminal,monaco;Times New Roman=times new roman,times;Trebuchet MS=trebuchet ms,geneva;Verdana=verdana,geneva;Webdings=webdings;Wingdings=wingdings,zapf dingbats",

   179 				theme_advanced_more_colors : 1,

   180 				theme_advanced_row_height : 23,

   181 				theme_advanced_resize_horizontal : 1,

   182 				theme_advanced_resizing_use_cookie : 1,

   183 				theme_advanced_font_sizes : "1,2,3,4,5,6,7",

   184 				theme_advanced_font_selector : "span",

   185 				theme_advanced_show_current_color: 0,

   186 				readonly : ed.settings.readonly

   187 			}, s);

   188 

   189 			// Setup default font_size_style_values

   190 			if (!s.font_size_style_values)

   191 				s.font_size_style_values = "8pt,10pt,12pt,14pt,18pt,24pt,36pt";

   192 

   193 			if (tinymce.is(s.theme_advanced_font_sizes, 'string')) {

   194 				s.font_size_style_values = tinymce.explode(s.font_size_style_values);

   195 				s.font_size_classes = tinymce.explode(s.font_size_classes || '');

   196 

   197 				// Parse string value

   198 				o = {};

   199 				ed.settings.theme_advanced_font_sizes = s.theme_advanced_font_sizes;

   200 				each(ed.getParam('theme_advanced_font_sizes', '', 'hash'), function(v, k) {

   201 					var cl;

   202 

   203 					if (k == v && v >= 1 && v <= 7) {

   204 						k = v + ' (' + t.sizes[v - 1] + 'pt)';

   205 						cl = s.font_size_classes[v - 1];

   206 						v = s.font_size_style_values[v - 1] || (t.sizes[v - 1] + 'pt');

   207 					}

   208 

   209 					if (/^\s*\./.test(v))

   210 						cl = v.replace(/\./g, '');

   211 

   212 					o[k] = cl ? {'class' : cl} : {fontSize : v};

   213 				});

   214 

   215 				s.theme_advanced_font_sizes = o;

   216 			}

   217 

   218 			if ((v = s.theme_advanced_path_location) && v != 'none')

   219 				s.theme_advanced_statusbar_location = s.theme_advanced_path_location;

   220 

   221 			if (s.theme_advanced_statusbar_location == 'none')

   222 				s.theme_advanced_statusbar_location = 0;

   223 

   224 			if (ed.settings.content_css !== false)

   225 				ed.contentCSS.push(ed.baseURI.toAbsolute(url + "/skins/" + ed.settings.skin + "/content.css"));

   226 

   227 			// Init editor

   228 			ed.onInit.add(function() {

   229 				if (!ed.settings.readonly) {

   230 					ed.onNodeChange.add(t._nodeChanged, t);

   231 					ed.onKeyUp.add(t._updateUndoStatus, t);

   232 					ed.onMouseUp.add(t._updateUndoStatus, t);

   233 					ed.dom.bind(ed.dom.getRoot(), 'dragend', function() {

   234 						t._updateUndoStatus(ed);

   235 					});

   236 				}

   237 			});

   238 

   239 			ed.onSetProgressState.add(function(ed, b, ti) {

   240 				var co, id = ed.id, tb;

   241 

   242 				if (b) {

   243 					t.progressTimer = setTimeout(function() {

   244 						co = ed.getContainer();

   245 						co = co.insertBefore(DOM.create('DIV', {style : 'position:relative'}), co.firstChild);

   246 						tb = DOM.get(ed.id + '_tbl');

   247 

   248 						DOM.add(co, 'div', {id : id + '_blocker', 'class' : 'mceBlocker', style : {width : tb.clientWidth + 2, height : tb.clientHeight + 2}});

   249 						DOM.add(co, 'div', {id : id + '_progress', 'class' : 'mceProgress', style : {left : tb.clientWidth / 2, top : tb.clientHeight / 2}});

   250 					}, ti || 0);

   251 				} else {

   252 					DOM.remove(id + '_blocker');

   253 					DOM.remove(id + '_progress');

   254 					clearTimeout(t.progressTimer);

   255 				}

   256 			});

   257 

   258 			DOM.loadCSS(s.editor_css ? ed.documentBaseURI.toAbsolute(s.editor_css) : url + "/skins/" + ed.settings.skin + "/ui.css");

   259 

   260 			if (s.skin_variant)

   261 				DOM.loadCSS(url + "/skins/" + ed.settings.skin + "/ui_" + s.skin_variant + ".css");

   262 		},

   263 

   264 		_isHighContrast : function() {

   265 			var actualColor, div = DOM.add(DOM.getRoot(), 'div', {'style': 'background-color: rgb(171,239,86);'});

   266 

   267 			actualColor = (DOM.getStyle(div, 'background-color', true) + '').toLowerCase().replace(/ /g, '');

   268 			DOM.remove(div);

   269 

   270 			return actualColor != 'rgb(171,239,86)' && actualColor != '#abef56';

   271 		},

   272 

   273 		createControl : function(n, cf) {

   274 			var cd, c;

   275 

   276 			if (c = cf.createControl(n))

   277 				return c;

   278 

   279 			switch (n) {

   280 				case "styleselect":

   281 					return this._createStyleSelect();

   282 

   283 				case "formatselect":

   284 					return this._createBlockFormats();

   285 

   286 				case "fontselect":

   287 					return this._createFontSelect();

   288 

   289 				case "fontsizeselect":

   290 					return this._createFontSizeSelect();

   291 

   292 				case "forecolor":

   293 					return this._createForeColorMenu();

   294 

   295 				case "backcolor":

   296 					return this._createBackColorMenu();

   297 			}

   298 

   299 			if ((cd = this.controls[n]))

   300 				return cf.createButton(n, {title : "advanced." + cd[0], cmd : cd[1], ui : cd[2], value : cd[3]});

   301 		},

   302 

   303 		execCommand : function(cmd, ui, val) {

   304 			var f = this['_' + cmd];

   305 

   306 			if (f) {

   307 				f.call(this, ui, val);

   308 				return true;

   309 			}

   310 

   311 			return false;

   312 		},

   313 

   314 		_importClasses : function(e) {

   315 			var ed = this.editor, ctrl = ed.controlManager.get('styleselect');

   316 

   317 			if (ctrl.getLength() == 0) {

   318 				each(ed.dom.getClasses(), function(o, idx) {

   319 					var name = 'style_' + idx, fmt;

   320 

   321 					fmt = {

   322 						inline : 'span',

   323 						attributes : {'class' : o['class']},

   324 						selector : '*'

   325 					};

   326 

   327 					ed.formatter.register(name, fmt);

   328 

   329 					ctrl.add(o['class'], name, {

   330 						style: function() {

   331 							return getPreviewCss(ed, fmt);

   332 						}

   333 					});

   334 				});

   335 			}

   336 		},

   337 

   338 		_createStyleSelect : function(n) {

   339 			var t = this, ed = t.editor, ctrlMan = ed.controlManager, ctrl;

   340 

   341 			// Setup style select box

   342 			ctrl = ctrlMan.createListBox('styleselect', {

   343 				title : 'advanced.style_select',

   344 				onselect : function(name) {

   345 					var matches, formatNames = [], removedFormat;

   346 

   347 					each(ctrl.items, function(item) {

   348 						formatNames.push(item.value);

   349 					});

   350 

   351 					ed.focus();

   352 					ed.undoManager.add();

   353 

   354 					// Toggle off the current format(s)

   355 					matches = ed.formatter.matchAll(formatNames);

   356 					tinymce.each(matches, function(match) {

   357 						if (!name || match == name) {

   358 							if (match)

   359 								ed.formatter.remove(match);

   360 

   361 							removedFormat = true;

   362 						}

   363 					});

   364 

   365 					if (!removedFormat)

   366 						ed.formatter.apply(name);

   367 

   368 					ed.undoManager.add();

   369 					ed.nodeChanged();

   370 

   371 					return false; // No auto select

   372 				}

   373 			});

   374 

   375 			// Handle specified format

   376 			ed.onPreInit.add(function() {

   377 				var counter = 0, formats = ed.getParam('style_formats');

   378 

   379 				if (formats) {

   380 					each(formats, function(fmt) {

   381 						var name, keys = 0;

   382 

   383 						each(fmt, function() {keys++;});

   384 

   385 						if (keys > 1) {

   386 							name = fmt.name = fmt.name || 'style_' + (counter++);

   387 							ed.formatter.register(name, fmt);

   388 							ctrl.add(fmt.title, name, {

   389 								style: function() {

   390 									return getPreviewCss(ed, fmt);

   391 								}

   392 							});

   393 						} else

   394 							ctrl.add(fmt.title);

   395 					});

   396 				} else {

   397 					each(ed.getParam('theme_advanced_styles', '', 'hash'), function(val, key) {

   398 						var name, fmt;

   399 

   400 						if (val) {

   401 							name = 'style_' + (counter++);

   402 							fmt = {

   403 								inline : 'span',

   404 								classes : val,

   405 								selector : '*'

   406 							};

   407 

   408 							ed.formatter.register(name, fmt);

   409 							ctrl.add(t.editor.translate(key), name, {

   410 								style: function() {

   411 									return getPreviewCss(ed, fmt);

   412 								}

   413 							});

   414 						}

   415 					});

   416 				}

   417 			});

   418 

   419 			// Auto import classes if the ctrl box is empty

   420 			if (ctrl.getLength() == 0) {

   421 				ctrl.onPostRender.add(function(ed, n) {

   422 					if (!ctrl.NativeListBox) {

   423 						Event.add(n.id + '_text', 'focus', t._importClasses, t);

   424 						Event.add(n.id + '_text', 'mousedown', t._importClasses, t);

   425 						Event.add(n.id + '_open', 'focus', t._importClasses, t);

   426 						Event.add(n.id + '_open', 'mousedown', t._importClasses, t);

   427 					} else

   428 						Event.add(n.id, 'focus', t._importClasses, t);

   429 				});

   430 			}

   431 

   432 			return ctrl;

   433 		},

   434 

   435 		_createFontSelect : function() {

   436 			var c, t = this, ed = t.editor;

   437 

   438 			c = ed.controlManager.createListBox('fontselect', {

   439 				title : 'advanced.fontdefault',

   440 				onselect : function(v) {

   441 					var cur = c.items[c.selectedIndex];

   442 

   443 					if (!v && cur) {

   444 						ed.execCommand('FontName', false, cur.value);

   445 						return;

   446 					}

   447 

   448 					ed.execCommand('FontName', false, v);

   449 

   450 					// Fake selection, execCommand will fire a nodeChange and update the selection

   451 					c.select(function(sv) {

   452 						return v == sv;

   453 					});

   454 

   455 					if (cur && cur.value == v) {

   456 						c.select(null);

   457 					}

   458 

   459 					return false; // No auto select

   460 				}

   461 			});

   462 

   463 			if (c) {

   464 				each(ed.getParam('theme_advanced_fonts', t.settings.theme_advanced_fonts, 'hash'), function(v, k) {

   465 					c.add(ed.translate(k), v, {style : v.indexOf('dings') == -1 ? 'font-family:' + v : ''});

   466 				});

   467 			}

   468 

   469 			return c;

   470 		},

   471 

   472 		_createFontSizeSelect : function() {

   473 			var t = this, ed = t.editor, c, i = 0, cl = [];

   474 

   475 			c = ed.controlManager.createListBox('fontsizeselect', {title : 'advanced.font_size', onselect : function(v) {

   476 				var cur = c.items[c.selectedIndex];

   477 

   478 				if (!v && cur) {

   479 					cur = cur.value;

   480 

   481 					if (cur['class']) {

   482 						ed.formatter.toggle('fontsize_class', {value : cur['class']});

   483 						ed.undoManager.add();

   484 						ed.nodeChanged();

   485 					} else {

   486 						ed.execCommand('FontSize', false, cur.fontSize);

   487 					}

   488 

   489 					return;

   490 				}

   491 

   492 				if (v['class']) {

   493 					ed.focus();

   494 					ed.undoManager.add();

   495 					ed.formatter.toggle('fontsize_class', {value : v['class']});

   496 					ed.undoManager.add();

   497 					ed.nodeChanged();

   498 				} else

   499 					ed.execCommand('FontSize', false, v.fontSize);

   500 

   501 				// Fake selection, execCommand will fire a nodeChange and update the selection

   502 				c.select(function(sv) {

   503 					return v == sv;

   504 				});

   505 

   506 				if (cur && (cur.value.fontSize == v.fontSize || cur.value['class'] && cur.value['class'] == v['class'])) {

   507 					c.select(null);

   508 				}

   509 

   510 				return false; // No auto select

   511 			}});

   512 

   513 			if (c) {

   514 				each(t.settings.theme_advanced_font_sizes, function(v, k) {

   515 					var fz = v.fontSize;

   516 

   517 					if (fz >= 1 && fz <= 7)

   518 						fz = t.sizes[parseInt(fz) - 1] + 'pt';

   519 

   520 					c.add(k, v, {'style' : 'font-size:' + fz, 'class' : 'mceFontSize' + (i++) + (' ' + (v['class'] || ''))});

   521 				});

   522 			}

   523 

   524 			return c;

   525 		},

   526 

   527 		_createBlockFormats : function() {

   528 			var c, fmts = {

   529 				p : 'advanced.paragraph',

   530 				address : 'advanced.address',

   531 				pre : 'advanced.pre',

   532 				h1 : 'advanced.h1',

   533 				h2 : 'advanced.h2',

   534 				h3 : 'advanced.h3',

   535 				h4 : 'advanced.h4',

   536 				h5 : 'advanced.h5',

   537 				h6 : 'advanced.h6',

   538 				div : 'advanced.div',

   539 				blockquote : 'advanced.blockquote',

   540 				code : 'advanced.code',

   541 				dt : 'advanced.dt',

   542 				dd : 'advanced.dd',

   543 				samp : 'advanced.samp'

   544 			}, t = this;

   545 

   546 			c = t.editor.controlManager.createListBox('formatselect', {title : 'advanced.block', onselect : function(v) {

   547 				t.editor.execCommand('FormatBlock', false, v);

   548 				return false;

   549 			}});

   550 

   551 			if (c) {

   552 				each(t.editor.getParam('theme_advanced_blockformats', t.settings.theme_advanced_blockformats, 'hash'), function(v, k) {

   553 					c.add(t.editor.translate(k != v ? k : fmts[v]), v, {'class' : 'mce_formatPreview mce_' + v, style: function() {

   554 						return getPreviewCss(t.editor, {block: v});

   555 					}});

   556 				});

   557 			}

   558 

   559 			return c;

   560 		},

   561 

   562 		_createForeColorMenu : function() {

   563 			var c, t = this, s = t.settings, o = {}, v;

   564 

   565 			if (s.theme_advanced_more_colors) {

   566 				o.more_colors_func = function() {

   567 					t._mceColorPicker(0, {

   568 						color : c.value,

   569 						func : function(co) {

   570 							c.setColor(co);

   571 						}

   572 					});

   573 				};

   574 			}

   575 

   576 			if (v = s.theme_advanced_text_colors)

   577 				o.colors = v;

   578 

   579 			if (s.theme_advanced_default_foreground_color)

   580 				o.default_color = s.theme_advanced_default_foreground_color;

   581 

   582 			o.title = 'advanced.forecolor_desc';

   583 			o.cmd = 'ForeColor';

   584 			o.scope = this;

   585 

   586 			c = t.editor.controlManager.createColorSplitButton('forecolor', o);

   587 

   588 			return c;

   589 		},

   590 

   591 		_createBackColorMenu : function() {

   592 			var c, t = this, s = t.settings, o = {}, v;

   593 

   594 			if (s.theme_advanced_more_colors) {

   595 				o.more_colors_func = function() {

   596 					t._mceColorPicker(0, {

   597 						color : c.value,

   598 						func : function(co) {

   599 							c.setColor(co);

   600 						}

   601 					});

   602 				};

   603 			}

   604 

   605 			if (v = s.theme_advanced_background_colors)

   606 				o.colors = v;

   607 

   608 			if (s.theme_advanced_default_background_color)

   609 				o.default_color = s.theme_advanced_default_background_color;

   610 

   611 			o.title = 'advanced.backcolor_desc';

   612 			o.cmd = 'HiliteColor';

   613 			o.scope = this;

   614 

   615 			c = t.editor.controlManager.createColorSplitButton('backcolor', o);

   616 

   617 			return c;

   618 		},

   619 

   620 		renderUI : function(o) {

   621 			var n, ic, tb, t = this, ed = t.editor, s = t.settings, sc, p, nl;

   622 

   623 			if (ed.settings) {

   624 				ed.settings.aria_label = s.aria_label + ed.getLang('advanced.help_shortcut');

   625 			}

   626 

   627 			// TODO: ACC Should have an aria-describedby attribute which is user-configurable to describe what this field is actually for.

   628 			// Maybe actually inherit it from the original textara?

   629 			n = p = DOM.create('span', {role : 'application', 'aria-labelledby' : ed.id + '_voice', id : ed.id + '_parent', 'class' : 'mceEditor ' + ed.settings.skin + 'Skin' + (s.skin_variant ? ' ' + ed.settings.skin + 'Skin' + t._ufirst(s.skin_variant) : '') + (ed.settings.directionality == "rtl" ? ' mceRtl' : '')});

   630 			DOM.add(n, 'span', {'class': 'mceVoiceLabel', 'style': 'display:none;', id: ed.id + '_voice'}, s.aria_label);

   631 

   632 			if (!DOM.boxModel)

   633 				n = DOM.add(n, 'div', {'class' : 'mceOldBoxModel'});

   634 

   635 			n = sc = DOM.add(n, 'table', {role : "presentation", id : ed.id + '_tbl', 'class' : 'mceLayout', cellSpacing : 0, cellPadding : 0});

   636 			n = tb = DOM.add(n, 'tbody');

   637 

   638 			switch ((s.theme_advanced_layout_manager || '').toLowerCase()) {

   639 				case "rowlayout":

   640 					ic = t._rowLayout(s, tb, o);

   641 					break;

   642 

   643 				case "customlayout":

   644 					ic = ed.execCallback("theme_advanced_custom_layout", s, tb, o, p);

   645 					break;

   646 

   647 				default:

   648 					ic = t._simpleLayout(s, tb, o, p);

   649 			}

   650 

   651 			n = o.targetNode;

   652 

   653 			// Add classes to first and last TRs

   654 			nl = sc.rows;

   655 			DOM.addClass(nl[0], 'mceFirst');

   656 			DOM.addClass(nl[nl.length - 1], 'mceLast');

   657 

   658 			// Add classes to first and last TDs

   659 			each(DOM.select('tr', tb), function(n) {

   660 				DOM.addClass(n.firstChild, 'mceFirst');

   661 				DOM.addClass(n.childNodes[n.childNodes.length - 1], 'mceLast');

   662 			});

   663 

   664 			if (DOM.get(s.theme_advanced_toolbar_container))

   665 				DOM.get(s.theme_advanced_toolbar_container).appendChild(p);

   666 			else

   667 				DOM.insertAfter(p, n);

   668 

   669 			Event.add(ed.id + '_path_row', 'click', function(e) {

   670 				e = e.target;

   671 

   672 				if (e.nodeName == 'A') {

   673 					t._sel(e.className.replace(/^.*mcePath_([0-9]+).*$/, '$1'));

   674 					return false;

   675 				}

   676 			});

   677 /*

   678 			if (DOM.get(ed.id + '_path_row')) {

   679 				Event.add(ed.id + '_tbl', 'mouseover', function(e) {

   680 					var re;

   681 

   682 					e = e.target;

   683 

   684 					if (e.nodeName == 'SPAN' && DOM.hasClass(e.parentNode, 'mceButton')) {

   685 						re = DOM.get(ed.id + '_path_row');

   686 						t.lastPath = re.innerHTML;

   687 						DOM.setHTML(re, e.parentNode.title);

   688 					}

   689 				});

   690 

   691 				Event.add(ed.id + '_tbl', 'mouseout', function(e) {

   692 					if (t.lastPath) {

   693 						DOM.setHTML(ed.id + '_path_row', t.lastPath);

   694 						t.lastPath = 0;

   695 					}

   696 				});

   697 			}

   698 */

   699 

   700 			if (!ed.getParam('accessibility_focus'))

   701 				Event.add(DOM.add(p, 'a', {href : '#'}, '<!-- IE -->'), 'focus', function() {tinyMCE.get(ed.id).focus();});

   702 

   703 			if (s.theme_advanced_toolbar_location == 'external')

   704 				o.deltaHeight = 0;

   705 

   706 			t.deltaHeight = o.deltaHeight;

   707 			o.targetNode = null;

   708 

   709 			ed.onKeyDown.add(function(ed, evt) {

   710 				var DOM_VK_F10 = 121, DOM_VK_F11 = 122;

   711 

   712 				if (evt.altKey) {

   713 		 			if (evt.keyCode === DOM_VK_F10) {

   714 						// Make sure focus is given to toolbar in Safari.

   715 						// We can't do this in IE as it prevents giving focus to toolbar when editor is in a frame

   716 						if (tinymce.isWebKit) {

   717 							window.focus();

   718 						}

   719 						t.toolbarGroup.focus();

   720 						return Event.cancel(evt);

   721 					} else if (evt.keyCode === DOM_VK_F11) {

   722 						DOM.get(ed.id + '_path_row').focus();

   723 						return Event.cancel(evt);

   724 					}

   725 				}

   726 			});

   727 

   728 			// alt+0 is the UK recommended shortcut for accessing the list of access controls.

   729 			ed.addShortcut('alt+0', '', 'mceShortcuts', t);

   730 

   731 			return {

   732 				iframeContainer : ic,

   733 				editorContainer : ed.id + '_parent',

   734 				sizeContainer : sc,

   735 				deltaHeight : o.deltaHeight

   736 			};

   737 		},

   738 

   739 		getInfo : function() {

   740 			return {

   741 				longname : 'Advanced theme',

   742 				author : 'Moxiecode Systems AB',

   743 				authorurl : 'http://tinymce.moxiecode.com',

   744 				version : tinymce.majorVersion + "." + tinymce.minorVersion

   745 			}

   746 		},

   747 

   748 		resizeBy : function(dw, dh) {

   749 			var e = DOM.get(this.editor.id + '_ifr');

   750 

   751 			this.resizeTo(e.clientWidth + dw, e.clientHeight + dh);

   752 		},

   753 

   754 		resizeTo : function(w, h, store) {

   755 			var ed = this.editor, s = this.settings, e = DOM.get(ed.id + '_tbl'), ifr = DOM.get(ed.id + '_ifr');

   756 

   757 			// Boundery fix box

   758 			w = Math.max(s.theme_advanced_resizing_min_width || 100, w);

   759 			h = Math.max(s.theme_advanced_resizing_min_height || 100, h);

   760 			w = Math.min(s.theme_advanced_resizing_max_width || 0xFFFF, w);

   761 			h = Math.min(s.theme_advanced_resizing_max_height || 0xFFFF, h);

   762 

   763 			// Resize iframe and container

   764 			DOM.setStyle(e, 'height', '');

   765 			DOM.setStyle(ifr, 'height', h);

   766 

   767 			if (s.theme_advanced_resize_horizontal) {

   768 				DOM.setStyle(e, 'width', '');

   769 				DOM.setStyle(ifr, 'width', w);

   770 

   771 				// Make sure that the size is never smaller than the over all ui

   772 				if (w < e.clientWidth) {

   773 					w = e.clientWidth;

   774 					DOM.setStyle(ifr, 'width', e.clientWidth);

   775 				}

   776 			}

   777 

   778 			// Store away the size

   779 			if (store && s.theme_advanced_resizing_use_cookie) {

   780 				Cookie.setHash("TinyMCE_" + ed.id + "_size", {

   781 					cw : w,

   782 					ch : h

   783 				});

   784 			}

   785 		},

   786 

   787 		destroy : function() {

   788 			var id = this.editor.id;

   789 

   790 			Event.clear(id + '_resize');

   791 			Event.clear(id + '_path_row');

   792 			Event.clear(id + '_external_close');

   793 		},

   794 

   795 		// Internal functions

   796 

   797 		_simpleLayout : function(s, tb, o, p) {

   798 			var t = this, ed = t.editor, lo = s.theme_advanced_toolbar_location, sl = s.theme_advanced_statusbar_location, n, ic, etb, c;

   799 

   800 			if (s.readonly) {

   801 				n = DOM.add(tb, 'tr');

   802 				n = ic = DOM.add(n, 'td', {'class' : 'mceIframeContainer'});

   803 				return ic;

   804 			}

   805 

   806 			// Create toolbar container at top

   807 			if (lo == 'top')

   808 				t._addToolbars(tb, o);

   809 

   810 			// Create external toolbar

   811 			if (lo == 'external') {

   812 				n = c = DOM.create('div', {style : 'position:relative'});

   813 				n = DOM.add(n, 'div', {id : ed.id + '_external', 'class' : 'mceExternalToolbar'});

   814 				DOM.add(n, 'a', {id : ed.id + '_external_close', href : 'javascript:;', 'class' : 'mceExternalClose'});

   815 				n = DOM.add(n, 'table', {id : ed.id + '_tblext', cellSpacing : 0, cellPadding : 0});

   816 				etb = DOM.add(n, 'tbody');

   817 

   818 				if (p.firstChild.className == 'mceOldBoxModel')

   819 					p.firstChild.appendChild(c);

   820 				else

   821 					p.insertBefore(c, p.firstChild);

   822 

   823 				t._addToolbars(etb, o);

   824 

   825 				ed.onMouseUp.add(function() {

   826 					var e = DOM.get(ed.id + '_external');

   827 					DOM.show(e);

   828 

   829 					DOM.hide(lastExtID);

   830 

   831 					var f = Event.add(ed.id + '_external_close', 'click', function() {

   832 						DOM.hide(ed.id + '_external');

   833 						Event.remove(ed.id + '_external_close', 'click', f);

   834 						return false;

   835 					});

   836 

   837 					DOM.show(e);

   838 					DOM.setStyle(e, 'top', 0 - DOM.getRect(ed.id + '_tblext').h - 1);

   839 

   840 					// Fixes IE rendering bug

   841 					DOM.hide(e);

   842 					DOM.show(e);

   843 					e.style.filter = '';

   844 

   845 					lastExtID = ed.id + '_external';

   846 

   847 					e = null;

   848 				});

   849 			}

   850 

   851 			if (sl == 'top')

   852 				t._addStatusBar(tb, o);

   853 

   854 			// Create iframe container

   855 			if (!s.theme_advanced_toolbar_container) {

   856 				n = DOM.add(tb, 'tr');

   857 				n = ic = DOM.add(n, 'td', {'class' : 'mceIframeContainer'});

   858 			}

   859 

   860 			// Create toolbar container at bottom

   861 			if (lo == 'bottom')

   862 				t._addToolbars(tb, o);

   863 

   864 			if (sl == 'bottom')

   865 				t._addStatusBar(tb, o);

   866 

   867 			return ic;

   868 		},

   869 

   870 		_rowLayout : function(s, tb, o) {

   871 			var t = this, ed = t.editor, dc, da, cf = ed.controlManager, n, ic, to, a;

   872 

   873 			dc = s.theme_advanced_containers_default_class || '';

   874 			da = s.theme_advanced_containers_default_align || 'center';

   875 

   876 			each(explode(s.theme_advanced_containers || ''), function(c, i) {

   877 				var v = s['theme_advanced_container_' + c] || '';

   878 

   879 				switch (c.toLowerCase()) {

   880 					case 'mceeditor':

   881 						n = DOM.add(tb, 'tr');

   882 						n = ic = DOM.add(n, 'td', {'class' : 'mceIframeContainer'});

   883 						break;

   884 

   885 					case 'mceelementpath':

   886 						t._addStatusBar(tb, o);

   887 						break;

   888 

   889 					default:

   890 						a = (s['theme_advanced_container_' + c + '_align'] || da).toLowerCase();

   891 						a = 'mce' + t._ufirst(a);

   892 

   893 						n = DOM.add(DOM.add(tb, 'tr'), 'td', {

   894 							'class' : 'mceToolbar ' + (s['theme_advanced_container_' + c + '_class'] || dc) + ' ' + a || da

   895 						});

   896 

   897 						to = cf.createToolbar("toolbar" + i);

   898 						t._addControls(v, to);

   899 						DOM.setHTML(n, to.renderHTML());

   900 						o.deltaHeight -= s.theme_advanced_row_height;

   901 				}

   902 			});

   903 

   904 			return ic;

   905 		},

   906 

   907 		_addControls : function(v, tb) {

   908 			var t = this, s = t.settings, di, cf = t.editor.controlManager;

   909 

   910 			if (s.theme_advanced_disable && !t._disabled) {

   911 				di = {};

   912 

   913 				each(explode(s.theme_advanced_disable), function(v) {

   914 					di[v] = 1;

   915 				});

   916 

   917 				t._disabled = di;

   918 			} else

   919 				di = t._disabled;

   920 

   921 			each(explode(v), function(n) {

   922 				var c;

   923 

   924 				if (di && di[n])

   925 					return;

   926 

   927 				// Compatiblity with 2.x

   928 				if (n == 'tablecontrols') {

   929 					each(["table","|","row_props","cell_props","|","row_before","row_after","delete_row","|","col_before","col_after","delete_col","|","split_cells","merge_cells"], function(n) {

   930 						n = t.createControl(n, cf);

   931 

   932 						if (n)

   933 							tb.add(n);

   934 					});

   935 

   936 					return;

   937 				}

   938 

   939 				c = t.createControl(n, cf);

   940 

   941 				if (c)

   942 					tb.add(c);

   943 			});

   944 		},

   945 

   946 		_addToolbars : function(c, o) {

   947 			var t = this, i, tb, ed = t.editor, s = t.settings, v, cf = ed.controlManager, di, n, h = [], a, toolbarGroup, toolbarsExist = false;

   948 

   949 			toolbarGroup = cf.createToolbarGroup('toolbargroup', {

   950 				'name': ed.getLang('advanced.toolbar'),

   951 				'tab_focus_toolbar':ed.getParam('theme_advanced_tab_focus_toolbar')

   952 			});

   953 

   954 			t.toolbarGroup = toolbarGroup;

   955 

   956 			a = s.theme_advanced_toolbar_align.toLowerCase();

   957 			a = 'mce' + t._ufirst(a);

   958 

   959 			n = DOM.add(DOM.add(c, 'tr', {role: 'presentation'}), 'td', {'class' : 'mceToolbar ' + a, "role":"toolbar"});

   960 

   961 			// Create toolbar and add the controls

   962 			for (i=1; (v = s['theme_advanced_buttons' + i]); i++) {

   963 				toolbarsExist = true;

   964 				tb = cf.createToolbar("toolbar" + i, {'class' : 'mceToolbarRow' + i});

   965 

   966 				if (s['theme_advanced_buttons' + i + '_add'])

   967 					v += ',' + s['theme_advanced_buttons' + i + '_add'];

   968 

   969 				if (s['theme_advanced_buttons' + i + '_add_before'])

   970 					v = s['theme_advanced_buttons' + i + '_add_before'] + ',' + v;

   971 

   972 				t._addControls(v, tb);

   973 				toolbarGroup.add(tb);

   974 

   975 				o.deltaHeight -= s.theme_advanced_row_height;

   976 			}

   977 			// Handle case when there are no toolbar buttons and ensure editor height is adjusted accordingly

   978 			if (!toolbarsExist)

   979 				o.deltaHeight -= s.theme_advanced_row_height;

   980 			h.push(toolbarGroup.renderHTML());

   981 			h.push(DOM.createHTML('a', {href : '#', accesskey : 'z', title : ed.getLang("advanced.toolbar_focus"), onfocus : 'tinyMCE.getInstanceById(\'' + ed.id + '\').focus();'}, '<!-- IE -->'));

   982 			DOM.setHTML(n, h.join(''));

   983 		},

   984 

   985 		_addStatusBar : function(tb, o) {

   986 			var n, t = this, ed = t.editor, s = t.settings, r, mf, me, td;

   987 

   988 			n = DOM.add(tb, 'tr');

   989 			n = td = DOM.add(n, 'td', {'class' : 'mceStatusbar'});

   990 			n = DOM.add(n, 'div', {id : ed.id + '_path_row', 'role': 'group', 'aria-labelledby': ed.id + '_path_voice'});

   991 			if (s.theme_advanced_path) {

   992 				DOM.add(n, 'span', {id: ed.id + '_path_voice'}, ed.translate('advanced.path'));

   993 				DOM.add(n, 'span', {}, ': ');

   994 			} else {

   995 				DOM.add(n, 'span', {}, ' ');

   996 			}

   997 

   998 

   999 			if (s.theme_advanced_resizing) {

  1000 				DOM.add(td, 'a', {id : ed.id + '_resize', href : 'javascript:;', onclick : "return false;", 'class' : 'mceResize', tabIndex:"-1"});

  1001 

  1002 				if (s.theme_advanced_resizing_use_cookie) {

  1003 					ed.onPostRender.add(function() {

  1004 						var o = Cookie.getHash("TinyMCE_" + ed.id + "_size"), c = DOM.get(ed.id + '_tbl');

  1005 

  1006 						if (!o)

  1007 							return;

  1008 

  1009 						t.resizeTo(o.cw, o.ch);

  1010 					});

  1011 				}

  1012 

  1013 				ed.onPostRender.add(function() {

  1014 					Event.add(ed.id + '_resize', 'click', function(e) {

  1015 						e.preventDefault();

  1016 					});

  1017 

  1018 					Event.add(ed.id + '_resize', 'mousedown', function(e) {

  1019 						var mouseMoveHandler1, mouseMoveHandler2,

  1020 							mouseUpHandler1, mouseUpHandler2,

  1021 							startX, startY, startWidth, startHeight, width, height, ifrElm;

  1022 

  1023 						function resizeOnMove(e) {

  1024 							e.preventDefault();

  1025 

  1026 							width = startWidth + (e.screenX - startX);

  1027 							height = startHeight + (e.screenY - startY);

  1028 

  1029 							t.resizeTo(width, height);

  1030 						};

  1031 

  1032 						function endResize(e) {

  1033 							// Stop listening

  1034 							Event.remove(DOM.doc, 'mousemove', mouseMoveHandler1);

  1035 							Event.remove(ed.getDoc(), 'mousemove', mouseMoveHandler2);

  1036 							Event.remove(DOM.doc, 'mouseup', mouseUpHandler1);

  1037 							Event.remove(ed.getDoc(), 'mouseup', mouseUpHandler2);

  1038 

  1039 							width = startWidth + (e.screenX - startX);

  1040 							height = startHeight + (e.screenY - startY);

  1041 							t.resizeTo(width, height, true);

  1042 

  1043 							ed.nodeChanged();

  1044 						};

  1045 

  1046 						e.preventDefault();

  1047 

  1048 						// Get the current rect size

  1049 						startX = e.screenX;

  1050 						startY = e.screenY;

  1051 						ifrElm = DOM.get(t.editor.id + '_ifr');

  1052 						startWidth = width = ifrElm.clientWidth;

  1053 						startHeight = height = ifrElm.clientHeight;

  1054 

  1055 						// Register envent handlers

  1056 						mouseMoveHandler1 = Event.add(DOM.doc, 'mousemove', resizeOnMove);

  1057 						mouseMoveHandler2 = Event.add(ed.getDoc(), 'mousemove', resizeOnMove);

  1058 						mouseUpHandler1 = Event.add(DOM.doc, 'mouseup', endResize);

  1059 						mouseUpHandler2 = Event.add(ed.getDoc(), 'mouseup', endResize);

  1060 					});

  1061 				});

  1062 			}

  1063 

  1064 			o.deltaHeight -= 21;

  1065 			n = tb = null;

  1066 		},

  1067 

  1068 		_updateUndoStatus : function(ed) {

  1069 			var cm = ed.controlManager, um = ed.undoManager;

  1070 

  1071 			cm.setDisabled('undo', !um.hasUndo() && !um.typing);

  1072 			cm.setDisabled('redo', !um.hasRedo());

  1073 		},

  1074 

  1075 		_nodeChanged : function(ed, cm, n, co, ob) {

  1076 			var t = this, p, de = 0, v, c, s = t.settings, cl, fz, fn, fc, bc, formatNames, matches;

  1077 

  1078 			tinymce.each(t.stateControls, function(c) {

  1079 				cm.setActive(c, ed.queryCommandState(t.controls[c][1]));

  1080 			});

  1081 

  1082 			function getParent(name) {

  1083 				var i, parents = ob.parents, func = name;

  1084 

  1085 				if (typeof(name) == 'string') {

  1086 					func = function(node) {

  1087 						return node.nodeName == name;

  1088 					};

  1089 				}

  1090 

  1091 				for (i = 0; i < parents.length; i++) {

  1092 					if (func(parents[i]))

  1093 						return parents[i];

  1094 				}

  1095 			};

  1096 

  1097 			cm.setActive('visualaid', ed.hasVisual);

  1098 			t._updateUndoStatus(ed);

  1099 			cm.setDisabled('outdent', !ed.queryCommandState('Outdent'));

  1100 

  1101 			p = getParent('A');

  1102 			if (c = cm.get('link')) {

  1103 				c.setDisabled((!p && co) || (p && !p.href));

  1104 				c.setActive(!!p && (!p.name && !p.id));

  1105 			}

  1106 

  1107 			if (c = cm.get('unlink')) {

  1108 				c.setDisabled(!p && co);

  1109 				c.setActive(!!p && !p.name && !p.id);

  1110 			}

  1111 

  1112 			if (c = cm.get('anchor')) {

  1113 				c.setActive(!co && !!p && (p.name || (p.id && !p.href)));

  1114 			}

  1115 

  1116 			p = getParent('IMG');

  1117 			if (c = cm.get('image'))

  1118 				c.setActive(!co && !!p && n.className.indexOf('mceItem') == -1);

  1119 

  1120 			if (c = cm.get('styleselect')) {

  1121 				t._importClasses();

  1122 

  1123 				formatNames = [];

  1124 				each(c.items, function(item) {

  1125 					formatNames.push(item.value);

  1126 				});

  1127 

  1128 				matches = ed.formatter.matchAll(formatNames);

  1129 				c.select(matches[0]);

  1130 				tinymce.each(matches, function(match, index) {

  1131 					if (index > 0) {

  1132 						c.mark(match);

  1133 					}

  1134 				});

  1135 			}

  1136