source: trunk/prototype/app/plugins/jpicker/jpicker-1.1.6.js @ 5341

Revision 5341, 97.5 KB checked in by wmerlotto, 12 years ago (diff)

Ticket #2434 - Commit inicial do novo módulo de agenda do Expresso - expressoCalendar
Line 
1/*
2 * jPicker 1.1.6
3 *
4 * jQuery Plugin for Photoshop style color picker
5 *
6 * Copyright (c) 2010 Christopher T. Tillman
7 * Digital Magic Productions, Inc. (http://www.digitalmagicpro.com/)
8 * MIT style license, FREE to use, alter, copy, sell, and especially ENHANCE
9 *
10 * Painstakingly ported from John Dyers' excellent work on his own color picker based on the Prototype framework.
11 *
12 * John Dyers' website: (http://johndyer.name)
13 * Color Picker page:   (http://johndyer.name/post/2007/09/PhotoShop-like-JavaScript-Color-Picker.aspx)
14 *
15 */
16(function($, version)
17{
18  Math.precision = function(value, precision)
19    {
20      if (precision === undefined) precision = 0;
21      return Math.round(value * Math.pow(10, precision)) / Math.pow(10, precision);
22    };
23  var Slider = // encapsulate slider functionality for the ColorMap and ColorBar - could be useful to use a jQuery UI draggable for this with certain extensions
24      function(bar, options)
25      {
26        var $this = this, // private properties, methods, and events - keep these variables and classes invisible to outside code
27          arrow = bar.find('img:first'), // the arrow image to drag
28          minX = 0,
29          maxX = 100,
30          rangeX = 100,
31          minY = 0,
32          maxY = 100,
33          rangeY = 100,
34          x = 0,
35          y = 0,
36          offset,
37          timeout,
38          changeEvents = new Array(),
39          fireChangeEvents =
40            function(context)
41            {
42              for (var i = 0; i < changeEvents.length; i++) changeEvents[i].call($this, $this, context);
43            },
44          mouseDown = // bind the mousedown to the bar not the arrow for quick snapping to the clicked location
45            function(e)
46            {
47              var off = bar.offset();
48              offset = { l: off.left | 0, t: off.top | 0 };
49              clearTimeout(timeout);
50              timeout = setTimeout( // using setTimeout for visual updates - once the style is updated the browser will re-render internally allowing the next Javascript to run
51                function()
52                {
53                  setValuesFromMousePosition.call($this, e);
54                }, 0);
55              // 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
56              $(document).bind('mousemove', mouseMove).bind('mouseup', mouseUp);
57              e.preventDefault(); // don't try to select anything or drag the image to the desktop
58            },
59          mouseMove = // set the values as the mouse moves
60            function(e)
61            {
62              clearTimeout(timeout);
63              timeout = setTimeout(
64                function()
65                {
66                  setValuesFromMousePosition.call($this, e);
67                }, 0);
68              e.stopPropagation();
69              e.preventDefault();
70              return false;
71            },
72          mouseUp = // unbind the document events - they aren't needed when not dragging
73            function(e)
74            {
75              $(document).unbind('mouseup', mouseUp).unbind('mousemove', mouseMove);
76              e.stopPropagation();
77              e.preventDefault();
78              return false;
79            },
80          setValuesFromMousePosition = // calculate mouse position and set value within the current range
81            function(e)
82            {
83              var locX = e.pageX - offset.l,
84                  locY = e.pageY - offset.t,
85                  barW = bar.w, // local copies for YUI compressor
86                  barH = bar.h;
87              // keep the arrow within the bounds of the bar
88              if (locX < 0) locX = 0;
89              else if (locX > barW) locX = barW;
90              if (locY < 0) locY = 0;
91              else if (locY > barH) locY = barH;
92              val.call($this, 'xy', { x: ((locX / barW) * rangeX) + minX, y: ((locY / barH) * rangeY) + minY });
93            },
94          draw =
95            function()
96            {
97              var arrowOffsetX = 0,
98                arrowOffsetY = 0,
99                barW = bar.w,
100                barH = bar.h,
101                arrowW = arrow.w,
102                arrowH = arrow.h;
103              setTimeout(
104                function()
105                {
106                  if (rangeX > 0) // range is greater than zero
107                  {
108                    // constrain to bounds
109                    if (x == maxX) arrowOffsetX = barW;
110                    else arrowOffsetX = ((x / rangeX) * barW) | 0;
111                  }
112                  if (rangeY > 0) // range is greater than zero
113                  {
114                    // constrain to bounds
115                    if (y == maxY) arrowOffsetY = barH;
116                    else arrowOffsetY = ((y / rangeY) * barH) | 0;
117                  }
118                  // if arrow width is greater than bar width, center arrow and prevent horizontal dragging
119                  if (arrowW >= barW) arrowOffsetX = (barW >> 1) - (arrowW >> 1); // number >> 1 - superfast bitwise divide by two and truncate (move bits over one bit discarding lowest)
120                  else arrowOffsetX -= arrowW >> 1;
121                  // if arrow height is greater than bar height, center arrow and prevent vertical dragging
122                  if (arrowH >= barH) arrowOffsetY = (barH >> 1) - (arrowH >> 1);
123                  else arrowOffsetY -= arrowH >> 1;
124                  // set the arrow position based on these offsets
125                  arrow.css({ left: arrowOffsetX + 'px', top: arrowOffsetY + 'px' });
126                }, 0);
127            },
128          val =
129            function(name, value, context)
130            {
131              var set = value !== undefined;
132              if (!set)
133              {
134                if (name === undefined || name == null) name = 'xy';
135                switch (name.toLowerCase())
136                {
137                  case 'x': return x;
138                  case 'y': return y;
139                  case 'xy':
140                  default: return { x: x, y: y };
141                }
142              }
143              if (context != null && context == $this) return;
144              var changed = false,
145                  newX,
146                  newY;
147              if (name == null) name = 'xy';
148              switch (name.toLowerCase())
149              {
150                case 'x':
151                  newX = value && (value.x && value.x | 0 || value | 0) || 0;
152                  break;
153                case 'y':
154                  newY = value && (value.y && value.y | 0 || value | 0) || 0;
155                  break;
156                case 'xy':
157                default:
158                  newX = value && value.x && value.x | 0 || 0;
159                  newY = value && value.y && value.y | 0 || 0;
160                  break;
161              }
162              if (newX != null)
163              {
164                if (newX < minX) newX = minX;
165                else if (newX > maxX) newX = maxX;
166                if (x != newX)
167                {
168                  x = newX;
169                  changed = true;
170                }
171              }
172              if (newY != null)
173              {
174                if (newY < minY) newY = minY;
175                else if (newY > maxY) newY = maxY;
176                if (y != newY)
177                {
178                  y = newY;
179                  changed = true;
180                }
181              }
182              changed && fireChangeEvents.call($this, context || $this);
183            },
184          range =
185            function (name, value)
186            {
187              var set = value !== undefined;
188              if (!set)
189              {
190                if (name === undefined || name == null) name = 'all';
191                switch (name.toLowerCase())
192                {
193                  case 'minx': return minX;
194                  case 'maxx': return maxX;
195                  case 'rangex': return { minX: minX, maxX: maxX, rangeX: rangeX };
196                  case 'miny': return minY;
197                  case 'maxy': return maxY;
198                  case 'rangey': return { minY: minY, maxY: maxY, rangeY: rangeY };
199                  case 'all':
200                  default: return { minX: minX, maxX: maxX, rangeX: rangeX, minY: minY, maxY: maxY, rangeY: rangeY };
201                }
202              }
203              var changed = false,
204                  newMinX,
205                  newMaxX,
206                  newMinY,
207                  newMaxY;
208              if (name == null) name = 'all';
209              switch (name.toLowerCase())
210              {
211                case 'minx':
212                  newMinX = value && (value.minX && value.minX | 0 || value | 0) || 0;
213                  break;
214                case 'maxx':
215                  newMaxX = value && (value.maxX && value.maxX | 0 || value | 0) || 0;
216                  break;
217                case 'rangex':
218                  newMinX = value && value.minX && value.minX | 0 || 0;
219                  newMaxX = value && value.maxX && value.maxX | 0 || 0;
220                  break;
221                case 'miny':
222                  newMinY = value && (value.minY && value.minY | 0 || value | 0) || 0;
223                  break;
224                case 'maxy':
225                  newMaxY = value && (value.maxY && value.maxY | 0 || value | 0) || 0;
226                  break;
227                case 'rangey':
228                  newMinY = value && value.minY && value.minY | 0 || 0;
229                  newMaxY = value && value.maxY && value.maxY | 0 || 0;
230                  break;
231                case 'all':
232                default:
233                  newMinX = value && value.minX && value.minX | 0 || 0;
234                  newMaxX = value && value.maxX && value.maxX | 0 || 0;
235                  newMinY = value && value.minY && value.minY | 0 || 0;
236                  newMaxY = value && value.maxY && value.maxY | 0 || 0;
237                  break;
238              }
239              if (newMinX != null && minX != newMinX)
240              {
241                minX = newMinX;
242                rangeX = maxX - minX;
243              }
244              if (newMaxX != null && maxX != newMaxX)
245              {
246                maxX = newMaxX;
247                rangeX = maxX - minX;
248              }
249              if (newMinY != null && minY != newMinY)
250              {
251                minY = newMinY;
252                rangeY = maxY - minY;
253              }
254              if (newMaxY != null && maxY != newMaxY)
255              {
256                maxY = newMaxY;
257                rangeY = maxY - minY;
258              }
259            },
260          bind =
261            function (callback)
262            {
263              if ($.isFunction(callback)) changeEvents.push(callback);
264            },
265          unbind =
266            function (callback)
267            {
268              if (!$.isFunction(callback)) return;
269              var i;
270              while ((i = $.inArray(callback, changeEvents)) != -1) changeEvents.splice(i, 1);
271            },
272          destroy =
273            function()
274            {
275              // unbind all possible events and null objects
276              $(document).unbind('mouseup', mouseUp).unbind('mousemove', mouseMove);
277              bar.unbind('mousedown', mouseDown);
278              bar = null;
279              arrow = null;
280              changeEvents = null;
281            };
282        $.extend(true, $this, // public properties, methods, and event bindings - these we need to access from other controls
283          {
284            val: val,
285            range: range,
286            bind: bind,
287            unbind: unbind,
288            destroy: destroy
289          });
290        // initialize this control
291        arrow.src = options.arrow && options.arrow.image;
292        arrow.w = options.arrow && options.arrow.width || arrow.width();
293        arrow.h = options.arrow && options.arrow.height || arrow.height();
294        bar.w = options.map && options.map.width || bar.width();
295        bar.h = options.map && options.map.height || bar.height();
296        // bind mousedown event
297        bar.bind('mousedown', mouseDown);
298        bind.call($this, draw);
299      },
300    ColorValuePicker = // controls for all the input elements for the typing in color values
301      function(picker, color, bindedHex, alphaPrecision)
302      {
303        var $this = this, // private properties and methods
304          inputs = picker.find('td.Text input'),
305          red = inputs.eq(3),
306          green = inputs.eq(4),
307          blue = inputs.eq(5),
308          alpha = inputs.length > 7 ? inputs.eq(6) : null,
309          hue = inputs.eq(0),
310          saturation = inputs.eq(1),
311          value = inputs.eq(2),
312          hex = inputs.eq(inputs.length > 7 ? 7 : 6),
313          ahex = inputs.length > 7 ? inputs.eq(8) : null,
314          keyDown = // input box key down - use arrows to alter color
315            function(e)
316            {
317              if (e.target.value == '' && e.target != hex.get(0) && (bindedHex != null && e.target != bindedHex.get(0) || bindedHex == null)) return;
318              if (!validateKey(e)) return e;
319              switch (e.target)
320              {
321                case red.get(0):
322                  switch (e.keyCode)
323                  {
324                    case 38:
325                      red.val(setValueInRange.call($this, (red.val() << 0) + 1, 0, 255));
326                      color.val('r', red.val(), e.target);
327                      return false;
328                    case 40:
329                      red.val(setValueInRange.call($this, (red.val() << 0) - 1, 0, 255));
330                      color.val('r', red.val(), e.target);
331                      return false;
332                  }
333                  break;
334                case green.get(0):
335                  switch (e.keyCode)
336                  {
337                    case 38:
338                      green.val(setValueInRange.call($this, (green.val() << 0) + 1, 0, 255));
339                      color.val('g', green.val(), e.target);
340                      return false;
341                    case 40:
342                      green.val(setValueInRange.call($this, (green.val() << 0) - 1, 0, 255));
343                      color.val('g', green.val(), e.target);
344                      return false;
345                  }
346                  break;
347                case blue.get(0):
348                  switch (e.keyCode)
349                  {
350                    case 38:
351                      blue.val(setValueInRange.call($this, (blue.val() << 0) + 1, 0, 255));
352                      color.val('b', blue.val(), e.target);
353                      return false;
354                    case 40:
355                      blue.val(setValueInRange.call($this, (blue.val() << 0) - 1, 0, 255));
356                      color.val('b', blue.val(), e.target);
357                      return false;
358                  }
359                  break;
360                case alpha && alpha.get(0):
361                  switch (e.keyCode)
362                  {
363                    case 38:
364                      alpha.val(setValueInRange.call($this, parseFloat(alpha.val()) + 1, 0, 100));
365                      color.val('a', Math.precision((alpha.val() * 255) / 100, alphaPrecision), e.target);
366                      return false;
367                    case 40:
368                      alpha.val(setValueInRange.call($this, parseFloat(alpha.val()) - 1, 0, 100));
369                      color.val('a', Math.precision((alpha.val() * 255) / 100, alphaPrecision), e.target);
370                      return false;
371                  }
372                  break;
373                case hue.get(0):
374                  switch (e.keyCode)
375                  {
376                    case 38:
377                      hue.val(setValueInRange.call($this, (hue.val() << 0) + 1, 0, 360));
378                      color.val('h', hue.val(), e.target);
379                      return false;
380                    case 40:
381                      hue.val(setValueInRange.call($this, (hue.val() << 0) - 1, 0, 360));
382                      color.val('h', hue.val(), e.target);
383                      return false;
384                  }
385                  break;
386                case saturation.get(0):
387                  switch (e.keyCode)
388                  {
389                    case 38:
390                      saturation.val(setValueInRange.call($this, (saturation.val() << 0) + 1, 0, 100));
391                      color.val('s', saturation.val(), e.target);
392                      return false;
393                    case 40:
394                      saturation.val(setValueInRange.call($this, (saturation.val() << 0) - 1, 0, 100));
395                      color.val('s', saturation.val(), e.target);
396                      return false;
397                  }
398                  break;
399                case value.get(0):
400                  switch (e.keyCode)
401                  {
402                    case 38:
403                      value.val(setValueInRange.call($this, (value.val() << 0) + 1, 0, 100));
404                      color.val('v', value.val(), e.target);
405                      return false;
406                    case 40:
407                      value.val(setValueInRange.call($this, (value.val() << 0) - 1, 0, 100));
408                      color.val('v', value.val(), e.target);
409                      return false;
410                  }
411                  break;
412              }
413            },
414          keyUp = // input box key up - validate value and set color
415            function(e)
416            {
417              if (e.target.value == '' && e.target != hex.get(0) && (bindedHex != null && e.target != bindedHex.get(0) || bindedHex == null)) return;
418              if (!validateKey(e)) return e;
419              switch (e.target)
420              {
421                case red.get(0):
422                  red.val(setValueInRange.call($this, red.val(), 0, 255));
423                  color.val('r', red.val(), e.target);
424                  break;
425                case green.get(0):
426                  green.val(setValueInRange.call($this, green.val(), 0, 255));
427                  color.val('g', green.val(), e.target);
428                  break;
429                case blue.get(0):
430                  blue.val(setValueInRange.call($this, blue.val(), 0, 255));
431                  color.val('b', blue.val(), e.target);
432                  break;
433                case alpha && alpha.get(0):
434                  alpha.val(setValueInRange.call($this, alpha.val(), 0, 100));
435                  color.val('a', Math.precision((alpha.val() * 255) / 100, alphaPrecision), e.target);
436                  break;
437                case hue.get(0):
438                  hue.val(setValueInRange.call($this, hue.val(), 0, 360));
439                  color.val('h', hue.val(), e.target);
440                  break;
441                case saturation.get(0):
442                  saturation.val(setValueInRange.call($this, saturation.val(), 0, 100));
443                  color.val('s', saturation.val(), e.target);
444                  break;
445                case value.get(0):
446                  value.val(setValueInRange.call($this, value.val(), 0, 100));
447                  color.val('v', value.val(), e.target);
448                  break;
449                case hex.get(0):
450                  hex.val(hex.val().replace(/[^a-fA-F0-9]/g, '').toLowerCase().substring(0, 6));
451                  bindedHex && bindedHex.val(hex.val());
452                  color.val('hex', hex.val() != '' ? hex.val() : null, e.target);
453                  break;
454                case bindedHex && bindedHex.get(0):
455                  bindedHex.val(bindedHex.val().replace(/[^a-fA-F0-9]/g, '').toLowerCase().substring(0, 6));
456                  hex.val(bindedHex.val());
457                  color.val('hex', bindedHex.val() != '' ? bindedHex.val() : null, e.target);
458                  break;
459                case ahex && ahex.get(0):
460                  ahex.val(ahex.val().replace(/[^a-fA-F0-9]/g, '').toLowerCase().substring(0, 2));
461                  color.val('a', ahex.val() != null ? parseInt(ahex.val(), 16) : null, e.target);
462                  break;
463              }
464            },
465          blur = // input box blur - reset to original if value empty
466            function(e)
467            {
468              if (color.val() != null)
469              {
470                switch (e.target)
471                {
472                  case red.get(0): red.val(color.val('r')); break;
473                  case green.get(0): green.val(color.val('g')); break;
474                  case blue.get(0): blue.val(color.val('b')); break;
475                  case alpha && alpha.get(0): alpha.val(Math.precision((color.val('a') * 100) / 255, alphaPrecision)); break;
476                  case hue.get(0): hue.val(color.val('h')); break;
477                  case saturation.get(0): saturation.val(color.val('s')); break;
478                  case value.get(0): value.val(color.val('v')); break;
479                  case hex.get(0):
480                  case bindedHex && bindedHex.get(0):
481                    hex.val(color.val('hex'));
482                    bindedHex && bindedHex.val(color.val('hex'));
483                    break;
484                  case ahex && ahex.get(0): ahex.val(color.val('ahex').substring(6)); break;
485                }
486              }
487            },
488          validateKey = // validate key
489            function(e)
490            {
491              switch(e.keyCode)
492              {
493                case 9:
494                case 16:
495                case 29:
496                case 37:
497                case 39:
498                  return false;
499                case 'c'.charCodeAt():
500                case 'v'.charCodeAt():
501                  if (e.ctrlKey) return false;
502              }
503              return true;
504            },
505          setValueInRange = // constrain value within range
506            function(value, min, max)
507            {
508              if (value == '' || isNaN(value)) return min;
509              if (value > max) return max;
510              if (value < min) return min;
511              return value;
512            },
513          colorChanged =
514            function(ui, context)
515            {
516              var all = ui.val('all');
517              if (context != red.get(0)) red.val(all != null ? all.r : '');
518              if (context != green.get(0)) green.val(all != null ? all.g : '');
519              if (context != blue.get(0)) blue.val(all != null ? all.b : '');
520              if (alpha && context != alpha.get(0)) alpha.val(all != null ? Math.precision((all.a * 100) / 255, alphaPrecision) : '');
521              if (context != hue.get(0)) hue.val(all != null ? all.h : '');
522              if (context != saturation.get(0)) saturation.val(all != null ? all.s : '');
523              if (context != value.get(0)) value.val(all != null ? all.v : '');
524              if (context != hex.get(0) && (bindedHex && context != bindedHex.get(0) || !bindedHex)) hex.val(all != null ? all.hex : '');
525              if (bindedHex && context != bindedHex.get(0) && context != hex.get(0)) bindedHex.val(all != null ? all.hex : '');
526              if (ahex && context != ahex.get(0)) ahex.val(all != null ? all.ahex.substring(6) : '');
527            },
528          destroy =
529            function()
530            {
531              // unbind all events and null objects
532              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);
533              red.add(green).add(blue).add(alpha).add(hue).add(saturation).add(value).unbind('keydown', keyDown);
534              color.unbind(colorChanged);
535              red = null;
536              green = null;
537              blue = null;
538              alpha = null;
539              hue = null;
540              saturation = null;
541              value = null;
542              hex = null;
543              ahex = null;
544            };
545        $.extend(true, $this, // public properties and methods
546          {
547            destroy: destroy
548          });
549        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);
550        red.add(green).add(blue).add(alpha).add(hue).add(saturation).add(value).bind('keydown', keyDown);
551        color.bind(colorChanged);
552      };
553  $.jPicker =
554    {
555      List: [], // array holding references to each active instance of the control
556      Color: // color object - we will be able to assign by any color space type or retrieve any color space info
557             // 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)
558        function(init)
559        {
560          var $this = this,
561            r,
562            g,
563            b,
564            a,
565            h,
566            s,
567            v,
568            changeEvents = new Array(),
569            fireChangeEvents =
570              function(context)
571              {
572                for (var i = 0; i < changeEvents.length; i++) changeEvents[i].call($this, $this, context);
573              },
574            val =
575              function(name, value, context)
576              {
577                var set = value !== undefined;
578                if (!set)
579                {
580                  if (name === undefined || name == null || name == '') name = 'all';
581                  if (r == null) return null;
582                  switch (name.toLowerCase())
583                  {
584                    case 'ahex': return ColorMethods.rgbaToHex({ r: r, g: g, b: b, a: a });
585                    case 'hex': return val('ahex').substring(0, 6);
586                    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') };
587                    default:
588                      var ret={};
589                      for (var i = 0; i < name.length; i++)
590                      {
591                        switch (name.charAt(i))
592                        {
593                          case 'r':
594                            if (name.length == 1) ret = r;
595                            else ret.r = r;
596                            break;
597                          case 'g':
598                            if (name.length == 1) ret = g;
599                            else ret.g = g;
600                            break;
601                          case 'b':
602                            if (name.length == 1) ret = b;
603                            else ret.b = b;
604                            break;
605                          case 'a':
606                            if (name.length == 1) ret = a;
607                            else ret.a = a;
608                            break;
609                          case 'h':
610                            if (name.length == 1) ret = h;
611                            else ret.h = h;
612                            break;
613                          case 's':
614                            if (name.length == 1) ret = s;
615                            else ret.s = s;
616                            break;
617                          case 'v':
618                            if (name.length == 1) ret = v;
619                            else ret.v = v;
620                            break;
621                        }
622                      }
623                      return ret == {} ? val.call($this, 'all') : ret;
624                      break;
625                  }
626                }
627                if (context != null && context == $this) return;
628                var changed = false;
629                if (name == null) name = '';
630                if (value == null)
631                {
632                  if (r != null)
633                  {
634                    r = null;
635                    changed = true;
636                  }
637                  if (g != null)
638                  {
639                    g = null;
640                    changed = true;
641                  }
642                  if (b != null)
643                  {
644                    b = null;
645                    changed = true;
646                  }
647                  if (a != null)
648                  {
649                    a = null;
650                    changed = true;
651                  }
652                  if (h != null)
653                  {
654                    h = null;
655                    changed = true;
656                  }
657                  if (s != null)
658                  {
659                    s = null;
660                    changed = true;
661                  }
662                  if (v != null)
663                  {
664                    v = null;
665                    changed = true;
666                  }
667                  changed && fireChangeEvents.call($this, context || $this);
668                  return;
669                }
670                switch (name.toLowerCase())
671                {
672                  case 'ahex':
673                  case 'hex':
674                    var ret = ColorMethods.hexToRgba(value && (value.ahex || value.hex) || value || '00000000');
675                    val.call($this, 'rgba', { r: ret.r, g: ret.g, b: ret.b, a: name == 'ahex' ? ret.a : a != null ? a : 255 }, context);
676                    break;
677                  default:
678                    if (value && (value.ahex != null || value.hex != null))
679                    {
680                      val.call($this, 'ahex', value.ahex || value.hex || '00000000', context);
681                      return;
682                    }
683                    var newV = {}, rgb = false, hsv = false;
684                    if (value.r !== undefined && !name.indexOf('r') == -1) name += 'r';
685                    if (value.g !== undefined && !name.indexOf('g') == -1) name += 'g';
686                    if (value.b !== undefined && !name.indexOf('b') == -1) name += 'b';
687                    if (value.a !== undefined && !name.indexOf('a') == -1) name += 'a';
688                    if (value.h !== undefined && !name.indexOf('h') == -1) name += 'h';
689                    if (value.s !== undefined && !name.indexOf('s') == -1) name += 's';
690                    if (value.v !== undefined && !name.indexOf('v') == -1) name += 'v';
691                    for (var i = 0; i < name.length; i++)
692                    {
693                      switch (name.charAt(i))
694                      {
695                        case 'r':
696                          if (hsv) continue;
697                          rgb = true;
698                          newV.r = value && value.r && value.r | 0 || value && value | 0 || 0;
699                          if (newV.r < 0) newV.r = 0;
700                          else if (newV.r > 255) newV.r = 255;
701                          if (r != newV.r)
702                          {
703                            r = newV.r;
704                            changed = true;
705                          }
706                          break;
707                        case 'g':
708                          if (hsv) continue;
709                          rgb = true;
710                          newV.g = value && value.g && value.g | 0 || value && value | 0 || 0;
711                          if (newV.g < 0) newV.g = 0;
712                          else if (newV.g > 255) newV.g = 255;
713                          if (g != newV.g)
714                          {
715                            g = newV.g;
716                            changed = true;
717                          }
718                          break;
719                        case 'b':
720                          if (hsv) continue;
721                          rgb = true;
722                          newV.b = value && value.b && value.b | 0 || value && value | 0 || 0;
723                          if (newV.b < 0) newV.b = 0;
724                          else if (newV.b > 255) newV.b = 255;
725                          if (b != newV.b)
726                          {
727                            b = newV.b;
728                            changed = true;
729                          }
730                          break;
731                        case 'a':
732                          newV.a = value && value.a != null ? value.a | 0 : value != null ? value | 0 : 255;
733                          if (newV.a < 0) newV.a = 0;
734                          else if (newV.a > 255) newV.a = 255;
735                          if (a != newV.a)
736                          {
737                            a = newV.a;
738                            changed = true;
739                          }
740                          break;
741                        case 'h':
742                          if (rgb) continue;
743                          hsv = true;
744                          newV.h = value && value.h && value.h | 0 || value && value | 0 || 0;
745                          if (newV.h < 0) newV.h = 0;
746                          else if (newV.h > 360) newV.h = 360;
747                          if (h != newV.h)
748                          {
749                            h = newV.h;
750                            changed = true;
751                          }
752                          break;
753                        case 's':
754                          if (rgb) continue;
755                          hsv = true;
756                          newV.s = value && value.s != null ? value.s | 0 : value != null ? value | 0 : 100;
757                          if (newV.s < 0) newV.s = 0;
758                          else if (newV.s > 100) newV.s = 100;
759                          if (s != newV.s)
760                          {
761                            s = newV.s;
762                            changed = true;
763                          }
764                          break;
765                        case 'v':
766                          if (rgb) continue;
767                          hsv = true;
768                          newV.v = value && value.v != null ? value.v | 0 : value != null ? value | 0 : 100;
769                          if (newV.v < 0) newV.v = 0;
770                          else if (newV.v > 100) newV.v = 100;
771                          if (v != newV.v)
772                          {
773                            v = newV.v;
774                            changed = true;
775                          }
776                          break;
777                      }
778                    }
779                    if (changed)
780                    {
781                      if (rgb)
782                      {
783                        r = r || 0;
784                        g = g || 0;
785                        b = b || 0;
786                        var ret = ColorMethods.rgbToHsv({ r: r, g: g, b: b });
787                        h = ret.h;
788                        s = ret.s;
789                        v = ret.v;
790                      }
791                      else if (hsv)
792                      {
793                        h = h || 0;
794                        s = s != null ? s : 100;
795                        v = v != null ? v : 100;
796                        var ret = ColorMethods.hsvToRgb({ h: h, s: s, v: v });
797                        r = ret.r;
798                        g = ret.g;
799                        b = ret.b;
800                      }
801                      a = a != null ? a : 255;
802                      fireChangeEvents.call($this, context || $this);
803                    }
804                    break;
805                }
806              },
807            bind =
808              function(callback)
809              {
810                if ($.isFunction(callback)) changeEvents.push(callback);
811              },
812            unbind =
813              function(callback)
814              {
815                if (!$.isFunction(callback)) return;
816                var i;
817                while ((i = $.inArray(callback, changeEvents)) != -1) changeEvents.splice(i, 1);
818              },
819            destroy =
820              function()
821              {
822                changeEvents = null;
823              }
824          $.extend(true, $this, // public properties and methods
825            {
826              val: val,
827              bind: bind,
828              unbind: unbind,
829              destroy: destroy
830            });
831          if (init)
832          {
833            if (init.ahex != null) val('ahex', init);
834            else if (init.hex != null) val((init.a != null ? 'a' : '') + 'hex', init.a != null ? { ahex: init.hex + ColorMethods.intToHex(init.a) } : init);
835            else if (init.r != null && init.g != null && init.b != null) val('rgb' + (init.a != null ? 'a' : ''), init);
836            else if (init.h != null && init.s != null && init.v != null) val('hsv' + (init.a != null ? 'a' : ''), init);
837          }
838        },
839      ColorMethods: // color conversion methods  - make public to give use to external scripts
840        {
841          hexToRgba:
842            function(hex)
843            {
844              hex = this.validateHex(hex);
845              if (hex == '') return { r: null, g: null, b: null, a: null };
846              var r = '00', g = '00', b = '00', a = '255';
847              if (hex.length == 6) hex += 'ff';
848              if (hex.length > 6)
849              {
850                r = hex.substring(0, 2);
851                g = hex.substring(2, 4);
852                b = hex.substring(4, 6);
853                a = hex.substring(6, hex.length);
854              }
855              else
856              {
857                if (hex.length > 4)
858                {
859                  r = hex.substring(4, hex.length);
860                  hex = hex.substring(0, 4);
861                }
862                if (hex.length > 2)
863                {
864                  g = hex.substring(2, hex.length);
865                  hex = hex.substring(0, 2);
866                }
867                if (hex.length > 0) b = hex.substring(0, hex.length);
868              }
869              return { r: this.hexToInt(r), g: this.hexToInt(g), b: this.hexToInt(b), a: this.hexToInt(a) };
870            },
871          validateHex:
872            function(hex)
873            {
874              hex = hex.toLowerCase().replace(/[^a-f0-9]/g, '');
875              if (hex.length > 8) hex = hex.substring(0, 8);
876              return hex;
877            },
878          rgbaToHex:
879            function(rgba)
880            {
881              return this.intToHex(rgba.r) + this.intToHex(rgba.g) + this.intToHex(rgba.b) + this.intToHex(rgba.a);
882            },
883          intToHex:
884            function(dec)
885            {
886              var result = (dec | 0).toString(16);
887              if (result.length == 1) result = ('0' + result);
888              return result.toLowerCase();
889            },
890          hexToInt:
891            function(hex)
892            {
893              return parseInt(hex, 16);
894            },
895          rgbToHsv:
896            function(rgb)
897            {
898              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;
899              if (r >= g && r >= b)
900              {
901                max = r;
902                min = g > b ? b : g;
903              }
904              else if (g >= b && g >= r)
905              {
906                max = g;
907                min = r > b ? b : r;
908              }
909              else
910              {
911                max = b;
912                min = g > r ? r : g;
913              }
914              hsv.v = max;
915              hsv.s = max ? (max - min) / max : 0;
916              if (!hsv.s) hsv.h = 0;
917              else
918              {
919                delta = max - min;
920                if (r == max) hsv.h = (g - b) / delta;
921                else if (g == max) hsv.h = 2 + (b - r) / delta;
922                else hsv.h = 4 + (r - g) / delta;
923                hsv.h = parseInt(hsv.h * 60);
924                if (hsv.h < 0) hsv.h += 360;
925              }
926              hsv.s = (hsv.s * 100) | 0;
927              hsv.v = (hsv.v * 100) | 0;
928              return hsv;
929            },
930          hsvToRgb:
931            function(hsv)
932            {
933              var rgb = { r: 0, g: 0, b: 0, a: 100 }, h = hsv.h, s = hsv.s, v = hsv.v;
934              if (s == 0)
935              {
936                if (v == 0) rgb.r = rgb.g = rgb.b = 0;
937                else rgb.r = rgb.g = rgb.b = (v * 255 / 100) | 0;
938              }
939              else
940              {
941                if (h == 360) h = 0;
942                h /= 60;
943                s = s / 100;
944                v = v / 100;
945                var i = h | 0,
946                    f = h - i,
947                    p = v * (1 - s),
948                    q = v * (1 - (s * f)),
949                    t = v * (1 - (s * (1 - f)));
950                switch (i)
951                {
952                  case 0:
953                    rgb.r = v;
954                    rgb.g = t;
955                    rgb.b = p;
956                    break;
957                  case 1:
958                    rgb.r = q;
959                    rgb.g = v;
960                    rgb.b = p;
961                    break;
962                  case 2:
963                    rgb.r = p;
964                    rgb.g = v;
965                    rgb.b = t;
966                    break;
967                  case 3:
968                    rgb.r = p;
969                    rgb.g = q;
970                    rgb.b = v;
971                    break;
972                  case 4:
973                    rgb.r = t;
974                    rgb.g = p;
975                    rgb.b = v;
976                    break;
977                  case 5:
978                    rgb.r = v;
979                    rgb.g = p;
980                    rgb.b = q;
981                    break;
982                }
983                rgb.r = (rgb.r * 255) | 0;
984                rgb.g = (rgb.g * 255) | 0;
985                rgb.b = (rgb.b * 255) | 0;
986              }
987              return rgb;
988            }
989        }
990    };
991  var Color = $.jPicker.Color, List = $.jPicker.List, ColorMethods = $.jPicker.ColorMethods; // local copies for YUI compressor
992  $.fn.jPicker =
993    function(options)
994    {
995      var $arguments = arguments;
996      return this.each(
997        function()
998        {
999          var $this = this, settings = $.extend(true, {}, $.fn.jPicker.defaults, options); // local copies for YUI compressor
1000          if ($($this).get(0).nodeName.toLowerCase() == 'input') // Add color picker icon if binding to an input element and bind the events to the input
1001          {
1002            $.extend(true, settings,
1003              {
1004                window:
1005                {
1006                  bindToInput: true,
1007                  expandable: true,
1008                  input: $($this)
1009                }
1010              });
1011            if($($this).val()=='')
1012            {
1013              settings.color.active = new Color({ hex: null });
1014              settings.color.current = new Color({ hex: null });
1015            }
1016            else if (ColorMethods.validateHex($($this).val()))
1017            {
1018              settings.color.active = new Color({ hex: $($this).val(), a: settings.color.active.val('a') });
1019              settings.color.current = new Color({ hex: $($this).val(), a: settings.color.active.val('a') });
1020            }
1021          }
1022          if (settings.window.expandable)
1023            $($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>');
1024          else settings.window.liveUpdate = false; // Basic control binding for inline use - You will need to override the liveCallback or commitCallback function to retrieve results
1025          var isLessThanIE7 = parseFloat(navigator.appVersion.split('MSIE')[1]) < 7 && document.body.filters, // needed to run the AlphaImageLoader function for IE6
1026            container = null,
1027            colorMapDiv = null,
1028            colorBarDiv = null,
1029            colorMapL1 = null, // different layers of colorMap and colorBar
1030            colorMapL2 = null,
1031            colorMapL3 = null,
1032            colorBarL1 = null,
1033            colorBarL2 = null,
1034            colorBarL3 = null,
1035            colorBarL4 = null,
1036            colorBarL5 = null,
1037            colorBarL6 = null,
1038            colorMap = null, // color maps
1039            colorBar = null,
1040            colorPicker = null,
1041            elementStartX = null, // Used to record the starting css positions for dragging the control
1042            elementStartY = null,
1043            pageStartX = null, // Used to record the mousedown coordinates for dragging the control
1044            pageStartY = null,
1045            activePreview = null, // color boxes above the radio buttons
1046            currentPreview = null,
1047            okButton = null,
1048            cancelButton = null,
1049            grid = null, // preset colors grid
1050            iconColor = null, // iconColor for popup icon
1051            iconAlpha = null, // iconAlpha for popup icon
1052            iconImage = null, // iconImage popup icon
1053            moveBar = null, // drag bar
1054            setColorMode = // set color mode and update visuals for the new color mode
1055              function(colorMode)
1056              {
1057                var active = color.active, // local copies for YUI compressor
1058                  clientPath = images.clientPath,
1059                  hex = active.val('hex'),
1060                  rgbMap,
1061                  rgbBar;
1062                settings.color.mode = colorMode;
1063                switch (colorMode)
1064                {
1065                  case 'h':
1066                    setTimeout(
1067                      function()
1068                      {
1069                        setBG.call($this, colorMapDiv, 'transparent');
1070                        setImgLoc.call($this, colorMapL1, 0);
1071                        setAlpha.call($this, colorMapL1, 100);
1072                        setImgLoc.call($this, colorMapL2, 260);
1073                        setAlpha.call($this, colorMapL2, 100);
1074                        setBG.call($this, colorBarDiv, 'transparent');
1075                        setImgLoc.call($this, colorBarL1, 0);
1076                        setAlpha.call($this, colorBarL1, 100);
1077                        setImgLoc.call($this, colorBarL2, 260);
1078                        setAlpha.call($this, colorBarL2, 100);
1079                        setImgLoc.call($this, colorBarL3, 260);
1080                        setAlpha.call($this, colorBarL3, 100);
1081                        setImgLoc.call($this, colorBarL4, 260);
1082                        setAlpha.call($this, colorBarL4, 100);
1083                        setImgLoc.call($this, colorBarL6, 260);
1084                        setAlpha.call($this, colorBarL6, 100);
1085                      }, 0);
1086                    colorMap.range('all', { minX: 0, maxX: 100, minY: 0, maxY: 100 });
1087                    colorBar.range('rangeY', { minY: 0, maxY: 360 });
1088                    if (active.val('ahex') == null) break;
1089                    colorMap.val('xy', { x: active.val('s'), y: 100 - active.val('v') }, colorMap);
1090                    colorBar.val('y', 360 - active.val('h'), colorBar);
1091                    break;
1092                  case 's':
1093                    setTimeout(
1094                      function()
1095                      {
1096                        setBG.call($this, colorMapDiv, 'transparent');
1097                        setImgLoc.call($this, colorMapL1, -260);
1098                        setImgLoc.call($this, colorMapL2, -520);
1099                        setImgLoc.call($this, colorBarL1, -260);
1100                        setImgLoc.call($this, colorBarL2, -520);
1101                        setImgLoc.call($this, colorBarL6, 260);
1102                        setAlpha.call($this, colorBarL6, 100);
1103                      }, 0);
1104                    colorMap.range('all', { minX: 0, maxX: 360, minY: 0, maxY: 100 });
1105                    colorBar.range('rangeY', { minY: 0, maxY: 100 });
1106                    if (active.val('ahex') == null) break;
1107                    colorMap.val('xy', { x: active.val('h'), y: 100 - active.val('v') }, colorMap);
1108                    colorBar.val('y', 100 - active.val('s'), colorBar);
1109                    break;
1110                  case 'v':
1111                    setTimeout(
1112                      function()
1113                      {
1114                        setBG.call($this, colorMapDiv, '000000');
1115                        setImgLoc.call($this, colorMapL1, -780);
1116                        setImgLoc.call($this, colorMapL2, 260);
1117                        setBG.call($this, colorBarDiv, hex);
1118                        setImgLoc.call($this, colorBarL1, -520);
1119                        setImgLoc.call($this, colorBarL2, 260);
1120                        setAlpha.call($this, colorBarL2, 100);
1121                        setImgLoc.call($this, colorBarL6, 260);
1122                        setAlpha.call($this, colorBarL6, 100);
1123                      }, 0);
1124                    colorMap.range('all', { minX: 0, maxX: 360, minY: 0, maxY: 100 });
1125                    colorBar.range('rangeY', { minY: 0, maxY: 100 });
1126                    if (active.val('ahex') == null) break;
1127                    colorMap.val('xy', { x: active.val('h'), y: 100 - active.val('s') }, colorMap);
1128                    colorBar.val('y', 100 - active.val('v'), colorBar);
1129                    break;
1130                  case 'r':
1131                    rgbMap = -1040;
1132                    rgbBar = -780;
1133                    colorMap.range('all', { minX: 0, maxX: 255, minY: 0, maxY: 255 });
1134                    colorBar.range('rangeY', { minY: 0, maxY: 255 });
1135                    if (active.val('ahex') == null) break;
1136                    colorMap.val('xy', { x: active.val('b'), y: 255 - active.val('g') }, colorMap);
1137                    colorBar.val('y', 255 - active.val('r'), colorBar);
1138                    break;
1139                  case 'g':
1140                    rgbMap = -1560;
1141                    rgbBar = -1820;
1142                    colorMap.range('all', { minX: 0, maxX: 255, minY: 0, maxY: 255 });
1143                    colorBar.range('rangeY', { minY: 0, maxY: 255 });
1144                    if (active.val('ahex') == null) break;
1145                    colorMap.val('xy', { x: active.val('b'), y: 255 - active.val('r') }, colorMap);
1146                    colorBar.val('y', 255 - active.val('g'), colorBar);
1147                    break;
1148                  case 'b':
1149                    rgbMap = -2080;
1150                    rgbBar = -2860;
1151                    colorMap.range('all', { minX: 0, maxX: 255, minY: 0, maxY: 255 });
1152                    colorBar.range('rangeY', { minY: 0, maxY: 255 });
1153                    if (active.val('ahex') == null) break;
1154                    colorMap.val('xy', { x: active.val('r'), y: 255 - active.val('g') }, colorMap);
1155                    colorBar.val('y', 255 - active.val('b'), colorBar);
1156                    break;
1157                  case 'a':
1158                    setTimeout(
1159                      function()
1160                      {
1161                        setBG.call($this, colorMapDiv, 'transparent');
1162                        setImgLoc.call($this, colorMapL1, -260);
1163                        setImgLoc.call($this, colorMapL2, -520);
1164                        setImgLoc.call($this, colorBarL1, 260);
1165                        setImgLoc.call($this, colorBarL2, 260);
1166                        setAlpha.call($this, colorBarL2, 100);
1167                        setImgLoc.call($this, colorBarL6, 0);
1168                        setAlpha.call($this, colorBarL6, 100);
1169                      }, 0);
1170                    colorMap.range('all', { minX: 0, maxX: 360, minY: 0, maxY: 100 });
1171                    colorBar.range('rangeY', { minY: 0, maxY: 255 });
1172                    if (active.val('ahex') == null) break;
1173                    colorMap.val('xy', { x: active.val('h'), y: 100 - active.val('v') }, colorMap);
1174                    colorBar.val('y', 255 - active.val('a'), colorBar);
1175                    break;
1176                  default:
1177                    throw ('Invalid Mode');
1178                    break;
1179                }
1180                switch (colorMode)
1181                {
1182                  case 'h':
1183                    break;
1184                  case 's':
1185                  case 'v':
1186                  case 'a':
1187                    setTimeout(
1188                      function()
1189                      {
1190                        setAlpha.call($this, colorMapL1, 100);
1191                        setAlpha.call($this, colorBarL1, 100);
1192                        setImgLoc.call($this, colorBarL3, 260);
1193                        setAlpha.call($this, colorBarL3, 100);
1194                        setImgLoc.call($this, colorBarL4, 260);
1195                        setAlpha.call($this, colorBarL4, 100);
1196                      }, 0);
1197                    break;
1198                  case 'r':
1199                  case 'g':
1200                  case 'b':
1201                    setTimeout(
1202                      function()
1203                      {
1204                        setBG.call($this, colorMapDiv, 'transparent');
1205                        setBG.call($this, colorBarDiv, 'transparent');
1206                        setAlpha.call($this, colorBarL1, 100);
1207                        setAlpha.call($this, colorMapL1, 100);
1208                        setImgLoc.call($this, colorMapL1, rgbMap);
1209                        setImgLoc.call($this, colorMapL2, rgbMap - 260);
1210                        setImgLoc.call($this, colorBarL1, rgbBar - 780);
1211                        setImgLoc.call($this, colorBarL2, rgbBar - 520);
1212                        setImgLoc.call($this, colorBarL3, rgbBar);
1213                        setImgLoc.call($this, colorBarL4, rgbBar - 260);
1214                        setImgLoc.call($this, colorBarL6, 260);
1215                        setAlpha.call($this, colorBarL6, 100);
1216                      }, 0);
1217                    break;
1218                }
1219                if (active.val('ahex') == null) return;
1220                activeColorChanged.call($this, active);
1221              },
1222            activeColorChanged = // Update color when user changes text values
1223              function(ui, context)
1224              {
1225                if (context == null || (context != colorBar && context != colorMap)) positionMapAndBarArrows.call($this, ui, context);
1226                setTimeout(
1227                  function()
1228                  {
1229                    updatePreview.call($this, ui);
1230                    updateMapVisuals.call($this, ui);
1231                    updateBarVisuals.call($this, ui);
1232                  }, 0);
1233              },
1234            mapValueChanged = // user has dragged the ColorMap pointer
1235              function(ui, context)
1236              {
1237                var active = color.active;
1238                if (context != colorMap && active.val() == null) return;
1239                var xy = ui.val('all');
1240                switch (settings.color.mode)
1241                {
1242                  case 'h':
1243                    active.val('sv', { s: xy.x, v: 100 - xy.y }, context);
1244                    break;
1245                  case 's':
1246                  case 'a':
1247                    active.val('hv', { h: xy.x, v: 100 - xy.y }, context);
1248                    break;
1249                  case 'v':
1250                    active.val('hs', { h: xy.x, s: 100 - xy.y }, context);
1251                    break;
1252                  case 'r':
1253                    active.val('gb', { g: 255 - xy.y, b: xy.x }, context);
1254                    break;
1255                  case 'g':
1256                    active.val('rb', { r: 255 - xy.y, b: xy.x }, context);
1257                    break;
1258                  case 'b':
1259                    active.val('rg', { r: xy.x, g: 255 - xy.y }, context);
1260                    break;
1261                }
1262              },
1263            colorBarValueChanged = // user has dragged the ColorBar slider
1264              function(ui, context)
1265              {
1266                var active = color.active;
1267                if (context != colorBar && active.val() == null) return;
1268                switch (settings.color.mode)
1269                {
1270                  case 'h':
1271                    active.val('h', { h: 360 - ui.val('y') }, context);
1272                    break;
1273                  case 's':
1274                    active.val('s', { s: 100 - ui.val('y') }, context);
1275                    break;
1276                  case 'v':
1277                    active.val('v', { v: 100 - ui.val('y') }, context);
1278                    break;
1279                  case 'r':
1280                    active.val('r', { r: 255 - ui.val('y') }, context);
1281                    break;
1282                  case 'g':
1283                    active.val('g', { g: 255 - ui.val('y') }, context);
1284                    break;
1285                  case 'b':
1286                    active.val('b', { b: 255 - ui.val('y') }, context);
1287                    break;
1288                  case 'a':
1289                    active.val('a', 255 - ui.val('y'), context);
1290                    break;
1291                }
1292              },
1293            positionMapAndBarArrows = // position map and bar arrows to match current color
1294              function(ui, context)
1295              {
1296                if (context != colorMap)
1297                {
1298                  switch (settings.color.mode)
1299                  {
1300                    case 'h':
1301                      var sv = ui.val('sv');
1302                      colorMap.val('xy', { x: sv != null ? sv.s : 100, y: 100 - (sv != null ? sv.v : 100) }, context);
1303                      break;
1304                    case 's':
1305                    case 'a':
1306                      var hv = ui.val('hv');
1307                      colorMap.val('xy', { x: hv && hv.h || 0, y: 100 - (hv != null ? hv.v : 100) }, context);
1308                      break;
1309                    case 'v':
1310                      var hs = ui.val('hs');
1311                      colorMap.val('xy', { x: hs && hs.h || 0, y: 100 - (hs != null ? hs.s : 100) }, context);
1312                      break;
1313                    case 'r':
1314                      var bg = ui.val('bg');
1315                      colorMap.val('xy', { x: bg && bg.b || 0, y: 255 - (bg && bg.g || 0) }, context);
1316                      break;
1317                    case 'g':
1318                      var br = ui.val('br');
1319                      colorMap.val('xy', { x: br && br.b || 0, y: 255 - (br && br.r || 0) }, context);
1320                      break;
1321                    case 'b':
1322                      var rg = ui.val('rg');
1323                      colorMap.val('xy', { x: rg && rg.r || 0, y: 255 - (rg && rg.g || 0) }, context);
1324                      break;
1325                  }
1326                }
1327                if (context != colorBar)
1328                {
1329                  switch (settings.color.mode)
1330                  {
1331                    case 'h':
1332                      colorBar.val('y', 360 - (ui.val('h') || 0), context);
1333                      break;
1334                    case 's':
1335                      var s = ui.val('s');
1336                      colorBar.val('y', 100 - (s != null ? s : 100), context);
1337                      break;
1338                    case 'v':
1339                      var v = ui.val('v');
1340                      colorBar.val('y', 100 - (v != null ? v : 100), context);
1341                      break;
1342                    case 'r':
1343                      colorBar.val('y', 255 - (ui.val('r') || 0), context);
1344                      break;
1345                    case 'g':
1346                      colorBar.val('y', 255 - (ui.val('g') || 0), context);
1347                      break;
1348                    case 'b':
1349                      colorBar.val('y', 255 - (ui.val('b') || 0), context);
1350                      break;
1351                    case 'a':
1352                      var a = ui.val('a');
1353                      colorBar.val('y', 255 - (a != null ? a : 255), context);
1354                      break;
1355                  }
1356                }
1357              },
1358            updatePreview =
1359              function(ui)
1360              {
1361                try
1362                {
1363                  var all = ui.val('all');
1364                  activePreview.css({ backgroundColor: all && '#' + all.hex || 'transparent' });
1365                  setAlpha.call($this, activePreview, all && Math.precision((all.a * 100) / 255, 4) || 0);
1366                }
1367                catch (e) { }
1368              },
1369            updateMapVisuals =
1370              function(ui)
1371              {
1372                switch (settings.color.mode)
1373                {
1374                  case 'h':
1375                    setBG.call($this, colorMapDiv, new Color({ h: ui.val('h') || 0, s: 100, v: 100 }).val('hex'));
1376                    break;
1377                  case 's':
1378                  case 'a':
1379                    var s = ui.val('s');
1380                    setAlpha.call($this, colorMapL2, 100 - (s != null ? s : 100));
1381                    break;
1382                  case 'v':
1383                    var v = ui.val('v');
1384                    setAlpha.call($this, colorMapL1, v != null ? v : 100);
1385                    break;
1386                  case 'r':
1387                    setAlpha.call($this, colorMapL2, Math.precision((ui.val('r') || 0) / 255 * 100, 4));
1388                    break;
1389                  case 'g':
1390                    setAlpha.call($this, colorMapL2, Math.precision((ui.val('g') || 0) / 255 * 100, 4));
1391                    break;
1392                  case 'b':
1393                    setAlpha.call($this, colorMapL2, Math.precision((ui.val('b') || 0) / 255 * 100));
1394                    break;
1395                }
1396                var a = ui.val('a');
1397                setAlpha.call($this, colorMapL3, Math.precision(((255 - (a || 0)) * 100) / 255, 4));
1398              },
1399            updateBarVisuals =
1400              function(ui)
1401              {
1402                switch (settings.color.mode)
1403                {
1404                  case 'h':
1405                    var a = ui.val('a');
1406                    setAlpha.call($this, colorBarL5, Math.precision(((255 - (a || 0)) * 100) / 255, 4));
1407                    break;
1408                  case 's':
1409                    var hva = ui.val('hva'),
1410                        saturatedColor = new Color({ h: hva && hva.h || 0, s: 100, v: hva != null ? hva.v : 100 });
1411                    setBG.call($this, colorBarDiv, saturatedColor.val('hex'));
1412                    setAlpha.call($this, colorBarL2, 100 - (hva != null ? hva.v : 100));
1413                    setAlpha.call($this, colorBarL5, Math.precision(((255 - (hva && hva.a || 0)) * 100) / 255, 4));
1414                    break;
1415                  case 'v':
1416                    var hsa = ui.val('hsa'),
1417                        valueColor = new Color({ h: hsa && hsa.h || 0, s: hsa != null ? hsa.s : 100, v: 100 });
1418                    setBG.call($this, colorBarDiv, valueColor.val('hex'));
1419                    setAlpha.call($this, colorBarL5, Math.precision(((255 - (hsa && hsa.a || 0)) * 100) / 255, 4));
1420                    break;
1421                  case 'r':
1422                  case 'g':
1423                  case 'b':
1424                    var hValue = 0, vValue = 0, rgba = ui.val('rgba');
1425                    if (settings.color.mode == 'r')
1426                    {
1427                      hValue = rgba && rgba.b || 0;
1428                      vValue = rgba && rgba.g || 0;
1429                    }
1430                    else if (settings.color.mode == 'g')
1431                    {
1432                      hValue = rgba && rgba.b || 0;
1433                      vValue = rgba && rgba.r || 0;
1434                    }
1435                    else if (settings.color.mode == 'b')
1436                    {
1437                      hValue = rgba && rgba.r || 0;
1438                      vValue = rgba && rgba.g || 0;
1439                    }
1440                    var middle = vValue > hValue ? hValue : vValue;
1441                    setAlpha.call($this, colorBarL2, hValue > vValue ? Math.precision(((hValue - vValue) / (255 - vValue)) * 100, 4) : 0);
1442                    setAlpha.call($this, colorBarL3, vValue > hValue ? Math.precision(((vValue - hValue) / (255 - hValue)) * 100, 4) : 0);
1443                    setAlpha.call($this, colorBarL4, Math.precision((middle / 255) * 100, 4));
1444                    setAlpha.call($this, colorBarL5, Math.precision(((255 - (rgba && rgba.a || 0)) * 100) / 255, 4));
1445                    break;
1446                  case 'a':
1447                    var a = ui.val('a');
1448                    setBG.call($this, colorBarDiv, ui.val('hex') || '000000');
1449                    setAlpha.call($this, colorBarL5, a != null ? 0 : 100);
1450                    setAlpha.call($this, colorBarL6, a != null ? 100 : 0);
1451                    break;
1452                }
1453              },
1454            setBG =
1455              function(el, c)
1456              {
1457                el.css({ backgroundColor: c && c.length == 6 && '#' + c || 'transparent' });
1458              },
1459            setImg =
1460              function(img, src)
1461              {
1462                if (isLessThanIE7 && (src.indexOf('AlphaBar.png') != -1 || src.indexOf('Bars.png') != -1 || src.indexOf('Maps.png') != -1))
1463                {
1464                  img.attr('pngSrc', src);
1465                  img.css({ backgroundImage: 'none', filter: 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'' + src + '\', sizingMethod=\'scale\')' });
1466                }
1467                else img.css({ backgroundImage: 'url(\'' + src + '\')' });
1468              },
1469            setImgLoc =
1470              function(img, y)
1471              {
1472                img.css({ top: y + 'px' });
1473              },
1474            setAlpha =
1475              function(obj, alpha)
1476              {
1477                obj.css({ visibility: alpha > 0 ? 'visible' : 'hidden' });
1478                if (alpha > 0 && alpha < 100)
1479                {
1480                  if (isLessThanIE7)
1481                  {
1482                    var src = obj.attr('pngSrc');
1483                    if (src != null && (src.indexOf('AlphaBar.png') != -1 || src.indexOf('Bars.png') != -1 || src.indexOf('Maps.png') != -1))
1484                      obj.css({ filter: 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'' + src + '\', sizingMethod=\'scale\') progid:DXImageTransform.Microsoft.Alpha(opacity=' + alpha + ')' });
1485                    else obj.css({ opacity: Math.precision(alpha / 100, 4) });
1486                  }
1487                  else obj.css({ opacity: Math.precision(alpha / 100, 4) });
1488                }
1489                else if (alpha == 0 || alpha == 100)
1490                {
1491                  if (isLessThanIE7)
1492                  {
1493                    var src = obj.attr('pngSrc');
1494                    if (src != null && (src.indexOf('AlphaBar.png') != -1 || src.indexOf('Bars.png') != -1 || src.indexOf('Maps.png') != -1))
1495                      obj.css({ filter: 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'' + src + '\', sizingMethod=\'scale\')' });
1496                    else obj.css({ opacity: '' });
1497                  }
1498                  else obj.css({ opacity: '' });
1499                }
1500              },
1501            revertColor = // revert color to original color when opened
1502              function()
1503              {
1504                color.active.val('ahex', color.current.val('ahex'));
1505              },
1506            commitColor = // commit the color changes
1507              function()
1508              {
1509                color.current.val('ahex', color.active.val('ahex'));
1510              },
1511            radioClicked =
1512              function(e)
1513              {
1514                $(this).parents('tbody:first').find('input:radio[value!="'+e.target.value+'"]').removeAttr('checked');
1515                setColorMode.call($this, e.target.value);
1516              },
1517            currentClicked =
1518              function()
1519              {
1520                revertColor.call($this);
1521              },
1522            cancelClicked =
1523              function()
1524              {
1525                revertColor.call($this);
1526                settings.window.expandable && hide.call($this);
1527                $.isFunction(cancelCallback) && cancelCallback.call($this, color.active, cancelButton);
1528              },
1529            okClicked =
1530              function()
1531              {
1532                commitColor.call($this);
1533                settings.window.expandable && hide.call($this);
1534                $.isFunction(commitCallback) && commitCallback.call($this, color.active, okButton);
1535              },
1536            iconImageClicked =
1537              function()
1538              {
1539                show.call($this);
1540              },
1541            currentColorChanged =
1542              function(ui, context)
1543              {
1544                var hex = ui.val('hex');
1545                currentPreview.css({ backgroundColor: hex && '#' + hex || 'transparent' });
1546                setAlpha.call($this, currentPreview, Math.precision(((ui.val('a') || 0) * 100) / 255, 4));
1547              },
1548            expandableColorChanged =
1549              function(ui, context)
1550              {
1551                var hex = ui.val('hex');
1552                var va = ui.val('va');
1553                iconColor.css({ backgroundColor: hex && '#' + hex || 'transparent' });
1554                setAlpha.call($this, iconAlpha, Math.precision(((255 - (va && va.a || 0)) * 100) / 255, 4));
1555                if (settings.window.bindToInput&&settings.window.updateInputColor)
1556                  settings.window.input.css(
1557                    {
1558                      backgroundColor: hex && '#' + hex || 'transparent',
1559                      color: va == null || va.v > 75 ? '#000000' : '#ffffff'
1560                    });
1561              },
1562            moveBarMouseDown =
1563              function(e)
1564              {
1565                var element = settings.window.element, // local copies for YUI compressor
1566                  page = settings.window.page;
1567                elementStartX = parseInt(container.css('left'));
1568                elementStartY = parseInt(container.css('top'));
1569                pageStartX = e.pageX;
1570                pageStartY = e.pageY;
1571                // bind events to document to move window - we will unbind these on mouseup
1572                $(document).bind('mousemove', documentMouseMove).bind('mouseup', documentMouseUp);
1573                e.preventDefault(); // prevent attempted dragging of the column
1574              },
1575            documentMouseMove =
1576              function(e)
1577              {
1578                container.css({ left: elementStartX - (pageStartX - e.pageX) + 'px', top: elementStartY - (pageStartY - e.pageY) + 'px' });
1579                if (settings.window.expandable && !$.support.boxModel) container.prev().css({ left: container.css("left"), top: container.css("top") });
1580                e.stopPropagation();
1581                e.preventDefault();
1582                return false;
1583              },
1584            documentMouseUp =
1585              function(e)
1586              {
1587                $(document).unbind('mousemove', documentMouseMove).unbind('mouseup', documentMouseUp);
1588                e.stopPropagation();
1589                e.preventDefault();
1590                return false;
1591              },
1592            quickPickClicked =
1593              function(e)
1594              {
1595                e.preventDefault();
1596                e.stopPropagation();
1597                color.active.val('ahex', $(this).attr('title') || null, e.target);
1598                return false;
1599              },
1600            commitCallback = $.isFunction($arguments[1]) && $arguments[1] || null,
1601            liveCallback = $.isFunction($arguments[2]) && $arguments[2] || null,
1602            cancelCallback = $.isFunction($arguments[3]) && $arguments[3] || null,
1603            show =
1604              function()
1605              {
1606                color.current.val('ahex', color.active.val('ahex'));
1607                var attachIFrame = function()
1608                  {
1609                    if (!settings.window.expandable || $.support.boxModel) return;
1610                    var table = container.find('table:first');
1611                    container.before('<iframe/>');
1612                    container.prev().css({ width: table.width(), height: container.height(), opacity: 0, position: 'absolute', left: container.css("left"), top: container.css("top") });
1613                  };
1614                if (settings.window.expandable)
1615                {
1616                  $(document.body).children('div.jPicker.Container').css({zIndex:10});
1617                  container.css({zIndex:20});
1618                }
1619                switch (settings.window.effects.type)
1620                {
1621                  case 'fade':
1622                    container.fadeIn(settings.window.effects.speed.show, attachIFrame);
1623                    break;
1624                  case 'slide':
1625                    container.slideDown(settings.window.effects.speed.show, attachIFrame);
1626                    break;
1627                  case 'show':
1628                  default:
1629                    container.show(settings.window.effects.speed.show, attachIFrame);
1630                    break;
1631                }
1632              },
1633            hide =
1634              function()
1635              {
1636                var removeIFrame = function()
1637                  {
1638                    if (settings.window.expandable) container.css({ zIndex: 10 });
1639                    if (!settings.window.expandable || $.support.boxModel) return;
1640                    container.prev().remove();
1641                  };
1642                switch (settings.window.effects.type)
1643                {
1644                  case 'fade':
1645                    container.fadeOut(settings.window.effects.speed.hide, removeIFrame);
1646                    break;
1647                  case 'slide':
1648                    container.slideUp(settings.window.effects.speed.hide, removeIFrame);
1649                    break;
1650                  case 'show':
1651                  default:
1652                    container.hide(settings.window.effects.speed.hide, removeIFrame);
1653                    break;
1654                }
1655              },
1656            initialize =
1657              function()
1658              {
1659                var win = settings.window,
1660                    popup = win.expandable ? $($this).next().find('.Container:first') : null;
1661                container = win.expandable ? $('<div/>') : $($this);
1662                container.addClass('jPicker Container');
1663                if (win.expandable) container.hide();
1664                container.get(0).onselectstart = function(event){ if (event.target.nodeName.toLowerCase() !== 'input') return false; };
1665                // 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
1666                // this control really is tabular data, so I believe it is the right move
1667                var all = color.active.val('all');
1668                if (win.alphaPrecision < 0) win.alphaPrecision = 0;
1669                else if (win.alphaPrecision > 2) win.alphaPrecision = 2;
1670                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>';
1671                if (win.expandable)
1672                {
1673                  container.html(controlHtml);
1674                  if($(document.body).children('div.jPicker.Container').length==0)$(document.body).prepend(container);
1675                  else $(document.body).children('div.jPicker.Container:last').after(container);
1676                  container.mousedown(
1677                    function()
1678                    {
1679                      $(document.body).children('div.jPicker.Container').css({zIndex:10});
1680                      container.css({zIndex:20});
1681                    });
1682                  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
1683                    {
1684                      left:
1685                        win.position.x == 'left' ? (popup.offset().left - 530 - (win.position.y == 'center' ? 25 : 0)) + 'px' :
1686                        win.position.x == 'center' ? (popup.offset().left - 260) + 'px' :
1687                        win.position.x == 'right' ? (popup.offset().left - 10 + (win.position.y == 'center' ? 25 : 0)) + 'px' :
1688                        win.position.x == 'screenCenter' ? (($(document).width() >> 1) - 260) + 'px' : (popup.offset().left + parseInt(win.position.x)) + 'px',
1689                      position: 'absolute',
1690                      top: win.position.y == 'top' ? (popup.offset().top - 312) + 'px' :
1691                           win.position.y == 'center' ? (popup.offset().top - 156) + 'px' :
1692                           win.position.y == 'bottom' ? (popup.offset().top + 25) + 'px' : (popup.offset().top + parseInt(win.position.y)) + 'px'
1693                    });
1694                }
1695                else
1696                {
1697                  container = $($this);
1698                  container.html(controlHtml);
1699                }
1700                // initialize the objects to the source code just injected
1701                var tbody = container.find('tbody:first');
1702                colorMapDiv = tbody.find('div.Map:first');
1703                colorBarDiv = tbody.find('div.Bar:first');
1704                var MapMaps = colorMapDiv.find('span'),
1705                    BarMaps = colorBarDiv.find('span');
1706                colorMapL1 = MapMaps.filter('.Map1:first');
1707                colorMapL2 = MapMaps.filter('.Map2:first');
1708                colorMapL3 = MapMaps.filter('.Map3:first');
1709                colorBarL1 = BarMaps.filter('.Map1:first');
1710                colorBarL2 = BarMaps.filter('.Map2:first');
1711                colorBarL3 = BarMaps.filter('.Map3:first');
1712                colorBarL4 = BarMaps.filter('.Map4:first');
1713                colorBarL5 = BarMaps.filter('.Map5:first');
1714                colorBarL6 = BarMaps.filter('.Map6:first');
1715                // create color pickers and maps
1716                colorMap = new Slider(colorMapDiv,
1717                  {
1718                    map:
1719                    {
1720                      width: images.colorMap.width,
1721                      height: images.colorMap.height
1722                    },
1723                    arrow:
1724                    {
1725                      image: images.clientPath + images.colorMap.arrow.file,
1726                      width: images.colorMap.arrow.width,
1727                      height: images.colorMap.arrow.height
1728                    }
1729                  });
1730                colorMap.bind(mapValueChanged);
1731                colorBar = new Slider(colorBarDiv,
1732                  {
1733                    map:
1734                    {
1735                      width: images.colorBar.width,
1736                      height: images.colorBar.height
1737                    },
1738                    arrow:
1739                    {
1740                      image: images.clientPath + images.colorBar.arrow.file,
1741                      width: images.colorBar.arrow.width,
1742                      height: images.colorBar.arrow.height
1743                    }
1744                  });
1745                colorBar.bind(colorBarValueChanged);
1746                colorPicker = new ColorValuePicker(tbody, color.active, win.expandable && win.bindToInput ? win.input : null, win.alphaPrecision);
1747                var hex = all != null ? all.hex : null,
1748                    preview = tbody.find('.Preview'),
1749                    button = tbody.find('.Button');
1750                activePreview = preview.find('.Active:first').css({ backgroundColor: hex && '#' + hex || 'transparent' });
1751                currentPreview = preview.find('.Current:first').css({ backgroundColor: hex && '#' + hex || 'transparent' }).bind('click', currentClicked);
1752                setAlpha.call($this, currentPreview, Math.precision(color.current.val('a') * 100) / 255, 4);
1753                okButton = button.find('.Ok:first').bind('click', okClicked);
1754                cancelButton = button.find('.Cancel:first').bind('click', cancelClicked);
1755                grid = button.find('.Grid:first');
1756                setTimeout(
1757                  function()
1758                  {
1759                    setImg.call($this, colorMapL1, images.clientPath + 'Maps.png');
1760                    setImg.call($this, colorMapL2, images.clientPath + 'Maps.png');
1761                    setImg.call($this, colorMapL3, images.clientPath + 'map-opacity.png');
1762                    setImg.call($this, colorBarL1, images.clientPath + 'Bars.png');
1763                    setImg.call($this, colorBarL2, images.clientPath + 'Bars.png');
1764                    setImg.call($this, colorBarL3, images.clientPath + 'Bars.png');
1765                    setImg.call($this, colorBarL4, images.clientPath + 'Bars.png');
1766                    setImg.call($this, colorBarL5, images.clientPath + 'bar-opacity.png');
1767                    setImg.call($this, colorBarL6, images.clientPath + 'AlphaBar.png');
1768                    setImg.call($this, preview.find('div:first'), images.clientPath + 'preview-opacity.png');
1769                  }, 0);
1770                tbody.find('td.Radio input').bind('click', radioClicked);
1771                // initialize quick list
1772                if (color.quickList && color.quickList.length > 0)
1773                {
1774                  var html = '';
1775                  for (i = 0; i < color.quickList.length; i++)
1776                  {
1777                    /* if default colors are hex strings, change them to color objects */
1778                    if ((typeof (color.quickList[i])).toString().toLowerCase() == 'string') color.quickList[i] = new Color({ hex: color.quickList[i] });
1779                    var alpha = color.quickList[i].val('a');
1780                    var ahex = color.quickList[i].val('ahex');
1781                    if (!win.alphaSupport && ahex) ahex = ahex.substring(0, 6) + 'ff';
1782                    var quickHex = color.quickList[i].val('hex');
1783                    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>';
1784                  }
1785                  setImg.call($this, grid, images.clientPath + 'bar-opacity.png');
1786                  grid.html(html);
1787                  grid.find('.QuickColor').click(quickPickClicked);
1788                }
1789                setColorMode.call($this, settings.color.mode);
1790                color.active.bind(activeColorChanged);
1791                $.isFunction(liveCallback) && color.active.bind(liveCallback);
1792                color.current.bind(currentColorChanged);
1793                // bind to input
1794                if (win.expandable)
1795                {
1796                  $this.icon = popup.parents('.Icon:first');
1797                  iconColor = $this.icon.find('.Color:first').css({ backgroundColor: hex && '#' + hex || 'transparent' });
1798                  iconAlpha = $this.icon.find('.Alpha:first');
1799                  setImg.call($this, iconAlpha, images.clientPath + 'bar-opacity.png');
1800                  setAlpha.call($this, iconAlpha, Math.precision(((255 - (all != null ? all.a : 0)) * 100) / 255, 4));
1801                  iconImage = $this.icon.find('.Image:first').css(
1802                    {
1803                      backgroundImage: 'url(\'' + images.clientPath + images.picker.file + '\')'
1804                    }).bind('click', iconImageClicked);
1805                  if (win.bindToInput&&win.updateInputColor)
1806                    win.input.css(
1807                      {
1808                        backgroundColor: hex && '#' + hex || 'transparent',
1809                        color: all == null || all.v > 75 ? '#000000' : '#ffffff'
1810                      });
1811                  moveBar = tbody.find('.Move:first').bind('mousedown', moveBarMouseDown);
1812                  color.active.bind(expandableColorChanged);
1813                }
1814                else show.call($this);
1815              },
1816            destroy =
1817              function()
1818              {
1819                container.find('td.Radio input').unbind('click', radioClicked);
1820                currentPreview.unbind('click', currentClicked);
1821                cancelButton.unbind('click', cancelClicked);
1822                okButton.unbind('click', okClicked);
1823                if (settings.window.expandable)
1824                {
1825                  iconImage.unbind('click', iconImageClicked);
1826                  moveBar.unbind('mousedown', moveBarMouseDown);
1827                  $this.icon = null;
1828                }
1829                container.find('.QuickColor').unbind('click', quickPickClicked);
1830                colorMapDiv = null;
1831                colorBarDiv = null;
1832                colorMapL1 = null;
1833                colorMapL2 = null;
1834                colorMapL3 = null;
1835                colorBarL1 = null;
1836                colorBarL2 = null;
1837                colorBarL3 = null;
1838                colorBarL4 = null;
1839                colorBarL5 = null;
1840                colorBarL6 = null;
1841                colorMap.destroy();
1842                colorMap = null;
1843                colorBar.destroy();
1844                colorBar = null;
1845                colorPicker.destroy();
1846                colorPicker = null;
1847                activePreview = null;
1848                currentPreview = null;
1849                okButton = null;
1850                cancelButton = null;
1851                grid = null;
1852                commitCallback = null;
1853                cancelCallback = null;
1854                liveCallback = null;
1855                container.html('');
1856                for (i = 0; i < List.length; i++) if (List[i] == $this) List.splice(i, 1);
1857              },
1858            images = settings.images, // local copies for YUI compressor
1859            localization = settings.localization,
1860            color =
1861              {
1862                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') }),
1863                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') }),
1864                quickList: settings.color.quickList
1865              };
1866          $.extend(true, $this, // public properties, methods, and callbacks
1867            {
1868              commitCallback: commitCallback, // commitCallback function can be overridden to return the selected color to a method you specify when the user clicks "OK"
1869              liveCallback: liveCallback, // liveCallback function can be overridden to return the selected color to a method you specify in live mode (continuous update)
1870              cancelCallback: cancelCallback, // cancelCallback function can be overridden to a method you specify when the user clicks "Cancel"
1871              color: color,
1872              show: show,
1873              hide: hide,
1874              destroy: destroy // destroys this control entirely, removing all events and objects, and removing itself from the List
1875            });
1876          List.push($this);
1877          setTimeout(
1878            function()
1879            {
1880              initialize.call($this);
1881            }, 0);
1882        });
1883    };
1884  $.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 */
1885      {
1886      window:
1887        {
1888          title: null, /* any title for the jPicker window itself - displays "Drag Markers To Pick A Color" if left null */
1889          effects:
1890          {
1891            type: 'slide', /* effect used to show/hide an expandable picker. Acceptable values "slide", "show", "fade" */
1892            speed:
1893            {
1894              show: 'slow', /* duration of "show" effect. Acceptable values are "fast", "slow", or time in ms */
1895              hide: 'fast' /* duration of "hide" effect. Acceptable values are "fast", "slow", or time in ms */
1896            }
1897          },
1898          position:
1899          {
1900            x: 'screenCenter', /* acceptable values "left", "center", "right", "screenCenter", or relative px value */
1901            y: 'top' /* acceptable values "top", "bottom", "center", or relative px value */
1902          },
1903          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 */
1904          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) */
1905          alphaSupport: false, /* set to true to enable alpha picking */
1906          alphaPrecision: 0, /* set decimal precision for alpha percentage display - hex codes do not map directly to percentage integers - range 0-2 */
1907          updateInputColor: true /* set to false to prevent binded input colors from changing */
1908        },
1909      color:
1910        {
1911          mode: 'h', /* acceptabled values "h" (hue), "s" (saturation), "v" (value), "r" (red), "g" (green), "b" (blue), "a" (alpha) */
1912          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 */
1913          quickList: /* the quick pick color list */
1914            [
1915              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 */
1916              new Color({ h: 360, s: 66, v: 100 }),
1917              new Color({ h: 360, s: 100, v: 100 }),
1918              new Color({ h: 360, s: 100, v: 75 }),
1919              new Color({ h: 360, s: 100, v: 50 }),
1920              new Color({ h: 180, s: 0, v: 100 }),
1921              new Color({ h: 30, s: 33, v: 100 }),
1922              new Color({ h: 30, s: 66, v: 100 }),
1923              new Color({ h: 30, s: 100, v: 100 }),
1924              new Color({ h: 30, s: 100, v: 75 }),
1925              new Color({ h: 30, s: 100, v: 50 }),
1926              new Color({ h: 180, s: 0, v: 90 }),
1927              new Color({ h: 60, s: 33, v: 100 }),
1928              new Color({ h: 60, s: 66, v: 100 }),
1929              new Color({ h: 60, s: 100, v: 100 }),
1930              new Color({ h: 60, s: 100, v: 75 }),
1931              new Color({ h: 60, s: 100, v: 50 }),
1932              new Color({ h: 180, s: 0, v: 80 }),
1933              new Color({ h: 90, s: 33, v: 100 }),
1934              new Color({ h: 90, s: 66, v: 100 }),
1935              new Color({ h: 90, s: 100, v: 100 }),
1936              new Color({ h: 90, s: 100, v: 75 }),
1937              new Color({ h: 90, s: 100, v: 50 }),
1938              new Color({ h: 180, s: 0, v: 70 }),
1939              new Color({ h: 120, s: 33, v: 100 }),
1940              new Color({ h: 120, s: 66, v: 100 }),
1941              new Color({ h: 120, s: 100, v: 100 }),
1942              new Color({ h: 120, s: 100, v: 75 }),
1943              new Color({ h: 120, s: 100, v: 50 }),
1944              new Color({ h: 180, s: 0, v: 60 }),
1945              new Color({ h: 150, s: 33, v: 100 }),
1946              new Color({ h: 150, s: 66, v: 100 }),
1947              new Color({ h: 150, s: 100, v: 100 }),
1948              new Color({ h: 150, s: 100, v: 75 }),
1949              new Color({ h: 150, s: 100, v: 50 }),
1950              new Color({ h: 180, s: 0, v: 50 }),
1951              new Color({ h: 180, s: 33, v: 100 }),
1952              new Color({ h: 180, s: 66, v: 100 }),
1953              new Color({ h: 180, s: 100, v: 100 }),
1954              new Color({ h: 180, s: 100, v: 75 }),
1955              new Color({ h: 180, s: 100, v: 50 }),
1956              new Color({ h: 180, s: 0, v: 40 }),
1957              new Color({ h: 210, s: 33, v: 100 }),
1958              new Color({ h: 210, s: 66, v: 100 }),
1959              new Color({ h: 210, s: 100, v: 100 }),
1960              new Color({ h: 210, s: 100, v: 75 }),
1961              new Color({ h: 210, s: 100, v: 50 }),
1962              new Color({ h: 180, s: 0, v: 30 }),
1963              new Color({ h: 240, s: 33, v: 100 }),
1964              new Color({ h: 240, s: 66, v: 100 }),
1965              new Color({ h: 240, s: 100, v: 100 }),
1966              new Color({ h: 240, s: 100, v: 75 }),
1967              new Color({ h: 240, s: 100, v: 50 }),
1968              new Color({ h: 180, s: 0, v: 20 }),
1969              new Color({ h: 270, s: 33, v: 100 }),
1970              new Color({ h: 270, s: 66, v: 100 }),
1971              new Color({ h: 270, s: 100, v: 100 }),
1972              new Color({ h: 270, s: 100, v: 75 }),
1973              new Color({ h: 270, s: 100, v: 50 }),
1974              new Color({ h: 180, s: 0, v: 10 }),
1975              new Color({ h: 300, s: 33, v: 100 }),
1976              new Color({ h: 300, s: 66, v: 100 }),
1977              new Color({ h: 300, s: 100, v: 100 }),
1978              new Color({ h: 300, s: 100, v: 75 }),
1979              new Color({ h: 300, s: 100, v: 50 }),
1980              new Color({ h: 180, s: 0, v: 0 }),
1981              new Color({ h: 330, s: 33, v: 100 }),
1982              new Color({ h: 330, s: 66, v: 100 }),
1983              new Color({ h: 330, s: 100, v: 100 }),
1984              new Color({ h: 330, s: 100, v: 75 }),
1985              new Color({ h: 330, s: 100, v: 50 }),
1986              new Color()
1987            ]
1988        },
1989      images:
1990        {
1991          clientPath: '/jPicker/images/', /* Path to image files */
1992          colorMap:
1993          {
1994            width: 256,
1995            height: 256,
1996            arrow:
1997            {
1998              file: 'mappoint.gif', /* ColorMap arrow icon */
1999              width: 15,
2000              height: 15
2001            }
2002          },
2003          colorBar:
2004          {
2005            width: 20,
2006            height: 256,
2007            arrow:
2008            {
2009              file: 'rangearrows.gif', /* ColorBar arrow icon */
2010              width: 20,
2011              height: 7
2012            }
2013          },
2014          picker:
2015          {
2016            file: 'picker.gif', /* Color Picker icon */
2017            width: 25,
2018            height: 24
2019          }
2020        },
2021      localization: /* alter these to change the text presented by the picker (e.g. different language) */
2022        {
2023          text:
2024          {
2025            title: 'Drag Markers To Pick A Color',
2026            newColor: 'new',
2027            currentColor: 'current',
2028            ok: 'OK',
2029            cancel: 'Cancel'
2030          },
2031          tooltips:
2032          {
2033            colors:
2034            {
2035              newColor: 'New Color - Press &ldquo;OK&rdquo; To Commit',
2036              currentColor: 'Click To Revert To Original Color'
2037            },
2038            buttons:
2039            {
2040              ok: 'Commit To This Color Selection',
2041              cancel: 'Cancel And Revert To Original Color'
2042            },
2043            hue:
2044            {
2045              radio: 'Set To &ldquo;Hue&rdquo; Color Mode',
2046              textbox: 'Enter A &ldquo;Hue&rdquo; Value (0-360&deg;)'
2047            },
2048            saturation:
2049            {
2050              radio: 'Set To &ldquo;Saturation&rdquo; Color Mode',
2051              textbox: 'Enter A &ldquo;Saturation&rdquo; Value (0-100%)'
2052            },
2053            value:
2054            {
2055              radio: 'Set To &ldquo;Value&rdquo; Color Mode',
2056              textbox: 'Enter A &ldquo;Value&rdquo; Value (0-100%)'
2057            },
2058            red:
2059            {
2060              radio: 'Set To &ldquo;Red&rdquo; Color Mode',
2061              textbox: 'Enter A &ldquo;Red&rdquo; Value (0-255)'
2062            },
2063            green:
2064            {
2065              radio: 'Set To &ldquo;Green&rdquo; Color Mode',
2066              textbox: 'Enter A &ldquo;Green&rdquo; Value (0-255)'
2067            },
2068            blue:
2069            {
2070              radio: 'Set To &ldquo;Blue&rdquo; Color Mode',
2071              textbox: 'Enter A &ldquo;Blue&rdquo; Value (0-255)'
2072            },
2073            alpha:
2074            {
2075              radio: 'Set To &ldquo;Alpha&rdquo; Color Mode',
2076              textbox: 'Enter A &ldquo;Alpha&rdquo; Value (0-100)'
2077            },
2078            hex:
2079            {
2080              textbox: 'Enter A &ldquo;Hex&rdquo; Color Value (#000000-#ffffff)',
2081              alpha: 'Enter A &ldquo;Alpha&rdquo; Value (#00-#ff)'
2082            }
2083          }
2084        }
2085    };
2086})(jQuery, '1.1.6');
Note: See TracBrowser for help on using the repository browser.