1 /*
  2 Copyright (c) 2003-2012, CKSource - Frederico Knabben. All rights reserved.
  3 For licensing, see LICENSE.html or http://ckeditor.com/license
  4 */
  5 
  6 /**
  7  * @fileOverview Defines the {@link CKEDITOR.dom.element} class, which
  8  *		represents a DOM element.
  9  */
 10 
 11 /**
 12  * Represents a DOM element.
 13  * @constructor
 14  * @augments CKEDITOR.dom.node
 15  * @param {Object|String} element A native DOM element or the element name for
 16  *		new elements.
 17  * @param {CKEDITOR.dom.document} [ownerDocument] The document that will contain
 18  *		the element in case of element creation.
 19  * @example
 20  * // Create a new <span> element.
 21  * var element = new CKEDITOR.dom.element( 'span' );
 22  * @example
 23  * // Create an element based on a native DOM element.
 24  * var element = new CKEDITOR.dom.element( document.getElementById( 'myId' ) );
 25  */
 26 CKEDITOR.dom.element = function( element, ownerDocument )
 27 {
 28 	if ( typeof element == 'string' )
 29 		element = ( ownerDocument ? ownerDocument.$ : document ).createElement( element );
 30 
 31 	// Call the base constructor (we must not call CKEDITOR.dom.node).
 32 	CKEDITOR.dom.domObject.call( this, element );
 33 };
 34 
 35 // PACKAGER_RENAME( CKEDITOR.dom.element )
 36 
 37 /**
 38  * The the {@link CKEDITOR.dom.element} representing and element. If the
 39  * element is a native DOM element, it will be transformed into a valid
 40  * CKEDITOR.dom.element object.
 41  * @returns {CKEDITOR.dom.element} The transformed element.
 42  * @example
 43  * var element = new CKEDITOR.dom.element( 'span' );
 44  * alert( element == <b>CKEDITOR.dom.element.get( element )</b> );  "true"
 45  * @example
 46  * var element = document.getElementById( 'myElement' );
 47  * alert( <b>CKEDITOR.dom.element.get( element )</b>.getName() );  e.g. "p"
 48  */
 49 CKEDITOR.dom.element.get = function( element )
 50 {
 51 	return element && ( element.$ ? element : new CKEDITOR.dom.element( element ) );
 52 };
 53 
 54 CKEDITOR.dom.element.prototype = new CKEDITOR.dom.node();
 55 
 56 /**
 57  * Creates an instance of the {@link CKEDITOR.dom.element} class based on the
 58  * HTML representation of an element.
 59  * @param {String} html The element HTML. It should define only one element in
 60  *		the "root" level. The "root" element can have child nodes, but not
 61  *		siblings.
 62  * @returns {CKEDITOR.dom.element} The element instance.
 63  * @example
 64  * var element = <b>CKEDITOR.dom.element.createFromHtml( '<strong class="anyclass">My element</strong>' )</b>;
 65  * alert( element.getName() );  // "strong"
 66  */
 67 CKEDITOR.dom.element.createFromHtml = function( html, ownerDocument )
 68 {
 69 	var temp = new CKEDITOR.dom.element( 'div', ownerDocument );
 70 	temp.setHtml( html );
 71 
 72 	// When returning the node, remove it from its parent to detach it.
 73 	return temp.getFirst().remove();
 74 };
 75 
 76 CKEDITOR.dom.element.setMarker = function( database, element, name, value )
 77 {
 78 	var id = element.getCustomData( 'list_marker_id' ) ||
 79 			( element.setCustomData( 'list_marker_id', CKEDITOR.tools.getNextNumber() ).getCustomData( 'list_marker_id' ) ),
 80 		markerNames = element.getCustomData( 'list_marker_names' ) ||
 81 			( element.setCustomData( 'list_marker_names', {} ).getCustomData( 'list_marker_names' ) );
 82 	database[id] = element;
 83 	markerNames[name] = 1;
 84 
 85 	return element.setCustomData( name, value );
 86 };
 87 
 88 CKEDITOR.dom.element.clearAllMarkers = function( database )
 89 {
 90 	for ( var i in database )
 91 		CKEDITOR.dom.element.clearMarkers( database, database[i], 1 );
 92 };
 93 
 94 CKEDITOR.dom.element.clearMarkers = function( database, element, removeFromDatabase )
 95 {
 96 	var names = element.getCustomData( 'list_marker_names' ),
 97 		id = element.getCustomData( 'list_marker_id' );
 98 	for ( var i in names )
 99 		element.removeCustomData( i );
100 	element.removeCustomData( 'list_marker_names' );
101 	if ( removeFromDatabase )
102 	{
103 		element.removeCustomData( 'list_marker_id' );
104 		delete database[id];
105 	}
106 };
107 
108 ( function()
109 {
110 
111 CKEDITOR.tools.extend( CKEDITOR.dom.element.prototype,
112 	/** @lends CKEDITOR.dom.element.prototype */
113 	{
114 		/**
115 		 * The node type. This is a constant value set to
116 		 * {@link CKEDITOR.NODE_ELEMENT}.
117 		 * @type Number
118 		 * @example
119 		 */
120 		type : CKEDITOR.NODE_ELEMENT,
121 
122 		/**
123 		 * Adds a CSS class to the element. It appends the class to the
124 		 * already existing names.
125 		 * @param {String} className The name of the class to be added.
126 		 * @example
127 		 * var element = new CKEDITOR.dom.element( 'div' );
128 		 * element.addClass( 'classA' );  // <div class="classA">
129 		 * element.addClass( 'classB' );  // <div class="classA classB">
130 		 * element.addClass( 'classA' );  // <div class="classA classB">
131 		 */
132 		addClass : function( className )
133 		{
134 			var c = this.$.className;
135 			if ( c )
136 			{
137 				var regex = new RegExp( '(?:^|\\s)' + className + '(?:\\s|$)', '' );
138 				if ( !regex.test( c ) )
139 					c += ' ' + className;
140 			}
141 			this.$.className = c || className;
142 		},
143 
144 		/**
145 		 * Removes a CSS class name from the elements classes. Other classes
146 		 * remain untouched.
147 		 * @param {String} className The name of the class to remove.
148 		 * @example
149 		 * var element = new CKEDITOR.dom.element( 'div' );
150 		 * element.addClass( 'classA' );  // <div class="classA">
151 		 * element.addClass( 'classB' );  // <div class="classA classB">
152 		 * element.removeClass( 'classA' );  // <div class="classB">
153 		 * element.removeClass( 'classB' );  // <div>
154 		 */
155 		removeClass : function( className )
156 		{
157 			var c = this.getAttribute( 'class' );
158 			if ( c )
159 			{
160 				var regex = new RegExp( '(?:^|\\s+)' + className + '(?=\\s|$)', 'i' );
161 				if ( regex.test( c ) )
162 				{
163 					c = c.replace( regex, '' ).replace( /^\s+/, '' );
164 
165 					if ( c )
166 						this.setAttribute( 'class', c );
167 					else
168 						this.removeAttribute( 'class' );
169 				}
170 			}
171 		},
172 
173 		hasClass : function( className )
174 		{
175 			var regex = new RegExp( '(?:^|\\s+)' + className + '(?=\\s|$)', '' );
176 			return regex.test( this.getAttribute('class') );
177 		},
178 
179 		/**
180 		 * Append a node as a child of this element.
181 		 * @param {CKEDITOR.dom.node|String} node The node or element name to be
182 		 *		appended.
183 		 * @param {Boolean} [toStart] Indicates that the element is to be
184 		 *		appended at the start.
185 		 * @returns {CKEDITOR.dom.node} The appended node.
186 		 * @example
187 		 * var p = new CKEDITOR.dom.element( 'p' );
188 		 *
189 		 * var strong = new CKEDITOR.dom.element( 'strong' );
190 		 * <b>p.append( strong );</b>
191 		 *
192 		 * var em = <b>p.append( 'em' );</b>
193 		 *
194 		 * // result: "<p><strong></strong><em></em></p>"
195 		 */
196 		append : function( node, toStart )
197 		{
198 			if ( typeof node == 'string' )
199 				node = this.getDocument().createElement( node );
200 
201 			if ( toStart )
202 				this.$.insertBefore( node.$, this.$.firstChild );
203 			else
204 				this.$.appendChild( node.$ );
205 
206 			return node;
207 		},
208 
209 		appendHtml : function( html )
210 		{
211 			if ( !this.$.childNodes.length )
212 				this.setHtml( html );
213 			else
214 			{
215 				var temp = new CKEDITOR.dom.element( 'div', this.getDocument() );
216 				temp.setHtml( html );
217 				temp.moveChildren( this );
218 			}
219 		},
220 
221 		/**
222 		 * Append text to this element.
223 		 * @param {String} text The text to be appended.
224 		 * @returns {CKEDITOR.dom.node} The appended node.
225 		 * @example
226 		 * var p = new CKEDITOR.dom.element( 'p' );
227 		 * p.appendText( 'This is' );
228 		 * p.appendText( ' some text' );
229 		 *
230 		 * // result: "<p>This is some text</p>"
231 		 */
232 		appendText : function( text )
233 		{
234 			if ( this.$.text != undefined )
235 				this.$.text += text;
236 			else
237 				this.append( new CKEDITOR.dom.text( text ) );
238 		},
239 
240 		appendBogus : function()
241 		{
242 			var lastChild = this.getLast() ;
243 
244 			// Ignore empty/spaces text.
245 			while ( lastChild && lastChild.type == CKEDITOR.NODE_TEXT && !CKEDITOR.tools.rtrim( lastChild.getText() ) )
246 				lastChild = lastChild.getPrevious();
247 			if ( !lastChild || !lastChild.is || !lastChild.is( 'br' ) )
248 			{
249 				var bogus = CKEDITOR.env.opera ?
250 						this.getDocument().createText('') :
251 						this.getDocument().createElement( 'br' );
252 
253 				CKEDITOR.env.gecko && bogus.setAttribute( 'type', '_moz' );
254 
255 				this.append( bogus );
256 			}
257 		},
258 
259 		/**
260 		 * Breaks one of the ancestor element in the element position, moving
261 		 * this element between the broken parts.
262 		 * @param {CKEDITOR.dom.element} parent The anscestor element to get broken.
263 		 * @example
264 		 * // Before breaking:
265 		 * //     <b>This <i>is some<span /> sample</i> test text</b>
266 		 * // If "element" is <span /> and "parent" is <i>:
267 		 * //     <b>This <i>is some</i><span /><i> sample</i> test text</b>
268 		 * element.breakParent( parent );
269 		 * @example
270 		 * // Before breaking:
271 		 * //     <b>This <i>is some<span /> sample</i> test text</b>
272 		 * // If "element" is <span /> and "parent" is <b>:
273 		 * //     <b>This <i>is some</i></b><span /><b><i> sample</i> test text</b>
274 		 * element.breakParent( parent );
275 		 */
276 		breakParent : function( parent )
277 		{
278 			var range = new CKEDITOR.dom.range( this.getDocument() );
279 
280 			// We'll be extracting part of this element, so let's use our
281 			// range to get the correct piece.
282 			range.setStartAfter( this );
283 			range.setEndAfter( parent );
284 
285 			// Extract it.
286 			var docFrag = range.extractContents();
287 
288 			// Move the element outside the broken element.
289 			range.insertNode( this.remove() );
290 
291 			// Re-insert the extracted piece after the element.
292 			docFrag.insertAfterNode( this );
293 		},
294 
295 		contains :
296 			CKEDITOR.env.ie || CKEDITOR.env.webkit ?
297 				function( node )
298 				{
299 					var $ = this.$;
300 
301 					return node.type != CKEDITOR.NODE_ELEMENT ?
302 						$.contains( node.getParent().$ ) :
303 						$ != node.$ && $.contains( node.$ );
304 				}
305 			:
306 				function( node )
307 				{
308 					return !!( this.$.compareDocumentPosition( node.$ ) & 16 );
309 				},
310 
311 		/**
312 		 * Moves the selection focus to this element.
313 		 * @function
314 		 * @param  {Boolean} defer Whether to asynchronously defer the
315 		 * 		execution by 100 ms.
316 		 * @example
317 		 * var element = CKEDITOR.document.getById( 'myTextarea' );
318 		 * <b>element.focus()</b>;
319 		 */
320 		focus : ( function()
321 		{
322 			function exec()
323 			{
324 			// IE throws error if the element is not visible.
325 			try
326 			{
327 				this.$.focus();
328 			}
329 			catch (e)
330 			{}
331 			}
332 
333 			return function( defer )
334 			{
335 				if ( defer )
336 					CKEDITOR.tools.setTimeout( exec, 100, this );
337 				else
338 					exec.call( this );
339 			};
340 		})(),
341 
342 		/**
343 		 * Gets the inner HTML of this element.
344 		 * @returns {String} The inner HTML of this element.
345 		 * @example
346 		 * var element = CKEDITOR.dom.element.createFromHtml( '<div><b>Example</b></div>' );
347 		 * alert( <b>p.getHtml()</b> );  // "<b>Example</b>"
348 		 */
349 		getHtml : function()
350 		{
351 			var retval = this.$.innerHTML;
352 			// Strip <?xml:namespace> tags in IE. (#3341).
353 			return CKEDITOR.env.ie ? retval.replace( /<\?[^>]*>/g, '' ) : retval;
354 		},
355 
356 		getOuterHtml : function()
357 		{
358 			if ( this.$.outerHTML )
359 			{
360 				// IE includes the <?xml:namespace> tag in the outerHTML of
361 				// namespaced element. So, we must strip it here. (#3341)
362 				return this.$.outerHTML.replace( /<\?[^>]*>/, '' );
363 			}
364 
365 			var tmpDiv = this.$.ownerDocument.createElement( 'div' );
366 			tmpDiv.appendChild( this.$.cloneNode( true ) );
367 			return tmpDiv.innerHTML;
368 		},
369 
370 		/**
371 		 * Sets the inner HTML of this element.
372 		 * @param {String} html The HTML to be set for this element.
373 		 * @returns {String} The inserted HTML.
374 		 * @example
375 		 * var p = new CKEDITOR.dom.element( 'p' );
376 		 * <b>p.setHtml( '<b>Inner</b> HTML' );</b>
377 		 *
378 		 * // result: "<p><b>Inner</b> HTML</p>"
379 		 */
380 		setHtml : function( html )
381 		{
382 			return ( this.$.innerHTML = html );
383 		},
384 
385 		/**
386 		 * Sets the element contents as plain text.
387 		 * @param {String} text The text to be set.
388 		 * @returns {String} The inserted text.
389 		 * @example
390 		 * var element = new CKEDITOR.dom.element( 'div' );
391 		 * element.setText( 'A > B & C < D' );
392 		 * alert( element.innerHTML );  // "A &gt; B &amp; C &lt; D"
393 		 */
394 		setText : function( text )
395 		{
396 			CKEDITOR.dom.element.prototype.setText = ( this.$.innerText != undefined ) ?
397 				function ( text )
398 				{
399 					return this.$.innerText = text;
400 				} :
401 				function ( text )
402 				{
403 					return this.$.textContent = text;
404 				};
405 
406 			return this.setText( text );
407 		},
408 
409 		/**
410 		 * Gets the value of an element attribute.
411 		 * @function
412 		 * @param {String} name The attribute name.
413 		 * @returns {String} The attribute value or null if not defined.
414 		 * @example
415 		 * var element = CKEDITOR.dom.element.createFromHtml( '<input type="text" />' );
416 		 * alert( <b>element.getAttribute( 'type' )</b> );  // "text"
417 		 */
418 		getAttribute : (function()
419 		{
420 			var standard = function( name )
421 			{
422 				return this.$.getAttribute( name, 2 );
423 			};
424 
425 			if ( CKEDITOR.env.ie && ( CKEDITOR.env.ie7Compat || CKEDITOR.env.ie6Compat ) )
426 			{
427 				return function( name )
428 				{
429 					switch ( name )
430 					{
431 						case 'class':
432 							name = 'className';
433 							break;
434 
435 						case 'http-equiv':
436 							name = 'httpEquiv';
437 							break;
438 
439 						case 'name':
440 							return this.$.name;
441 
442 						case 'tabindex':
443 							var tabIndex = standard.call( this, name );
444 
445 							// IE returns tabIndex=0 by default for all
446 							// elements. For those elements,
447 							// getAtrribute( 'tabindex', 2 ) returns 32768
448 							// instead. So, we must make this check to give a
449 							// uniform result among all browsers.
450 							if ( tabIndex !== 0 && this.$.tabIndex === 0 )
451 								tabIndex = null;
452 
453 							return tabIndex;
454 							break;
455 
456 						case 'checked':
457 						{
458 							var attr = this.$.attributes.getNamedItem( name ),
459 								attrValue = attr.specified ? attr.nodeValue     // For value given by parser.
460 															 : this.$.checked;  // For value created via DOM interface.
461 
462 							return attrValue ? 'checked' : null;
463 						}
464 
465 						case 'hspace':
466 						case 'value':
467 							return this.$[ name ];
468 
469 						case 'style':
470 							// IE does not return inline styles via getAttribute(). See #2947.
471 							return this.$.style.cssText;
472 
473 						case 'contenteditable':
474 						case 'contentEditable':
475 							return this.$.attributes.getNamedItem( 'contentEditable' ).specified ?
476 									this.$.getAttribute( 'contentEditable' ) : null;
477 					}
478 
479 					return standard.call( this, name );
480 				};
481 			}
482 			else
483 				return standard;
484 		})(),
485 
486 		getChildren : function()
487 		{
488 			return new CKEDITOR.dom.nodeList( this.$.childNodes );
489 		},
490 
491 		/**
492 		 * Gets the current computed value of one of the element CSS style
493 		 * properties.
494 		 * @function
495 		 * @param {String} propertyName The style property name.
496 		 * @returns {String} The property value.
497 		 * @example
498 		 * var element = new CKEDITOR.dom.element( 'span' );
499 		 * alert( <b>element.getComputedStyle( 'display' )</b> );  // "inline"
500 		 */
501 		getComputedStyle :
502 			CKEDITOR.env.ie ?
503 				function( propertyName )
504 				{
505 					return this.$.currentStyle[ CKEDITOR.tools.cssStyleToDomStyle( propertyName ) ];
506 				}
507 			:
508 				function( propertyName )
509 				{
510 					var style = this.getWindow().$.getComputedStyle( this.$, null );
511 
512 					// Firefox may return null if we call the above on a hidden iframe. (#9117)
513 					return style ? style.getPropertyValue( propertyName ) : '';
514 				},
515 
516 		/**
517 		 * Gets the DTD entries for this element.
518 		 * @returns {Object} An object containing the list of elements accepted
519 		 *		by this element.
520 		 */
521 		getDtd : function()
522 		{
523 			var dtd = CKEDITOR.dtd[ this.getName() ];
524 
525 			this.getDtd = function()
526 			{
527 				return dtd;
528 			};
529 
530 			return dtd;
531 		},
532 
533 		getElementsByTag : CKEDITOR.dom.document.prototype.getElementsByTag,
534 
535 		/**
536 		 * Gets the computed tabindex for this element.
537 		 * @function
538 		 * @returns {Number} The tabindex value.
539 		 * @example
540 		 * var element = CKEDITOR.document.getById( 'myDiv' );
541 		 * alert( <b>element.getTabIndex()</b> );  // e.g. "-1"
542 		 */
543 		getTabIndex :
544 			CKEDITOR.env.ie ?
545 				function()
546 				{
547 					var tabIndex = this.$.tabIndex;
548 
549 					// IE returns tabIndex=0 by default for all elements. In
550 					// those cases we must check that the element really has
551 					// the tabindex attribute set to zero, or it is one of
552 					// those element that should have zero by default.
553 					if ( tabIndex === 0 && !CKEDITOR.dtd.$tabIndex[ this.getName() ] && parseInt( this.getAttribute( 'tabindex' ), 10 ) !== 0 )
554 						tabIndex = -1;
555 
556 						return tabIndex;
557 				}
558 			: CKEDITOR.env.webkit ?
559 				function()
560 				{
561 					var tabIndex = this.$.tabIndex;
562 
563 					// Safari returns "undefined" for elements that should not
564 					// have tabindex (like a div). So, we must try to get it
565 					// from the attribute.
566 					// https://bugs.webkit.org/show_bug.cgi?id=20596
567 					if ( tabIndex == undefined )
568 					{
569 						tabIndex = parseInt( this.getAttribute( 'tabindex' ), 10 );
570 
571 						// If the element don't have the tabindex attribute,
572 						// then we should return -1.
573 						if ( isNaN( tabIndex ) )
574 							tabIndex = -1;
575 					}
576 
577 					return tabIndex;
578 				}
579 			:
580 				function()
581 				{
582 					return this.$.tabIndex;
583 				},
584 
585 		/**
586 		 * Gets the text value of this element.
587 		 *
588 		 * Only in IE (which uses innerText), <br> will cause linebreaks,
589 		 * and sucessive whitespaces (including line breaks) will be reduced to
590 		 * a single space. This behavior is ok for us, for now. It may change
591 		 * in the future.
592 		 * @returns {String} The text value.
593 		 * @example
594 		 * var element = CKEDITOR.dom.element.createFromHtml( '<div>Sample <i>text</i>.</div>' );
595 		 * alert( <b>element.getText()</b> );  // "Sample text."
596 		 */
597 		getText : function()
598 		{
599 			return this.$.textContent || this.$.innerText || '';
600 		},
601 
602 		/**
603 		 * Gets the window object that contains this element.
604 		 * @returns {CKEDITOR.dom.window} The window object.
605 		 * @example
606 		 */
607 		getWindow : function()
608 		{
609 			return this.getDocument().getWindow();
610 		},
611 
612 		/**
613 		 * Gets the value of the "id" attribute of this element.
614 		 * @returns {String} The element id, or null if not available.
615 		 * @example
616 		 * var element = CKEDITOR.dom.element.createFromHtml( '<p id="myId"></p>' );
617 		 * alert( <b>element.getId()</b> );  // "myId"
618 		 */
619 		getId : function()
620 		{
621 			return this.$.id || null;
622 		},
623 
624 		/**
625 		 * Gets the value of the "name" attribute of this element.
626 		 * @returns {String} The element name, or null if not available.
627 		 * @example
628 		 * var element = CKEDITOR.dom.element.createFromHtml( '<input name="myName"></input>' );
629 		 * alert( <b>element.getNameAtt()</b> );  // "myName"
630 		 */
631 		getNameAtt : function()
632 		{
633 			return this.$.name || null;
634 		},
635 
636 		/**
637 		 * Gets the element name (tag name). The returned name is guaranteed to
638 		 * be always full lowercased.
639 		 * @returns {String} The element name.
640 		 * @example
641 		 * var element = new CKEDITOR.dom.element( 'span' );
642 		 * alert( <b>element.getName()</b> );  // "span"
643 		 */
644 		getName : function()
645 		{
646 			// Cache the lowercased name inside a closure.
647 			var nodeName = this.$.nodeName.toLowerCase();
648 
649 			if ( CKEDITOR.env.ie && ! ( document.documentMode > 8 ) )
650 			{
651 				var scopeName = this.$.scopeName;
652 				if ( scopeName != 'HTML' )
653 					nodeName = scopeName.toLowerCase() + ':' + nodeName;
654 			}
655 
656 			return (
657 			this.getName = function()
658 				{
659 					return nodeName;
660 				})();
661 		},
662 
663 		/**
664 		 * Gets the value set to this element. This value is usually available
665 		 * for form field elements.
666 		 * @returns {String} The element value.
667 		 */
668 		getValue : function()
669 		{
670 			return this.$.value;
671 		},
672 
673 		/**
674 		 * Gets the first child node of this element.
675 		 * @param {Function} evaluator Filtering the result node.
676 		 * @returns {CKEDITOR.dom.node} The first child node or null if not
677 		 *		available.
678 		 * @example
679 		 * var element = CKEDITOR.dom.element.createFromHtml( '<div><b>Example</b></div>' );
680 		 * var first = <b>element.getFirst()</b>;
681 		 * alert( first.getName() );  // "b"
682 		 */
683 		getFirst : function( evaluator )
684 		{
685 			var first = this.$.firstChild,
686 				retval = first && new CKEDITOR.dom.node( first );
687 			if ( retval && evaluator && !evaluator( retval ) )
688 				retval = retval.getNext( evaluator );
689 
690 			return retval;
691 		},
692 
693 		/**
694 		 * @param {Function} evaluator Filtering the result node.
695 		 */
696 		getLast : function( evaluator )
697 		{
698 			var last = this.$.lastChild,
699 				retval = last && new CKEDITOR.dom.node( last );
700 			if ( retval && evaluator && !evaluator( retval ) )
701 				retval = retval.getPrevious( evaluator );
702 
703 			return retval;
704 		},
705 
706 		getStyle : function( name )
707 		{
708 			return this.$.style[ CKEDITOR.tools.cssStyleToDomStyle( name ) ];
709 		},
710 
711 		/**
712 		 * Checks if the element name matches one or more names.
713 		 * @param {String} name[,name[,...]] One or more names to be checked.
714 		 * @returns {Boolean} true if the element name matches any of the names.
715 		 * @example
716 		 * var element = new CKEDITOR.element( 'span' );
717 		 * alert( <b>element.is( 'span' )</b> );  "true"
718 		 * alert( <b>element.is( 'p', 'span' )</b> );  "true"
719 		 * alert( <b>element.is( 'p' )</b> );  "false"
720 		 * alert( <b>element.is( 'p', 'div' )</b> );  "false"
721 		 */
722 		is : function()
723 		{
724 			var name = this.getName();
725 			for ( var i = 0 ; i < arguments.length ; i++ )
726 			{
727 				if ( arguments[ i ] == name )
728 					return true;
729 			}
730 			return false;
731 		},
732 
733 		/**
734 		 * Decide whether one element is able to receive cursor.
735 		 * @param {Boolean} [textCursor=true] Only consider element that could receive text child.
736 		 */
737 		isEditable : function( textCursor )
738 		{
739 			var name = this.getName();
740 
741 			if ( this.isReadOnly()
742 					|| this.getComputedStyle( 'display' ) == 'none'
743 					|| this.getComputedStyle( 'visibility' ) == 'hidden'
744 				 	|| this.is( 'a' ) && this.data( 'cke-saved-name' ) && !this.getChildCount()
745 					|| CKEDITOR.dtd.$nonEditable[ name ]
746 					|| CKEDITOR.dtd.$empty[ name ] )
747 			{
748 				return false;
749 			}
750 
751 			if ( textCursor !== false )
752 			{
753 				// Get the element DTD (defaults to span for unknown elements).
754 				var dtd = CKEDITOR.dtd[ name ] || CKEDITOR.dtd.span;
755 				// In the DTD # == text node.
756 				return ( dtd && dtd[ '#'] );
757 			}
758 
759 			return true;
760 		},
761 
762 		isIdentical : function( otherElement )
763 		{
764 			if ( this.getName() != otherElement.getName() )
765 				return false;
766 
767 			var thisAttribs = this.$.attributes,
768 				otherAttribs = otherElement.$.attributes;
769 
770 			var thisLength = thisAttribs.length,
771 				otherLength = otherAttribs.length;
772 
773 			for ( var i = 0 ; i < thisLength ; i++ )
774 			{
775 				var attribute = thisAttribs[ i ];
776 
777 				if ( attribute.nodeName == '_moz_dirty' )
778 					continue;
779 
780 				if ( ( !CKEDITOR.env.ie || ( attribute.specified && attribute.nodeName != 'data-cke-expando' ) ) && attribute.nodeValue != otherElement.getAttribute( attribute.nodeName ) )
781 					return false;
782 			}
783 
784 			// For IE, we have to for both elements, because it's difficult to
785 			// know how the atttibutes collection is organized in its DOM.
786 			if ( CKEDITOR.env.ie )
787 			{
788 				for ( i = 0 ; i < otherLength ; i++ )
789 				{
790 					attribute = otherAttribs[ i ];
791 					if ( attribute.specified && attribute.nodeName != 'data-cke-expando'
792 							&& attribute.nodeValue != this.getAttribute( attribute.nodeName ) )
793 						return false;
794 				}
795 			}
796 
797 			return true;
798 		},
799 
800 		/**
801 		 * Checks if this element is visible. May not work if the element is
802 		 * child of an element with visibility set to "hidden", but works well
803 		 * on the great majority of cases.
804 		 * @return {Boolean} True if the element is visible.
805 		 */
806 		isVisible : function()
807 		{
808 			var isVisible = ( this.$.offsetHeight || this.$.offsetWidth ) && this.getComputedStyle( 'visibility' ) != 'hidden',
809 				elementWindow,
810 				elementWindowFrame;
811 
812 			// Webkit and Opera report non-zero offsetHeight despite that
813 			// element is inside an invisible iframe. (#4542)
814 			if ( isVisible && ( CKEDITOR.env.webkit || CKEDITOR.env.opera ) )
815 			{
816 				elementWindow = this.getWindow();
817 
818 				if ( !elementWindow.equals( CKEDITOR.document.getWindow() )
819 						&& ( elementWindowFrame = elementWindow.$.frameElement ) )
820 				{
821 					isVisible = new CKEDITOR.dom.element( elementWindowFrame ).isVisible();
822 				}
823 			}
824 
825 			return !!isVisible;
826 		},
827 
828 		/**
829 		 * Whether it's an empty inline elements which has no visual impact when removed.
830 		 */
831 		isEmptyInlineRemoveable : function()
832 		{
833 			if ( !CKEDITOR.dtd.$removeEmpty[ this.getName() ] )
834 				return false;
835 
836 			var children = this.getChildren();
837 			for ( var i = 0, count = children.count(); i < count; i++ )
838 			{
839 				var child = children.getItem( i );
840 
841 				if ( child.type == CKEDITOR.NODE_ELEMENT && child.data( 'cke-bookmark' ) )
842 					continue;
843 
844 				if ( child.type == CKEDITOR.NODE_ELEMENT && !child.isEmptyInlineRemoveable()
845 					|| child.type == CKEDITOR.NODE_TEXT && CKEDITOR.tools.trim( child.getText() ) )
846 				{
847 					return false;
848 				}
849 			}
850 			return true;
851 		},
852 
853 		/**
854 		 * Checks if the element has any defined attributes.
855 		 * @function
856 		 * @returns {Boolean} True if the element has attributes.
857 		 * @example
858 		 * var element = CKEDITOR.dom.element.createFromHtml( '<div title="Test">Example</div>' );
859 		 * alert( <b>element.hasAttributes()</b> );  // "true"
860 		 * @example
861 		 * var element = CKEDITOR.dom.element.createFromHtml( '<div>Example</div>' );
862 		 * alert( <b>element.hasAttributes()</b> );  // "false"
863 		 */
864 		hasAttributes :
865 			CKEDITOR.env.ie && ( CKEDITOR.env.ie7Compat || CKEDITOR.env.ie6Compat ) ?
866 				function()
867 				{
868 					var attributes = this.$.attributes;
869 
870 					for ( var i = 0 ; i < attributes.length ; i++ )
871 					{
872 						var attribute = attributes[i];
873 
874 						switch ( attribute.nodeName )
875 						{
876 							case 'class' :
877 								// IE has a strange bug. If calling removeAttribute('className'),
878 								// the attributes collection will still contain the "class"
879 								// attribute, which will be marked as "specified", even if the
880 								// outerHTML of the element is not displaying the class attribute.
881 								// Note : I was not able to reproduce it outside the editor,
882 								// but I've faced it while working on the TC of #1391.
883 								if ( this.getAttribute( 'class' ) )
884 									return true;
885 
886 							// Attributes to be ignored.
887 							case 'data-cke-expando' :
888 								continue;
889 
890 							/*jsl:fallthru*/
891 
892 							default :
893 								if ( attribute.specified )
894 									return true;
895 						}
896 					}
897 
898 					return false;
899 				}
900 			:
901 				function()
902 				{
903 					var attrs = this.$.attributes,
904 						attrsNum = attrs.length;
905 
906 					// The _moz_dirty attribute might get into the element after pasting (#5455)
907 					var execludeAttrs = { 'data-cke-expando' : 1, _moz_dirty : 1 };
908 
909 					return attrsNum > 0 &&
910 						( attrsNum > 2 ||
911 							!execludeAttrs[ attrs[0].nodeName ] ||
912 							( attrsNum == 2 && !execludeAttrs[ attrs[1].nodeName ] ) );
913 				},
914 
915 		/**
916 		 * Checks if the specified attribute is defined for this element.
917 		 * @returns {Boolean} True if the specified attribute is defined.
918 		 * @param {String} name The attribute name.
919 		 * @example
920 		 */
921 		hasAttribute : (function()
922 		{
923 			function standard( name )
924 			{
925 				var $attr = this.$.attributes.getNamedItem( name );
926 				return !!( $attr && $attr.specified );
927 			}
928 
929 			return ( CKEDITOR.env.ie && CKEDITOR.env.version < 8 ) ?
930 					function( name )
931 					{
932 						// On IE < 8 the name attribute cannot be retrieved
933 						// right after the element creation and setting the
934 						// name with setAttribute.
935 						if ( name == 'name' )
936 							return !!this.$.name;
937 
938 						return standard.call( this, name );
939 					}
940 				:
941 					standard;
942 		})(),
943 
944 		/**
945 		 * Hides this element (display:none).
946 		 * @example
947 		 * var element = CKEDITOR.dom.element.getById( 'myElement' );
948 		 * <b>element.hide()</b>;
949 		 */
950 		hide : function()
951 		{
952 			this.setStyle( 'display', 'none' );
953 		},
954 
955 		moveChildren : function( target, toStart )
956 		{
957 			var $ = this.$;
958 			target = target.$;
959 
960 			if ( $ == target )
961 				return;
962 
963 			var child;
964 
965 			if ( toStart )
966 			{
967 				while ( ( child = $.lastChild ) )
968 					target.insertBefore( $.removeChild( child ), target.firstChild );
969 			}
970 			else
971 			{
972 				while ( ( child = $.firstChild ) )
973 					target.appendChild( $.removeChild( child ) );
974 			}
975 		},
976 
977 		/**
978 		 * Merges sibling elements that are identical to this one.<br>
979 		 * <br>
980 		 * Identical child elements are also merged. For example:<br>
981 		 * <b><i></i></b><b><i></i></b> => <b><i></i></b>
982 		 * @function
983 		 * @param {Boolean} [inlineOnly] Allow only inline elements to be merged. Defaults to "true".
984 		 */
985 		mergeSiblings : ( function()
986 		{
987 			function mergeElements( element, sibling, isNext )
988 			{
989 				if ( sibling && sibling.type == CKEDITOR.NODE_ELEMENT )
990 				{
991 					// Jumping over bookmark nodes and empty inline elements, e.g. <b><i></i></b>,
992 					// queuing them to be moved later. (#5567)
993 					var pendingNodes = [];
994 
995 					while ( sibling.data( 'cke-bookmark' )
996 						|| sibling.isEmptyInlineRemoveable() )
997 					{
998 						pendingNodes.push( sibling );
999 						sibling = isNext ? sibling.getNext() : sibling.getPrevious();
1000 						if ( !sibling || sibling.type != CKEDITOR.NODE_ELEMENT )
1001 							return;
1002 					}
1003 
1004 					if ( element.isIdentical( sibling ) )
1005 					{
1006 						// Save the last child to be checked too, to merge things like
1007 						// <b><i></i></b><b><i></i></b> => <b><i></i></b>
1008 						var innerSibling = isNext ? element.getLast() : element.getFirst();
1009 
1010 						// Move pending nodes first into the target element.
1011 						while( pendingNodes.length )
1012 							pendingNodes.shift().move( element, !isNext );
1013 
1014 						sibling.moveChildren( element, !isNext );
1015 						sibling.remove();
1016 
1017 						// Now check the last inner child (see two comments above).
1018 						if ( innerSibling && innerSibling.type == CKEDITOR.NODE_ELEMENT )
1019 							innerSibling.mergeSiblings();
1020 					}
1021 				}
1022 			}
1023 
1024 			return function( inlineOnly )
1025 				{
1026 					if ( ! ( inlineOnly === false
1027 							|| CKEDITOR.dtd.$removeEmpty[ this.getName() ]
1028 							|| this.is( 'a' ) ) )	// Merge empty links and anchors also. (#5567)
1029 					{
1030 						return;
1031 					}
1032 
1033 					mergeElements( this, this.getNext(), true );
1034 					mergeElements( this, this.getPrevious() );
1035 				};
1036 		} )(),
1037 
1038 		/**
1039 		 * Shows this element (display it).
1040 		 * @example
1041 		 * var element = CKEDITOR.dom.element.getById( 'myElement' );
1042 		 * <b>element.show()</b>;
1043 		 */
1044 		show : function()
1045 		{
1046 			this.setStyles(
1047 				{
1048 					display : '',
1049 					visibility : ''
1050 				});
1051 		},
1052 
1053 		/**
1054 		 * Sets the value of an element attribute.
1055 		 * @param {String} name The name of the attribute.
1056 		 * @param {String} value The value to be set to the attribute.
1057 		 * @function
1058 		 * @returns {CKEDITOR.dom.element} This element instance.
1059 		 * @example
1060 		 * var element = CKEDITOR.dom.element.getById( 'myElement' );
1061 		 * <b>element.setAttribute( 'class', 'myClass' )</b>;
1062 		 * <b>element.setAttribute( 'title', 'This is an example' )</b>;
1063 		 */
1064 		setAttribute : (function()
1065 		{
1066 			var standard = function( name, value )
1067 			{
1068 				this.$.setAttribute( name, value );
1069 				return this;
1070 			};
1071 
1072 			if ( CKEDITOR.env.ie && ( CKEDITOR.env.ie7Compat || CKEDITOR.env.ie6Compat ) )
1073 			{
1074 				return function( name, value )
1075 				{
1076 					if ( name == 'class' )
1077 						this.$.className = value;
1078 					else if ( name == 'style' )
1079 						this.$.style.cssText = value;
1080 					else if ( name == 'tabindex' )	// Case sensitive.
1081 						this.$.tabIndex = value;
1082 					else if ( name == 'checked' )
1083 						this.$.checked = value;
1084 					else if ( name == 'contenteditable' )
1085 						standard.call( this, 'contentEditable', value );
1086 					else
1087 						standard.apply( this, arguments );
1088 					return this;
1089 				};
1090 			}
1091 			else if ( CKEDITOR.env.ie8Compat && CKEDITOR.env.secure )
1092 			{
1093 				return function( name, value )
1094 				{
1095 					// IE8 throws error when setting src attribute to non-ssl value. (#7847)
1096 					if ( name == 'src' && value.match( /^http:\/\// ) )
1097 						try { standard.apply( this, arguments ); } catch( e ){}
1098 					else
1099 						standard.apply( this, arguments );
1100 					return this;
1101 				};
1102 			}
1103 			else
1104 				return standard;
1105 		})(),
1106 
1107 		/**
1108 		 * Sets the value of several element attributes.
1109 		 * @param {Object} attributesPairs An object containing the names and
1110 		 *		values of the attributes.
1111 		 * @returns {CKEDITOR.dom.element} This element instance.
1112 		 * @example
1113 		 * var element = CKEDITOR.dom.element.getById( 'myElement' );
1114 		 * <b>element.setAttributes({
1115 		 *     'class' : 'myClass',
1116 		 *     'title' : 'This is an example' })</b>;
1117 		 */
1118 		setAttributes : function( attributesPairs )
1119 		{
1120 			for ( var name in attributesPairs )
1121 				this.setAttribute( name, attributesPairs[ name ] );
1122 			return this;
1123 		},
1124 
1125 		/**
1126 		 * Sets the element value. This function is usually used with form
1127 		 * field element.
1128 		 * @param {String} value The element value.
1129 		 * @returns {CKEDITOR.dom.element} This element instance.
1130 		 */
1131 		setValue : function( value )
1132 		{
1133 			this.$.value = value;
1134 			return this;
1135 		},
1136 
1137 		/**
1138 		 * Removes an attribute from the element.
1139 		 * @param {String} name The attribute name.
1140 		 * @function
1141 		 * @example
1142 		 * var element = CKEDITOR.dom.element.createFromHtml( '<div class="classA"></div>' );
1143 		 * element.removeAttribute( 'class' );
1144 		 */
1145 		removeAttribute : (function()
1146 		{
1147 			var standard = function( name )
1148 			{
1149 				this.$.removeAttribute( name );
1150 			};
1151 
1152 			if ( CKEDITOR.env.ie && ( CKEDITOR.env.ie7Compat || CKEDITOR.env.ie6Compat ) )
1153 			{
1154 				return function( name )
1155 				{
1156 					if ( name == 'class' )
1157 						name = 'className';
1158 					else if ( name == 'tabindex' )
1159 						name = 'tabIndex';
1160 					else if ( name == 'contenteditable' )
1161 						name = 'contentEditable';
1162 					standard.call( this, name );
1163 				};
1164 			}
1165 			else
1166 				return standard;
1167 		})(),
1168 
1169 		removeAttributes : function ( attributes )
1170 		{
1171 			if ( CKEDITOR.tools.isArray( attributes ) )
1172 			{
1173 				for ( var i = 0 ; i < attributes.length ; i++ )
1174 					this.removeAttribute( attributes[ i ] );
1175 			}
1176 			else
1177 			{
1178 				for ( var attr in attributes )
1179 					attributes.hasOwnProperty( attr ) && this.removeAttribute( attr );
1180 			}
1181 		},
1182 
1183 		/**
1184 		 * Removes a style from the element.
1185 		 * @param {String} name The style name.
1186 		 * @function
1187 		 * @example
1188 		 * var element = CKEDITOR.dom.element.createFromHtml( '<div style="display:none"></div>' );
1189 		 * element.removeStyle( 'display' );
1190 		 */
1191 		removeStyle : function( name )
1192 		{
1193 			// Removes the specified property from the current style object.
1194 			var $ = this.$.style;
1195 
1196 			// "removeProperty" need to be specific on the following styles.
1197 			if ( !$.removeProperty && ( name == 'border' || name == 'margin' || name == 'padding' ) )
1198 			{
1199 				var names = expandedRules( name );
1200 				for ( var i = 0 ; i < names.length ; i++ )
1201 					this.removeStyle( names[ i ] );
1202 				return;
1203 			}
1204 
1205 			$.removeProperty ? $.removeProperty( name ) : $.removeAttribute( CKEDITOR.tools.cssStyleToDomStyle( name ) );
1206 
1207 			if ( !this.$.style.cssText )
1208 				this.removeAttribute( 'style' );
1209 		},
1210 
1211 		/**
1212 		 * Sets the value of an element style.
1213 		 * @param {String} name The name of the style. The CSS naming notation
1214 		 *		must be used (e.g. "background-color").
1215 		 * @param {String} value The value to be set to the style.
1216 		 * @returns {CKEDITOR.dom.element} This element instance.
1217 		 * @example
1218 		 * var element = CKEDITOR.dom.element.getById( 'myElement' );
1219 		 * <b>element.setStyle( 'background-color', '#ff0000' )</b>;
1220 		 * <b>element.setStyle( 'margin-top', '10px' )</b>;
1221 		 * <b>element.setStyle( 'float', 'right' )</b>;
1222 		 */
1223 		setStyle : function( name, value )
1224 		{
1225 			this.$.style[ CKEDITOR.tools.cssStyleToDomStyle( name ) ] = value;
1226 			return this;
1227 		},
1228 
1229 		/**
1230 		 * Sets the value of several element styles.
1231 		 * @param {Object} stylesPairs An object containing the names and
1232 		 *		values of the styles.
1233 		 * @returns {CKEDITOR.dom.element} This element instance.
1234 		 * @example
1235 		 * var element = CKEDITOR.dom.element.getById( 'myElement' );
1236 		 * <b>element.setStyles({
1237 		 *     'position' : 'absolute',
1238 		 *     'float' : 'right' })</b>;
1239 		 */
1240 		setStyles : function( stylesPairs )
1241 		{
1242 			for ( var name in stylesPairs )
1243 				this.setStyle( name, stylesPairs[ name ] );
1244 			return this;
1245 		},
1246 
1247 		/**
1248 		 * Sets the opacity of an element.
1249 		 * @param {Number} opacity A number within the range [0.0, 1.0].
1250 		 * @example
1251 		 * var element = CKEDITOR.dom.element.getById( 'myElement' );
1252 		 * <b>element.setOpacity( 0.75 )</b>;
1253 		 */
1254 		setOpacity : function( opacity )
1255 		{
1256 			if ( CKEDITOR.env.ie && CKEDITOR.env.version < 9 )
1257 			{
1258 				opacity = Math.round( opacity * 100 );
1259 				this.setStyle( 'filter', opacity >= 100 ? '' : 'progid:DXImageTransform.Microsoft.Alpha(opacity=' + opacity + ')' );
1260 			}
1261 			else
1262 				this.setStyle( 'opacity', opacity );
1263 		},
1264 
1265 		/**
1266 		 * Makes the element and its children unselectable.
1267 		 * @function
1268 		 * @example
1269 		 * var element = CKEDITOR.dom.element.getById( 'myElement' );
1270 		 * element.unselectable();
1271 		 */
1272 		unselectable :
1273 			CKEDITOR.env.gecko ?
1274 				function()
1275 				{
1276 					this.$.style.MozUserSelect = 'none';
1277 					this.on( 'dragstart', function( evt ) { evt.data.preventDefault(); } );
1278 				}
1279 			: CKEDITOR.env.webkit ?
1280 				function()
1281 				{
1282 					this.$.style.KhtmlUserSelect = 'none';
1283 					this.on( 'dragstart', function( evt ) { evt.data.preventDefault(); } );
1284 				}
1285 			:
1286 				function()
1287 				{
1288 					if ( CKEDITOR.env.ie || CKEDITOR.env.opera )
1289 					{
1290 						var element = this.$,
1291 							elements = element.getElementsByTagName("*"),
1292 							e,
1293 							i = 0;
1294 
1295 						element.unselectable = 'on';
1296 
1297 						while ( ( e = elements[ i++ ] ) )
1298 						{
1299 							switch ( e.tagName.toLowerCase() )
1300 							{
1301 								case 'iframe' :
1302 								case 'textarea' :
1303 								case 'input' :
1304 								case 'select' :
1305 									/* Ignore the above tags */
1306 									break;
1307 								default :
1308 									e.unselectable = 'on';
1309 							}
1310 						}
1311 					}
1312 				},
1313 
1314 		getPositionedAncestor : function()
1315 		{
1316 			var current = this;
1317 			while ( current.getName() != 'html' )
1318 			{
1319 				if ( current.getComputedStyle( 'position' ) != 'static' )
1320 					return current;
1321 
1322 				current = current.getParent();
1323 			}
1324 			return null;
1325 		},
1326 
1327 		getDocumentPosition : function( refDocument )
1328 		{
1329 			var x = 0, y = 0,
1330 				doc = this.getDocument(),
1331 				body = doc.getBody(),
1332 				quirks = doc.$.compatMode == 'BackCompat';
1333 
1334 			if ( document.documentElement[ "getBoundingClientRect" ] )
1335 			{
1336 				var box  = this.$.getBoundingClientRect(),
1337 					$doc = doc.$,
1338 					$docElem = $doc.documentElement;
1339 
1340 				var clientTop = $docElem.clientTop || body.$.clientTop || 0,
1341 					clientLeft = $docElem.clientLeft || body.$.clientLeft || 0,
1342 					needAdjustScrollAndBorders = true;
1343 
1344 				/*
1345 				 * #3804: getBoundingClientRect() works differently on IE and non-IE
1346 				 * browsers, regarding scroll positions.
1347 				 *
1348 				 * On IE, the top position of the <html> element is always 0, no matter
1349 				 * how much you scrolled down.
1350 				 *
1351 				 * On other browsers, the top position of the <html> element is negative
1352 				 * scrollTop.
1353 				 */
1354 				if ( CKEDITOR.env.ie )
1355 				{
1356 					var inDocElem = doc.getDocumentElement().contains( this ),
1357 						inBody = doc.getBody().contains( this );
1358 
1359 					needAdjustScrollAndBorders = ( quirks && inBody ) || ( !quirks && inDocElem );
1360 				}
1361 
1362 				if ( needAdjustScrollAndBorders )
1363 				{
1364 					x = box.left + ( !quirks && $docElem.scrollLeft || body.$.scrollLeft );
1365 					x -= clientLeft;
1366 					y = box.top  + ( !quirks && $docElem.scrollTop || body.$.scrollTop );
1367 					y -= clientTop;
1368 				}
1369 			}
1370 			else
1371  			{
1372 				var current = this, previous = null, offsetParent;
1373 				while ( current && !( current.getName() == 'body' || current.getName() == 'html' ) )
1374 				{
1375 					x += current.$.offsetLeft - current.$.scrollLeft;
1376 					y += current.$.offsetTop - current.$.scrollTop;
1377 
1378 					// Opera includes clientTop|Left into offsetTop|Left.
1379 					if ( !current.equals( this ) )
1380 					{
1381 						x += ( current.$.clientLeft || 0 );
1382 						y += ( current.$.clientTop || 0 );
1383 					}
1384 
1385 					var scrollElement = previous;
1386 					while ( scrollElement && !scrollElement.equals( current ) )
1387 					{
1388 						x -= scrollElement.$.scrollLeft;
1389 						y -= scrollElement.$.scrollTop;
1390 						scrollElement = scrollElement.getParent();
1391 					}
1392 
1393 					previous = current;
1394 					current = ( offsetParent = current.$.offsetParent ) ?
1395 					          new CKEDITOR.dom.element( offsetParent ) : null;
1396 				}
1397 			}
1398 
1399 			if ( refDocument )
1400 			{
1401 				var currentWindow = this.getWindow(),
1402 					refWindow = refDocument.getWindow();
1403 
1404 				if ( !currentWindow.equals( refWindow ) && currentWindow.$.frameElement )
1405 				{
1406 					var iframePosition = ( new CKEDITOR.dom.element( currentWindow.$.frameElement ) ).getDocumentPosition( refDocument );
1407 
1408 					x += iframePosition.x;
1409 					y += iframePosition.y;
1410 				}
1411 			}
1412 
1413 			if ( !document.documentElement[ "getBoundingClientRect" ] )
1414 			{
1415 				// In Firefox, we'll endup one pixel before the element positions,
1416 				// so we must add it here.
1417 				if ( CKEDITOR.env.gecko && !quirks )
1418 				{
1419 					x += this.$.clientLeft ? 1 : 0;
1420 					y += this.$.clientTop ? 1 : 0;
1421 				}
1422 			}
1423 
1424 			return { x : x, y : y };
1425 		},
1426 
1427 		/**
1428 		 * Make any page element visible inside the browser viewport.
1429 		 * @param {Boolean} [alignToTop]
1430 		 */
1431 		scrollIntoView : function( alignToTop )
1432 		{
1433 			var parent = this.getParent();
1434 			if ( !parent ) return;
1435 
1436 			// Scroll the element into parent container from the inner out.
1437 			do
1438 			{
1439 				// Check ancestors that overflows.
1440 				var overflowed =
1441 					parent.$.clientWidth && parent.$.clientWidth < parent.$.scrollWidth
1442 					|| parent.$.clientHeight && parent.$.clientHeight < parent.$.scrollHeight;
1443 
1444 				if ( overflowed )
1445 					this.scrollIntoParent( parent, alignToTop, 1 );
1446 
1447 				// Walk across the frame.
1448 				if ( parent.is( 'html' ) )
1449 				{
1450 					var win = parent.getWindow();
1451 
1452 					// Avoid security error.
1453 					try
1454 					{
1455 						var iframe = win.$.frameElement;
1456 						iframe && ( parent = new CKEDITOR.dom.element( iframe ) );
1457 					}
1458 					catch(er){}
1459 				}
1460 			}
1461 			while ( ( parent = parent.getParent() ) );
1462 		},
1463 
1464 		/**
1465 		 * Make any page element visible inside one of the ancestors by scrolling the parent.
1466 		 * @param {CKEDITOR.dom.element|CKEDITOR.dom.window} parent The container to scroll into.
1467 		 * @param {Boolean} [alignToTop] Align the element's top side with the container's
1468 		 * when <code>true</code> is specified; align the bottom with viewport bottom when
1469 		 * <code>false</code> is specified. Otherwise scroll on either side with the minimum
1470 		 * amount to show the element.
1471 		 * @param {Boolean} [hscroll] Whether horizontal overflow should be considered.
1472 		 */
1473 		scrollIntoParent : function( parent, alignToTop, hscroll )
1474 		{
1475 			!parent && ( parent = this.getWindow() );
1476 
1477 			var doc = parent.getDocument();
1478 			var isQuirks = doc.$.compatMode == 'BackCompat';
1479 
1480 			// On window <html> is scrolled while quirks scrolls <body>.
1481 			if ( parent instanceof CKEDITOR.dom.window )
1482 				parent = isQuirks ? doc.getBody() : doc.getDocumentElement();
1483 
1484 			// Scroll the parent by the specified amount.
1485 			function scrollBy( x, y )
1486 			{
1487 				// Webkit doesn't support "scrollTop/scrollLeft"
1488 				// on documentElement/body element.
1489 				if ( /body|html/.test( parent.getName() ) )
1490 					parent.getWindow().$.scrollBy( x, y );
1491 				else
1492 				{
1493 					parent.$[ 'scrollLeft' ] += x;
1494 					parent.$[ 'scrollTop' ] += y;
1495 				}
1496 			}
1497 
1498 			// Figure out the element position relative to the specified window.
1499 			function screenPos( element, refWin )
1500 			{
1501 				var pos = { x: 0, y: 0 };
1502 
1503 				if ( !( element.is( isQuirks ? 'body' : 'html' ) ) )
1504 				{
1505 					var box = element.$.getBoundingClientRect();
1506 					pos.x = box.left, pos.y = box.top;
1507 				}
1508 
1509 				var win = element.getWindow();
1510 				if ( !win.equals( refWin ) )
1511 				{
1512 					var outerPos = screenPos( CKEDITOR.dom.element.get( win.$.frameElement ), refWin );
1513 					pos.x += outerPos.x, pos.y += outerPos.y;
1514 				}
1515 
1516 				return pos;
1517 			}
1518 
1519 			// calculated margin size.
1520 			function margin( element, side )
1521 			{
1522 				return parseInt( element.getComputedStyle( 'margin-' + side ) || 0, 10 ) || 0;
1523 			}
1524 
1525 			var win = parent.getWindow();
1526 
1527 			var thisPos = screenPos( this, win ),
1528 				parentPos = screenPos( parent, win ),
1529 				eh = this.$.offsetHeight,
1530 				ew = this.$.offsetWidth,
1531 				ch = parent.$.clientHeight,
1532 				cw = parent.$.clientWidth,
1533 				lt,
1534 				br;
1535 
1536 			// Left-top margins.
1537 			lt =
1538 			{
1539 				x : thisPos.x - margin( this, 'left' ) - parentPos.x || 0,
1540 				y : thisPos.y - margin( this, 'top' ) - parentPos.y|| 0
1541 			};
1542 
1543 			// Bottom-right margins.
1544 			br =
1545 			{
1546 				x : thisPos.x + ew + margin( this, 'right' ) - ( ( parentPos.x ) + cw ) || 0,
1547 				y : thisPos.y + eh + margin( this, 'bottom' ) - ( ( parentPos.y ) + ch ) || 0
1548 			};
1549 
1550 			// 1. Do the specified alignment as much as possible;
1551 			// 2. Otherwise be smart to scroll only the minimum amount;
1552 			// 3. Never cut at the top;
1553 			// 4. DO NOT scroll when already visible.
1554 			if ( lt.y < 0 || br.y > 0 )
1555 			{
1556 				scrollBy( 0,
1557 						  alignToTop === true ? lt.y :
1558 						  alignToTop === false ? br.y :
1559 						  lt.y < 0 ? lt.y : br.y );
1560 			}
1561 
1562 			if ( hscroll && ( lt.x < 0 || br.x > 0 ) )
1563 				scrollBy( lt.x < 0 ? lt.x : br.x, 0 );
1564 		},
1565 
1566 		setState : function( state )
1567 		{
1568 			switch ( state )
1569 			{
1570 				case CKEDITOR.TRISTATE_ON :
1571 					this.addClass( 'cke_on' );
1572 					this.removeClass( 'cke_off' );
1573 					this.removeClass( 'cke_disabled' );
1574 					break;
1575 				case CKEDITOR.TRISTATE_DISABLED :
1576 					this.addClass( 'cke_disabled' );
1577 					this.removeClass( 'cke_off' );
1578 					this.removeClass( 'cke_on' );
1579 					break;
1580 				default :
1581 					this.addClass( 'cke_off' );
1582 					this.removeClass( 'cke_on' );
1583 					this.removeClass( 'cke_disabled' );
1584 					break;
1585 			}
1586 		},
1587 
1588 		/**
1589 		 * Returns the inner document of this IFRAME element.
1590 		 * @returns {CKEDITOR.dom.document} The inner document.
1591 		 */
1592 		getFrameDocument : function()
1593 		{
1594 			var $ = this.$;
1595 
1596 			try
1597 			{
1598 				// In IE, with custom document.domain, it may happen that
1599 				// the iframe is not yet available, resulting in "Access
1600 				// Denied" for the following property access.
1601 				$.contentWindow.document;
1602 			}
1603 			catch ( e )
1604 			{
1605 				// Trick to solve this issue, forcing the iframe to get ready
1606 				// by simply setting its "src" property.
1607 				$.src = $.src;
1608 
1609 				// In IE6 though, the above is not enough, so we must pause the
1610 				// execution for a while, giving it time to think.
1611 				if ( CKEDITOR.env.ie && CKEDITOR.env.version < 7 )
1612 				{
1613 					window.showModalDialog(
1614 						'javascript:document.write("' +
1615 							'<script>' +
1616 								'window.setTimeout(' +
1617 									'function(){window.close();}' +
1618 									',50);' +
1619 							'</script>")' );
1620 				}
1621 			}
1622 
1623 			return $ && new CKEDITOR.dom.document( $.contentWindow.document );
1624 		},
1625 
1626 		/**
1627 		 * Copy all the attributes from one node to the other, kinda like a clone
1628 		 * skipAttributes is an object with the attributes that must NOT be copied.
1629 		 * @param {CKEDITOR.dom.element} dest The destination element.
1630 		 * @param {Object} skipAttributes A dictionary of attributes to skip.
1631 		 * @example
1632 		 */
1633 		copyAttributes : function( dest, skipAttributes )
1634 		{
1635 			var attributes = this.$.attributes;
1636 			skipAttributes = skipAttributes || {};
1637 
1638 			for ( var n = 0 ; n < attributes.length ; n++ )
1639 			{
1640 				var attribute = attributes[n];
1641 
1642 				// Lowercase attribute name hard rule is broken for
1643 				// some attribute on IE, e.g. CHECKED.
1644 				var attrName = attribute.nodeName.toLowerCase(),
1645 					attrValue;
1646 
1647 				// We can set the type only once, so do it with the proper value, not copying it.
1648 				if ( attrName in skipAttributes )
1649 					continue;
1650 
1651 				if ( attrName == 'checked' && ( attrValue = this.getAttribute( attrName ) ) )
1652 					dest.setAttribute( attrName, attrValue );
1653 				// IE BUG: value attribute is never specified even if it exists.
1654 				else if ( attribute.specified ||
1655 				  ( CKEDITOR.env.ie && attribute.nodeValue && attrName == 'value' ) )
1656 				{
1657 					attrValue = this.getAttribute( attrName );
1658 					if ( attrValue === null )
1659 						attrValue = attribute.nodeValue;
1660 
1661 					dest.setAttribute( attrName, attrValue );
1662 				}
1663 			}
1664 
1665 			// The style:
1666 			if ( this.$.style.cssText !== '' )
1667 				dest.$.style.cssText = this.$.style.cssText;
1668 		},
1669 
1670 		/**
1671 		 * Changes the tag name of the current element.
1672 		 * @param {String} newTag The new tag for the element.
1673 		 */
1674 		renameNode : function( newTag )
1675 		{
1676 			// If it's already correct exit here.
1677 			if ( this.getName() == newTag )
1678 				return;
1679 
1680 			var doc = this.getDocument();
1681 
1682 			// Create the new node.
1683 			var newNode = new CKEDITOR.dom.element( newTag, doc );
1684 
1685 			// Copy all attributes.
1686 			this.copyAttributes( newNode );
1687 
1688 			// Move children to the new node.
1689 			this.moveChildren( newNode );
1690 
1691 			// Replace the node.
1692 			this.getParent() && this.$.parentNode.replaceChild( newNode.$, this.$ );
1693 			newNode.$[ 'data-cke-expando' ] = this.$[ 'data-cke-expando' ];
1694 			this.$ = newNode.$;
1695 		},
1696 
1697 		/**
1698 		 * Gets a DOM tree descendant under the current node.
1699 		 * @param {Array|Number} indices The child index or array of child indices under the node.
1700 		 * @returns {CKEDITOR.dom.node} The specified DOM child under the current node. Null if child does not exist.
1701 		 * @example
1702 		 * var strong = p.getChild(0);
1703 		 */
1704 		getChild : function( indices )
1705 		{
1706 			var rawNode = this.$;
1707 
1708 			if ( !indices.slice )
1709 				rawNode = rawNode.childNodes[ indices ];
1710 			else
1711 			{
1712 				while ( indices.length > 0 && rawNode )
1713 					rawNode = rawNode.childNodes[ indices.shift() ];
1714 			}
1715 
1716 			return rawNode ? new CKEDITOR.dom.node( rawNode ) : null;
1717 		},
1718 
1719 		getChildCount : function()
1720 		{
1721 			return this.$.childNodes.length;
1722  		},
1723 
1724 		disableContextMenu : function()
1725 		{
1726 			this.on( 'contextmenu', function( event )
1727 				{
1728 					// Cancel the browser context menu.
1729 					if ( !event.data.getTarget().hasClass( 'cke_enable_context_menu' ) )
1730 						event.data.preventDefault();
1731 				} );
1732 		},
1733 
1734 		/**
1735 		 * Gets element's direction. Supports both CSS 'direction' prop and 'dir' attr.
1736 		 */
1737 		getDirection : function( useComputed )
1738 		{
1739 			return useComputed ?
1740 				this.getComputedStyle( 'direction' )
1741 					// Webkit: offline element returns empty direction (#8053).
1742 					|| this.getDirection()
1743 					|| this.getDocument().$.dir
1744 					|| this.getDocument().getBody().getDirection( 1 )
1745 				: this.getStyle( 'direction' ) || this.getAttribute( 'dir' );
1746 		},
1747 
1748 		/**
1749 		 * Gets, sets and removes custom data to be stored as HTML5 data-* attributes.
1750 		 * @param {String} name The name of the attribute, excluding the 'data-' part.
1751 		 * @param {String} [value] The value to set. If set to false, the attribute will be removed.
1752 		 * @example
1753 		 * element.data( 'extra-info', 'test' );   // appended the attribute data-extra-info="test" to the element
1754 		 * alert( element.data( 'extra-info' ) );  // "test"
1755 		 * element.data( 'extra-info', false );    // remove the data-extra-info attribute from the element
1756 		 */
1757 		data : function ( name, value )
1758 		{
1759 			name = 'data-' + name;
1760 			if ( value === undefined )
1761 				return this.getAttribute( name );
1762 			else if ( value === false )
1763 				this.removeAttribute( name );
1764 			else
1765 				this.setAttribute( name, value );
1766 
1767 			return null;
1768 		}
1769 	});
1770 
1771 	var sides = {
1772 		width : [ "border-left-width", "border-right-width","padding-left", "padding-right" ],
1773 		height : [ "border-top-width", "border-bottom-width", "padding-top",  "padding-bottom" ]
1774 	};
1775 
1776 	// Generate list of specific style rules, applicable to margin/padding/border.
1777 	function expandedRules( style )
1778 	{
1779 		var sides = [ 'top', 'left', 'right', 'bottom' ], components;
1780 
1781 		if ( style == 'border' )
1782 				components = [ 'color', 'style', 'width' ];
1783 
1784 		var styles = [];
1785 		for ( var i = 0 ; i < sides.length ; i++ )
1786 		{
1787 
1788 			if ( components )
1789 			{
1790 				for ( var j = 0 ; j < components.length ; j++ )
1791 					styles.push( [ style, sides[ i ], components[j] ].join( '-' ) );
1792 			}
1793 			else
1794 				styles.push( [ style, sides[ i ] ].join( '-' ) );
1795 		}
1796 
1797 		return styles;
1798 	}
1799 
1800 	function marginAndPaddingSize( type )
1801 	{
1802 		var adjustment = 0;
1803 		for ( var i = 0, len = sides[ type ].length; i < len; i++ )
1804 			adjustment += parseInt( this.getComputedStyle( sides [ type ][ i ] ) || 0, 10 ) || 0;
1805 		return adjustment;
1806 	}
1807 
1808 	/**
1809 	 * Sets the element size considering the box model.
1810 	 * @name CKEDITOR.dom.element.prototype.setSize
1811 	 * @function
1812 	 * @param {String} type The dimension to set. It accepts "width" and "height".
1813 	 * @param {Number} size The length unit in px.
1814 	 * @param {Boolean} isBorderBox Apply the size based on the border box model.
1815 	 */
1816 	CKEDITOR.dom.element.prototype.setSize = function( type, size, isBorderBox )
1817 		{
1818 			if ( typeof size == 'number' )
1819 			{
1820 				if ( isBorderBox && !( CKEDITOR.env.ie && CKEDITOR.env.quirks ) )
1821 					size -= marginAndPaddingSize.call( this, type );
1822 
1823 				this.setStyle( type, size + 'px' );
1824 			}
1825 		};
1826 
1827 	/**
1828 	 * Gets the element size, possibly considering the box model.
1829 	 * @name CKEDITOR.dom.element.prototype.getSize
1830 	 * @function
1831 	 * @param {String} type The dimension to get. It accepts "width" and "height".
1832 	 * @param {Boolean} isBorderBox Get the size based on the border box model.
1833 	 */
1834 	CKEDITOR.dom.element.prototype.getSize = function( type, isBorderBox )
1835 		{
1836 			var size = Math.max( this.$[ 'offset' + CKEDITOR.tools.capitalize( type )  ],
1837 				this.$[ 'client' + CKEDITOR.tools.capitalize( type )  ] ) || 0;
1838 
1839 			if ( isBorderBox )
1840 				size -= marginAndPaddingSize.call( this, type );
1841 
1842 			return size;
1843 		};
1844 })();
1845