social_stream 0.1.4 → 0.1.5

data/lib/generators/social_stream/templates/public/javascripts/ui.dropdownchecklist.js

@@ -0,0 +1,787 @@
+;(function($) {
+    /*
+    * ui.dropdownchecklist
+    *
+    * Copyright (c) 2008-2010 Adrian Tosca, Copyright (c) 2010 Ittrium LLC
+    * Dual licensed under the MIT (MIT-LICENSE.txt)
+    * and GPL (GPL-LICENSE.txt) licenses.
+    *
+    */
+    // The dropdown check list jQuery plugin transforms a regular select html element into a dropdown check list.
+    $.widget("ui.dropdownchecklist", {
+    	// Some globlals
+    	// $.ui.dropdownchecklist.gLastOpened - keeps track of last opened dropdowncheck list so we can close it
+    	// $.ui.dropdownchecklist.gIDCounter - simple counter to provide a unique ID as needed
+        version: function() {
+            alert('DropDownCheckList v1.1');
+        },    	
+        // Creates the drop container that keeps the items and appends it to the document
+        _appendDropContainer: function( controlItem ) {
+            var wrapper = $("<div/>");
+            // the container is wrapped in a div
+            wrapper.addClass("ui-dropdownchecklist ui-dropdownchecklist-dropcontainer-wrapper");
+            wrapper.addClass("ui-widget");
+            // assign an id
+            wrapper.attr("id",controlItem.attr("id") + '-ddw');
+            // initially hidden
+            wrapper.css({ position: 'absolute', left: "-33000px", top: "-33000px"  });
+            
+            var container = $("<div/>"); // the actual container
+            container.addClass("ui-dropdownchecklist-dropcontainer ui-widget-content");
+            container.css("overflow-y", "auto");
+            wrapper.append(container);
+            
+            // insert the dropdown after the master control to try to keep the tab order intact
+            // if you just add it to the end, tabbing out of the drop down takes focus off the page
+            // @todo 22Sept2010 - check if size calculation is thrown off if the parent of the
+            //		selector is hidden.  We may need to add it to the end of the document here, 
+            //		calculate the size, and then move it back into proper position???
+			//$(document.body).append(wrapper);
+            wrapper.insertAfter(controlItem);
+
+            // flag that tells if the drop container is shown or not
+            wrapper.isOpen = false;
+            return wrapper;
+        },
+        // Look for browser standard 'open' on a closed selector
+		_isDropDownKeyShortcut: function(e,keycode) {
+			return e.altKey && ($.ui.keyCode.DOWN == keycode);// Alt + Down Arrow
+		},
+		// Look for key that will tell us to close the open dropdown
+		_isDropDownCloseKey: function(e,keycode) {
+			return ($.ui.keyCode.ESCAPE == keycode) || ($.ui.keyCode.ENTER == keycode);
+		},
+		// Handler to change the active focus based on a keystroke, moving some count of
+		// items from the element that has the current focus
+		_keyFocusChange: function(target,delta,limitToItems) {
+			// Find item with current focus
+			var focusables = $(":focusable");
+			var index = focusables.index(target);
+			if ( index >= 0 ) {
+				index += delta;
+				if ( limitToItems ) {
+					// Bound change to list of input elements
+	            	var allCheckboxes = this.dropWrapper.find("input:not([disabled])");
+	            	var firstIndex = focusables.index(allCheckboxes.get(0));
+	            	var lastIndex = focusables.index(allCheckboxes.get(allCheckboxes.length-1));
+	            	if ( index < firstIndex ) {
+	            		index = lastIndex;
+	            	} else if ( index > lastIndex ) {
+	            		index = firstIndex;
+	            	}
+	            }
+				focusables.get(index).focus();
+			}
+		},
+		// Look for navigation, open, close (wired to keyup)
+		_handleKeyboard: function(e) {
+			var self = this;
+			var keyCode = (e.keyCode || e.which);
+			if (!self.dropWrapper.isOpen && self._isDropDownKeyShortcut(e, keyCode)) {
+				// Key command to open the dropdown
+				e.stopImmediatePropagation();
+				self._toggleDropContainer(true);
+			} else if (self.dropWrapper.isOpen && self._isDropDownCloseKey(e, keyCode)) {
+				// Key command to close the dropdown (but we retain focus in the control)
+				e.stopImmediatePropagation();
+				self._toggleDropContainer(false);
+				self.controlSelector.focus();
+			} else if (self.dropWrapper.isOpen 
+					&& (e.target.type == 'checkbox')
+					&& ((keyCode == $.ui.keyCode.DOWN) || (keyCode == $.ui.keyCode.UP)) ) {
+				// Up/Down to cycle throught the open items
+				e.stopImmediatePropagation();
+				self._keyFocusChange(e.target, (keyCode == $.ui.keyCode.DOWN) ? 1 : -1, true);
+			} else if (self.dropWrapper.isOpen && (keyCode == $.ui.keyCode.TAB) ) {
+				// I wanted to adjust normal 'tab' processing here, but research indicates
+				// that TAB key processing is NOT a cancelable event. You have to use a timer
+				// hack to pull the focus back to where you want it after browser tab
+				// processing completes.  Not going to work for us.
+				//e.stopImmediatePropagation();
+				//self._keyFocusChange(e.target, (e.shiftKey) ? -1 : 1, true);
+           }
+		},
+		// Look for change of focus
+		_handleFocus: function(e,focusIn,forDropdown) {
+			var self = this;
+			if (forDropdown && !self.dropWrapper.isOpen) {
+				// if the focus changes when the control is NOT open, mark it to show where the focus is/is not
+				e.stopImmediatePropagation();
+				if (focusIn) {
+					self.controlSelector.addClass("ui-state-hover");
+					if ($.ui.dropdownchecklist.gLastOpened != null) {
+						$.ui.dropdownchecklist.gLastOpened._toggleDropContainer( false );
+					}
+				} else {
+					self.controlSelector.removeClass("ui-state-hover");
+				}
+           	} else if (!forDropdown && !focusIn) {
+           		// The dropdown is open, and an item (NOT the dropdown) has just lost the focus.
+           		// we really need a reliable method to see who has the focus as we process the blur,
+           		// but that mechanism does not seem to exist.  Instead we rely on a delay before
+           		// posting the blur, with a focus event cancelling it before the delay expires.
+				if ( e != null ) { e.stopImmediatePropagation(); }
+				self.controlSelector.removeClass("ui-state-hover");
+				self._toggleDropContainer( false );	        	
+           	}
+		},
+		// Clear the pending change of focus, which keeps us 'in' the control
+		_cancelBlur: function(e) {
+			var self = this;
+			if (self.blurringItem != null) {
+				clearTimeout(self.blurringItem);
+				self.blurringItem = null;
+			} 
+		},
+        // Creates the control that will replace the source select and appends it to the document
+        // The control resembles a regular select with single selection
+        _appendControl: function() {
+            var self = this, sourceSelect = this.sourceSelect, options = this.options;
+
+            // the control is wrapped in a basic container
+            var wrapper = $("<span/>");
+            wrapper.addClass("ui-dropdownchecklist ui-dropdownchecklist-selector-wrapper ui-widget");
+            wrapper.css({ cursor: "default", overflow: "hidden" });
+            
+            // assign an ID 
+            var baseID = sourceSelect.attr("id");
+            if ((baseID == null) || (baseID == "")) {
+            	baseID = "ddcl-" + $.ui.dropdownchecklist.gIDCounter++;
+            } else {
+            	baseID = "ddcl-" + baseID;
+			}
+			wrapper.attr("id",baseID);
+			
+            // the actual control which you can style
+            // inline-block needed to enable 'width' but has interesting problems cross browser
+            var control = $("<span/>");
+            control.addClass("ui-dropdownchecklist-selector ui-state-default");
+            control.css( { display: "inline-block", overflow: "hidden", 'white-space': 'nowrap'} );
+            // Setting a tab index means we are interested in the tab sequence
+            var tabIndex = sourceSelect.attr("tabIndex");
+            if ( tabIndex == null ) {
+            	tabIndex = 0;
+            } else {
+            	tabIndex = parseInt(tabIndex);
+            	if ( tabIndex < 0 ) {
+            		tabIndex = 0;
+            	}
+            }
+			control.attr("tabIndex", tabIndex);
+			control.keyup(function(e) {self._handleKeyboard(e);});
+			control.focus(function(e) {self._handleFocus(e,true,true);});
+			control.blur(function(e) {self._handleFocus(e,false,true);});
+            wrapper.append(control);
+
+			// the optional icon (which is inherently a block)
+			if (options.icon != null) {
+				var iconPlacement = (options.icon.placement == null) ? "left" : options.icon.placement;
+	            var anIcon = $("<div/>");
+	            anIcon.addClass("ui-icon");
+	            anIcon.addClass( (options.icon.toOpen != null) ? options.icon.toOpen : "ui-icon-triangle-1-e");
+	            anIcon.css({ 'float': iconPlacement });
+	            control.append(anIcon);
+			}
+            // the text container keeps the control text that is built from the selected (checked) items
+            // inline-block needed to enable 'width' but has interesting problems cross browser
+            var textContainer = $("<span/>");
+            textContainer.addClass("ui-dropdownchecklist-text");
+            textContainer.css( {  display: "inline-block", 'white-space': "nowrap", overflow: "hidden" } );
+            control.append(textContainer);
+
+            // add the hover styles to the control
+            wrapper.hover(
+	            function() {
+	                if (!self.disabled) {
+	                    control.addClass("ui-state-hover");
+	                }
+	            }
+	        , 	function() {
+	                if (!self.disabled) {
+	                    control.removeClass("ui-state-hover");
+	                }
+	            }
+	        );
+            // clicking on the control toggles the drop container
+            wrapper.click(function(event) {
+                if (!self.disabled) {
+                    event.stopImmediatePropagation();
+                    self._toggleDropContainer( !self.dropWrapper.isOpen );
+                }
+            });
+            wrapper.insertAfter(sourceSelect);
+
+			// Watch for a window resize and adjust the control if open
+            $(window).resize(function() {
+                if (!self.disabled && self.dropWrapper.isOpen) {
+                	// Reopen yourself to get the position right
+                    self._toggleDropContainer(true);
+                }
+            });       
+            return wrapper;
+        },
+        // Creates a drop item that coresponds to an option element in the source select
+        _createDropItem: function(index, tabIndex, value, text, checked, disabled, indent) {
+            var self = this, options = this.options, sourceSelect = this.sourceSelect, controlWrapper = this.controlWrapper;
+            // the item contains a div that contains a checkbox input and a lable for the text
+            // the div
+            var item = $("<div/>");
+            item.addClass("ui-dropdownchecklist-item");
+            item.css({'white-space': "nowrap"});
+            var checkedString = checked ? ' checked="checked"' : '';
+			var classString = disabled ? ' class="inactive"' : ' class="active"';
+			
+			// generated id must be a bit unique to keep from colliding
+			var idBase = controlWrapper.attr("id");
+			var id = idBase + '-i' + index;
+            var checkBox;
+            
+            // all items start out disabled to keep them out of the tab order
+            if (self.isMultiple) { // the checkbox
+                checkBox = $('<input disabled type="checkbox" id="' + id + '"' + checkedString + classString + ' tabindex="' + tabIndex + '" />');
+            } else { // the radiobutton
+                checkBox = $('<input disabled type="radio" id="' + id + '" name="' + idBase + '"' + checkedString + classString + ' tabindex="' + tabIndex + '" />');
+            }
+            checkBox = checkBox.attr("index", index).val(value);
+            item.append(checkBox);
+            
+            // the text
+            var label = $("<label for=" + id + "/>");
+            label.addClass("ui-dropdownchecklist-text");
+            label.css({ cursor: "default" });
+            label.text(text);
+			if (indent) {
+				item.addClass("ui-dropdownchecklist-indent");
+			}
+			item.addClass("ui-state-default");
+			if (disabled) {
+				item.addClass("ui-state-disabled");
+			}
+	        label.click(function(e) {e.stopImmediatePropagation();});
+            item.append(label);
+            
+           	// active items display themselves with hover
+            item.hover(
+            	function(e) {
+            		var anItem = $(this);
+                	if (!anItem.hasClass("ui-state-disabled")) { anItem.addClass("ui-state-hover"); }
+            	}
+            , 	function(e) {
+            		var anItem = $(this);
+                	anItem.removeClass("ui-state-hover");
+            	}
+            );
+            // clicking on the checkbox synchronizes the source select
+	        checkBox.click(function(e) {
+	        	var aCheckBox = $(this);
+				e.stopImmediatePropagation();
+				if (aCheckBox.hasClass("active") ) {
+					// Active checkboxes take active action
+	                self._syncSelected(aCheckBox);
+	                self.sourceSelect.trigger("change", 'ddcl_internal');
+	                if (!self.isMultiple && options.closeRadioOnClick) {
+	                	self._toggleDropContainer(false);
+	                }
+				}
+	        });
+	        // we are interested in the focus leaving the check box
+	        // but we need to detect the focus leaving one check box but
+	        // entering another. There is no reliable way to detect who
+	        // received the focus on a blur, so post the blur in the future,
+	        // knowing we will cancel it if we capture the focus in a timely manner
+	        // 23Sept2010 - unfortunately, IE 7+ and Chrome like to post a blur
+	        // 				event to the current item with focus when the user
+	        //				clicks in the scroll bar. So if you have a scrollable
+	        //				dropdown with focus on an item, clicking in the scroll
+	        //				will close the drop down.
+	        //				I have no solution for blur processing at this time.
+/*********
+			var timerFunction = function(){ 
+				// I had a hell of a time getting setTimeout to fire this, do not try to
+				// define it within the blur function
+				try { self._handleFocus(null,false,false); } catch(ex){ alert('timer failed: '+ex);}
+			};
+			checkBox.blur(function(e) { 
+				self.blurringItem = setTimeout( timerFunction, 200 ); 
+			});
+			checkBox.focus(function(e) {self._cancelBlur();});
+**********/	
+	        // check/uncheck the item on clicks on the entire item div
+	        item.click(function(e) {
+	        	var anItem = $(this);
+                e.stopImmediatePropagation();
+				if (!anItem.hasClass("ui-state-disabled") ) {
+					// check/uncheck the underlying control
+					var aCheckBox = anItem.find("input");
+	                var checked = aCheckBox.attr("checked");
+	                aCheckBox.attr("checked", !checked);
+	                self._syncSelected(aCheckBox);
+	                self.sourceSelect.trigger("change", 'ddcl_internal');
+	                if (!checked && !self.isMultiple && options.closeRadioOnClick) {
+	                	self._toggleDropContainer(false);
+	                }
+				} else {
+					// retain the focus even if disabled
+					anItem.focus();
+					self._cancelBlur();
+				}
+	        });
+	        // do not let the focus wander around
+			item.focus(function(e) { 
+	        	var anItem = $(this);
+                e.stopImmediatePropagation();
+            });
+			item.keyup(function(e) {self._handleKeyboard(e);});
+            return item;
+        },
+		_createGroupItem: function(text,disabled) {
+			var self = this;
+			var group = $("<div />");
+			group.addClass("ui-dropdownchecklist-group ui-widget-header");
+			if (disabled) {
+				group.addClass("ui-state-disabled");
+			}
+			group.css({'white-space': "nowrap"});
+			
+            var label = $("<span/>");
+            label.addClass("ui-dropdownchecklist-text");
+            label.css( { cursor: "default" });
+            label.text(text);
+			group.append(label);
+			
+			// anything interesting when you click the group???
+	        group.click(function(e) {
+	        	var aGroup= $(this);
+                e.stopImmediatePropagation();
+                // retain the focus even if no action is taken
+                aGroup.focus();
+                self._cancelBlur();
+            });
+	        // do not let the focus wander around
+			group.focus(function(e) { 
+	        	var aGroup = $(this);
+                e.stopImmediatePropagation();
+            });
+			return group;
+		},
+        // Creates the drop items and appends them to the drop container
+        // Also calculates the size needed by the drop container and returns it
+        _appendItems: function() {
+            var self = this, sourceSelect = this.sourceSelect, dropWrapper = this.dropWrapper;
+            var dropContainerDiv = dropWrapper.find(".ui-dropdownchecklist-dropcontainer");
+			sourceSelect.children().each(function(index) { // when the select has groups
+				var opt = $(this);
+                if (opt.is("option")) {
+                    self._appendOption(opt, dropContainerDiv, index, false, false);
+                } else if (opt.is("optgroup")) {
+					var disabled = opt.attr("disabled");
+                    var text = opt.attr("label");
+                    if (text != "") {
+	                    var group = self._createGroupItem(text,disabled);
+	                    dropContainerDiv.append(group);
+	                }
+                    self._appendOptions(opt, dropContainerDiv, index, true, disabled);
+                }
+			});
+            var divWidth = dropContainerDiv.outerWidth();
+            var divHeight = dropContainerDiv.outerHeight();
+            return { width: divWidth, height: divHeight };
+        },
+		_appendOptions: function(parent, container, parentIndex, indent, forceDisabled) {
+			var self = this;
+			parent.children("option").each(function(index) {
+                var option = $(this);
+                var childIndex = (parentIndex + "." + index);
+                self._appendOption(option, container, childIndex, indent, forceDisabled);
+            });
+		},
+        _appendOption: function(option, container, index, indent, forceDisabled) {
+            var self = this;
+            var text = option.text();
+            var value = option.val();
+            var selected = option.attr("selected");
+			var disabled = (forceDisabled || option.attr("disabled"));
+			// Use the same tab index as the selector replacement
+			var tabIndex = self.controlSelector.attr("tabindex");
+            var item = self._createDropItem(index, tabIndex, value, text, selected, disabled, indent);
+            container.append(item);
+        },
+        // Synchronizes the items checked and the source select
+        // When firstItemChecksAll option is active also synchronizes the checked items
+        // senderCheckbox parameters is the checkbox input that generated the synchronization
+        _syncSelected: function(senderCheckbox) {
+            var self = this, options = this.options, sourceSelect = this.sourceSelect, dropWrapper = this.dropWrapper;
+            var allCheckboxes = dropWrapper.find("input.active");
+            if (options.firstItemChecksAll) {
+                // if firstItemChecksAll is true, check all checkboxes if the first one is checked
+                if ((senderCheckbox != null) && (senderCheckbox.attr("index") == 0)) {
+                    allCheckboxes.attr("checked", senderCheckbox.attr("checked"));
+                } else  {
+                    // check the first checkbox if all the other checkboxes are checked
+                    var allChecked = true;
+                    var firstCheckbox = null;
+                    allCheckboxes.each(function(index) {
+                        if (index > 0) {
+                            var checked = $(this).attr("checked");
+                            if (!checked) { allChecked = false; }
+                        } else {
+                        	firstCheckbox = $(this);
+                        }
+                    });
+                    if ( firstCheckbox != null ) {
+                    	firstCheckbox.attr("checked", allChecked );
+                    }
+                }
+            }
+            // do the actual synch with the source select
+            allCheckboxes = dropWrapper.find("input");
+            var selectOptions = sourceSelect.get(0).options;
+            allCheckboxes.each(function(index) {
+                $(selectOptions[index]).attr("selected", $(this).attr("checked"));
+            });
+            // update the text shown in the control
+            self._updateControlText();
+        	
+        	// Ensure the focus stays pointing where the user is working
+        	if ( senderCheckbox != null) { senderCheckbox.focus(); }
+        },
+        _sourceSelectChangeHandler: function(event) {
+            var self = this, dropWrapper = this.dropWrapper;
+            dropWrapper.find("input").val(self.sourceSelect.val());
+
+        	// update the text shown in the control
+        	self._updateControlText();
+        },
+        // Updates the text shown in the control depending on the checked (selected) items
+        _updateControlText: function() {
+            var self = this, sourceSelect = this.sourceSelect, options = this.options, controlWrapper = this.controlWrapper;
+            var firstOption = sourceSelect.find("option:first");
+            var selectOptions = sourceSelect.find("option");
+            var text = self._formatText(selectOptions, options.firstItemChecksAll, firstOption);
+            var controlLabel = controlWrapper.find(".ui-dropdownchecklist-text");
+
+            var image = $("<img>");
+            image.attr("src", "/images/btn/btn_security.png");
+            image.attr('alt', 'security');
+            image.attr('id','security_image');
+
+            var down = $("<img>");
+            down.attr("src","/images/btn/btn_down.png")
+
+
+
+            //controlLabel.html(text);
+            controlLabel.html(image);
+            controlLabel.append(" ");
+            controlLabel.append(down);
+            //controlLabel.attr("title", text);
+            controlLabel.attr("title", "security");
+
+        },
+        // Formats the text that is shown in the control
+        _formatText: function(selectOptions, firstItemChecksAll, firstOption) {
+            var text;
+            if ( $.isFunction(this.options.textFormatFunction) ) {
+            	// let the callback do the formatting, but do not allow it to fail
+            	try {
+                	text = this.options.textFormatFunction(selectOptions);
+                } catch(ex) {
+                	alert( 'textFormatFunction failed: ' + ex );
+                }
+            } else if (firstItemChecksAll && (firstOption != null) && firstOption.attr("selected")) {
+                // just set the text from the first item
+                text = firstOption.text();
+            } else {
+                // concatenate the text from the checked items
+                text = "";
+                selectOptions.each(function() {
+                    if ($(this).attr("selected")) {
+                        if ( text != "" ) { text += ", "; }
+                        text += $(this).text();
+                    }
+                });
+                if ( text == "" ) {
+                    text = (this.options.emptyText != null) ? this.options.emptyText : "&nbsp;";
+                }
+            }
+            return text;
+        },
+        // Shows and hides the drop container
+        _toggleDropContainer: function( makeOpen ) {
+            var self = this;
+            // hides the last shown drop container
+            var hide = function(instance) {
+                if ((instance != null) && instance.dropWrapper.isOpen ){
+                    instance.dropWrapper.isOpen = false;
+                    $.ui.dropdownchecklist.gLastOpened = null;
+
+	            	var config = instance.options;
+                    instance.dropWrapper.css({
+                        top: "-33000px",
+                        left: "-33000px"
+                    });
+                    var aControl = instance.controlSelector;
+	                aControl.removeClass("ui-state-active");
+	                aControl.removeClass("ui-state-hover");
+
+                    var anIcon = instance.controlWrapper.find(".ui-icon");
+                    if ( anIcon.length > 0 ) {
+                    	anIcon.removeClass( (config.icon.toClose != null) ? config.icon.toClose : "ui-icon-triangle-1-s");
+                    	anIcon.addClass( (config.icon.toOpen != null) ? config.icon.toOpen : "ui-icon-triangle-1-e");
+                    }
+                    $(document).unbind("click", hide);
+                    
+                    // keep the items out of the tab order by disabling them
+                    instance.dropWrapper.find("input.active").attr("disabled","disabled");
+                    
+                    // the following blur just does not fire???  because it is hidden???  because it does not have focus???
+			  		//instance.sourceSelect.trigger("blur");
+			  		//instance.sourceSelect.triggerHandler("blur");
+			  		if($.isFunction(config.onComplete)) { try {
+			     		config.onComplete.call(instance,instance.sourceSelect.get(0));
+                    } catch(ex) {
+                    	alert( 'callback failed: ' + ex );
+                    }}
+                }
+            };
+            // shows the given drop container instance
+            var show = function(instance) {
+            	if ( !instance.dropWrapper.isOpen ) {
+	                instance.dropWrapper.isOpen = true;
+	                $.ui.dropdownchecklist.gLastOpened = instance;
+
+	            	var config = instance.options;
+	                instance.dropWrapper.css({
+	                    top: instance.controlWrapper.offset().top + instance.controlWrapper.outerHeight() + "px",
+	                    left: instance.controlWrapper.offset().left + "px"
+	                });
+					var ancestorsZIndexes = instance.controlWrapper.parents().map(
+						function() {
+							var zIndex = $(this).css("z-index");
+							return isNaN(zIndex) ? 0 : zIndex; }
+						).get();
+					var parentZIndex = Math.max.apply(Math, ancestorsZIndexes);
+					if (parentZIndex > 0) {
+						instance.dropWrapper.css({
+							zIndex: (parentZIndex+1)
+						});
+					}
+	                var aControl = instance.controlSelector;
+	                aControl.addClass("ui-state-active");
+	                aControl.removeClass("ui-state-hover");
+	                
+	                var anIcon = instance.controlWrapper.find(".ui-icon");
+	                if ( anIcon.length > 0 ) {
+	                	anIcon.removeClass( (config.icon.toOpen != null) ? config.icon.toOpen : "ui-icon-triangle-1-e");
+	                	anIcon.addClass( (config.icon.toClose != null) ? config.icon.toClose : "ui-icon-triangle-1-s");
+	                }
+	                $(document).bind("click", function(e) {hide(instance);} );
+	                
+                    // insert the items back into the tab order by enabling all active ones
+                    var activeItems = instance.dropWrapper.find("input.active");
+                    activeItems.removeAttr("disabled");
+                    
+                    // we want the focus on the first active input item
+                    var firstActiveItem = activeItems.get(0);
+                    if ( firstActiveItem != null ) {
+                    	firstActiveItem.focus();
+                    }
+			    }
+            };
+            if ( makeOpen ) {
+            	hide($.ui.dropdownchecklist.gLastOpened);
+            	show(self);
+            } else {
+            	hide(self);
+            }
+        },
+        // Set the size of the control and of the drop container
+        _setSize: function(dropCalculatedSize) {
+            var options = this.options, dropWrapper = this.dropWrapper, controlWrapper = this.controlWrapper;
+
+            // use the width from config options if set, otherwise set the same width as the drop container
+            var controlWidth = dropCalculatedSize.width;
+            if (options.width != null) {
+                controlWidth = parseInt(options.width);
+            } else if (options.minWidth != null) {
+                var minWidth = parseInt(options.minWidth);
+                // if the width is too small (usually when there are no items) set a minimum width
+                if (controlWidth < minWidth) {
+                    controlWidth = minWidth;
+                }
+            }
+            var control = this.controlSelector;
+            control.css({ width: controlWidth + "px" });
+            
+            // if we size the text, then Firefox places icons to the right properly
+            // and we do not wrap on long lines
+            var controlText = control.find(".ui-dropdownchecklist-text");
+            var controlIcon = control.find(".ui-icon");
+            if ( controlIcon != null ) {
+            	// Must be an inner/outer/border problem, but IE6 needs an extra bit of space
+            	controlWidth -= (controlIcon.outerWidth() + 6);
+            	controlText.css( { width: controlWidth + "px" } );
+            }
+            // Account for padding, borders, etc
+            controlWidth = controlWrapper.outerWidth();
+            
+            // the drop container height can be set from options
+            var maxDropHeight = (options.maxDropHeight != null)
+            					? parseInt(options.maxDropHeight)
+            					: -1;
+            var dropHeight = ((maxDropHeight > 0) && (dropCalculatedSize.height > maxDropHeight))
+            					? maxDropHeight 
+            					: dropCalculatedSize.height;
+            // ensure the drop container is not less than the control width (would be ugly)
+            var dropWidth = dropCalculatedSize.width < controlWidth ? controlWidth : dropCalculatedSize.width;
+
+            $(dropWrapper).css({
+                height: dropHeight + "px",
+                width: dropWidth + "px"
+            });
+            dropWrapper.find(".ui-dropdownchecklist-dropcontainer").css({
+                height: dropHeight + "px"
+            });
+        },
+        // Initializes the plugin
+        _init: function() {
+            var self = this, options = this.options;
+			if ( $.ui.dropdownchecklist.gIDCounter == null) {
+				$.ui.dropdownchecklist.gIDCounter = 1;
+			}
+            // item blurring relies on a cancelable timer
+            self.blurringItem = null;
+
+            // sourceSelect is the select on which the plugin is applied
+            var sourceSelect = self.element;
+            self.initialDisplay = sourceSelect.css("display");
+            sourceSelect.css("display", "none");
+            self.initialMultiple = sourceSelect.attr("multiple");
+            self.isMultiple = self.initialMultiple;
+            if (options.forceMultiple != null) { self.isMultiple = options.forceMultiple; }
+            sourceSelect.attr("multiple", true);
+            self.sourceSelect = sourceSelect;
+
+            // append the control that resembles a single selection select
+            var controlWrapper = self._appendControl();
+            self.controlWrapper = controlWrapper;
+            self.controlSelector = controlWrapper.find(".ui-dropdownchecklist-selector");
+
+            // create the drop container where the items are shown
+            var dropWrapper = self._appendDropContainer(controlWrapper);
+            self.dropWrapper = dropWrapper;
+
+            // append the items from the source select element
+            var dropCalculatedSize = self._appendItems();
+
+            // updates the text shown in the control
+            self._updateControlText(controlWrapper, dropWrapper, sourceSelect);
+
+            // set the sizes of control and drop container
+            self._setSize(dropCalculatedSize);
+            
+            // look for possible auto-check needed on first item
+			if ( options.firstItemChecksAll ) {
+				self._syncSelected(null);
+			}
+            // BGIFrame for IE6
+			if (options.bgiframe && typeof self.dropWrapper.bgiframe == "function") {
+				self.dropWrapper.bgiframe();
+			}
+          	// listen for change events on the source select element
+          	// ensure we avoid processing internally triggered changes
+          	self.sourceSelect.change(function(event, eventName) {
+	            if (eventName != 'ddcl_internal') {
+	                self._sourceSelectChangeHandler(event);
+	            }
+	        });
+        },
+        // Refresh the disable and check state from the underlying control
+        _refreshOption: function(item,disabled,selected) {
+			var aParent = item.parent();
+			// account for enabled/disabled
+            if ( disabled ) {
+            	item.attr("disabled","disabled");
+            	item.removeClass("active");
+            	item.addClass("inactive");
+            	aParent.addClass("ui-state-disabled");
+            } else {
+            	item.removeAttr("disabled");
+            	item.removeClass("inactive");
+            	item.addClass("active");
+            	aParent.removeClass("ui-state-disabled");
+            }
+            // adjust the checkbox state
+            item.attr("checked",selected);
+        },
+        _refreshGroup: function(group,disabled) {
+            if ( disabled ) {
+            	group.addClass("ui-state-disabled");
+            } else {
+            	group.removeClass("ui-state-disabled");
+            }
+        },
+        refresh: function() {
+            var self = this, sourceSelect = this.sourceSelect, dropWrapper = this.dropWrapper;
+            
+            var allCheckBoxes = dropWrapper.find("input");
+            var allGroups = dropWrapper.find(".ui-dropdownchecklist-group");
+            
+            var groupCount = 0;
+            var optionCount = 0;
+			sourceSelect.children().each(function(index) {
+				var opt = $(this);
+				var disabled = opt.attr("disabled");
+                if (opt.is("option")) {
+                	var selected = opt.attr("selected");
+                	var anItem = $(allCheckBoxes[optionCount]);
+                    self._refreshOption(anItem, disabled, selected);
+                    optionCount += 1;
+                } else if (opt.is("optgroup")) {
+                    var text = opt.attr("label");
+                    if (text != "") {
+                    	var aGroup = $(allGroups[groupCount]);
+                    	self._refreshGroup(aGroup, disabled);
+                    	groupCount += 1;
+	                }
+					opt.children("option").each(function(subindex) {
+		                var subopt = $(this);
+						var subdisabled = (disabled || subopt.attr("disabled"));
+                		var selected = subopt.attr("selected");
+                		var subItem = $(allCheckBoxes[optionCount + subindex]);
+		                self._refreshOption(subItem, subdisabled, selected );
+		            });
+                }
+			});
+        	// update the text shown in the control
+        	self._updateControlText();
+        },
+        enable: function() {
+            this.controlSelector.removeClass("ui-state-disabled");
+            this.disabled = false;
+        },
+        disable: function() {
+            this.controlSelector.addClass("ui-state-disabled");
+            this.disabled = true;
+        },
+        destroy: function() {
+            $.Widget.prototype.destroy.apply(this, arguments);
+            this.sourceSelect.css("display", this.initialDisplay);
+            this.sourceSelect.attr("multiple", this.initialMultiple);
+            this.controlWrapper.unbind().remove();
+            this.dropWrapper.remove();
+        }
+    });
+
+    $.extend($.ui.dropdownchecklist, {
+        defaults: {
+            width: null,
+            maxDropHeight: null,
+            firstItemChecksAll: false,
+            closeRadioOnClick: false,
+            minWidth: 50,
+            bgiframe: false
+        }
+    });
+
+})(jQuery);