webcit/tiny_mce/themes/advanced/editor_template_src.js

   1 /* Import theme specific language pack */
   2 tinyMCE.importThemeLanguagePack('advanced');
   3
   4 // Variable declarations
   5 var TinyMCE_advanced_autoImportCSSClasses = true;
   6 var TinyMCE_advanced_resizer = new Object();
   7 var TinyMCE_advanced_buttons = [
   8         // Control id, button img, button title, command, user_interface, value
   9         ['bold', '{$lang_bold_img}', '{$lang_bold_desc}', 'Bold'],
  10         ['italic', '{$lang_italic_img}', '{$lang_italic_desc}', 'Italic'],
  11         ['underline', '{$lang_underline_img}', '{$lang_underline_desc}', 'Underline'],
  12         ['strikethrough', 'strikethrough.gif', '{$lang_striketrough_desc}', 'Strikethrough'],
  13         ['justifyleft', 'left.gif', '{$lang_justifyleft_desc}', 'JustifyLeft'],
  14         ['justifycenter', 'center.gif', '{$lang_justifycenter_desc}', 'JustifyCenter'],
  15         ['justifyright', 'right.gif', '{$lang_justifyright_desc}', 'JustifyRight'],
  16         ['justifyfull', 'full.gif', '{$lang_justifyfull_desc}', 'JustifyFull'],
  17         ['bullist', 'bullist.gif', '{$lang_bullist_desc}', 'InsertUnorderedList'],
  18         ['numlist', 'numlist.gif', '{$lang_numlist_desc}', 'InsertOrderedList'],
  19         ['outdent', 'outdent.gif', '{$lang_outdent_desc}', 'Outdent'],
  20         ['indent', 'indent.gif', '{$lang_indent_desc}', 'Indent'],
  21         ['cut', 'cut.gif', '{$lang_cut_desc}', 'Cut'],
  22         ['copy', 'copy.gif', '{$lang_copy_desc}', 'Copy'],
  23         ['paste', 'paste.gif', '{$lang_paste_desc}', 'Paste'],
  24         ['undo', 'undo.gif', '{$lang_undo_desc}', 'Undo'],
  25         ['redo', 'redo.gif', '{$lang_redo_desc}', 'Redo'],
  26         ['link', 'link.gif', '{$lang_link_desc}', 'mceLink', true],
  27         ['unlink', 'unlink.gif', '{$lang_unlink_desc}', 'unlink'],
  28         ['image', 'image.gif', '{$lang_image_desc}', 'mceImage', true],
  29         ['cleanup', 'cleanup.gif', '{$lang_cleanup_desc}', 'mceCleanup'],
  30         ['help', 'help.gif', '{$lang_help_desc}', 'mceHelp'],
  31         ['code', 'code.gif', '{$lang_theme_code_desc}', 'mceCodeEditor'],
  32         ['hr', 'hr.gif', '{$lang_theme_hr_desc}', 'inserthorizontalrule'],
  33         ['removeformat', 'removeformat.gif', '{$lang_theme_removeformat_desc}', 'removeformat'],
  34         ['sub', 'sub.gif', '{$lang_theme_sub_desc}', 'subscript'],
  35         ['sup', 'sup.gif', '{$lang_theme_sup_desc}', 'superscript'],
  36         ['forecolor', 'forecolor.gif', '{$lang_theme_forecolor_desc}', 'mceForeColor', true],
  37         ['backcolor', 'backcolor.gif', '{$lang_theme_backcolor_desc}', 'mceBackColor', true],
  38         ['charmap', 'charmap.gif', '{$lang_theme_charmap_desc}', 'mceCharMap'],
  39         ['visualaid', 'visualaid.gif', '{$lang_theme_visualaid_desc}', 'mceToggleVisualAid'],
  40         ['anchor', 'anchor.gif', '{$lang_theme_anchor_desc}', 'mceInsertAnchor'],
  41         ['newdocument', 'newdocument.gif', '{$lang_newdocument_desc}', 'mceNewDocument']
  42 ];
  43
  44 /**
  45  * Returns HTML code for the specificed control.
  46  */
  47 function TinyMCE_advanced_getControlHTML(button_name)
  48 {
  49         var buttonTileMap = new Array('anchor.gif','backcolor.gif','bullist.gif','center.gif',
  50                                                                                         'charmap.gif','cleanup.gif','code.gif','copy.gif','custom_1.gif',
  51                                                                                         'cut.gif','forecolor.gif','full.gif','help.gif','hr.gif',
  52                                                                                         'image.gif','indent.gif','left.gif','link.gif','numlist.gif',
  53                                                                                         'outdent.gif','paste.gif','redo.gif','removeformat.gif',
  54                                                                                         'right.gif','strikethrough.gif','sub.gif','sup.gif','undo.gif',
  55                                                                                         'unlink.gif','visualaid.gif');
  56
  57         // Lookup button in button list
  58         for (var i=0; i<TinyMCE_advanced_buttons.length; i++)
  59         {
  60                 var but = TinyMCE_advanced_buttons[i];
  61
  62                 if (but[0] == button_name)
  63                 {
  64                         // Check for it in tilemap
  65                         if (tinyMCE.settings['button_tile_map'])
  66                         {
  67                                 for (var x=0; !tinyMCE.isMSIE && x<buttonTileMap.length; x++)
  68                                 {
  69                                         if (buttonTileMap[x] == but[1])
  70                                         {
  71                                                 return '<a href="javascript:tinyMCE.execInstanceCommand(\'{$editor_id}\',\'' + but[3] + '\', ' + (but.length > 4 ? but[4] : false) + (but.length > 5 ? ', \'' + but[5] + '\'' : '') + ')" target="_self" onmousedown="return false;"><img id="{$editor_id}_' + but[0] +'" src="{$themeurl}/images/spacer.gif" style="background-image:url({$themeurl}/images/buttons.gif); background-position: ' + (0-(x*20)) + 'px 0px" title="' + but[2] + '" width="20" height="20" class="mceButtonNormal" onmouseover="tinyMCE.switchClass(this,\'mceButtonOver\');" onmouseout="tinyMCE.restoreClass(this);" onmousedown="tinyMCE.restoreAndSwitchClass(this,\'mceButtonDown\');" /></a>';
  72                                         }
  73                                 }
  74                         }
  75
  76                         // Old style
  77                         return '<a href="javascript:tinyMCE.execInstanceCommand(\'{$editor_id}\',\'' + but[3] + '\', ' + (but.length > 4 ? but[4] : false) + (but.length > 5 ? ', \'' + but[5] + '\'' : '') + ')" target="_self" onmousedown="return false;"><img id="{$editor_id}_' + but[0] + '" src="{$themeurl}/images/' + but[1] + '" title="' + but[2] + '" width="20" height="20" class="mceButtonNormal" onmouseover="tinyMCE.switchClass(this,\'mceButtonOver\');" onmouseout="tinyMCE.restoreClass(this);" onmousedown="tinyMCE.restoreAndSwitchClass(this,\'mceButtonDown\');" /></a>';
  78                 }
  79         }
  80
  81         // Custom controlls other than buttons
  82         switch (button_name)
  83         {
  84                 case "formatselect":
  85                         var html = '<select id="{$editor_id}_formatSelect" name="{$editor_id}_formatSelect" onfocus="tinyMCE.addSelectAccessibility(event, this, window);" onchange="tinyMCE.execInstanceCommand(\'{$editor_id}\',\'FormatBlock\',false,this.options[this.selectedIndex].value);" class="mceSelectList">';
  86                         var formats = tinyMCE.getParam("theme_advanced_blockformats", "p,address,pre,h1,h2,h3,h4,h5,h6", true).split(',');
  87                         var lookup = [
  88                                 ['p', '{$lang_theme_paragraph}'],
  89                                 ['address', '{$lang_theme_address}'],
  90                                 ['pre', '{$lang_theme_pre}'],
  91                                 ['h1', '{$lang_theme_h1}'],
  92                                 ['h2', '{$lang_theme_h2}'],
  93                                 ['h3', '{$lang_theme_h3}'],
  94                                 ['h4', '{$lang_theme_h4}'],
  95                                 ['h5', '{$lang_theme_h5}'],
  96                                 ['h6', '{$lang_theme_h6}']
  97                         ];
  98
  99                         html += '<option value="">{$lang_theme_block}</option>';
 100
 101                         // Build format select
 102                         for (var i=0; i<formats.length; i++)
 103                         {
 104                                 for (var x=0; x<lookup.length; x++)
 105                                 {
 106                                         if (formats[i] == lookup[x][0])
 107                                         {
 108                                                 html += '<option value="<' + lookup[x][0] + '>">' + lookup[x][1] + '</option>';
 109                                         }
 110                                 }
 111                         }
 112
 113                         html += '</select>';
 114                         //formatselect
 115                 return html;
 116
 117                 case "styleselect":
 118                         //styleselect
 119                 return '<select id="{$editor_id}_styleSelect" onmousedown="TinyMCE_advanced_setupCSSClasses(\'{$editor_id}\');" name="{$editor_id}_styleSelect" onfocus="tinyMCE.addSelectAccessibility(event, this, window);" onchange="tinyMCE.execInstanceCommand(\'{$editor_id}\',\'mceSetCSSClass\',false,this.options[this.selectedIndex].value);" class="mceSelectList">{$style_select_options}</select>';
 120
 121                 case "fontselect":
 122                         var fontHTML = '<select id="{$editor_id}_fontNameSelect" name="{$editor_id}_fontNameSelect" onfocus="tinyMCE.addSelectAccessibility(event, this, window);" onchange="tinyMCE.execInstanceCommand(\'{$editor_id}\',\'FontName\',false,this.options[this.selectedIndex].value);" class="mceSelectList"><option value="">{$lang_theme_fontdefault}</option>';
 123                         var iFonts = 'Arial=arial,helvetica,sans-serif;Courier New=courier new,courier,monospace;Georgia=georgia,times new roman,times,serif;Tahoma=tahoma,arial,helvetica,sans-serif;Times New Roman=times new roman,times,serif;Verdana=verdana,arial,helvetica,sans-serif;Impact=impact;WingDings=wingdings';
 124                         var nFonts = '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,sand;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';
 125                         var fonts = tinyMCE.getParam("theme_advanced_fonts", nFonts).split(';');
 126                         for (var i=0; i<fonts.length; i++) {
 127                                 if (fonts[i] != '') {
 128                                         var parts = fonts[i].split('=');
 129                                         fontHTML += '<option value="' + parts[1] + '">' + parts[0] + '</option>';
 130                                 }
 131                         }
 132
 133                         fontHTML += '</select>';
 134                         return fontHTML;
 135
 136                 case "fontsizeselect":
 137                         //fontsizeselect
 138                 return '<select id="{$editor_id}_fontSizeSelect" name="{$editor_id}_fontSizeSelect" onfocus="tinyMCE.addSelectAccessibility(event, this, window);" onchange="tinyMCE.execInstanceCommand(\'{$editor_id}\',\'FontSize\',false,this.options[this.selectedIndex].value);" class="mceSelectList">\
 139                 <option value="0">{$lang_theme_font_size}</option>\
 140                 <option value="1">1 (8 pt)</option>\
 141                 <option value="2">2 (10 pt)</option>\
 142                 <option value="3">3 (12 pt)</option>\
 143                 <option value="4">4 (14 pt)</option>\
 144                 <option value="5">5 (18 pt)</option>\
 145                 <option value="6">6 (24 pt)</option>\
 146                 <option value="7">7 (36 pt)</option>\
 147                 </select>';
 148
 149                 case "|":
 150                 case "separator":
 151                 return '<img src="{$themeurl}/images/spacer.gif" width="1" height="15" class="mceSeparatorLine">';
 152
 153                 case "spacer":
 154                 return '<img src="{$themeurl}/images/spacer.gif" width="1" height="15" border="0" class="mceSeparatorLine" style="vertical-align: middle" />';
 155
 156                 case "rowseparator":
 157                 return '<br />';
 158         }
 159
 160         return "";
 161 }
 162
 163 /**
 164  * Theme specific exec command handeling.
 165  */
 166 function TinyMCE_advanced_execCommand(editor_id, element, command, user_interface, value)
 167 {
 168         switch (command)
 169         {
 170                 case "mceForeColor":
 171                         var template = new Array();
 172                         var elm = tinyMCE.selectedInstance.getFocusElement();
 173                         var inputColor = tinyMCE.getAttrib(elm, "color");
 174
 175                         if (inputColor == '')
 176                                 inputColor = elm.style.color;
 177
 178                         if (!inputColor)
 179                                 inputColor = "#000000";
 180
 181                         template['file'] = 'color_picker.htm';
 182                         template['width'] = 220;
 183                         template['height'] = 190;
 184
 185                         tinyMCE.openWindow(template, {editor_id : editor_id, inline : "yes", command : "forecolor", input_color : inputColor});
 186                 return true;
 187
 188                 case "mceBackColor":
 189                         var template = new Array();
 190                         var elm = tinyMCE.selectedInstance.getFocusElement();
 191                         var inputColor = elm.style.backgroundColor;
 192
 193                         if (!inputColor)
 194                                 inputColor = "#000000";
 195
 196                         template['file'] = 'color_picker.htm';
 197                         template['width'] = 220;
 198                         template['height'] = 190;
 199
 200                         template['width'] += tinyMCE.getLang('lang_theme_advanced_backcolor_delta_width', 0);
 201                         template['height'] += tinyMCE.getLang('lang_theme_advanced_backcolor_delta_height', 0);
 202
 203                         tinyMCE.openWindow(template, {editor_id : editor_id, inline : "yes", command : "HiliteColor", input_color : inputColor});
 204                         //mceBackColor
 205                 return true;
 206
 207                 case "mceColorPicker":
 208                         if (user_interface) {
 209                                 var template = new Array();
 210                                 var inputColor = value['document'].getElementById(value['element_id']).value;
 211
 212                                 template['file'] = 'color_picker.htm';
 213                                 template['width'] = 220;
 214                                 template['height'] = 190;
 215                                 template['close_previous'] = "no";
 216
 217                                 template['width'] += tinyMCE.getLang('lang_theme_advanced_colorpicker_delta_width', 0);
 218                                 template['height'] += tinyMCE.getLang('lang_theme_advanced_colorpicker_delta_height', 0);
 219
 220                                 if (typeof(value['store_selection']) == "undefined")
 221                                         value['store_selection'] = true;
 222
 223                                 tinyMCE.lastColorPickerValue = value;
 224                                 tinyMCE.openWindow(template, {editor_id : editor_id, mce_store_selection : value['store_selection'], inline : "yes", command : "mceColorPicker", input_color : inputColor});
 225                         } else {
 226                                 var savedVal = tinyMCE.lastColorPickerValue;
 227                                 var elm = savedVal['document'].getElementById(savedVal['element_id']);
 228                                 elm.value = value;
 229                                 eval('elm.onchange();');
 230                         }
 231                 return true;
 232
 233                 case "mceCodeEditor":
 234                         var template = new Array();
 235
 236                         template['file'] = 'source_editor.htm';
 237                         template['width'] = parseInt(tinyMCE.getParam("theme_advanced_source_editor_width", 500));
 238                         template['height'] = parseInt(tinyMCE.getParam("theme_advanced_source_editor_height", 400));
 239
 240                         tinyMCE.openWindow(template, {editor_id : editor_id, resizable : "yes", scrollbars : "no", inline : "yes"});
 241                         //mceCodeEditor
 242                 return true;
 243
 244                 case "mceCharMap":
 245                         var template = new Array();
 246
 247                         template['file'] = 'charmap.htm';
 248                         template['width'] = 550;
 249                         template['height'] = 250;
 250
 251                         template['width'] += tinyMCE.getLang('lang_theme_advanced_charmap_delta_width', 0);
 252                         template['height'] += tinyMCE.getLang('lang_theme_advanced_charmap_delta_height', 0);
 253
 254                         tinyMCE.openWindow(template, {editor_id : editor_id, inline : "yes"});
 255                         //mceCharMap
 256                 return true;
 257
 258                 case "mceInsertAnchor":
 259                         var template = new Array();
 260
 261                         template['file'] = 'anchor.htm';
 262                         template['width'] = 320;
 263                         template['height'] = 90;
 264
 265                         template['width'] += tinyMCE.getLang('lang_theme_advanced_anchor_delta_width', 0);
 266                         template['height'] += tinyMCE.getLang('lang_theme_advanced_anchor_delta_height', 0);
 267
 268                         tinyMCE.openWindow(template, {editor_id : editor_id, inline : "yes"});
 269                 return true;
 270
 271                 case "mceNewDocument":
 272                         if (confirm(tinyMCE.getLang('lang_newdocument')))
 273                                 tinyMCE.execInstanceCommand(editor_id, 'mceSetContent', false, '');
 274
 275                         return true;
 276         }
 277
 278         // Default behavior
 279         return false;
 280 }
 281
 282 /**
 283  * Editor instance template function.
 284  */
 285 function TinyMCE_advanced_getEditorTemplate(settings, editorId)
 286 {
 287         function removeFromArray(in_array, remove_array)
 288         {
 289                 var outArray = new Array();
 290
 291                 for (var i=0; i<in_array.length; i++)
 292                 {
 293                         skip = false;
 294
 295                         for (var j=0; j<remove_array.length; j++)
 296                         {
 297                                 if (in_array[i] == remove_array[j])
 298                                 {
 299                                         skip = true;
 300                                 }
 301                         }
 302
 303                         if (!skip)
 304                         {
 305                                 outArray[outArray.length] = in_array[i];
 306                         }
 307                 }
 308
 309                 return outArray;
 310         }
 311
 312         function addToArray(in_array, add_array)
 313         {
 314                 for (var i=0; i<add_array.length; i++)
 315                 {
 316                         in_array[in_array.length] = add_array[i];
 317                 }
 318
 319                 return in_array;
 320         }
 321
 322         var template = new Array();
 323         var deltaHeight = 0;
 324
 325         var resizing = tinyMCE.getParam("theme_advanced_resizing", false);
 326         var path = tinyMCE.getParam("theme_advanced_path", true);
 327         var statusbarHTML = '<div id="{$editor_id}_path" class="mceStatusbarPathText" style="display: ' + (path ? "block" : "none") + '">&nbsp;</div><div id="{$editor_id}_resize" class="mceStatusbarResize" style="display: ' + (resizing ? "block" : "none") + '" onmousedown="TinyMCE_advanced_setResizing(event,\'{$editor_id}\',true);"></div><br style="clear: both" />';
 328         var layoutManager = tinyMCE.getParam("theme_advanced_layout_manager", "SimpleLayout");
 329
 330         // Setup style select options -- MOVED UP FOR EXTERNAL TOOLBAR COMPATABILITY!
 331         var styleSelectHTML = '<option value="">{$lang_theme_style_select}</option>';
 332         if (settings['theme_advanced_styles'])
 333         {
 334                 var stylesAr = settings['theme_advanced_styles'].split(';');
 335
 336                 for (var i=0; i<stylesAr.length; i++)
 337                 {
 338                         var key, value;
 339
 340                         key = stylesAr[i].split('=')[0];
 341                         value = stylesAr[i].split('=')[1];
 342
 343                         styleSelectHTML += '<option value="' + value + '">' + key + '</option>';
 344                 }
 345
 346                 TinyMCE_advanced_autoImportCSSClasses = false;
 347         }
 348
 349         switch(layoutManager)
 350         {
 351                 case "SimpleLayout" : //the default TinyMCE Layout (for backwards compatibility)...
 352                         var toolbarHTML = "";
 353                         var toolbarLocation = tinyMCE.getParam("theme_advanced_toolbar_location", "bottom");
 354                         var toolbarAlign = tinyMCE.getParam("theme_advanced_toolbar_align", "center");
 355                         var pathLocation = tinyMCE.getParam("theme_advanced_path_location", "none"); // Compatiblity
 356                         var statusbarLocation = tinyMCE.getParam("theme_advanced_statusbar_location", pathLocation);
 357                         var defVals = {
 358                                 theme_advanced_buttons1 : "bold,italic,underline,strikethrough,separator,justifyleft,justifycenter,justifyright,justifyfull,separator,styleselect,formatselect",
 359                                 theme_advanced_buttons2 : "bullist,numlist,separator,outdent,indent,separator,undo,redo,separator,link,unlink,anchor,image,cleanup,help,code",
 360                                 theme_advanced_buttons3 : "hr,removeformat,visualaid,separator,sub,sup,separator,charmap"
 361                         };
 362
 363                         // Add accessibility control
 364                         toolbarHTML += '<a href="#" accesskey="q" title="' + tinyMCE.getLang("lang_toolbar_focus") + '"></a>';
 365
 366                         // Render rows
 367                         for (var i=1; i<100; i++) {
 368                                 var def = defVals["theme_advanced_buttons" + i];
 369
 370                                 buttons = tinyMCE.getParam("theme_advanced_buttons" + i, def == null ? '' : def, true, ',');
 371                                 if (buttons.length == 0)
 372                                         break;
 373
 374                                 buttons = removeFromArray(buttons, tinyMCE.getParam("theme_advanced_disable", "", true, ','));
 375                                 buttons = addToArray(buttons, tinyMCE.getParam("theme_advanced_buttons" + i + "_add", "", true, ','));
 376                                 buttons = addToArray(tinyMCE.getParam("theme_advanced_buttons" + i + "_add_before", "", true, ','), buttons);
 377
 378                                 for (var b=0; b<buttons.length; b++)
 379                                         toolbarHTML += tinyMCE.getControlHTML(buttons[b]);
 380
 381                                 if (buttons.length > 0) {
 382                                         toolbarHTML += "<br />";
 383                                         deltaHeight -= 23;
 384                                 }
 385                         }
 386
 387                         // Add accessibility control
 388                         toolbarHTML += '<a href="#" accesskey="z" onfocus="tinyMCE.getInstanceById(\'' + editorId + '\').getWin().focus();"></a>';
 389
 390                         // Setup template html
 391                         template['html'] = '<table class="mceEditor" border="0" cellpadding="0" cellspacing="0" width="{$width}" height="{$height}" style="width:{$width}px;height:{$height}px"><tbody>';
 392
 393                         if (toolbarLocation == "top")
 394                         {
 395                                 template['html'] += '<tr><td class="mceToolbarTop" align="' + toolbarAlign + '" height="1" nowrap="nowrap">' + toolbarHTML + '</td></tr>';
 396                         }
 397
 398                         if (statusbarLocation == "top")
 399                         {
 400                                 template['html'] += '<tr><td class="mceStatusbarTop" height="1">' + statusbarHTML + '</td></tr>';
 401                                 deltaHeight -= 23;
 402                         }
 403
 404                         template['html'] += '<tr><td align="center"><span id="{$editor_id}"></span></td></tr>';
 405
 406                         if (toolbarLocation == "bottom")
 407                         {
 408                                 template['html'] += '<tr><td class="mceToolbarBottom" align="' + toolbarAlign + '" height="1">' + toolbarHTML + '</td></tr>';
 409                         }
 410
 411                         // External toolbar changes
 412                         if (toolbarLocation == "external")
 413                         {
 414                                 var bod = document.body;
 415                                 var elm = document.createElement ("div");
 416
 417                                 toolbarHTML = tinyMCE.replaceVars(toolbarHTML, tinyMCE.settings);
 418                                 toolbarHTML = tinyMCE.replaceVars(toolbarHTML, tinyMCELang);
 419                                 toolbarHTML = tinyMCE.replaceVar(toolbarHTML, 'style_select_options', styleSelectHTML);
 420                                 toolbarHTML = tinyMCE.replaceVar(toolbarHTML, "editor_id", editorId);
 421                                 toolbarHTML = tinyMCE.applyTemplate(toolbarHTML);
 422
 423                                 elm.className = "mceToolbarExternal";
 424                                 elm.id = editorId+"_toolbar";
 425                                 elm.innerHTML = '<table width="100%" border="0" align="center"><tr><td align="center">'+toolbarHTML+'</td></tr></table>';
 426                                 bod.appendChild (elm);
 427                                 // bod.style.marginTop = elm.offsetHeight + "px";
 428
 429                                 deltaHeight = 0;
 430                                 tinyMCE.getInstanceById(editorId).toolbarElement = elm;
 431
 432                                 //template['html'] = '<div id="mceExternalToolbar" align="center" class="mceToolbarExternal"><table width="100%" border="0" align="center"><tr><td align="center">'+toolbarHTML+'</td></tr></table></div>' + template["html"];
 433                         }
 434                         else
 435                         {
 436                                 tinyMCE.getInstanceById(editorId).toolbarElement = null;
 437                         }
 438
 439                         if (statusbarLocation == "bottom")
 440                         {
 441                                 template['html'] += '<tr><td class="mceStatusbarBottom" height="1">' + statusbarHTML + '</td></tr>';
 442                                 deltaHeight -= 23;
 443                         }
 444
 445                         template['html'] += '</table>';
 446                         //"SimpleLayout"
 447                 break;
 448
 449                 case "RowLayout" : //Container Layout - containers defined in "theme_advanced_containers" are rendered from top to bottom.
 450                         template['html'] = '<table class="mceEditor" border="0" cellpadding="0" cellspacing="0" width="{$width}" height="{$height}" style="width:{$width}px;height:{$height}px"><tbody>';
 451
 452                         var containers = tinyMCE.getParam("theme_advanced_containers", "", true, ",");
 453                         var defaultContainerCSS = tinyMCE.getParam("theme_advanced_containers_default_class", "container");
 454                         var defaultContainerAlign = tinyMCE.getParam("theme_advanced_containers_default_align", "center");
 455
 456                         //Render Containers:
 457                         for (var i = 0; i < containers.length; i++)
 458                         {
 459                                 if (containers[i] == "mceEditor") //Exceptions for mceEditor and ...
 460                                 {
 461                                         template['html'] += '<tr><td align="center" class="mceEditor_border">\
 462                                                                                                 <span id="{$editor_id}"></span>\
 463                                                                                                 </td></tr>';
 464                                 }
 465                                 else if (containers[i] == "mceElementpath" || containers[i] == "mceStatusbar") // ... mceElementpath:
 466                                 {
 467                                         var pathClass = "mceStatusbar";
 468
 469                                         if (i == containers.length-1)
 470                                         {
 471                                                 pathClass = "mceStatusbarBottom";
 472                                         }
 473                                         else if (i == 0)
 474                                         {
 475                                                 pathClass = "mceStatusbar";
 476                                         }
 477                                         else
 478                                         {
 479                                                 deltaHeight-=2;
 480                                         }
 481
 482                                         template['html'] += '<tr><td class="' + pathClass + '" height="1">' + statusbarHTML + '</td></tr>';
 483                                         deltaHeight -= 22;
 484                                 }
 485                                 else //Render normal Container:
 486                                 {
 487                                         var curContainer = tinyMCE.getParam("theme_advanced_container_"+containers[i], "", true, ',');
 488                                         var curContainerHTML = "";
 489                                         var curAlign = tinyMCE.getParam("theme_advanced_container_"+containers[i]+"_align", defaultContainerAlign);
 490                                         var curCSS = tinyMCE.getParam("theme_advanced_container_"+containers[i]+"_class", defaultContainerCSS);
 491
 492                                         for (var j=0; j<curContainer.length; j++)
 493                                         {
 494                                                 curContainerHTML += tinyMCE.getControlHTML(curContainer[j]);
 495                                         }
 496
 497                                         if (curContainer.length > 0)
 498                                         {
 499                                                 curContainerHTML += "<br />";
 500                                                 deltaHeight -= 23;
 501                                         }
 502
 503                                         template['html'] += '<tr><td class="' + curCSS + '" align="' + curAlign + '" height="1">' + curContainerHTML + '</td></tr>';
 504                                 }
 505                         }
 506
 507                         template['html'] += '</tbody></table>';
 508                         //RowLayout
 509                 break;
 510
 511                 case "BorderLayout" : //will be like java.awt.BorderLayout of SUN Java...
 512                         // Not implemented yet...
 513                 break;
 514
 515                 case "CustomLayout" : //User defined layout callback...
 516                         var customLayout = tinyMCE.getParam("theme_advanced_custom_layout","");
 517
 518                         if (customLayout != "" && eval("typeof(" + customLayout + ")") != "undefined")
 519                         {
 520                                 template = eval(customLayout + "(template);");
 521                         }
 522                 break;
 523
 524                 default:
 525                         alert('UNDEFINED LAYOUT MANAGER! PLEASE CHECK YOUR TINYMCE CONFIG!');
 526                         //CustomLayout
 527                 break;
 528         }
 529
 530         template['html'] += '<div id="{$editor_id}_resize_box" class="mceResizeBox"></div>';
 531         template['html'] = tinyMCE.replaceVar(template['html'], 'style_select_options', styleSelectHTML);
 532         template['delta_width'] = 0;
 533         template['delta_height'] = deltaHeight;
 534
 535         return template;
 536 }
 537
 538 /**
 539  * Starts/stops the editor resizing.
 540  */
 541 function TinyMCE_advanced_setResizing(e, editor_id, state) {
 542         e = typeof(e) == "undefined" ? window.event : e;
 543
 544         var resizer = TinyMCE_advanced_resizer;
 545         var editorContainer = document.getElementById(editor_id + '_parent');
 546         var editorArea = document.getElementById(editor_id + '_parent').firstChild;
 547         var resizeBox = document.getElementById(editor_id + '_resize_box');
 548         var inst = tinyMCE.getInstanceById(editor_id);
 549
 550         if (state) {
 551                 // Place box over editor area
 552                 var width = editorArea.clientWidth;
 553                 var height = editorArea.clientHeight;
 554
 555                 resizeBox.style.width = width + "px";
 556                 resizeBox.style.height = height + "px";
 557
 558                 resizer.iframeWidth = inst.iframeElement.clientWidth;
 559                 resizer.iframeHeight = inst.iframeElement.clientHeight;
 560
 561                 // Hide editor and show resize box
 562                 editorArea.style.display = "none";
 563                 resizeBox.style.display = "block";
 564
 565                 // Add event handlers, only once
 566                 if (!resizer.eventHandlers) {
 567                         if (tinyMCE.isMSIE)
 568                                 tinyMCE.addEvent(document, "mousemove", TinyMCE_advanced_resizeEventHandler);
 569                         else
 570                                 tinyMCE.addEvent(window, "mousemove", TinyMCE_advanced_resizeEventHandler);
 571
 572                         tinyMCE.addEvent(document, "mouseup", TinyMCE_advanced_resizeEventHandler);
 573
 574                         resizer.eventHandlers = true;
 575                 }
 576
 577                 resizer.resizing = true;
 578                 resizer.downX = e.screenX;
 579                 resizer.downY = e.screenY;
 580                 resizer.width = parseInt(resizeBox.style.width);
 581                 resizer.height = parseInt(resizeBox.style.height);
 582                 resizer.editorId = editor_id;
 583                 resizer.resizeBox = resizeBox;
 584                 resizer.horizontal = tinyMCE.getParam("theme_advanced_resize_horizontal", true);
 585         } else {
 586                 resizer.resizing = false;
 587                 resizeBox.style.display = "none";
 588                 editorArea.style.display = tinyMCE.isMSIE ? "block" : "table";
 589                 tinyMCE.execCommand('mceResetDesignMode');
 590         }
 591 }
 592
 593 function TinyMCE_advanced_initInstance(inst) {
 594         if (tinyMCE.getParam("theme_advanced_resizing", false)) {
 595                 var w = TinyMCE_advanced_getCookie("TinyMCE_" + inst.editorId + "_width");
 596                 var h = TinyMCE_advanced_getCookie("TinyMCE_" + inst.editorId + "_height");
 597
 598                 TinyMCE_advanced_resizeTo(inst, w, h, tinyMCE.getParam("theme_advanced_resize_horizontal", true));
 599         }
 600 }
 601
 602 function TinyMCE_advanced_setCookie(name, value, expires, path, domain, secure) {
 603         var curCookie = name + "=" + escape(value) +
 604                 ((expires) ? "; expires=" + expires.toGMTString() : "") +
 605                 ((path) ? "; path=" + escape(path) : "") +
 606                 ((domain) ? "; domain=" + domain : "") +
 607                 ((secure) ? "; secure" : "");
 608
 609         document.cookie = curCookie;
 610 }
 611
 612 function TinyMCE_advanced_getCookie(name) {
 613         var dc = document.cookie;
 614         var prefix = name + "=";
 615         var begin = dc.indexOf("; " + prefix);
 616
 617         if (begin == -1) {
 618                 begin = dc.indexOf(prefix);
 619
 620                 if (begin != 0)
 621                         return null;
 622         } else
 623                 begin += 2;
 624
 625         var end = document.cookie.indexOf(";", begin);
 626
 627         if (end == -1)
 628                 end = dc.length;
 629
 630         return unescape(dc.substring(begin + prefix.length, end));
 631 }
 632
 633 function TinyMCE_advanced_resizeTo(inst, w, h, set_w) {
 634         var editorContainer = document.getElementById(inst.editorId + '_parent');
 635         var tableElm = editorContainer.firstChild;
 636         var iframe = inst.iframeElement;
 637
 638         if (w == null || w == "null") {
 639                 set_w = false;
 640                 w = 0;
 641         }
 642
 643         if (h == null || h == "null")
 644                 return;
 645
 646         w = parseInt(w);
 647         h = parseInt(h);
 648
 649         if (tinyMCE.isGecko) {
 650                 w += 2;
 651                 h += 2;
 652         }
 653
 654         var dx = w - tableElm.clientWidth;
 655         var dy = h - tableElm.clientHeight;
 656
 657         if (set_w)
 658                 tableElm.style.width = w + "px";
 659
 660         tableElm.style.height = h + "px";
 661
 662         iw = iframe.clientWidth + dx;
 663         ih = iframe.clientHeight + dy;
 664
 665         if (tinyMCE.isGecko) {
 666                 iw -= 2;
 667                 ih -= 2;
 668         }
 669
 670         if (set_w)
 671                 iframe.style.width = iw + "px";
 672
 673         iframe.style.height = ih + "px";
 674
 675         // Is it to small, make it bigger again
 676         if (set_w) {
 677                 var tableBodyElm = tableElm.firstChild;
 678                 var minIframeWidth = tableBodyElm.scrollWidth;
 679                 if (inst.iframeElement.clientWidth < minIframeWidth) {
 680                         dx = minIframeWidth - inst.iframeElement.clientWidth;
 681
 682                         inst.iframeElement.style.width = (iw + dx) + "px";
 683                 }
 684         }
 685 }
 686
 687 /**
 688  * Handles resizing events.
 689  */
 690 function TinyMCE_advanced_resizeEventHandler(e) {
 691         var resizer = TinyMCE_advanced_resizer;
 692
 693         // Do nothing
 694         if (!resizer.resizing)
 695                 return;
 696
 697         e = typeof(e) == "undefined" ? window.event : e;
 698
 699         var dx = e.screenX - resizer.downX;
 700         var dy = e.screenY - resizer.downY;
 701         var resizeBox = resizer.resizeBox;
 702         var editorId = resizer.editorId;
 703
 704         switch (e.type) {
 705                 case "mousemove":
 706                         if (resizer.horizontal)
 707                                 resizeBox.style.width = (resizer.width + dx) + "px";
 708
 709                         resizeBox.style.height = (resizer.height + dy) + "px";
 710                         break;
 711
 712                 case "mouseup":
 713                         TinyMCE_advanced_setResizing(e, editorId, false);
 714                         TinyMCE_advanced_resizeTo(tinyMCE.getInstanceById(editorId), resizer.width + dx, resizer.height + dy, resizer.horizontal);
 715
 716                         // Expire in a month
 717                         var expires = new Date();
 718                         expires.setTime(expires.getTime() + 3600000 * 24 * 30);
 719
 720                         // Set the cookies
 721                         TinyMCE_advanced_setCookie("TinyMCE_" + editorId + "_width", "" + (resizer.horizontal ? resizer.width + dx : ""), expires);
 722                         TinyMCE_advanced_setCookie("TinyMCE_" + editorId + "_height", "" + (resizer.height + dy), expires);
 723                         break;
 724         }
 725 }
 726
 727 /**
 728  * Insert link template function.
 729  */
 730 function TinyMCE_advanced_getInsertLinkTemplate()
 731 {
 732         var template = new Array();
 733
 734         template['file'] = 'link.htm';
 735         template['width'] = 330;
 736         template['height'] = 170;
 737
 738         // Language specific width and height addons
 739         template['width'] += tinyMCE.getLang('lang_insert_link_delta_width', 0);
 740         template['height'] += tinyMCE.getLang('lang_insert_link_delta_height', 0);
 741
 742         return template;
 743 };
 744
 745 /**
 746  * Insert image template function.
 747  */
 748 function TinyMCE_advanced_getInsertImageTemplate()
 749 {
 750         var template = new Array();
 751
 752         template['file'] = 'image.htm?src={$src}';
 753         template['width'] = 340;
 754         template['height'] = 245;
 755
 756         // Language specific width and height addons
 757         template['width'] += tinyMCE.getLang('lang_insert_image_delta_width', 0);
 758         template['height'] += tinyMCE.getLang('lang_insert_image_delta_height', 0);
 759
 760         return template;
 761 };
 762
 763 /**
 764  * Node change handler.
 765  */
 766 function TinyMCE_advanced_handleNodeChange (editor_id, node, undo_index,
 767                                                                                                                           undo_levels, visual_aid, any_selection)
 768 {
 769         function selectByValue(select_elm, value)
 770         {
 771                 if (select_elm)
 772                 {
 773                         for (var i=0; i<select_elm.options.length; i++)
 774                         {
 775                                 if (select_elm.options[i].value == value)
 776                                 {
 777                                         select_elm.selectedIndex = i;
 778                                         return true;
 779                                 }
 780                         }
 781                 }
 782
 783                 return false;
 784         };
 785
 786         function getAttrib(elm, name)
 787         {
 788                 return elm.getAttribute(name) ? elm.getAttribute(name) : "";
 789         };
 790
 791         // No node provided
 792         if (node == null)
 793         {
 794                 return;
 795         }
 796
 797         // Update path
 798         var pathElm = document.getElementById(editor_id + "_path");
 799
 800         if (pathElm)
 801         {
 802                 // Get node path
 803                 var parentNode = node;
 804                 var path = new Array();
 805
 806                 while (parentNode)
 807                 {
 808                         if (parentNode.nodeName.toLowerCase() == "body")
 809                         {
 810                                 break;
 811                         }
 812
 813                         // Only append element nodes to path
 814                         if (parentNode.nodeType == 1)
 815                         {
 816                                 path[path.length] = parentNode;
 817                         }
 818
 819                         parentNode = parentNode.parentNode;
 820                 }
 821
 822                 // Setup HTML
 823                 var html = "";
 824                 for (var i=path.length-1; i>=0; i--)
 825                 {
 826                         var nodeName = path[i].nodeName.toLowerCase();
 827                         var nodeData = "";
 828
 829                         if (nodeName == "b")
 830                         {
 831                                 nodeName = "strong";
 832                         }
 833
 834                         if (nodeName == "i")
 835                         {
 836                                 nodeName = "em";
 837                         }
 838
 839                         if (getAttrib(path[i], 'id') != "")
 840                         {
 841                                 nodeData += "id: " + path[i].getAttribute('id') + " ";
 842                         }
 843
 844                         var className = tinyMCE.getVisualAidClass(tinyMCE.getAttrib(path[i], "class"), false);
 845                         if (className != "" && className.indexOf('mceItem') == -1)
 846                                 nodeData += "class: " + className + " ";
 847
 848                         if (getAttrib(path[i], 'src') != "")
 849                         {
 850                                 nodeData += "src: " + path[i].getAttribute('src') + " ";
 851                         }
 852
 853                         if (getAttrib(path[i], 'href') != "")
 854                         {
 855                                 nodeData += "href: " + path[i].getAttribute('href') + " ";
 856                         }
 857
 858                         if (nodeName == "img" && tinyMCE.getAttrib(path[i], "class").indexOf('mceItemFlash') != -1)
 859                         {
 860                                 nodeName = "flash";
 861                                 nodeData = "";
 862                         }
 863
 864                         if (nodeName == "a" && (anchor = tinyMCE.getAttrib(path[i], "name")) != "")
 865                         {
 866                                 nodeName = "a";
 867                                 nodeName += "#" + anchor;
 868                                 nodeData = "";
 869                         }
 870
 871                         if (getAttrib(path[i], 'name').indexOf("mce_") != 0)
 872                         {
 873                                 var className = tinyMCE.getVisualAidClass(tinyMCE.getAttrib(path[i], "class"), false);
 874                                 if (className != "" && className.indexOf('mceItem') == -1)
 875                                         nodeName += "." + className;
 876                         }
 877
 878                         if (tinyMCE.isMSIE)
 879                         {
 880                                 html += '<a title="' + nodeData + '" href="javascript:tinyMCE.execInstanceCommand(\'' + editor_id + '\',\'mceSelectNodeDepth\',false,\'' + i + '\');" onmousedown="return false;" target="_self" class="mcePathItem">' + nodeName + '</a>';
 881                         }
 882                         else
 883                         {
 884                                 html += '<a title="' + nodeData + '" href="javascript:tinyMCE.execInstanceCommand(\'' + editor_id + '\',\'mceSelectNodeDepth\',false,\'' + i + '\');" target="_self" class="mcePathItem">' + nodeName + '</a>';
 885                         }
 886
 887                         if (i > 0)
 888                         {
 889                                 html += " &raquo; ";
 890                         }
 891                 }
 892
 893                 pathElm.innerHTML = '<a href="#" accesskey="x"></a>' + tinyMCE.getLang('lang_theme_path') + ": " + html + '&nbsp;';
 894         }
 895
 896         // Reset old states
 897         tinyMCE.switchClassSticky(editor_id + '_justifyleft', 'mceButtonNormal');
 898         tinyMCE.switchClassSticky(editor_id + '_justifyright', 'mceButtonNormal');
 899         tinyMCE.switchClassSticky(editor_id + '_justifycenter', 'mceButtonNormal');
 900         tinyMCE.switchClassSticky(editor_id + '_justifyfull', 'mceButtonNormal');
 901         tinyMCE.switchClassSticky(editor_id + '_bold', 'mceButtonNormal');
 902         tinyMCE.switchClassSticky(editor_id + '_italic', 'mceButtonNormal');
 903         tinyMCE.switchClassSticky(editor_id + '_underline', 'mceButtonNormal');
 904         tinyMCE.switchClassSticky(editor_id + '_strikethrough', 'mceButtonNormal');
 905         tinyMCE.switchClassSticky(editor_id + '_bullist', 'mceButtonNormal');
 906         tinyMCE.switchClassSticky(editor_id + '_numlist', 'mceButtonNormal');
 907         tinyMCE.switchClassSticky(editor_id + '_sub', 'mceButtonNormal');
 908         tinyMCE.switchClassSticky(editor_id + '_sup', 'mceButtonNormal');
 909         tinyMCE.switchClassSticky(editor_id + '_anchor', 'mceButtonNormal');
 910         tinyMCE.switchClassSticky(editor_id + '_link', 'mceButtonDisabled', true);
 911         tinyMCE.switchClassSticky(editor_id + '_unlink', 'mceButtonDisabled', true);
 912         tinyMCE.switchClassSticky(editor_id + '_outdent', 'mceButtonDisabled', true);
 913         tinyMCE.switchClassSticky(editor_id + '_image', 'mceButtonNormal');
 914         tinyMCE.switchClassSticky(editor_id + '_hr', 'mceButtonNormal');
 915
 916         if (node.nodeName == "A" && tinyMCE.getAttrib(node, "class").indexOf('mceItemAnchor') != -1)
 917                 tinyMCE.switchClassSticky(editor_id + '_anchor', 'mceButtonSelected');
 918
 919         // Get link
 920         var anchorLink = tinyMCE.getParentElement(node, "a", "href");
 921
 922         if (anchorLink || any_selection)
 923         {
 924                 tinyMCE.switchClassSticky(editor_id + '_link', anchorLink ? 'mceButtonSelected' : 'mceButtonNormal', false);
 925                 tinyMCE.switchClassSticky(editor_id + '_unlink', anchorLink ? 'mceButtonSelected' : 'mceButtonNormal', false);
 926         }
 927
 928         // Handle visual aid
 929         tinyMCE.switchClassSticky(editor_id + '_visualaid', visual_aid ? 'mceButtonSelected' : 'mceButtonNormal', false);
 930
 931         if (undo_levels != -1)
 932         {
 933                 tinyMCE.switchClassSticky(editor_id + '_undo', 'mceButtonDisabled', true);
 934                 tinyMCE.switchClassSticky(editor_id + '_redo', 'mceButtonDisabled', true);
 935         }
 936
 937         // Within li, blockquote
 938         if (tinyMCE.getParentElement(node, "li,blockquote"))
 939         {
 940                 tinyMCE.switchClassSticky(editor_id + '_outdent', 'mceButtonNormal', false);
 941         }
 942
 943         // Has redo levels
 944         if (undo_index != -1 && (undo_index < undo_levels-1 && undo_levels > 0))
 945         {
 946                 tinyMCE.switchClassSticky(editor_id + '_redo', 'mceButtonNormal', false);
 947         }
 948
 949         // Has undo levels
 950         if (undo_index != -1 && (undo_index > 0 && undo_levels > 0))
 951         {
 952                 tinyMCE.switchClassSticky(editor_id + '_undo', 'mceButtonNormal', false);
 953         }
 954
 955         // Select class in select box
 956         var selectElm = document.getElementById(editor_id + "_styleSelect");
 957
 958         if (selectElm)
 959         {
 960                 TinyMCE_advanced_setupCSSClasses(editor_id);
 961
 962                 classNode = node;
 963                 breakOut = false;
 964                 var index = 0;
 965
 966                 do
 967                 {
 968                         if (classNode && classNode.className)
 969                         {
 970                                 for (var i=0; i<selectElm.options.length; i++)
 971                                 {
 972                                         if (selectElm.options[i].value == classNode.className)
 973                                         {
 974                                                 index = i;
 975                                                 breakOut = true;
 976                                                 break;
 977                                         }
 978                                 }
 979                         }
 980                 } while (!breakOut && classNode != null && (classNode = classNode.parentNode));
 981
 982                 selectElm.selectedIndex = index;
 983         }
 984
 985         // Select formatblock
 986         var selectElm = document.getElementById(editor_id + "_formatSelect");
 987
 988         if (selectElm)
 989         {
 990                 var elm = tinyMCE.getParentElement(node, "p,div,h1,h2,h3,h4,h5,h6,pre,address");
 991
 992                 if (elm)
 993                 {
 994                         selectByValue(selectElm, "<" + elm.nodeName.toLowerCase() + ">");
 995                 }
 996                 else
 997                 {
 998                         selectByValue(selectElm, "");
 999                 }
1000         }
1001
1002         // Select fontselect
1003         var selectElm = document.getElementById(editor_id + "_fontNameSelect");
1004         if (selectElm) {
1005                 var elm = tinyMCE.getParentElement(node);
1006
1007                 if (elm) {
1008                         var family = tinyMCE.getAttrib(elm, "face");
1009                         if (family == '')
1010                                 family = '' + elm.style.fontFamily;
1011
1012                         if (!selectByValue(selectElm, family))
1013                                 selectByValue(selectElm, "");
1014                 } else
1015                         selectByValue(selectElm, "");
1016         }
1017
1018         // Select fontsize
1019         var selectElm = document.getElementById(editor_id + "_fontSizeSelect");
1020         if (selectElm) {
1021                 var elm = tinyMCE.getParentElement(node);
1022
1023                 if (elm) {
1024                         var size = tinyMCE.getAttrib(elm, "size");
1025                         if (size == '') {
1026                                 var sizes = new Array('', '8px', '10px', '12px', '14px', '18px', '24px', '36px');
1027
1028                                 size = '' + elm.style.fontSize;
1029
1030                                 for (var i=0; i<sizes.length; i++) {
1031                                         if (('' + sizes[i]) == size) {
1032                                                 size = i;
1033                                                 break;
1034                                         }
1035                                 }
1036                         }
1037
1038                         if (!selectByValue(selectElm, size))
1039                                 selectByValue(selectElm, "");
1040                 } else
1041                         selectByValue(selectElm, "0");
1042         }
1043
1044         // Handle align attributes
1045         alignNode = node;
1046         breakOut = false;
1047         do
1048         {
1049                 if (!alignNode.getAttribute || !alignNode.getAttribute('align'))
1050                 {
1051                         continue;
1052                 }
1053
1054                 switch (alignNode.getAttribute('align').toLowerCase())
1055                 {
1056                         case "left":
1057                                 tinyMCE.switchClassSticky(editor_id + '_justifyleft', 'mceButtonSelected');
1058                                 breakOut = true;
1059                         break;
1060
1061                         case "right":
1062                                 tinyMCE.switchClassSticky(editor_id + '_justifyright', 'mceButtonSelected');
1063                                 breakOut = true;
1064                         break;
1065
1066                         case "middle":
1067                         case "center":
1068                                 tinyMCE.switchClassSticky(editor_id + '_justifycenter', 'mceButtonSelected');
1069                                 breakOut = true;
1070                         break;
1071
1072                         case "justify":
1073                                 tinyMCE.switchClassSticky(editor_id + '_justifyfull', 'mceButtonSelected');
1074                                 breakOut = true;
1075                         break;
1076                 }
1077         } while (!breakOut && (alignNode = alignNode.parentNode));
1078
1079         // Div justification
1080         var div = tinyMCE.getParentElement(node, "div");
1081         if (div && div.style.textAlign == "center")
1082                 tinyMCE.switchClassSticky(editor_id + '_justifycenter', 'mceButtonSelected');
1083
1084         // Do special text
1085         if (tinyMCE.isGecko && node.nodeType == 3)
1086         {
1087                 var inst = tinyMCE.getInstanceById(editor_id);
1088                 var doc = inst.getDoc();
1089
1090                 if (doc.queryCommandState("Bold"))
1091                 {
1092                         tinyMCE.switchClassSticky(editor_id + '_bold', 'mceButtonSelected');
1093                 }
1094
1095                 if (doc.queryCommandState("Italic"))
1096                 {
1097                         tinyMCE.switchClassSticky(editor_id + '_italic', 'mceButtonSelected');
1098                 }
1099
1100                 if (doc.queryCommandState("Underline") &&
1101                                                                                   (node.parentNode == null || node.parentNode.nodeName != "A"))
1102                 {
1103                         tinyMCE.switchClassSticky(editor_id + '_underline', 'mceButtonSelected');
1104                 }
1105
1106                 if (doc.queryCommandState("Strikethrough"))
1107                 {
1108                         tinyMCE.switchClassSticky(editor_id + '_strikethrough', 'mceButtonSelected');
1109                 }
1110         }
1111
1112         // Handle elements
1113         do
1114         {
1115                 switch (node.nodeName.toLowerCase())
1116                 {
1117                         case "b":
1118                         case "strong":
1119                                 tinyMCE.switchClassSticky(editor_id + '_bold', 'mceButtonSelected');
1120                         break;
1121
1122                         case "i":
1123                         case "em":
1124                                 tinyMCE.switchClassSticky(editor_id + '_italic', 'mceButtonSelected');
1125                         break;
1126
1127                         case "u":
1128                                 tinyMCE.switchClassSticky(editor_id + '_underline', 'mceButtonSelected');
1129                         break;
1130
1131                         case "strike":
1132                                 tinyMCE.switchClassSticky(editor_id + '_strikethrough', 'mceButtonSelected');
1133                         break;
1134
1135                         case "ul":
1136                                 tinyMCE.switchClassSticky(editor_id + '_bullist', 'mceButtonSelected');
1137                         break;
1138
1139                         case "ol":
1140                                 tinyMCE.switchClassSticky(editor_id + '_numlist', 'mceButtonSelected');
1141                         break;
1142
1143                         case "sub":
1144                                 tinyMCE.switchClassSticky(editor_id + '_sub', 'mceButtonSelected');
1145                         break;
1146
1147                         case "sup":
1148                                 tinyMCE.switchClassSticky(editor_id + '_sup', 'mceButtonSelected');
1149                         break;
1150
1151                         case "hr":
1152                                  tinyMCE.switchClassSticky(editor_id + '_hr', 'mceButtonSelected');
1153                         break;
1154
1155                         case "img":
1156                         if (getAttrib(node, 'name').indexOf('mce_') != 0)
1157                         {
1158                                 tinyMCE.switchClassSticky(editor_id + '_image', 'mceButtonSelected');
1159                         }
1160                         break;
1161                 }
1162         } while ((node = node.parentNode));
1163 };
1164
1165 // This function auto imports CSS classes into the class selection droplist
1166 function TinyMCE_advanced_setupCSSClasses(editor_id)
1167 {
1168         if (!TinyMCE_advanced_autoImportCSSClasses)
1169         {
1170                 return;
1171         }
1172
1173         var selectElm = document.getElementById(editor_id + '_styleSelect');
1174
1175         if (selectElm && selectElm.getAttribute('cssImported') != 'true')
1176         {
1177                 var csses = tinyMCE.getCSSClasses(editor_id);
1178                 if (csses && selectElm)
1179                 {
1180                         for (var i=0; i<csses.length; i++)
1181                         {
1182                                 selectElm.options[selectElm.length] = new Option(csses[i], csses[i]);
1183                         }
1184                 }
1185
1186                 // Only do this once
1187                 if (csses != null && csses.length > 0)
1188                 {
1189                         selectElm.setAttribute('cssImported', 'true');
1190                 }
1191         }
1192 };