From d70dcff545a54066cb4b0c54b0c9f101fc9eab4c Mon Sep 17 00:00:00 2001
From: Kurtis LoVerde <kurt@loverde.org>
Date: Mon, 28 Mar 2016 17:32:32 -0400
Subject: [PATCH] (1) Add styling for <option>; (2) Add unhighlight setting;
 (3) Optimize structure of pickAndChoose.css while also fixing a class name
 typo; (4) Fix rendering of demo.html in IE 8 by disabling (in)compatibility
 mode

---
 CHANGELOG.md                |   9 ++
 README.md                   |   4 +-
 css/pickAndChoose.css       |  23 ++---
 demo.html                   | 198 ++++++++++++++++++++++++------------
 jquery.pickandchoose.js     |  48 +++++++--
 jquery.pickandchoose.min.js |   5 +-
 6 files changed, 198 insertions(+), 89 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 5013f6a..c7b37c7 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,12 @@
+## Release 1.2 (March 28, 2016)
+
+* New configuration option:  unhighlightAfterMove.  This is enabled by default.
+* New configuration option:  optionCssClass.  This specifies a CSS class which is applied to all &lt;options&gt;s.
+* Added the ability to style &lt;option&gt;s individually via their declarations (works independently of, but also can be used in conjunction with, optionCssClass)
+* Fixed class names typo in stylesheet.css
+* Fixed rendering of demo.html in ancient IE 8
+
+
 ## Release 1.1 (March 27, 2016)
 
 * Added support for initializing on pre-existing, pre-populated &lt;select&gt;s
diff --git a/README.md b/README.md
index 795d2c9..cc50e13 100644
--- a/README.md
+++ b/README.md
@@ -1,4 +1,4 @@
-PickAndChoose v1.1
+PickAndChoose v1.2
 ==================
 
 See LICENSE for this software's licensing terms.
@@ -76,6 +76,7 @@ See the included HTML file for more in-depth examples.
 | `buttonSelectAllClass` | The CSS class of the select-all &lt;button&gt; | pacButtonSelectAll |
 | `buttonDeselectClass` | The CSS class of the deselect &lt;button&gt; | pacButtonDeselect |
 | `buttonDeselectAllClass` | The CSS class of the deselect-all &lt;button&gt; | pacButtonDeselectAll |
+| `optionCssClass` | A CSS class to apply to all &lt;options&gt;s | null |
 | `buttonSelectText` | The text of the select button | &gt; |
 | `buttonSelectAllText` | The text of the select-all button | &gt;&gt; |
 | `buttonDeselectText` | The text of the deselect button |  &lt; |
@@ -87,6 +88,7 @@ See the included HTML file for more in-depth examples.
 | `selectedName` | The name of the &lt;select&gt; containing the selected items.  If you provide your own &lt;select&gt; elements instead of having them constructed for you, this setting is ignored. | pacSelectedItems |
 | `unselectedItems` | Key/value pairs of items to populate the unselected items' &lt;select&gt; with.  If you provide your own &lt;select&gt; elements instead of having them constructed for you, this setting is ignored. | null |
 | `selectedItems` | Key/value pairs of items to populate the selected items' &lt;select&gt; with.  If you provide your own &lt;select&gt; elements instead of having them constructed for you, this setting is ignored. | null |
+| `unhighlightAfterMove` | Determines whether to unhighlight an item after moving it to the other &lt;select&gt;.  Highlighted items appear as if they've been clicked. | true |
 | `onChangeCallback` | A callback function to execute when the user uses the buttons.  The callback only fires if the user's action resulted in a change. | null |
 | `showErrors` | Determines whether to display initialization errors in the page.  If set to `true`, your users will see them, so you might choose to treat this as a debug option.  Regardless of the setting, the plugin will throw initialization errors as exceptions. | false |
 
diff --git a/css/pickAndChoose.css b/css/pickAndChoose.css
index 74b4fe3..2165c69 100644
--- a/css/pickAndChoose.css
+++ b/css/pickAndChoose.css
@@ -11,35 +11,30 @@
  */
 
 
-/* containers */
-
 .pacContainer {
    display: table;
-   vertical-align: middle;
+   height: 250px;
 }
 
-.pacContainer .msUnselectedContainer {
+.pacContainer .pacUnselectedContainer,
+.pacContainer .pacSelectedContainer {
    display: table-cell;
-   vertical-align:middle;
+   height: 100%;
+   vertical-align: middle;
 }
 
 .pacContainer .pacButtonContainer {
    display: table-cell;
+   height: 100%;
    vertical-align: middle;
    padding-left: 25px;
    padding-right: 25px;
 }
 
-.pacContainer .msSelectedContainer {
-   display: table-cell;
-   vertical-align:middle;
-}
-
-/* container content */
-
-.pacContainer select {
+.pacContainer .pacUnselectedContainer select,
+.pacContainer .pacSelectedContainer select {
    width: 200px;
-   height: 300px;
+   height: 100%;
 }
 
 .pacContainer .pacButtonContainer button.pacButtonSelect,
diff --git a/demo.html b/demo.html
index 86a436b..89fc4da 100644
--- a/demo.html
+++ b/demo.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 
 <!--
-   PickAndChoose v1.1
+   PickAndChoose v1.2
    https://www.github.com/kloverde/jquery-PickAndChoose
 
    This software is licensed under the 3-clause BSD license.
@@ -15,6 +15,7 @@
 <html lang="en-US">
    <head>
       <meta charset="UTF-8"/>
+      <meta http-equiv="X-UA-Compatible" content="IE=8"/>  <!-- IE 8 is so ancient that "compatibility mode" now means incompatibility mode.  Turn it off. -->
 
       <title>PickAndChoose Demo</title>
 
@@ -33,44 +34,57 @@
             color: #FFFFFF !important;
          }
 
-         div#callbackOutput {
+         #callbackOutput {
             margin-top: 20px;
             width: 500px;
             min-height: 80px;
             border: 1px solid #000000;
          }
-      </style>
 
-      <script type="text/javascript" src="http://code.jquery.com/jquery-1.12.1.min.js"></script>
-      <script type="text/javascript" src="jquery.pickAndChoose.js"></script>
+         #widget5 select {
+            border: 1px solid black;
+         }
 
-      <script type="text/javascript">
-         function callback( operation, recipient, items ) {
-            var div = $( "#callbackOutput" );
+         #widget5 select:hover {
+            border: 1px solid #0000FF;
+            background-color: #EDF9FC;
+         }
 
-            div.html( "Operation: " + operation + "<br/>" );
-            div.append( "Recipient of items: " + recipient.prop("id") + "<br/>" );
-            div.append( "Received items:<br/>" );
+         option.optionTextColor {
+            color: #FFFFFF;
+         }
 
-            $.each( items, function(idx, item) {
-               div.append( "key: " + item.key + ", value: " + item.value + "<br/>" );
-            } );
+         option.optionStyle1 {
+            background-color: #6BC9E8;
          }
 
+         option.optionStyle2 {
+            background-color: #C88DF0;
+         }
+
+         option.optionStyle3 {
+            background-color: #F7A414;
+         }
+
+         p, li{
+            width: 510px;
+         }
+      </style>
+
+      <script type="text/javascript" src="http://code.jquery.com/jquery-1.12.1.min.js"></script>
+      <script type="text/javascript" src="jquery.pickAndChoose.js"></script>
+
+      <script type="text/javascript">
          $( document ).ready( function() {
             $( "#widget1" ).pickAndChoose( {
-               unselectedItems : {
-                                   "Choice 1" : "choice1",
+               unselectedItems : { "Choice 1" : "choice1",
                                    "Choice 2" : "choice2",
                                    "Choice 4" : "choice4",
                                    "Choice 5" : "choice5",
-                                   "Choice 7" : "choice7",
-                                 },
+                                   "Choice 7" : "choice7" },
 
-               selectedItems   : {
-                                    "Choice 3" : "choice3",
-                                    "Choice 6" : "choice6"
-                                 }
+               selectedItems   : { "Choice 3" : "choice3",
+                                   "Choice 6" : "choice6" }
             } );
 
             $( "#widget2" ).pickAndChoose( {
@@ -87,18 +101,14 @@
                buttonSelectAllClass   : "special",
                buttonDeselectAllClass : "special",
 
-               unselectedItems : {
-                                   "Choice 1" : "choice1",
+               unselectedItems : { "Choice 1" : "choice1",
                                    "Choice 2" : "choice2",
                                    "Choice 4" : "choice4",
                                    "Choice 5" : "choice5",
-                                   "Choice 7" : "choice7",
-                                 },
+                                   "Choice 7" : "choice7" },
 
-               selectedItems   : {
-                                    "Choice 3" : "choice3",
-                                    "Choice 6" : "choice6"
-                                 }
+               selectedItems   : { "Choice 3" : "choice3",
+                                   "Choice 6" : "choice6" }
             } );
 
             $( "#widget3" ).pickAndChoose( {
@@ -107,38 +117,58 @@
                unselectedId     : "widget3Unselected",
                unselectedName   : "widget3Unselected",
 
-               unselectedItems  : {
-                                   "Choice 1" : "choice1",
-                                   "Choice 2" : "choice2",
-                                   "Choice 3" : "choice3",
-                                   "Choice 4" : "choice4",
-                                   "Choice 5" : "choice5",
-                                 },
-               onChangeCallback : callback
+               unselectedItems  : { "Choice 1" : "choice1",
+                                    "Choice 2" : "choice2",
+                                    "Choice 3" : "choice3",
+                                    "Choice 4" : "choice4",
+                                    "Choice 5" : "choice5" },
+
+               onChangeCallback : changeCallback
             } );
 
             $( "#widget4" ).pickAndChoose( {
+                selectedId           : "widget4Selected",
+                selectedName         : "widget4Selected",
+                unselectedId         : "widget4Unselected",
+                unselectedName       : "widget4Unselected",
+
                 createSelectElements : false,
                 unselectedId         : "select1",
                 selectedId           : "select2"
              } );
 
+            $( "#widget5" ).pickAndChoose( {
+                selectedId           : "widget5Selected",
+                selectedName         : "widget5Selected",
+                unselectedId         : "widget5Unselected",
+                unselectedName       : "widget5Unselected",
+
+               optionCssClass : "optionTextColor",
+
+               unselectedItems : { "Choice 1" : { value    : "choice1",
+                                                  cssClass : "optionStyle1" },
+
+                                   "Choice 2" : { value    : "choice2",
+                                                  cssClass : "optionStyle2" },
+
+                                   "Choice 3" : { value    : "choice3",
+                                                  cssClass : "optionStyle3" } }
+            } );
+
             try {
-               $( "#widget5" ).pickAndChoose( {
+               $( "#widget6" ).pickAndChoose( {
                   selectedId      : "widget4Selected",
                   selectedName    : "widget4Selected",
                   unselectedId    : "widget4Unselected",
                   unselectedName  : "widget4Unselected",
 
-                  unselectedItems : {
-                                      "Choice 1" : "choice1",
+                  unselectedItems : { "Choice 1" : "choice1",
                                       "Choice 2" : "choice2",
                                       "Choice 3" : "choice3",
                                       "Choice 4" : "choice4",
                                       "Choice 5" : "choice5",
                                       "Choice 6" : "choice6",
-                                      "Choice 7" : "choice7",
-                                    },
+                                      "Choice 7" : "choice7" },
 
                   selectedItems   : { "Choice 3" : "value does not matter when scanning for duplicate keys" },
                   showErrors : true
@@ -146,8 +176,25 @@
             } catch( e ) {
             }
 
-            $( "#widget5" ).append( "<p>This line was successfully written via script due to catching the exception</p>" );
+            $( "#widget6" ).append( "<p>This line was successfully written via script due to catching the exception</p>" );
          } );
+
+         function optionOnClick() {
+             var count = $( "#widget5Unselected select option:selected" ).length;
+             $( "#numOptionsSelected" ).html( count + " options selected" );
+          }
+
+          function changeCallback( operation, recipient, items ) {
+             var div = $( "#callbackOutput" );
+
+             div.html( "Operation: " + operation + "<br/>" );
+             div.append( "Recipient of items: " + recipient.prop("id") + "<br/>" );
+             div.append( "Received items:<br/>" );
+
+             $.each( items, function(idx, item) {
+                div.append( "key: " + item.key + ", value: " + item.value + "<br/>" );
+             } );
+          }
       </script>
    </head>
 
@@ -157,10 +204,12 @@ <h2>Successful initialization</h2>
          <div id="widget1"></div>
 
          <h2>Overriding default configuration:  ensuring uniqueness of &lt;select&gt; identifiers &amp; altering button properties</h2>
-         <h4>
-            Note that for the first time, IDs and names were passed in.<br/>
-            See README.md or the plugin code for a complete list of customization options.
-         </h4>
+         <p>
+            Note that for the first time, IDs and names were passed in.  You need to do this if you have more than one widget in
+            your page, since relying on the default value will result in duplicates.
+         </p>
+         <p>CSS styling has also been added to the buttons, and their default text has been changed.</p>
+         <p>See README.md or the plugin code for a complete list of customization options.</p>
          <div id="widget2"></div>
 
          <h2>Demonstrating callback</h2>
@@ -168,13 +217,13 @@ <h2>Demonstrating callback</h2>
          <div id="callbackOutput">Look here after making some selections</div>
 
          <h2>Initializing with preexisting &lt;select&gt; elements</h2>
-         <h4>
-            Unlike the other examples seen thus far, the &lt;select&gt;s seen here were<br/>
-            not created by PickAndChoose; they were already present in the page.<br/>
-            The buttons were still created dynamically.  If you go this route, put<br/>
-            the &lt;select&gt;s adjacent to each other in their own container, with no<br/>
+         <p>
+            Unlike the other examples seen thus far, the &lt;select&gt;s seen here were
+            not created by PickAndChoose; they were already present in the page.
+            The buttons were still created dynamically.  If you go this route, put
+            the &lt;select&gt;s adjacent to each other in their own container, with no
             other content inside. 
-         </h4>
+         </p>
          <div id="widget4">
             <select id="select1" name="select1">
                <option value="choice1">Choice 1</option>
@@ -187,17 +236,40 @@ <h4>
             </select>
          </div>
 
+         <h2>Styling the selection boxes</h2>
+         <p>
+            PickAndChoose supports two ways of specifying a CSS class for &lt;option&gt;:
+         </p>
+         <ol>
+            <li>
+               <code>settings.optionCssClass</code>, which is applied to every &lt;option&gt;
+               in the widget.  Here, a global style is used to make the text white.  Of course,
+               you could also use CSS to target them directly, rather than  assigning a class.
+               That's how the &lt;select&gt;s got their hover colors.  Use whichever method
+               you prefer.
+               <br/><br/>
+            </li>
+
+            <li>Individual styles:<br/><br/>
+               As of PickAndChoose v1.2, an &lt;option&gt;'s value declaration can be an
+               object.  This allows you to specify additional configuration for an
+               &lt;option&gt;, which you can use to add a CSS class.  Here, individual
+               styles are used to set the background color.
+            </li>
+         </ol>
+         <div id="widget5"></div>
+
          <h2>Failed initialization</h2>
-         <h4>
-            If you attempt to initialize the widget with the same key present in both<br/>
-            &lt;select&gt;s, the widget will not initialize and an exception will be<br/>
-            thrown.  If showErrors is set to true, the exception message is written <br/>
-            to the container (see below).  If you can't be sure of the integrity of<br/>
-            your data, and if you want the rest of your page's JavaScript to continue<br/>
-            in the event of an initialization failure, be sure to wrap the plugin<br/>
+         <p>
+            If you attempt to initialize the widget with the same key present in both
+            &lt;select&gt;s, the widget will not initialize and an exception will be
+            thrown.  If showErrors is set to true, the exception message is written 
+            to the container (see below).  If you can't be sure of the integrity of
+            your data, and if you want the rest of your page's JavaScript to continue
+            in the event of an initialization failure, be sure to wrap the plugin
             invocation in a try/catch.
-         </h4>
-         <div id="widget5"></div>
+         </p>
+         <div id="widget6"></div>
       </form>
 
       <h2>Donations</h2>
diff --git a/jquery.pickandchoose.js b/jquery.pickandchoose.js
index e4b561e..1f6ece7 100644
--- a/jquery.pickandchoose.js
+++ b/jquery.pickandchoose.js
@@ -1,5 +1,5 @@
 /*
- * PickAndChoose v1.1
+ * PickAndChoose v1.2
  * https://www.github.com/kloverde/jquery-PickAndChoose
  *
  * This software is licensed under the 3-clause BSD license.
@@ -44,6 +44,9 @@
          // The CSS class of the deselect-all <button>
          buttonDeselectAllClass : "pacButtonDeselectAll",
 
+         // A CSS class to apply to all <options>s
+         optionCssClass : null,
+
          // The text of the select button
          buttonSelectText : ">",
 
@@ -91,6 +94,10 @@
          // constructed for you, this setting is ignored.
          selectedItems : null,
 
+         // Determines whether to unhighlight an item after moving it to the other
+         // <select>.  Highlighted items appear as if they've been clicked.
+         unhighlightAfterMove : true,
+
          // A callback function to execute when the user uses the buttons.  The
          // callback only fires if the user's action resulted in a change.
          onChangeCallback : null,
@@ -194,6 +201,31 @@
          }
       }
 
+      // Creates an <option>.  'Key' is a string, but 'value' can be a
+      // string or an object.  Objects provide additional configuration.
+      function createSelectOption( key, value ) {
+         var option = $( "<option></option>" ).text( key );
+         var individualCssClass = "";
+
+         if( typeof value === "string" ) {
+            option.prop( "value", value )
+         } else if( typeof value === "object" ) {
+            option.prop( "value", value.value );
+         } else {
+            throwException( "Invalid value type (" + (typeof value) + ")")
+         }
+
+         if( value.cssClass != undefined && value.cssClass != null ) {
+            individualCssClass = value.cssClass;
+         }
+
+         option.addClass( (settings.optionCssClass != null ? settings.optionCssClass : "")
+                        + " "
+                        + individualCssClass );
+
+         return option;
+      }
+
       function buildWidget() {
          var unselectedSelect = null,
              selectedSelect   = null;
@@ -220,10 +252,8 @@
             } );
 
             if( settings.unselectedItems != null ) {
-               $.each( settings.unselectedItems, function(key, value) {   
-                  unselectedSelect.append( $("<option/>")
-                                             .text(key)
-                                             .prop("value", value) );
+               $.each( settings.unselectedItems, function(key, value) {
+                  unselectedSelect.append( createSelectOption(key, value) );
                } );
             }
 
@@ -235,10 +265,8 @@
             } );
 
             if( settings.selectedItems != null ) {
-               $.each( settings.selectedItems, function(key, value) {   
-                  selectedSelect.append( $("<option></option>")
-                                             .text(key)
-                                             .prop("value", value) );
+               $.each( settings.selectedItems, function(key, value) {
+                  selectedSelect.append( createSelectOption(key, value) );
                } );
             }
          }
@@ -326,6 +354,8 @@
             obj.value = elem.val();
 
             movedItems[ i++ ] = obj;
+
+            elem.prop( "selected", !settings.unhighlightAfterMove );
             elem.appendTo( to );
          } );
 
diff --git a/jquery.pickandchoose.min.js b/jquery.pickandchoose.min.js
index 7552129..5b3b5c7 100644
--- a/jquery.pickandchoose.min.js
+++ b/jquery.pickandchoose.min.js
@@ -1,5 +1,5 @@
 /*
- * PickAndChoose v1.1
+ * PickAndChoose v1.2
  * https://www.github.com/kloverde/jquery-PickAndChoose
  *
  * This software is licensed under the 3-clause BSD license.
@@ -9,4 +9,5 @@
  *
  * Donations:  https://paypal.me/KurtisLoVerde/6
  */
-!function(e){"use strict";e.fn.pickAndChoose=function(t){function n(t){var n="PickAndChoose error in "+e(r).prop("id")+":  "+t;throw u.showErrors&&r.append(n),n}function l(t){for(var l=0;l<t.length;l++)for(var s=e(t[l]).text(),a=l+1;a<t.length;a++)if(s===e(t[a]).text()){var c=e(t).parent();n(c.prop("id")+" has duplicate key '"+s+"'")}}function s(t,l){for(var s=0;s<t.length;s++)for(var a=e(t[s]).text(),c=0;c<l.length;c++)if(a===e(l[c]).text()){var o=e(t[0]).parent(),d=e(l[0]).parent();n(o.prop("id")+" and "+d.prop("id")+" have the same key '"+a+"'")}}function a(t,a){if(u.createSelectElements){var c=u.unselectedItems,o=u.selectedItems;null!=c&&null!=o&&e.each(c,function(t,l){e.each(o,function(e,l){t===e&&n("settings.unselectedItems and settings.selectedItems have the same key '"+t+"'")})})}else{(null==t||0===t.length)&&n("Could not find '"+u.unselectedId+"'"),(null==a||0===a.length)&&n("Could not find '"+u.selectedId+"'");var c=t.find("option"),o=a.find("option");l(c),l(o),s(c,o)}}function c(){var t=null,n=null;u.createSelectElements||(t=e("#"+u.unselectedId),n=e("#"+u.selectedId)),a(t,n);var l=e("<div/>"),s=e("<div/>"),c=e("<div/>");u.createSelectElements&&(t=e("<select/>",{id:u.unselectedId,name:u.unselectedName}),null!=u.unselectedItems&&e.each(u.unselectedItems,function(n,l){t.append(e("<option/>").text(n).prop("value",l))}),n=e("<select/>",{id:u.selectedId,name:u.selectedName}),null!=u.selectedItems&&e.each(u.selectedItems,function(t,l){n.append(e("<option></option>").text(t).prop("value",l))})),t.prop("multiple",!0),n.prop("multiple",!0),t.appendTo(l),n.appendTo(c);var C=e("<button/>",{text:u.buttonSelectText,type:"button"}),f=e("<button/>",{text:u.buttonSelectAllText,type:"button"}),b=e("<button/>",{text:u.buttonDeselectText,type:"button"}),h=e("<button/>",{text:u.buttonDeselectAllText,type:"button"});C.on("click",function(){o(p,t,n)}),f.on("click",function(){d(p,t,n)}),b.on("click",function(){o(i,n,t)}),h.on("click",function(){d(i,n,t)}),C.appendTo(s),f.appendTo(s),b.appendTo(s),h.appendTo(s),u.addCssClasses&&(r.addClass(u.containerClass),l.addClass(u.unselectedContainerClass),s.addClass(u.buttonContainerClass),c.addClass(u.selectedContainerClass),C.addClass(u.buttonSelectClass),f.addClass(u.buttonSelectAllClass),b.addClass(u.buttonDeselectClass),h.addClass(u.buttonDeselectAllClass)),r.append(l),r.append(s),r.append(c)}function o(t,n,l){var s=n.find("option:selected"),a=new Array(s.length),c=0;s.each(function(){var t=e(this),n=new Object;n.key=t.text(),n.value=t.val(),a[c++]=n,t.appendTo(l)}),"function"==typeof u.onChangeCallback&&a.length>0&&u.onChangeCallback(t,l,a)}function d(t,n,l){n.find("option").each(function(){e(this).prop("selected",!0)}),o(t,n,l)}var u=e.extend({addCssClasses:!0,containerClass:"pacContainer",unselectedContainerClass:"pacUnselectedContainer",selectedContainerClass:"pacSelectedContainer",buttonContainerClass:"pacButtonContainer",buttonSelectClass:"pacButtonSelect",buttonSelectAllClass:"pacButtonSelectAll",buttonDeselectClass:"pacButtonDeselect",buttonDeselectAllClass:"pacButtonDeselectAll",buttonSelectText:">",buttonSelectAllText:">>",buttonDeselectText:"<",buttonDeselectAllText:"<<",createSelectElements:!0,unselectedId:"pacUnselectedItems",unselectedName:"pacUnselectedItems",selectedId:"pacSelectedItems",selectedName:"pacSelectedItems",unselectedItems:null,selectedItems:null,onChangeCallback:null,showErrors:!1},t),p="select",i="deselect",r=this;c()}}(jQuery);
+
+!function(e){"use strict";e.fn.pickAndChoose=function(t){function n(t){var n="PickAndChoose error in "+e(C).prop("id")+":  "+t;throw i.showErrors&&C.append(n),n}function l(t){for(var l=0;l<t.length;l++)for(var s=e(t[l]).text(),a=l+1;a<t.length;a++)if(s===e(t[a]).text()){var o=e(t).parent();n(o.prop("id")+" has duplicate key '"+s+"'")}}function s(t,l){for(var s=0;s<t.length;s++)for(var a=e(t[s]).text(),o=0;o<l.length;o++)if(a===e(l[o]).text()){var c=e(t[0]).parent(),d=e(l[0]).parent();n(c.prop("id")+" and "+d.prop("id")+" have the same key '"+a+"'")}}function a(t,a){if(i.createSelectElements){var o=i.unselectedItems,c=i.selectedItems;null!=o&&null!=c&&e.each(o,function(t,l){e.each(c,function(e,l){t===e&&n("settings.unselectedItems and settings.selectedItems have the same key '"+t+"'")})})}else{(null==t||0===t.length)&&n("Could not find '"+i.unselectedId+"'"),(null==a||0===a.length)&&n("Could not find '"+i.selectedId+"'");var o=t.find("option"),c=a.find("option");l(o),l(c),s(o,c)}}function o(t,l){var s=e("<option></option>").text(t),a="";return"string"==typeof l?s.prop("value",l):"object"==typeof l?s.prop("value",l.value):n("Invalid value type ("+typeof l+")"),void 0!=l.cssClass&&null!=l.cssClass&&(a=l.cssClass),s.addClass((null!=i.optionCssClass?i.optionCssClass:"")+" "+a),s}function c(){var t=null,n=null;i.createSelectElements||(t=e("#"+i.unselectedId),n=e("#"+i.selectedId)),a(t,n);var l=e("<div/>"),s=e("<div/>"),c=e("<div/>");i.createSelectElements&&(t=e("<select/>",{id:i.unselectedId,name:i.unselectedName}),null!=i.unselectedItems&&e.each(i.unselectedItems,function(e,n){t.append(o(e,n))}),n=e("<select/>",{id:i.selectedId,name:i.selectedName}),null!=i.selectedItems&&e.each(i.selectedItems,function(e,t){n.append(o(e,t))})),t.prop("multiple",!0),n.prop("multiple",!0),t.appendTo(l),n.appendTo(c);var f=e("<button/>",{text:i.buttonSelectText,type:"button"}),h=e("<button/>",{text:i.buttonSelectAllText,type:"button"}),b=e("<button/>",{text:i.buttonDeselectText,type:"button"}),v=e("<button/>",{text:i.buttonDeselectAllText,type:"button"});f.on("click",function(){d(p,t,n)}),h.on("click",function(){u(p,t,n)}),b.on("click",function(){d(r,n,t)}),v.on("click",function(){u(r,n,t)}),f.appendTo(s),h.appendTo(s),b.appendTo(s),v.appendTo(s),i.addCssClasses&&(C.addClass(i.containerClass),l.addClass(i.unselectedContainerClass),s.addClass(i.buttonContainerClass),c.addClass(i.selectedContainerClass),f.addClass(i.buttonSelectClass),h.addClass(i.buttonSelectAllClass),b.addClass(i.buttonDeselectClass),v.addClass(i.buttonDeselectAllClass)),C.append(l),C.append(s),C.append(c)}function d(t,n,l){var s=n.find("option:selected"),a=new Array(s.length),o=0;s.each(function(){var t=e(this),n=new Object;n.key=t.text(),n.value=t.val(),a[o++]=n,t.prop("selected",!i.unhighlightAfterMove),t.appendTo(l)}),"function"==typeof i.onChangeCallback&&a.length>0&&i.onChangeCallback(t,l,a)}function u(t,n,l){n.find("option").each(function(){e(this).prop("selected",!0)}),d(t,n,l)}var i=e.extend({addCssClasses:!0,containerClass:"pacContainer",unselectedContainerClass:"pacUnselectedContainer",selectedContainerClass:"pacSelectedContainer",buttonContainerClass:"pacButtonContainer",buttonSelectClass:"pacButtonSelect",buttonSelectAllClass:"pacButtonSelectAll",buttonDeselectClass:"pacButtonDeselect",buttonDeselectAllClass:"pacButtonDeselectAll",optionCssClass:null,buttonSelectText:">",buttonSelectAllText:">>",buttonDeselectText:"<",buttonDeselectAllText:"<<",createSelectElements:!0,unselectedId:"pacUnselectedItems",unselectedName:"pacUnselectedItems",selectedId:"pacSelectedItems",selectedName:"pacSelectedItems",unselectedItems:null,selectedItems:null,unhighlightAfterMove:!0,onChangeCallback:null,showErrors:!1},t),p="select",r="deselect",C=this;c()}}(jQuery);