// AutoCompleteContainer
// Created by Wesley Friend
// FCV Technologies - 2007

var AutoCompleteContainer = Class.create();
AutoCompleteContainer.prototype = 
{
	container : null,
	tagContainer : null,
	input : null,
	outputField : null,
	searchIndicator : null,
	autoCompleteContainer : null,
	autoCompleteURL : null,
	ajaxAutoCompleter : null,
	selectedTag : null,
	highlightClass : null,
	tagValues : new Array(),
	onlyUnique : false,
	
	itemContainerHtml :
	{
		top : '<div class="e_tag_del">' +
				'<a href="javascript:void(0);">' +
				'<span>',
		bottom :    '<span class="x_remove">' +
						'<img src="/images/icon_delete.gif" border="0" align="top" />' +
					'</span>' +
				'</span>' +
				'</a>' +
			  '</div>'
	},
	
	initialize : function(options)
	{
		this.initVars(options);
		
		$(this.searchIndicator).hide();
		$(this.outputField).value = '';
		
		Event.observe($(this.container), 'click', this.containerClick.bindAsEventListener(this,$(this.input)));
		Event.observe($(this.input), 'keypress', this.inputKeyPress.bindAsEventListener(this,$(this.input)));
		
		this.ajaxAutoCompleter = new Ajax.Autocompleter(this.input, this.autoCompleteContainer, this.autoCompleteURL, {indicator: this.searchIndicator, afterUpdateElement: this.onItemSelect.bind(this) });
		
		this.resizeInput();
		
		this.ajaxAutoCompleter.options.onShow = function(element, update)
		{
			if(!update.style.position || update.style.position=='absolute')
			{
				update.style.position = 'absolute';
				Position.offsetParent(element);
			}
			Effect.Appear(update,{duration:0.15});
		};
		
		this.ajaxAutoCompleter.startIndicator = function() {
			if(this.options.indicator)
			{
				$(this.options.indicator).style.position = 'absolute';
				Position.offsetParent($(this.options.indicator));
				Element.show(this.options.indicator);
			}
		}
	},
	
	initVars : function(options)
	{
		if(options.container) this.container = options.container;
		if(options.tagContainer) this.tagContainer = options.tagContainer;
		if(options.input) this.input = options.input;
		if(options.searchIndicator) this.searchIndicator = options.searchIndicator;
		if(options.autoCompleteContainer) this.autoCompleteContainer = options.autoCompleteContainer;
		if(options.autoCompleteURL) this.autoCompleteURL = options.autoCompleteURL;
		if(options.highlightClass) this.highlightClass = options.highlightClass;
		if(options.outputField) this.outputField = options.outputField;
		if(options.onlyUnique) this.onlyUnique = options.onlyUnique;
	},
	
	resizeInput : function()
	{
		var containerWidth = $(this.tagContainer).getDimensions().width;
		
		var totalTagWidth = 5;
		var tagWidth = 0;
		
		this.getAllTags().each(
			function(e)
			{
				tagWidth = e.getDimensions().width;
				
				totalTagWidth+= tagWidth;
				
				if( totalTagWidth > containerWidth)
				{
					totalTagWidth = 5 + tagWidth;
				}
			}
		);
		
		//alert(totalTagWidth + ' / ' + containerWidth);
		if($(this.input).style.width)
		{
			$(this.input).style.width = containerWidth - totalTagWidth + 'px';
		}
	},
	
	getAllTags : function()
	{
		return $$('#'+this.tagContainer+' .e_tag_del');
	},
	
	selectTag : function(e,tagElement)
	{
		this.resetTags();
		this.selectedTag = tagElement;
		tagElement.addClassName(this.highlightClass);
	},
	
	resetTags : function()
	{
		this.selectedTag = null;
		
		var tags = this.getAllTags();
		
		for(var i = 0; i < tags.length; i++)
		{
			tags[i].removeClassName(this.highlightClass);
		}
	},
	
	reset : function()
	{
		this.resetTags();
		this.getAllTags().each(
			function(e)
			{
				this.removeTag(null, e);
			}.bind(this)
		);
	},
	
	onItemSelect : function(input, li)
	{
		input.hide();
		
		this.addTag(input.value,li.id);
		
		input.show();
		input.value = '';
		input.focus();
	},
	
	addTag : function(label,id)
	{
		var duplicate = (this.tagValues.indexOf(id) == -1?false:true);
		
		if( (this.onlyUnique && !duplicate) || (!this.onlyUnique))
		{
			new Insertion.Bottom($(this.tagContainer), this.itemContainerHtml.top + label + this.itemContainerHtml.bottom);
			
			var allTags = this.getAllTags();
			
			var tag = allTags[allTags.length-1];
			
			if(id)
			{
				tag.id = id;
			}
			
			Effect.Appear(tag);
			
			Event.observe(tag,'click', this.selectTag.bindAsEventListener(this,tag));
			Event.observe(tag.descendants()[2],'click', this.removeTag.bindAsEventListener(this,tag));
		}
		
		this.updateValueField();
		this.resizeInput();
	},
	
	updateValueField : function()
	{
		var tags = this.getAllTags();
		this.tagValues = new Array();
		
		$(this.outputField).value = '';
		
		for(var i = 0; i < tags.length; i++)
		{
			this.tagValues.push(tags[i].id);
		}
		
		$(this.outputField).value = this.tagValues.toString();
	},
	
	containerClick : function(e,input)
	{
		input.focus();
	},
	
	inputKeyPress : function(e,input)
	{
		var key = e.which || e.keyCode;
		
		switch(key)
		{
			case Event.KEY_BACKSPACE:
				if(input.value.length == 0)
				{
					var tags = this.getAllTags();
					
					if(tags.length > 0)
					{
						if(this.selectedTag != null)
						{
							this.removeTag(null, this.selectedTag);
						}
						else
						{
							this.selectTag(null,tags[tags.length-1]);
						}
					}
				}
				break;
			default:
				this.resetTags();
				break;
		}
	},
	
	removeTag : function(e,tag)
	{
		if(tag === this.selectedTag)
		{
			this.selectedTag = null;
		}
		
		tag.remove();
		this.resizeInput();
		this.updateValueField();
	}
}