CKEDITOR.plugins.add( 'gradient',
{
	
	init: function( editor )
	{
		editor.addCommand( 'gradientCommand', new CKEDITOR.dialogCommand( 'gradientDialog' ) );
		editor.ui.addButton( 'gradient',
			{
				label: 'ادراج نص بتدرج لوني',
				command: 'gradientCommand',
				icon: this.path + 'gradient.gif'
			}
		);
		var icolors = new Array("00BFFF","FF4500","800080","008080","D2691E");
		var browser = "unknown";
		var version = 0;
		if (navigator.userAgent.indexOf("Opera") >= 0)
			browser = "opera";
		else if (navigator.userAgent.indexOf("obot") >= 0)
			browser = "robot";
		else if (navigator.appName.indexOf("etscape") >= 0)
			browser = "netscape";
		else if (navigator.appName.indexOf("icrosoft") >= 0)
			browser = "msie";
		version = parseFloat(navigator.appVersion);
		if (isNaN(version)) version = 0;
		if ((browser == "msie")&&(version == 2)) version = 3;
		var tohex = new Array(256);
		var hex = "0123456789ABCDEF";
		var count = 0;
		for (x=0; x<16; x++) {
			for (y=0; y<16; y++) {
				tohex[count] = hex.charAt(x) + hex.charAt(y);
				count++;
			}
		}

		function ColorCode(hexcode) {
			if (hexcode.length == 7) {
				this.r = parseInt(hexcode.substring(1,3),16);
				this.g = parseInt(hexcode.substring(3,5),16);
				this.b = parseInt(hexcode.substring(5,7),16);
			}
			else if (hexcode.length == 6) {
				this.r = parseInt(hexcode.substring(0,2),16);
				this.g = parseInt(hexcode.substring(2,4),16);
				this.b = parseInt(hexcode.substring(4,6),16);
			}
			else {
				this.r = this.g = this.b = 0;
				alert("Error: ColorCode constructor failed");
			}
			if (isNaN(this.r)||isNaN(this.g)||isNaN(this.b))
				alert("Error: ColorCode constructor failed");
		}
		function ColorList(hexcodes) {
			var i = 0;
			var c = 0;
			this.codes = new Array(Math.round(hexcodes.length/7));
			while (i < hexcodes.length) {
				if (isNaN(parseInt(hexcodes.substring(i,i+6),16))) ++i;
				else {
					this.codes[c] = new ColorCode(hexcodes.substring(i,i+6));
					i += 7;
					++c;
				}
			}
			this.len = c;
		}
		function interpolate (x1, y1, x3, y3, x2) {
			if (x3 == x1) return y1
			else return (x2-x1)*(y3-y1)/(x3-x1) + y1
		}
		function lowcolorindex (x, y, z) {
			if (y == 1) return 0
			else return Math.floor( (x*(z-1))/(y-1) )
		}
		function hicolorindex (x, y, z, low) {
			if ( low*(y-1) == x*(z-1) ) return low
			else if (y == 1) return 0
			else return Math.floor( (x*(z-1))/(y-1) + 1 )
		}
		function gradient(thetext) {
			var grad="";
			var thecolors=getValue(0);
			thecolors+=getValue(1);
			thecolors+=getValue(2);
			thecolors+=getValue(3);
			thecolors+=getValue(4);
			thecolors=thecolors.substr(1);
			//return;
			if (((browser == "netscape")||(browser == "msie")||(browser == "opera"))&&(version>=3.0)) {
				var colors = new ColorList(thecolors);
				if (colors.len<2) return  thetext;
				var numcolors = colors.len;
				var numchars = thetext.length;
				var rr = 0;
				var gg = 0;
				var bb = 0;
				var lci = 0; //lower color index
				var hci = 0; //high color index
				for (i=0; i<numchars; ++i) {
					lci = lowcolorindex(i, numchars, numcolors);
					hci = hicolorindex(i, numchars, numcolors, lci);
					rr = Math.round(interpolate( lci/(numcolors-1), colors.codes[lci].r, hci/(numcolors-1), colors.codes[hci].r, i/(numchars-1)));
					gg = Math.round(interpolate( lci/(numcolors-1), colors.codes[lci].g, hci/(numcolors-1), colors.codes[hci].g, i/(numchars-1)));
					bb = Math.round(interpolate( lci/(numcolors-1), colors.codes[lci].b, hci/(numcolors-1), colors.codes[hci].b, i/(numchars-1)));
					if (browser == "opera") {
						rr = 255 - rr;
						gg = 255 - gg;
						bb = 255 - bb;
					}
					grad+='<span style="font-size:18px;color:#'+tohex[rr]+tohex[gg]+tohex[bb]+'">'+thetext.charAt(i)+'</span>';
					//grad+='<span style="color:rgb('+tohex[rr]+', '+tohex[gg]+', '+tohex[bb]+')">'+thetext.charAt(i)+'</span>';
					//grad+=thetext.charAt(i).fontcolor(tohex[rr]+tohex[gg]+tohex[bb]);
				}
			}
			else 
				grad=thetext;
			return grad;
		}
		function getValue(clr) {
			return " "+icolors[clr];
		}
		function gradient_preview() {
			gradient = "<div style='text-align:center;'>"+gradient("أدوات المودة المطورة للتحرير ـ معاينة التدرج")+"</div>";
			return gradient;
		}
		function gradient_template() {
			var i, t=template.options[template.selectedIndex].value.split(",");  
			clr1.selectedIndex=t[0];
			clr2.selectedIndex=t[1];
			clr3.selectedIndex=t[2];
			clr4.selectedIndex=t[3];
			clr5.selectedIndex=t[4];
			template.selectedIndex=0;
			gradient_preview();
		}
		//CKEDITOR.plugins.gradient.gradient_preview()
		gradient_preview_text = gradient_preview();
		
		CKEDITOR.dialog.add( 'gradientDialog', function( editor )
		{
			var url = '';
			var getId = function( id ){
				return CKEDITOR.tools.getNextId() + '_' + id;
			}
			var preview_code = getId('preview_code');
			var el_clr1 = getId('clr1');
			//CKEDITOR.tools.addFunction( 'gradient_preview' );
			return {
				title : 'ادراج نص بتدرج لوني',
				width : 400,
				height : 'auto',
				contents :
				[
					{
						id : 'gradient',
						label : 'gradient',
						elements :
						[

							{
								type : 'html',
								id:'preview',
								html : "<div id='" + preview_code + "'>معاينة التدرج</center>",
								onShow : function()
								{
									CKEDITOR.document.getById( preview_code ).setHtml(gradient_preview_text);
								}
							},
							{
								type : 'html',
								id:'tip',
								html : "عفوا خاصية معاينة التدرج و معاينة الالوان سيتم اصلاحها فى اصدار قادم ان شاء الله"
							},
							{
								type : 'select',
								id : 'clr1',
								label : 'لون 1',
								'default' : '00BFFF',
								style: 'background-color:#00BFFF;',
								items :
								[
									[ 'black', '000000' ],
									[ 'white', 'FFFFFF' ],
									[ 'skyblue', '00BFFF' ],
									[ 'royalblue', '4169E1' ],
									[ 'blue', '0000FF' ],
									[ 'darkblue', '00008B' ],
									[ 'tomato', 'FFA500' ],
									[ 'coral', 'right' ],
									[ 'orangered', 'FF6347' ],
									[ 'orangered', 'FF4500' ],
									[ 'crimson', 'DC143C' ],
									[ 'red', 'FF0000' ],
									[ 'firebrick', 'B22222' ],
									[ 'darkred', 'B22222' ],
									[ 'green', '008000' ],
									[ 'limegreen', '32CD32' ],
									[ 'seagreen', '2E8B57' ],
									[ 'deeppink', 'FF1493' ],
									[ 'purple', '800080' ],
									[ 'indigo', '4B0082' ],
									[ 'burlywood', 'DEB887' ],
									[ 'sandybrown', 'F4A460' ],
									[ 'sienna', 'F4A460' ],
									[ 'chocolate', 'D2691E' ],
									[ 'teal', '008080' ],
									[ 'silver', 'C0C0C0' ],
									[ 'gray', '808080' ]
								],
								commit : function( icolors )
								{
									icolors[0] = this.getValue();
								},
								onChange : function ( icolors ) {
									this.setStyle( 'background-color', '#ff0000' );
									icolors[0] = this.getValue();
								}
							},{
								type : 'select',
								id : 'clr2',
								label : 'لون 2',
								'default' : 'FF4500',
								style: 'background-color:#FF4500;',
								items :
								[
									[ 'black', '000000' ],
									[ 'white', 'FFFFFF' ],
									[ 'skyblue', '00BFFF' ],
									[ 'royalblue', '4169E1' ],
									[ 'blue', '0000FF' ],
									[ 'darkblue', '00008B' ],
									[ 'tomato', 'FFA500' ],
									[ 'coral', 'right' ],
									[ 'orangered', 'FF6347' ],
									[ 'orangered', 'FF4500' ],
									[ 'crimson', 'DC143C' ],
									[ 'red', 'FF0000' ],
									[ 'firebrick', 'B22222' ],
									[ 'darkred', 'B22222' ],
									[ 'green', '008000' ],
									[ 'limegreen', '32CD32' ],
									[ 'seagreen', '2E8B57' ],
									[ 'deeppink', 'FF1493' ],
									[ 'purple', '800080' ],
									[ 'indigo', '4B0082' ],
									[ 'burlywood', 'DEB887' ],
									[ 'sandybrown', 'F4A460' ],
									[ 'sienna', 'F4A460' ],
									[ 'chocolate', 'D2691E' ],
									[ 'teal', '008080' ],
									[ 'silver', 'C0C0C0' ],
									[ 'gray', '808080' ]
								],
								commit : function( icolors )
								{
									icolors[1] = this.getValue();
								},
								onChange : function ( icolors ) {
									this.setStyle( 'background-color', '#ff0000' );
									icolors[1] = this.getValue();
								}
							},{
								type : 'select',
								id : 'clr3',
								label : 'لون 3',
								'default' : '800080',
								style: 'background-color:#800080;',
								items :
								[
									[ 'black', '000000' ],
									[ 'white', 'FFFFFF' ],
									[ 'skyblue', '00BFFF' ],
									[ 'royalblue', '4169E1' ],
									[ 'blue', '0000FF' ],
									[ 'darkblue', '00008B' ],
									[ 'tomato', 'FFA500' ],
									[ 'coral', 'right' ],
									[ 'orangered', 'FF6347' ],
									[ 'orangered', 'FF4500' ],
									[ 'crimson', 'DC143C' ],
									[ 'red', 'FF0000' ],
									[ 'firebrick', 'B22222' ],
									[ 'darkred', 'B22222' ],
									[ 'green', '008000' ],
									[ 'limegreen', '32CD32' ],
									[ 'seagreen', '2E8B57' ],
									[ 'deeppink', 'FF1493' ],
									[ 'purple', '800080' ],
									[ 'indigo', '4B0082' ],
									[ 'burlywood', 'DEB887' ],
									[ 'sandybrown', 'F4A460' ],
									[ 'sienna', 'F4A460' ],
									[ 'chocolate', 'D2691E' ],
									[ 'teal', '008080' ],
									[ 'silver', 'C0C0C0' ],
									[ 'gray', '808080' ]
								],
								commit : function( icolors )
								{
									icolors[2] = this.getValue();
								},
								onChange : function ( icolors ) {
									this.setStyle( 'background-color', '#ff0000' );
									icolors[2] = this.getValue();
								}
							},{
								type : 'select',
								id : 'clr4',
								label : 'لون 4',
								'default' : '008080',
								style: 'background-color:#008080;',
								items :
								[
									[ 'black', '000000' ],
									[ 'white', 'FFFFFF' ],
									[ 'skyblue', '00BFFF' ],
									[ 'royalblue', '4169E1' ],
									[ 'blue', '0000FF' ],
									[ 'darkblue', '00008B' ],
									[ 'tomato', 'FFA500' ],
									[ 'coral', 'right' ],
									[ 'orangered', 'FF6347' ],
									[ 'orangered', 'FF4500' ],
									[ 'crimson', 'DC143C' ],
									[ 'red', 'FF0000' ],
									[ 'firebrick', 'B22222' ],
									[ 'darkred', 'B22222' ],
									[ 'green', '008000' ],
									[ 'limegreen', '32CD32' ],
									[ 'seagreen', '2E8B57' ],
									[ 'deeppink', 'FF1493' ],
									[ 'purple', '800080' ],
									[ 'indigo', '4B0082' ],
									[ 'burlywood', 'DEB887' ],
									[ 'sandybrown', 'F4A460' ],
									[ 'sienna', 'F4A460' ],
									[ 'chocolate', 'D2691E' ],
									[ 'teal', '008080' ],
									[ 'silver', 'C0C0C0' ],
									[ 'gray', '808080' ]
								],
								commit : function( icolors )
								{
									icolors[3] = this.getValue();
								},
								onChange : function ( icolors ) {
									this.setStyle( 'background-color', '#ff0000' );
									icolors[3] = this.getValue();
								}
							},{
								type : 'select',
								id : 'clr5',
								label : 'لون 5',
								'default' : 'D2691E',
								style: 'background-color:#D2691E;',
								items :
								[
									[ 'black', '000000' ],
									[ 'white', 'FFFFFF' ],
									[ 'skyblue', '00BFFF' ],
									[ 'royalblue', '4169E1' ],
									[ 'blue', '0000FF' ],
									[ 'darkblue', '00008B' ],
									[ 'tomato', 'FFA500' ],
									[ 'coral', 'right' ],
									[ 'orangered', 'FF6347' ],
									[ 'orangered', 'FF4500' ],
									[ 'crimson', 'DC143C' ],
									[ 'red', 'FF0000' ],
									[ 'firebrick', 'B22222' ],
									[ 'darkred', 'B22222' ],
									[ 'green', '008000' ],
									[ 'limegreen', '32CD32' ],
									[ 'seagreen', '2E8B57' ],
									[ 'deeppink', 'FF1493' ],
									[ 'purple', '800080' ],
									[ 'indigo', '4B0082' ],
									[ 'burlywood', 'DEB887' ],
									[ 'sandybrown', 'F4A460' ],
									[ 'sienna', 'F4A460' ],
									[ 'chocolate', 'D2691E' ],
									[ 'teal', '008080' ],
									[ 'silver', 'C0C0C0' ],
									[ 'gray', '808080' ]
								],
								commit : function( icolors )
								{
									icolors[4] = this.getValue();
								},
								onChange : function ( icolors ) {
									this.setStyle( 'background-color', '#ff0000' );
									icolors[4] = this.getValue();
								}
							}
						]
					}
				],
				onOk : function(  )
				{
					this.commitContent( icolors );
					this.commitContent( editor );
					var selected = ' text ';
					if  (editor.getSelection().getSelectedText()) {
						selected = editor.getSelection().getSelectedText();
					}
					editor.insertHtml('[grade="' + icolors[0] + ' ' + icolors[1] + ' ' + icolors[2] + ' ' + icolors[3] + ' ' + icolors[4] + '"]' + selected + '[/grade]');
				}
			};
		}
		);
	}
});