jpicker-rails 0.1

data/.gitignore

@@ -0,0 +1,17 @@
+*.gem
+*.rbc
+.bundle
+.config
+.yardoc
+Gemfile.lock
+InstalledFiles
+_yardoc
+coverage
+doc/
+lib/bundler/man
+pkg
+rdoc
+spec/reports
+test/tmp
+test/version_tmp
+tmp

data/Gemfile

@@ -0,0 +1,4 @@
+source 'https://rubygems.org'
+
+# Specify your gem's dependencies in jPicker-rails.gemspec
+gemspec

data/LICENSE

@@ -0,0 +1,22 @@
+Copyright (c) 2013 Maxoos
+
+MIT License
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

data/README.md

@@ -0,0 +1,34 @@
+# JPicker::Rails
+
+jPicker for rails with assets pipeline support. For more info take a look at http://www.digitalmagicpro.com/jPicker/
+
+## Installation
+
+Add this line to your application's Gemfile:
+  ```ruby
+    gem 'jPicker-rails'
+  ```
+And then execute:
+
+    $ bundle
+
+Or install it yourself as:
+
+    $ gem install jPicker-rails
+
+## Usage
+
+Require jpicker in application.js:
+
+```javascript
+//= require jpicker
+```
+And do the same in application.css
+
+```css
+/*
+*= require jpicker
+*/
+```
+jPicker will be included into the asset pipline. Use jPicker as per documentation:
+http://www.digitalmagicpro.com/jPicker/

data/Rakefile

@@ -0,0 +1,2 @@
+#!/usr/bin/env rake
+require "bundler/gem_tasks"

data/app/assets/javascripts/jpicker.js

@@ -0,0 +1,4 @@
+/**
+*= require jpicker/jpicker-1.1.6
+*= require jpicker/jpicker-pipeline
+*/

data/app/assets/javascripts/jpicker/jpicker-1.1.6.js

@@ -0,0 +1,2086 @@
+/*
+ * jPicker 1.1.6
+ *
+ * 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)
+{
+  Math.precision = function(value, precision)
+    {
+      if (precision === undefined) precision = 0;
+      return Math.round(value * Math.pow(10, precision)) / Math.pow(10, precision);
+    };
+  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:first'), // 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).bind('mousemove', mouseMove).bind('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).unbind('mouseup', mouseUp).unbind('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 });
+            },
+          draw =
+            function()
+            {
+              var arrowOffsetX = 0,
+                arrowOffsetY = 0,
+                barW = bar.w,
+                barH = bar.h,
+                arrowW = arrow.w,
+                arrowH = arrow.h;
+              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).unbind('mouseup', mouseUp).unbind('mousemove', mouseMove);
+              bar.unbind('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.bind('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', Math.precision((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', Math.precision((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', Math.precision((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(Math.precision((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 ? Math.precision((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).unbind('keyup', keyUp).unbind('blur', blur);
+              red.add(green).add(blue).add(alpha).add(hue).add(saturation).add(value).unbind('keydown', keyDown);
+              color.unbind(colorChanged);
+              red = null;
+              green = null;
+              blue = null;
+              alpha = null;
+              hue = null;
+              saturation = null;
+              value = null;
+              hex = null;
+              ahex = null;
+            };
+        $.extend(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).bind('keyup', keyUp).bind('blur', blur);
+        red.add(green).add(blue).add(alpha).add(hue).add(saturation).add(value).bind('keydown', keyDown);
+        color.bind(colorChanged);
+      };
+  $.jPicker =
+    {
+      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;
+              }
+          $.extend(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 = $.jPicker.Color, List = $.jPicker.List, ColorMethods = $.jPicker.ColorMethods; // local copies for YUI compressor
+  $.fn.jPicker =
+    function(options)
+    {
+      var $arguments = arguments;
+      return this.each(
+        function()
+        {
+          var $this = this, settings = $.extend(true, {}, $.fn.jPicker.defaults, options); // local copies for YUI compressor
+          if ($($this).get(0).nodeName.toLowerCase() == 'input') // Add color picker icon if binding to an input element and bind the events to the input
+          {
+            $.extend(true, settings,
+              {
+                window:
+                {
+                  bindToInput: true,
+                  expandable: true,
+                  input: $($this)
+                }
+              });
+            if($($this).val()=='')
+            {
+              settings.color.active = new Color({ hex: null });
+              settings.color.current = new Color({ hex: null });
+            }
+            else if (ColorMethods.validateHex($($this).val()))
+            {
+              settings.color.active = new Color({ hex: $($this).val(), a: settings.color.active.val('a') });
+              settings.color.current = new Color({ hex: $($this).val(), a: settings.color.active.val('a') });
+            }
+          }
+          if (settings.window.expandable)
+            $($this).after('<span class="jPicker"><span class="Icon"><span class="Color">&nbsp;</span><span class="Alpha">&nbsp;</span><span class="Image" title="Click To Open Color Picker">&nbsp;</span><span class="Container">&nbsp;</span></span></span>');
+          else settings.window.liveUpdate = false; // Basic control binding for inline use - You will need to override the liveCallback or commitCallback function to retrieve results
+          var isLessThanIE7 = parseFloat(navigator.appVersion.split('MSIE')[1]) < 7 && document.body.filters, // needed to run the AlphaImageLoader function for IE6
+            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
+            iconColor = null, // iconColor for popup icon
+            iconAlpha = null, // iconAlpha for popup icon
+            iconImage = null, // iconImage popup icon
+            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 && Math.precision((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, Math.precision((ui.val('r') || 0) / 255 * 100, 4));
+                    break;
+                  case 'g':
+                    setAlpha.call($this, colorMapL2, Math.precision((ui.val('g') || 0) / 255 * 100, 4));
+                    break;
+                  case 'b':
+                    setAlpha.call($this, colorMapL2, Math.precision((ui.val('b') || 0) / 255 * 100));
+                    break;
+                }
+                var a = ui.val('a');
+                setAlpha.call($this, colorMapL3, Math.precision(((255 - (a || 0)) * 100) / 255, 4));
+              },
+            updateBarVisuals =
+              function(ui)
+              {
+                switch (settings.color.mode)
+                {
+                  case 'h':
+                    var a = ui.val('a');
+                    setAlpha.call($this, colorBarL5, Math.precision(((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, Math.precision(((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, Math.precision(((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 ? Math.precision(((hValue - vValue) / (255 - vValue)) * 100, 4) : 0);
+                    setAlpha.call($this, colorBarL3, vValue > hValue ? Math.precision(((vValue - hValue) / (255 - hValue)) * 100, 4) : 0);
+                    setAlpha.call($this, colorBarL4, Math.precision((middle / 255) * 100, 4));
+                    setAlpha.call($this, colorBarL5, Math.precision(((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)
+              {
+                if (isLessThanIE7 && (src.indexOf('AlphaBar.png') != -1 || src.indexOf('Bars.png') != -1 || src.indexOf('Maps.png') != -1))
+                {
+                  img.attr('pngSrc', src);
+                  img.css({ backgroundImage: 'none', filter: 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'' + src + '\', sizingMethod=\'scale\')' });
+                }
+                else 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)
+                {
+                  if (isLessThanIE7)
+                  {
+                    var src = obj.attr('pngSrc');
+                    if (src != null && (src.indexOf('AlphaBar.png') != -1 || src.indexOf('Bars.png') != -1 || src.indexOf('Maps.png') != -1))
+                      obj.css({ filter: 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'' + src + '\', sizingMethod=\'scale\') progid:DXImageTransform.Microsoft.Alpha(opacity=' + alpha + ')' });
+                    else obj.css({ opacity: Math.precision(alpha / 100, 4) });
+                  }
+                  else obj.css({ opacity: Math.precision(alpha / 100, 4) });
+                }
+                else if (alpha == 0 || alpha == 100)
+                {
+                  if (isLessThanIE7)
+                  {
+                    var src = obj.attr('pngSrc');
+                    if (src != null && (src.indexOf('AlphaBar.png') != -1 || src.indexOf('Bars.png') != -1 || src.indexOf('Maps.png') != -1))
+                      obj.css({ filter: 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'' + src + '\', sizingMethod=\'scale\')' });
+                    else obj.css({ opacity: '' });
+                  }
+                  else 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)
+              {
+                $(this).parents('tbody:first').find('input:radio[value!="'+e.target.value+'"]').removeAttr('checked');
+                setColorMode.call($this, e.target.value);
+              },
+            currentClicked =
+              function()
+              {
+                revertColor.call($this);
+              },
+            cancelClicked =
+              function()
+              {
+                revertColor.call($this);
+                settings.window.expandable && hide.call($this);
+                $.isFunction(cancelCallback) && cancelCallback.call($this, color.active, cancelButton);
+              },
+            okClicked =
+              function()
+              {
+                commitColor.call($this);
+                settings.window.expandable && hide.call($this);
+                $.isFunction(commitCallback) && commitCallback.call($this, color.active, okButton);
+              },
+            iconImageClicked =
+              function()
+              {
+                show.call($this);
+              },
+            currentColorChanged =
+              function(ui, context)
+              {
+                var hex = ui.val('hex');
+                currentPreview.css({ backgroundColor: hex && '#' + hex || 'transparent' });
+                setAlpha.call($this, currentPreview, Math.precision(((ui.val('a') || 0) * 100) / 255, 4));
+              },
+            expandableColorChanged =
+              function(ui, context)
+              {
+                var hex = ui.val('hex');
+                var va = ui.val('va');
+                iconColor.css({ backgroundColor: hex && '#' + hex || 'transparent' });
+                setAlpha.call($this, iconAlpha, Math.precision(((255 - (va && va.a || 0)) * 100) / 255, 4));
+                if (settings.window.bindToInput&&settings.window.updateInputColor)
+                  settings.window.input.css(
+                    {
+                      backgroundColor: hex && '#' + hex || 'transparent',
+                      color: va == null || va.v > 75 ? '#000000' : '#ffffff'
+                    });
+              },
+            moveBarMouseDown =
+              function(e)
+              {
+                var element = settings.window.element, // local copies for YUI compressor
+                  page = settings.window.page;
+                elementStartX = parseInt(container.css('left'));
+                elementStartY = parseInt(container.css('top'));
+                pageStartX = e.pageX;
+                pageStartY = e.pageY;
+                // bind events to document to move window - we will unbind these on mouseup
+                $(document).bind('mousemove', documentMouseMove).bind('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' });
+                if (settings.window.expandable && !$.support.boxModel) container.prev().css({ left: container.css("left"), top: container.css("top") });
+                e.stopPropagation();
+                e.preventDefault();
+                return false;
+              },
+            documentMouseUp =
+              function(e)
+              {
+                $(document).unbind('mousemove', documentMouseMove).unbind('mouseup', documentMouseUp);
+                e.stopPropagation();
+                e.preventDefault();
+                return false;
+              },
+            quickPickClicked =
+              function(e)
+              {
+                e.preventDefault();
+                e.stopPropagation();
+                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'));
+                var attachIFrame = function()
+                  {
+                    if (!settings.window.expandable || $.support.boxModel) return;
+                    var table = container.find('table:first');
+                    container.before('<iframe/>');
+                    container.prev().css({ width: table.width(), height: container.height(), opacity: 0, position: 'absolute', left: container.css("left"), top: container.css("top") });
+                  };
+                if (settings.window.expandable)
+                {
+                  $(document.body).children('div.jPicker.Container').css({zIndex:10});
+                  container.css({zIndex:20});
+                }
+                switch (settings.window.effects.type)
+                {
+                  case 'fade':
+                    container.fadeIn(settings.window.effects.speed.show, attachIFrame);
+                    break;
+                  case 'slide':
+                    container.slideDown(settings.window.effects.speed.show, attachIFrame);
+                    break;
+                  case 'show':
+                  default:
+                    container.show(settings.window.effects.speed.show, attachIFrame);
+                    break;
+                }
+              },
+            hide =
+              function()
+              {
+                var removeIFrame = function()
+                  {
+                    if (settings.window.expandable) container.css({ zIndex: 10 });
+                    if (!settings.window.expandable || $.support.boxModel) return;
+                    container.prev().remove();
+                  };
+                switch (settings.window.effects.type)
+                {
+                  case 'fade':
+                    container.fadeOut(settings.window.effects.speed.hide, removeIFrame);
+                    break;
+                  case 'slide':
+                    container.slideUp(settings.window.effects.speed.hide, removeIFrame);
+                    break;
+                  case 'show':
+                  default:
+                    container.hide(settings.window.effects.speed.hide, removeIFrame);
+                    break;
+                }
+              },
+            initialize =
+              function()
+              {
+                var win = settings.window,
+                    popup = win.expandable ? $($this).next().find('.Container:first') : null;
+                container = win.expandable ? $('<div/>') : $($this);
+                container.addClass('jPicker Container');
+                if (win.expandable) container.hide();
+                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>' + (win.expandable ? '<tr><td class="Move" colspan="5">&nbsp;</td></tr>' : '') + '<tr><td rowspan="9"><h2 class="Title">' + (win.title || localization.text.title) + '</h2><div class="Map"><span class="Map1">&nbsp;</span><span class="Map2">&nbsp;</span><span class="Map3">&nbsp;</span><img src="' + images.clientPath + images.colorMap.arrow.file + '" class="Arrow"/></div></td><td rowspan="9"><div class="Bar"><span class="Map1">&nbsp;</span><span class="Map2">&nbsp;</span><span class="Map3">&nbsp;</span><span class="Map4">&nbsp;</span><span class="Map5">&nbsp;</span><span class="Map6">&nbsp;</span><img src="' + images.clientPath + images.colorBar.arrow.file + '" class="Arrow"/></div></td><td colspan="2" class="Preview">' + localization.text.newColor + '<div><span class="Active" title="' + localization.tooltips.colors.newColor + '">&nbsp;</span><span class="Current" title="' + localization.tooltips.colors.currentColor + '">&nbsp;</span></div>' + localization.text.currentColor + '</td><td rowspan="9" class="Button"><input type="button" class="Ok" value="' + localization.text.ok + '" title="' + localization.tooltips.buttons.ok + '"/><input type="button" class="Cancel" value="' + localization.text.cancel + '" title="' + localization.tooltips.buttons.cancel + '"/><hr/><div class="Grid">&nbsp;</div></td></tr><tr class="Hue"><td class="Radio"><label title="' + localization.tooltips.hue.radio + '"><input type="radio" value="h"' + (settings.color.mode == 'h' ? ' checked="checked"' : '') + '/>H:</label></td><td class="Text"><input type="text" maxlength="3" value="' + (all != null ? all.h : '') + '" title="' + localization.tooltips.hue.textbox + '"/>&nbsp;&deg;</td></tr><tr class="Saturation"><td class="Radio"><label title="' + localization.tooltips.saturation.radio + '"><input type="radio" value="s"' + (settings.color.mode == 's' ? ' checked="checked"' : '') + '/>S:</label></td><td class="Text"><input type="text" maxlength="3" value="' + (all != null ? all.s : '') + '" title="' + localization.tooltips.saturation.textbox + '"/>&nbsp;%</td></tr><tr class="Value"><td class="Radio"><label title="' + localization.tooltips.value.radio + '"><input type="radio" value="v"' + (settings.color.mode == 'v' ? ' checked="checked"' : '') + '/>V:</label><br/><br/></td><td class="Text"><input type="text" maxlength="3" value="' + (all != null ? all.v : '') + '" title="' + localization.tooltips.value.textbox + '"/>&nbsp;%<br/><br/></td></tr><tr class="Red"><td class="Radio"><label title="' + localization.tooltips.red.radio + '"><input type="radio" value="r"' + (settings.color.mode == 'r' ? ' checked="checked"' : '') + '/>R:</label></td><td class="Text"><input type="text" maxlength="3" value="' + (all != null ? all.r : '') + '" title="' + localization.tooltips.red.textbox + '"/></td></tr><tr class="Green"><td class="Radio"><label title="' + localization.tooltips.green.radio + '"><input type="radio" value="g"' + (settings.color.mode == 'g' ? ' checked="checked"' : '') + '/>G:</label></td><td class="Text"><input type="text" maxlength="3" value="' + (all != null ? all.g : '') + '" title="' + localization.tooltips.green.textbox + '"/></td></tr><tr class="Blue"><td class="Radio"><label title="' + localization.tooltips.blue.radio + '"><input type="radio" value="b"' + (settings.color.mode == 'b' ? ' checked="checked"' : '') + '/>B:</label></td><td class="Text"><input type="text" maxlength="3" value="' + (all != null ? all.b : '') + '" title="' + localization.tooltips.blue.textbox + '"/></td></tr><tr class="Alpha"><td class="Radio">' + (win.alphaSupport ? '<label title="' + localization.tooltips.alpha.radio + '"><input type="radio" value="a"' + (settings.color.mode == 'a' ? ' checked="checked"' : '') + '/>A:</label>' : '&nbsp;') + '</td><td class="Text">' + (win.alphaSupport ? '<input type="text" maxlength="' + (3 + win.alphaPrecision) + '" value="' + (all != null ? Math.precision((all.a * 100) / 255, win.alphaPrecision) : '') + '" title="' + localization.tooltips.alpha.textbox + '"/>&nbsp;%' : '&nbsp;') + '</td></tr><tr class="Hex"><td colspan="2" class="Text"><label title="' + localization.tooltips.hex.textbox + '">#:<input type="text" maxlength="6" class="Hex" value="' + (all != null ? all.hex : '') + '"/></label>' + (win.alphaSupport ? '<input type="text" maxlength="2" class="AHex" value="' + (all != null ? all.ahex.substring(6) : '') + '" title="' + localization.tooltips.hex.alpha + '"/></td>' : '&nbsp;') + '</tr></tbody></table>';
+                if (win.expandable)
+                {
+                  container.html(controlHtml);
+                  if($(document.body).children('div.jPicker.Container').length==0)$(document.body).prepend(container);
+                  else $(document.body).children('div.jPicker.Container:last').after(container);
+                  container.mousedown(
+                    function()
+                    {
+                      $(document.body).children('div.jPicker.Container').css({zIndex:10});
+                      container.css({zIndex:20});
+                    });
+                  container.css( // positions must be set and display set to absolute before source code injection or IE will size the container to fit the window
+                    {
+                      left:
+                        win.position.x == 'left' ? (popup.offset().left - 530 - (win.position.y == 'center' ? 25 : 0)) + 'px' :
+                        win.position.x == 'center' ? (popup.offset().left - 260) + 'px' :
+                        win.position.x == 'right' ? (popup.offset().left - 10 + (win.position.y == 'center' ? 25 : 0)) + 'px' :
+                        win.position.x == 'screenCenter' ? (($(document).width() >> 1) - 260) + 'px' : (popup.offset().left + parseInt(win.position.x)) + 'px',
+                      position: 'absolute',
+                      top: win.position.y == 'top' ? (popup.offset().top - 312) + 'px' :
+                           win.position.y == 'center' ? (popup.offset().top - 156) + 'px' :
+                           win.position.y == 'bottom' ? (popup.offset().top + 25) + 'px' : (popup.offset().top + parseInt(win.position.y)) + 'px'
+                    });
+                }
+                else
+                {
+                  container = $($this);
+                  container.html(controlHtml);
+                }
+                // initialize the objects to the source code just injected
+                var tbody = container.find('tbody:first');
+                colorMapDiv = tbody.find('div.Map:first');
+                colorBarDiv = tbody.find('div.Bar:first');
+                var MapMaps = colorMapDiv.find('span'),
+                    BarMaps = colorBarDiv.find('span');
+                colorMapL1 = MapMaps.filter('.Map1:first');
+                colorMapL2 = MapMaps.filter('.Map2:first');
+                colorMapL3 = MapMaps.filter('.Map3:first');
+                colorBarL1 = BarMaps.filter('.Map1:first');
+                colorBarL2 = BarMaps.filter('.Map2:first');
+                colorBarL3 = BarMaps.filter('.Map3:first');
+                colorBarL4 = BarMaps.filter('.Map4:first');
+                colorBarL5 = BarMaps.filter('.Map5:first');
+                colorBarL6 = BarMaps.filter('.Map6:first');
+                // create color pickers and maps
+                colorMap = new Slider(colorMapDiv,
+                  {
+                    map:
+                    {
+                      width: images.colorMap.width,
+                      height: images.colorMap.height
+                    },
+                    arrow:
+                    {
+                      image: images.clientPath + images.colorMap.arrow.file,
+                      width: images.colorMap.arrow.width,
+                      height: images.colorMap.arrow.height
+                    }
+                  });
+                colorMap.bind(mapValueChanged);
+                colorBar = new Slider(colorBarDiv,
+                  {
+                    map:
+                    {
+                      width: images.colorBar.width,
+                      height: images.colorBar.height
+                    },
+                    arrow:
+                    {
+                      image: images.clientPath + images.colorBar.arrow.file,
+                      width: images.colorBar.arrow.width,
+                      height: images.colorBar.arrow.height
+                    }
+                  });
+                colorBar.bind(colorBarValueChanged);
+                colorPicker = new ColorValuePicker(tbody, color.active, win.expandable && win.bindToInput ? win.input : null, win.alphaPrecision);
+                var hex = all != null ? all.hex : null,
+                    preview = tbody.find('.Preview'),
+                    button = tbody.find('.Button');
+                activePreview = preview.find('.Active:first').css({ backgroundColor: hex && '#' + hex || 'transparent' });
+                currentPreview = preview.find('.Current:first').css({ backgroundColor: hex && '#' + hex || 'transparent' }).bind('click', currentClicked);
+                setAlpha.call($this, currentPreview, Math.precision(color.current.val('a') * 100) / 255, 4);
+                okButton = button.find('.Ok:first').bind('click', okClicked);
+                cancelButton = button.find('.Cancel:first').bind('click', cancelClicked);
+                grid = button.find('.Grid:first');
+                setTimeout(
+                  function()
+                  {
+                    setImg.call($this, colorMapL1, images.clientPath + 'Maps.png');
+                    setImg.call($this, colorMapL2, images.clientPath + 'Maps.png');
+                    setImg.call($this, colorMapL3, images.clientPath + 'map-opacity.png');
+                    setImg.call($this, colorBarL1, images.clientPath + 'Bars.png');
+                    setImg.call($this, colorBarL2, images.clientPath + 'Bars.png');
+                    setImg.call($this, colorBarL3, images.clientPath + 'Bars.png');
+                    setImg.call($this, colorBarL4, images.clientPath + 'Bars.png');
+                    setImg.call($this, colorBarL5, images.clientPath + 'bar-opacity.png');
+                    setImg.call($this, colorBarL6, images.clientPath + 'AlphaBar.png');
+                    setImg.call($this, preview.find('div:first'), images.clientPath + 'preview-opacity.png');
+                  }, 0);
+                tbody.find('td.Radio input').bind('click', radioClicked);
+                // initialize quick list
+                if (color.quickList && color.quickList.length > 0)
+                {
+                  var html = '';
+                  for (i = 0; i < color.quickList.length; i++)
+                  {
+                    /* if default colors are hex strings, change them to color objects */
+                    if ((typeof (color.quickList[i])).toString().toLowerCase() == 'string') color.quickList[i] = new Color({ hex: color.quickList[i] });
+                    var alpha = color.quickList[i].val('a');
+                    var ahex = color.quickList[i].val('ahex');
+                    if (!win.alphaSupport && ahex) ahex = ahex.substring(0, 6) + 'ff';
+                    var quickHex = color.quickList[i].val('hex');
+                    html+='<span class="QuickColor"' + (ahex && ' title="#' + ahex + '"' || '') + ' style="background-color:' + (quickHex && '#' + quickHex || '') + ';' + (quickHex ? '' : 'background-image:url(' + images.clientPath + 'NoColor.png)') + (win.alphaSupport && alpha && alpha < 255 ? ';opacity:' + Math.precision(alpha / 255, 4) + ';filter:Alpha(opacity=' + Math.precision(alpha / 2.55, 4) + ')' : '') + '">&nbsp;</span>';
+                  }
+                  setImg.call($this, grid, images.clientPath + 'bar-opacity.png');
+                  grid.html(html);
+                  grid.find('.QuickColor').click(quickPickClicked);
+                }
+                setColorMode.call($this, settings.color.mode);
+                color.active.bind(activeColorChanged);
+                $.isFunction(liveCallback) && color.active.bind(liveCallback);
+                color.current.bind(currentColorChanged);
+                // bind to input
+                if (win.expandable)
+                {
+                  $this.icon = popup.parents('.Icon:first');
+                  iconColor = $this.icon.find('.Color:first').css({ backgroundColor: hex && '#' + hex || 'transparent' });
+                  iconAlpha = $this.icon.find('.Alpha:first');
+                  setImg.call($this, iconAlpha, images.clientPath + 'bar-opacity.png');
+                  setAlpha.call($this, iconAlpha, Math.precision(((255 - (all != null ? all.a : 0)) * 100) / 255, 4));
+                  iconImage = $this.icon.find('.Image:first').css(
+                    {
+                      backgroundImage: 'url(\'' + images.clientPath + images.picker.file + '\')'
+                    }).bind('click', iconImageClicked);
+                  if (win.bindToInput&&win.updateInputColor)
+                    win.input.css(
+                      {
+                        backgroundColor: hex && '#' + hex || 'transparent',
+                        color: all == null || all.v > 75 ? '#000000' : '#ffffff'
+                      });
+                  moveBar = tbody.find('.Move:first').bind('mousedown', moveBarMouseDown);
+                  color.active.bind(expandableColorChanged);
+                }
+                else show.call($this);
+              },
+            destroy =
+              function()
+              {
+                container.find('td.Radio input').unbind('click', radioClicked);
+                currentPreview.unbind('click', currentClicked);
+                cancelButton.unbind('click', cancelClicked);
+                okButton.unbind('click', okClicked);
+                if (settings.window.expandable)
+                {
+                  iconImage.unbind('click', iconImageClicked);
+                  moveBar.unbind('mousedown', moveBarMouseDown);
+                  $this.icon = null;
+                }
+                container.find('.QuickColor').unbind('click', quickPickClicked);
+                colorMapDiv = null;
+                colorBarDiv = null;
+                colorMapL1 = null;
+                colorMapL2 = null;
+                colorMapL3 = null;
+                colorBarL1 = null;
+                colorBarL2 = null;
+                colorBarL3 = null;
+                colorBarL4 = null;
+                colorBarL5 = null;
+                colorBarL6 = null;
+                colorMap.destroy();
+                colorMap = null;
+                colorBar.destroy();
+                colorBar = null;
+                colorPicker.destroy();
+                colorPicker = null;
+                activePreview = null;
+                currentPreview = null;
+                okButton = null;
+                cancelButton = null;
+                grid = null;
+                commitCallback = null;
+                cancelCallback = null;
+                liveCallback = null;
+                container.html('');
+                for (i = 0; i < List.length; i++) if (List[i] == $this) List.splice(i, 1);
+              },
+            images = settings.images, // local copies for YUI compressor
+            localization = settings.localization,
+            color =
+              {
+                active: (typeof(settings.color.active)).toString().toLowerCase() == 'string' ? new Color({ ahex: !settings.window.alphaSupport && settings.color.active ? settings.color.active.substring(0, 6) + 'ff' : settings.color.active }) : new Color({ ahex: !settings.window.alphaSupport && settings.color.active.val('ahex') ? settings.color.active.val('ahex').substring(0, 6) + 'ff' : settings.color.active.val('ahex') }),
+                current: (typeof(settings.color.active)).toString().toLowerCase() == 'string' ? new Color({ ahex: !settings.window.alphaSupport && settings.color.active ? settings.color.active.substring(0, 6) + 'ff' : settings.color.active }) : new Color({ ahex: !settings.window.alphaSupport && settings.color.active.val('ahex') ? settings.color.active.val('ahex').substring(0, 6) + 'ff' : settings.color.active.val('ahex') }),
+                quickList: settings.color.quickList
+              };
+          $.extend(true, $this, // public properties, methods, and callbacks
+            {
+              commitCallback: commitCallback, // commitCallback function can be overridden to return the selected color to a method you specify when the user clicks "OK"
+              liveCallback: liveCallback, // liveCallback function can be overridden to return the selected color to a method you specify in live mode (continuous update)
+              cancelCallback: cancelCallback, // cancelCallback function can be overridden to a method you specify when the user clicks "Cancel"
+              color: color,
+              show: show,
+              hide: hide,
+              destroy: destroy // destroys this control entirely, removing all events and objects, and removing itself from the List
+            });
+          List.push($this);
+          setTimeout(
+            function()
+            {
+              initialize.call($this);
+            }, 0);
+        });
+    };
+  $.fn.jPicker.defaults = /* jPicker defaults - you can change anything in this section (such as the clientPath to your images) without fear of breaking the program */
+      {
+      window:
+        {
+          title: null, /* any title for the jPicker window itself - displays "Drag Markers To Pick A Color" if left null */
+          effects:
+          {
+            type: 'slide', /* effect used to show/hide an expandable picker. Acceptable values "slide", "show", "fade" */
+            speed:
+            {
+              show: 'slow', /* duration of "show" effect. Acceptable values are "fast", "slow", or time in ms */
+              hide: 'fast' /* duration of "hide" effect. Acceptable values are "fast", "slow", or time in ms */
+            }
+          },
+          position:
+          {
+            x: 'screenCenter', /* acceptable values "left", "center", "right", "screenCenter", or relative px value */
+            y: 'top' /* acceptable values "top", "bottom", "center", or relative px value */
+          },
+          expandable: false, /* default to large static picker - set to true to make an expandable picker (small icon with popup) - set automatically when binded to input element */
+          liveUpdate: true, /* set false if you want the user to have to click "OK" before the binded input box updates values (always "true" for expandable picker) */
+          alphaSupport: false, /* set to true to enable alpha picking */
+          alphaPrecision: 0, /* set decimal precision for alpha percentage display - hex codes do not map directly to percentage integers - range 0-2 */
+          updateInputColor: true /* set to false to prevent binded input colors from changing */
+        },
+      color:
+        {
+          mode: 'h', /* acceptabled values "h" (hue), "s" (saturation), "v" (value), "r" (red), "g" (green), "b" (blue), "a" (alpha) */
+          active: new Color({ ahex: '#ffcc00ff' }), /* acceptable values are any declared $.jPicker.Color object or string HEX value (e.g. #ffc000) WITH OR WITHOUT the "#" prefix */
+          quickList: /* the quick pick color list */
+            [
+              new Color({ h: 360, s: 33, v: 100 }), /* acceptable values are any declared $.jPicker.Color object or string HEX value (e.g. #ffc000) WITH OR WITHOUT the "#" prefix */
+              new Color({ h: 360, s: 66, v: 100 }),
+              new Color({ h: 360, s: 100, v: 100 }),
+              new Color({ h: 360, s: 100, v: 75 }),
+              new Color({ h: 360, s: 100, v: 50 }),
+              new Color({ h: 180, s: 0, v: 100 }),
+              new Color({ h: 30, s: 33, v: 100 }),
+              new Color({ h: 30, s: 66, v: 100 }),
+              new Color({ h: 30, s: 100, v: 100 }),
+              new Color({ h: 30, s: 100, v: 75 }),
+              new Color({ h: 30, s: 100, v: 50 }),
+              new Color({ h: 180, s: 0, v: 90 }),
+              new Color({ h: 60, s: 33, v: 100 }),
+              new Color({ h: 60, s: 66, v: 100 }),
+              new Color({ h: 60, s: 100, v: 100 }),
+              new Color({ h: 60, s: 100, v: 75 }),
+              new Color({ h: 60, s: 100, v: 50 }),
+              new Color({ h: 180, s: 0, v: 80 }),
+              new Color({ h: 90, s: 33, v: 100 }),
+              new Color({ h: 90, s: 66, v: 100 }),
+              new Color({ h: 90, s: 100, v: 100 }),
+              new Color({ h: 90, s: 100, v: 75 }),
+              new Color({ h: 90, s: 100, v: 50 }),
+              new Color({ h: 180, s: 0, v: 70 }),
+              new Color({ h: 120, s: 33, v: 100 }),
+              new Color({ h: 120, s: 66, v: 100 }),
+              new Color({ h: 120, s: 100, v: 100 }),
+              new Color({ h: 120, s: 100, v: 75 }),
+              new Color({ h: 120, s: 100, v: 50 }),
+              new Color({ h: 180, s: 0, v: 60 }),
+              new Color({ h: 150, s: 33, v: 100 }),
+              new Color({ h: 150, s: 66, v: 100 }),
+              new Color({ h: 150, s: 100, v: 100 }),
+              new Color({ h: 150, s: 100, v: 75 }),
+              new Color({ h: 150, s: 100, v: 50 }),
+              new Color({ h: 180, s: 0, v: 50 }),
+              new Color({ h: 180, s: 33, v: 100 }),
+              new Color({ h: 180, s: 66, v: 100 }),
+              new Color({ h: 180, s: 100, v: 100 }),
+              new Color({ h: 180, s: 100, v: 75 }),
+              new Color({ h: 180, s: 100, v: 50 }),
+              new Color({ h: 180, s: 0, v: 40 }),
+              new Color({ h: 210, s: 33, v: 100 }),
+              new Color({ h: 210, s: 66, v: 100 }),
+              new Color({ h: 210, s: 100, v: 100 }),
+              new Color({ h: 210, s: 100, v: 75 }),
+              new Color({ h: 210, s: 100, v: 50 }),
+              new Color({ h: 180, s: 0, v: 30 }),
+              new Color({ h: 240, s: 33, v: 100 }),
+              new Color({ h: 240, s: 66, v: 100 }),
+              new Color({ h: 240, s: 100, v: 100 }),
+              new Color({ h: 240, s: 100, v: 75 }),
+              new Color({ h: 240, s: 100, v: 50 }),
+              new Color({ h: 180, s: 0, v: 20 }),
+              new Color({ h: 270, s: 33, v: 100 }),
+              new Color({ h: 270, s: 66, v: 100 }),
+              new Color({ h: 270, s: 100, v: 100 }),
+              new Color({ h: 270, s: 100, v: 75 }),
+              new Color({ h: 270, s: 100, v: 50 }),
+              new Color({ h: 180, s: 0, v: 10 }),
+              new Color({ h: 300, s: 33, v: 100 }),
+              new Color({ h: 300, s: 66, v: 100 }),
+              new Color({ h: 300, s: 100, v: 100 }),
+              new Color({ h: 300, s: 100, v: 75 }),
+              new Color({ h: 300, s: 100, v: 50 }),
+              new Color({ h: 180, s: 0, v: 0 }),
+              new Color({ h: 330, s: 33, v: 100 }),
+              new Color({ h: 330, s: 66, v: 100 }),
+              new Color({ h: 330, s: 100, v: 100 }),
+              new Color({ h: 330, s: 100, v: 75 }),
+              new Color({ h: 330, s: 100, v: 50 }),
+              new Color()
+            ]
+        },
+      images:
+        {
+          clientPath: '/jPicker/images/', /* Path to image files */
+          colorMap:
+          {
+            width: 256,
+            height: 256,
+            arrow:
+            {
+              file: 'mappoint.gif', /* ColorMap arrow icon */
+              width: 15,
+              height: 15
+            }
+          },
+          colorBar:
+          {
+            width: 20,
+            height: 256,
+            arrow:
+            {
+              file: 'rangearrows.gif', /* ColorBar arrow icon */
+              width: 20,
+              height: 7
+            }
+          },
+          picker:
+          {
+            file: 'picker.gif', /* Color Picker icon */
+            width: 25,
+            height: 24
+          }
+        },
+      localization: /* alter these to change the text presented by the picker (e.g. different language) */
+        {
+          text:
+          {
+            title: 'Drag Markers To Pick A Color',
+            newColor: 'new',
+            currentColor: 'current',
+            ok: 'OK',
+            cancel: 'Cancel'
+          },
+          tooltips:
+          {
+            colors:
+            {
+              newColor: 'New Color - Press &ldquo;OK&rdquo; To Commit',
+              currentColor: 'Click To Revert To Original Color'
+            },
+            buttons:
+            {
+              ok: 'Commit To This Color Selection',
+              cancel: 'Cancel And Revert To Original Color'
+            },
+            hue:
+            {
+              radio: 'Set To &ldquo;Hue&rdquo; Color Mode',
+              textbox: 'Enter A &ldquo;Hue&rdquo; Value (0-360&deg;)'
+            },
+            saturation:
+            {
+              radio: 'Set To &ldquo;Saturation&rdquo; Color Mode',
+              textbox: 'Enter A &ldquo;Saturation&rdquo; Value (0-100%)'
+            },
+            value:
+            {
+              radio: 'Set To &ldquo;Value&rdquo; Color Mode',
+              textbox: 'Enter A &ldquo;Value&rdquo; Value (0-100%)'
+            },
+            red:
+            {
+              radio: 'Set To &ldquo;Red&rdquo; Color Mode',
+              textbox: 'Enter A &ldquo;Red&rdquo; Value (0-255)'
+            },
+            green:
+            {
+              radio: 'Set To &ldquo;Green&rdquo; Color Mode',
+              textbox: 'Enter A &ldquo;Green&rdquo; Value (0-255)'
+            },
+            blue:
+            {
+              radio: 'Set To &ldquo;Blue&rdquo; Color Mode',
+              textbox: 'Enter A &ldquo;Blue&rdquo; Value (0-255)'
+            },
+            alpha:
+            {
+              radio: 'Set To &ldquo;Alpha&rdquo; Color Mode',
+              textbox: 'Enter A &ldquo;Alpha&rdquo; Value (0-100)'
+            },
+            hex:
+            {
+              textbox: 'Enter A &ldquo;Hex&rdquo; Color Value (#000000-#ffffff)',
+              alpha: 'Enter A &ldquo;Alpha&rdquo; Value (#00-#ff)'
+            }
+          }
+        }
+    };
+})(jQuery, '1.1.6');