var Ameisen = {
	showOverlay : function (title, content) {
		if ($('overlay')) {
			var overlay = $('overlay');
		} else {
			var div = document.createElement('div');
			div.id = 'overlay';
			div.innerHTML = '<div id="overlay_body"><div id="overlay_title"></div><div id="overlay_close"><a href="javascript:;" onclick="Ameisen.closeOverlay();">X</a></div><div id="overlay_content"></div></div>';
			document.body.appendChild(div);
			
			var overlay = $('overlay');
		}
		
		
		var overlay_title = $('overlay_title');
		overlay_title.innerHTML = title;
		
		var layer = $('overlay_content');
		
		layer.innerHTML = '';
		layer.appendChild(content);
		
		overlay.style.display = 'block';
		
		new Draggable('overlay_body', { handle: 'overlay_title' });
	},
	closeOverlay : function () {
		$('overlay').style.display = 'none';
	},
	renderUserList : function (list) {
		var fragment = document.createDocumentFragment();
		
		var ul = document.createElement('ul');
		ul.id = 'userlist';
		
		if (list) {
			list.each(function (element) {
				var li = document.createElement('li');
				
				li.innerHTML = element;
				
				ul.appendChild(li);
			});
		}
		
		fragment.appendChild(ul);
		
		return fragment;
	},
	showUserList : function (title, users) {
		var userlist = Ameisen.renderUserList(users);
		
		this.showOverlay(title, userlist);
	},
	appendToUserList : function (users) {
		var list = $('userlist');
		
		if (users) {
			var fragment = document.createDocumentFragment();
			
			users.each(function (element) {
				var li = document.createElement('li');
				
				li.innerHTML = element;
				
				fragment.appendChild(li);
			});
			
			list.appendChild(fragment);
		}
	}
}