From bb2c1fbb8d62b3244338910b3f98f475b85b1bc8 Mon Sep 17 00:00:00 2001
From: Marc Delisle <marc@infomarc.info>
Date: Thu, 10 Jul 2008 17:53:31 +0000
Subject: [PATCH] color picker (work in progress)

---
 ChangeLog                               |   1 +
 js/mooRainbow/images/blank.gif          | Bin 0 -> 43 bytes
 js/mooRainbow/images/moor_arrows.gif    | Bin 0 -> 94 bytes
 js/mooRainbow/images/moor_boverlay.png  | Bin 0 -> 799 bytes
 js/mooRainbow/images/moor_cursor.gif    | Bin 0 -> 80 bytes
 js/mooRainbow/images/moor_slider.png    | Bin 0 -> 590 bytes
 js/mooRainbow/images/moor_woverlay.png  | Bin 0 -> 768 bytes
 js/mooRainbow/images/rainbow.png        | Bin 0 -> 794 bytes
 js/mooRainbow/mooRainbow.css            | 114 +++++
 js/mooRainbow/mooRainbow.js             | 558 ++++++++++++++++++++++++
 js/mootools-domready-rainbow.js         |  16 +
 libraries/Config.class.php              |   2 +-
 libraries/common.inc.php                |   4 +
 libraries/header_meta_style.inc.php     |   1 +
 main.php                                |  10 +
 themes/original/css/theme_left.css.php  |   7 +-
 themes/original/css/theme_right.css.php |   2 +-
 17 files changed, 710 insertions(+), 5 deletions(-)
 create mode 100644 js/mooRainbow/images/blank.gif
 create mode 100644 js/mooRainbow/images/moor_arrows.gif
 create mode 100644 js/mooRainbow/images/moor_boverlay.png
 create mode 100644 js/mooRainbow/images/moor_cursor.gif
 create mode 100644 js/mooRainbow/images/moor_slider.png
 create mode 100644 js/mooRainbow/images/moor_woverlay.png
 create mode 100644 js/mooRainbow/images/rainbow.png
 create mode 100644 js/mooRainbow/mooRainbow.css
 create mode 100644 js/mooRainbow/mooRainbow.js
 create mode 100644 js/mootools-domready-rainbow.js

diff --git a/ChangeLog b/ChangeLog
index 22f1c70c2..4e3570e1e 100644
--- a/ChangeLog
+++ b/ChangeLog
@@ -63,6 +63,7 @@ danbarry
 + rfe #1962383 [designer] Option to create a PDF page 
 - patch #2007196, Typos in comments, thanks to knittl - knittl
 - bug #1982315 [GUI] Comma and quote in ENUM, thanks to Joshua Hogendorn
++ [GUI] Color picker (work in progress, now just for original theme) 
 
 2.11.8.0 (not yet released)
 - patch #1987593 [interface] Table list pagination in navi, 
diff --git a/js/mooRainbow/images/blank.gif b/js/mooRainbow/images/blank.gif
new file mode 100644
index 0000000000000000000000000000000000000000..c9c195fd4ce0a3626dd32c50cebdf122ef169a8c
GIT binary patch
literal 43
rcmZ?wbhEHbWMp7uXkY+=|Ns9h{$yblVPIs?0r5dH3`|Tuj11NQ!N~_2

literal 0
HcmV?d00001

diff --git a/js/mooRainbow/images/moor_arrows.gif b/js/mooRainbow/images/moor_arrows.gif
new file mode 100644
index 0000000000000000000000000000000000000000..c57addcf58c7ef437e11c2e314c90f64f952b9a4
GIT binary patch
literal 94
zcmZ?wbhEHb)MVgfn8?KN|NsBI+<XQwQ2fcl$iTqFpabH8<QbUsL-bajep}PT7_zTB
sbisoU^IFdytDLXema=nN=Cv@xUvb6W*T3z2_AAa%p>Acz0tN<a06EDbPyhe`

literal 0
HcmV?d00001

diff --git a/js/mooRainbow/images/moor_boverlay.png b/js/mooRainbow/images/moor_boverlay.png
new file mode 100644
index 0000000000000000000000000000000000000000..7ac228b07eddaa0a4f96dd066257bed57ebdc15d
GIT binary patch
literal 799
zcmeAS@N?(olHy`uVBq!ia0y~yU}OMc4mJh`hM1xiX$%YuEa{HEjtmUzPnffIy<}iu
zkSuYHC<)F_D=AMbN@Z|N$xljE@XSq2PYp^<OsOn9nQFtpz_iiR#WAGf)|*>~TrCbF
ztOpA}{7W}86!LN5ty-0!pK!ruzct&2HE;hga?g@uT$8<>;Q$kZ4ie$Oz_6a7ft4Ww
zL~t-X5M|f^a@QUv1~CQ&h6V<PJcxt>LxVI!0wV(x0|$cw!vW*I1~{jIfq{wP$qyb5
zs1Aq{uqa3^IgA4FhL?s7tYEv~`W@65{;|WH1+m0IkHL<)39jxVg9Q`mJh;Ceuz`XB
z<eMFgFnh3jpPjLQg@v0zfWd)*!5kEtEDQn+2Y4Z2$HGv+%%B63Vr00(zyMXo$WX`E
zpsWx93R95d1^9{Ofumt31C{`u%kV=U=45h%8f-eqK?)29u72S-z{CLZivuVTurRFn
zC@BE-2@69<F>XJ@(n~lfFu>`Hh2aAi$ZgQ11x{akUJ4{I#I>@V@N!rf#lXP8;OXk;
Jvd$@?2>>5>h%NvC

literal 0
HcmV?d00001

diff --git a/js/mooRainbow/images/moor_cursor.gif b/js/mooRainbow/images/moor_cursor.gif
new file mode 100644
index 0000000000000000000000000000000000000000..9515a38e5f7ebe3c4d11ed9af8724cc2a443f62f
GIT binary patch
literal 80
zcmZ?wbhEHb<YC}pn8?KN=H(3r28RFt|1&T!DE?$&WME)o&|zR;U;xQ8Fey%H&Xj&2
jFA>3g#BJr#n{RG%#%m}gn72(kka_W=L*ya}Rt9STeI*!_

literal 0
HcmV?d00001

diff --git a/js/mooRainbow/images/moor_slider.png b/js/mooRainbow/images/moor_slider.png
new file mode 100644
index 0000000000000000000000000000000000000000..9f4c47bf6b6e33c2781f03f51a587edb73827eee
GIT binary patch
literal 590
zcmeAS@N?(olHy`uVBq!ia0y~yU=U_tU}WH6Vqjpn$9_wSfq{V~-O<;Pfnog#bJnhx
z3=9mCC9V-A!TD(=<%vb942~)JNvR5+xryniL8*x;m4zo$Z5S9BA9%VrhE&{ob6auq
zCI=C=gc*q*DngwuN)tWQCZ9|(n)z=1E)eCTHW@6aa!B_5kDt=>3Z6@+Z?}K@X3pmK
z?~bkK2>;U+G)?mKoYaGxQX)65i8RxRo~Au5dz$pL=xNr|s;99}_FVGY_{8~1@1=gF
zRi;!XRi;%YR;E@aSEm0=xViC7B%hA^G~v@TpC0-o{?z!;Pu;kPb2{qNlutLNp5GKa
z^Un(txs(ZxY?4pzpV;yA-GvQnBExjNr?H-%lX}c3RdT0KWSUO#G}hCTQjcy*ySX7J
za$Ur_$h?TW$afL%BIP3LUdpTw^qug3Y0u*PbqkeG3!gSV&3#(?wDf7~)9k1FQqLD9
zSZ<mVaZX2kn*X%*>Ze<uo+(PQ+$0n6O~-l~|FrUH=F`HbiBC(PrasMmT1EL(my7-r
z<}2Ty`r+uO14ZYHju)LSI$U(N=;)@@o2V{Z`Fzuq)MG~JksEX(!*sHz@p|)KSme_G
z&5=zqWrE|si9Ocu_-s!%K0Q&CWVtye!Y(qa;oCIs(=(qQDN3>2@FucMM_%W>PQK21
z9ethiI{rHSI))D2LcLi{e+(qE8@^4eo@PBQdYbgK>}lH5bWgXXp52rbxk)GDnU3+a
iKX#4vh5v*T7~H;Tue{iixSN52fx*+&&t;ucLK6Uh83+vk

literal 0
HcmV?d00001

diff --git a/js/mooRainbow/images/moor_woverlay.png b/js/mooRainbow/images/moor_woverlay.png
new file mode 100644
index 0000000000000000000000000000000000000000..c3f3e96ea645144e3707bb853a652e3c472318d2
GIT binary patch
literal 768
zcmeAS@N?(olHy`uVBq!ia0y~yU}OMc4mJh`hM1xiX$%YuEa{HEjtmUzPnffIy<}iu
zkSuYHC<)F_D=AMbN@Z|N$xljE@XSq2PYp^<OsOn9nQFtpz%<Fz#WAGf)|)HVd<_Z$
z4hOIPo?rQQixg|q1&hf7tis$=w&%2WSh$O<Te|gi?b$z>YoFabGg0<@@rS7QHAk$A
z582gx%uVaN_J7Y)ovZUM-Y(^Ru$_g0g+YM90pvVtF&H<nDljxKFfcK2Fi?v@J(J)r
k8a0x_5ZH5*Rf1vCl-K`cJ{@pkU|?YIboFyt=akR{0BE*zNdN!<

literal 0
HcmV?d00001

diff --git a/js/mooRainbow/images/rainbow.png b/js/mooRainbow/images/rainbow.png
new file mode 100644
index 0000000000000000000000000000000000000000..a62ec9049601a7885081d2b396f35ac9780a8ac9
GIT binary patch
literal 794
zcmeAS@N?(olHy`uVBq!ia0y~yU=RRd4mJh`2Kmqb6B!s7Sc;uILpV4%IBGajIv5xj
zI14-?iy0WWg+Q3`(%rg03=9lvC9V-A!TD(=<%vb93_-5J{-Ht6uE7d^{visX!LBX}
zZvH_Eu72*Gey-mRJt$&eU=Rc8a4t$sEXmBzQwYh-O=U1J(Kj&EH!wfrWw@1rfhoh&
z#WBR9w|CNB@902@WA)GPRQKQO`1xw-L=~=O9o<U<*;hI{9tjN;6x7mNS~4L>{iS?@
znEG-**6-&eb*?^A336QG?09#I#@e3-fiF#;&Eqq_r6pGL{P|zo_s5mDT(ep7ZE6MU
z8HTwI90rVub_+f-8?ad%e95UfS7VW*;*up3A|LH<s8x+)n%OpQ`Py&Y&m|nCjTb%0
zU_QKV(Isb=XFKFKtUuzOpk-m48NHHa(;wMXF~bQRE$aoRIn4Ub@NMc3mL8X9>AIqu
zC#uH>cycdsVb8T$E-A~m;IVE@TXi1ut8>a1zvt^t%{ijAUNKqBO6EYf`$a$D8EyJz
zyc0g@FWC1vB&F_J&`Gx|N5fql9&NQdl-=vJ*!AD4Q)wHIe2Z+|arxMxZ`amx8XcVJ
z8GSTo&8J!S|ERQGmvZ%XG^;;!Dzh=>>e6MV%oC;7h3|L#8|t~*w(rb(MR{rSbLqE|
zEvF~%4O+Cy)UR^F1y^&<-QD}{-kZ&N?9lr-ZqeWs_uKXt->tNqp1d{YNZIX7?Vii?
zy_5y6*w{Cu*(UZ0Zkf10Oi|_Iqkrda{^5K*RcPDobH?9!Wml@O+iSm(6|vNtv-?0F
z=NXpe>PsX8C4Q{G<R|=dwU+jB)>ToL!z7j~PknN`U-=uKx1PbASed^(|9GvI3b!ui
zbz!nuF6q;JHmNh_>QPPpOY^;cpKDh&-)(X0$NSg53Mx_}ZLzEl?aT~0^Fvo;`o35s
z-I(xx0f#}2d4*a6muBEg#TL~IAH@uKANff$Pn6=^-92kL$Sv2C@3VF|rF9;V@etNK
tY^$KkeLH%G+?TiC;<C%%nKA!i<YBqNnenW3GXnzygQu&X%Q~loCIGYxO8@`>

literal 0
HcmV?d00001

diff --git a/js/mooRainbow/mooRainbow.css b/js/mooRainbow/mooRainbow.css
new file mode 100644
index 000000000..764664e1e
--- /dev/null
+++ b/js/mooRainbow/mooRainbow.css
@@ -0,0 +1,114 @@
+/***
+ *  - mooRainbow: defaultCSS
+ * author: w00fz <w00fzIT@gmail.com>
+ */
+
+#mooRainbow { font-size: 11px; color: #000; }
+
+.moor-box {
+	width: 390px; 
+	height: 310px; 
+	border: 1px solid #636163; 
+	background-color: #f9f9f9;
+}
+.moor-overlayBox {
+	width: 256px; /* Width and Height of the overlay must be setted here: default 256x256 */
+	height: 256px; 
+	margin-top: 9px; 
+	margin-left: 9px;
+	border: 1px solid #000;
+}
+.moor-slider {
+	border: 1px solid #000;
+	margin-top: 9px; 
+	margin-left: 280px;
+	width: 19px; /* if you want a bigger or smaller slider... */
+	height: 256px;
+}
+.moor-colorBox {
+	border: 1px solid #000; 
+	width: 59px; 
+	height: 68px; 
+	margin-top: 20px; 
+	margin-left: 315px;
+}
+.moor-currentColor { /* Bottom Box Color, the backup one */
+	margin-top: 55px; 
+	margin-left: 316px; 
+	width: 59px; 
+	height: 34px;
+}
+.moor-okButton {
+	font-family: Tahoma;
+	font-weight: bold;
+	font-size: 11px;
+	margin-top: 278px;
+	margin-left: 8px;
+	background: #e6e6e6;
+	height: 23px;
+	border: 1px solid #d6d6d6;
+	border-left-color: #f5f5f5;
+	border-top-color: #f5f5f5;
+}
+#mooRainbow label {
+	font-family: mono;
+}
+/* Following are just <label> */
+.moor-rLabel {
+	margin-top: 100px;
+	margin-left: 315px;
+}
+.moor-gLabel {
+	margin-top: 125px;
+	margin-left: 315px;
+}
+.moor-bLabel {
+	margin-top: 150px;
+	margin-left: 315px;
+}
+.moor-HueLabel {
+	margin-top: 190px;
+	margin-left: 315px;
+}
+span.moor-ballino { /* Style hue ° (degree) !! */
+	margin-top: 190px;
+	margin-left: 370px;
+}
+.moor-SatuLabel {
+	margin-top: 215px;
+	margin-left: 315px;
+}
+.moor-BrighLabel {
+	margin-top: 240px;
+	margin-left: 315px;
+}
+.moor-hexLabel {
+	margin-top: 275px;
+	margin-left: 280px;
+}
+
+/* <input> */
+.moor-rInput, .moor-gInput, .moor-bInput, .moor-HueInput, .moor-SatuInput, .moor-BrighInput { 
+	width: 30px;
+}
+.moor-hexInput {
+	width: 55px;
+}
+.moor-cursor {
+	background-image: url(images/moor_cursor.gif); 
+	width: 12px;
+	height: 12px;
+}
+.moor-arrows {
+	background-image: url(images/moor_arrows.gif);
+	top: 9px; 
+	left: 270px;
+	width: 41px;
+	height: 9px;
+}
+.moor-chooseColor { /* Top Box Color, the choosen one */
+	margin-top: 21px; 
+	margin-left: 316px; 
+	width: 59px; 
+	height: 34px;
+}
\ No newline at end of file
diff --git a/js/mooRainbow/mooRainbow.js b/js/mooRainbow/mooRainbow.js
new file mode 100644
index 000000000..63bab9141
--- /dev/null
+++ b/js/mooRainbow/mooRainbow.js
@@ -0,0 +1,558 @@
+/***
+ * MooRainbow
+ *
+ * @version		1.11
+ * @license		MIT-style license
+ * @author		w00fz - < w00fzIT [at] gmail.com >
+ * @infos		http://moorainbow.woolly-sheep.net
+ * @copyright	Author
+ * 
+ *
+ */
+ 
+var MooRainbow = new Class({
+	options: {
+		id: 'mooRainbow',
+		prefix: 'moor-',
+		imgPath: 'images/',
+		startColor: [255, 0, 0],
+		wheel: false,
+		onComplete: Class.empty,
+		onChange: Class.empty
+	},
+	
+	initialize: function(el, options) {
+		this.element = $(el); if (!this.element) return;
+		this.setOptions(options);
+		
+		this.sliderPos = 0;
+		this.pickerPos = {x: 0, y: 0};
+		this.backupColor = this.options.startColor;
+		this.currentColor = this.options.startColor;
+		this.sets = {
+			rgb: [],
+			hsb: [],
+			hex: []	
+		};
+		this.pickerClick = this.sliderClick  = false;
+		if (!this.layout) this.doLayout();
+		this.OverlayEvents();
+		this.sliderEvents();
+		this.backupEvent();
+		if (this.options.wheel) this.wheelEvents();
+		this.element.addEvent('click', function(e) { this.toggle(e); }.bind(this));
+				
+		this.layout.overlay.setStyle('background-color', this.options.startColor.rgbToHex());
+		this.layout.backup.setStyle('background-color', this.backupColor.rgbToHex());
+
+		this.pickerPos.x = this.snippet('curPos').l + this.snippet('curSize', 'int').w;
+		this.pickerPos.y = this.snippet('curPos').t + this.snippet('curSize', 'int').h;
+		
+		this.manualSet(this.options.startColor);
+		
+		this.pickerPos.x = this.snippet('curPos').l + this.snippet('curSize', 'int').w;
+		this.pickerPos.y = this.snippet('curPos').t + this.snippet('curSize', 'int').h;
+		this.sliderPos = this.snippet('arrPos') - this.snippet('arrSize', 'int');
+
+		if (window.khtml) this.hide();
+	},
+	
+	toggle: function() {
+		this[this.visible ? 'hide' : 'show']()
+	},
+	
+	show: function() {
+		this.rePosition();
+		this.layout.setStyle('display', 'block');
+		this.visible = true;
+	},
+	
+	hide: function() {
+		this.layout.setStyles({'display': 'none'});
+		this.visible = false;
+	},
+	
+	manualSet: function(color, type) {
+		if (!type || (type != 'hsb' && type != 'hex')) type = 'rgb';
+		var rgb, hsb, hex;
+
+		if (type == 'rgb') { rgb = color; hsb = color.rgbToHsb(); hex = color.rgbToHex(); } 
+		else if (type == 'hsb') { hsb = color; rgb = color.hsbToRgb(); hex = rgb.rgbToHex(); }
+		else { hex = color; rgb = color.hexToRgb(true); hsb = rgb.rgbToHsb(); }
+		
+		this.setMooRainbow(rgb);
+		this.autoSet(hsb);
+	},
+	
+	autoSet: function(hsb) {
+		var curH = this.snippet('curSize', 'int').h;
+		var curW = this.snippet('curSize', 'int').w;
+		var oveH = this.layout.overlay.height;
+		var oveW = this.layout.overlay.width;
+		var sliH = this.layout.slider.height;
+		var arwH = this.snippet('arrSize', 'int');
+		var hue;
+		
+		var posx = Math.round(((oveW * hsb[1]) / 100) - curW);
+		var posy = Math.round(- ((oveH * hsb[2]) / 100) + oveH - curH);
+
+		var c = Math.round(((sliH * hsb[0]) / 360)); c = (c == 360) ? 0 : c;
+		var position = sliH - c + this.snippet('slider') - arwH;
+		hue = [this.sets.hsb[0], 100, 100].hsbToRgb().rgbToHex();
+		
+		this.layout.cursor.setStyles({'top': posy, 'left': posx});
+		this.layout.arrows.setStyle('top', position);
+		this.layout.overlay.setStyle('background-color', hue);
+		this.sliderPos = this.snippet('arrPos') - arwH;
+		this.pickerPos.x = this.snippet('curPos').l + curW;
+		this.pickerPos.y = this.snippet('curPos').t + curH;
+	},
+	
+	setMooRainbow: function(color, type) {
+		if (!type || (type != 'hsb' && type != 'hex')) type = 'rgb';
+		var rgb, hsb, hex;
+
+		if (type == 'rgb') { rgb = color; hsb = color.rgbToHsb(); hex = color.rgbToHex(); } 
+		else if (type == 'hsb') { hsb = color; rgb = color.hsbToRgb(); hex = rgb.rgbToHex(); }
+		else { hex = color; rgb = color.hexToRgb(); hsb = rgb.rgbToHsb(); }
+
+		this.sets = {
+			rgb: rgb,
+			hsb: hsb,
+			hex: hex
+		};
+
+		if (!$chk(this.pickerPos.x))
+			this.autoSet(hsb);		
+
+		this.RedInput.value = rgb[0];
+		this.GreenInput.value = rgb[1];
+		this.BlueInput.value = rgb[2];
+		this.HueInput.value = hsb[0];
+		this.SatuInput.value =  hsb[1];
+		this.BrighInput.value = hsb[2];
+		this.hexInput.value = hex;
+		
+		this.currentColor = rgb;
+
+		this.chooseColor.setStyle('background-color', rgb.rgbToHex());
+	},
+	
+	parseColors: function(x, y, z) {
+		var s = Math.round((x * 100) / this.layout.overlay.width);
+		var b = 100 - Math.round((y * 100) / this.layout.overlay.height);
+		var h = 360 - Math.round((z * 360) / this.layout.slider.height) + this.snippet('slider') - this.snippet('arrSize', 'int');
+		h -= this.snippet('arrSize', 'int');
+		h = (h >= 360) ? 0 : (h < 0) ? 0 : h;
+		s = (s > 100) ? 100 : (s < 0) ? 0 : s;
+		b = (b > 100) ? 100 : (b < 0) ? 0 : b;
+
+		return [h, s, b];
+	},
+	
+	OverlayEvents: function() {
+		var lim, curH, curW, inputs;
+		curH = this.snippet('curSize', 'int').h;
+		curW = this.snippet('curSize', 'int').w;
+		inputs = this.arrRGB.copy().concat(this.arrHSB, this.hexInput);
+
+		document.addEvent('click', function() { 
+			if(this.visible) this.hide(this.layout); 
+		}.bind(this));
+
+		inputs.each(function(el) {
+			el.addEvent('keydown', this.eventKeydown.bindWithEvent(this, el));
+			el.addEvent('keyup', this.eventKeyup.bindWithEvent(this, el));
+		}, this);
+		[this.element, this.layout].each(function(el) {
+			el.addEvents({
+				'click': function(e) { new Event(e).stop(); },
+				'keyup': function(e) {
+					e = new Event(e);
+					if(e.key == 'esc' && this.visible) this.hide(this.layout);
+				}.bind(this)
+			}, this);
+		}, this);
+		
+		lim = {
+			x: [0 - curW, (this.layout.overlay.width - curW)],
+			y: [0 - curH, (this.layout.overlay.height - curH)]
+		};
+
+		this.layout.drag = new Drag.Base(this.layout.cursor, {
+			limit: lim,
+			onStart: this.overlayDrag.bind(this),
+			onDrag: this.overlayDrag.bind(this),
+			snap: 0
+		});	
+		
+		this.layout.overlay2.addEvent('mousedown', function(e){
+			e = new Event(e);
+			this.layout.cursor.setStyles({
+				'top': e.page.y - this.layout.overlay.getTop() - curH,
+				'left': e.page.x - this.layout.overlay.getLeft() - curW
+			});
+			this.layout.drag.start(e);
+		}.bind(this));
+		
+		this.okButton.addEvent('click', function() {
+			if(this.currentColor == this.options.startColor) {
+				this.hide();
+				this.fireEvent('onComplete', [this.sets, this]);
+			}
+			else {
+				this.backupColor = this.currentColor;
+				this.layout.backup.setStyle('background-color', this.backupColor.rgbToHex());
+				this.hide();
+				this.fireEvent('onComplete', [this.sets, this]);
+			}
+		}.bind(this));
+	},
+	
+	overlayDrag: function() {
+		var curH = this.snippet('curSize', 'int').h;
+		var curW = this.snippet('curSize', 'int').w;
+		this.pickerPos.x = this.snippet('curPos').l + curW;
+		this.pickerPos.y = this.snippet('curPos').t + curH;
+		
+		this.setMooRainbow(this.parseColors(this.pickerPos.x, this.pickerPos.y, this.sliderPos), 'hsb');
+		this.fireEvent('onChange', [this.sets, this]);
+	},
+	
+	sliderEvents: function() {
+		var arwH = this.snippet('arrSize', 'int'), lim;
+
+		lim = [0 + this.snippet('slider') - arwH, this.layout.slider.height - arwH + this.snippet('slider')];
+		this.layout.sliderDrag = new Drag.Base(this.layout.arrows, {
+			limit: {y: lim},
+			modifiers: {x: false},
+			onStart: this.sliderDrag.bind(this),
+			onDrag: this.sliderDrag.bind(this),
+			snap: 0
+		});	
+	
+		this.layout.slider.addEvent('mousedown', function(e){
+			e = new Event(e);
+
+			this.layout.arrows.setStyle(
+				'top', e.page.y - this.layout.slider.getTop() + this.snippet('slider') - arwH
+			);
+			this.layout.sliderDrag.start(e);
+		}.bind(this));
+	},
+
+	sliderDrag: function() {
+		var arwH = this.snippet('arrSize', 'int'), hue;
+		
+		this.sliderPos = this.snippet('arrPos') - arwH;
+		this.setMooRainbow(this.parseColors(this.pickerPos.x, this.pickerPos.y, this.sliderPos), 'hsb');
+		hue = [this.sets.hsb[0], 100, 100].hsbToRgb().rgbToHex();
+		this.layout.overlay.setStyle('background-color', hue);
+		this.fireEvent('onChange', [this.sets, this]);
+	},
+	
+	backupEvent: function() {
+		this.layout.backup.addEvent('click', function() {
+			this.manualSet(this.backupColor);
+			this.fireEvent('onChange', [this.sets, this]);
+		}.bind(this));
+	},
+	
+	wheelEvents: function() {
+		var arrColors = this.arrRGB.copy().extend(this.arrHSB);
+
+		arrColors.each(function(el) {
+			el.addEvents({
+				'mousewheel': this.eventKeys.bindWithEvent(this, el),
+				'keydown': this.eventKeys.bindWithEvent(this, el)
+			});
+		}, this);
+		
+		[this.layout.arrows, this.layout.slider].each(function(el) {
+			el.addEvents({
+				'mousewheel': this.eventKeys.bindWithEvent(this, [this.arrHSB[0], 'slider']),
+				'keydown': this.eventKeys.bindWithEvent(this, [this.arrHSB[0], 'slider'])
+			});
+		}, this);
+	},
+	
+	eventKeys: function(e, el, id) {
+		var wheel, type;		
+		id = (!id) ? el.id : this.arrHSB[0];
+
+		if (e.type == 'keydown') {
+			if (e.key == 'up') wheel = 1;
+			else if (e.key == 'down') wheel = -1;
+			else return;
+		} else if (e.type == Element.Events.mousewheel.type) wheel = (e.wheel > 0) ? 1 : -1;
+
+		if (this.arrRGB.test(el)) type = 'rgb';
+		else if (this.arrHSB.test(el)) type = 'hsb';
+		else type = 'hsb';
+
+		if (type == 'rgb') {
+			var rgb = this.sets.rgb, hsb = this.sets.hsb, prefix = this.options.prefix, pass;
+			var value = el.value.toInt() + wheel;
+			value = (value > 255) ? 255 : (value < 0) ? 0 : value;
+
+			switch(el.className) {
+				case prefix + 'rInput': pass = [value, rgb[1], rgb[2]];	break;
+				case prefix + 'gInput': pass = [rgb[0], value, rgb[2]];	break;
+				case prefix + 'bInput':	pass = [rgb[0], rgb[1], value];	break;
+				default : pass = rgb;
+			}
+			this.manualSet(pass);
+			this.fireEvent('onChange', [this.sets, this]);
+		} else {
+			var rgb = this.sets.rgb, hsb = this.sets.hsb, prefix = this.options.prefix, pass;
+			var value = el.value.toInt() + wheel;
+
+			if (el.className.test(/(HueInput)/)) value = (value > 359) ? 0 : (value < 0) ? 0 : value;
+			else value = (value > 100) ? 100 : (value < 0) ? 0 : value;
+
+			switch(el.className) {
+				case prefix + 'HueInput': pass = [value, hsb[1], hsb[2]]; break;
+				case prefix + 'SatuInput': pass = [hsb[0], value, hsb[2]]; break;
+				case prefix + 'BrighInput':	pass = [hsb[0], hsb[1], value]; break;
+				default : pass = hsb;
+			}
+			this.manualSet(pass, 'hsb');
+			this.fireEvent('onChange', [this.sets, this]);
+		}
+		e.stop();
+	},
+	
+	eventKeydown: function(e, el) {
+		var n = e.code, k = e.key;
+
+		if 	((!el.className.test(/hexInput/) && !(n >= 48 && n <= 57)) &&
+			(k!='backspace' && k!='tab' && k !='delete' && k!='left' && k!='right'))
+		e.stop();
+	},
+	
+	eventKeyup: function(e, el) {
+		var n = e.code, k = e.key, pass, prefix, chr = el.value.charAt(0);
+
+		if (!$chk(el.value)) return;
+		if (el.className.test(/hexInput/)) {
+			if (chr != "#" && el.value.length != 6) return;
+			if (chr == '#' && el.value.length != 7) return;
+		} else {
+			if (!(n >= 48 && n <= 57) && (!['backspace', 'tab', 'delete', 'left', 'right'].test(k)) && el.value.length > 3) return;
+		}
+		
+		prefix = this.options.prefix;
+
+		if (el.className.test(/(rInput|gInput|bInput)/)) {
+			if (el.value  < 0 || el.value > 255) return;
+			switch(el.className){
+				case prefix + 'rInput': pass = [el.value, this.sets.rgb[1], this.sets.rgb[2]]; break;
+				case prefix + 'gInput': pass = [this.sets.rgb[0], el.value, this.sets.rgb[2]]; break;
+				case prefix + 'bInput': pass = [this.sets.rgb[0], this.sets.rgb[1], el.value]; break;
+				default : pass = this.sets.rgb;
+			}
+			this.manualSet(pass);
+			this.fireEvent('onChange', [this.sets, this]);
+		}
+		else if (!el.className.test(/hexInput/)) {
+			if (el.className.test(/HueInput/) && el.value  < 0 || el.value > 360) return;
+			else if (el.className.test(/HueInput/) && el.value == 360) el.value = 0;
+			else if (el.className.test(/(SatuInput|BrighInput)/) && el.value  < 0 || el.value > 100) return;
+			switch(el.className){
+				case prefix + 'HueInput': pass = [el.value, this.sets.hsb[1], this.sets.hsb[2]]; break;
+				case prefix + 'SatuInput': pass = [this.sets.hsb[0], el.value, this.sets.hsb[2]]; break;
+				case prefix + 'BrighInput': pass = [this.sets.hsb[0], this.sets.hsb[1], el.value]; break;
+				default : pass = this.sets.hsb;
+			}
+			this.manualSet(pass, 'hsb');
+			this.fireEvent('onChange', [this.sets, this]);
+		} else {
+			pass = el.value.hexToRgb(true);
+			if (isNaN(pass[0])||isNaN(pass[1])||isNaN(pass[2])) return;
+
+			if ($chk(pass)) {
+				this.manualSet(pass);
+				this.fireEvent('onChange', [this.sets, this]);
+			}
+		}
+			
+	},
+			
+	doLayout: function() {
+		var id = this.options.id, prefix = this.options.prefix;
+		var idPrefix = id + ' .' + prefix;
+
+		this.layout = new Element('div', {
+			'styles': {'display': 'block', 'position': 'absolute'},
+			'id': id
+		}).inject(document.body);
+
+		var box = new Element('div', {
+			'styles':  {'position': 'relative'},
+			'class': prefix + 'box'
+		}).inject(this.layout);
+			
+		var div = new Element('div', {
+			'styles': {'position': 'absolute', 'overflow': 'hidden'},
+			'class': prefix + 'overlayBox'
+		}).inject(box);
+		
+		var ar = new Element('div', {
+			'styles': {'position': 'absolute', 'zIndex': 1},
+			'class': prefix + 'arrows'
+		}).inject(box);
+		ar.width = ar.getStyle('width').toInt();
+		ar.height = ar.getStyle('height').toInt();
+		
+		var ov = new Element('img', {
+			'styles': {'background-color': '#fff', 'position': 'relative', 'zIndex': 2},
+			'src': this.options.imgPath + 'moor_woverlay.png',
+			'class': prefix + 'overlay'
+		}).inject(div);
+		
+		var ov2 = new Element('img', {
+			'styles': {'position': 'absolute', 'top': 0, 'left': 0, 'zIndex': 2},
+			'src': this.options.imgPath + 'moor_boverlay.png',
+			'class': prefix + 'overlay'
+		}).inject(div);
+		
+		if (window.ie6) {
+			div.setStyle('overflow', '');
+			var src = ov.src;
+			ov.src = this.options.imgPath + 'blank.gif';
+			ov.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + src + "', sizingMethod='scale')";
+			src = ov2.src;
+			ov2.src = this.options.imgPath + 'blank.gif';
+			ov2.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + src + "', sizingMethod='scale')";
+		}
+		ov.width = ov2.width = div.getStyle('width').toInt();
+		ov.height = ov2.height = div.getStyle('height').toInt();
+
+		var cr = new Element('div', {
+			'styles': {'overflow': 'hidden', 'position': 'absolute', 'zIndex': 2},
+			'class': prefix + 'cursor'	
+		}).inject(div);
+		cr.width = cr.getStyle('width').toInt();
+		cr.height = cr.getStyle('height').toInt();
+		
+		var sl = new Element('img', {
+			'styles': {'position': 'absolute', 'z-index': 2},
+			'src': this.options.imgPath + 'moor_slider.png',
+			'class': prefix + 'slider'
+		}).inject(box);
+		this.layout.slider = $E('#' + idPrefix + 'slider');
+		sl.width = sl.getStyle('width').toInt();
+		sl.height = sl.getStyle('height').toInt();
+
+		new Element('div', {
+			'styles': {'position': 'absolute'},
+			'class': prefix + 'colorBox'
+		}).inject(box);
+
+		new Element('div', {
+			'styles': {'zIndex': 2, 'position': 'absolute'},
+			'class': prefix + 'chooseColor'
+		}).inject(box);
+			
+		this.layout.backup = new Element('div', {
+			'styles': {'zIndex': 2, 'position': 'absolute', 'cursor': 'pointer'},
+			'class': prefix + 'currentColor'
+		}).inject(box);
+		
+		var R = new Element('label').inject(box).setStyle('position', 'absolute');
+		var G = R.clone().inject(box).addClass(prefix + 'gLabel').appendText('G: ');
+		var B = R.clone().inject(box).addClass(prefix + 'bLabel').appendText('B: ');
+		R.appendText('R: ').addClass(prefix + 'rLabel');
+		
+		var inputR = new Element('input');
+		var inputG = inputR.clone().inject(G).addClass(prefix + 'gInput');
+		var inputB = inputR.clone().inject(B).addClass(prefix + 'bInput');
+		inputR.inject(R).addClass(prefix + 'rInput');
+		
+		var HU = new Element('label').inject(box).setStyle('position', 'absolute');
+		var SA = HU.clone().inject(box).addClass(prefix + 'SatuLabel').appendText('S: ');
+		var BR = HU.clone().inject(box).addClass(prefix + 'BrighLabel').appendText('B: ');
+		HU.appendText('H: ').addClass(prefix + 'HueLabel');
+
+		var inputHU = new Element('input');
+		var inputSA = inputHU.clone().inject(SA).addClass(prefix + 'SatuInput');
+		var inputBR = inputHU.clone().inject(BR).addClass(prefix + 'BrighInput');
+		inputHU.inject(HU).addClass(prefix + 'HueInput');
+		SA.appendText(' %'); BR.appendText(' %');
+		new Element('span', {'styles': {'position': 'absolute'}, 'class': prefix + 'ballino'}).setHTML(" &deg;").injectAfter(HU);
+
+		var hex = new Element('label').inject(box).setStyle('position', 'absolute').addClass(prefix + 'hexLabel').appendText('#hex: ').adopt(new Element('input').addClass(prefix + 'hexInput'));
+		
+		var ok = new Element('input', {
+			'styles': {'position': 'absolute'},
+			'type': 'button',
+			'value': 'Select',
+			'class': prefix + 'okButton'
+		}).inject(box);
+		
+		this.rePosition();
+
+		var overlays = $$('#' + idPrefix + 'overlay');
+		this.layout.overlay = overlays[0];
+		this.layout.overlay2 = overlays[1];
+		this.layout.cursor = $E('#' + idPrefix + 'cursor');
+		this.layout.arrows = $E('#' + idPrefix + 'arrows');
+		this.chooseColor = $E('#' + idPrefix + 'chooseColor');
+		this.layout.backup = $E('#' + idPrefix + 'currentColor');
+		this.RedInput = $E('#' + idPrefix + 'rInput');
+		this.GreenInput = $E('#' + idPrefix + 'gInput');
+		this.BlueInput = $E('#' + idPrefix + 'bInput');
+		this.HueInput = $E('#' + idPrefix + 'HueInput');
+		this.SatuInput = $E('#' + idPrefix + 'SatuInput');
+		this.BrighInput = $E('#' + idPrefix + 'BrighInput');
+		this.hexInput = $E('#' + idPrefix + 'hexInput');
+
+		this.arrRGB = [this.RedInput, this.GreenInput, this.BlueInput];
+		this.arrHSB = [this.HueInput, this.SatuInput, this.BrighInput];
+		this.okButton = $E('#' + idPrefix + 'okButton');
+		
+		if (!window.khtml) this.hide();
+	},
+	rePosition: function() {
+		var coords = this.element.getCoordinates();
+		this.layout.setStyles({
+			'left': coords.left,
+			'top': coords.top + coords.height + 1
+		});
+	},
+	
+	snippet: function(mode, type) {
+		var size; type = (type) ? type : 'none';
+
+		switch(mode) {
+			case 'arrPos':
+				var t = this.layout.arrows.getStyle('top').toInt();
+				size = t;
+				break;
+			case 'arrSize': 
+				var h = this.layout.arrows.height;
+				h = (type == 'int') ? (h/2).toInt() : h;
+				size = h;
+				break;		
+			case 'curPos':
+				var l = this.layout.cursor.getStyle('left').toInt();
+				var t = this.layout.cursor.getStyle('top').toInt();
+				size = {'l': l, 't': t};
+				break;
+			case 'slider':
+				var t = this.layout.slider.getStyle('marginTop').toInt();
+				size = t;
+				break;
+			default :
+				var h = this.layout.cursor.height;
+				var w = this.layout.cursor.width;
+				h = (type == 'int') ? (h/2).toInt() : h;
+				w = (type == 'int') ? (w/2).toInt() : w;
+				size = {w: w, h: h};
+		};
+		return size;
+	}
+});
+
+MooRainbow.implement(new Options);
+MooRainbow.implement(new Events);
\ No newline at end of file
diff --git a/js/mootools-domready-rainbow.js b/js/mootools-domready-rainbow.js
new file mode 100644
index 000000000..40041dfe4
--- /dev/null
+++ b/js/mootools-domready-rainbow.js
@@ -0,0 +1,16 @@
+window.addEvent('domready', function() {
+	var r = new MooRainbow('myRainbow', {
+		'startColor': [58, 142, 246],
+		'imgPath': 'js/mooRainbow/images/',
+		'onChange': function(color) {
+			top.frame_navigation.document.getElementById('body_leftFrame').style.backgroundColor = color.hex;
+			top.frame_navigation.document.getElementById('pmalogo').style.backgroundColor = color.hex;
+			top.frame_content.document.body.style.backgroundColor = color.hex;
+			},
+		'onComplete': function(color) {
+			top.frame_content.document.getElementById('rainbowform').custom_color.value = color.hex;
+			top.frame_content.document.getElementById('rainbowform').custom_color_rgb.value = color.rgb;
+			top.frame_content.document.getElementById('rainbowform').submit();
+			}
+	});
+});
diff --git a/libraries/Config.class.php b/libraries/Config.class.php
index 4a5c2ca64..a1573b41d 100644
--- a/libraries/Config.class.php
+++ b/libraries/Config.class.php
@@ -541,7 +541,7 @@ class PMA_Config
      */
     function getThemeUniqueValue()
     {
-        return intval((null !== $_SESSION['PMA_Config']->get('fontsize') ? $_SESSION['PMA_Config']->get('fontsize') : $_COOKIE['pma_fontsize'])) + ($this->source_mtime + $this->default_source_mtime + $_SESSION['PMA_Theme']->mtime_info + $_SESSION['PMA_Theme']->filesize_info);
+        return intval((null !== $_SESSION['PMA_Config']->get('fontsize') ? $_SESSION['PMA_Config']->get('fontsize') : $_COOKIE['pma_fontsize'])) + ($this->source_mtime + $this->default_source_mtime + $_SESSION['PMA_Theme']->mtime_info + $_SESSION['PMA_Theme']->filesize_info) . (isset($_SESSION['userconf']['custom_color']) ? substr($_SESSION['userconf']['custom_color'],1,6) : '');
     }
 
     /**
diff --git a/libraries/common.inc.php b/libraries/common.inc.php
index 0e4146da8..0e15240ed 100644
--- a/libraries/common.inc.php
+++ b/libraries/common.inc.php
@@ -634,6 +634,10 @@ unset($default_server);
 /******************************************************************************/
 /* setup themes                                          LABEL_theme_setup    */
 
+if (isset($_REQUEST['custom_color'])) {
+    $_SESSION['userconf']['custom_color'] = $_REQUEST['custom_color'];
+    $_SESSION['userconf']['custom_color_rgb'] = $_REQUEST['custom_color_rgb'];
+}
 /**
  * @global PMA_Theme_Manager $_SESSION['PMA_Theme_Manager']
  */
diff --git a/libraries/header_meta_style.inc.php b/libraries/header_meta_style.inc.php
index c2b4a009e..4ff871142 100644
--- a/libraries/header_meta_style.inc.php
+++ b/libraries/header_meta_style.inc.php
@@ -46,5 +46,6 @@ if ($GLOBALS['text_dir'] == 'ltr') {
     }
 ?></title>
     <link rel="stylesheet" type="text/css" href="<?php echo defined('PMA_PATH_TO_BASEDIR') ? PMA_PATH_TO_BASEDIR : ''; ?>phpmyadmin.css.php?<?php echo PMA_generate_common_url(); ?>&amp;js_frame=<?php echo isset($print_view) ? 'print' : 'right'; ?>&amp;nocache=<?php echo $_SESSION['PMA_Config']->getThemeUniqueValue(); ?>" />
+    <link rel="stylesheet" type="text/css" href="js/mooRainbow/mooRainbow.css" />
     <link rel="stylesheet" type="text/css" href="<?php echo defined('PMA_PATH_TO_BASEDIR') ? PMA_PATH_TO_BASEDIR : ''; ?>print.css" media="print" />
     <meta name="robots" content="noindex,nofollow" />
diff --git a/main.php b/main.php
index cb4300a0c..711092e22 100644
--- a/main.php
+++ b/main.php
@@ -9,6 +9,9 @@
  * Gets some core libraries and displays a top message if required
  */
 require_once './libraries/common.inc.php';
+$GLOBALS['js_include'][] = 'mootools.js';
+$GLOBALS['js_include'][] = 'mooRainbow/mooRainbow.js';
+$GLOBALS['js_include'][] = 'mootools-domready-rainbow.js';
 
 // Handles some variables that may have been sent by the calling script
 $GLOBALS['db'] = '';
@@ -144,6 +147,13 @@ if (empty($cfg['Lang'])) {
 if ($GLOBALS['cfg']['ThemeManager']) {
     echo '<li id="li_select_theme">';
     echo $_SESSION['PMA_Theme_Manager']->getHtmlSelectBox();
+    echo '<img id="myRainbow" src="js/mooRainbow/images/rainbow.png" alt="[r]" 
+        width="16" height="16" />';
+    echo '<form name="rainbowform" id="rainbowform" method="post" action="index.php" target="_parent">';
+    echo PMA_generate_common_hidden_inputs();
+    echo '<input type="hidden" name="custom_color" />';
+    echo '<input type="hidden" name="custom_color_rgb" />';
+    echo '</form>';
     echo '</li>';
 }
 echo '<li id="li_select_fontsize">';
diff --git a/themes/original/css/theme_left.css.php b/themes/original/css/theme_left.css.php
index 4b065f8f6..ccfb16bef 100644
--- a/themes/original/css/theme_left.css.php
+++ b/themes/original/css/theme_left.css.php
@@ -27,7 +27,7 @@ body {
 <?php if (! empty($GLOBALS['cfg']['FontFamily'])) { ?>
     font-family:        <?php echo $GLOBALS['cfg']['FontFamily']; ?>;
 <?php } ?>
-    background:         <?php echo $GLOBALS['cfg']['NaviBackground']; ?>;
+    background:         <?php echo (isset($_SESSION['userconf']['custom_color']) ? $_SESSION['userconf']['custom_color'] : $GLOBALS['cfg']['NaviBackground']); ?>;
     color:              <?php echo $GLOBALS['cfg']['NaviColor']; ?>;
     margin:             0;
     padding:            0.2em 0.2em 0.2em 0.2em;
@@ -85,7 +85,8 @@ button {
 /* specific elements */
 
 div#pmalogo {
-    background-color: #D0DCE0<?php //better echo $GLOBALS['cfg']['logoBGC']; ?>;
+    <?php //better echo $GLOBALS['cfg']['logoBGC']; ?>
+    background-color: <?php echo (isset($_SESSION['userconf']['custom_color']) ? $_SESSION['userconf']['custom_color'] : '#D0CDE0'); ?>;
     padding:.3em;
 }
 div#pmalogo,
@@ -159,7 +160,7 @@ div#left_tableList ul {
     margin:             0;
     padding:            0;
     font-size:          80%;
-    background:         <?php echo $GLOBALS['cfg']['NaviBackground']; ?>;
+    background:         <?php echo (isset($_SESSION['userconf']['custom_color']) ? $_SESSION['userconf']['custom_color'] : $GLOBALS['cfg']['NaviBackground']); ?>;
 }
 
 div#left_tableList ul ul {
diff --git a/themes/original/css/theme_right.css.php b/themes/original/css/theme_right.css.php
index 6470b25b0..078e978e1 100644
--- a/themes/original/css/theme_right.css.php
+++ b/themes/original/css/theme_right.css.php
@@ -30,7 +30,7 @@ body {
     padding:            0;
     margin:             0.5em;
     color:              <?php echo $GLOBALS['cfg']['MainColor']; ?>;
-    background:         <?php echo $GLOBALS['cfg']['MainBackground']; ?>;
+    background:         <?php echo (isset($_SESSION['userconf']['custom_color']) ? $_SESSION['userconf']['custom_color'] : $GLOBALS['cfg']['MainBackground']); ?>;
 }
 
 <?php if (! empty($GLOBALS['cfg']['FontFamilyFixed'])) { ?>