// bfimage dialog - customization of CKEditor image dialog;
//		- saves data as BF attachment/thumbnail
//		- settings consolidated to single tab
//		- adds a predefiend scale picker

(function() {
	// Load image preview.
	var IMAGE = 1,
		LINK = 2,
		PREVIEW = 4,
		CLEANUP = 8,
		regexGetSize = /^\s*(\d+)((px)|\%)?\s*$/i,
		regexGetSizeOrEmpty = /(^\s*(\d+)((px)|\%)?\s*$)|^$/i;

	var updatePreview = function(dialog) {
		// Don't load before onShow.
		if (!dialog.originalElement || !dialog.preview) {
			return 1;
		}
		// Read attributes and update imagePreview;
		dialog.commitContent(PREVIEW, dialog.preview);
		return 0;
	};

	var onSizeChange = function(isScaleChange) {
		var value = this.getValue(),	// This = input element.
			dialog = this.getDialog(),
			aMatch  =  value.match( regexGetSize );	// Check value
		if (aMatch) {	// pixels only - suffixes ignored
			value = aMatch[1];
		}
		if (isScaleChange !== true) {
			dialog.setValueOf('info', 'cmbScale', 'other');
		}
		// If ratio is locked, update 'other' parameter
		if (dialog.lockRatio) {
			var oImageOriginal = dialog.originalElement;
			if (oImageOriginal.getCustomData('isReady') == 'true') {
				if (this.id == 'txtHeight')	{
					if (value && value != '0') {
						value = Math.round(oImageOriginal.$.width * (value / oImageOriginal.$.height));
					}
					if (!isNaN(value)) {
						dialog.setValueOf('info', 'txtWidth', value);
					}
				} else {		// this.id = txtWidth.
					if (value && value != '0') {
						value = Math.round(oImageOriginal.$.height * (value  / oImageOriginal.$.width));
					}
					if (!isNaN(value)) {
						dialog.setValueOf( 'info', 'txtHeight', value );
					}
				}
			}
		}
		updatePreview(dialog);
	};

	var switchLockRatio = function(dialog, value) {
		var oImageOriginal = dialog.originalElement,
			ratioButton = dialog.getElement().getDocument().getById( 'btnLockSizes' );
		if (oImageOriginal.getCustomData('isReady') == 'true') {
			if (value == 'check') {			// Check image ratio and original image ratio.
				var width = dialog.getValueOf( 'info', 'txtWidth' ),
					height = dialog.getValueOf( 'info', 'txtHeight' ),
					originalRatio = oImageOriginal.$.width * 1000 / oImageOriginal.$.height,
					thisRatio = width * 1000 / height;
				dialog.lockRatio  = false;		// Default: unlock ratio
				if (!width && !height) {
					dialog.lockRatio = true;
				} else if (!isNaN(originalRatio) && !isNaN(thisRatio ))	{
					if (Math.round(originalRatio) == Math.round(thisRatio)) {
						dialog.lockRatio = true;
					}
				}
			}
			else if (value !== undefined) {
				dialog.lockRatio = value;
			} else {
				dialog.lockRatio = !dialog.lockRatio;
			}
		} else if (value != 'check') {		// I can't lock ratio if ratio is unknown.
			dialog.lockRatio = false;
		}
		if (dialog.lockRatio) {
			ratioButton.removeClass('cke_btn_unlocked');
		} else {
			ratioButton.addClass('cke_btn_unlocked');
		}
		return dialog.lockRatio;
	};


	var resetSize = function( dialog )
	{
		var oImageOriginal = dialog.originalElement;
		if (oImageOriginal.getCustomData('isReady') == 'true') {
			dialog.setValueOf('info', 'txtWidth', oImageOriginal.$.width );
			dialog.setValueOf('info', 'txtHeight', oImageOriginal.$.height );
			dialog.setValueOf('info', 'cmbScale', '100%');
			// test if thumbnailing required
			var ed = dialog.getParentEditor();
			var max = ed.message._config.maxImage;
			if ((max > 0) && (dialog._isAttachment)) {				// check if dimensions over max
				if (!dialog._isOversize && ((oImageOriginal.$.width > max) || (oImageOriginal.$.height > max))) {
					dialog._isOversize = true;
					dialog._mainUrl = dialog.getValueOf('info','txtUrl');
					// calculate thumbnail scale factor
					var scale = oImageOriginal.$.width > oImageOriginal.$.height ? max/oImageOriginal.$.width : max/oImageOriginal.$.height;				// initiate thumbnail upload - update form action and re-post
					dialog._thumbWidth = Math.round(oImageOriginal.$.width * scale);
					dialog._thumbHeight = Math.round(oImageOriginal.$.height * scale);
					// set up thumbnail url and scaling url
					var thumbName = FIRSTCLASS.lang.createThumbName(dialog._fileName);
					dialog._thumbUrl = dialog._mainUrl.replace(dialog._fileName, thumbName);
					dialog._scaleUrl = dialog._mainUrl + "?WidthAA=" + dialog._thumbWidth + "&HeightAA=" + dialog._thumbHeight + "&SaveDest=" + dialog._thumbUrl;
					// replace preview url to set up scaling
					var stamp = dialog.getElement().getDocument().getById('imageStamp');
					var onStampLoad = function(url, success) {
						dialog.setValueOf('info', 'txtAlt',FIRSTCLASS.locale.editor.image.thumbalt);
						dialog.setValueOf('info', 'txtUrl',  url);
					};
					ed.message.testForAttachment(thumbName, dialog._thumbUrl, onStampLoad);
					stamp.setAttribute('src',dialog._scaleUrl);
				}
			}
		}
		updatePreview( dialog );
	};

	var setupDimension = function(type, element) {
		if (type != IMAGE) {
			return;
		}

		function checkDimension(size, defaultValue) {
			var aMatch  =  size.match( regexGetSize );
			if (aMatch) {
				if (aMatch[2] == '%') {				// % is allowed.
					aMatch[1] += '%';
					switchLockRatio( this.getDialog(), false );	// Unlock ratio
				}
				return aMatch[1];
			}
			return defaultValue;
		}
		var dialog = this.getDialog(),
			value = '',
			dimension = ((this.id == 'txtWidth')? 'width' : 'height'),
			size = element.getAttribute(dimension);
		if (size) {
			value = checkDimension(size, value);
		}
		value = checkDimension(element.$.style[dimension], value);
		this.setValue(value);
	};

	var imageDialog = function(editor, dialogType) {
		var uploadAction = editor.message._config.baseURL;
		var newImageBase = FIRSTCLASS.lang.ensureSlashUrl(uploadAction);

		if (newImageBase.indexOf(FIRSTCLASS.opCodes.FormEdit) > 0) {
			newImageBase = newImageBase.slice(0,newImageBase.lastIndexOf(FIRSTCLASS.opCodes.FormEdit));
		}
		// the upload form action
		var calcUploadAction = function() {
			var result = newImageBase + FIRSTCLASS.opCodes.FormSave + "?";
			if (FIRSTCLASS.session.server.requiresvkeys) {
				result += "VKey=" + editor.message.getVKey() + "&Templates=Stubs&FormID=141&";
			}
			return (result + 'KeepNames=1&Close=-1');
		};
		uploadAction = calcUploadAction();
		var onImgLoadEvent = function() {
			// Image is ready.
			var original = this.originalElement;
			original.setCustomData( 'isReady', 'true' );
			original.removeListener( 'load', onImgLoadEvent );
			// Hide loader
			this.getElement().getDocument().getById( 'ImagePreviewLoader' ).setStyle( 'display', 'none' );
			// New image -> new domensions
			if (!this.dontResetSize) {
				resetSize(this);
			}
			if (this.firstLoad) {
				switchLockRatio(this, 'check');
			}
			this.firstLoad = false;
			this.dontResetSize = false;
			// reset the file picker
			var pick = this.getContentElement('info','Embed');
			pick.reset();
		};

		var onImgLoadErrorEvent = function() {
			// Error. Image is not loaded.
			var original = this.originalElement;
			original.removeListener( 'load', onImgLoadEvent );
			original.removeListener( 'error', onImgLoadErrorEvent );
			original.removeListener( 'abort', onImgLoadErrorEvent );
			// Set Error image.
			var noimage = CKEDITOR.getUrl( editor.skinPath + 'images/noimage.png' );
			if (this.preview) {
				this.preview.setAttribute( 'src', noimage );
			}
			// Hide loader
			this.getElement().getDocument().getById( 'ImagePreviewLoader' ).setStyle( 'display', 'none' );
			switchLockRatio( this, false );	// Unlock.
		};
		return {
			title : (dialogType == 'image') ? editor.lang.image.title : editor.lang.image.titleButton,
			style: 'max-width:475px;overflow-x:hidden',
			minWidth : 475,
			minHeight : 310,
			onShow: function() {
				// thumbnailing vars
				this._isAttachment = false;
				this._isOversize = false;
				this._mainUrl = false;
				this._thumbUrl = false;
				this._scaleUrl = false;
				this._thumbWidth = false;
				this._thumbHeight = false;
				
				// content els
				this.imageElement = false;
				this.linkElement = false;

				// Default: create a new element.
				this.imageEditMode = false;
				this.linkEditMode = false;

				this.lockRatio = true;
				this.dontResetSize = false;
				this.firstLoad = true;
				this.addLink = false;

				var editor = this.getParentEditor(),
					sel = editor.getSelection(),
					element = sel.getSelectedElement(),
					link = element && element.getAscendant( 'a' );

				// re-hide loader.
				var loader = this.getElement().getDocument().getById( 'ImagePreviewLoader' );
				if (loader) {
					loader.setStyle( 'display', 'none' );
				}
				// Preview
				this.preview = this.getElement().getDocument().getById( 'previewImage' );
				// Copy of the image
				this.originalElement = this.getElement().getDocument().createElement( 'img' );
				this.originalElement.setAttribute( 'alt', '' );
				this.originalElement.setCustomData( 'isReady', 'false' );
				var box = this.getElement().getDocument().getById('imageBox');
				if (box) {
					box.getParent().setStyle('vertical-align','top');
					this.originalElement.appendTo(box, false);
				}
				if (link) {
					this.linkElement = link;
					this.linkEditMode = true;

					// Look for Image element.
					var linkChildren = link.getChildren();
					if ( linkChildren.count() == 1 ) {		// 1 child.
						var childTagName = linkChildren.getItem( 0 ).getName();
						if ( childTagName == 'img' || childTagName == 'input' )	{
							this.imageElement = linkChildren.getItem(0);
							if ( this.imageElement.getName() == 'img' ) {
								this.imageEditMode = 'img';
							} else if ( this.imageElement.getName() == 'input' ) {
								this.imageEditMode = 'input';
							}
						}
					}
					// Fill out all fields.
					if ( dialogType == 'image' ) {
						this.setupContent( LINK, link );
					}
				}

				if ( element && element.getName() == 'img' && !element.getAttribute( '_cke_protected_html' ) ) {
					this.imageEditMode = 'img';
				} else if ( element && element.getName() == 'input' && element.getAttribute( 'type' ) && element.getAttribute( 'type' ) == 'image' ) {
					this.imageEditMode = 'input';
				}
				if ( this.imageEditMode || this.imageElement ) {
					if ( !this.imageElement ) {
						this.imageElement = element;
					}
					// Fill out all fields.
					this.setupContent( IMAGE, this.imageElement );

					// Refresh LockRatio button
					switchLockRatio(this, true);
				}
				// Dont show preview if no URL given.
				if ( !CKEDITOR.tools.trim( this.getValueOf( 'info', 'txtUrl' ) ) ) {
					this.preview.removeAttribute( 'src' );
					this.preview.setStyle( 'display', 'none' );
				}
			},
			onOk : function() {
				// Edit existing Image.
				if ( this.imageEditMode ) {
					var imgTagName = this.imageEditMode;

					// Image dialog and Input element.
					if ( dialogType == 'image' && imgTagName == 'input' && confirm( editor.lang.image.button2Img ) ) {
						// Replace INPUT-> IMG
						imgTagName = 'img';
						this.imageElement = editor.document.createElement( 'img' );
						this.imageElement.setAttribute( 'alt', '' );
						editor.insertElement( this.imageElement );
					// ImageButton dialog and Image element.
					} else if ( dialogType != 'image' && imgTagName == 'img' && confirm( editor.lang.image.img2Button )) {
						// Replace IMG -> INPUT
						imgTagName = 'input';
						this.imageElement = editor.document.createElement( 'input' );
						this.imageElement.setAttributes(
							{	type : 'image',
								alt : ''
							}
						);
						editor.insertElement( this.imageElement );
					}
				} else { // Create a new image.
					// Image dialog -> create IMG element.
					if ( dialogType == 'image' ) {
						this.imageElement = editor.document.createElement( 'img' );
					} else {
						this.imageElement = editor.document.createElement( 'input' );
						this.imageElement.setAttribute('type' ,'image');
					}
					this.imageElement.setAttribute( 'alt', '' );
				}

				// Create a new link.
				if ( !this.linkEditMode ) {
					this.linkElement = editor.document.createElement( 'a' );
				}
				// Set attributes.
				this.commitContent( IMAGE, this.imageElement );
				this.commitContent( LINK, this.linkElement );
				// Insert a new Image.
				if (!this.imageEditMode) {
					if (this._isOversize) {
						//Insert a new Link with thumbnail appended
						this.linkElement.setAttribute('target','_blank');
						this.linkElement.setAttribute('fcth','1');
						this.linkElement.setAttribute('href',this._mainUrl);
						this.linkElement.setAttribute('title',this.getValueOf('info','txtAlt'));
						editor.insertElement(this.linkElement);
						this.linkElement.append(this.imageElement, false);
					} else {
						editor.insertElement( this.imageElement );
					}
				} else {	// Image already exists.
					//Add a new link element.
					if ( !this.linkEditMode && this.addLink ) {
						editor.insertElement( this.linkElement );
						this.imageElement.appendTo( this.linkElement );
					} else if ( this.linkEditMode && !this.addLink ) {	//Remove Link, Image exists.
						editor.getSelection().selectElement( this.linkElement );
						editor.insertElement( this.imageElement );
					}
				}
				// update the upload form action in preparation for next use
				var uploader = this.getContentElement('info','Embed');
				uploader._.definition.action = calcUploadAction();
			},
			onCancel: function(evt) {
				// update the upload form action in preparation for next use
				var uploader = this.getContentElement('info','Embed');
				uploader._.definition.action = calcUploadAction();
			},
			onLoad : function()	{
				if ( dialogType != 'image' ) {
					this.hidePage( 'Link' );		//Hide Link tab.
				}
				var doc = this._.element.getDocument();
				this.addFocusable( doc.getById( 'btnResetSize' ), 5 );
				this.addFocusable( doc.getById( 'btnLockSizes' ), 5 );
			},
			onHide : function() {
				if ( this.preview ) {
					this.commitContent( CLEANUP, this.preview );
				}
				if ( this.originalElement ) {
					this.originalElement.removeListener( 'load', onImgLoadEvent );
					this.originalElement.removeListener( 'error', onImgLoadErrorEvent );
					this.originalElement.removeListener( 'abort', onImgLoadErrorEvent );
					this.originalElement.remove();
					this.originalElement = false;		// Dialog is closed.
				}
			},
			contents : [
				{
					id : 'info',
					accessKey : 'I',
					elements :
					[
						{	type: 'hbox',
							widths : [ '340px', '50px' ],
							height: '30px',
							children: [
								{	type : 'file',
									id : 'Embed',
									label:  FIRSTCLASS.locale.editor.image.embed,
									labelLayout: 'horizontal',
									widths: [ '18%', '82%' ],
									style: 'color:#000000;height:35px;background:none;',
									size : 35,
									action: uploadAction
								},
								{	type : 'fileButton',
									id : 'uploadButton',
									filebrowser : 'info:Embed',
									label : FIRSTCLASS.locale.editor.image.upload,
									'for' : [ 'info', 'Embed' ],
									onClick: function() {
										var dlg = this.getDialog();
										var pick = dlg.getContentElement('info','Embed');
										var input = pick.getInputElement();
										var filePath = input.getValue();
										if (filePath && filePath.length > 0) {
											var fileName = filePath.match(/[^\/\\]+$/);
											var newImageUrl = newImageBase + fileName[0];
											dlg._fileName = fileName[0];
											var attachCB = function(url,success) {
												if (success) {
													var pick = dlg.getContentElement('info','Embed');
													YAHOO.util.Dom.addClass(pick,'fcHidden');
													dlg._isUpload = true;
													dlg.setValueOf('info','txtUrl',url);
													dlg._isAttachment = true;
												} else {
													alert(FIRSTCLASS.locale.editor.image.cantupload);
												}
											};
											editor.message.testForAttachment(fileName, newImageUrl, attachCB);
											return true;
										} else {
											return false;
										}
									}
								}
							]
						},
						{
							id : 'txtUrl',
							type : 'text',
							label : FIRSTCLASS.locale.editor.image.url,
							labelLayout: 'horizontal',
							widths: [ '15%', '85%' ],
							onChange : function()
							{
								var dialog = this.getDialog(),
									newUrl = this.getValue();

								// Update original image
								if ( newUrl.length > 0 ) {	// Prevent from load before onShow
									var original = dialog.originalElement,
										editor = dialog.getParentEditor();
									dialog.preview.removeStyle( 'display' );
									original.setCustomData( 'isReady', 'false' );
									// Show loader
									var loader = this.getElement().getDocument().getById( 'ImagePreviewLoader' );
									if ( loader ) {
										loader.setStyle( 'display', '' );
									}
									original.on( 'load', onImgLoadEvent, dialog );
									original.on( 'error', onImgLoadErrorEvent, dialog );
									original.on( 'abort', onImgLoadErrorEvent, dialog );
									CKEDITOR.tools.setTimeout(function() { 
										original.setAttribute('src', newUrl); 
										dialog.preview.setAttribute( 'src', newUrl );
									}, 100, this);
									updatePreview( dialog );
								} else if ( dialog.preview ) { // Dont show preview if no URL given.
									dialog.preview.removeAttribute( 'src' );
									dialog.preview.setStyle( 'display', 'none' );
								}
							},
							setup : function( type, element ) {
								if ( type == IMAGE ) {
									var url = element.getAttribute( '_cke_saved_src' ) || element.getAttribute( 'src' );
									var field = this;

									this.getDialog().dontResetSize = true;

									// In IE7 the dialog is being rendered improperly when loading
									// an image with a long URL. So we need to delay it a bit. (#4122)
									setTimeout( function() {
										field.setValue( url );		// And call this.onChange()
										// Manually set the initial value.(#4191)
										field.setInitValue();
										field.focus();
									}, 0);
								}
							},
							commit : function( type, element ) {
								if ( type == IMAGE && ( this.getValue() || this.isChanged() ) )	{
									element.setAttribute( '_cke_saved_src', decodeURI( this.getValue() ) );
									element.setAttribute( 'src', decodeURI( this.getValue() ) );
								} else if ( type == CLEANUP ) {
									element.setAttribute( 'src', '' );	// If removeAttribute doesn't work.
									element.removeAttribute( 'src' );
								}
							},
							validate : CKEDITOR.dialog.validate.notEmpty( editor.lang.image.urlMissing )
						},
						{
							id : 'txtAlt',
							type : 'text',
							label : FIRSTCLASS.locale.editor.image.title,
							labelLayout: 'horizontal',
							widths: [ '15%', '85%' ],
							accessKey : 'A',
							'default' : '',
							onChange : function() {
								updatePreview( this.getDialog() );
							},
							setup : function( type, element )
							{
								if ( type == IMAGE ) {
									this.setValue( element.getAttribute( 'alt' ) );
								}
							},
							commit : function( type, element )
							{
								if ( type == IMAGE ) {
									if ( this.getValue() || this.isChanged() ) {
										element.setAttribute( 'alt', this.getValue() );
									}
								} else if ( type == PREVIEW ) {
									element.setAttribute( 'alt', this.getValue() );
								} else if ( type == CLEANUP ) {
									element.removeAttribute( 'alt' );
								}
							}
						},
						{
							type : 'hbox',
							widths : [ '40%', '60%' ],
							padding: '10px 5px 0 5px',
							children : [
								{
									type : 'vbox',
									padding : '3px 10px',
									children : [
										{	id : 'cmbScale',
											type : 'select',
											labelLayout : 'horizontal',
											widths : [ '34%','66%' ],
											style : 'width:100%;',
											label : FIRSTCLASS.locale.editor.image.scale,
											'default' : '100%',
											items:	[
												[  FIRSTCLASS.locale.editor.image.scale100, '100%'],
												[ FIRSTCLASS.locale.editor.image.scale25, '25%'],
												[  FIRSTCLASS.locale.editor.image.scale50, '50%'],
												[  FIRSTCLASS.locale.editor.image.scale75, '75%'],
												[  FIRSTCLASS.locale.editor.image.scale125, '125%'],
												[  FIRSTCLASS.locale.editor.image.scale150, '150%'],
												[  FIRSTCLASS.locale.editor.image.scale200, '200%'],
												[  FIRSTCLASS.locale.editor.image.scaleother, 'other']
											],
											onClick: function() {
												var	val = this.getValue(),
													scale = (val.slice(0,val.indexOf("%")) - 0.0)/100.0,
													dlg = this.getDialog(),
													widthField = dlg.getContentElement('info','txtWidth');
												if (dlg.originalElement) {
													// lock ratio
													switchLockRatio(dlg, true);
													// calc new width
													var newWidth = Math.round(dlg.originalElement.$.width * scale);
													if (newWidth > 0 && !isNaN(newWidth)) {	// set it
														widthField.setValue(newWidth);
														onSizeChange.call(widthField, true);
													}
												}
											},
											setup: function(type, element) {
											}
										},
										{
											type : 'hbox',
											widths : [ '70%', '30%' ],
											children :
											[
												{	// height & width
													type : 'vbox',
													padding : '3px 0px',
													children :
													[
														{
															type : 'text',
															width: '50px',
															id : 'txtWidth',
															labelLayout : 'horizontal',
															widths : [ '52%', '48%' ],
															label : editor.lang.image.width,
															onKeyUp : onSizeChange,
															validate: function() {
																var aMatch  =  this.getValue().match( regexGetSizeOrEmpty );
																if ( !aMatch ) {
																	alert( editor.lang.common.validateNumberFailed );
																}
																return !!aMatch;
															},
															setup : setupDimension,
															commit : function( type, element ) {
																var value = false;
																if ( type == IMAGE ) {
																	value = this.getValue();
																	if ( value ) {
																		element.setAttribute( 'width', value );
																	} else if ( !value && this.isChanged() ) {
																		element.removeAttribute( 'width' );
																	}
																} else if ( type == PREVIEW ) {
																	value = this.getValue();
																	var aMatch = value.match( regexGetSize );
																	if ( !aMatch ) {
																		var oImageOriginal = this.getDialog().originalElement;
																		if ( oImageOriginal.getCustomData( 'isReady' ) == 'true' ) {
																			element.setStyle( 'width',  oImageOriginal.$.width + 'px');
																		}
																	} else {
																		element.setStyle( 'width', value + 'px');
																	}
																} else if ( type == CLEANUP ) {
																	element.setStyle( 'width', '0px' );	// If removeAttribute doesn't work.
																	element.removeAttribute( 'width' );
																	element.removeStyle( 'width' );
																}
															}
														},
														{
															type : 'text',
															id : 'txtHeight',
															width: '50px',
															labelLayout : 'horizontal',
															widths : [ '52%', '48%' ],
															label : editor.lang.image.height,
															onKeyUp : onSizeChange,
															validate: function() {
																var aMatch = this.getValue().match( regexGetSizeOrEmpty );
																if ( !aMatch ) {
																	alert( editor.lang.common.validateNumberFailed );
																}
																return !!aMatch;
															},
															setup : setupDimension,
															commit : function( type, element ) {
																var value = false;
																if ( type == IMAGE ) {
																	value = this.getValue();
																	if ( value ) {
																		element.setAttribute( 'height', value );
																	} else if ( !value && this.isChanged() ) {
																		element.removeAttribute( 'height' );
																	}
																} else if ( type == PREVIEW ) {
																	value = this.getValue();
																	var aMatch = value.match( regexGetSize );
																	if ( !aMatch ) {
																		var oImageOriginal = this.getDialog().originalElement;
																		if ( oImageOriginal.getCustomData( 'isReady' ) == 'true' ) {
																			element.setStyle( 'height',  oImageOriginal.$.height + 'px');
																		}
																	} else {
																		element.setStyle( 'height', value + 'px');
																	}
																} else if ( type == CLEANUP ) {
																	element.setStyle( 'height', '0px' );	// If removeAttribute doesn't work.
																	element.removeAttribute( 'height' );
																	element.removeStyle( 'height' );
																}
															}
														}
													]
												},
												{	// lock and reset
													type : 'html',
													style : 'margin-top:10px;width:40px;height:24px;',
													onLoad : function() {
														// Activate Reset button
														var	resetButton = this.getElement().getDocument().getById( 'btnResetSize' ),
															ratioButton = this.getElement().getDocument().getById( 'btnLockSizes' );
														if ( resetButton ) {
															resetButton.on('click', function() {
																	resetSize( this );
															}, this.getDialog() );
															resetButton.on( 'mouseover', function() {
																	this.addClass( 'cke_btn_over' );
															}, resetButton );
															resetButton.on( 'mouseout', function() {
																	this.removeClass( 'cke_btn_over' );
															}, resetButton );
														}
														// Activate (Un)LockRatio button
														if ( ratioButton ) {
															ratioButton.on( 'click', function() {
																	var locked = switchLockRatio( this ),
																		oImageOriginal = this.originalElement,
																		width = this.getValueOf( 'info', 'txtWidth' );

																	if ( oImageOriginal.getCustomData( 'isReady' ) == 'true' && width ) {
																		var height = oImageOriginal.$.height / oImageOriginal.$.width * width;
																		if ( !isNaN( height ) ) {
																			this.setValueOf( 'info', 'txtHeight', Math.round( height ) );
																			updatePreview( this );
																		}
																	}
															}, this.getDialog() );
															ratioButton.on( 'mouseover', function()	{
																	this.addClass( 'cke_btn_over' );
															}, ratioButton );
															ratioButton.on( 'mouseout', function() {
																	this.removeClass( 'cke_btn_over' );
															}, ratioButton );
														}
													},
													html : '<div>'+
														'<a href="javascript:void(0);" tabindex="-1" title="' + editor.lang.image.lockRatio +
														'" class="cke_btn_locked" id="btnLockSizes"></a>' +
														'<a href="javascript:void(0);" tabindex="-1" title="' + editor.lang.image.resetSize +
														'" class="cke_btn_reset" id="btnResetSize"></a>'+
														'</div>'
												}
											]
										},
										{
											type : 'text',
											id : 'txtBorder',
											widths: [ '35%','65%' ],
											labelLayout : 'horizontal',
											label : editor.lang.image.border,
											'default' : '',
											onKeyUp : function()
											{
												updatePreview( this.getDialog() );
											},
											validate: function()
											{
												var func = CKEDITOR.dialog.validate.integer( editor.lang.common.validateNumberFailed );
												return func.apply( this );
											},
											setup : function( type, element ) {
												if ( type == IMAGE ) {
													this.setValue( element.getAttribute( 'border' ) );
												}
											},
											commit : function( type, element ) {
												if ( type == IMAGE ) {
													if ( this.getValue() || this.isChanged() ) {
														element.setAttribute( 'border', this.getValue() );
													}
												} else if ( type == PREVIEW ) {
													var value = parseInt( this.getValue(), 10 );
													value = isNaN( value ) ? 0 : value;
													element.setAttribute( 'border', value );
													element.setStyle( 'border', value + 'px solid black' );
												} else if ( type == CLEANUP ) {
													element.removeAttribute( 'border' );
													element.removeStyle( 'border' );
												}
											}
										},
										{
											type : 'text',
											id : 'txtHSpace',
											widths: [ '35%','65%' ],
											labelLayout : 'horizontal',
											label : editor.lang.image.hSpace,
											'default' : '5',
											onKeyUp : function()
											{
												updatePreview( this.getDialog() );
											},
											validate: function()
											{
												var func = CKEDITOR.dialog.validate.integer( editor.lang.common.validateNumberFailed );
												return func.apply( this );
											},
											setup : function( type, element ) {
												if ( type == IMAGE ) {
													var value = element.getAttribute( 'hspace' );
													if ( value != -1 ) {			// In IE empty = -1.
														this.setValue( value );
													}
												}
											},
											commit : function( type, element ) {
												if ( type == IMAGE ) {
													if ( this.getValue() || this.isChanged() ) {
														element.setAttribute( 'hspace', this.getValue() );
													}
												} else if ( type == PREVIEW ) {
													var value = parseInt( this.getValue(), 10 );
													value = isNaN( value ) ? 0 : value;
													element.setAttribute( 'hspace', value );
													element.setStyle( 'margin-left', value + 'px' );
													element.setStyle( 'margin-right', value + 'px' );
												} else if ( type == CLEANUP ) {
													element.removeAttribute( 'hspace' );
													element.removeStyle( 'margin-left' );
													element.removeStyle( 'margin-right' );
												}
											}
										},
										{
											type : 'text',
											id : 'txtVSpace',
											widths: [ '35%','65%' ],
											labelLayout : 'horizontal',
											label : editor.lang.image.vSpace,
											'default' : '5',
											onKeyUp : function()
											{
												updatePreview( this.getDialog() );
											},
											validate: function()
											{
												var func = CKEDITOR.dialog.validate.integer( editor.lang.common.validateNumberFailed );
												return func.apply( this );
											},
											setup : function( type, element ) {
												if ( type == IMAGE ) {
													this.setValue( element.getAttribute( 'vspace' ) );
												}
											},
											commit : function( type, element ) {
												if ( type == IMAGE ) {
													if ( this.getValue() || this.isChanged() ) {
														element.setAttribute( 'vspace', this.getValue() );
													}
												} else if ( type == PREVIEW ) {
													var value = parseInt( this.getValue(), 10 );
													value = isNaN( value ) ? 0 : value;
													element.setAttribute( 'vspace', this.getValue() );
													element.setStyle( 'margin-top', value + 'px' );
													element.setStyle( 'margin-bottom', value + 'px' );
												} else if ( type == CLEANUP ) {
													element.removeAttribute( 'vspace' );
													element.removeStyle( 'margin-top' );
													element.removeStyle( 'margin-bottom' );
												}
											}
										},
										{
											id : 'cmbAlign',
											type : 'select',
											labelLayout : 'horizontal',
											widths : [ '34%','66%' ],
											style : 'width:100%;',
											label : editor.lang.image.align,
											'default' : '',
											items :
											[
												[ editor.lang.common.notSet , ''],
												[ editor.lang.image.alignLeft , 'left'],
												[ editor.lang.image.alignRight , 'right']
											],
											onChange : function()
											{
												updatePreview( this.getDialog() );
											},
											setup : function( type, element ) {
												if ( type == IMAGE ) {
													this.setValue( element.getAttribute( 'align' ) );
												}
											},
											commit : function( type, element ) {
												var value = this.getValue();
												if ( type == IMAGE ) {
													if ( value || this.isChanged() ) {
														element.setAttribute( 'align', value );
													}
												} else if ( type == PREVIEW ) {
													element.setAttribute( 'align', this.getValue() );
													if ( value == 'absMiddle' || value == 'middle' ) {
														element.setStyle( 'vertical-align', 'middle' );
													} else if ( value == 'top' || value == 'textTop' ) {
														element.setStyle( 'vertical-align', 'top' );
													} else {
														element.removeStyle( 'vertical-align' );
													}
													if ( value == 'right' || value == 'left' ) {
														element.setStyle( 'styleFloat', value );
													} else {
														element.removeStyle( 'styleFloat' );
													}
												} else if ( type == CLEANUP ) {
													element.removeAttribute( 'align' );
												}
											}
										}
									]
								},
								{
									type : 'vbox',
									height : '250px',
									style: 'max-width:250px;max-height:250px;',
									children :
									[
										{
											type : 'html',
											html : '<div>' + CKEDITOR.tools.htmlEncode( editor.lang.image.preview ) +'<br>'+
											'<div id="ImagePreviewLoader" style="display:none"><div class="loading">&nbsp;</div></div>'+
											'<div id="ImagePreviewBox">'+
											'<a href="" target="_blank" onclick="return false;" id="previewLink">'+
											'<img id="previewImage" src="" alt="" /></a>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. '+
											'Maecenas feugiat consequat diam. Maecenas metus. Vivamus diam purus, cursus a, commodo non, facilisis vitae, '+
											'nulla. Aenean dictum lacinia tortor. Nunc iaculis, nibh non iaculis aliquam, orci felis euismod neque, sed ornare massa mauris sed velit.' +
											'</div>'+'</div>'
										}
									]
								}
							]
						},
						{	type : 'html',
							html :	'<div style="height:1px;width:1px;overflow:hidden"><img id="imageStamp"/></div>' + 
									'<div id="imageBox" style="height:1px;width:1px;overflow:hidden"></div>'
						}


					]
				}
			]
		};
	};

	CKEDITOR.dialog.add('bfimage', function( editor )
		{
			return imageDialog(editor, 'image');
		});

}());