1/**
2 * @license Copyright (c) 2003-2013, CKSource - Frederico Knabben. All rights reserved.
3 * For licensing, see LICENSE.html or http://ckeditor.com/license
4 */
5oDokuWiki_FCKEditorInstanceInLinkDialog = false;
6var ckgeditLinkTypeId,ckgeditAlignInputId;
7var ckgeditDwikiSaveDir= oDokuWiki_FCKEditorInstance.save_dir;
8var ckgeditImageReselectObj = { 'align': "", 'link':""};
9window.onbeforeunload = function() { };
10
11(function() {
12	var imageDialog = function( editor, dialogType ) {
13			// Load image preview.
14            oDokuWiki_FCKEditorInstance.Lang = editor.lang;
15			var IMAGE = 1,
16				LINK = 2,
17				PREVIEW = 4,
18				CLEANUP = 8,
19				regexGetSize = /^\s*(\d+)((px)|\%)?\s*$/i,
20				regexGetSizeOrEmpty = /(^\s*(\d+)((px)|\%)?\s*$)|^$/i,
21				pxLengthRegex = /^\d+px$/;
22
23			var onSizeChange = function() {
24					var value = this.getValue(),
25						// This = input element.
26						dialog = this.getDialog(),
27						aMatch = value.match( regexGetSize ); // Check value
28					if ( aMatch ) {
29						if ( aMatch[ 2 ] == '%' ) // % is allowed - > unlock ratio.
30						switchLockRatio( dialog, false ); // Unlock.
31						value = aMatch[ 1 ];
32					}
33
34					// Only if ratio is locked
35					if ( dialog.lockRatio ) {
36						var oImageOriginal = dialog.originalElement;
37						if ( oImageOriginal.getCustomData( 'isReady' ) == 'true' ) {
38							if ( this.id == 'txtHeight' ) {
39								if ( value && value != '0' )
40									value = Math.round( oImageOriginal.$.width * ( value / oImageOriginal.$.height ) );
41								if ( !isNaN( value ) )
42									dialog.setValueOf( 'info', 'txtWidth', value );
43							} else //this.id = txtWidth.
44							{
45								if ( value && value != '0' )
46									value = Math.round( oImageOriginal.$.height * ( value / oImageOriginal.$.width ) );
47								if ( !isNaN( value ) )
48									dialog.setValueOf( 'info', 'txtHeight', value );
49							}
50						}
51					}
52					updatePreview( dialog );
53				};
54
55			var updatePreview = function( dialog ) {
56					//Don't load before onShow.
57					if ( !dialog.originalElement || !dialog.preview )
58						return 1;
59
60					// Read attributes and update imagePreview;
61					dialog.commitContent( PREVIEW, dialog.preview );
62					return 0;
63				};
64
65			// Custom commit dialog logic, where we're intended to give inline style
66			// field (txtdlgGenStyle) higher priority to avoid overwriting styles contribute
67			// by other fields.
68			function commitContent() {
69				var args = arguments;
70				var inlineStyleField = this.getContentElement( 'advanced', 'txtdlgGenStyle' );
71				inlineStyleField && inlineStyleField.commit.apply( inlineStyleField, args );
72
73				this.foreach( function( widget ) {
74					if ( widget.commit && widget.id != 'txtdlgGenStyle' )
75						widget.commit.apply( widget, args );
76				});
77			}
78
79			// Avoid recursions.
80			var incommit;
81
82			// Synchronous field values to other impacted fields is required, e.g. border
83			// size change should alter inline-style text as well.
84			function commitInternally( targetFields ) {
85				if ( incommit )
86					return;
87
88				incommit = 1;
89
90				var dialog = this.getDialog(),
91					element = dialog.imageElement;
92                 ckgeditAlignInputId =dialog.getContentElement('info',  'cmbAlign').getInputElement().$.id;
93                 ckgeditLinkTypeId =dialog.getContentElement('info',  'cmbLinkType').getInputElement().$.id;
94
95                 if(ckgeditImageReselectObj['align']) {
96                    var align_value = 0;
97                     switch (ckgeditImageReselectObj['align']) {
98                         case 'medialeft':
99                            align_value = 1;
100                            break;
101                         case 'mediaright':
102                            align_value = 2;
103                            break;
104                        case 'mediacenter':
105                            align_value = 3;
106                            break;
107                        case 'baseline':
108                            align_value = 4;
109                            break ;
110                     }
111                     var align_sel = document.getElementById(ckgeditAlignInputId);
112                     align_sel.options[align_value].selected = true;
113                     ckgeditImageReselectObj['align'] = "";
114                 }
115                 if(ckgeditImageReselectObj['link']) {
116                     var link_value = 0;
117                     switch(ckgeditImageReselectObj['link']) {
118                        case 'detail':
119                            link_value = 0;
120                            break;
121                        case 'direct':
122                            link_value = 1;
123                            break;
124                        case 'nolink':
125                            link_value = 2;
126                            break;
127                        case 'linkonly':
128                            link_value = 3;
129                            break;
130                     }
131                     var link_sel = document.getElementById(ckgeditLinkTypeId);
132                     link_sel.options[link_value].selected = true;
133                     ckgeditImageReselectObj['link'] = "";
134                 }
135                 oDokuWiki_FCKEditorInstance.isLocalDwikiBrowser=false;
136               //  oDokuWiki_FCKEditorInstance.isDwikiMediaFile = false;
137                 ckgeditImageReselectObj = { 'align': "", 'link':""};
138				if ( element ) {
139					// Commit this field and broadcast to target fields.
140					this.commit( IMAGE, element );
141
142					targetFields = [].concat( targetFields );
143					var length = targetFields.length,
144						field;
145					for ( var i = 0; i < length; i++ ) {
146						field = dialog.getContentElement.apply( dialog, targetFields[ i ].split( ':' ) );
147						// May cause recursion.
148						field && field.setup( IMAGE, element );
149					}
150				}
151
152				incommit = 0;
153			}
154
155			var switchLockRatio = function( dialog, value ) {
156					if ( !dialog.getContentElement( 'info', 'ratioLock' ) )
157						return null;
158
159					var oImageOriginal = dialog.originalElement;
160
161					// Dialog may already closed. (#5505)
162					if ( !oImageOriginal )
163						return null;
164
165					// Check image ratio and original image ratio, but respecting user's preference.
166					if ( value == 'check' ) {
167						if ( !dialog.userlockRatio && oImageOriginal.getCustomData( 'isReady' ) == 'true' ) {
168							var width = dialog.getValueOf( 'info', 'txtWidth' ),
169								height = dialog.getValueOf( 'info', 'txtHeight' ),
170								originalRatio = oImageOriginal.$.width * 1000 / oImageOriginal.$.height,
171								thisRatio = width * 1000 / height;
172							dialog.lockRatio = false; // Default: unlock ratio
173
174							if ( !width && !height )
175								dialog.lockRatio = true;
176							else if ( !isNaN( originalRatio ) && !isNaN( thisRatio ) ) {
177								if ( Math.round( originalRatio ) == Math.round( thisRatio ) )
178									dialog.lockRatio = true;
179							}
180						}
181					} else if ( value != undefined )
182						dialog.lockRatio = value;
183					else {
184						dialog.userlockRatio = 1;
185						dialog.lockRatio = !dialog.lockRatio;
186					}
187
188					var ratioButton = CKEDITOR.document.getById( btnLockSizesId );
189					if ( dialog.lockRatio )
190						ratioButton.removeClass( 'cke_btn_unlocked' );
191					else
192						ratioButton.addClass( 'cke_btn_unlocked' );
193
194					ratioButton.setAttribute( 'aria-checked', dialog.lockRatio );
195
196					// Ratio button hc presentation - WHITE SQUARE / BLACK SQUARE
197					if ( CKEDITOR.env.hc ) {
198						var icon = ratioButton.getChild( 0 );
199						icon.setHtml( dialog.lockRatio ? CKEDITOR.env.ie ? '\u25A0' : '\u25A3' : CKEDITOR.env.ie ? '\u25A1' : '\u25A2' );
200					}
201
202					return dialog.lockRatio;
203				};
204
205			var resetSize = function( dialog ) {
206					var oImageOriginal = dialog.originalElement;
207					if ( oImageOriginal.getCustomData( 'isReady' ) == 'true' ) {
208						var widthField = dialog.getContentElement( 'info', 'txtWidth' ),
209							heightField = dialog.getContentElement( 'info', 'txtHeight' );
210						widthField && widthField.setValue( oImageOriginal.$.width );
211						heightField && heightField.setValue( oImageOriginal.$.height );
212					}
213					updatePreview( dialog );
214				};
215
216			var setupDimension = function( type, element ) {
217					if ( type != IMAGE )
218						return;
219					function checkDimension( size, defaultValue ) {
220						var aMatch = size.match( regexGetSize );
221						if ( aMatch ) {
222							if ( aMatch[ 2 ] == '%' ) // % is allowed.
223							{
224								aMatch[ 1 ] += '%';
225								switchLockRatio( dialog, false ); // Unlock ratio
226							}
227							return aMatch[ 1 ];
228						}
229						return defaultValue;
230					}
231
232					var dialog = this.getDialog(),
233						value = '',
234						dimension = this.id == 'txtWidth' ? 'width' : 'height',
235						size = element.getAttribute( dimension );
236					if ( size )
237						value = checkDimension( size, value );
238					value = checkDimension( element.getStyle( dimension ), value );
239
240					this.setValue( value );
241				};
242
243			var previewPreloader;
244
245			var onImgLoadEvent = function() {
246					// Image is ready.
247					var original = this.originalElement;
248					original.setCustomData( 'isReady', 'true' );
249					original.removeListener( 'load', onImgLoadEvent );
250					original.removeListener( 'error', onImgLoadErrorEvent );
251					original.removeListener( 'abort', onImgLoadErrorEvent );
252
253					// Hide loader
254					CKEDITOR.document.getById( imagePreviewLoaderId ).setStyle( 'display', 'none' );
255
256					// New image -> new domensions
257					if ( !this.dontResetSize )
258						resetSize( this );
259
260					if ( this.firstLoad )
261						CKEDITOR.tools.setTimeout( function() {
262						switchLockRatio( this, 'check' );
263					}, 0, this );
264
265					this.firstLoad = false;
266					this.dontResetSize = false;
267				};
268
269			var onImgLoadErrorEvent = function() {
270					// Error. Image is not loaded.
271					var original = this.originalElement;
272					original.removeListener( 'load', onImgLoadEvent );
273					original.removeListener( 'error', onImgLoadErrorEvent );
274					original.removeListener( 'abort', onImgLoadErrorEvent );
275
276					// Set Error image.
277					var noimage = CKEDITOR.getUrl( CKEDITOR.plugins.get( 'image' ).path + 'images/noimage.png' );
278
279					if ( this.preview )
280						this.preview.setAttribute( 'src', noimage );
281
282					// Hide loader
283					CKEDITOR.document.getById( imagePreviewLoaderId ).setStyle( 'display', 'none' );
284					switchLockRatio( this, false ); // Unlock.
285				};
286
287			var numbering = function( id ) {
288					return CKEDITOR.tools.getNextId() + '_' + id;
289				},
290				btnLockSizesId = numbering( 'btnLockSizes' ),
291				btnResetSizeId = numbering( 'btnResetSize' ),
292				imagePreviewLoaderId = numbering( 'ImagePreviewLoader' ),
293				previewLinkId = numbering( 'previewLink' ),
294				previewImageId = numbering( 'previewImage' );
295
296			return {
297				title: editor.lang.image[ dialogType == 'image' ? 'title' : 'titleButton' ],
298				minWidth: 420,
299				minHeight: 360,
300				onShow: function() {
301					this.imageElement = false;
302					this.linkElement = false;
303					// Default: create a new element.
304					this.imageEditMode = false;
305					this.linkEditMode = false;
306
307					this.lockRatio = true;
308					this.userlockRatio = 0;
309					this.dontResetSize = false;
310					this.firstLoad = true;
311					this.addLink = false;
312
313					var editor = this.getParentEditor(),
314						sel = editor.getSelection(),
315						element = sel && sel.getSelectedElement(),
316						link = element && editor.elementPath( element ).contains( 'a', 1 );
317                    var linkType;
318                    if(element && element['$']) {
319                         var className = element['$'].getAttribute('class');
320                         ckgeditImageReselectObj['align'] = className;
321                         linkType = element['$'].getAttribute('type');
322                         }
323
324				//Hide loader.
325					CKEDITOR.document.getById( imagePreviewLoaderId ).setStyle( 'display', 'none' );
326					// Create the preview before setup the dialog contents.
327					previewPreloader = new CKEDITOR.dom.element( 'img', editor.document );
328					this.preview = CKEDITOR.document.getById( previewImageId );
329
330					// Copy of the image
331					this.originalElement = editor.document.createElement( 'img' );
332					this.originalElement.setAttribute( 'alt', '' );
333					this.originalElement.setCustomData( 'isReady', 'false' );
334
335					if ( link ) {
336						this.linkElement = link;
337						this.linkEditMode = true;
338
339						// Look for Image element.
340						var linkChildren = link.getChildren();
341						if ( linkChildren.count() == 1 ) // 1 child.
342						{
343							var childTagName = linkChildren.getItem( 0 ).getName();
344							if ( childTagName == 'img' || childTagName == 'input' ) {
345								this.imageElement = linkChildren.getItem( 0 );
346								if ( this.imageElement.getName() == 'img' )
347									this.imageEditMode = 'img';
348								else if ( this.imageElement.getName() == 'input' )
349									this.imageEditMode = 'input';
350							}
351						}
352						// Fill out all fields.
353						if ( dialogType == 'image' )
354							this.setupContent( LINK, link );
355					}
356                    else {
357                        if(linkType) {
358                             ckgeditImageReselectObj['link'] = linkType;
359                         }
360                        else ckgeditImageReselectObj['link'] = 'nolink';
361                    }
362
363                   if(link) {
364                       if(link['$']['outerHTML'].match(/detail/)) {
365                             ckgeditImageReselectObj['link'] = 'detail';
366                        }
367                         else {
368                              ckgeditImageReselectObj['link'] = 'direct';
369                         }
370                    }
371					if ( element && element.getName() == 'img' && !element.data( 'cke-realelement' ) || element && element.getName() == 'input' && element.getAttribute( 'type' ) == 'image' ) {
372						this.imageEditMode = element.getName();
373						this.imageElement = element;
374					}
375
376					if ( this.imageEditMode ) {
377						// Use the original element as a buffer from  since we don't want
378						// temporary changes to be committed, e.g. if the dialog is canceled.
379						this.cleanImageElement = this.imageElement;
380						this.imageElement = this.cleanImageElement.clone( true, true );
381
382						// Fill out all fields.
383						this.setupContent( IMAGE, this.imageElement );
384					} else
385						this.imageElement = editor.document.createElement( 'img' );
386
387					// Refresh LockRatio button
388					switchLockRatio( this, true );
389
390					// Dont show preview if no URL given.
391					if ( !CKEDITOR.tools.trim( this.getValueOf( 'info', 'txtUrl' ) ) ) {
392						this.preview.removeAttribute( 'src' );
393						this.preview.setStyle( 'display', 'none' );
394					}
395				},
396				onOk: function() {
397					// Edit existing Image.
398					if ( this.imageEditMode ) {
399						var imgTagName = this.imageEditMode;
400						// Image dialog and Input element.
401						if ( dialogType == 'image' && imgTagName == 'input' && confirm( editor.lang.image.button2Img ) ) {
402							// Replace INPUT-> IMG
403							imgTagName = 'img';
404							this.imageElement = editor.document.createElement( 'img' );
405							this.imageElement.setAttribute( 'alt', '' );
406							editor.insertElement( this.imageElement );
407						}
408						// ImageButton dialog and Image element.
409						else if ( dialogType != 'image' && imgTagName == 'img' && confirm( editor.lang.image.img2Button ) ) {
410							// Replace IMG -> INPUT
411							imgTagName = 'input';
412							this.imageElement = editor.document.createElement( 'input' );
413							this.imageElement.setAttributes({
414								type: 'image',
415								alt: ''
416							});
417							editor.insertElement( this.imageElement );
418						} else {
419							// Restore the original element before all commits.
420							this.imageElement = this.cleanImageElement;
421							delete this.cleanImageElement;
422						}
423					} else // Create a new image.
424					{
425						// Image dialog -> create IMG element.
426						if ( dialogType == 'image' )
427							this.imageElement = editor.document.createElement( 'img' );
428						else {
429							this.imageElement = editor.document.createElement( 'input' );
430							this.imageElement.setAttribute( 'type', 'image' );
431						}
432						this.imageElement.setAttribute( 'alt', '' );
433					}
434
435
436                     var link_sel = document.getElementById(ckgeditLinkTypeId);
437                     var linktype = 'detail';
438                     if(link_sel.selectedIndex > 0) {
439                         var linktype =  link_sel.options[link_sel.selectedIndex].value;
440                     }
441                     this.imageElement.setAttribute( 'type', linktype );
442					// Create a new link.
443					if ( !this.linkEditMode )
444						this.linkElement = editor.document.createElement( 'a' );
445
446					// Set attributes.
447					this.commitContent( IMAGE, this.imageElement );
448
449                                         var align_sel = document.getElementById(ckgeditAlignInputId);
450                     if(align_sel.selectedIndex > 0) {
451                         var img_alignment =  align_sel.options[align_sel.selectedIndex].value;
452                         this.imageElement.setAttribute( 'class', img_alignment );
453                     }
454                     else this.imageElement.setAttribute( 'class', 'media' );
455
456					// Remove empty style attribute.
457					if ( !this.imageElement.getAttribute( 'style' ) )
458						this.imageElement.removeAttribute( 'style' );
459
460					// Insert a new Image.
461					if ( !this.imageEditMode ) {
462						if ( this.addLink ) {
463							//Insert a new Link.
464							if ( !this.linkEditMode ) {
465								editor.insertElement( this.linkElement );
466								this.linkElement.append( this.imageElement, false );
467							} else //Link already exists, image not.
468							editor.insertElement( this.imageElement );
469						} else
470							editor.insertElement( this.imageElement );
471					} else // Image already exists.
472					{
473						//Add a new link element.
474						if ( !this.linkEditMode && this.addLink ) {
475							editor.insertElement( this.linkElement );
476							this.imageElement.appendTo( this.linkElement );
477						}
478						//Remove Link, Image exists.
479						else if ( this.linkEditMode && !this.addLink ) {
480							editor.getSelection().selectElement( this.linkElement );
481							editor.insertElement( this.imageElement );
482						}
483					}
484				},
485				onLoad: function() {
486					if ( dialogType != 'image' )
487						this.hidePage( 'Link' ); //Hide Link tab.
488					var doc = this._.element.getDocument();
489
490					if ( this.getContentElement( 'info', 'ratioLock' ) ) {
491						this.addFocusable( doc.getById( btnResetSizeId ), 5 );
492						this.addFocusable( doc.getById( btnLockSizesId ), 5 );
493					}
494                    oDokuWiki_FCKEditorInstance.isLocalDwikiBrowser=false;
495                    oDokuWiki_FCKEditorInstance.isDwikiMediaFile = true;
496                    oDokuWiki_FCKEditorInstance.isDwikiImage = true;
497					this.commitContent = commitContent;
498				},
499				onHide: function() {
500					if ( this.preview )
501						this.commitContent( CLEANUP, this.preview );
502
503					if ( this.originalElement ) {
504						this.originalElement.removeListener( 'load', onImgLoadEvent );
505						this.originalElement.removeListener( 'error', onImgLoadErrorEvent );
506						this.originalElement.removeListener( 'abort', onImgLoadErrorEvent );
507						this.originalElement.remove();
508						this.originalElement = false; // Dialog is closed.
509					}
510
511					delete this.imageElement;
512				},
513				contents: [
514					{
515					id: 'info',
516					label: editor.lang.image.infoTab,
517					accessKey: 'I',
518					elements: [
519						{
520						type: 'vbox',
521						padding: 0,
522						children: [
523							{
524							type: 'hbox',
525							widths: [ '280px', '110px' ],
526							align: 'right',
527							children: [
528								{
529								id: 'txtUrl',
530								type: 'text',
531								label: editor.lang.common.url,
532								required: true,
533								onChange: function() {
534									var dialog = this.getDialog(),
535										newUrl = this.getValue();
536
537									//Update original image
538									if ( newUrl.length > 0 ) //Prevent from load before onShow
539									{
540										dialog = this.getDialog();
541										var original = dialog.originalElement;
542
543										dialog.preview.removeStyle( 'display' );
544
545										original.setCustomData( 'isReady', 'false' );
546										// Show loader
547										var loader = CKEDITOR.document.getById( imagePreviewLoaderId );
548										if ( loader )
549											loader.setStyle( 'display', '' );
550
551										original.on( 'load', onImgLoadEvent, dialog );
552										original.on( 'error', onImgLoadErrorEvent, dialog );
553										original.on( 'abort', onImgLoadErrorEvent, dialog );
554										original.setAttribute( 'src', newUrl );
555
556										// Query the preloader to figure out the url impacted by based href.
557										previewPreloader.setAttribute( 'src', newUrl );
558										dialog.preview.setAttribute( 'src', previewPreloader.$.src );
559										updatePreview( dialog );
560									}
561									// Dont show preview if no URL given.
562									else if ( dialog.preview ) {
563										dialog.preview.removeAttribute( 'src' );
564										dialog.preview.setStyle( 'display', 'none' );
565									}
566								},
567								setup: function( type, element ) {
568									if ( type == IMAGE ) {
569										var url = element.data( 'cke-saved-src' ) || element.getAttribute( 'src' );
570										var field = this;
571
572										this.getDialog().dontResetSize = true;
573
574										field.setValue( url ); // And call this.onChange()
575										// Manually set the initial value.(#4191)
576										field.setInitValue();
577									}
578								},
579								commit: function( type, element ) {
580									if ( type == IMAGE && ( this.getValue() || this.isChanged() ) ) {
581										element.data( 'cke-saved-src', this.getValue() );
582										element.setAttribute( 'src', this.getValue() );
583									} else if ( type == CLEANUP ) {
584										element.setAttribute( 'src', '' ); // If removeAttribute doesn't work.
585										element.removeAttribute( 'src' );
586									}
587								},
588								validate: CKEDITOR.dialog.validate.notEmpty( editor.lang.image.urlMissing )
589							},
590								{
591								type: 'button',
592								id: 'browse',
593								// v-align with the 'txtUrl' field.
594								// TODO: We need something better than a fixed size here.
595								style: 'display:inline-block;margin-top:10px;',
596								align: 'center',
597								label: editor.lang.common.browseServer,
598								hidden: true,
599								filebrowser: 'info:txtUrl'
600							}
601							]
602						}
603						]
604					},
605						{
606						id: 'txtAlt',
607						type: 'text',
608                        hidden: false,
609						label: editor.lang.image.alt,
610						accessKey: 'T',
611						'default': '',
612						onChange: function() {
613							updatePreview( this.getDialog() );
614						},
615						setup: function( type, element ) {
616							if ( type == IMAGE )
617								this.setValue( element.getAttribute( 'alt' ) );
618						},
619						commit: function( type, element ) {
620							if ( type == IMAGE ) {
621								if ( this.getValue() || this.isChanged() )
622									element.setAttribute( 'alt', this.getValue() );
623							} else if ( type == PREVIEW ) {
624								element.setAttribute( 'alt', this.getValue() );
625							} else if ( type == CLEANUP ) {
626								element.removeAttribute( 'alt' );
627							}
628						}
629					},
630						{
631						type: 'hbox',
632						children: [
633							{
634							id: 'basic',
635							type: 'vbox',
636							children: [
637								{
638								type: 'hbox',
639								widths: [ '50%', '50%' ],
640								children: [
641									{
642									type: 'vbox',
643									padding: 1,
644									children: [
645										{
646										type: 'text',
647										width: '40px',
648										id: 'txtWidth',
649										label: editor.lang.common.width,
650										onKeyUp: onSizeChange,
651										onChange: function() {
652											commitInternally.call( this, 'advanced:txtdlgGenStyle' );
653										},
654										validate: function() {
655											var aMatch = this.getValue().match( regexGetSizeOrEmpty ),
656												isValid = !!( aMatch && parseInt( aMatch[ 1 ], 10 ) !== 0 );
657											if ( !isValid )
658												alert( editor.lang.common.invalidWidth );
659											return isValid;
660										},
661										setup: setupDimension,
662										commit: function( type, element, internalCommit ) {
663											var value = this.getValue();
664											if ( type == IMAGE ) {
665												if ( value )
666													element.setStyle( 'width', CKEDITOR.tools.cssLength( value ) );
667												else
668													element.removeStyle( 'width' );
669
670												!internalCommit && element.removeAttribute( 'width' );
671											} else if ( type == PREVIEW ) {
672												var aMatch = value.match( regexGetSize );
673												if ( !aMatch ) {
674													var oImageOriginal = this.getDialog().originalElement;
675													if ( oImageOriginal.getCustomData( 'isReady' ) == 'true' )
676														element.setStyle( 'width', oImageOriginal.$.width + 'px' );
677												} else
678													element.setStyle( 'width', CKEDITOR.tools.cssLength( value ) );
679											} else if ( type == CLEANUP ) {
680												element.removeAttribute( 'width' );
681												element.removeStyle( 'width' );
682											}
683										}
684									},
685										{
686										type: 'text',
687										id: 'txtHeight',
688										width: '40px',
689										label: editor.lang.common.height,
690										onKeyUp: onSizeChange,
691										onChange: function() {
692											commitInternally.call( this, 'advanced:txtdlgGenStyle' );
693										},
694										validate: function() {
695											var aMatch = this.getValue().match( regexGetSizeOrEmpty ),
696												isValid = !!( aMatch && parseInt( aMatch[ 1 ], 10 ) !== 0 );
697											if ( !isValid )
698												alert( editor.lang.common.invalidHeight );
699											return isValid;
700										},
701										setup: setupDimension,
702										commit: function( type, element, internalCommit ) {
703											var value = this.getValue();
704											if ( type == IMAGE ) {
705												if ( value )
706													element.setStyle( 'height', CKEDITOR.tools.cssLength( value ) );
707												else
708													element.removeStyle( 'height' );
709
710												!internalCommit && element.removeAttribute( 'height' );
711											} else if ( type == PREVIEW ) {
712												var aMatch = value.match( regexGetSize );
713												if ( !aMatch ) {
714													var oImageOriginal = this.getDialog().originalElement;
715													if ( oImageOriginal.getCustomData( 'isReady' ) == 'true' )
716														element.setStyle( 'height', oImageOriginal.$.height + 'px' );
717												} else
718													element.setStyle( 'height', CKEDITOR.tools.cssLength( value ) );
719											} else if ( type == CLEANUP ) {
720												element.removeAttribute( 'height' );
721												element.removeStyle( 'height' );
722											}
723										}
724									}
725									]
726								},
727									{
728									id: 'ratioLock',
729									type: 'html',
730									style: 'margin-top:30px;width:40px;height:40px;',
731									onLoad: function() {
732										// Activate Reset button
733										var resetButton = CKEDITOR.document.getById( btnResetSizeId ),
734											ratioButton = CKEDITOR.document.getById( btnLockSizesId );
735										if ( resetButton ) {
736											resetButton.on( 'click', function( evt ) {
737												resetSize( this );
738												evt.data && evt.data.preventDefault();
739											}, this.getDialog() );
740											resetButton.on( 'mouseover', function() {
741												this.addClass( 'cke_btn_over' );
742											}, resetButton );
743											resetButton.on( 'mouseout', function() {
744												this.removeClass( 'cke_btn_over' );
745											}, resetButton );
746										}
747										// Activate (Un)LockRatio button
748										if ( ratioButton ) {
749											ratioButton.on( 'click', function( evt ) {
750												var locked = switchLockRatio( this ),
751													oImageOriginal = this.originalElement,
752													width = this.getValueOf( 'info', 'txtWidth' );
753
754												if ( oImageOriginal.getCustomData( 'isReady' ) == 'true' && width ) {
755													var height = oImageOriginal.$.height / oImageOriginal.$.width * width;
756													if ( !isNaN( height ) ) {
757														this.setValueOf( 'info', 'txtHeight', Math.round( height ) );
758														updatePreview( this );
759													}
760												}
761												evt.data && evt.data.preventDefault();
762											}, this.getDialog() );
763											ratioButton.on( 'mouseover', function() {
764												this.addClass( 'cke_btn_over' );
765											}, ratioButton );
766											ratioButton.on( 'mouseout', function() {
767												this.removeClass( 'cke_btn_over' );
768											}, ratioButton );
769										}
770									},
771									html: '<div>' +
772										'<a href="javascript:void(0)" tabindex="-1" title="' + editor.lang.image.lockRatio +
773										'" class="cke_btn_locked" id="' + btnLockSizesId + '" role="checkbox"><span class="cke_icon"></span><span class="cke_label">' + editor.lang.image.lockRatio + '</span></a>' +
774										'<a href="javascript:void(0)" tabindex="-1" title="' + editor.lang.image.resetSize +
775										'" class="cke_btn_reset" id="' + btnResetSizeId + '" role="button"><span class="cke_label">' + editor.lang.image.resetSize + '</span></a>' +
776										'</div>'
777								}
778								]
779							},
780								{
781								type: 'vbox',
782								padding: 1,
783								children: [
784									{
785                                        id: 'cmbLinkType',
786                                        type: 'select',
787                                        label: editor.lang.common.linkType||"Link Type",
788                                        'default': 'detail',
789                                        items: [
790                                            [ editor.lang.common.linkDetail  || "Detail", 'detail'],
791                                            [ editor.lang.common.linkDirect ||"Direct", 'direct' ],
792                                            [ editor.lang.common.linkNoLink || "No Link" , 'nolink'],
793                                            [ editor.lang.common.linkOnly || "Link only" , 'linkonly'],
794                                        ],
795							    },
796                                {
797                                   type: "html",
798                                   html: "<p>&nbsp;</p>",
799                                },
800									{
801									type: 'text',
802									id: 'txtBorder',
803									width: '60px',
804                                    disabled: true,
805                                    hidden: true,
806									label: editor.lang.image.border,
807									'default': '',
808									onKeyUp: function() {
809										updatePreview( this.getDialog() );
810									},
811									onChange: function() {
812										commitInternally.call( this, 'advanced:txtdlgGenStyle' );
813									},
814									validate: CKEDITOR.dialog.validate.integer( editor.lang.image.validateBorder ),
815									setup: function( type, element ) {
816										if ( type == IMAGE ) {
817											var value,
818												borderStyle = element.getStyle( 'border-width' );
819											borderStyle = borderStyle && borderStyle.match( /^(\d+px)(?: \1 \1 \1)?$/ );
820											value = borderStyle && parseInt( borderStyle[ 1 ], 10 );
821											isNaN( parseInt( value, 10 ) ) && ( value = element.getAttribute( 'border' ) );
822											this.setValue( value );
823										}
824									},
825									commit: function( type, element, internalCommit ) {
826										var value = parseInt( this.getValue(), 10 );
827										if ( type == IMAGE || type == PREVIEW ) {
828											if ( !isNaN( value ) ) {
829												element.setStyle( 'border-width', CKEDITOR.tools.cssLength( value ) );
830												element.setStyle( 'border-style', 'solid' );
831											} else if ( !value && this.isChanged() )
832												element.removeStyle( 'border' );
833
834											if ( !internalCommit && type == IMAGE )
835												element.removeAttribute( 'border' );
836										} else if ( type == CLEANUP ) {
837											element.removeAttribute( 'border' );
838											element.removeStyle( 'border-width' );
839											element.removeStyle( 'border-style' );
840											element.removeStyle( 'border-color' );
841										}
842									}
843								},
844									{
845									type: 'text',
846									id: 'txtHSpace',
847									width: '60px',
848									label: editor.lang.image.hSpace,
849                                    disabled: true,
850                                    hidden: true,
851									'default': '',
852									onKeyUp: function() {
853										updatePreview( this.getDialog() );
854									},
855									onChange: function() {
856										commitInternally.call( this, 'advanced:txtdlgGenStyle' );
857									},
858									validate: CKEDITOR.dialog.validate.integer( editor.lang.image.validateHSpace ),
859									setup: function( type, element ) {
860										if ( type == IMAGE ) {
861											var value, marginLeftPx, marginRightPx,
862												marginLeftStyle = element.getStyle( 'margin-left' ),
863												marginRightStyle = element.getStyle( 'margin-right' );
864
865											marginLeftStyle = marginLeftStyle && marginLeftStyle.match( pxLengthRegex );
866											marginRightStyle = marginRightStyle && marginRightStyle.match( pxLengthRegex );
867											marginLeftPx = parseInt( marginLeftStyle, 10 );
868											marginRightPx = parseInt( marginRightStyle, 10 );
869
870											value = ( marginLeftPx == marginRightPx ) && marginLeftPx;
871											isNaN( parseInt( value, 10 ) ) && ( value = element.getAttribute( 'hspace' ) );
872
873											this.setValue( value );
874										}
875									},
876									commit: function( type, element, internalCommit ) {
877										var value = parseInt( this.getValue(), 10 );
878										if ( type == IMAGE || type == PREVIEW ) {
879											if ( !isNaN( value ) ) {
880												element.setStyle( 'margin-left', CKEDITOR.tools.cssLength( value ) );
881												element.setStyle( 'margin-right', CKEDITOR.tools.cssLength( value ) );
882											} else if ( !value && this.isChanged() ) {
883												element.removeStyle( 'margin-left' );
884												element.removeStyle( 'margin-right' );
885											}
886
887											if ( !internalCommit && type == IMAGE )
888												element.removeAttribute( 'hspace' );
889										} else if ( type == CLEANUP ) {
890											element.removeAttribute( 'hspace' );
891											element.removeStyle( 'margin-left' );
892											element.removeStyle( 'margin-right' );
893										}
894									}
895								},
896									{
897									type: 'text',
898									id: 'txtVSpace',
899									width: '60px',
900                                    hidden: true,
901									label: editor.lang.image.vSpace,
902									'default': '',
903									onKeyUp: function() {
904										updatePreview( this.getDialog() );
905									},
906									onChange: function() {
907										commitInternally.call( this, 'advanced:txtdlgGenStyle' );
908									},
909									validate: CKEDITOR.dialog.validate.integer( editor.lang.image.validateVSpace ),
910									setup: function( type, element ) {
911										if ( type == IMAGE ) {
912											var value, marginTopPx, marginBottomPx,
913												marginTopStyle = element.getStyle( 'margin-top' ),
914												marginBottomStyle = element.getStyle( 'margin-bottom' );
915
916											marginTopStyle = marginTopStyle && marginTopStyle.match( pxLengthRegex );
917											marginBottomStyle = marginBottomStyle && marginBottomStyle.match( pxLengthRegex );
918											marginTopPx = parseInt( marginTopStyle, 10 );
919											marginBottomPx = parseInt( marginBottomStyle, 10 );
920
921											value = ( marginTopPx == marginBottomPx ) && marginTopPx;
922											isNaN( parseInt( value, 10 ) ) && ( value = element.getAttribute( 'vspace' ) );
923											this.setValue( value );
924										}
925									},
926									commit: function( type, element, internalCommit ) {
927										var value = parseInt( this.getValue(), 10 );
928										if ( type == IMAGE || type == PREVIEW ) {
929											if ( !isNaN( value ) ) {
930												element.setStyle( 'margin-top', CKEDITOR.tools.cssLength( value ) );
931												element.setStyle( 'margin-bottom', CKEDITOR.tools.cssLength( value ) );
932											} else if ( !value && this.isChanged() ) {
933												element.removeStyle( 'margin-top' );
934												element.removeStyle( 'margin-bottom' );
935											}
936
937											if ( !internalCommit && type == IMAGE )
938												element.removeAttribute( 'vspace' );
939										} else if ( type == CLEANUP ) {
940											element.removeAttribute( 'vspace' );
941											element.removeStyle( 'margin-top' );
942											element.removeStyle( 'margin-bottom' );
943										}
944									}
945								},
946									{
947									id: 'cmbAlign',
948									type: 'select',
949									widths: [ '35%', '65%' ],
950									style: 'width:90px',
951									label: editor.lang.common.align,
952									'default': '',
953									items: [
954										[ editor.lang.common.notSet, '' ],
955										[ editor.lang.common.alignLeft, 'medialeft' ],
956										[ editor.lang.common.alignRight, 'mediaright' ],
957                                        [editor.lang.common.alignCenter , 'mediacenter'],
958                                        [ editor.lang.common.alignBaseLine||"Baseline" , 'baseline'],
959									],
960                                    									onChange: function() {
961										updatePreview( this.getDialog() );
962										commitInternally.call( this, 'advanced:txtdlgGenStyle' );
963									},
964									setup: function( type, element ) {
965									},
966									commit: function( type, element, internalCommit ) {
967										var value = this.getValue();
968										if ( type == IMAGE || type == PREVIEW ) {
969											if ( value ) {
970                                                value =  value.replace(/media/,"");
971                                                switch(value) {
972                                                    case 'center':
973                                                       element.removeStyle( 'float' );
974                                                       element.setAttribute( 'class', 'mediacenter');
975                                                       break;
976                                                    case 'baseline':
977                                                       value = 'left';
978                                                    default:
979                                                      element.setStyle( 'float', value );
980                                                   }
981
982                                                }
983											else
984												element.removeStyle( 'float' );
985
986											if ( !internalCommit && type == IMAGE ) {
987												value = ( element.getAttribute( 'align' ) || '' ).toLowerCase();
988												switch ( value ) {
989													// we should remove it only if it matches "left" or "right",
990													// otherwise leave it intact.
991													case 'left':
992													case 'right':
993														element.removeAttribute( 'align' );
994												}
995											}
996										} else if ( type == CLEANUP )
997											element.removeStyle( 'float' );
998
999									}
1000								}
1001								]
1002							}
1003							]
1004						},
1005							{
1006							type: 'vbox',
1007							height: '250px',
1008							children: [
1009								{
1010								type: 'html',
1011								id: 'htmlPreview',
1012								style: 'width:95%;',
1013								html: '<style type = "text/css">.mediacenter { display: block; margin-left: auto; margin-right: auto;}</style><div>' + CKEDITOR.tools.htmlEncode( editor.lang.common.preview ) + '<br>' +
1014								     	'<div id="' + imagePreviewLoaderId + '" class="ImagePreviewLoader" style="display:none"><div class="loading">&nbsp;</div></div>' +
1015									'<div class="ImagePreviewBox"><table><tr><td>' +
1016										'<a href="javascript:void(0)" target="_blank" onclick="return false;" id="' + previewLinkId + '">' +
1017										'<img id="' + previewImageId + '" alt="" /></a>' +
1018										( editor.config.image_previewText || 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit. ' +
1019											'Maecenas feugiat consequat diam. Maecenas metus. Vivamus diam purus, cursus a, commodo non, facilisis vitae, ' +
1020											'nulla. Aenean dictum lacinia tortor. Nunc iaculis, nibh non iaculis aliquam, orci felis euismod neque, sed ornare massa mauris sed velit. Nulla pretium mi et risus. Fusce mi pede, tempor id, cursus ac, ullamcorper nec, enim. Sed tortor. Curabitur molestie. Duis velit augue, condimentum at, ultrices a, luctus ut, orci. Donec pellentesque egestas eros. Integer cursus, augue in cursus faucibus, eros pede bibendum sem, in tempus tellus justo quis ligula. Etiam eget tortor. Vestibulum rutrum, est ut placerat elementum, lectus nisl aliquam velit, tempor aliquam eros nunc nonummy metus. In eros metus, gravida a, gravida sed, lobortis id, turpis. Ut ultrices, ipsum at venenatis fringilla, sem nulla lacinia tellus, eget aliquet turpis mauris non enim. Nam turpis. Suspendisse lacinia. Curabitur ac tortor ut ipsum egestas elementum. Nunc imperdiet gravida mauris.' ) +
1021									'</td></tr></table></div></div>'
1022								}
1023							]
1024						}
1025						]
1026					}
1027					]
1028				},
1029					{
1030					id: 'Link',
1031					label: editor.lang.image.linkTab,
1032					padding: 0,
1033                    hidden: true,
1034					elements: [
1035						{
1036						id: 'txtUrl',
1037						type: 'text',
1038                        disabled: true,
1039						label: editor.lang.common.url,
1040						style: 'width: 100%',
1041						'default': '',
1042						setup: function( type, element ) {
1043							if ( type == LINK ) {
1044								var href = element.data( 'cke-saved-href' );
1045								if ( !href )
1046									href = element.getAttribute( 'href' );
1047                                var matches = href.match(/media\s*=(.*)/);
1048                                if(matches) {
1049                                    href = ckgeditDwikiSaveDir + '/'+  matches[1].replace(':','/');
1050                                    element.setAttribute( 'href' );
1051                                }
1052								this.setValue( href );
1053							}
1054						},
1055						commit: function( type, element ) {
1056							if ( type == LINK ) {
1057								if ( this.getValue() || this.isChanged() ) {
1058									var url = decodeURI( this.getValue() );
1059									element.data( 'cke-saved-href', url );
1060									element.setAttribute( 'href', url );
1061
1062									if ( this.getValue() || !editor.config.image_removeLinkByEmptyURL )
1063										this.getDialog().addLink = true;
1064								}
1065							}
1066						}
1067					},
1068						{
1069						type: 'button',
1070						id: 'browse',
1071                        disabled: true,
1072						filebrowser: {
1073							action: 'Browse',
1074							target: 'Link:txtUrl',
1075							url: editor.config.filebrowserImageBrowseLinkUrl
1076						},
1077						style: 'float:right',
1078						hidden: true,
1079						label: editor.lang.common.browseServer
1080					},
1081						{
1082						id: 'cmbTarget',
1083						type: 'select',
1084                        disabled: true,
1085						label: editor.lang.common.target,
1086						'default': '',
1087						items: [
1088							[ editor.lang.common.notSet, '' ],
1089							[ editor.lang.common.targetNew, '_blank' ],
1090							[ editor.lang.common.targetTop, '_top' ],
1091							[ editor.lang.common.targetSelf, '_self' ],
1092							[ editor.lang.common.targetParent, '_parent' ]
1093							],
1094						setup: function( type, element ) {
1095							if ( type == LINK )
1096								this.setValue( element.getAttribute( 'target' ) || '' );
1097						},
1098						commit: function( type, element ) {
1099							if ( type == LINK ) {
1100								if ( this.getValue() || this.isChanged() )
1101									element.setAttribute( 'target', this.getValue() );
1102							}
1103						}
1104					}
1105					]
1106				},
1107					{
1108					id: 'Upload',
1109					hidden: true,
1110					filebrowser: 'uploadButton',
1111					label: editor.lang.image.upload,
1112					elements: [
1113						{
1114						type: 'file',
1115						id: 'upload',
1116						label: editor.lang.image.btnUpload,
1117						style: 'height:40px',
1118						size: 38
1119					},
1120						{
1121						type: 'fileButton',
1122						id: 'uploadButton',
1123						filebrowser: 'info:txtUrl',
1124						label: editor.lang.image.btnUpload,
1125						'for': [ 'Upload', 'upload' ]
1126					}
1127					]
1128				},
1129					{
1130					id: 'advanced',
1131                    hidden: true,
1132					label: editor.lang.common.advancedTab,
1133					elements: [
1134						{
1135						type: 'hbox',
1136						widths: [ '50%', '25%', '25%' ],
1137						children: [
1138							{
1139							type: 'text',
1140							id: 'linkId',
1141                            disabled: true,
1142							label: editor.lang.common.id,
1143							setup: function( type, element ) {
1144								if ( type == IMAGE )
1145									this.setValue( element.getAttribute( 'id' ) );
1146							},
1147							commit: function( type, element ) {
1148								if ( type == IMAGE ) {
1149									if ( this.getValue() || this.isChanged() )
1150										element.setAttribute( 'id', this.getValue() );
1151								}
1152							}
1153						},
1154							{
1155							id: 'cmbLangDir',
1156							type: 'select',
1157                            disabled: true,
1158							style: 'width : 100px;',
1159							label: editor.lang.common.langDir,
1160							'default': '',
1161							items: [
1162								[ editor.lang.common.notSet, '' ],
1163								[ editor.lang.common.langDirLtr, 'ltr' ],
1164								[ editor.lang.common.langDirRtl, 'rtl' ]
1165								],
1166							setup: function( type, element ) {
1167								if ( type == IMAGE )
1168									this.setValue( element.getAttribute( 'dir' ) );
1169							},
1170							commit: function( type, element ) {
1171								if ( type == IMAGE ) {
1172									if ( this.getValue() || this.isChanged() )
1173										element.setAttribute( 'dir', this.getValue() );
1174								}
1175							}
1176						},
1177							{
1178							type: 'text',
1179							id: 'txtLangCode',
1180                            disabled: true,
1181							label: editor.lang.common.langCode,
1182							'default': '',
1183							setup: function( type, element ) {
1184								if ( type == IMAGE )
1185									this.setValue( element.getAttribute( 'lang' ) );
1186							},
1187							commit: function( type, element ) {
1188								if ( type == IMAGE ) {
1189									if ( this.getValue() || this.isChanged() )
1190										element.setAttribute( 'lang', this.getValue() );
1191								}
1192							}
1193						}
1194						]
1195					},
1196						{
1197						type: 'text',
1198						id: 'txtGenLongDescr',
1199						label: editor.lang.common.longDescr,
1200                        disabled: true,
1201						setup: function( type, element ) {
1202							if ( type == IMAGE )
1203								this.setValue( element.getAttribute( 'longDesc' ) );
1204						},
1205						commit: function( type, element ) {
1206							if ( type == IMAGE ) {
1207								if ( this.getValue() || this.isChanged() )
1208									element.setAttribute( 'longDesc', this.getValue() );
1209							}
1210						}
1211					},
1212						{
1213						type: 'hbox',
1214						widths: [ '50%', '50%' ],
1215						children: [
1216							{
1217							type: 'text',
1218							id: 'txtGenClass',
1219                            disabled: true,
1220							label: editor.lang.common.cssClass,
1221							'default': '',
1222							setup: function( type, element ) {
1223								if ( type == IMAGE )
1224									this.setValue( element.getAttribute( 'class' ) );
1225							},
1226							commit: function( type, element ) {
1227								if ( type == IMAGE ) {
1228									if ( this.getValue() || this.isChanged() )
1229										element.setAttribute( 'class', this.getValue() );
1230								}
1231							}
1232						},
1233							{
1234							type: 'text',
1235							id: 'txtGenTitle',
1236                            disabled: true,
1237							label: editor.lang.common.advisoryTitle,
1238							'default': '',
1239							onChange: function() {
1240								updatePreview( this.getDialog() );
1241							},
1242							setup: function( type, element ) {
1243								if ( type == IMAGE )
1244									this.setValue( element.getAttribute( 'title' ) );
1245							},
1246							commit: function( type, element ) {
1247								if ( type == IMAGE ) {
1248									if ( this.getValue() || this.isChanged() )
1249										element.setAttribute( 'title', this.getValue() );
1250								} else if ( type == PREVIEW ) {
1251									element.setAttribute( 'title', this.getValue() );
1252								} else if ( type == CLEANUP ) {
1253									element.removeAttribute( 'title' );
1254								}
1255							}
1256						}
1257						]
1258					},
1259						{
1260						type: 'text',
1261						id: 'txtdlgGenStyle',
1262                        disabled: true,
1263						label: editor.lang.common.cssStyle,
1264						validate: CKEDITOR.dialog.validate.inlineStyle( editor.lang.common.invalidInlineStyle ),
1265						'default': '',
1266						setup: function( type, element ) {
1267							if ( type == IMAGE ) {
1268								var genStyle = element.getAttribute( 'style' );
1269								if ( !genStyle && element.$.style.cssText )
1270									genStyle = element.$.style.cssText;
1271								this.setValue( genStyle );
1272
1273								var height = element.$.style.height,
1274									width = element.$.style.width,
1275									aMatchH = ( height ? height : '' ).match( regexGetSize ),
1276									aMatchW = ( width ? width : '' ).match( regexGetSize );
1277
1278								this.attributesInStyle = {
1279									height: !!aMatchH,
1280									width: !!aMatchW
1281								};
1282							}
1283						},
1284						onChange: function() {
1285							commitInternally.call( this, [ 'info:cmbFloat', 'info:cmbAlign',
1286								'info:txtVSpace', 'info:txtHSpace',
1287								'info:txtBorder',
1288								'info:txtWidth', 'info:txtHeight' ] );
1289							updatePreview( this );
1290						},
1291						commit: function( type, element ) {
1292							if ( type == IMAGE && ( this.getValue() || this.isChanged() ) ) {
1293								element.setAttribute( 'style', this.getValue() );
1294							}
1295						}
1296					}
1297					]
1298				}
1299				]
1300			};
1301		};
1302
1303	CKEDITOR.dialog.add( 'image', function( editor ) {
1304		return imageDialog( editor, 'image' );
1305	});
1306
1307	CKEDITOR.dialog.add( 'imagebutton', function( editor ) {
1308		return imageDialog( editor, 'imagebutton' );
1309	});
1310})();
1311