CKEDITOR.plugins.add( 'mark',
{
	init: function( editor )
	{
		editor.addCommand( 'markCommand', new CKEDITOR.dialogCommand( 'markDialog' ) );
		editor.ui.addButton( 'mark',
			{
				label: 'أدات تلوين خلفية النص',
				command: 'markCommand',
				icon: this.path + 'mark.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 );
						};
					} );
				});
			}
		}
		CKEDITOR.dialog.add( 'markDialog', function( editor )
		{
			var selected  = 'نص بخلفية ملونة';
			return {
				title : 'أدات تلوين خلفية النص',
				width : 400,
				height : 'auto',
				setup: function (){
					selected = editor.getSelection().getSelectedText();
				}, 
				contents :
				[
					{
						id : 'mark',
						label : 'mark',
						elements :
						[
							{
								type : 'textarea',
								id : 'text',
								label : 'النص',
								//default: selected,
								validate : CKEDITOR.dialog.validate.notEmpty('لا يمكننى الموافقة على حقل فارغ'),
								required : true,
								commit : function( selected )
								{
									selected = this.getValue();
								},
								onLoad: function (editor){
									this.setValue(selected);
								}
							},
							{
								type : 'text',
								id : 'bgColor',
								label : 'لون الخلفية',
								default:'black',
								style: 'width:100px;float:right',
								required : false,
								onClick : function()
								{
									var self = this;
									getDialogValue( 'colordialog', function( colorDialog )
									{
										self.getDialog().getContentElement( 'mark', 'bgColor' ).setValue(
											colorDialog.getContentElement( 'picker', 'selectedColor' ).getValue()
										);
									} );
								},
								commit : function( me )
								{
									me.bgColor = this.getValue();
								}
							},
							{
								type : 'button',
								id : 'buttonId',
								label : 'اختر اللون',
								title : 'اختر اللون',
								onClick : function()
								{
									var self = this;
									getDialogValue( 'colordialog', function( colorDialog )
									{
										self.getDialog().getContentElement( 'mark', 'bgColor' ).setValue(
											colorDialog.getContentElement( 'picker', 'selectedColor' ).getValue()
										);
									} );
								}
							}
						]
					}
				],
				onOk : function()
				{
					me = {},
					this.commitContent( me );
					editor.insertHtml('[mark=' + me.bgColor + ']' + selected + '[/mark]');
				}
// 				,
// 				onLoad : function()
// 				{
// 					this.getDialog().getContentElement('mark','text').setValue('ccccccccccccccccccccccccccccc');
// // 					if (editor.getSelection().getSelectedText()) {
// // 						alert(editor.getSelection().getSelectedText());
// // 						//var self = this;
// // 						//self.getDialog().getContentElement( 'mark', 'text' ).setValue(editor.getSelection().getSelectedText());
// // 						
// // 					}
// 				}
			};
		});
	}
});