work on user management

4 files changed, 192 insertions, 4 deletions

diff --git a/core/css/multiselect.css b/core/css/multiselect.css
new file mode 100644
index 00000000000..d78dede95c0
--- /dev/null
+++ b/core/css/multiselect.css
@@ -0,0 +1,6 @@
+ul.multiselectoptions { z-index:49; position:absolute; background-color:#fff; padding-top:.5em; border-bottom-left-radius:.5em; border-bottom-right-radius:.5em; border:1px solid #ddd; border-top:none; }
+div.multiselect { padding-right:.6em; display:inline; position:relative; display:inline-block }
+div.multiselect.active { background-color:#fff; border-bottom:none; border-bottom-left-radius:0; border-bottom-right-radius:0; z-index:50; position:relative }
+div.multiselect>span:first-child { margin-right:2em; }
+div.multiselect>span:last-child { float:right; position:relative }
+ul.multiselectoptions input.new{ margin:0; padding-bottom:0.2em; padding-top:0.2em; border-top-left-radius:0; border-top-right-radius:0; }
diff --git a/core/css/styles.css b/core/css/styles.css
index 273d7443a8b..1703dc152f2 100644
--- a/core/css/styles.css
+++ b/core/css/styles.css
@@ -33,12 +33,12 @@ h1 { margin:1em 3em 1em 0; border-bottom:1px solid #666; text-transform:uppercas
 
 /* INPUTS */
 input[type="text"], input[type="password"] { cursor:text; }
-input, select { font-size:1em; width:10em; margin:.3em; padding:.6em .5em .4em; background:#fff; color:#333; border:1px solid #ddd; -moz-box-shadow:0 1px 1px #fff, 0 2px 0 #bbb inset; -webkit-box-shadow:0 1px 1px #fff, 0 1px 0 #bbb inset; box-shadow:0 1px 1px #fff, 0 1px 0 #bbb inset; -moz-border-radius:.5em; -webkit-border-radius:.5em; border-radius:.5em; }
+input, select, .button { font-size:1em; width:10em; margin:.3em; padding:.6em .5em .4em; background:#fff; color:#333; border:1px solid #ddd; -moz-box-shadow:0 1px 1px #fff, 0 2px 0 #bbb inset; -webkit-box-shadow:0 1px 1px #fff, 0 1px 0 #bbb inset; box-shadow:0 1px 1px #fff, 0 1px 0 #bbb inset; -moz-border-radius:.5em; -webkit-border-radius:.5em; border-radius:.5em; }
 input[type="text"], input[type="password"] { background:#f8f8f8; color:#555; cursor:text; }
 input[type="text"]:hover, input[type="text"]:focus, input[type="password"]:hover, input[type="password"]:focus { background:#fff; color:#333; }
 
-input[type="submit"], input[type="button"] { width:auto; padding:.4em; border:1px solid #ddd; font-weight:bold; cursor:pointer; background:#f8f8f8; color:#555; text-shadow:#fff 0 1px 0; -moz-box-shadow:0 1px 1px #fff, 0 1px 1px #fff inset; -webkit-box-shadow:0 1px 1px #fff, 0 1px 1px #fff inset; -moz-border-radius:.5em; -webkit-border-radius:.5em; border-radius:.5em; }
-input[type="submit"]:hover, input[type="submit"]:focus, input[type="button"]:hover, input[type="button"]:focus { background:#fff; color:#333; }
+input[type="submit"], input[type="button"], .button { width:auto; padding:.4em; border:1px solid #ddd; font-weight:bold; cursor:pointer; background:#f8f8f8; color:#555; text-shadow:#fff 0 1px 0; -moz-box-shadow:0 1px 1px #fff, 0 1px 1px #fff inset; -webkit-box-shadow:0 1px 1px #fff, 0 1px 1px #fff inset; -moz-border-radius:.5em; -webkit-border-radius:.5em; border-radius:.5em; }
+input[type="submit"]:hover, input[type="submit"]:focus, input[type="button"]:hover, input[type="button"]:focus, .button:hover { background:#fff; color:#333; }
 input[type="checkbox"] { width:auto; }
 
 #body-login input { font-size:1.5em; }
diff --git a/core/js/js.js b/core/js/js.js
index f4756d97b25..dc8345545a6 100644
--- a/core/js/js.js
+++ b/core/js/js.js
@@ -275,7 +275,29 @@ $(document).ready(function(){
 	})
 });
 
-
+if (!Array.prototype.map){
+	Array.prototype.map = function(fun /*, thisp */){
+		"use strict";
+		
+		if (this === void 0 || this === null)
+			throw new TypeError();
+		
+		var t = Object(this);
+		var len = t.length >>> 0;
+		if (typeof fun !== "function")
+			throw new TypeError();
+		
+		var res = new Array(len);
+		var thisp = arguments[1];
+		for (var i = 0; i < len; i++){
+			if (i in t){
+				res[i] = fun.call(thisp, t[i], i, t);
+			}
+		}
+		
+	    return res;
+	};
+}
 
 
 /*
diff --git a/core/js/multiselect.js b/core/js/multiselect.js
new file mode 100644
index 00000000000..559cdf9b167
--- /dev/null
+++ b/core/js/multiselect.js
@@ -0,0 +1,160 @@
+(function( $ ){
+	var multiSelectId=-1;
+	$.fn.multiSelect=function(options){
+		multiSelectId++;
+		var settings = {
+			'createCallback':false,
+			'createText':false,
+			'title':this.attr('title'),
+			'checked':[],
+			'oncheck':false,
+			'onuncheck':false,
+		};
+		$.extend(settings,options);			
+		var button=$('<div class="multiselect button"><span>'+settings.title+'</span><span>▾</span></div>');
+		if(settings.checked.length>0){
+			button.children('span').first().text(settings.checked.join(', '));
+		}
+		var span=$('<span/>');
+		span.append(button);
+		button.data('id',multiSelectId);
+		button.selectedItems=[];
+		this.hide();
+		this.before(span);
+		settings.minWidth=button.width();
+		button.css('min-width',settings.minWidth);
+		settings.minOuterWidth=button.outerWidth()-2;
+		button.data('settings',settings);
+		
+		button.click(function(event){
+			var button=$(this);
+			if(button.parent().children('ul').length>0){
+				button.parent().children('ul').slideUp(400,function(){
+					button.parent().children('ul').remove();
+					button.removeClass('active');
+				});
+				return;
+			}
+			var lists=$('ul.multiselectoptions');
+			lists.slideUp(400,function(){
+				lists.remove();
+				$('div.multiselect').removeClass('active');
+				button.addClass('active');
+			});
+			button.addClass('active');
+			event.stopPropagation();
+			var options=$(this).parent().next().children().map(function(){return $(this).val()});
+			var list=$('<ul class="multiselectoptions"/>').hide().appendTo($(this).parent());
+			function createItem(item,checked){
+				var id='ms'+multiSelectId+'-option-'+item;
+				var input=$('<input id="'+id+'" type="checkbox"/>');
+				var label=$('<label for="'+id+'">'+item+'</label>');
+				if(settings.checked.indexOf(item)!=-1 || checked){
+					input.attr('checked','checked');
+				}
+				if(checked){
+					settings.checked.push(item);
+				}
+				input.change(function(){
+					var groupname=$(this).next().text();
+					if($(this).attr('checked')){
+						settings.checked.push(groupname);
+						if(settings.oncheck){
+							if(settings.oncheck(groupname)===false){
+								$(this).removeAttr('checked');
+								return;
+							}
+						}
+					}else{
+						var index=settings.checked.indexOf(groupname);
+						settings.checked.splice(index,1);
+						if(settings.onuncheck){
+							if(settings.onuncheck(groupname)===false){
+								$(this).attr('checked','checked');
+								return;
+							}
+						}
+					}
+					var oldWidth=button.width();
+					if(settings.checked.length>0){
+						button.children('span').first().text(settings.checked.join(', '));
+					}else{
+						button.children('span').first().text(settings.title);
+					}
+					var newOuterWidth=Math.max((button.outerWidth()-2),settings.minOuterWidth)+'px'
+					var newWidth=Math.max(button.width(),settings.minWidth);
+					button.css('height',button.height());
+					button.css('white-space','nowrap');
+					button.css('width',oldWidth);
+					button.animate({'width':newWidth},undefined,undefined,function(){
+						button.css('width','');
+					});
+					list.animate({'width':newOuterWidth});
+				});
+				var li=$('<li></li>');
+				li.append(input).append(label);
+				return li;
+			}
+			$.each(options,function(index,item){
+				list.append(createItem(item));
+			});
+			button.parent().data('preventHide',false);
+			if(settings.createText){
+				var li=$('<li>+ <em>'+settings.createText+'<em></li>');
+				li.click(function(event){
+					li.empty();
+					var input=$('<input class="new">');
+					li.append(input);
+					input.focus();
+					input.css('width',button.width());
+					button.parent().data('preventHide',true);
+					input.keypress(function(event) {
+						if(event.keyCode == 13) {
+							event.preventDefault();
+							event.stopPropagation();
+							var li=$(this).parent();
+							$(this).remove();
+							li.text('+ '+settings.createText);
+							li.before(createItem($(this).val()));
+							li.prev().children('input').trigger('click');
+							button.parent().data('preventHide',false);
+							var select=button.parent().next();
+							select.append($('<option value="'+$(this).val()+'">'+$(this).val()+'</option>'));
+							if(settings.createCallback){
+								settings.createCallback();
+							}
+						}
+					});
+					input.blur(function(){
+						event.preventDefault();
+						event.stopPropagation();
+						$(this).remove();
+						li.text('+ '+settings.createText);
+						setTimeout(function(){
+							button.parent().data('preventHide',false);
+						},100);
+					});
+				});
+				list.append(li);
+			}
+			var pos=button.position();
+			list.css('top',pos.top+button.outerHeight()-5);
+			list.css('left',pos.left+3);
+			list.css('width',(button.outerWidth()-2)+'px');
+			list.slideDown();
+			list.click(function(event){
+				event.stopPropagation();
+			});
+		});
+		$(window).click(function(){
+			if(!button.parent().data('preventHide')){
+				button.parent().children('ul').slideUp(400,function(){
+					button.parent().children('ul').remove();
+					button.removeClass('active');
+				});
+			}
+		});
+		
+		return span;
+	};
+})( jQuery );
\ No newline at end of file