$.fn.ms_add_item_span = function(id, name) {
	id = this.ms_fix(id)
	name = this.ms_fix(name)
	if(!id || !name || this.ms_contains(id))
		return
		
	var item_html = ' <div class="item"><span class="item_name">' + name 
		+ '</span> <a href="#" class="remove">'
		+ '<img alt="x" src="/files/images/icon_delete.gif"/>' 
		+ '<span class="item_id" style="display: none">'
		+ id 
		+ '</span></a></div>'
	
	this.children('.selected_items').append(item_html)	
	
	var ms = this
	this.find('.remove').click(function() {
		ms.ms_remove_item(this)
		return false
	})
}

$.fn.ms_add_item = function(id, name) {
	this.ms_add_item_span(id, name)
	this.ms_update_input()
}

$.fn.ms_remove_item = function(item) {
	$(item).parent().remove()
	this.ms_update_input()
}

$.fn.ms_update_input = function() {
	var items = []
	this.find('.item_id').each(function(item) {
		items.push($(this).parent().parent().find('.item_name').html() + '//' + $(this).html())
	})
	
	this.find('input').val(items.join('||'))
}

$.fn.ms_get_item_ids = function() {
	var items = []
	this.find('.item_id').each(function(item) {
		items.push($(this).html())
	})
	return items
}

$.fn.ms_contains = function(id) {
	var items = this.ms_get_item_ids()
	for(var i=0; i < items.length; i++) {
		if(this.ms_fix(id).toLowerCase() == this.ms_fix(items[i]).toLowerCase()) {
			return true
		}
	}
	return false
}

$.fn.ms_fix = function(id) {
	return $.trim(id).replace(/,/g, " ").replace(/\s+/g, " ")
}

$.fn.multiple_select = function() {
	this.each(function() {
		var ms = $(this)
		
		value = ms.find('input:first').val()
		values = value.split('||')
		for(var i=0; i < values.length; i++) {
			var val = values[i]
			if(val) {
				subval = val.split('//')
				if(subval.length > 1) {
					ms.ms_add_item_span(subval[1], subval[0])
				} else {
					ms.ms_add_item_span(val, val)
				} 
			}
		}
	})
}

$(document).ready(function() {
	$('.multiple_select').multiple_select()
})