Successfully change led color from colorPicker

:-3

app/css/app.css

@@ -1,4 +1,4 @@
-#footer {
+footer {
   position: fixed;
   bottom: 0;
   width: 100%;
@@ -13,23 +13,52 @@
   display: none;
 }
 #colors-tabs {
-  width: 400px;
+  width: 411px;
 }
 #colors-content {
-  width: 400px;
+  width: 411px;
+  float: left;
+}
+.mcopy-light {
+  background: #000;
+  width: 15px;
+  height: 15px;
 }
 #light-status {
-  width: 400px;
+  width: 388px;
   float: right;
 }
+#light-status > div {
+  position: relative;
+  clear: both;
+}
+#light-status > div:after {
+  content: "";
+  display: block;
+}
 #light-status form {
   float: left;
   line-height: 30px;
+  width: 40%;
 }
 #light-status form span {
   width: 20px;
+  margin-left: 40px;
   display: inline-block;
 }
+#light-status form input[type=text] {
+  width: 40px;
+}
+#preview {
+  margin-top: 40px;
+}
+#rgb {
+  border: 0;
+  border-radius: 0;
+  width: 411px;
+  font-size: 12px;
+  text-align: center;
+}
 #color {
   width: 100px;
   height: 100px;
@@ -37,3 +66,11 @@
   background-color: #000;
   float: right;
 }
+.cp-app {
+  position: relative !important;
+  border-radius: 0px !important;
+  top: 0px !important;
+}
+.cp-app .cp-memo {
+  bottom: 2px !important;
+}

app/css/app.less

@@ -1,4 +1,4 @@
-#footer{
+footer{
 	position: fixed;
     bottom: 0;
     width: 100%;
@@ -16,24 +16,52 @@
 }
 
 #colors-tabs{
-	width: 400px;
+	width: 411px;
 }
 #colors-content{
-	width: 400px;
+	width: 411px;
+    float: left;
+}
+.mcopy-light{
+	background: #000;
+    width: 15px;
+    height: 15px;
 }
 #light-status{
-	width: 400px;
+	width: 388px;
 	float: right;
+	>div{
+		position: relative;
+    	clear: both;
+    	&:after{
+    		content: "";
+    		display: block;
+    	}
+	}
 	form{
 		float: left;
 		line-height: 30px;
+		width: 40%;
 		span{
 			width: 20px;
+			margin-left: 40px;
 			display: inline-block;
 		}
+		input[type=text]{
+			width: 40px;
+		}
 	}
 }
-
+#preview{
+	margin-top: 40px;
+}
+#rgb{
+	border: 0;
+    border-radius: 0;
+	width: 411px;
+	font-size: 12px;
+    text-align: center;
+}
 #color{
 	width: 100px;
 	height: 100px;
@@ -41,3 +69,12 @@
 	background-color: #000;
 	float: right;
 }
+
+.cp-app{
+	position: relative !important;
+	border-radius: 0px !important;
+	top: 0px !important;
+	.cp-memo{
+		bottom: 2px !important;
+	}
+}

app/gulpfile.js

@@ -8,7 +8,9 @@ var scripts = [
 	'./src/w2ui-1.4.3.min.js',
 	'./src/moment.min.js',
 	'./src/colors.js',
+	'./src/colorPicker.data.js',
 	'./src/colorPicker.js',
+	'./src/jsColor.js',
 	'./src/chroma.min.js',
 	'./src/index.js'
 ];

app/index.html

@@ -13,19 +13,26 @@
     <nav id="toolbar"></nav>
     <div id="screens">
       <div id="controls" class="screen">
+        <footer>
+          <div id="log"></div>
+        </footer>
       </div>
-      <div id="light">
+      <div id="light" class="screen">
         <div id="colors-tabs"></div>
         <div id="colors-content">
-          <div id="rgb"></div>
+          <div id="rgb-page" class="colors-page">
+            <input id="rgb" value="rgb(0, 0, 0)" />
+          </div>
         </div>
         <div id="light-status">
-          <form>
+          <div>
-            <span>R</span><input type="text" value="0"/><br />
+            <form>
-            <span>G</span><input type="text" value="0"/><br />
+              <span>R</span><input type="text" value="0"/><br />
-            <span>B</span><input type="text" value="0"/>
+              <span>G</span><input type="text" value="0"/><br />
-          </form>
+              <span>B</span><input type="text" value="0"/>
-          <div id="color"></div>
+            </form>
+            <div id="color"></div>
+          </div>
           Preview
           <input type="checkbox" name="preview" id="preview" class="effeckt-ckbox-ios7" />
         </div>

app/src/index.js

@@ -1,6 +1,7 @@
 var remote = require('remote'),
 	ipcRenderer = require('electron').ipcRenderer,
 	light = {},
+	nav = {},
 	log = {};
 //console.log(ipcRenderer.sendSync('light', { 'fuck' : true }) );
 
@@ -78,50 +79,137 @@ light.init = function () {
 			{ id: 'kelvin', caption: 'Kelvin'}
 		],
 		onClick: function (event) {
-			$('#colors-content').html('Tab: ' + event.target);
+			//$('#colors-content').html('Tab: ' + event.target);
 		}
 	});
+	/*var myColorPicker = new ColorPicker({
+	    color: '', // see Colors...
+	    mode: 'rgb-b', // initial mode the color picker is starting with
+	    fps: 60, // the framerate colorPicker refreshes the display if no 'requestAnimationFrame'
+	    delayOffset: 8, // pixels offset when shifting mouse up/down inside input fields before it starts acting as slider
+	    CSSPrefix: 'cp-', // the standard prefix for (almost) all class declarations (HTML, CSS)
+	    size: 0, // one of the 4 sizes: 0 = L (large), 1 = S, 2 = XS, 3 = XXS; resize to see what happens...
+	    allMixDetails: true, // see Colors...
+	    alphaBG: 'w', // initial 3rd layer bgColor (w = white, c = custom (customBG), b = black);
+	    customBG: '#808080', // see Colors...
+	    noAlpha: true, // disable alpha input (all sliders are gone and current alpha therefore locked)
+	    cmyOnly: false, // display CMY instead of CMYK
+	    memoryColors: [], // array of colors in memory section
+	    opacityPositionRelative: undefined, // render opacity slider arrows in px or %
+	    customCSS: undefined, // if external stylesheet, internal will be ignored...
+	    appendTo: document.body, // the HTMLElement the colorPicker will be appended to on initialization
+	    noRangeBackground: false, // performance option: doesn't render backgrounds in input fields if set to false
+	    textRight: false, // not supported yet. Make numbers appear aligned right
+	    noHexButton: false, // button next to HEX input could be used for some trigger...
+	    noResize: false, // enable / disable resizing of colorPicker
+	    noRGBr: false, // active / passive button right to RGB-R display. Disables rendering of 'real' color possibilities...
+	    noRGBg: false, // same as above
+	    noRGBb: false, // same as above
+	    CSSStrength: 'div.', // not in use
+	    devPicker: false, // uses existing HTML instead of internal template for developing
+	    renderCallback: function(colors, mode){
+
+	    }, // callback on after rendering (for further rendering outside colorPicker)
+	    actionCallback: function(e, action){
+
+	    }, // callback on any action within colorPicker (buttons, sliders, ...)
+	    convertCallback: function(colors, type){
+	    	var a = colors.RND.rgb;
+	    	light.display([a.r, a.g, a.b]);
+
+	    }, // see Colors...
+	});*/
+	var colors = jsColorPicker('#rgb', {
+			customBG: '#222',
+			readOnly: true,
+			size: 3,
+			// patch: false,
+			init: function(elm, colors) { // colors is a different instance (not connected to colorPicker)
+				elm.style.backgroundColor = elm.value;
+				elm.style.color = colors.rgbaMixCustom.luminance > 0.22 ? '#222' : '#ddd';
+			},
+			convertCallback: function(colors, type){
+		    	var a = colors.RND.rgb,
+		    		rgb = [a.r, a.g, a.b];
+		    	light.color = rgb;
+		    	if (light.preview) {
+		    		light.display(rgb);
+					light.set(rgb);
+				}
+
+		    }
+		});
+	light.display([0, 0, 0]);
 	$('#preview').on('change', function () {
 		light.preview = $(this).prop('checked');
+		if (light.preview) {
+			light.display(light.color);
+			light.set(light.color);
+		} else {
+			light.display([0,0,0]);
+			light.set([0,0,0]);
+		}
 	});
 };
 //color = [0,0,0]
 light.set = function (rgb) {
 	'use strict';
 	light.current = rgb;
-	console.log('color: ' + rgb.join(','));
 	ipcRenderer.sendSync('light', rgb);
 };
 
 light.display = function (rgb) {
 	'use strict';
-	for (var i = 0; i < 3; i++) {
+	var str,
+		i;
+	for (i = 0; i < 3; i++) {
 		rgb[i] = Math.floor(rgb[i]);
 		$('#light-status form input').eq(i).val(rgb[i]);
 	}
-	light.color = rgb;
+	str = 'rgb(' + rgb.join(',') + ')';
-	$('#color').css('background-color', 'rgb(' + rgb.join(',') + ')');
+	$('#color').css('background-color', str);
-	if (light.preview) {
+	$('.mcopy-light').css('background-color', str);
-		light.set(rgb);
+};
+light.color_on = false;
+light.color_init = function () {
+	'use strict';
+	if (!light.color_on) {
+		$('#rgb').focus();
+		$('.cp-app').appendTo('#rgb-page');
+		light.color_on = true;
+	}
+};
+
+nav.init = function () {
+	'use strict';
+	$('#toolbar').w2toolbar({
+		name: 'toolbar',
+		items: [
+			{ type: 'radio',  id: 'sequence',  group: '1', caption: 'Sequence', icon: 'fa-star', checked: true },
+			{ type: 'radio',  id: 'script',  group: '1', caption: 'Script', icon: 'fa-star-empty' },
+			{ type: 'radio',  id: 'controls',  group: '1', caption: 'Controls', icon: 'fa-star-empty' },
+			{ type: 'radio',  id: 'light',  group: '1', caption: 'Light', icon: 'mcopy-light' },
+			{ type: 'spacer' },
+			{ type: 'button',  id: 'settings',  group: '1', caption: 'Settings', icon: 'fa-home' }
+		],
+		onClick : function (event) {
+			nav.change(event.target);
+		}
+	});
+};
+
+nav.change = function (id) {
+	'use strict';
+	$('.screen').hide();
+	$('#' + id).show();
+	if (id === 'light') {
+		light.color_init();
 	}
 };
 
 var init = function () {
 	'use strict';
-	$('#toolbar').w2toolbar({
+	nav.init();
-		name: 'toolbar',
-		items: [
-			{ type: 'radio',  id: 'item1',  group: '1', caption: 'Sequence', icon: 'fa-star', checked: true },
-			{ type: 'radio',  id: 'item2',  group: '1', caption: 'Script', icon: 'fa-star-empty' },
-			{ type: 'radio',  id: 'item3',  group: '1', caption: 'Controls', icon: 'fa-star-empty' },
-			{ type: 'radio',  id: 'item4',  group: '1', caption: 'Light', icon: 'fa-star-empty' },
-			{ type: 'spacer' },
-			{ type: 'button',  id: 'item5',  group: '1', caption: 'Settings', icon: 'fa-home' }
-		],
-		onClick : function (event) {
-
-		}
-	});
 	log.init();
 	light.init();
 };

app/src/jqColor.js

@@ -0,0 +1,217 @@
+(function ($, window) {
+	$.fn.extend({
+		colorPicker: function(config) {
+			var renderCallback = function(colors, mode) {
+					var options = this,
+						$input = $(options.input),
+						$patch = $(options.patch),
+						RGB = colors.RND.rgb,
+						HSL = colors.RND.hsl,
+						AHEX = options.isIE8 ? (colors.alpha < 0.16 ? '0' : '') +
+							(Math.round(colors.alpha * 100)).toString(16).toUpperCase() + colors.HEX : '',
+						RGBInnerText = RGB.r + ', ' + RGB.g + ', ' + RGB.b,
+						RGBAText = 'rgba(' + RGBInnerText + ', ' + colors.alpha + ')',
+						isAlpha = colors.alpha !== 1 && !options.isIE8,
+						colorMode = $input.data('colorMode');
+
+					$patch.css({
+						'color': (colors.rgbaMixCustom.luminance > 0.22 ? '#222' : '#ddd'), // Black...???
+						'background-color': RGBAText,
+						'filter' : (options.isIE8 ? 'progid:DXImageTransform.Microsoft.gradient(' + // IE<9
+							'startColorstr=#' + AHEX + ',' + 'endColorstr=#' + AHEX + ')' : '')
+					});
+
+					$input.val(colorMode === 'HEX' && !isAlpha ? '#' + (options.isIE8 ? AHEX : colors.HEX) :
+						colorMode === 'rgb' || (colorMode === 'HEX' && isAlpha) ?
+						(!isAlpha ? 'rgb(' + RGBInnerText + ')' : RGBAText) :
+						('hsl' + (isAlpha ? 'a(' : '(') + HSL.h + ', ' + HSL.s + '%, ' + HSL.l + '%' +
+							(isAlpha ? ', ' + colors.alpha : '') + ')')
+					);
+
+					if (options.displayCallback) {
+						options.displayCallback(colors, mode, options);
+					}
+				},
+				actionCallback = function(event, action) {
+					var options = this,
+						colorPicker = colorPickers.current;
+
+					if (action === 'toMemery') {
+						var memos = colorPicker.nodes.memos,
+							$memo,
+							backgroundColor = '',
+							opacity = 0,
+							cookieTXT = [];
+
+						for (var n = 0, m = memos.length; n < m; n++) {
+							$memo = $(memos[n]);
+							backgroundColor = $memo.css('background-color');
+							opacity = Math.round($memo.css('opacity') * 100) / 100;
+							cookieTXT.push(backgroundColor.
+								replace(/, /g, ',').
+								replace('rgb(', 'rgba(').
+								replace(')', ',' + opacity + ')')
+							);
+						}
+						cookieTXT = '\'' + cookieTXT.join('\',\'') + '\'';
+						$.docCookies('colorPickerMemos' + (options.noAlpha ? 'NoAlpha' : ''), cookieTXT);
+					} else if (action === 'resizeApp') {
+						$.docCookies('colorPickerSize', colorPicker.color.options.currentSize);
+					} else if (action === 'modeChange') {
+						var mode = colorPicker.color.options.mode;
+
+						$.docCookies('colorPickerMode', mode.type + '-' + mode.z);
+					}
+				},
+				createInstance = function(elm, config) {
+					var initConfig = {
+							klass: window.ColorPicker,
+							input: elm,
+							patch: elm,
+							isIE8: !!document.all && !document.addEventListener, // Opera???
+							animationSpeed: 200,
+							draggable: true,
+							margin: {left: -1, top: 2},
+							customBG: '#FFFFFF',
+							// displayCallback: displayCallback,
+							/* --- regular colorPicker options from this point --- */
+							color: elm.value,
+							initStyle: 'display: none',
+							mode: $.docCookies('colorPickerMode') || 'hsv-h',
+							// memoryColors: (function(colors, config) {
+							// 	return config.noAlpha ?
+							// 		colors.replace(/\,\d*\.*\d*\)/g, ',1)') : colors;
+							// })($.docCookies('colorPickerMemos'), config || {}),
+							memoryColors: $.docCookies('colorPickerMemos' + ((config || {}).noAlpha ? 'NoAlpha' : '')),
+							size: $.docCookies('colorPickerSize') || 1,
+							renderCallback: renderCallback,
+							actionCallback: actionCallback
+						};
+
+					for (var n in config) {
+						initConfig[n] = config[n]; 
+					}
+					return new initConfig.klass(initConfig);
+				},
+				doEventListeners = function(elm, multiple, off) {
+					var onOff = off ? 'off' : 'on';
+
+					$(elm)[onOff]('focus.colorPicker', function(e) {
+						var $input = $(this),
+							position = $input.offset(),
+							index = multiple ? $(that).index(this) : 0,
+							colorPicker = colorPickers[index] ||
+								(colorPickers[index] = createInstance(this, config)),
+							options = colorPicker.color.options,
+							$colorPicker = $.ui && options.draggable ?
+							$(colorPicker.nodes.colorPicker).draggable(
+								{cancel: '.' + options.CSSPrefix + 'app div'}
+							) : $(colorPicker.nodes.colorPicker);
+
+						options.color = elm.value; // brings color to default on reset
+						$colorPicker.css({
+							'position': 'absolute',
+							'left': position.left + options.margin.left,
+							'top': position.top + +$input.outerHeight(true) + options.margin.top
+						});
+						if (!multiple) {
+							options.input = elm;
+							options.patch = elm; // check again???
+							colorPicker.setColor(elm.value, undefined, undefined, true);
+							colorPicker.saveAsBackground();
+						}
+						colorPickers.current = colorPickers[index];
+						$(options.appendTo || document.body).append($colorPicker);
+						setTimeout(function() { // compensating late style on onload in colorPicker
+							$colorPicker.show(colorPicker.color.options.animationSpeed);
+						}, 0);
+					});
+
+					$(window)[onOff]('mousedown.colorPicker', function(e) {
+						var colorPicker = colorPickers.current,
+							$colorPicker = $(colorPicker ? colorPicker.nodes.colorPicker : undefined),
+							animationSpeed = colorPicker ? colorPicker.color.options.animationSpeed : 0,
+							isColorPicker = $(e.target).closest('.cp-app')[0],
+							inputIndex = $(that).index(e.target);
+
+						if (isColorPicker && colorPicker && $(colorPickers).index(isColorPicker)) {
+							if (e.target === colorPicker.nodes.exit) {
+								$colorPicker.hide(animationSpeed);
+								$(':focus').trigger('blur');
+							} else {
+								// buttons on colorPicker don't work any more
+								// $(document.body).append(isColorPicker);
+							}
+						} else if (inputIndex !== -1) {
+							// input fireld
+						} else {
+							$colorPicker.hide(animationSpeed);
+						}
+					});
+				},
+				that = this,
+				colorPickers = $.fn.colorPicker.colorPickers || [], // this is a way to prevent data binding on HTMLElements
+				testColors = new window.Colors({
+					customBG: (config && config.customBG) || '#FFFFFF',
+					allMixDetails: true
+				});
+
+			$.fn.colorPicker.colorPickers = colorPickers;
+
+			$(this).each(function(idx, elm) {
+				// doEventListeners(elm, (config && config.multipleInstances), true);
+				$(elm).off('.colorPicker');
+				$(window).off('.colorPicker');
+				if (config !== 'destroy') {
+					var value = elm.value.split('(');
+					$(elm).data('colorMode', value[1] ? value[0].substr(0, 3) : 'HEX');
+					doEventListeners(elm, (config && config.multipleInstances), false);
+					if (config && config.readOnly) {
+						elm.readOnly = true;
+					}
+					testColors.setColor(elm.value);
+					if (config && config.init) {
+						config.init(elm, testColors.colors);
+					}
+				}
+			});
+
+			return this;
+		}
+	});
+
+	$.docCookies = function(key, val, options) {
+		var encode = encodeURIComponent, decode = decodeURIComponent,
+			cookies, n, tmp, cache = {},
+			days;
+
+		if (val === undefined) { // all about reading cookies
+			cookies = document.cookie.split('; ') || []; // easier for decoding then with RegExp search // .split(/;\s*/)
+			for (n = cookies.length; n--; ) {
+				tmp = cookies[n].split('=');
+				if (tmp[0]) cache[decode(tmp.shift())] = decode(tmp.join('=')); // there might be '='s in the value...
+			}
+
+			if (!key) return cache; // return Json for easy access to all cookies
+			else return cache[key]; // easy access to cookies from here
+		} else { // write/delete cookie
+			options = options || {};
+
+			if (val === '' || options.expires < 0) { // prepare deleteing the cookie
+				options.expires = -1;
+				// options.path = options.domain = options.secure = undefined; // to make shure the cookie gets deleted...
+			}
+
+			if (options.expires !== undefined) { // prepare date if any
+				days = new Date();
+				days.setDate(days.getDate() + options.expires);
+			}
+
+			document.cookie = encode(key) + '=' + encode(val) +
+				(days            ? '; expires=' + days.toUTCString() : '') +
+				(options.path    ? '; path='    + options.path       : '') +
+				(options.domain  ? '; domain='  + options.domain     : '') +
+				(options.secure  ? '; secure'                        : '');
+		}
+	};
+})(jQuery, this);

app/src/jsColor.js

@@ -0,0 +1,229 @@
+(function (window) {
+	window.jsColorPicker = function(selectors, config) {
+		var renderCallback = function(colors, mode) {
+				var options = this,
+					input = options.input,
+					patch = options.patch,
+					RGB = colors.RND.rgb,
+					HSL = colors.RND.hsl,
+					AHEX = options.isIE8 ? (colors.alpha < 0.16 ? '0' : '') +
+						(Math.round(colors.alpha * 100)).toString(16).toUpperCase() + colors.HEX : '',
+					RGBInnerText = RGB.r + ', ' + RGB.g + ', ' + RGB.b,
+					RGBAText = 'rgba(' + RGBInnerText + ', ' + colors.alpha + ')',
+					isAlpha = colors.alpha !== 1 && !options.isIE8,
+					colorMode = input.getAttribute('data-colorMode');
+
+				patch.style.cssText =
+					'color:' + (colors.rgbaMixCustom.luminance > 0.22 ? '#222' : '#ddd') + ';' + // Black...???
+					'background-color:' + RGBAText + ';' +
+					'filter:' + (options.isIE8 ? 'progid:DXImageTransform.Microsoft.gradient(' + // IE<9
+						'startColorstr=#' + AHEX + ',' + 'endColorstr=#' + AHEX + ')' : '');
+
+				input.value = (colorMode === 'HEX' && !isAlpha ? '#' + (options.isIE8 ? AHEX : colors.HEX) :
+					colorMode === 'rgb' || (colorMode === 'HEX' && isAlpha) ?
+					(!isAlpha ? 'rgb(' + RGBInnerText + ')' : RGBAText) :
+					('hsl' + (isAlpha ? 'a(' : '(') + HSL.h + ', ' + HSL.s + '%, ' + HSL.l + '%' +
+						(isAlpha ? ', ' + colors.alpha : '') + ')')
+				);
+
+				if (options.displayCallback) {
+					options.displayCallback(colors, mode, options);
+				}
+			},
+			extractValue = function(elm) {
+				return elm.value || elm.getAttribute('value') || elm.style.backgroundColor || '#FFFFFF';
+			},
+			actionCallback = function(event, action) {
+				var options = this,
+					colorPicker = colorPickers.current;
+
+				if (action === 'toMemory') {
+					var memos = colorPicker.nodes.memos,
+						backgroundColor = '',
+						opacity = 0,
+						cookieTXT = [];
+
+					for (var n = 0, m = memos.length; n < m; n++) {
+						backgroundColor = memos[n].style.backgroundColor;
+						opacity = memos[n].style.opacity;
+						opacity = Math.round((opacity === '' ? 1 : opacity) * 100) / 100;
+						cookieTXT.push(backgroundColor.
+							replace(/, /g, ',').
+							replace('rgb(', 'rgba(').
+							replace(')', ',' + opacity + ')')
+						);
+					}
+					cookieTXT = '\'' + cookieTXT.join('\',\'') + '\'';
+					ColorPicker.docCookies('colorPickerMemos' + (options.noAlpha ? 'NoAlpha' : ''), cookieTXT);
+				} else if (action === 'resizeApp') {
+					ColorPicker.docCookies('colorPickerSize', colorPicker.color.options.currentSize);
+				} else if (action === 'modeChange') {
+					var mode = colorPicker.color.options.mode;
+
+					ColorPicker.docCookies('colorPickerMode', mode.type + '-' + mode.z);
+				}
+			},
+			createInstance = function(elm, config) {
+				var initConfig = {
+						klass: window.ColorPicker,
+						input: elm,
+						patch: elm,
+						isIE8: !!document.all && !document.addEventListener, // Opera???
+						// *** animationSpeed: 200,
+						// *** draggable: true,
+						margin: {left: -1, top: 2},
+						customBG: '#FFFFFF',
+						// displayCallback: displayCallback,
+						/* --- regular colorPicker options from this point --- */
+						color: extractValue(elm),
+						initStyle: 'display: block',
+						mode: ColorPicker.docCookies('colorPickerMode') || 'hsv-h',
+						// memoryColors: (function(colors, config) {
+						// 	return config.noAlpha ?
+						// 		colors.replace(/\,\d*\.*\d*\)/g, ',1)') : colors;
+						// })($.docCookies('colorPickerMemos'), config || {}),
+						memoryColors: ColorPicker.docCookies('colorPickerMemos' +
+							((config || {}).noAlpha ? 'NoAlpha' : '')),
+						size: ColorPicker.docCookies('colorPickerSize') || 1,
+						renderCallback: renderCallback,
+						actionCallback: actionCallback
+					};
+
+				for (var n in config) {
+					initConfig[n] = config[n]; 
+				}
+				return new initConfig.klass(initConfig);
+			},
+			doEventListeners = function(elm, multiple, off) {
+				var onOff = off ? 'removeEventListener' : 'addEventListener',
+					focusListener = function(e) {
+						var input = this,
+							position = window.ColorPicker.getOrigin(input),
+							index = multiple ? Array.prototype.indexOf.call(elms, this) : 0,
+							colorPicker = colorPickers[index] ||
+								(colorPickers[index] = createInstance(this, config)),
+							options = colorPicker.color.options,
+							colorPickerUI = colorPicker.nodes.colorPicker;
+
+						options.color = extractValue(elm); // brings color to default on reset
+						colorPickerUI.style.cssText = 
+							'position: absolute;' +
+							'left:' + (position.left + options.margin.left) + 'px;' +
+							'top:' + (position.top + +input.offsetHeight + options.margin.top) + 'px;';
+
+						if (!multiple) {
+							options.input = elm;
+							options.patch = elm; // check again???
+							colorPicker.setColor(extractValue(elm), undefined, undefined, true);
+							colorPicker.saveAsBackground();
+						}
+						colorPickers.current = colorPickers[index];
+						(options.appendTo || document.body).appendChild(colorPickerUI);
+						setTimeout(function() { // compensating late style on onload in colorPicker
+							colorPickerUI.style.display = 'block';
+						}, 0);
+					},
+					mousDownListener = function(e) {
+						var colorPicker = colorPickers.current,
+							colorPickerUI = (colorPicker ? colorPicker.nodes.colorPicker : undefined),
+							animationSpeed = colorPicker ? colorPicker.color.options.animationSpeed : 0,
+							isColorPicker = colorPicker && (function(elm) {
+								while (elm) {
+									if ((elm.className || '').indexOf('cp-app') !== -1) return elm;
+									elm = elm.parentNode;
+								}
+								return false;
+							})(e.target),
+							inputIndex = Array.prototype.indexOf.call(elms, e.target);
+
+						if (isColorPicker && Array.prototype.indexOf.call(colorPickers, isColorPicker)) {
+							if (e.target === colorPicker.nodes.exit) {
+								//colorPickerUI.style.display = 'none';
+								//document.activeElement.blur();
+							} else {
+								// ...
+							}
+						} else if (inputIndex !== -1) {
+							// ...
+						} else if (colorPickerUI) {
+							//colorPickerUI.style.display = 'none';
+						}
+					};
+
+				elm[onOff]('focus', focusListener);
+
+				if (!colorPickers.evt || off) {
+					colorPickers.evt = true; // prevent new eventListener for window
+
+					window[onOff]('mousedown', mousDownListener);
+				}
+			},
+			// this is a way to prevent data binding on HTMLElements
+			colorPickers = window.jsColorPicker.colorPickers || [],
+			elms = document.querySelectorAll(selectors),
+			testColors = new window.Colors({customBG: config.customBG, allMixDetails: true});
+
+		window.jsColorPicker.colorPickers = colorPickers;
+
+		for (var n = 0, m = elms.length; n < m; n++) {
+			var elm = elms[n];
+
+			if (config === 'destroy') {
+				doEventListeners(elm, (config && config.multipleInstances), true);
+				if (colorPickers[n]) {
+					colorPickers[n].destroyAll();
+				}
+			} else {
+				var color = extractValue(elm);
+				var value = color.split('(');
+
+				testColors.setColor(color);
+				if (config && config.init) {
+					config.init(elm, testColors.colors);
+				}
+				elm.setAttribute('data-colorMode', value[1] ? value[0].substr(0, 3) : 'HEX');
+				doEventListeners(elm, (config && config.multipleInstances), false);
+				if (config && config.readOnly) {
+					elm.readOnly = true;
+				}
+			}
+		};
+
+		return window.jsColorPicker.colorPickers;
+	};
+
+	window.ColorPicker.docCookies = function(key, val, options) {
+		var encode = encodeURIComponent, decode = decodeURIComponent,
+			cookies, n, tmp, cache = {},
+			days;
+
+		if (val === undefined) { // all about reading cookies
+			cookies = document.cookie.split(/;\s*/) || [];
+			for (n = cookies.length; n--; ) {
+				tmp = cookies[n].split('=');
+				if (tmp[0]) cache[decode(tmp.shift())] = decode(tmp.join('=')); // there might be '='s in the value...
+			}
+
+			if (!key) return cache; // return Json for easy access to all cookies
+			else return cache[key]; // easy access to cookies from here
+		} else { // write/delete cookie
+			options = options || {};
+
+			if (val === '' || options.expires < 0) { // prepare deleteing the cookie
+				options.expires = -1;
+				// options.path = options.domain = options.secure = undefined; // to make shure the cookie gets deleted...
+			}
+
+			if (options.expires !== undefined) { // prepare date if any
+				days = new Date();
+				days.setDate(days.getDate() + options.expires);
+			}
+
+			document.cookie = encode(key) + '=' + encode(val) +
+				(days            ? '; expires=' + days.toUTCString() : '') +
+				(options.path    ? '; path='    + options.path       : '') +
+				(options.domain  ? '; domain='  + options.domain     : '') +
+				(options.secure  ? '; secure'                        : '');
+		}
+	};
+})(this);