| '.$langs->trans("MailTopic").' | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| '.$langs->trans("BackgroundColorByDefault").' | '; $htmlother->select_color($mil->bgcolor,'bgcolor','edit_mailing',0); print ' | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| '.$langs->trans("MailMessage").' '; print ' '.$langs->trans("CommonSubstitutions").': '; print '__ID__ = '.$langs->trans("IdRecord").' '; diff --git a/htdocs/core/class/html.formadmin.class.php b/htdocs/core/class/html.formadmin.class.php index e615e7d086e..a3181284491 100644 --- a/htdocs/core/class/html.formadmin.class.php +++ b/htdocs/core/class/html.formadmin.class.php @@ -320,42 +320,5 @@ class FormAdmin print ''; } - /** - * \brief Return colors list selector - * \param selected Color pre-selected - * \param htmlname Name of html select zone - */ -/* - function select_colors($selected='', $htmlname, $arrayofcolors='', $showcolorbox=1) - { - global $langs,$conf; - - if (! is_array($arrayofcolors)) $arrayofcolors=array('29527A','5229A3','A32929','7A367A','B1365F','0D7813'); - - //$selected=''; - if ($showcolorbox) print '
+
+
+
\ No newline at end of file
diff --git a/htdocs/includes/jquery/plugins/jpicker/ReadMe.txt b/htdocs/includes/jquery/plugins/jpicker/ReadMe.txt
new file mode 100755
index 00000000000..a2006d2f17a
--- /dev/null
+++ b/htdocs/includes/jquery/plugins/jpicker/ReadMe.txt
@@ -0,0 +1,47 @@
+jPicker 1.1.6
+
+jQuery Plugin for Photoshop style color picker
+
+Copyright (c) 2010 Christopher T. Tillman
+Digital Magic Productions, Inc. (http://www.digitalmagicpro.com/)
+MIT style license, FREE to use, alter, copy, sell, and especially ENHANCE
+
+Painstakingly ported from John Dyers' excellent work on his own color picker based on the Prototype framework.
+
+John Dyers' website: (http://johndyer.name)
+Color Picker page: (http://johndyer.name/post/2007/09/PhotoShop-like-JavaScript-Color-Picker.aspx)
+
+
+ jPicker is a fast, lightweight jQuery plugin for including an advanced color picker in your web projects.
+It has been painstakenly ported from John Dyers' awesome work on his picker using the Prototype framework.
+
+ jPicker supports all current browsers and has been extensively tested in Chrome, Firefox, IE5.5+, Safari,
+and Opera.
+
+ If you are updating a current version, you MUST always use the CSS and image files from the download as
+there may have been changes.
+
+ If you are moving from a V1.0.* version, you MUST read the docs below to implement some changes to the
+Color object returned by the callback functions.
+
+
+Known Issues
+______________
+Attaching multiple jPicker objects on a single page will slow performance.
+ jPicker creates a new instance of the picker for every element. Performance will suffer when binding dozens of instances.
+
+
+Coming Soon
+______________
+
+ Will consider supporting jQuery ThemeRoller CSS API for theming the UI if demand exists.
+
+Planned For Future Release
+______________
+
+ Move the jPicker object to a single instance that all selection instances point to.
+ - This will result in much faster operation and initialization for pages with multiple pickers.
+
+ Add activateCallback option for calling a callback function when the jPicker is activated or its binding is switched to a different picker element.
+
+ Add multiple window modes for picker operation, include modal, popup, windowed, and exclusive.
\ No newline at end of file
diff --git a/htdocs/includes/jquery/plugins/jpicker/css/jPicker-1.1.6.css b/htdocs/includes/jquery/plugins/jpicker/css/jPicker-1.1.6.css
new file mode 100755
index 00000000000..a4352ef4272
--- /dev/null
+++ b/htdocs/includes/jquery/plugins/jpicker/css/jPicker-1.1.6.css
@@ -0,0 +1,232 @@
+.jPicker .Icon {
+ display: inline-block;
+ height: 16px; /* change this value if using a different sized color picker icon */
+ position: relative; /* make this element an absolute positioning container */
+ text-align: left; /* make the zero width children position to the left of container */
+ width: 21px; /* change this value if using a different sized color picker icon */
+}
+.jPicker .Icon span.Color, .jPicker .Icon span.Alpha {
+ background-position: 2px 2px;
+ display: block;
+ height: 100%;
+ left: 0px;
+ position: absolute;
+ top: 0px;
+ width: 100%;
+}
+.jPicker .Icon span.Image {
+ background-repeat: no-repeat;
+ cursor: pointer;
+ display: block;
+ height: 100%;
+ left: 0px;
+ position: absolute;
+ top: 0px;
+ width: 100%;
+}
+.jPicker.Container {
+ color: #000;
+ z-index: 10;
+}
+table.jPicker {
+ background-color: #efefef;
+ border: 1px outset #666;
+ font-family: Arial, Helvetica, Sans-Serif;
+ font-size: 12px !important;
+ margin: 0px;
+ padding: 5px;
+ width: 545px;
+ z-index: 20;
+}
+.jPicker .Move {
+ background-color: #dddddd;
+ border-color: #fff #666 #666 #fff;
+ border-style: solid;
+ border-width: 1px;
+ cursor: move;
+ height: 12px;
+ padding: 0px;
+}
+.jPicker .Title {
+ font-size: 11px !important;
+ font-weight: bold;
+ margin: -2px 0px 0px 0px;
+ padding: 10px 0px 0px 0px;
+ text-align: center;
+ width: 100%;
+}
+.jPicker div.Map {
+ border-bottom: 2px solid #fff;
+ border-left: 2px solid #9a9a9a;
+ border-right: 2px solid #fff;
+ border-top: 2px solid #9a9a9a;
+ cursor: crosshair;
+ height: 260px; /* IE 6 incorrectly draws border inside the width and height instead of outside - We will fix this to 256px later */
+ margin: 0px 10px 10px 10px;
+ overflow: hidden; /* hide the overdraw of the Color Map icon when at edge of viewing box */
+ padding: 0px;
+ position: relative; /* make this element an absolute positioning container */
+ width: 260px; /* IE 6 incorrectly draws border inside the width and height instead of outside - We will fix this to 256px later */
+}
+.jPicker div[class="Map"] {
+ height: 256px; /* correct to 256px for browsers that support the "[class="xxx"]" selector (IE7+,Firefox,Safari,Chrome,Opera,etc.) */
+ width: 256px; /* correct to 256px for browsers that support the "[class="xxx"]" selector (IE7+,Firefox,Safari,Chrome,Opera,etc.) */
+}
+.jPicker div.Bar {
+ border-bottom: 2px solid #fff;
+ border-left: 2px solid #9a9a9a;
+ border-right: 2px solid #fff;
+ border-top: 2px solid #9a9a9a;
+ cursor: n-resize;
+ height: 260px; /* IE 6 incorrectly draws border inside the width and height instead of outside - We will fix this to 256px later */
+ margin: 12px 10px 0px 5px;
+ overflow: hidden;
+ padding: 0px;
+ position: relative;
+ width: 24px; /* IE 6 incorrectly draws border inside the width and height instead of outside - We will fix this to 20px later */
+}
+.jPicker div[class="Bar"] {
+ height: 256px; /* correct to 256px for browsers that support the "[class="xxx"]" selector (IE7+,Firefox,Safari,Chrome,Opera,etc.) */
+ width: 20px; /* correct to 20px for browsers that support the "[class="xxx"]" selector (IE7+,Firefox,Safari,Chrome,Opera,etc.) */
+}
+.jPicker .Map .Map1, .jPicker .Map .Map2, .jPicker .Map .Map3, .jPicker .Bar .Map1, .jPicker .Bar .Map2, .jPicker .Bar .Map3, .jPicker .Bar .Map4, .jPicker .Bar .Map5, .jPicker .Bar .Map6 {
+ background-color: transparent;
+ background-image: none;
+ display: block;
+ left: 0px;
+ position: absolute;
+ top: 0px;
+}
+.jPicker .Map .Map1, .jPicker .Map .Map2, .jPicker .Map .Map3 {
+ height: 2596px;
+ width: 256px; /* must specify pixel width. IE7/8 Quirks mode ignores opacity for an absolutely positioned item in a relative container with "overflow: visible". The marker in the colorBar
+ would not be drawn if its overflow is set to hidden. */
+}
+.jPicker .Bar .Map1, .jPicker .Bar .Map2, .jPicker .Bar .Map3, .jPicker .Bar .Map4 {
+ height: 3896px;
+ width: 20px; /* must specify pixel width. IE7/8 Quirks mode ignores opacity for an absolutely positioned item in a relative container with "overflow: visible". The marker in the colorBar
+ would not be drawn if its overflow is set to hidden. */
+}
+.jPicker .Bar .Map5, .jPicker .Bar .Map6 {
+ height: 256px;
+ width: 20px; /* must specify pixel width. IE7/8 Quirks mode ignores opacity for an absolutely positioned item in a relative container with "overflow: visible". The marker in the colorBar
+ would not be drawn if its overflow is set to hidden. */
+}
+.jPicker .Map .Map1, .jPicker .Map .Map2, .jPicker .Bar .Map6 {
+ background-repeat: no-repeat;
+}
+.jPicker .Map .Map3, .jPicker .Bar .Map5 {
+ background-repeat: repeat;
+}
+.jPicker .Bar .Map1, .jPicker .Bar .Map2, .jPicker .Bar .Map3, .jPicker .Bar .Map4 {
+ background-repeat: repeat-x;
+}
+.jPicker .Map .Arrow {
+ display: block;
+ position: absolute;
+}
+.jPicker .Bar .Arrow {
+ display: block;
+ left: 0px; /* (arrow width / 2) - (element width / 2) - position arrows' center in elements' center */
+ position: absolute;
+}
+.jPicker .Preview {
+ font-size: 9px;
+ padding: 5px 0px 0px 0px;
+ text-align: center;
+}
+.jPicker .Preview div {
+ border: 2px inset #eee;
+ height: 62px;
+ margin: 0px auto;
+ padding: 0px;
+ width: 62px;
+}
+.jPicker .Preview div span {
+ border: 1px solid #000;
+ display: block;
+ height: 30px;
+ margin: 0px auto;
+ padding: 0px;
+ width: 60px;
+}
+.jPicker .Preview .Active {
+ border-bottom-width: 0px;
+}
+.jPicker .Preview .Current {
+ border-top-width: 0px;
+ cursor: pointer;
+}
+.jPicker input {
+ font-size: 13px;
+}
+.jPicker .Button {
+ text-align: center;
+ padding: 0px 4px;
+ width: 115px;
+}
+.jPicker .Button input {
+ padding: 2px 0px;
+ width: 100px;
+}
+.jPicker .Button .Ok {
+ margin: 12px 0px 5px 0px;
+}
+.jPicker td {
+ margin: 0px;
+ padding: 0px;
+}
+.jPicker td.Radio {
+ margin: 0px;
+ padding: 0px;
+ width: 31px;
+}
+.jPicker td.Radio input {
+ margin: 0px 5px 0px 0px;
+ padding: 0px;
+}
+.jPicker td.Text {
+ font-size: 12px !important;
+ height: 22px;
+ margin: 0px;
+ padding: 0px;
+ text-align: left;
+ width: 70px;
+}
+.jPicker tr.Hex td.Text {
+ width: 100px;
+}
+.jPicker td.Text input {
+ background-color: #fff;
+ border: 1px inset #aaa;
+ height: 19px;
+ margin: 0px 0px 0px 5px;
+ text-align: left;
+ width: 30px;
+}
+.jPicker td[class="Text"] input {
+ height: 15px;
+}
+.jPicker tr.Hex td.Text input.Hex {
+ width: 50px;
+}
+.jPicker tr.Hex td.Text input.AHex {
+ width: 20px;
+}
+.jPicker .Grid {
+ text-align: center;
+ width: 114px;
+}
+.jPicker .Grid span.QuickColor {
+ border: 1px inset #aaa;
+ cursor: pointer;
+ display: inline-block;
+ height: 15px;
+ line-height: 15px;
+ margin: 0px;
+ padding: 0px;
+ width: 19px;
+}
+.jPicker .Grid span[class="QuickColor"] {
+ width: 17px;
+}
\ No newline at end of file
diff --git a/htdocs/includes/jquery/plugins/jpicker/css/jPicker-1.1.6.min.css b/htdocs/includes/jquery/plugins/jpicker/css/jPicker-1.1.6.min.css
new file mode 100755
index 00000000000..c131616fb9d
--- /dev/null
+++ b/htdocs/includes/jquery/plugins/jpicker/css/jPicker-1.1.6.min.css
@@ -0,0 +1 @@
+.jPicker .Icon{display:inline-block;height:24px;position:relative;text-align:left;width:25px}.jPicker .Icon span.Color,.jPicker .Icon span.Alpha{background-position:2px 2px;display:block;height:100%;left:0;position:absolute;top:0;width:100%}.jPicker .Icon span.Image{background-repeat:no-repeat;cursor:pointer;display:block;height:100%;left:0;position:absolute;top:0;width:100%}.jPicker.Container{color:#000;z-index:10}table.jPicker{background-color:#efefef;border:1px outset #666;font-family:Arial,Helvetica,Sans-Serif;font-size:12px!important;margin:0;padding:5px;width:545px;z-index:20}.jPicker .Move{background-color:#ddd;border-color:#fff #666 #666 #fff;border-style:solid;border-width:1px;cursor:move;height:12px;padding:0}.jPicker .Title{font-size:11px!important;font-weight:bold;margin:-2px 0 0 0;padding:10px 0 0 0;text-align:center;width:100%}.jPicker div.Map{border-bottom:2px solid #fff;border-left:2px solid #9a9a9a;border-right:2px solid #fff;border-top:2px solid #9a9a9a;cursor:crosshair;height:260px;margin:0 10px 10px 10px;overflow:hidden;padding:0;position:relative;width:260px}.jPicker div[class="Map"]{height:256px;width:256px}.jPicker div.Bar{border-bottom:2px solid #fff;border-left:2px solid #9a9a9a;border-right:2px solid #fff;border-top:2px solid #9a9a9a;cursor:n-resize;height:260px;margin:12px 10px 0 5px;overflow:hidden;padding:0;position:relative;width:24px}.jPicker div[class="Bar"]{height:256px;width:20px}.jPicker .Map .Map1,.jPicker .Map .Map2,.jPicker .Map .Map3,.jPicker .Bar .Map1,.jPicker .Bar .Map2,.jPicker .Bar .Map3,.jPicker .Bar .Map4,.jPicker .Bar .Map5,.jPicker .Bar .Map6{background-color:transparent;background-image:none;display:block;left:0;position:absolute;top:0}.jPicker .Map .Map1,.jPicker .Map .Map2,.jPicker .Map .Map3{height:2596px;width:256px}.jPicker .Bar .Map1,.jPicker .Bar .Map2,.jPicker .Bar .Map3,.jPicker .Bar .Map4{height:3896px;width:20px}.jPicker .Bar .Map5,.jPicker .Bar .Map6{height:256px;width:20px}.jPicker .Map .Map1,.jPicker .Map .Map2,.jPicker .Bar .Map6{background-repeat:no-repeat}.jPicker .Map .Map3,.jPicker .Bar .Map5{background-repeat:repeat}.jPicker .Bar .Map1,.jPicker .Bar .Map2,.jPicker .Bar .Map3,.jPicker .Bar .Map4{background-repeat:repeat-x}.jPicker .Map .Arrow{display:block;position:absolute}.jPicker .Bar .Arrow{display:block;left:0;position:absolute}.jPicker .Preview{font-size:9px;padding:5px 0 0 0;text-align:center}.jPicker .Preview div{border:2px inset #eee;height:62px;margin:0 auto;padding:0;width:62px}.jPicker .Preview div span{border:1px solid #000;display:block;height:30px;margin:0 auto;padding:0;width:60px}.jPicker .Preview .Active{border-bottom-width:0}.jPicker .Preview .Current{border-top-width:0;cursor:pointer}.jPicker input{font-size:13px}.jPicker .Button{text-align:center;padding:0 4px;width:115px}.jPicker .Button input{padding:2px 0;width:100px}.jPicker .Button .Ok{margin:12px 0 5px 0}.jPicker td{margin:0;padding:0}.jPicker td.Radio{margin:0;padding:0;width:31px}.jPicker td.Radio input{margin:0 5px 0 0;padding:0}.jPicker td.Text{font-size:12px!important;height:22px;margin:0;padding:0;text-align:left;width:70px}.jPicker tr.Hex td.Text{width:100px}.jPicker td.Text input{background-color:#fff;border:1px inset #aaa;height:19px;margin:0 0 0 5px;text-align:left;width:30px}.jPicker td[class="Text"] input{height:15px}.jPicker tr.Hex td.Text input.Hex{width:50px}.jPicker tr.Hex td.Text input.AHex{width:20px}.jPicker .Grid{text-align:center;width:114px}.jPicker .Grid span.QuickColor{border:1px inset #aaa;cursor:pointer;display:inline-block;height:15px;line-height:15px;margin:0;padding:0;width:19px}.jPicker .Grid span[class="QuickColor"]{width:17px}
\ No newline at end of file
diff --git a/htdocs/includes/jquery/plugins/jpicker/images/AlphaBar.png b/htdocs/includes/jquery/plugins/jpicker/images/AlphaBar.png
new file mode 100755
index 00000000000..2950daeb877
Binary files /dev/null and b/htdocs/includes/jquery/plugins/jpicker/images/AlphaBar.png differ
diff --git a/htdocs/includes/jquery/plugins/jpicker/images/Bars.png b/htdocs/includes/jquery/plugins/jpicker/images/Bars.png
new file mode 100755
index 00000000000..80eb2bbe76b
Binary files /dev/null and b/htdocs/includes/jquery/plugins/jpicker/images/Bars.png differ
diff --git a/htdocs/includes/jquery/plugins/jpicker/images/Maps.png b/htdocs/includes/jquery/plugins/jpicker/images/Maps.png
new file mode 100755
index 00000000000..853d38c68e2
Binary files /dev/null and b/htdocs/includes/jquery/plugins/jpicker/images/Maps.png differ
diff --git a/htdocs/includes/jquery/plugins/jpicker/images/NoColor.png b/htdocs/includes/jquery/plugins/jpicker/images/NoColor.png
new file mode 100755
index 00000000000..5dc47670ef4
Binary files /dev/null and b/htdocs/includes/jquery/plugins/jpicker/images/NoColor.png differ
diff --git a/htdocs/includes/jquery/plugins/jpicker/images/Thumbs.db b/htdocs/includes/jquery/plugins/jpicker/images/Thumbs.db
new file mode 100755
index 00000000000..27621da65d4
Binary files /dev/null and b/htdocs/includes/jquery/plugins/jpicker/images/Thumbs.db differ
diff --git a/htdocs/includes/jquery/plugins/jpicker/images/bar-opacity.png b/htdocs/includes/jquery/plugins/jpicker/images/bar-opacity.png
new file mode 100755
index 00000000000..e42ad081260
Binary files /dev/null and b/htdocs/includes/jquery/plugins/jpicker/images/bar-opacity.png differ
diff --git a/htdocs/includes/jquery/plugins/jpicker/images/map-opacity.png b/htdocs/includes/jquery/plugins/jpicker/images/map-opacity.png
new file mode 100755
index 00000000000..6756cee6df1
Binary files /dev/null and b/htdocs/includes/jquery/plugins/jpicker/images/map-opacity.png differ
diff --git a/htdocs/includes/jquery/plugins/jpicker/images/mappoint.gif b/htdocs/includes/jquery/plugins/jpicker/images/mappoint.gif
new file mode 100755
index 00000000000..f5f855745cf
Binary files /dev/null and b/htdocs/includes/jquery/plugins/jpicker/images/mappoint.gif differ
diff --git a/htdocs/includes/jquery/plugins/jpicker/images/picker.gif b/htdocs/includes/jquery/plugins/jpicker/images/picker.gif
new file mode 100755
index 00000000000..374d891042f
Binary files /dev/null and b/htdocs/includes/jquery/plugins/jpicker/images/picker.gif differ
diff --git a/htdocs/includes/jquery/plugins/jpicker/images/preview-opacity.png b/htdocs/includes/jquery/plugins/jpicker/images/preview-opacity.png
new file mode 100755
index 00000000000..0dd9a2f8b9d
Binary files /dev/null and b/htdocs/includes/jquery/plugins/jpicker/images/preview-opacity.png differ
diff --git a/htdocs/includes/jquery/plugins/jpicker/images/rangearrows.gif b/htdocs/includes/jquery/plugins/jpicker/images/rangearrows.gif
new file mode 100755
index 00000000000..9fe89f472d1
Binary files /dev/null and b/htdocs/includes/jquery/plugins/jpicker/images/rangearrows.gif differ
diff --git a/htdocs/includes/jquery/plugins/jpicker/jPicker.css b/htdocs/includes/jquery/plugins/jpicker/jPicker.css
new file mode 100755
index 00000000000..f63f8e5fb7d
--- /dev/null
+++ b/htdocs/includes/jquery/plugins/jpicker/jPicker.css
@@ -0,0 +1,17 @@
+@media all
+{
+ #jPicker { margin: 0px 8px; text-align: left; }
+ #jPicker ul { font-size: 15px; margin: 0px 0px 0px 15px; padding: 0px; }
+ #jPicker ul li { list-style: disc; padding: 2px 0px; }
+ #jPicker ul li ul { margin-bottom: 10px; }
+ #jPicker ul li ul li { list-style: circle; }
+ #jPicker p { font-size: 13px; padding: 0px 10px; }
+ #jPicker hr { clear: both; }
+ #jPicker h2.jPicker { font-size: 16px; padding: 20px 10px; }
+ #jPicker code { color: #8bd; font-size: 14px; font-weight: bold; }
+ #jPicker pre { background: #eee; border: 1px solid #000; color: #000; display: block; font-size: 11px; margin: 10px 5px; padding: 5px; }
+ #jPicker span { font-size: 13px; text-align: center; }
+ #jPicker a { color: #ff8050; }
+ #jPicker input { font-size: 13px; padding: 2px 5px; }
+ #jPicker h2 { font-size: 16px; margin: 10px 0px; }
+}
\ No newline at end of file
diff --git a/htdocs/includes/jquery/plugins/jpicker/jpicker-1.1.6.js b/htdocs/includes/jquery/plugins/jpicker/jpicker-1.1.6.js
new file mode 100755
index 00000000000..3392159ffcb
--- /dev/null
+++ b/htdocs/includes/jquery/plugins/jpicker/jpicker-1.1.6.js
@@ -0,0 +1,2086 @@
+/*
+ * jPicker 1.1.6
+ *
+ * jQuery Plugin for Photoshop style color picker
+ *
+ * Copyright (c) 2010 Christopher T. Tillman
+ * Digital Magic Productions, Inc. (http://www.digitalmagicpro.com/)
+ * MIT style license, FREE to use, alter, copy, sell, and especially ENHANCE
+ *
+ * Painstakingly ported from John Dyers' excellent work on his own color picker based on the Prototype framework.
+ *
+ * John Dyers' website: (http://johndyer.name)
+ * Color Picker page: (http://johndyer.name/post/2007/09/PhotoShop-like-JavaScript-Color-Picker.aspx)
+ *
+ */
+(function($, version)
+{
+ Math.precision = function(value, precision)
+ {
+ if (precision === undefined) precision = 0;
+ return Math.round(value * Math.pow(10, precision)) / Math.pow(10, precision);
+ };
+ var Slider = // encapsulate slider functionality for the ColorMap and ColorBar - could be useful to use a jQuery UI draggable for this with certain extensions
+ function(bar, options)
+ {
+ var $this = this, // private properties, methods, and events - keep these variables and classes invisible to outside code
+ arrow = bar.find('img:first'), // the arrow image to drag
+ minX = 0,
+ maxX = 100,
+ rangeX = 100,
+ minY = 0,
+ maxY = 100,
+ rangeY = 100,
+ x = 0,
+ y = 0,
+ offset,
+ timeout,
+ changeEvents = new Array(),
+ fireChangeEvents =
+ function(context)
+ {
+ for (var i = 0; i < changeEvents.length; i++) changeEvents[i].call($this, $this, context);
+ },
+ mouseDown = // bind the mousedown to the bar not the arrow for quick snapping to the clicked location
+ function(e)
+ {
+ var off = bar.offset();
+ offset = { l: off.left | 0, t: off.top | 0 };
+ clearTimeout(timeout);
+ timeout = setTimeout( // using setTimeout for visual updates - once the style is updated the browser will re-render internally allowing the next Javascript to run
+ function()
+ {
+ setValuesFromMousePosition.call($this, e);
+ }, 0);
+ // Bind mousemove and mouseup event to the document so it responds when dragged of of the bar - we will unbind these when on mouseup to save processing
+ $(document).bind('mousemove', mouseMove).bind('mouseup', mouseUp);
+ e.preventDefault(); // don't try to select anything or drag the image to the desktop
+ },
+ mouseMove = // set the values as the mouse moves
+ function(e)
+ {
+ clearTimeout(timeout);
+ timeout = setTimeout(
+ function()
+ {
+ setValuesFromMousePosition.call($this, e);
+ }, 0);
+ e.stopPropagation();
+ e.preventDefault();
+ return false;
+ },
+ mouseUp = // unbind the document events - they aren't needed when not dragging
+ function(e)
+ {
+ $(document).unbind('mouseup', mouseUp).unbind('mousemove', mouseMove);
+ e.stopPropagation();
+ e.preventDefault();
+ return false;
+ },
+ setValuesFromMousePosition = // calculate mouse position and set value within the current range
+ function(e)
+ {
+ var locX = e.pageX - offset.l,
+ locY = e.pageY - offset.t,
+ barW = bar.w, // local copies for YUI compressor
+ barH = bar.h;
+ // keep the arrow within the bounds of the bar
+ if (locX < 0) locX = 0;
+ else if (locX > barW) locX = barW;
+ if (locY < 0) locY = 0;
+ else if (locY > barH) locY = barH;
+ val.call($this, 'xy', { x: ((locX / barW) * rangeX) + minX, y: ((locY / barH) * rangeY) + minY });
+ },
+ draw =
+ function()
+ {
+ var arrowOffsetX = 0,
+ arrowOffsetY = 0,
+ barW = bar.w,
+ barH = bar.h,
+ arrowW = arrow.w,
+ arrowH = arrow.h;
+ setTimeout(
+ function()
+ {
+ if (rangeX > 0) // range is greater than zero
+ {
+ // constrain to bounds
+ if (x == maxX) arrowOffsetX = barW;
+ else arrowOffsetX = ((x / rangeX) * barW) | 0;
+ }
+ if (rangeY > 0) // range is greater than zero
+ {
+ // constrain to bounds
+ if (y == maxY) arrowOffsetY = barH;
+ else arrowOffsetY = ((y / rangeY) * barH) | 0;
+ }
+ // if arrow width is greater than bar width, center arrow and prevent horizontal dragging
+ if (arrowW >= barW) arrowOffsetX = (barW >> 1) - (arrowW >> 1); // number >> 1 - superfast bitwise divide by two and truncate (move bits over one bit discarding lowest)
+ else arrowOffsetX -= arrowW >> 1;
+ // if arrow height is greater than bar height, center arrow and prevent vertical dragging
+ if (arrowH >= barH) arrowOffsetY = (barH >> 1) - (arrowH >> 1);
+ else arrowOffsetY -= arrowH >> 1;
+ // set the arrow position based on these offsets
+ arrow.css({ left: arrowOffsetX + 'px', top: arrowOffsetY + 'px' });
+ }, 0);
+ },
+ val =
+ function(name, value, context)
+ {
+ var set = value !== undefined;
+ if (!set)
+ {
+ if (name === undefined || name == null) name = 'xy';
+ switch (name.toLowerCase())
+ {
+ case 'x': return x;
+ case 'y': return y;
+ case 'xy':
+ default: return { x: x, y: y };
+ }
+ }
+ if (context != null && context == $this) return;
+ var changed = false,
+ newX,
+ newY;
+ if (name == null) name = 'xy';
+ switch (name.toLowerCase())
+ {
+ case 'x':
+ newX = value && (value.x && value.x | 0 || value | 0) || 0;
+ break;
+ case 'y':
+ newY = value && (value.y && value.y | 0 || value | 0) || 0;
+ break;
+ case 'xy':
+ default:
+ newX = value && value.x && value.x | 0 || 0;
+ newY = value && value.y && value.y | 0 || 0;
+ break;
+ }
+ if (newX != null)
+ {
+ if (newX < minX) newX = minX;
+ else if (newX > maxX) newX = maxX;
+ if (x != newX)
+ {
+ x = newX;
+ changed = true;
+ }
+ }
+ if (newY != null)
+ {
+ if (newY < minY) newY = minY;
+ else if (newY > maxY) newY = maxY;
+ if (y != newY)
+ {
+ y = newY;
+ changed = true;
+ }
+ }
+ changed && fireChangeEvents.call($this, context || $this);
+ },
+ range =
+ function (name, value)
+ {
+ var set = value !== undefined;
+ if (!set)
+ {
+ if (name === undefined || name == null) name = 'all';
+ switch (name.toLowerCase())
+ {
+ case 'minx': return minX;
+ case 'maxx': return maxX;
+ case 'rangex': return { minX: minX, maxX: maxX, rangeX: rangeX };
+ case 'miny': return minY;
+ case 'maxy': return maxY;
+ case 'rangey': return { minY: minY, maxY: maxY, rangeY: rangeY };
+ case 'all':
+ default: return { minX: minX, maxX: maxX, rangeX: rangeX, minY: minY, maxY: maxY, rangeY: rangeY };
+ }
+ }
+ var changed = false,
+ newMinX,
+ newMaxX,
+ newMinY,
+ newMaxY;
+ if (name == null) name = 'all';
+ switch (name.toLowerCase())
+ {
+ case 'minx':
+ newMinX = value && (value.minX && value.minX | 0 || value | 0) || 0;
+ break;
+ case 'maxx':
+ newMaxX = value && (value.maxX && value.maxX | 0 || value | 0) || 0;
+ break;
+ case 'rangex':
+ newMinX = value && value.minX && value.minX | 0 || 0;
+ newMaxX = value && value.maxX && value.maxX | 0 || 0;
+ break;
+ case 'miny':
+ newMinY = value && (value.minY && value.minY | 0 || value | 0) || 0;
+ break;
+ case 'maxy':
+ newMaxY = value && (value.maxY && value.maxY | 0 || value | 0) || 0;
+ break;
+ case 'rangey':
+ newMinY = value && value.minY && value.minY | 0 || 0;
+ newMaxY = value && value.maxY && value.maxY | 0 || 0;
+ break;
+ case 'all':
+ default:
+ newMinX = value && value.minX && value.minX | 0 || 0;
+ newMaxX = value && value.maxX && value.maxX | 0 || 0;
+ newMinY = value && value.minY && value.minY | 0 || 0;
+ newMaxY = value && value.maxY && value.maxY | 0 || 0;
+ break;
+ }
+ if (newMinX != null && minX != newMinX)
+ {
+ minX = newMinX;
+ rangeX = maxX - minX;
+ }
+ if (newMaxX != null && maxX != newMaxX)
+ {
+ maxX = newMaxX;
+ rangeX = maxX - minX;
+ }
+ if (newMinY != null && minY != newMinY)
+ {
+ minY = newMinY;
+ rangeY = maxY - minY;
+ }
+ if (newMaxY != null && maxY != newMaxY)
+ {
+ maxY = newMaxY;
+ rangeY = maxY - minY;
+ }
+ },
+ bind =
+ function (callback)
+ {
+ if ($.isFunction(callback)) changeEvents.push(callback);
+ },
+ unbind =
+ function (callback)
+ {
+ if (!$.isFunction(callback)) return;
+ var i;
+ while ((i = $.inArray(callback, changeEvents)) != -1) changeEvents.splice(i, 1);
+ },
+ destroy =
+ function()
+ {
+ // unbind all possible events and null objects
+ $(document).unbind('mouseup', mouseUp).unbind('mousemove', mouseMove);
+ bar.unbind('mousedown', mouseDown);
+ bar = null;
+ arrow = null;
+ changeEvents = null;
+ };
+ $.extend(true, $this, // public properties, methods, and event bindings - these we need to access from other controls
+ {
+ val: val,
+ range: range,
+ bind: bind,
+ unbind: unbind,
+ destroy: destroy
+ });
+ // initialize this control
+ arrow.src = options.arrow && options.arrow.image;
+ arrow.w = options.arrow && options.arrow.width || arrow.width();
+ arrow.h = options.arrow && options.arrow.height || arrow.height();
+ bar.w = options.map && options.map.width || bar.width();
+ bar.h = options.map && options.map.height || bar.height();
+ // bind mousedown event
+ bar.bind('mousedown', mouseDown);
+ bind.call($this, draw);
+ },
+ ColorValuePicker = // controls for all the input elements for the typing in color values
+ function(picker, color, bindedHex, alphaPrecision)
+ {
+ var $this = this, // private properties and methods
+ inputs = picker.find('td.Text input'),
+ red = inputs.eq(3),
+ green = inputs.eq(4),
+ blue = inputs.eq(5),
+ alpha = inputs.length > 7 ? inputs.eq(6) : null,
+ hue = inputs.eq(0),
+ saturation = inputs.eq(1),
+ value = inputs.eq(2),
+ hex = inputs.eq(inputs.length > 7 ? 7 : 6),
+ ahex = inputs.length > 7 ? inputs.eq(8) : null,
+ keyDown = // input box key down - use arrows to alter color
+ function(e)
+ {
+ if (e.target.value == '' && e.target != hex.get(0) && (bindedHex != null && e.target != bindedHex.get(0) || bindedHex == null)) return;
+ if (!validateKey(e)) return e;
+ switch (e.target)
+ {
+ case red.get(0):
+ switch (e.keyCode)
+ {
+ case 38:
+ red.val(setValueInRange.call($this, (red.val() << 0) + 1, 0, 255));
+ color.val('r', red.val(), e.target);
+ return false;
+ case 40:
+ red.val(setValueInRange.call($this, (red.val() << 0) - 1, 0, 255));
+ color.val('r', red.val(), e.target);
+ return false;
+ }
+ break;
+ case green.get(0):
+ switch (e.keyCode)
+ {
+ case 38:
+ green.val(setValueInRange.call($this, (green.val() << 0) + 1, 0, 255));
+ color.val('g', green.val(), e.target);
+ return false;
+ case 40:
+ green.val(setValueInRange.call($this, (green.val() << 0) - 1, 0, 255));
+ color.val('g', green.val(), e.target);
+ return false;
+ }
+ break;
+ case blue.get(0):
+ switch (e.keyCode)
+ {
+ case 38:
+ blue.val(setValueInRange.call($this, (blue.val() << 0) + 1, 0, 255));
+ color.val('b', blue.val(), e.target);
+ return false;
+ case 40:
+ blue.val(setValueInRange.call($this, (blue.val() << 0) - 1, 0, 255));
+ color.val('b', blue.val(), e.target);
+ return false;
+ }
+ break;
+ case alpha && alpha.get(0):
+ switch (e.keyCode)
+ {
+ case 38:
+ alpha.val(setValueInRange.call($this, parseFloat(alpha.val()) + 1, 0, 100));
+ color.val('a', Math.precision((alpha.val() * 255) / 100, alphaPrecision), e.target);
+ return false;
+ case 40:
+ alpha.val(setValueInRange.call($this, parseFloat(alpha.val()) - 1, 0, 100));
+ color.val('a', Math.precision((alpha.val() * 255) / 100, alphaPrecision), e.target);
+ return false;
+ }
+ break;
+ case hue.get(0):
+ switch (e.keyCode)
+ {
+ case 38:
+ hue.val(setValueInRange.call($this, (hue.val() << 0) + 1, 0, 360));
+ color.val('h', hue.val(), e.target);
+ return false;
+ case 40:
+ hue.val(setValueInRange.call($this, (hue.val() << 0) - 1, 0, 360));
+ color.val('h', hue.val(), e.target);
+ return false;
+ }
+ break;
+ case saturation.get(0):
+ switch (e.keyCode)
+ {
+ case 38:
+ saturation.val(setValueInRange.call($this, (saturation.val() << 0) + 1, 0, 100));
+ color.val('s', saturation.val(), e.target);
+ return false;
+ case 40:
+ saturation.val(setValueInRange.call($this, (saturation.val() << 0) - 1, 0, 100));
+ color.val('s', saturation.val(), e.target);
+ return false;
+ }
+ break;
+ case value.get(0):
+ switch (e.keyCode)
+ {
+ case 38:
+ value.val(setValueInRange.call($this, (value.val() << 0) + 1, 0, 100));
+ color.val('v', value.val(), e.target);
+ return false;
+ case 40:
+ value.val(setValueInRange.call($this, (value.val() << 0) - 1, 0, 100));
+ color.val('v', value.val(), e.target);
+ return false;
+ }
+ break;
+ }
+ },
+ keyUp = // input box key up - validate value and set color
+ function(e)
+ {
+ if (e.target.value == '' && e.target != hex.get(0) && (bindedHex != null && e.target != bindedHex.get(0) || bindedHex == null)) return;
+ if (!validateKey(e)) return e;
+ switch (e.target)
+ {
+ case red.get(0):
+ red.val(setValueInRange.call($this, red.val(), 0, 255));
+ color.val('r', red.val(), e.target);
+ break;
+ case green.get(0):
+ green.val(setValueInRange.call($this, green.val(), 0, 255));
+ color.val('g', green.val(), e.target);
+ break;
+ case blue.get(0):
+ blue.val(setValueInRange.call($this, blue.val(), 0, 255));
+ color.val('b', blue.val(), e.target);
+ break;
+ case alpha && alpha.get(0):
+ alpha.val(setValueInRange.call($this, alpha.val(), 0, 100));
+ color.val('a', Math.precision((alpha.val() * 255) / 100, alphaPrecision), e.target);
+ break;
+ case hue.get(0):
+ hue.val(setValueInRange.call($this, hue.val(), 0, 360));
+ color.val('h', hue.val(), e.target);
+ break;
+ case saturation.get(0):
+ saturation.val(setValueInRange.call($this, saturation.val(), 0, 100));
+ color.val('s', saturation.val(), e.target);
+ break;
+ case value.get(0):
+ value.val(setValueInRange.call($this, value.val(), 0, 100));
+ color.val('v', value.val(), e.target);
+ break;
+ case hex.get(0):
+ hex.val(hex.val().replace(/[^a-fA-F0-9]/g, '').toLowerCase().substring(0, 6));
+ bindedHex && bindedHex.val(hex.val());
+ color.val('hex', hex.val() != '' ? hex.val() : null, e.target);
+ break;
+ case bindedHex && bindedHex.get(0):
+ bindedHex.val(bindedHex.val().replace(/[^a-fA-F0-9]/g, '').toLowerCase().substring(0, 6));
+ hex.val(bindedHex.val());
+ color.val('hex', bindedHex.val() != '' ? bindedHex.val() : null, e.target);
+ break;
+ case ahex && ahex.get(0):
+ ahex.val(ahex.val().replace(/[^a-fA-F0-9]/g, '').toLowerCase().substring(0, 2));
+ color.val('a', ahex.val() != null ? parseInt(ahex.val(), 16) : null, e.target);
+ break;
+ }
+ },
+ blur = // input box blur - reset to original if value empty
+ function(e)
+ {
+ if (color.val() != null)
+ {
+ switch (e.target)
+ {
+ case red.get(0): red.val(color.val('r')); break;
+ case green.get(0): green.val(color.val('g')); break;
+ case blue.get(0): blue.val(color.val('b')); break;
+ case alpha && alpha.get(0): alpha.val(Math.precision((color.val('a') * 100) / 255, alphaPrecision)); break;
+ case hue.get(0): hue.val(color.val('h')); break;
+ case saturation.get(0): saturation.val(color.val('s')); break;
+ case value.get(0): value.val(color.val('v')); break;
+ case hex.get(0):
+ case bindedHex && bindedHex.get(0):
+ hex.val(color.val('hex'));
+ bindedHex && bindedHex.val(color.val('hex'));
+ break;
+ case ahex && ahex.get(0): ahex.val(color.val('ahex').substring(6)); break;
+ }
+ }
+ },
+ validateKey = // validate key
+ function(e)
+ {
+ switch(e.keyCode)
+ {
+ case 9:
+ case 16:
+ case 29:
+ case 37:
+ case 39:
+ return false;
+ case 'c'.charCodeAt():
+ case 'v'.charCodeAt():
+ if (e.ctrlKey) return false;
+ }
+ return true;
+ },
+ setValueInRange = // constrain value within range
+ function(value, min, max)
+ {
+ if (value == '' || isNaN(value)) return min;
+ if (value > max) return max;
+ if (value < min) return min;
+ return value;
+ },
+ colorChanged =
+ function(ui, context)
+ {
+ var all = ui.val('all');
+ if (context != red.get(0)) red.val(all != null ? all.r : '');
+ if (context != green.get(0)) green.val(all != null ? all.g : '');
+ if (context != blue.get(0)) blue.val(all != null ? all.b : '');
+ if (alpha && context != alpha.get(0)) alpha.val(all != null ? Math.precision((all.a * 100) / 255, alphaPrecision) : '');
+ if (context != hue.get(0)) hue.val(all != null ? all.h : '');
+ if (context != saturation.get(0)) saturation.val(all != null ? all.s : '');
+ if (context != value.get(0)) value.val(all != null ? all.v : '');
+ if (context != hex.get(0) && (bindedHex && context != bindedHex.get(0) || !bindedHex)) hex.val(all != null ? all.hex : '');
+ if (bindedHex && context != bindedHex.get(0) && context != hex.get(0)) bindedHex.val(all != null ? all.hex : '');
+ if (ahex && context != ahex.get(0)) ahex.val(all != null ? all.ahex.substring(6) : '');
+ },
+ destroy =
+ function()
+ {
+ // unbind all events and null objects
+ red.add(green).add(blue).add(alpha).add(hue).add(saturation).add(value).add(hex).add(bindedHex).add(ahex).unbind('keyup', keyUp).unbind('blur', blur);
+ red.add(green).add(blue).add(alpha).add(hue).add(saturation).add(value).unbind('keydown', keyDown);
+ color.unbind(colorChanged);
+ red = null;
+ green = null;
+ blue = null;
+ alpha = null;
+ hue = null;
+ saturation = null;
+ value = null;
+ hex = null;
+ ahex = null;
+ };
+ $.extend(true, $this, // public properties and methods
+ {
+ destroy: destroy
+ });
+ red.add(green).add(blue).add(alpha).add(hue).add(saturation).add(value).add(hex).add(bindedHex).add(ahex).bind('keyup', keyUp).bind('blur', blur);
+ red.add(green).add(blue).add(alpha).add(hue).add(saturation).add(value).bind('keydown', keyDown);
+ color.bind(colorChanged);
+ };
+ $.jPicker =
+ {
+ List: [], // array holding references to each active instance of the control
+ Color: // color object - we will be able to assign by any color space type or retrieve any color space info
+ // we want this public so we can optionally assign new color objects to initial values using inputs other than a string hex value (also supported)
+ function(init)
+ {
+ var $this = this,
+ r,
+ g,
+ b,
+ a,
+ h,
+ s,
+ v,
+ changeEvents = new Array(),
+ fireChangeEvents =
+ function(context)
+ {
+ for (var i = 0; i < changeEvents.length; i++) changeEvents[i].call($this, $this, context);
+ },
+ val =
+ function(name, value, context)
+ {
+ var set = value !== undefined;
+ if (!set)
+ {
+ if (name === undefined || name == null || name == '') name = 'all';
+ if (r == null) return null;
+ switch (name.toLowerCase())
+ {
+ case 'ahex': return ColorMethods.rgbaToHex({ r: r, g: g, b: b, a: a });
+ case 'hex': return val('ahex').substring(0, 6);
+ case 'all': return { r: r, g: g, b: b, a: a, h: h, s: s, v: v, hex: val.call($this, 'hex'), ahex: val.call($this, 'ahex') };
+ default:
+ var ret={};
+ for (var i = 0; i < name.length; i++)
+ {
+ switch (name.charAt(i))
+ {
+ case 'r':
+ if (name.length == 1) ret = r;
+ else ret.r = r;
+ break;
+ case 'g':
+ if (name.length == 1) ret = g;
+ else ret.g = g;
+ break;
+ case 'b':
+ if (name.length == 1) ret = b;
+ else ret.b = b;
+ break;
+ case 'a':
+ if (name.length == 1) ret = a;
+ else ret.a = a;
+ break;
+ case 'h':
+ if (name.length == 1) ret = h;
+ else ret.h = h;
+ break;
+ case 's':
+ if (name.length == 1) ret = s;
+ else ret.s = s;
+ break;
+ case 'v':
+ if (name.length == 1) ret = v;
+ else ret.v = v;
+ break;
+ }
+ }
+ return ret == {} ? val.call($this, 'all') : ret;
+ break;
+ }
+ }
+ if (context != null && context == $this) return;
+ var changed = false;
+ if (name == null) name = '';
+ if (value == null)
+ {
+ if (r != null)
+ {
+ r = null;
+ changed = true;
+ }
+ if (g != null)
+ {
+ g = null;
+ changed = true;
+ }
+ if (b != null)
+ {
+ b = null;
+ changed = true;
+ }
+ if (a != null)
+ {
+ a = null;
+ changed = true;
+ }
+ if (h != null)
+ {
+ h = null;
+ changed = true;
+ }
+ if (s != null)
+ {
+ s = null;
+ changed = true;
+ }
+ if (v != null)
+ {
+ v = null;
+ changed = true;
+ }
+ changed && fireChangeEvents.call($this, context || $this);
+ return;
+ }
+ switch (name.toLowerCase())
+ {
+ case 'ahex':
+ case 'hex':
+ var ret = ColorMethods.hexToRgba(value && (value.ahex || value.hex) || value || '00000000');
+ val.call($this, 'rgba', { r: ret.r, g: ret.g, b: ret.b, a: name == 'ahex' ? ret.a : a != null ? a : 255 }, context);
+ break;
+ default:
+ if (value && (value.ahex != null || value.hex != null))
+ {
+ val.call($this, 'ahex', value.ahex || value.hex || '00000000', context);
+ return;
+ }
+ var newV = {}, rgb = false, hsv = false;
+ if (value.r !== undefined && !name.indexOf('r') == -1) name += 'r';
+ if (value.g !== undefined && !name.indexOf('g') == -1) name += 'g';
+ if (value.b !== undefined && !name.indexOf('b') == -1) name += 'b';
+ if (value.a !== undefined && !name.indexOf('a') == -1) name += 'a';
+ if (value.h !== undefined && !name.indexOf('h') == -1) name += 'h';
+ if (value.s !== undefined && !name.indexOf('s') == -1) name += 's';
+ if (value.v !== undefined && !name.indexOf('v') == -1) name += 'v';
+ for (var i = 0; i < name.length; i++)
+ {
+ switch (name.charAt(i))
+ {
+ case 'r':
+ if (hsv) continue;
+ rgb = true;
+ newV.r = value && value.r && value.r | 0 || value && value | 0 || 0;
+ if (newV.r < 0) newV.r = 0;
+ else if (newV.r > 255) newV.r = 255;
+ if (r != newV.r)
+ {
+ r = newV.r;
+ changed = true;
+ }
+ break;
+ case 'g':
+ if (hsv) continue;
+ rgb = true;
+ newV.g = value && value.g && value.g | 0 || value && value | 0 || 0;
+ if (newV.g < 0) newV.g = 0;
+ else if (newV.g > 255) newV.g = 255;
+ if (g != newV.g)
+ {
+ g = newV.g;
+ changed = true;
+ }
+ break;
+ case 'b':
+ if (hsv) continue;
+ rgb = true;
+ newV.b = value && value.b && value.b | 0 || value && value | 0 || 0;
+ if (newV.b < 0) newV.b = 0;
+ else if (newV.b > 255) newV.b = 255;
+ if (b != newV.b)
+ {
+ b = newV.b;
+ changed = true;
+ }
+ break;
+ case 'a':
+ newV.a = value && value.a != null ? value.a | 0 : value != null ? value | 0 : 255;
+ if (newV.a < 0) newV.a = 0;
+ else if (newV.a > 255) newV.a = 255;
+ if (a != newV.a)
+ {
+ a = newV.a;
+ changed = true;
+ }
+ break;
+ case 'h':
+ if (rgb) continue;
+ hsv = true;
+ newV.h = value && value.h && value.h | 0 || value && value | 0 || 0;
+ if (newV.h < 0) newV.h = 0;
+ else if (newV.h > 360) newV.h = 360;
+ if (h != newV.h)
+ {
+ h = newV.h;
+ changed = true;
+ }
+ break;
+ case 's':
+ if (rgb) continue;
+ hsv = true;
+ newV.s = value && value.s != null ? value.s | 0 : value != null ? value | 0 : 100;
+ if (newV.s < 0) newV.s = 0;
+ else if (newV.s > 100) newV.s = 100;
+ if (s != newV.s)
+ {
+ s = newV.s;
+ changed = true;
+ }
+ break;
+ case 'v':
+ if (rgb) continue;
+ hsv = true;
+ newV.v = value && value.v != null ? value.v | 0 : value != null ? value | 0 : 100;
+ if (newV.v < 0) newV.v = 0;
+ else if (newV.v > 100) newV.v = 100;
+ if (v != newV.v)
+ {
+ v = newV.v;
+ changed = true;
+ }
+ break;
+ }
+ }
+ if (changed)
+ {
+ if (rgb)
+ {
+ r = r || 0;
+ g = g || 0;
+ b = b || 0;
+ var ret = ColorMethods.rgbToHsv({ r: r, g: g, b: b });
+ h = ret.h;
+ s = ret.s;
+ v = ret.v;
+ }
+ else if (hsv)
+ {
+ h = h || 0;
+ s = s != null ? s : 100;
+ v = v != null ? v : 100;
+ var ret = ColorMethods.hsvToRgb({ h: h, s: s, v: v });
+ r = ret.r;
+ g = ret.g;
+ b = ret.b;
+ }
+ a = a != null ? a : 255;
+ fireChangeEvents.call($this, context || $this);
+ }
+ break;
+ }
+ },
+ bind =
+ function(callback)
+ {
+ if ($.isFunction(callback)) changeEvents.push(callback);
+ },
+ unbind =
+ function(callback)
+ {
+ if (!$.isFunction(callback)) return;
+ var i;
+ while ((i = $.inArray(callback, changeEvents)) != -1) changeEvents.splice(i, 1);
+ },
+ destroy =
+ function()
+ {
+ changeEvents = null;
+ }
+ $.extend(true, $this, // public properties and methods
+ {
+ val: val,
+ bind: bind,
+ unbind: unbind,
+ destroy: destroy
+ });
+ if (init)
+ {
+ if (init.ahex != null) val('ahex', init);
+ else if (init.hex != null) val((init.a != null ? 'a' : '') + 'hex', init.a != null ? { ahex: init.hex + ColorMethods.intToHex(init.a) } : init);
+ else if (init.r != null && init.g != null && init.b != null) val('rgb' + (init.a != null ? 'a' : ''), init);
+ else if (init.h != null && init.s != null && init.v != null) val('hsv' + (init.a != null ? 'a' : ''), init);
+ }
+ },
+ ColorMethods: // color conversion methods - make public to give use to external scripts
+ {
+ hexToRgba:
+ function(hex)
+ {
+ hex = this.validateHex(hex);
+ if (hex == '') return { r: null, g: null, b: null, a: null };
+ var r = '00', g = '00', b = '00', a = '255';
+ if (hex.length == 6) hex += 'ff';
+ if (hex.length > 6)
+ {
+ r = hex.substring(0, 2);
+ g = hex.substring(2, 4);
+ b = hex.substring(4, 6);
+ a = hex.substring(6, hex.length);
+ }
+ else
+ {
+ if (hex.length > 4)
+ {
+ r = hex.substring(4, hex.length);
+ hex = hex.substring(0, 4);
+ }
+ if (hex.length > 2)
+ {
+ g = hex.substring(2, hex.length);
+ hex = hex.substring(0, 2);
+ }
+ if (hex.length > 0) b = hex.substring(0, hex.length);
+ }
+ return { r: this.hexToInt(r), g: this.hexToInt(g), b: this.hexToInt(b), a: this.hexToInt(a) };
+ },
+ validateHex:
+ function(hex)
+ {
+ hex = hex.toLowerCase().replace(/[^a-f0-9]/g, '');
+ if (hex.length > 8) hex = hex.substring(0, 8);
+ return hex;
+ },
+ rgbaToHex:
+ function(rgba)
+ {
+ return this.intToHex(rgba.r) + this.intToHex(rgba.g) + this.intToHex(rgba.b) + this.intToHex(rgba.a);
+ },
+ intToHex:
+ function(dec)
+ {
+ var result = (dec | 0).toString(16);
+ if (result.length == 1) result = ('0' + result);
+ return result.toLowerCase();
+ },
+ hexToInt:
+ function(hex)
+ {
+ return parseInt(hex, 16);
+ },
+ rgbToHsv:
+ function(rgb)
+ {
+ var r = rgb.r / 255, g = rgb.g / 255, b = rgb.b / 255, hsv = { h: 0, s: 0, v: 0 }, min = 0, max = 0, delta;
+ if (r >= g && r >= b)
+ {
+ max = r;
+ min = g > b ? b : g;
+ }
+ else if (g >= b && g >= r)
+ {
+ max = g;
+ min = r > b ? b : r;
+ }
+ else
+ {
+ max = b;
+ min = g > r ? r : g;
+ }
+ hsv.v = max;
+ hsv.s = max ? (max - min) / max : 0;
+ if (!hsv.s) hsv.h = 0;
+ else
+ {
+ delta = max - min;
+ if (r == max) hsv.h = (g - b) / delta;
+ else if (g == max) hsv.h = 2 + (b - r) / delta;
+ else hsv.h = 4 + (r - g) / delta;
+ hsv.h = parseInt(hsv.h * 60);
+ if (hsv.h < 0) hsv.h += 360;
+ }
+ hsv.s = (hsv.s * 100) | 0;
+ hsv.v = (hsv.v * 100) | 0;
+ return hsv;
+ },
+ hsvToRgb:
+ function(hsv)
+ {
+ var rgb = { r: 0, g: 0, b: 0, a: 100 }, h = hsv.h, s = hsv.s, v = hsv.v;
+ if (s == 0)
+ {
+ if (v == 0) rgb.r = rgb.g = rgb.b = 0;
+ else rgb.r = rgb.g = rgb.b = (v * 255 / 100) | 0;
+ }
+ else
+ {
+ if (h == 360) h = 0;
+ h /= 60;
+ s = s / 100;
+ v = v / 100;
+ var i = h | 0,
+ f = h - i,
+ p = v * (1 - s),
+ q = v * (1 - (s * f)),
+ t = v * (1 - (s * (1 - f)));
+ switch (i)
+ {
+ case 0:
+ rgb.r = v;
+ rgb.g = t;
+ rgb.b = p;
+ break;
+ case 1:
+ rgb.r = q;
+ rgb.g = v;
+ rgb.b = p;
+ break;
+ case 2:
+ rgb.r = p;
+ rgb.g = v;
+ rgb.b = t;
+ break;
+ case 3:
+ rgb.r = p;
+ rgb.g = q;
+ rgb.b = v;
+ break;
+ case 4:
+ rgb.r = t;
+ rgb.g = p;
+ rgb.b = v;
+ break;
+ case 5:
+ rgb.r = v;
+ rgb.g = p;
+ rgb.b = q;
+ break;
+ }
+ rgb.r = (rgb.r * 255) | 0;
+ rgb.g = (rgb.g * 255) | 0;
+ rgb.b = (rgb.b * 255) | 0;
+ }
+ return rgb;
+ }
+ }
+ };
+ var Color = $.jPicker.Color, List = $.jPicker.List, ColorMethods = $.jPicker.ColorMethods; // local copies for YUI compressor
+ $.fn.jPicker =
+ function(options)
+ {
+ var $arguments = arguments;
+ return this.each(
+ function()
+ {
+ var $this = this, settings = $.extend(true, {}, $.fn.jPicker.defaults, options); // local copies for YUI compressor
+ if ($($this).get(0).nodeName.toLowerCase() == 'input') // Add color picker icon if binding to an input element and bind the events to the input
+ {
+ $.extend(true, settings,
+ {
+ window:
+ {
+ bindToInput: true,
+ expandable: true,
+ input: $($this)
+ }
+ });
+ if($($this).val()=='')
+ {
+ settings.color.active = new Color({ hex: null });
+ settings.color.current = new Color({ hex: null });
+ }
+ else if (ColorMethods.validateHex($($this).val()))
+ {
+ settings.color.active = new Color({ hex: $($this).val(), a: settings.color.active.val('a') });
+ settings.color.current = new Color({ hex: $($this).val(), a: settings.color.active.val('a') });
+ }
+ }
+ if (settings.window.expandable)
+ $($this).after(' ');
+ else settings.window.liveUpdate = false; // Basic control binding for inline use - You will need to override the liveCallback or commitCallback function to retrieve results
+ var isLessThanIE7 = parseFloat(navigator.appVersion.split('MSIE')[1]) < 7 && document.body.filters, // needed to run the AlphaImageLoader function for IE6
+ container = null,
+ colorMapDiv = null,
+ colorBarDiv = null,
+ colorMapL1 = null, // different layers of colorMap and colorBar
+ colorMapL2 = null,
+ colorMapL3 = null,
+ colorBarL1 = null,
+ colorBarL2 = null,
+ colorBarL3 = null,
+ colorBarL4 = null,
+ colorBarL5 = null,
+ colorBarL6 = null,
+ colorMap = null, // color maps
+ colorBar = null,
+ colorPicker = null,
+ elementStartX = null, // Used to record the starting css positions for dragging the control
+ elementStartY = null,
+ pageStartX = null, // Used to record the mousedown coordinates for dragging the control
+ pageStartY = null,
+ activePreview = null, // color boxes above the radio buttons
+ currentPreview = null,
+ okButton = null,
+ cancelButton = null,
+ grid = null, // preset colors grid
+ iconColor = null, // iconColor for popup icon
+ iconAlpha = null, // iconAlpha for popup icon
+ iconImage = null, // iconImage popup icon
+ moveBar = null, // drag bar
+ setColorMode = // set color mode and update visuals for the new color mode
+ function(colorMode)
+ {
+ var active = color.active, // local copies for YUI compressor
+ clientPath = images.clientPath,
+ hex = active.val('hex'),
+ rgbMap,
+ rgbBar;
+ settings.color.mode = colorMode;
+ switch (colorMode)
+ {
+ case 'h':
+ setTimeout(
+ function()
+ {
+ setBG.call($this, colorMapDiv, 'transparent');
+ setImgLoc.call($this, colorMapL1, 0);
+ setAlpha.call($this, colorMapL1, 100);
+ setImgLoc.call($this, colorMapL2, 260);
+ setAlpha.call($this, colorMapL2, 100);
+ setBG.call($this, colorBarDiv, 'transparent');
+ setImgLoc.call($this, colorBarL1, 0);
+ setAlpha.call($this, colorBarL1, 100);
+ setImgLoc.call($this, colorBarL2, 260);
+ setAlpha.call($this, colorBarL2, 100);
+ setImgLoc.call($this, colorBarL3, 260);
+ setAlpha.call($this, colorBarL3, 100);
+ setImgLoc.call($this, colorBarL4, 260);
+ setAlpha.call($this, colorBarL4, 100);
+ setImgLoc.call($this, colorBarL6, 260);
+ setAlpha.call($this, colorBarL6, 100);
+ }, 0);
+ colorMap.range('all', { minX: 0, maxX: 100, minY: 0, maxY: 100 });
+ colorBar.range('rangeY', { minY: 0, maxY: 360 });
+ if (active.val('ahex') == null) break;
+ colorMap.val('xy', { x: active.val('s'), y: 100 - active.val('v') }, colorMap);
+ colorBar.val('y', 360 - active.val('h'), colorBar);
+ break;
+ case 's':
+ setTimeout(
+ function()
+ {
+ setBG.call($this, colorMapDiv, 'transparent');
+ setImgLoc.call($this, colorMapL1, -260);
+ setImgLoc.call($this, colorMapL2, -520);
+ setImgLoc.call($this, colorBarL1, -260);
+ setImgLoc.call($this, colorBarL2, -520);
+ setImgLoc.call($this, colorBarL6, 260);
+ setAlpha.call($this, colorBarL6, 100);
+ }, 0);
+ colorMap.range('all', { minX: 0, maxX: 360, minY: 0, maxY: 100 });
+ colorBar.range('rangeY', { minY: 0, maxY: 100 });
+ if (active.val('ahex') == null) break;
+ colorMap.val('xy', { x: active.val('h'), y: 100 - active.val('v') }, colorMap);
+ colorBar.val('y', 100 - active.val('s'), colorBar);
+ break;
+ case 'v':
+ setTimeout(
+ function()
+ {
+ setBG.call($this, colorMapDiv, '000000');
+ setImgLoc.call($this, colorMapL1, -780);
+ setImgLoc.call($this, colorMapL2, 260);
+ setBG.call($this, colorBarDiv, hex);
+ setImgLoc.call($this, colorBarL1, -520);
+ setImgLoc.call($this, colorBarL2, 260);
+ setAlpha.call($this, colorBarL2, 100);
+ setImgLoc.call($this, colorBarL6, 260);
+ setAlpha.call($this, colorBarL6, 100);
+ }, 0);
+ colorMap.range('all', { minX: 0, maxX: 360, minY: 0, maxY: 100 });
+ colorBar.range('rangeY', { minY: 0, maxY: 100 });
+ if (active.val('ahex') == null) break;
+ colorMap.val('xy', { x: active.val('h'), y: 100 - active.val('s') }, colorMap);
+ colorBar.val('y', 100 - active.val('v'), colorBar);
+ break;
+ case 'r':
+ rgbMap = -1040;
+ rgbBar = -780;
+ colorMap.range('all', { minX: 0, maxX: 255, minY: 0, maxY: 255 });
+ colorBar.range('rangeY', { minY: 0, maxY: 255 });
+ if (active.val('ahex') == null) break;
+ colorMap.val('xy', { x: active.val('b'), y: 255 - active.val('g') }, colorMap);
+ colorBar.val('y', 255 - active.val('r'), colorBar);
+ break;
+ case 'g':
+ rgbMap = -1560;
+ rgbBar = -1820;
+ colorMap.range('all', { minX: 0, maxX: 255, minY: 0, maxY: 255 });
+ colorBar.range('rangeY', { minY: 0, maxY: 255 });
+ if (active.val('ahex') == null) break;
+ colorMap.val('xy', { x: active.val('b'), y: 255 - active.val('r') }, colorMap);
+ colorBar.val('y', 255 - active.val('g'), colorBar);
+ break;
+ case 'b':
+ rgbMap = -2080;
+ rgbBar = -2860;
+ colorMap.range('all', { minX: 0, maxX: 255, minY: 0, maxY: 255 });
+ colorBar.range('rangeY', { minY: 0, maxY: 255 });
+ if (active.val('ahex') == null) break;
+ colorMap.val('xy', { x: active.val('r'), y: 255 - active.val('g') }, colorMap);
+ colorBar.val('y', 255 - active.val('b'), colorBar);
+ break;
+ case 'a':
+ setTimeout(
+ function()
+ {
+ setBG.call($this, colorMapDiv, 'transparent');
+ setImgLoc.call($this, colorMapL1, -260);
+ setImgLoc.call($this, colorMapL2, -520);
+ setImgLoc.call($this, colorBarL1, 260);
+ setImgLoc.call($this, colorBarL2, 260);
+ setAlpha.call($this, colorBarL2, 100);
+ setImgLoc.call($this, colorBarL6, 0);
+ setAlpha.call($this, colorBarL6, 100);
+ }, 0);
+ colorMap.range('all', { minX: 0, maxX: 360, minY: 0, maxY: 100 });
+ colorBar.range('rangeY', { minY: 0, maxY: 255 });
+ if (active.val('ahex') == null) break;
+ colorMap.val('xy', { x: active.val('h'), y: 100 - active.val('v') }, colorMap);
+ colorBar.val('y', 255 - active.val('a'), colorBar);
+ break;
+ default:
+ throw ('Invalid Mode');
+ break;
+ }
+ switch (colorMode)
+ {
+ case 'h':
+ break;
+ case 's':
+ case 'v':
+ case 'a':
+ setTimeout(
+ function()
+ {
+ setAlpha.call($this, colorMapL1, 100);
+ setAlpha.call($this, colorBarL1, 100);
+ setImgLoc.call($this, colorBarL3, 260);
+ setAlpha.call($this, colorBarL3, 100);
+ setImgLoc.call($this, colorBarL4, 260);
+ setAlpha.call($this, colorBarL4, 100);
+ }, 0);
+ break;
+ case 'r':
+ case 'g':
+ case 'b':
+ setTimeout(
+ function()
+ {
+ setBG.call($this, colorMapDiv, 'transparent');
+ setBG.call($this, colorBarDiv, 'transparent');
+ setAlpha.call($this, colorBarL1, 100);
+ setAlpha.call($this, colorMapL1, 100);
+ setImgLoc.call($this, colorMapL1, rgbMap);
+ setImgLoc.call($this, colorMapL2, rgbMap - 260);
+ setImgLoc.call($this, colorBarL1, rgbBar - 780);
+ setImgLoc.call($this, colorBarL2, rgbBar - 520);
+ setImgLoc.call($this, colorBarL3, rgbBar);
+ setImgLoc.call($this, colorBarL4, rgbBar - 260);
+ setImgLoc.call($this, colorBarL6, 260);
+ setAlpha.call($this, colorBarL6, 100);
+ }, 0);
+ break;
+ }
+ if (active.val('ahex') == null) return;
+ activeColorChanged.call($this, active);
+ },
+ activeColorChanged = // Update color when user changes text values
+ function(ui, context)
+ {
+ if (context == null || (context != colorBar && context != colorMap)) positionMapAndBarArrows.call($this, ui, context);
+ setTimeout(
+ function()
+ {
+ updatePreview.call($this, ui);
+ updateMapVisuals.call($this, ui);
+ updateBarVisuals.call($this, ui);
+ }, 0);
+ },
+ mapValueChanged = // user has dragged the ColorMap pointer
+ function(ui, context)
+ {
+ var active = color.active;
+ if (context != colorMap && active.val() == null) return;
+ var xy = ui.val('all');
+ switch (settings.color.mode)
+ {
+ case 'h':
+ active.val('sv', { s: xy.x, v: 100 - xy.y }, context);
+ break;
+ case 's':
+ case 'a':
+ active.val('hv', { h: xy.x, v: 100 - xy.y }, context);
+ break;
+ case 'v':
+ active.val('hs', { h: xy.x, s: 100 - xy.y }, context);
+ break;
+ case 'r':
+ active.val('gb', { g: 255 - xy.y, b: xy.x }, context);
+ break;
+ case 'g':
+ active.val('rb', { r: 255 - xy.y, b: xy.x }, context);
+ break;
+ case 'b':
+ active.val('rg', { r: xy.x, g: 255 - xy.y }, context);
+ break;
+ }
+ },
+ colorBarValueChanged = // user has dragged the ColorBar slider
+ function(ui, context)
+ {
+ var active = color.active;
+ if (context != colorBar && active.val() == null) return;
+ switch (settings.color.mode)
+ {
+ case 'h':
+ active.val('h', { h: 360 - ui.val('y') }, context);
+ break;
+ case 's':
+ active.val('s', { s: 100 - ui.val('y') }, context);
+ break;
+ case 'v':
+ active.val('v', { v: 100 - ui.val('y') }, context);
+ break;
+ case 'r':
+ active.val('r', { r: 255 - ui.val('y') }, context);
+ break;
+ case 'g':
+ active.val('g', { g: 255 - ui.val('y') }, context);
+ break;
+ case 'b':
+ active.val('b', { b: 255 - ui.val('y') }, context);
+ break;
+ case 'a':
+ active.val('a', 255 - ui.val('y'), context);
+ break;
+ }
+ },
+ positionMapAndBarArrows = // position map and bar arrows to match current color
+ function(ui, context)
+ {
+ if (context != colorMap)
+ {
+ switch (settings.color.mode)
+ {
+ case 'h':
+ var sv = ui.val('sv');
+ colorMap.val('xy', { x: sv != null ? sv.s : 100, y: 100 - (sv != null ? sv.v : 100) }, context);
+ break;
+ case 's':
+ case 'a':
+ var hv = ui.val('hv');
+ colorMap.val('xy', { x: hv && hv.h || 0, y: 100 - (hv != null ? hv.v : 100) }, context);
+ break;
+ case 'v':
+ var hs = ui.val('hs');
+ colorMap.val('xy', { x: hs && hs.h || 0, y: 100 - (hs != null ? hs.s : 100) }, context);
+ break;
+ case 'r':
+ var bg = ui.val('bg');
+ colorMap.val('xy', { x: bg && bg.b || 0, y: 255 - (bg && bg.g || 0) }, context);
+ break;
+ case 'g':
+ var br = ui.val('br');
+ colorMap.val('xy', { x: br && br.b || 0, y: 255 - (br && br.r || 0) }, context);
+ break;
+ case 'b':
+ var rg = ui.val('rg');
+ colorMap.val('xy', { x: rg && rg.r || 0, y: 255 - (rg && rg.g || 0) }, context);
+ break;
+ }
+ }
+ if (context != colorBar)
+ {
+ switch (settings.color.mode)
+ {
+ case 'h':
+ colorBar.val('y', 360 - (ui.val('h') || 0), context);
+ break;
+ case 's':
+ var s = ui.val('s');
+ colorBar.val('y', 100 - (s != null ? s : 100), context);
+ break;
+ case 'v':
+ var v = ui.val('v');
+ colorBar.val('y', 100 - (v != null ? v : 100), context);
+ break;
+ case 'r':
+ colorBar.val('y', 255 - (ui.val('r') || 0), context);
+ break;
+ case 'g':
+ colorBar.val('y', 255 - (ui.val('g') || 0), context);
+ break;
+ case 'b':
+ colorBar.val('y', 255 - (ui.val('b') || 0), context);
+ break;
+ case 'a':
+ var a = ui.val('a');
+ colorBar.val('y', 255 - (a != null ? a : 255), context);
+ break;
+ }
+ }
+ },
+ updatePreview =
+ function(ui)
+ {
+ try
+ {
+ var all = ui.val('all');
+ activePreview.css({ backgroundColor: all && '#' + all.hex || 'transparent' });
+ setAlpha.call($this, activePreview, all && Math.precision((all.a * 100) / 255, 4) || 0);
+ }
+ catch (e) { }
+ },
+ updateMapVisuals =
+ function(ui)
+ {
+ switch (settings.color.mode)
+ {
+ case 'h':
+ setBG.call($this, colorMapDiv, new Color({ h: ui.val('h') || 0, s: 100, v: 100 }).val('hex'));
+ break;
+ case 's':
+ case 'a':
+ var s = ui.val('s');
+ setAlpha.call($this, colorMapL2, 100 - (s != null ? s : 100));
+ break;
+ case 'v':
+ var v = ui.val('v');
+ setAlpha.call($this, colorMapL1, v != null ? v : 100);
+ break;
+ case 'r':
+ setAlpha.call($this, colorMapL2, Math.precision((ui.val('r') || 0) / 255 * 100, 4));
+ break;
+ case 'g':
+ setAlpha.call($this, colorMapL2, Math.precision((ui.val('g') || 0) / 255 * 100, 4));
+ break;
+ case 'b':
+ setAlpha.call($this, colorMapL2, Math.precision((ui.val('b') || 0) / 255 * 100));
+ break;
+ }
+ var a = ui.val('a');
+ setAlpha.call($this, colorMapL3, Math.precision(((255 - (a || 0)) * 100) / 255, 4));
+ },
+ updateBarVisuals =
+ function(ui)
+ {
+ switch (settings.color.mode)
+ {
+ case 'h':
+ var a = ui.val('a');
+ setAlpha.call($this, colorBarL5, Math.precision(((255 - (a || 0)) * 100) / 255, 4));
+ break;
+ case 's':
+ var hva = ui.val('hva'),
+ saturatedColor = new Color({ h: hva && hva.h || 0, s: 100, v: hva != null ? hva.v : 100 });
+ setBG.call($this, colorBarDiv, saturatedColor.val('hex'));
+ setAlpha.call($this, colorBarL2, 100 - (hva != null ? hva.v : 100));
+ setAlpha.call($this, colorBarL5, Math.precision(((255 - (hva && hva.a || 0)) * 100) / 255, 4));
+ break;
+ case 'v':
+ var hsa = ui.val('hsa'),
+ valueColor = new Color({ h: hsa && hsa.h || 0, s: hsa != null ? hsa.s : 100, v: 100 });
+ setBG.call($this, colorBarDiv, valueColor.val('hex'));
+ setAlpha.call($this, colorBarL5, Math.precision(((255 - (hsa && hsa.a || 0)) * 100) / 255, 4));
+ break;
+ case 'r':
+ case 'g':
+ case 'b':
+ var hValue = 0, vValue = 0, rgba = ui.val('rgba');
+ if (settings.color.mode == 'r')
+ {
+ hValue = rgba && rgba.b || 0;
+ vValue = rgba && rgba.g || 0;
+ }
+ else if (settings.color.mode == 'g')
+ {
+ hValue = rgba && rgba.b || 0;
+ vValue = rgba && rgba.r || 0;
+ }
+ else if (settings.color.mode == 'b')
+ {
+ hValue = rgba && rgba.r || 0;
+ vValue = rgba && rgba.g || 0;
+ }
+ var middle = vValue > hValue ? hValue : vValue;
+ setAlpha.call($this, colorBarL2, hValue > vValue ? Math.precision(((hValue - vValue) / (255 - vValue)) * 100, 4) : 0);
+ setAlpha.call($this, colorBarL3, vValue > hValue ? Math.precision(((vValue - hValue) / (255 - hValue)) * 100, 4) : 0);
+ setAlpha.call($this, colorBarL4, Math.precision((middle / 255) * 100, 4));
+ setAlpha.call($this, colorBarL5, Math.precision(((255 - (rgba && rgba.a || 0)) * 100) / 255, 4));
+ break;
+ case 'a':
+ var a = ui.val('a');
+ setBG.call($this, colorBarDiv, ui.val('hex') || '000000');
+ setAlpha.call($this, colorBarL5, a != null ? 0 : 100);
+ setAlpha.call($this, colorBarL6, a != null ? 100 : 0);
+ break;
+ }
+ },
+ setBG =
+ function(el, c)
+ {
+ el.css({ backgroundColor: c && c.length == 6 && '#' + c || 'transparent' });
+ },
+ setImg =
+ function(img, src)
+ {
+ if (isLessThanIE7 && (src.indexOf('AlphaBar.png') != -1 || src.indexOf('Bars.png') != -1 || src.indexOf('Maps.png') != -1))
+ {
+ img.attr('pngSrc', src);
+ img.css({ backgroundImage: 'none', filter: 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'' + src + '\', sizingMethod=\'scale\')' });
+ }
+ else img.css({ backgroundImage: 'url(\'' + src + '\')' });
+ },
+ setImgLoc =
+ function(img, y)
+ {
+ img.css({ top: y + 'px' });
+ },
+ setAlpha =
+ function(obj, alpha)
+ {
+ obj.css({ visibility: alpha > 0 ? 'visible' : 'hidden' });
+ if (alpha > 0 && alpha < 100)
+ {
+ if (isLessThanIE7)
+ {
+ var src = obj.attr('pngSrc');
+ if (src != null && (src.indexOf('AlphaBar.png') != -1 || src.indexOf('Bars.png') != -1 || src.indexOf('Maps.png') != -1))
+ obj.css({ filter: 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'' + src + '\', sizingMethod=\'scale\') progid:DXImageTransform.Microsoft.Alpha(opacity=' + alpha + ')' });
+ else obj.css({ opacity: Math.precision(alpha / 100, 4) });
+ }
+ else obj.css({ opacity: Math.precision(alpha / 100, 4) });
+ }
+ else if (alpha == 0 || alpha == 100)
+ {
+ if (isLessThanIE7)
+ {
+ var src = obj.attr('pngSrc');
+ if (src != null && (src.indexOf('AlphaBar.png') != -1 || src.indexOf('Bars.png') != -1 || src.indexOf('Maps.png') != -1))
+ obj.css({ filter: 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'' + src + '\', sizingMethod=\'scale\')' });
+ else obj.css({ opacity: '' });
+ }
+ else obj.css({ opacity: '' });
+ }
+ },
+ revertColor = // revert color to original color when opened
+ function()
+ {
+ color.active.val('ahex', color.current.val('ahex'));
+ },
+ commitColor = // commit the color changes
+ function()
+ {
+ color.current.val('ahex', color.active.val('ahex'));
+ },
+ radioClicked =
+ function(e)
+ {
+ $(this).parents('tbody:first').find('input:radio[value!="'+e.target.value+'"]').removeAttr('checked');
+ setColorMode.call($this, e.target.value);
+ },
+ currentClicked =
+ function()
+ {
+ revertColor.call($this);
+ },
+ cancelClicked =
+ function()
+ {
+ revertColor.call($this);
+ settings.window.expandable && hide.call($this);
+ $.isFunction(cancelCallback) && cancelCallback.call($this, color.active, cancelButton);
+ },
+ okClicked =
+ function()
+ {
+ commitColor.call($this);
+ settings.window.expandable && hide.call($this);
+ $.isFunction(commitCallback) && commitCallback.call($this, color.active, okButton);
+ },
+ iconImageClicked =
+ function()
+ {
+ show.call($this);
+ },
+ currentColorChanged =
+ function(ui, context)
+ {
+ var hex = ui.val('hex');
+ currentPreview.css({ backgroundColor: hex && '#' + hex || 'transparent' });
+ setAlpha.call($this, currentPreview, Math.precision(((ui.val('a') || 0) * 100) / 255, 4));
+ },
+ expandableColorChanged =
+ function(ui, context)
+ {
+ var hex = ui.val('hex');
+ var va = ui.val('va');
+ iconColor.css({ backgroundColor: hex && '#' + hex || 'transparent' });
+ setAlpha.call($this, iconAlpha, Math.precision(((255 - (va && va.a || 0)) * 100) / 255, 4));
+ if (settings.window.bindToInput&&settings.window.updateInputColor)
+ settings.window.input.css(
+ {
+ backgroundColor: hex && '#' + hex || 'transparent',
+ color: va == null || va.v > 75 ? '#000000' : '#ffffff'
+ });
+ },
+ moveBarMouseDown =
+ function(e)
+ {
+ var element = settings.window.element, // local copies for YUI compressor
+ page = settings.window.page;
+ elementStartX = parseInt(container.css('left'));
+ elementStartY = parseInt(container.css('top'));
+ pageStartX = e.pageX;
+ pageStartY = e.pageY;
+ // bind events to document to move window - we will unbind these on mouseup
+ $(document).bind('mousemove', documentMouseMove).bind('mouseup', documentMouseUp);
+ e.preventDefault(); // prevent attempted dragging of the column
+ },
+ documentMouseMove =
+ function(e)
+ {
+ container.css({ left: elementStartX - (pageStartX - e.pageX) + 'px', top: elementStartY - (pageStartY - e.pageY) + 'px' });
+ if (settings.window.expandable && !$.support.boxModel) container.prev().css({ left: container.css("left"), top: container.css("top") });
+ e.stopPropagation();
+ e.preventDefault();
+ return false;
+ },
+ documentMouseUp =
+ function(e)
+ {
+ $(document).unbind('mousemove', documentMouseMove).unbind('mouseup', documentMouseUp);
+ e.stopPropagation();
+ e.preventDefault();
+ return false;
+ },
+ quickPickClicked =
+ function(e)
+ {
+ e.preventDefault();
+ e.stopPropagation();
+ color.active.val('ahex', $(this).attr('title') || null, e.target);
+ return false;
+ },
+ commitCallback = $.isFunction($arguments[1]) && $arguments[1] || null,
+ liveCallback = $.isFunction($arguments[2]) && $arguments[2] || null,
+ cancelCallback = $.isFunction($arguments[3]) && $arguments[3] || null,
+ show =
+ function()
+ {
+ color.current.val('ahex', color.active.val('ahex'));
+ var attachIFrame = function()
+ {
+ if (!settings.window.expandable || $.support.boxModel) return;
+ var table = container.find('table:first');
+ container.before('');
+ container.prev().css({ width: table.width(), height: container.height(), opacity: 0, position: 'absolute', left: container.css("left"), top: container.css("top") });
+ };
+ if (settings.window.expandable)
+ {
+ $(document.body).children('div.jPicker.Container').css({zIndex:10});
+ container.css({zIndex:20});
+ }
+ switch (settings.window.effects.type)
+ {
+ case 'fade':
+ container.fadeIn(settings.window.effects.speed.show, attachIFrame);
+ break;
+ case 'slide':
+ container.slideDown(settings.window.effects.speed.show, attachIFrame);
+ break;
+ case 'show':
+ default:
+ container.show(settings.window.effects.speed.show, attachIFrame);
+ break;
+ }
+ },
+ hide =
+ function()
+ {
+ var removeIFrame = function()
+ {
+ if (settings.window.expandable) container.css({ zIndex: 10 });
+ if (!settings.window.expandable || $.support.boxModel) return;
+ container.prev().remove();
+ };
+ switch (settings.window.effects.type)
+ {
+ case 'fade':
+ container.fadeOut(settings.window.effects.speed.hide, removeIFrame);
+ break;
+ case 'slide':
+ container.slideUp(settings.window.effects.speed.hide, removeIFrame);
+ break;
+ case 'show':
+ default:
+ container.hide(settings.window.effects.speed.hide, removeIFrame);
+ break;
+ }
+ },
+ initialize =
+ function()
+ {
+ var win = settings.window,
+ popup = win.expandable ? $($this).next().find('.Container:first') : null;
+ container = win.expandable ? $('') : $($this);
+ container.addClass('jPicker Container');
+ if (win.expandable) container.hide();
+ container.get(0).onselectstart = function(event){ if (event.target.nodeName.toLowerCase() !== 'input') return false; };
+ // inject html source code - we are using a single table for this control - I know tables are considered bad, but it takes care of equal height columns and
+ // this control really is tabular data, so I believe it is the right move
+ var all = color.active.val('all');
+ if (win.alphaPrecision < 0) win.alphaPrecision = 0;
+ else if (win.alphaPrecision > 2) win.alphaPrecision = 2;
+ var controlHtml='jPicker - A jQuery Color Picker Plugin.+
+ jPicker is a fast, lightweight jQuery plugin for including an advanced color picker in your web projects. It has been painstakenly ported from John Dyers' awesome work on his picker using the Prototype framework. + jPicker Inline Example+
+ jPicker can be used inline by binding to any block level element.
+<script type="text/javascript">
+ $(document).ready(
+ function()
+ {
+ $('#Inline').jPicker();
+ });
+</script>
+<div id="Inline"></div>
+
+ + jPicker Expandable Example+
+ jPicker can also display only a small picker icon that opens a popup for editing.
+<script type="text/javascript">
+ $(document).ready(
+ function()
+ {
+ $('#Expandable').jPicker(
+ {
+ window:
+ {
+ expandable: true
+ }
+ });
+ });
+</script>
+<span id="Expandable"></span>
+
+ + jPicker Alpha Channel Example+
+ jPicker can also pick colors with alpha (transparency) values.
+<script type="text/javascript">
+ $(document).ready(
+ function()
+ {
+ $('#Alpha').jPicker(
+ {
+ window:
+ {
+ expandable: true
+ },
+ color:
+ {
+ alphaSupport: true,
+ active: new $.jPicker.Color({ ahex: '99330099' })
+ }
+ });
+ });
+</script>
+<span id="Alpha"></span>
+
+ + jPicker Binded Example+
+ jPicker can also be binded to an input element.
+<script type="text/javascript">
+ $(document).ready(
+ function()
+ {
+ $('#Binded').jPicker();
+ });
+</script>
+<input id="Binded" type="text" value="e2ddcf" />
+
+ + Multiple jPicker Binded Example+
+ jPicker can also be binded to multiple elements at a time.
+<script type="text/javascript">
+ $(document).ready(
+ function()
+ {
+ $('.Multiple').jPicker();
+ });
+</script>
+<input class="Multiple" type="text" value="e2ddcf" /><br />
+<input class="Multiple" type="text" value="" /><br />
+<input class="Multiple" type="text" value="fda0f7" />
+ + + + + jPicker Callback Functions+
+ Register for callback function to have it interact with your page.
+<script type="text/javascript">
+ $(document).ready(
+ function()
+ {
+ var LiveCallbackElement = $('#Live'),
+ LiveCallbackButton = $('#LiveButton'); // you don't want it searching this
+ // on every live callback!!!
+ $('#Callbacks').jPicker(
+ {},
+ function(color, context)
+ {
+ var all = color.val('all');
+ alert('Color chosen - hex: ' + (all && '#' + all.hex || 'none') +
+ ' - alpha: ' + (all && all.a + '%' || 'none'));
+ $('#Commit').css(
+ {
+ backgroundColor: all && '#' + all.hex || 'transparent'
+ }); // prevent IE from throwing exception if hex is empty
+ },
+ function(color, context)
+ {
+ if (context == LiveCallbackButton.get(0)) alert('Color set from button');
+ var hex = color.val('hex');
+ LiveCallbackElement.css(
+ {
+ backgroundColor: hex && '#' + hex || 'transparent'
+ }); // prevent IE from throwing exception if hex is empty
+ },
+ function(color, context)
+ {
+ alert('"Cancel" Button Clicked');
+ });
+ $('#LiveButton').click(
+ function()
+ {
+ $.jPicker.List[0].color.active.val('hex', 'e2ddcf', this);
+ });
+ });
+</script>
+<input id="Callbacks" type="text" value="e2ddcf" />
+<span id="Commit" style="background-color: #e2ddcf; display: block; --
+ float: left; height: 50px; margin: 10px; width: 50px;"> --
+ Commit</span>
+<span id="Live" style="display: block; float: left; height: 50px; --
+ margin: 10px; width: 50px;">Live</span>
+<input id="LiveButton" type="button" value="Set To #e2ddcf" />
+ + Commit + Live + + + jPicker Settings And Colors+
+ Use the "val" method on the active color for interaction with the picker.
+<script type="text/javascript">
+ $(document).ready(
+ function()
+ {
+ $('#AlterColors').jPicker();
+ $('#GetActiveColor').click(
+ function()
+ {
+ alert($.jPicker.List[0].color.active.val('ahex'));
+ });
+ $('#GetRG').click(
+ function()
+ {
+ var rg=$.jPicker.List[0].color.active.val('rg');
+ alert('red: ' + rg.r + ', green: ' + rg.g);
+ });
+ $('#SetHue').click(
+ function()
+ {
+ $.jPicker.List[0].color.active.val('h', 133);
+ });
+ $('#SetValue').click(
+ function()
+ {
+ $.jPicker.List[0].color.active.val('v', 38);
+ });
+ $('#SetRG').click(
+ function()
+ {
+ $.jPicker.List[0].color.active.val('rg', { r: 213, g: 118 });
+ });
+ });
+</script>
+<input id="AlterColors" type="text" value="e2ddcf" /><br />
+<input id="GetActiveColor" type="button" value="Get Active Color" /><br />
+<input id="GetRG" type="button" value="Get Red/Green Value" /><br />
+<input id="SetHue" type="button" value="Set Hue To 133" /><br />
+<input id="SetValue" type="button" value="Set Value To 38" /><br />
+<input id="SetRG" type="button" value="Set Red/Green To 213, 118" />
+ + + + + + + + jPicker Core+
+ jPicker Core function - returns the jQuery object. + Settings+
+ settings [object]: (with defaults)
+{
+ window: // used to define the position of the popup window
+ // only useful in binded mode
+ {
+ title: null, // any title for the jPicker window itself - displays
+ // "Drag Markers To Pick A Color" if left null
+ position:
+ {
+ x: 'screenCenter', // acceptable values "left", "center", "right",
+ // "screenCenter", or relative px value
+ y: 'top', // acceptable values "top", "bottom", "center", or relative px
+ // value
+ },
+ expandable: false, // default to large static picker - set to true to make an
+ // expandable picker (small icon with popup) - set
+ // automatically when binded to input element
+ liveUpdate: true, // set false if you want the user to click "OK" before the
+ // binded input box updates values (always "true" for
+ // expandable picker)
+ alphaSupport: false, // set to true to enable alpha picking
+ alphaPrecision: 0, // set decimal precision for alpha percentage display -
+ // hex codes do not map directly to percentage integers -
+ // range 0-2
+ updateInputColor: true // set to false to prevent binded input colors from
+ // changing
+ },
+ color:
+ {
+ mode: 'h', // acceptable values "h" (hue), "s" (saturation), "v" (brightness),
+ // "r" (red), "g" (green), "b" (blue), "a" (alpha)
+ active: new $.jPicker.Color({ hex: 'ffc000' }), // accepts any declared
+ // jPicker.Color object or hex string WITH OR WITHOUT '#'
+ quickList: // this list of quick pick colors - override for a different list
+ [
+ new $.jPicker.Color({ h: 360, s: 33, v: 100}), // accepts any declared
+ // jPicker.Color object or hex string WITH OR WITHOUT '#'
+ new $.jPicker.Color({ h: 360, s: 66, v: 100}),
+ (...) // removed for brevity
+ new $.jPicker.Color({ h: 330, s: 100, v: 50}),
+ new $.jPicker.Color()
+ ]
+ },
+ images
+ {
+ clientPath: '/jPicker/images/', // Path to image files
+ colorMap: // colorMap size and arrow icon
+ {
+ width: 256, // Map width - don't override unless using a smaller image set
+ height: 256, // Map height - don't override unles using a smaller image set
+ arrow:
+ {
+ file: 'mappoint.gif', // Arrow icon image file
+ width: 15, // Arrow icon width
+ height: 15 // Arrow icon height
+ }
+ },
+ colorBar: // colorBar size and arrow icon
+ {
+ width: 20, // Bar width - don't override unless using a smaller image set
+ height: 256, // Bar height - don't override unless using a smaller image set
+ arrow:
+ {
+ file: 'rangearrows.gif', // Arrow icon image file
+ width: 40, // Arrow icon width
+ height: 9 // Arrow icon height
+ }
+ },
+ picker: // picker icon and size
+ {
+ file: 'picker.gif', // Picker icon image file
+ width: 25, // Picker width - don't override unless using a smaller image set
+ height: 24 // Picker height - don't override unless using a smaller image set
+ }
+ },
+ localization:
+ {
+ text:
+ {
+ title: 'Drag Markers To Pick A Color',
+ newColor: 'new',
+ currentColor: 'current',
+ ok: 'OK',
+ cancel: 'Cancel'
+ },
+ tooltips:
+ {
+ colors:
+ {
+ newColor: 'New Color - Press “OK” To Commit',
+ currentColor: 'Click To Revert To Original Color'
+ },
+ buttons:
+ {
+ ok: 'Commit To This Color Selection',
+ cancel: 'Cancel And Revert To Original Color'
+ },
+ hue:
+ {
+ radio: 'Set To “Hue” Color Mode',
+ textbox: 'Enter A “Hue” Value (0-360°)'
+ },
+ saturation:
+ {
+ radio: 'Set To “Saturation” Color Mode',
+ textbox: 'Enter A “Saturation” Value (0-100%)'
+ },
+ brightness:
+ {
+ radio: 'Set To “Brightness” Color Mode',
+ textbox: 'Enter A “Brightness” Value (0-100%)'
+ },
+ red:
+ {
+ radio: 'Set To “Red” Color Mode',
+ textbox: 'Enter A “Red” Value (0-255)'
+ },
+ green:
+ {
+ radio: 'Set To “Green” Color Mode',
+ textbox: 'Enter A “Green” Value (0-255)'
+ },
+ blue:
+ {
+ radio: 'Set To “Blue” Color Mode',
+ textbox: 'Enter A “Blue” Value (0-255)'
+ },
+ alpha:
+ {
+ radio: 'Set To “Alpha” Color Mode',
+ textbox: 'Enter A “Alpha” Value (0-100)'
+ },
+ hex:
+ {
+ textbox: 'Enter A “Hex” Color Value (#000000-#ffffff)',
+ alpha: 'Enter A “Alpha” Value (#00-#ff)'
+ }
+ }
+ }
+}
+ + Callback Pattern+
+ + jPicker List+
+ The list of active jPicker objects. + jPicker Color Class+
+ Definition of the jPicker.Color class.
+(jQuery).jPicker.Color()
+(jQuery).jPicker.Color({ ahex: 'ffffffff' })
+(jQuery).jPicker.Color({ hex: 'ffffff', [a: (0-255)] })
+(jQuery).jPicker.Color({ r: (0-255), g: (0-255), b: (0-255), [a: (0-255)] })
+(jQuery).jPicker.Color({ h: (0-360), s: (0-100), v: (0-100), [a: (0-255)] })
+{
+ val: function(name, value, context),
+ bind: function(callback) where callback is function(color, [context]),
+ unbind: function(callback)
+}
+
+method "val" usage
+
+val(name) : get value
+
+ 'r': red (0-255)
+ 'g': green (0-255)
+ 'b': blue (0-255)
+ 'a': alpha (0-255)
+ 'h': hue (0-360)
+ 's': saturation (0-100)
+ 'v': value (0-100)
+ 'hex': hex (000000-ffffff)
+ 'ahex': ahex (00000000-ffffffff)
+ 'all': all all
+
+ ex. Usage
+
+ val('r'): (0-255)
+ val('h'): (0-360)
+ val('hex'): (000000-ffffff)
+ val('rg'): { r: (0-255), g: (0-255) }
+ val('rgba'): { r: (0-255), g: (0-255), b: (0-255), a: (0-255) }
+ val('hvga'): { h: (0-255), v: (0-100), g: (0-255), a: (0-255) }
+ val('all'): { r: (0-255), g: (0-255), b: (0-255), a: (0-255), h: (0-360) --
+ s: (0-100), v: (0-100), hex: (000000-ffffff), --
+ ahex: (00000000-ffffffff) }
+
+val(name, value, [context]) : set value
+
+ 'r': red (0-255)
+ 'g': green (0-255)
+ 'b': blue (0-255)
+ 'a': alpha (0-255)
+ 'h': hue (0-360)
+ 's': saturation (0-100)
+ 'v': value (0-100)
+ 'hex': hex (000000-ffffff)
+ 'ahex': ahex (00000000-ffffffff)
+
+ ex. Usage
+
+ val('r', (0-255)) || val('r', { r: (0-255) })
+ val('h', (0-360)) || val('h', { h: (0-360) })
+ val('hex', (000000-ffffff)) || val('hex', { hex: (000000-ffffff) })
+ val('rg', { r: (0-255), g: (0-255) })
+ val('rgba', { r: (-255), g: (0-255), b: (0-255), a: (0-255) })
+ val(null, { r: (0-255), g: (0-255) })
+ val('hvga'): incorrect usage - cannot set hsv AND rgb as they will conflict
+ + jPicker ColorMethod Utility Class+
+ Static methods for altering and retrieving different color spaces.
+(jQuery).jPicker.ColorMethods.hexToRgba:
+ function(hex)
+ returns { r: (0-255), g: (0-255), b: (0-255), a: (0-255) }
+
+(jQuery).jPicker.ColorMethods.validateHex:
+ function(hex)
+ returns new hex string
+
+(jQuery).jPicker.ColorMethods.rgbaToHex:
+ function({ r: (0-255), g: (0-255), b: (0-255), a: (0-255) })
+ returns hex string
+
+(jQuery).jPicker.ColorMethods.intToHex:
+ function(number)
+ returns hex string
+
+(jQuery).jPicker.ColorMethods.hexToInt:
+ function(hex)
+ return integer
+
+(jQuery).jPicker.ColorMethods.rgbToHsv:
+ function({ r: (0-255), g: (0-255), b: (0-255) })
+ returns { h: (0-360), s: (0-100), v: (0-100) }
+
+(jQuery).jPicker.ColorMethods.hsvToRgb:
+ function({ h: (0-360), s: (0-100), v: (0-100) })
+ returns { r: (0-255), g: (0-255), b: (0-255) }
+
+ + Known Issues+
+ Coming Soon+
+ Planned For Future Release+
+ Change Log+
"," "];c.fn.extend({text:function(a){if(c.isFunction(a))return this.each(function(b){var d=
+c(this);d.text(a.call(this,b,d.text()))});if(typeof a!=="object"&&a!==B)return this.empty().append((this[0]&&this[0].ownerDocument||t).createTextNode(a));return c.text(this)},wrapAll:function(a){if(c.isFunction(a))return this.each(function(d){c(this).wrapAll(a.call(this,d))});if(this[0]){var b=c(a,this[0].ownerDocument).eq(0).clone(true);this[0].parentNode&&b.insertBefore(this[0]);b.map(function(){for(var d=this;d.firstChild&&d.firstChild.nodeType===1;)d=d.firstChild;return d}).append(this)}return this},
+wrapInner:function(a){if(c.isFunction(a))return this.each(function(b){c(this).wrapInner(a.call(this,b))});return this.each(function(){var b=c(this),d=b.contents();d.length?d.wrapAll(a):b.append(a)})},wrap:function(a){return this.each(function(){c(this).wrapAll(a)})},unwrap:function(){return this.parent().each(function(){c.nodeName(this,"body")||c(this).replaceWith(this.childNodes)}).end()},append:function(){return this.domManip(arguments,true,function(a){this.nodeType===1&&this.appendChild(a)})},
+prepend:function(){return this.domManip(arguments,true,function(a){this.nodeType===1&&this.insertBefore(a,this.firstChild)})},before:function(){if(this[0]&&this[0].parentNode)return this.domManip(arguments,false,function(b){this.parentNode.insertBefore(b,this)});else if(arguments.length){var a=c(arguments[0]);a.push.apply(a,this.toArray());return this.pushStack(a,"before",arguments)}},after:function(){if(this[0]&&this[0].parentNode)return this.domManip(arguments,false,function(b){this.parentNode.insertBefore(b,
+this.nextSibling)});else if(arguments.length){var a=this.pushStack(this,"after",arguments);a.push.apply(a,c(arguments[0]).toArray());return a}},remove:function(a,b){for(var d=0,e;(e=this[d])!=null;d++)if(!a||c.filter(a,[e]).length){if(!b&&e.nodeType===1){c.cleanData(e.getElementsByTagName("*"));c.cleanData([e])}e.parentNode&&e.parentNode.removeChild(e)}return this},empty:function(){for(var a=0,b;(b=this[a])!=null;a++)for(b.nodeType===1&&c.cleanData(b.getElementsByTagName("*"));b.firstChild;)b.removeChild(b.firstChild);
+return this},clone:function(a){var b=this.map(function(){if(!c.support.noCloneEvent&&!c.isXMLDoc(this)){var d=this.outerHTML,e=this.ownerDocument;if(!d){d=e.createElement("div");d.appendChild(this.cloneNode(true));d=d.innerHTML}return c.clean([d.replace(za,"").replace(fb,'="$1">').replace($,"")],e)[0]}else return this.cloneNode(true)});if(a===true){na(this,b);na(this.find("*"),b.find("*"))}return b},html:function(a){if(a===B)return this[0]&&this[0].nodeType===1?this[0].innerHTML.replace(za,""):null;
+else if(typeof a==="string"&&!Ca.test(a)&&(c.support.leadingWhitespace||!$.test(a))&&!P[(Ba.exec(a)||["",""])[1].toLowerCase()]){a=a.replace(Aa,"<$1>");try{for(var b=0,d=this.length;b | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||