CKEDITOR.plugins.add( 'aimg',
{
	init: function( editor )
	{
		editor.addCommand( 'aimgCommand', new CKEDITOR.dialogCommand( 'aimgDialog' ) );
		editor.ui.addButton( 'aimg',
			{
				label: 'ادراج صورة بخيارات متقدمة',
				command: 'aimgCommand',
				icon: this.path + 'aimg.gif'
			}
		);
		
		function getDialogValue( dialogName, callback )
		{
			var onOk = function()
			{
				releaseHandlers( this );
				callback( this, this._.parentDialog );
				this._.parentDialog.changeFocus( true );
			};
			var onCancel = function()
			{
				releaseHandlers( this );
				this._.parentDialog.changeFocus();
			};
			var releaseHandlers = function( dialog )
			{
				dialog.removeListener( 'ok', onOk );
				dialog.removeListener( 'cancel', onCancel );
			};
			var bindToDialog = function( dialog )
			{
				dialog.on( 'ok', onOk );
				dialog.on( 'cancel', onCancel );
			};
			editor.execCommand( dialogName );
			if ( editor._.storedDialogs.colordialog )
				bindToDialog( editor._.storedDialogs.colordialog );
			else
			{
				CKEDITOR.on( 'dialogDefinition', function( e )
				{
					if ( e.data.name != dialogName )
						return;

					var definition = e.data.definition;

					e.removeListener();
					definition.onLoad = CKEDITOR.tools.override( definition.onLoad, function( orginal )
					{
						return function()
						{
							bindToDialog( this );
							definition.onLoad = orginal;
							if ( typeof orginal == 'function' )
								orginal.call( this );
						};
					} );
				});
			}
		}

		
		// dialog
		CKEDITOR.dialog.add( 'aimgDialog', function( editor )
		{
			return {
				title : 'ادراج صورة :: المتقدم',
				width : 400,
				height : 200,
				contents :
				[
					{
						id : 'aimg',
						label : 'خيارات الصورة',
						elements :
						[

							{
								type : 'text',
								id : 'url',
								label : 'الرابط',
				     				validate: CKEDITOR.dialog.validate.regex(/(ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?/, 'برجاء ادخال رابط صحيح'),
								required : true,
								commit : function( me )
								{
									me.url = this.getValue();
								}
							},
		       					{
								type : 'select',
								id : 'imgAlign',
								label : 'محازاة  الصورة',
								'default' : 'none',
								style: 'width:100px;float:right',
								items :
								[
									[ 'يمين', 'right' ],
									//[ 'وسط', 'middle' ],
									[ 'شمال', 'left' ],
									[ 'بدون - افتراضى', 'none' ]
								],
								commit : function( me )
								{
									me.imgAlign = this.getValue();
								}
							},
							{
								type : 'html',
								html : '<center>يمكنك ايضا اختيار شكل مخصص للاطار من اعلى</center>'
							}
						]
					},{
						id : 'border',
						label : 'خيارات الاطار',
						elements :
						[
							{
								type : 'text',
								id : 'borderSize',
								label : 'حجم الاطار - px',
								default : '0',
								style: 'width:50px;float:right',
								validate : CKEDITOR.dialog.validate.integer( 'برجاء ادخال رقم صحيح' ),

								required : false,
								commit : function( me )
								{
									me.borderSize = this.getValue();
								}
							},
							{
								type : 'select',
								id : 'borderType',
								label : 'نوع الاطار',
								'default' : 'none',
								style: 'width:100px;float:right',
								items :
								[
									[ 'مصمت', 'solid' ],
									[ 'مخفى', 'hidden' ],
									[ 'منقط', 'dotted' ],
									[ 'متقطع', 'dashed' ],
									[ 'مزدوج', 'double' ],
									[ 'أخدود', 'groove' ],
									[ 'تل', 'ridge' ],
									[ 'مغروز', 'inset' ],
									[ 'مرتفع', 'outset' ],
									[ 'بدون', 'none' ]
								],
								commit : function( me )
								{
									me.borderType = this.getValue();
								}
							},
							{
								type : 'text',
								id : 'borderColor',
								label : 'لون الاطار',
								default:'black',
								style: 'width:100px;float:right',
								//validate : CKEDITOR.dialog.validate.integer( 'برجاء ادخال رقم صحيح' ),
								required : false,
								onClick : function()
								{
									var self = this;
									getDialogValue( 'colordialog', function( colorDialog )
									{
										self.getDialog().getContentElement( 'border', 'borderColor' ).setValue(
											colorDialog.getContentElement( 'picker', 'selectedColor' ).getValue()
										);
									} );
								},
								commit : function( me )
								{
									me.borderColor = this.getValue();
								}
							},
							{
								type : 'button',
								id : 'buttonId',
								label : 'اختر اللون',
								title : 'اختر اللون',
								onClick : function()
								{
									var self = this;
									getDialogValue( 'colordialog', function( colorDialog )
									{
										self.getDialog().getContentElement( 'border', 'borderColor' ).setValue(
											colorDialog.getContentElement( 'picker', 'selectedColor' ).getValue()
										);
									} );
								}
							}
						]
					},{
						id : 'dimensions',
						label : 'ابعاد الصورة',
						elements :
						[
							{
								type : 'html',
								html : '<center>اترك الابعاد صفر ليتم استخدام الحجم الافتراضى</center>'
							},
							{
								type : 'text',
								id : 'imgWidth',
								label : 'العرض - بيكسل',
								style: 'width:50px;float:right',
								default:0,
				     				validate: CKEDITOR.dialog.validate.integer('برجاء ادخال رقم صحيح'),
								required : true,
								commit : function( me )
								{
									me.imgWidth = this.getValue();
								}
							},
							{
								type : 'text',
								id : 'imgHeight',
								label : 'الارتفاع - بيكسل',
								style: 'width:50px;float:right',
								default:0,
				     				validate: CKEDITOR.dialog.validate.integer('برجاء ادخال رقم صحيح'),
								required : true,
								commit : function( me )
								{
									me.imgHeight = this.getValue();
								}
							},
							{
								type : 'html',
								html : '<center>هنا يمكنك تحديد ابعاد الصورة  - اذا اخترت السماح بالتكبير  عند الضغط على الصورة ستظهر بالحجم الكامل</center>'
							}
						]
					}
				],
				onOk : function()
				{
					var dialog = this,
					me = {},
					link = editor.document.createElement( 'span' );
					this.commitContent( me );
					editor.insertHtml('[aimg=borderSize=' + me.borderSize + ',borderType=' + me.borderType + ',borderColor=' + me.borderColor + ',imgAlign=' + me.imgAlign + ',imgWidth=' + me.imgWidth + ',imgHeight=' + me.imgHeight +  ']' + link.setHtml( me.url ) + '[/aimg]');
				}
			};
		});
	}
});