Updated JQuery; Added resize sensor library; Updated the admin code (prior to changing gears to use Meteor).

public/admin/js/de.dropdown.js

@@ -0,0 +1,85 @@
+"use strict";
+
+//
+//A dropdown menu.  Pass it a container and an array of data, and it will build the button, caret, and list of selectable elements inside the container.
+//
+(function($) {
+	var Dropdown = function($element, data, options) {
+		var _this = this;
+		var textSpan = $("<span>" + options.defaultText + "</span>");
+
+		this.$element = $element;
+		this.options = $.extend({}, Dropdown.DEFAULTS, options);
+		this.$selected = null;
+		this.$textSpan = null;
+
+		this.selectionHandler = function(event) {
+			_this.$selected = $(this);
+			_this.$selected.addClass(_this.options.selectionClass).siblings().removeClass(_this.options.selectionClass);
+			textSpan.text(_this.$selected.text());
+		};
+
+		var button = $("<button class='" + this.options.buttonClasses + "' style='" + this.options.buttonStyling + "' type='button' data-toggle='dropdown'></button>");
+		var caretSpan = $("<span class='" + this.options.caretClasses + "' style='margin-left: 8px;'></span>");
+
+		button.appendTo($element);
+		textSpan.appendTo(button);
+		caretSpan.appendTo(button);
+		//Save this for later use when setting the selection manually.
+		this.$textSpan = textSpan;
+
+		var ul = $("<ul class='dropdown-menu' role='menu'></ul>");
+		ul.appendTo($element);
+
+		for(var dataIndex = 0; dataIndex < data.length; dataIndex++) {
+			var nextData = data[dataIndex];
+			var text = $.isFunction(options.textAttr) ? options.textAttr(nextData) : nextData[options.textAttr];
+			var li = $("<li role='presentation' class='" + this.options.listItemClasses + "'><a role='menuitem' href='javascript:;'>" + text + "</a></li>")
+
+			li.appendTo(ul);
+			li.data('object', nextData);
+			li.bind("click", this.selectionHandler);
+		}
+	};
+	
+	Dropdown.DEFAULTS = {
+		textAttr: 'name',  //The attribute of the data elements to use for the name.  This can also be a function that takes the data object and returns the text.
+		defaultText: '',  //The initial text if no selection is made.  This will be taken from the
+		selectionClass: '',  //The class to use for the selected element in the dropdown list.
+		buttonStyling: '',
+		buttonClasses: 'btn btn-default dropdown-toggle',
+		caretClasses: 'caret',
+		listItemClasses: ''
+	};
+
+	Dropdown.prototype.getSelection = Dropdown.prototype.getSelected = function() {
+		return this.$selected.data('object');
+	};
+
+	Dropdown.prototype.setSelection = Dropdown.prototype.setSelected = function(object) {
+		var listElements = this.$element.find("li");
+
+		for(var index = 0; index < listElements.length; index++) {
+			if($(listElements[index]).data('object').id == object.id) {
+				this.$selected = $(listElements[index]);
+				this.$selected.addClass(this.options.selectionClass).siblings().removeClass(this.options.selectionClass);
+				this.$textSpan.text(this.$selected.text());
+				break;
+			}
+		}
+	};
+
+	$.fn.buildDropdown = function(data, options) {
+		for(var index = 0; index < this.length; index++) {
+			var $next = $(this[index]);
+			var nextDropdown = new Dropdown($next, data, options);
+
+			$next.data("de.dropdown", nextDropdown);
+		}
+	}
+	$.fn.getDropdown = function() {
+		if(this.length > 0) {
+			return $(this[0]).data('de.dropdown');
+		}
+	}
+})(jQuery);