// Theme dropdown object
window.ThemeDropdown = function(options) {
	var self = this;
	
	self.options = $.extend({
		autocomplete: {
			minLength: 3,
			source: '/ajax/themes-and-gadgets/'
		},
		initial: []
	}, options);
	
	self.input = $(self.options.input);
	self.container = $(self.options.container);
	self.theme_output = $(self.options.theme_output);
	self.gadget_output = $(self.options.gadget_output);
	self.theme_list = [];
	self.gadget_list = [];
	
	self.Node = function(item) {
		var node = $('<span></span>');
		node.attr('id', 'term-' + item.type + item.id);
		node.append('<a href="#delete-' + item.type + item.id + '">x</a>');
		node.append(item.name);
		// event handlers
		node.children('a').click(self.delete_handler);
		
		return node;
	}
	
	// Writes results to output
	self.write = function() {
		self.theme_output.val(self.theme_list.join(','));
		self.gadget_output.val(self.gadget_list.join(','));
	}
	
	// Delete/add node to container
	self.add_node = function(item) {
		self.container.append(new self.Node(item));
	}
	
	self.delete_node = function(type, id) {
		$('#term-' + type + id).remove();
	}
	
	// Delete/add id to output
	self.add_item = function(type, id) {
		self[type + '_list'].push(id);
	}
	
	self.delete_item = function(type, id) {
		self[type + '_list'] = $.grep(self[type + '_list'], function(el) {
			return (el != id);
		});
	}
	
	// Handlers
	self.select_handler = function(event, ui) {
		if ($.inArray(ui.item.id, self[ui.item.type + '_list']) == -1) {
			self.add_node(ui.item);
			self.add_item(ui.item.type, ui.item.id);
		} else {
			alert('Такое уже есть.');
		}
		self.input.val('');
		self.write();
		
		return false;
	}
	
	self.delete_handler = function() {
		var href = $(this).attr('href');
		var re = new RegExp('delete-(theme|gadget)(\\d+)$', 'g');
		var result = re.exec(href);
		
		if (result) {
			self.delete_node(result[1], result[2]);
			self.delete_item(result[1], result[2]);
		}
		self.write();
		
		return false;
	}
	
	self.run = function() {
		if (self.input.length && self.container.length 
				&& self.gadget_output.length && self.theme_output.length) {
			self.input.autocomplete(self.options.autocomplete);
			self.input.autocomplete("widget").addClass('ui-themes');
			self.input.autocomplete('option', 'select', self.select_handler);
			self.input.data("autocomplete")._renderItem = function(ul, item) {
				return $("<li></li>")
					.data("item.autocomplete", item)
					.append('<a>' + item.label_html + '</a>').appendTo(ul);
			};
			// clean output
			self.theme_output.val('');
			self.gadget_output.val('');
			// initial data
			for (var i in self.options.initial) {
				self.select_handler(null, {item: self.options.initial[i]});
			}
		}
	}
	self.run();
}