webshim/js-webshim/dev/shims/color-picker.js

modular capability-based polyfill loading libary, which extends jQuery with HTML5 features in legacy browsers

/**
 * jPicker 1.1.6 modified for webshims
 *
 * jQuery Plugin for Photoshop style color picker
 *
 * Copyright (c) 2010 Christopher T. Tillman
 * Digital Magic Productions, Inc. (http://www.digitalmagicpro.com/)
 * MIT style license, FREE to use, alter, copy, sell, and especially ENHANCE
 *
 * Painstakingly ported from John Dyers' excellent work on his own color picker based on the Prototype framework.
 *
 * John Dyers' website: (http://johndyer.name)
 * Color Picker page:   (http://johndyer.name/post/2007/09/PhotoShop-like-JavaScript-Color-Picker.aspx)
 *
 */ 
(function ($, version) {
	"use strict";

	var mPrecision = function (value, precision) {
		if (precision === undefined) precision = 0;
		return Math.round(value * Math.pow(10, precision)) / Math.pow(10, precision);
	};
	var elemExtend = function (deep, elem, data) {
		var ex = elem;
		if (elem.nodeType) {
			ex = $.data(elem, 'wsjPicker') || $.data(elem, 'wsjPicker', {});
		}
		if(deep){
			$.extend(true, ex, data);
		} else {
			$.extend(ex, data);
		}
	};
	var Slider = // encapsulate slider functionality for the ColorMap and ColorBar - could be useful to use a jQuery UI draggable for this with certain extensions

	function (bar, options) {
		var $this = this, // private properties, methods, and events - keep these variables and classes invisible to outside code
			arrow = bar.find('img').eq(0), // the arrow image to drag
			minX = 0,
			maxX = 100,
			rangeX = 100,
			minY = 0,
			maxY = 100,
			rangeY = 100,
			x = 0,
			y = 0,
			offset,
			timeout,
			changeEvents = new Array(),
			fireChangeEvents = function (context) {
				for (var i = 0; i < changeEvents.length; i++) changeEvents[i].call($this, $this, context);
			},
			mouseDown = // bind the mousedown to the bar not the arrow for quick snapping to the clicked location

			function (e) {
				var off = bar.offset();
				offset = {
					l: off.left | 0,
					t: off.top | 0
				};
				clearTimeout(timeout);
				timeout = setTimeout( // using setTimeout for visual updates - once the style is updated the browser will re-render internally allowing the next Javascript to run

				function () {
					setValuesFromMousePosition.call($this, e);
				}, 0);
				// Bind mousemove and mouseup event to the document so it responds when dragged of of the bar - we will unbind these when on mouseup to save processing
				$(document).on('mousemove', mouseMove).on('mouseup', mouseUp);
				e.preventDefault(); // don't try to select anything or drag the image to the desktop
			},
			mouseMove = // set the values as the mouse moves

			function (e) {
				clearTimeout(timeout);
				timeout = setTimeout(function () {
					setValuesFromMousePosition.call($this, e);
				}, 0);
				e.stopPropagation();
				e.preventDefault();
				return false;
			},
			mouseUp = // unbind the document events - they aren't needed when not dragging

			function (e) {
				$(document).off('mouseup', mouseUp).off('mousemove', mouseMove);
				e.stopPropagation();
				e.preventDefault();
				return false;
			},
			setValuesFromMousePosition = // calculate mouse position and set value within the current range

			function (e) {
				var locX = e.pageX - offset.l,
					locY = e.pageY - offset.t,
					barW = bar.w, // local copies for YUI compressor
					barH = bar.h;
				// keep the arrow within the bounds of the bar
				if (locX < 0) locX = 0;
				else if (locX > barW) locX = barW;
				if (locY < 0) locY = 0;
				else if (locY > barH) locY = barH;
				val.call($this, 'xy', {
					x: ((locX / barW) * rangeX) + minX,
					y: ((locY / barH) * rangeY) + minY
				});
			},
			drawTimeout,
			draw = function () {
				var arrowOffsetX = 0,
					arrowOffsetY = 0,
					barW = bar.w,
					barH = bar.h,
					arrowW = arrow.w,
					arrowH = arrow.h;
				clearTimeout(drawTimeout);
				drawTimeout = setTimeout(function () {
					if (rangeX > 0) // range is greater than zero
					{
						// constrain to bounds
						if (x == maxX) arrowOffsetX = barW;
						else arrowOffsetX = ((x / rangeX) * barW) | 0;
					}
					if (rangeY > 0) // range is greater than zero
					{
						// constrain to bounds
						if (y == maxY) arrowOffsetY = barH;
						else arrowOffsetY = ((y / rangeY) * barH) | 0;
					}
					// if arrow width is greater than bar width, center arrow and prevent horizontal dragging
					if (arrowW >= barW) arrowOffsetX = (barW >> 1) - (arrowW >> 1); // number >> 1 - superfast bitwise divide by two and truncate (move bits over one bit discarding lowest)
					else arrowOffsetX -= arrowW >> 1;
					// if arrow height is greater than bar height, center arrow and prevent vertical dragging
					if (arrowH >= barH) arrowOffsetY = (barH >> 1) - (arrowH >> 1);
					else arrowOffsetY -= arrowH >> 1;
					// set the arrow position based on these offsets
					arrow.css({
						left: arrowOffsetX + 'px',
						top: arrowOffsetY + 'px'
					});
				}, 0);
			},
			val = function (name, value, context) {
				var set = value !== undefined;
				if (!set) {
					if (name === undefined || name == null) name = 'xy';
					switch (name.toLowerCase()) {
					case 'x':
						return x;
					case 'y':
						return y;
					case 'xy':
					default:
						return {
							x: x,
							y: y
						};
					}
				}
				if (context != null && context == $this) return;
				var changed = false,
					newX,
					newY;
				if (name == null) name = 'xy';
				switch (name.toLowerCase()) {
				case 'x':
					newX = value && (value.x && value.x | 0 || value | 0) || 0;
					break;
				case 'y':
					newY = value && (value.y && value.y | 0 || value | 0) || 0;
					break;
				case 'xy':
				default:
					newX = value && value.x && value.x | 0 || 0;
					newY = value && value.y && value.y | 0 || 0;
					break;
				}
				if (newX != null) {
					if (newX < minX) newX = minX;
					else if (newX > maxX) newX = maxX;
					if (x != newX) {
						x = newX;
						changed = true;
					}
				}
				if (newY != null) {
					if (newY < minY) newY = minY;
					else if (newY > maxY) newY = maxY;
					if (y != newY) {
						y = newY;
						changed = true;
					}
				}
				changed && fireChangeEvents.call($this, context || $this);
			},
			range = function (name, value) {
				var set = value !== undefined;
				if (!set) {
					if (name === undefined || name == null) name = 'all';
					switch (name.toLowerCase()) {
					case 'minx':
						return minX;
					case 'maxx':
						return maxX;
					case 'rangex':
						return {
							minX: minX,
							maxX: maxX,
							rangeX: rangeX
						};
					case 'miny':
						return minY;
					case 'maxy':
						return maxY;
					case 'rangey':
						return {
							minY: minY,
							maxY: maxY,
							rangeY: rangeY
						};
					case 'all':
					default:
						return {
							minX: minX,
							maxX: maxX,
							rangeX: rangeX,
							minY: minY,
							maxY: maxY,
							rangeY: rangeY
						};
					}
				}
				var changed = false,
					newMinX,
					newMaxX,
					newMinY,
					newMaxY;
				if (name == null) name = 'all';
				switch (name.toLowerCase()) {
				case 'minx':
					newMinX = value && (value.minX && value.minX | 0 || value | 0) || 0;
					break;
				case 'maxx':
					newMaxX = value && (value.maxX && value.maxX | 0 || value | 0) || 0;
					break;
				case 'rangex':
					newMinX = value && value.minX && value.minX | 0 || 0;
					newMaxX = value && value.maxX && value.maxX | 0 || 0;
					break;
				case 'miny':
					newMinY = value && (value.minY && value.minY | 0 || value | 0) || 0;
					break;
				case 'maxy':
					newMaxY = value && (value.maxY && value.maxY | 0 || value | 0) || 0;
					break;
				case 'rangey':
					newMinY = value && value.minY && value.minY | 0 || 0;
					newMaxY = value && value.maxY && value.maxY | 0 || 0;
					break;
				case 'all':
				default:
					newMinX = value && value.minX && value.minX | 0 || 0;
					newMaxX = value && value.maxX && value.maxX | 0 || 0;
					newMinY = value && value.minY && value.minY | 0 || 0;
					newMaxY = value && value.maxY && value.maxY | 0 || 0;
					break;
				}
				if (newMinX != null && minX != newMinX) {
					minX = newMinX;
					rangeX = maxX - minX;
				}
				if (newMaxX != null && maxX != newMaxX) {
					maxX = newMaxX;
					rangeX = maxX - minX;
				}
				if (newMinY != null && minY != newMinY) {
					minY = newMinY;
					rangeY = maxY - minY;
				}
				if (newMaxY != null && maxY != newMaxY) {
					maxY = newMaxY;
					rangeY = maxY - minY;
				}
			},
			bind = function (callback) {
				if ($.isFunction(callback)) changeEvents.push(callback);
			},
			unbind = function (callback) {
				if (!$.isFunction(callback)) return;
				var i;
				while ((i = $.inArray(callback, changeEvents)) != -1) changeEvents.splice(i, 1);
			},
			destroy = function () {
				// unbind all possible events and null objects
				$(document).off('mouseup', mouseUp).off('mousemove', mouseMove);
				bar.off('mousedown', mouseDown);
				bar = null;
				arrow = null;
				changeEvents = null;
			};
		
		$.extend(true, $this, // public properties, methods, and event bindings - these we need to access from other controls
		{
			val: val,
			range: range,
			bind: bind,
			unbind: unbind,
			destroy: destroy
		});
		// initialize this control
		arrow.src = options.arrow && options.arrow.image;
		arrow.w = options.arrow && options.arrow.width || arrow.width();
		arrow.h = options.arrow && options.arrow.height || arrow.height();
		bar.w = options.map && options.map.width || bar.width();
		bar.h = options.map && options.map.height || bar.height();
		// bind mousedown event
		bar.on('mousedown', mouseDown);
		bind.call($this, draw);
	},
		ColorValuePicker = // controls for all the input elements for the typing in color values

		function (picker, color, bindedHex, alphaPrecision) {
			var $this = this, // private properties and methods
				inputs = picker.find('td.Text input'),
				red = inputs.eq(3),
				green = inputs.eq(4),
				blue = inputs.eq(5),
				alpha = inputs.length > 7 ? inputs.eq(6) : null,
				hue = inputs.eq(0),
				saturation = inputs.eq(1),
				value = inputs.eq(2),
				hex = inputs.eq(inputs.length > 7 ? 7 : 6),
				ahex = inputs.length > 7 ? inputs.eq(8) : null,
				keyDown = // input box key down - use arrows to alter color

				function (e) {
					if (e.target.value == '' && e.target != hex.get(0) && (bindedHex != null && e.target != bindedHex.get(0) || bindedHex == null)) return;
					if (!validateKey(e)) return e;
					switch (e.target) {
					case red.get(0):
						switch (e.keyCode) {
						case 38:
							red.val(setValueInRange.call($this, (red.val() << 0) + 1, 0, 255));
							color.val('r', red.val(), e.target);
							return false;
						case 40:
							red.val(setValueInRange.call($this, (red.val() << 0) - 1, 0, 255));
							color.val('r', red.val(), e.target);
							return false;
						}
						break;
					case green.get(0):
						switch (e.keyCode) {
						case 38:
							green.val(setValueInRange.call($this, (green.val() << 0) + 1, 0, 255));
							color.val('g', green.val(), e.target);
							return false;
						case 40:
							green.val(setValueInRange.call($this, (green.val() << 0) - 1, 0, 255));
							color.val('g', green.val(), e.target);
							return false;
						}
						break;
					case blue.get(0):
						switch (e.keyCode) {
						case 38:
							blue.val(setValueInRange.call($this, (blue.val() << 0) + 1, 0, 255));
							color.val('b', blue.val(), e.target);
							return false;
						case 40:
							blue.val(setValueInRange.call($this, (blue.val() << 0) - 1, 0, 255));
							color.val('b', blue.val(), e.target);
							return false;
						}
						break;
					case alpha && alpha.get(0):
						switch (e.keyCode) {
						case 38:
							alpha.val(setValueInRange.call($this, parseFloat(alpha.val()) + 1, 0, 100));
							color.val('a', mPrecision((alpha.val() * 255) / 100, alphaPrecision), e.target);
							return false;
						case 40:
							alpha.val(setValueInRange.call($this, parseFloat(alpha.val()) - 1, 0, 100));
							color.val('a', mPrecision((alpha.val() * 255) / 100, alphaPrecision), e.target);
							return false;
						}
						break;
					case hue.get(0):
						switch (e.keyCode) {
						case 38:
							hue.val(setValueInRange.call($this, (hue.val() << 0) + 1, 0, 360));
							color.val('h', hue.val(), e.target);
							return false;
						case 40:
							hue.val(setValueInRange.call($this, (hue.val() << 0) - 1, 0, 360));
							color.val('h', hue.val(), e.target);
							return false;
						}
						break;
					case saturation.get(0):
						switch (e.keyCode) {
						case 38:
							saturation.val(setValueInRange.call($this, (saturation.val() << 0) + 1, 0, 100));
							color.val('s', saturation.val(), e.target);
							return false;
						case 40:
							saturation.val(setValueInRange.call($this, (saturation.val() << 0) - 1, 0, 100));
							color.val('s', saturation.val(), e.target);
							return false;
						}
						break;
					case value.get(0):
						switch (e.keyCode) {
						case 38:
							value.val(setValueInRange.call($this, (value.val() << 0) + 1, 0, 100));
							color.val('v', value.val(), e.target);
							return false;
						case 40:
							value.val(setValueInRange.call($this, (value.val() << 0) - 1, 0, 100));
							color.val('v', value.val(), e.target);
							return false;
						}
						break;
					}
				},
				keyUp = // input box key up - validate value and set color

				function (e) {
					if (e.target.value == '' && e.target != hex.get(0) && (bindedHex != null && e.target != bindedHex.get(0) || bindedHex == null)) return;
					if (!validateKey(e)) return e;
					switch (e.target) {
					case red.get(0):
						red.val(setValueInRange.call($this, red.val(), 0, 255));
						color.val('r', red.val(), e.target);
						break;
					case green.get(0):
						green.val(setValueInRange.call($this, green.val(), 0, 255));
						color.val('g', green.val(), e.target);
						break;
					case blue.get(0):
						blue.val(setValueInRange.call($this, blue.val(), 0, 255));
						color.val('b', blue.val(), e.target);
						break;
					case alpha && alpha.get(0):
						alpha.val(setValueInRange.call($this, alpha.val(), 0, 100));
						color.val('a', mPrecision((alpha.val() * 255) / 100, alphaPrecision), e.target);
						break;
					case hue.get(0):
						hue.val(setValueInRange.call($this, hue.val(), 0, 360));
						color.val('h', hue.val(), e.target);
						break;
					case saturation.get(0):
						saturation.val(setValueInRange.call($this, saturation.val(), 0, 100));
						color.val('s', saturation.val(), e.target);
						break;
					case value.get(0):
						value.val(setValueInRange.call($this, value.val(), 0, 100));
						color.val('v', value.val(), e.target);
						break;
					case hex.get(0):
						hex.val(hex.val().replace(/[^a-fA-F0-9]/g, '').toLowerCase().substring(0, 6));
						bindedHex && bindedHex.val(hex.val());
						color.val('hex', hex.val() != '' ? hex.val() : null, e.target);
						break;
					case bindedHex && bindedHex.get(0):
						bindedHex.val(bindedHex.val().replace(/[^a-fA-F0-9]/g, '').toLowerCase().substring(0, 6));
						hex.val(bindedHex.val());
						color.val('hex', bindedHex.val() != '' ? bindedHex.val() : null, e.target);
						break;
					case ahex && ahex.get(0):
						ahex.val(ahex.val().replace(/[^a-fA-F0-9]/g, '').toLowerCase().substring(0, 2));
						color.val('a', ahex.val() != null ? parseInt(ahex.val(), 16) : null, e.target);
						break;
					}
				},
				blur = // input box blur - reset to original if value empty

				function (e) {
					if (color.val() != null) {
						switch (e.target) {
						case red.get(0):
							red.val(color.val('r'));
							break;
						case green.get(0):
							green.val(color.val('g'));
							break;
						case blue.get(0):
							blue.val(color.val('b'));
							break;
						case alpha && alpha.get(0):
							alpha.val(mPrecision((color.val('a') * 100) / 255, alphaPrecision));
							break;
						case hue.get(0):
							hue.val(color.val('h'));
							break;
						case saturation.get(0):
							saturation.val(color.val('s'));
							break;
						case value.get(0):
							value.val(color.val('v'));
							break;
						case hex.get(0):
						case bindedHex && bindedHex.get(0):
							hex.val(color.val('hex'));
							bindedHex && bindedHex.val(color.val('hex'));
							break;
						case ahex && ahex.get(0):
							ahex.val(color.val('ahex').substring(6));
							break;
						}
					}
				},
				validateKey = // validate key

				function (e) {
					switch (e.keyCode) {
					case 9:
					case 16:
					case 29:
					case 37:
					case 39:
						return false;
					case 'c'.charCodeAt():
					case 'v'.charCodeAt():
						if (e.ctrlKey) return false;
					}
					return true;
				},
				setValueInRange = // constrain value within range

				function (value, min, max) {
					if (value == '' || isNaN(value)) return min;
					if (value > max) return max;
					if (value < min) return min;
					return value;
				},
				colorChanged = function (ui, context) {
					var all = ui.val('all');
					if (context != red.get(0)) red.val(all != null ? all.r : '');
					if (context != green.get(0)) green.val(all != null ? all.g : '');
					if (context != blue.get(0)) blue.val(all != null ? all.b : '');
					if (alpha && context != alpha.get(0)) alpha.val(all != null ? mPrecision((all.a * 100) / 255, alphaPrecision) : '');
					if (context != hue.get(0)) hue.val(all != null ? all.h : '');
					if (context != saturation.get(0)) saturation.val(all != null ? all.s : '');
					if (context != value.get(0)) value.val(all != null ? all.v : '');
					if (context != hex.get(0) && (bindedHex && context != bindedHex.get(0) || !bindedHex)) hex.val(all != null ? all.hex : '');
					if (bindedHex && context != bindedHex.get(0) && context != hex.get(0)) bindedHex.val(all != null ? all.hex : '');
					if (ahex && context != ahex.get(0)) ahex.val(all != null ? all.ahex.substring(6) : '');
				},
				destroy = function () {
					// unbind all events and null objects
					red.add(green).add(blue).add(alpha).add(hue).add(saturation).add(value).add(hex).add(bindedHex).add(ahex).off('keyup', keyUp).off('blur', blur);
					red.add(green).add(blue).add(alpha).add(hue).add(saturation).add(value).off('keydown', keyDown);
					color.off(colorChanged);
					red = null;
					green = null;
					blue = null;
					alpha = null;
					hue = null;
					saturation = null;
					value = null;
					hex = null;
					ahex = null;
				};
			elemExtend(true, $this, // public properties and methods
			{
				destroy: destroy
			});
			red.add(green).add(blue).add(alpha).add(hue).add(saturation).add(value).add(hex).add(bindedHex).add(ahex).on('keyup', keyUp).on('blur', blur);
			red.add(green).add(blue).add(alpha).add(hue).add(saturation).add(value).on('keydown', keyDown);
			color.bind(colorChanged);
		};
	$.wsjPicker = {
		List: [], // array holding references to each active instance of the control
		Color: // color object - we will be able to assign by any color space type or retrieve any color space info
		// we want this public so we can optionally assign new color objects to initial values using inputs other than a string hex value (also supported)

		function (init) {
			var $this = this,
				r,
				g,
				b,
				a,
				h,
				s,
				v,
				changeEvents = new Array(),
				fireChangeEvents = function (context) {
					for (var i = 0; i < changeEvents.length; i++) changeEvents[i].call($this, $this, context);
				},
				val = function (name, value, context) {
					var set = value !== undefined;
					if (!set) {
						if (name === undefined || name == null || name == '') name = 'all';
						if (r == null) return null;
						switch (name.toLowerCase()) {
						case 'ahex':
							return ColorMethods.rgbaToHex({
								r: r,
								g: g,
								b: b,
								a: a
							});
						case 'hex':
							return val('ahex').substring(0, 6);
						case 'all':
							return {
								r: r,
								g: g,
								b: b,
								a: a,
								h: h,
								s: s,
								v: v,
								hex: val.call($this, 'hex'),
								ahex: val.call($this, 'ahex')
							};
						default:
							var ret = {};
							for (var i = 0; i < name.length; i++) {
								switch (name.charAt(i)) {
								case 'r':
									if (name.length == 1) ret = r;
									else ret.r = r;
									break;
								case 'g':
									if (name.length == 1) ret = g;
									else ret.g = g;
									break;
								case 'b':
									if (name.length == 1) ret = b;
									else ret.b = b;
									break;
								case 'a':
									if (name.length == 1) ret = a;
									else ret.a = a;
									break;
								case 'h':
									if (name.length == 1) ret = h;
									else ret.h = h;
									break;
								case 's':
									if (name.length == 1) ret = s;
									else ret.s = s;
									break;
								case 'v':
									if (name.length == 1) ret = v;
									else ret.v = v;
									break;
								}
							}
							return ret == {} ? val.call($this, 'all') : ret;
							break;
						}
					}
					if (context != null && context == $this) return;
					var changed = false;
					if (name == null) name = '';
					if (value == null) {
						if (r != null) {
							r = null;
							changed = true;
						}
						if (g != null) {
							g = null;
							changed = true;
						}
						if (b != null) {
							b = null;
							changed = true;
						}
						if (a != null) {
							a = null;
							changed = true;
						}
						if (h != null) {
							h = null;
							changed = true;
						}
						if (s != null) {
							s = null;
							changed = true;
						}
						if (v != null) {
							v = null;
							changed = true;
						}
						changed && fireChangeEvents.call($this, context || $this);
						return;
					}
					switch (name.toLowerCase()) {
					case 'ahex':
					case 'hex':
						var ret = ColorMethods.hexToRgba(value && (value.ahex || value.hex) || value || '00000000');
						val.call($this, 'rgba', {
							r: ret.r,
							g: ret.g,
							b: ret.b,
							a: name == 'ahex' ? ret.a : a != null ? a : 255
						}, context);
						break;
					default:
						if (value && (value.ahex != null || value.hex != null)) {
							val.call($this, 'ahex', value.ahex || value.hex || '00000000', context);
							return;
						}
						var newV = {}, rgb = false,
							hsv = false;
						if (value.r !== undefined && !name.indexOf('r') == -1) name += 'r';
						if (value.g !== undefined && !name.indexOf('g') == -1) name += 'g';
						if (value.b !== undefined && !name.indexOf('b') == -1) name += 'b';
						if (value.a !== undefined && !name.indexOf('a') == -1) name += 'a';
						if (value.h !== undefined && !name.indexOf('h') == -1) name += 'h';
						if (value.s !== undefined && !name.indexOf('s') == -1) name += 's';
						if (value.v !== undefined && !name.indexOf('v') == -1) name += 'v';
						for (var i = 0; i < name.length; i++) {
							switch (name.charAt(i)) {
							case 'r':
								if (hsv) continue;
								rgb = true;
								newV.r = value && value.r && value.r | 0 || value && value | 0 || 0;
								if (newV.r < 0) newV.r = 0;
								else if (newV.r > 255) newV.r = 255;
								if (r != newV.r) {
									r = newV.r;
									changed = true;
								}
								break;
							case 'g':
								if (hsv) continue;
								rgb = true;
								newV.g = value && value.g && value.g | 0 || value && value | 0 || 0;
								if (newV.g < 0) newV.g = 0;
								else if (newV.g > 255) newV.g = 255;
								if (g != newV.g) {
									g = newV.g;
									changed = true;
								}
								break;
							case 'b':
								if (hsv) continue;
								rgb = true;
								newV.b = value && value.b && value.b | 0 || value && value | 0 || 0;
								if (newV.b < 0) newV.b = 0;
								else if (newV.b > 255) newV.b = 255;
								if (b != newV.b) {
									b = newV.b;
									changed = true;
								}
								break;
							case 'a':
								newV.a = value && value.a != null ? value.a | 0 : value != null ? value | 0 : 255;
								if (newV.a < 0) newV.a = 0;
								else if (newV.a > 255) newV.a = 255;
								if (a != newV.a) {
									a = newV.a;
									changed = true;
								}
								break;
							case 'h':
								if (rgb) continue;
								hsv = true;
								newV.h = value && value.h && value.h | 0 || value && value | 0 || 0;
								if (newV.h < 0) newV.h = 0;
								else if (newV.h > 360) newV.h = 360;
								if (h != newV.h) {
									h = newV.h;
									changed = true;
								}
								break;
							case 's':
								if (rgb) continue;
								hsv = true;
								newV.s = value && value.s != null ? value.s | 0 : value != null ? value | 0 : 100;
								if (newV.s < 0) newV.s = 0;
								else if (newV.s > 100) newV.s = 100;
								if (s != newV.s) {
									s = newV.s;
									changed = true;
								}
								break;
							case 'v':
								if (rgb) continue;
								hsv = true;
								newV.v = value && value.v != null ? value.v | 0 : value != null ? value | 0 : 100;
								if (newV.v < 0) newV.v = 0;
								else if (newV.v > 100) newV.v = 100;
								if (v != newV.v) {
									v = newV.v;
									changed = true;
								}
								break;
							}
						}
						if (changed) {
							if (rgb) {
								r = r || 0;
								g = g || 0;
								b = b || 0;
								var ret = ColorMethods.rgbToHsv({
									r: r,
									g: g,
									b: b
								});
								h = ret.h;
								s = ret.s;
								v = ret.v;
							} else if (hsv) {
								h = h || 0;
								s = s != null ? s : 100;
								v = v != null ? v : 100;
								var ret = ColorMethods.hsvToRgb({
									h: h,
									s: s,
									v: v
								});
								r = ret.r;
								g = ret.g;
								b = ret.b;
							}
							a = a != null ? a : 255;
							fireChangeEvents.call($this, context || $this);
						}
						break;
					}
				},
				bind = function (callback) {
					if ($.isFunction(callback)) changeEvents.push(callback);
				},
				unbind = function (callback) {
					if (!$.isFunction(callback)) return;
					var i;
					while ((i = $.inArray(callback, changeEvents)) != -1) changeEvents.splice(i, 1);
				},
				destroy = function () {
					changeEvents = null;
				}
			elemExtend(true, $this, // public properties and methods
			{
				val: val,
				bind: bind,
				unbind: unbind,
				destroy: destroy
			});
			if (init) {
				if (init.ahex != null) val('ahex', init);
				else if (init.hex != null) val((init.a != null ? 'a' : '') + 'hex', init.a != null ? {
						ahex: init.hex + ColorMethods.intToHex(init.a)
					} : init);
				else if (init.r != null && init.g != null && init.b != null) val('rgb' + (init.a != null ? 'a' : ''), init);
				else if (init.h != null && init.s != null && init.v != null) val('hsv' + (init.a != null ? 'a' : ''), init);
			}
		},
		ColorMethods: // color conversion methods  - make public to give use to external scripts
		{
			hexToRgba: function (hex) {
				hex = this.validateHex(hex);
				if (hex == '') return {
						r: null,
						g: null,
						b: null,
						a: null
				};
				var r = '00',
					g = '00',
					b = '00',
					a = '255';
				if (hex.length == 6) hex += 'ff';
				if (hex.length > 6) {
					r = hex.substring(0, 2);
					g = hex.substring(2, 4);
					b = hex.substring(4, 6);
					a = hex.substring(6, hex.length);
				} else {
					if (hex.length > 4) {
						r = hex.substring(4, hex.length);
						hex = hex.substring(0, 4);
					}
					if (hex.length > 2) {
						g = hex.substring(2, hex.length);
						hex = hex.substring(0, 2);
					}
					if (hex.length > 0) b = hex.substring(0, hex.length);
				}
				return {
					r: this.hexToInt(r),
					g: this.hexToInt(g),
					b: this.hexToInt(b),
					a: this.hexToInt(a)
				};
			},
			validateHex: function (hex) {
				hex = hex.toLowerCase().replace(/[^a-f0-9]/g, '');
				if (hex.length > 8) hex = hex.substring(0, 8);
				return hex;
			},
			rgbaToHex: function (rgba) {
				return this.intToHex(rgba.r) + this.intToHex(rgba.g) + this.intToHex(rgba.b) + this.intToHex(rgba.a);
			},
			intToHex: function (dec) {
				var result = (dec | 0).toString(16);
				if (result.length == 1) result = ('0' + result);
				return result.toLowerCase();
			},
			hexToInt: function (hex) {
				return parseInt(hex, 16);
			},
			rgbToHsv: function (rgb) {
				var r = rgb.r / 255,
					g = rgb.g / 255,
					b = rgb.b / 255,
					hsv = {
						h: 0,
						s: 0,
						v: 0
					}, min = 0,
					max = 0,
					delta;
				if (r >= g && r >= b) {
					max = r;
					min = g > b ? b : g;
				} else if (g >= b && g >= r) {
					max = g;
					min = r > b ? b : r;
				} else {
					max = b;
					min = g > r ? r : g;
				}
				hsv.v = max;
				hsv.s = max ? (max - min) / max : 0;
				if (!hsv.s) hsv.h = 0;
				else {
					delta = max - min;
					if (r == max) hsv.h = (g - b) / delta;
					else if (g == max) hsv.h = 2 + (b - r) / delta;
					else hsv.h = 4 + (r - g) / delta;
					hsv.h = parseInt(hsv.h * 60);
					if (hsv.h < 0) hsv.h += 360;
				}
				hsv.s = (hsv.s * 100) | 0;
				hsv.v = (hsv.v * 100) | 0;
				return hsv;
			},
			hsvToRgb: function (hsv) {
				var rgb = {
					r: 0,
					g: 0,
					b: 0,
					a: 100
				}, h = hsv.h,
					s = hsv.s,
					v = hsv.v;
				if (s == 0) {
					if (v == 0) rgb.r = rgb.g = rgb.b = 0;
					else rgb.r = rgb.g = rgb.b = (v * 255 / 100) | 0;
				} else {
					if (h == 360) h = 0;
					h /= 60;
					s = s / 100;
					v = v / 100;
					var i = h | 0,
						f = h - i,
						p = v * (1 - s),
						q = v * (1 - (s * f)),
						t = v * (1 - (s * (1 - f)));
					switch (i) {
					case 0:
						rgb.r = v;
						rgb.g = t;
						rgb.b = p;
						break;
					case 1:
						rgb.r = q;
						rgb.g = v;
						rgb.b = p;
						break;
					case 2:
						rgb.r = p;
						rgb.g = v;
						rgb.b = t;
						break;
					case 3:
						rgb.r = p;
						rgb.g = q;
						rgb.b = v;
						break;
					case 4:
						rgb.r = t;
						rgb.g = p;
						rgb.b = v;
						break;
					case 5:
						rgb.r = v;
						rgb.g = p;
						rgb.b = q;
						break;
					}
					rgb.r = (rgb.r * 255) | 0;
					rgb.g = (rgb.g * 255) | 0;
					rgb.b = (rgb.b * 255) | 0;
				}
				return rgb;
			}
		}
	};
	var Color = $.wsjPicker.Color,
		List = $.wsjPicker.List,
		ColorMethods = $.wsjPicker.ColorMethods; // local copies for YUI compressor
	$.fn.wsjPicker = function (options) {
		var $arguments = arguments;
		return this.each(function () {
			var $this = this,
				settings = $.extend(true, {}, $.fn.wsjPicker.defaults, options); // local copies for YUI compressor
			
			settings.window.liveUpdate = false; // Basic control binding for inline use - You will need to override the liveCallback or commitCallback function to retrieve results
			var container = null,
				colorMapDiv = null,
				colorBarDiv = null,
				colorMapL1 = null, // different layers of colorMap and colorBar
				colorMapL2 = null,
				colorMapL3 = null,
				colorBarL1 = null,
				colorBarL2 = null,
				colorBarL3 = null,
				colorBarL4 = null,
				colorBarL5 = null,
				colorBarL6 = null,
				colorMap = null, // color maps
				colorBar = null,
				colorPicker = null,
				elementStartX = null, // Used to record the starting css positions for dragging the control
				elementStartY = null,
				pageStartX = null, // Used to record the mousedown coordinates for dragging the control
				pageStartY = null,
				activePreview = null, // color boxes above the radio buttons
				currentPreview = null,
				okButton = null,
				cancelButton = null,
				grid = null, // preset colors grid
				moveBar = null, // drag bar
				setColorMode = // set color mode and update visuals for the new color mode

				function (colorMode) {
					var active = color.active, // local copies for YUI compressor
						clientPath = images.clientPath,
						hex = active.val('hex'),
						rgbMap,
						rgbBar;
					settings.color.mode = colorMode;
					switch (colorMode) {
					case 'h':
						setTimeout(function () {
							setBG.call($this, colorMapDiv, 'transparent');
							setImgLoc.call($this, colorMapL1, 0);
							setAlpha.call($this, colorMapL1, 100);
							setImgLoc.call($this, colorMapL2, 260);
							setAlpha.call($this, colorMapL2, 100);
							setBG.call($this, colorBarDiv, 'transparent');
							setImgLoc.call($this, colorBarL1, 0);
							setAlpha.call($this, colorBarL1, 100);
							setImgLoc.call($this, colorBarL2, 260);
							setAlpha.call($this, colorBarL2, 100);
							setImgLoc.call($this, colorBarL3, 260);
							setAlpha.call($this, colorBarL3, 100);
							setImgLoc.call($this, colorBarL4, 260);
							setAlpha.call($this, colorBarL4, 100);
							setImgLoc.call($this, colorBarL6, 260);
							setAlpha.call($this, colorBarL6, 100);
						}, 0);
						colorMap.range('all', {
							minX: 0,
							maxX: 100,
							minY: 0,
							maxY: 100
						});
						colorBar.range('rangeY', {
							minY: 0,
							maxY: 360
						});
						if (active.val('ahex') == null) break;
						colorMap.val('xy', {
							x: active.val('s'),
							y: 100 - active.val('v')
						}, colorMap);
						colorBar.val('y', 360 - active.val('h'), colorBar);
						break;
					case 's':
						setTimeout(function () {
							setBG.call($this, colorMapDiv, 'transparent');
							setImgLoc.call($this, colorMapL1, -260);
							setImgLoc.call($this, colorMapL2, -520);
							setImgLoc.call($this, colorBarL1, -260);
							setImgLoc.call($this, colorBarL2, -520);
							setImgLoc.call($this, colorBarL6, 260);
							setAlpha.call($this, colorBarL6, 100);
						}, 0);
						colorMap.range('all', {
							minX: 0,
							maxX: 360,
							minY: 0,
							maxY: 100
						});
						colorBar.range('rangeY', {
							minY: 0,
							maxY: 100
						});
						if (active.val('ahex') == null) break;
						colorMap.val('xy', {
							x: active.val('h'),
							y: 100 - active.val('v')
						}, colorMap);
						colorBar.val('y', 100 - active.val('s'), colorBar);
						break;
					case 'v':
						setTimeout(function () {
							setBG.call($this, colorMapDiv, '000000');
							setImgLoc.call($this, colorMapL1, -780);
							setImgLoc.call($this, colorMapL2, 260);
							setBG.call($this, colorBarDiv, hex);
							setImgLoc.call($this, colorBarL1, -520);
							setImgLoc.call($this, colorBarL2, 260);
							setAlpha.call($this, colorBarL2, 100);
							setImgLoc.call($this, colorBarL6, 260);
							setAlpha.call($this, colorBarL6, 100);
						}, 0);
						colorMap.range('all', {
							minX: 0,
							maxX: 360,
							minY: 0,
							maxY: 100
						});
						colorBar.range('rangeY', {
							minY: 0,
							maxY: 100
						});
						if (active.val('ahex') == null) break;
						colorMap.val('xy', {
							x: active.val('h'),
							y: 100 - active.val('s')
						}, colorMap);
						colorBar.val('y', 100 - active.val('v'), colorBar);
						break;
					case 'r':
						rgbMap = -1040;
						rgbBar = -780;
						colorMap.range('all', {
							minX: 0,
							maxX: 255,
							minY: 0,
							maxY: 255
						});
						colorBar.range('rangeY', {
							minY: 0,
							maxY: 255
						});
						if (active.val('ahex') == null) break;
						colorMap.val('xy', {
							x: active.val('b'),
							y: 255 - active.val('g')
						}, colorMap);
						colorBar.val('y', 255 - active.val('r'), colorBar);
						break;
					case 'g':
						rgbMap = -1560;
						rgbBar = -1820;
						colorMap.range('all', {
							minX: 0,
							maxX: 255,
							minY: 0,
							maxY: 255
						});
						colorBar.range('rangeY', {
							minY: 0,
							maxY: 255
						});
						if (active.val('ahex') == null) break;
						colorMap.val('xy', {
							x: active.val('b'),
							y: 255 - active.val('r')
						}, colorMap);
						colorBar.val('y', 255 - active.val('g'), colorBar);
						break;
					case 'b':
						rgbMap = -2080;
						rgbBar = -2860;
						colorMap.range('all', {
							minX: 0,
							maxX: 255,
							minY: 0,
							maxY: 255
						});
						colorBar.range('rangeY', {
							minY: 0,
							maxY: 255
						});
						if (active.val('ahex') == null) break;
						colorMap.val('xy', {
							x: active.val('r'),
							y: 255 - active.val('g')
						}, colorMap);
						colorBar.val('y', 255 - active.val('b'), colorBar);
						break;
					case 'a':
						setTimeout(function () {
							setBG.call($this, colorMapDiv, 'transparent');
							setImgLoc.call($this, colorMapL1, -260);
							setImgLoc.call($this, colorMapL2, -520);
							setImgLoc.call($this, colorBarL1, 260);
							setImgLoc.call($this, colorBarL2, 260);
							setAlpha.call($this, colorBarL2, 100);
							setImgLoc.call($this, colorBarL6, 0);
							setAlpha.call($this, colorBarL6, 100);
						}, 0);
						colorMap.range('all', {
							minX: 0,
							maxX: 360,
							minY: 0,
							maxY: 100
						});
						colorBar.range('rangeY', {
							minY: 0,
							maxY: 255
						});
						if (active.val('ahex') == null) break;
						colorMap.val('xy', {
							x: active.val('h'),
							y: 100 - active.val('v')
						}, colorMap);
						colorBar.val('y', 255 - active.val('a'), colorBar);
						break;
					default:
						throw ('Invalid Mode');
						break;
					}
					switch (colorMode) {
					case 'h':
						break;
					case 's':
					case 'v':
					case 'a':
						setTimeout(function () {
							setAlpha.call($this, colorMapL1, 100);
							setAlpha.call($this, colorBarL1, 100);
							setImgLoc.call($this, colorBarL3, 260);
							setAlpha.call($this, colorBarL3, 100);
							setImgLoc.call($this, colorBarL4, 260);
							setAlpha.call($this, colorBarL4, 100);
						}, 0);
						break;
					case 'r':
					case 'g':
					case 'b':
						setTimeout(function () {
							setBG.call($this, colorMapDiv, 'transparent');
							setBG.call($this, colorBarDiv, 'transparent');
							setAlpha.call($this, colorBarL1, 100);
							setAlpha.call($this, colorMapL1, 100);
							setImgLoc.call($this, colorMapL1, rgbMap);
							setImgLoc.call($this, colorMapL2, rgbMap - 260);
							setImgLoc.call($this, colorBarL1, rgbBar - 780);
							setImgLoc.call($this, colorBarL2, rgbBar - 520);
							setImgLoc.call($this, colorBarL3, rgbBar);
							setImgLoc.call($this, colorBarL4, rgbBar - 260);
							setImgLoc.call($this, colorBarL6, 260);
							setAlpha.call($this, colorBarL6, 100);
						}, 0);
						break;
					}
					if (active.val('ahex') == null) return;
					activeColorChanged.call($this, active);
				},
				activeColorChanged = // Update color when user changes text values

				function (ui, context) {
					if (context == null || (context != colorBar && context != colorMap)) positionMapAndBarArrows.call($this, ui, context);
					setTimeout(function () {
						updatePreview.call($this, ui);
						updateMapVisuals.call($this, ui);
						updateBarVisuals.call($this, ui);
					}, 0);
				},
				mapValueChanged = // user has dragged the ColorMap pointer

				function (ui, context) {
					var active = color.active;
					if (context != colorMap && active.val() == null) return;
					var xy = ui.val('all');
					switch (settings.color.mode) {
					case 'h':
						active.val('sv', {
							s: xy.x,
							v: 100 - xy.y
						}, context);
						break;
					case 's':
					case 'a':
						active.val('hv', {
							h: xy.x,
							v: 100 - xy.y
						}, context);
						break;
					case 'v':
						active.val('hs', {
							h: xy.x,
							s: 100 - xy.y
						}, context);
						break;
					case 'r':
						active.val('gb', {
							g: 255 - xy.y,
							b: xy.x
						}, context);
						break;
					case 'g':
						active.val('rb', {
							r: 255 - xy.y,
							b: xy.x
						}, context);
						break;
					case 'b':
						active.val('rg', {
							r: xy.x,
							g: 255 - xy.y
						}, context);
						break;
					}
				},
				colorBarValueChanged = // user has dragged the ColorBar slider

				function (ui, context) {
					var active = color.active;
					if (context != colorBar && active.val() == null) return;
					switch (settings.color.mode) {
					case 'h':
						active.val('h', {
							h: 360 - ui.val('y')
						}, context);
						break;
					case 's':
						active.val('s', {
							s: 100 - ui.val('y')
						}, context);
						break;
					case 'v':
						active.val('v', {
							v: 100 - ui.val('y')
						}, context);
						break;
					case 'r':
						active.val('r', {
							r: 255 - ui.val('y')
						}, context);
						break;
					case 'g':
						active.val('g', {
							g: 255 - ui.val('y')
						}, context);
						break;
					case 'b':
						active.val('b', {
							b: 255 - ui.val('y')
						}, context);
						break;
					case 'a':
						active.val('a', 255 - ui.val('y'), context);
						break;
					}
				},
				positionMapAndBarArrows = // position map and bar arrows to match current color

				function (ui, context) {
					if (context != colorMap) {
						switch (settings.color.mode) {
						case 'h':
							var sv = ui.val('sv');
							colorMap.val('xy', {
								x: sv != null ? sv.s : 100,
								y: 100 - (sv != null ? sv.v : 100)
							}, context);
							break;
						case 's':
						case 'a':
							var hv = ui.val('hv');
							colorMap.val('xy', {
								x: hv && hv.h || 0,
								y: 100 - (hv != null ? hv.v : 100)
							}, context);
							break;
						case 'v':
							var hs = ui.val('hs');
							colorMap.val('xy', {
								x: hs && hs.h || 0,
								y: 100 - (hs != null ? hs.s : 100)
							}, context);
							break;
						case 'r':
							var bg = ui.val('bg');
							colorMap.val('xy', {
								x: bg && bg.b || 0,
								y: 255 - (bg && bg.g || 0)
							}, context);
							break;
						case 'g':
							var br = ui.val('br');
							colorMap.val('xy', {
								x: br && br.b || 0,
								y: 255 - (br && br.r || 0)
							}, context);
							break;
						case 'b':
							var rg = ui.val('rg');
							colorMap.val('xy', {
								x: rg && rg.r || 0,
								y: 255 - (rg && rg.g || 0)
							}, context);
							break;
						}
					}
					if (context != colorBar) {
						switch (settings.color.mode) {
						case 'h':
							colorBar.val('y', 360 - (ui.val('h') || 0), context);
							break;
						case 's':
							var s = ui.val('s');
							colorBar.val('y', 100 - (s != null ? s : 100), context);
							break;
						case 'v':
							var v = ui.val('v');
							colorBar.val('y', 100 - (v != null ? v : 100), context);
							break;
						case 'r':
							colorBar.val('y', 255 - (ui.val('r') || 0), context);
							break;
						case 'g':
							colorBar.val('y', 255 - (ui.val('g') || 0), context);
							break;
						case 'b':
							colorBar.val('y', 255 - (ui.val('b') || 0), context);
							break;
						case 'a':
							var a = ui.val('a');
							colorBar.val('y', 255 - (a != null ? a : 255), context);
							break;
						}
					}
				},
				updatePreview = function (ui) {
					try {
						var all = ui.val('all');
						activePreview.css({
							backgroundColor: all && '#' + all.hex || 'transparent'
						});
						setAlpha.call($this, activePreview, all && mPrecision((all.a * 100) / 255, 4) || 0);
					} catch (e) {}
				},
				updateMapVisuals = function (ui) {
					switch (settings.color.mode) {
					case 'h':
						setBG.call($this, colorMapDiv, new Color({
							h: ui.val('h') || 0,
							s: 100,
							v: 100
						}).val('hex'));
						break;
					case 's':
					case 'a':
						var s = ui.val('s');
						setAlpha.call($this, colorMapL2, 100 - (s != null ? s : 100));
						break;
					case 'v':
						var v = ui.val('v');
						setAlpha.call($this, colorMapL1, v != null ? v : 100);
						break;
					case 'r':
						setAlpha.call($this, colorMapL2, mPrecision((ui.val('r') || 0) / 255 * 100, 4));
						break;
					case 'g':
						setAlpha.call($this, colorMapL2, mPrecision((ui.val('g') || 0) / 255 * 100, 4));
						break;
					case 'b':
						setAlpha.call($this, colorMapL2, mPrecision((ui.val('b') || 0) / 255 * 100));
						break;
					}
					var a = ui.val('a');
					setAlpha.call($this, colorMapL3, mPrecision(((255 - (a || 0)) * 100) / 255, 4));
				},
				updateBarVisuals = function (ui) {
					switch (settings.color.mode) {
					case 'h':
						var a = ui.val('a');
						setAlpha.call($this, colorBarL5, mPrecision(((255 - (a || 0)) * 100) / 255, 4));
						break;
					case 's':
						var hva = ui.val('hva'),
							saturatedColor = new Color({
								h: hva && hva.h || 0,
								s: 100,
								v: hva != null ? hva.v : 100
							});
						setBG.call($this, colorBarDiv, saturatedColor.val('hex'));
						setAlpha.call($this, colorBarL2, 100 - (hva != null ? hva.v : 100));
						setAlpha.call($this, colorBarL5, mPrecision(((255 - (hva && hva.a || 0)) * 100) / 255, 4));
						break;
					case 'v':
						var hsa = ui.val('hsa'),
							valueColor = new Color({
								h: hsa && hsa.h || 0,
								s: hsa != null ? hsa.s : 100,
								v: 100
							});
						setBG.call($this, colorBarDiv, valueColor.val('hex'));
						setAlpha.call($this, colorBarL5, mPrecision(((255 - (hsa && hsa.a || 0)) * 100) / 255, 4));
						break;
					case 'r':
					case 'g':
					case 'b':
						var hValue = 0,
							vValue = 0,
							rgba = ui.val('rgba');
						if (settings.color.mode == 'r') {
							hValue = rgba && rgba.b || 0;
							vValue = rgba && rgba.g || 0;
						} else if (settings.color.mode == 'g') {
							hValue = rgba && rgba.b || 0;
							vValue = rgba && rgba.r || 0;
						} else if (settings.color.mode == 'b') {
							hValue = rgba && rgba.r || 0;
							vValue = rgba && rgba.g || 0;
						}
						var middle = vValue > hValue ? hValue : vValue;
						setAlpha.call($this, colorBarL2, hValue > vValue ? mPrecision(((hValue - vValue) / (255 - vValue)) * 100, 4) : 0);
						setAlpha.call($this, colorBarL3, vValue > hValue ? mPrecision(((vValue - hValue) / (255 - hValue)) * 100, 4) : 0);
						setAlpha.call($this, colorBarL4, mPrecision((middle / 255) * 100, 4));
						setAlpha.call($this, colorBarL5, mPrecision(((255 - (rgba && rgba.a || 0)) * 100) / 255, 4));
						break;
					case 'a':
						var a = ui.val('a');
						setBG.call($this, colorBarDiv, ui.val('hex') || '000000');
						setAlpha.call($this, colorBarL5, a != null ? 0 : 100);
						setAlpha.call($this, colorBarL6, a != null ? 100 : 0);
						break;
					}
				},
				setBG = function (el, c) {
					el.css({
						backgroundColor: c && c.length == 6 && '#' + c || 'transparent'
					});
				},
				setImg = function (img, src) {
					img.css({
						backgroundImage: 'url(\'' + src + '\')'
					});
				},
				setImgLoc = function (img, y) {
					img.css({
						top: y + 'px'
					});
				},
				setAlpha = function (obj, alpha) {
					obj.css({
						visibility: alpha > 0 ? 'visible' : 'hidden'
					});
					if (alpha > 0 && alpha < 100) {
						obj.css({
							opacity: mPrecision(alpha / 100, 4)
						});
					} else if (alpha == 0 || alpha == 100) {
						obj.css({
								opacity: ''
							});
					}
				},
				revertColor = // revert color to original color when opened

				function () {
					color.active.val('ahex', color.current.val('ahex'));
				},
				commitColor = // commit the color changes

				function () {
					color.current.val('ahex', color.active.val('ahex'));
				},
				radioClicked = function (e) {
					container.find('input[type="radio"]:not([value="' + e.target.value + '"])').prop('checked', false);
					setColorMode.call($this, e.target.value);
				},
				currentClicked = function () {
					revertColor.call($this);
				},
				cancelClicked = function () {
					revertColor.call($this);
					$.isFunction(cancelCallback) && cancelCallback.call($this, color.active, cancelButton);
				},
				okClicked = function () {
					commitColor.call($this);
					$.isFunction(commitCallback) && commitCallback.call($this, color.active, okButton);
				},
				currentColorChanged = function (ui, context) {
					var hex = ui.val('hex');
					currentPreview.css({
						backgroundColor: hex && '#' + hex || 'transparent'
					});
					setAlpha.call($this, currentPreview, mPrecision(((ui.val('a') || 0) * 100) / 255, 4));
				},
				moveBarMouseDown = function (e) {
					elementStartX = parseInt(container.css('left'), 10) || 0;
					elementStartY = parseInt(container.css('top'), 10) || 0;
					pageStartX = e.pageX;
					pageStartY = e.pageY;
					// bind events to document to move window - we will unbind these on mouseup
					$(document).on('mousemove', documentMouseMove).on('mouseup', documentMouseUp);
					e.preventDefault(); // prevent attempted dragging of the column
				},
				documentMouseMove = function (e) {
					container.css({
						left: elementStartX - (pageStartX - e.pageX) + 'px',
						top: elementStartY - (pageStartY - e.pageY) + 'px'
					});
					
					
					return false;
				},
				documentMouseUp = function (e) {
					$(document).off('mousemove', documentMouseMove).off('mouseup', documentMouseUp);
					
					return false;
				},
				quickPickClicked = function (e) {
					
					color.active.val('ahex', $(this).attr('title') || null, e.target);
					return false;
				},
				commitCallback = $.isFunction($arguments[1]) && $arguments[1] || null,
				liveCallback = $.isFunction($arguments[2]) && $arguments[2] || null,
				cancelCallback = $.isFunction($arguments[3]) && $arguments[3] || null,
				show = function () {
					color.current.val('ahex', color.active.val('ahex'));
				},
				hide = function () {
					
				},
				initialize = function () {
					var win = settings.window,
						popup =  null;
					container = $($this);
					container.addClass('jPicker Container');
					
					container.get(0).onselectstart = function (event) {
						if (event.target.nodeName.toLowerCase() !== 'input') return false;
					};
					// inject html source code - we are using a single table for this control - I know tables are considered bad, but it takes care of equal height columns and
					// this control really is tabular data, so I believe it is the right move
					var all = color.active.val('all');
					if (win.alphaPrecision < 0) win.alphaPrecision = 0;
					else if (win.alphaPrecision > 2) win.alphaPrecision = 2;
					var controlHtml = '<table class="jPicker" cellpadding="0" cellspacing="0"><tbody><tr><td rowspan="9"><div class="