(function($){

	$.fn.jTag = function(input) {
		$.each(this, function(i, item){
			new $.fn.jTag.instance($(this), input);	
		});
	};
	
	$.fn.jTag.instance = function(container, input) {
		this.container = container; 											//Het dom element waaraan deze instance wordt gekoppeld
		this.settings = $.extend({}, $.fn.jTag.defaults, input);				//Overschrijf default settings met gegeven settings
				
		this.init();
	};
	
	
	$.extend($.fn.jTag.instance.prototype, {
		
		init: function(){
			var that = this;
			
			this.hidden = [];
			this.tag = [];
			
			//this.name = this.container.attr('name');
			//this.container.removeAttr('name');
			this.container.hide();
			
			this.textInput = $('<input type="text">');
			this.container.before(this.textInput);
			
			this.tagDiv = $('<div>').attr('class', 'tags '+this.name+'_tags');
			this.container.after(this.tagDiv);
			
			this.hiddenDiv = $('<div>').attr('class', this.name+'_hidden');
			this.container.after(this.hiddenDiv);
			
			this.values = this.settings.values.slice(0);
			
			this.errorSpan = $('<span>').attr('class', 'error '+this.name+'_error');
			this.container.after(this.errorSpan);
			
			this.addButton();
			
			this.values.sort();
			$.each(this.values, function(i, item){
				that.addTag(item);
			});
			
			if(this.settings.submit_on_enter){
				// check for enter key
				this.textInput.keydown(function(e){
					if(e.keyCode === 13){
						that.validateInput();
						return false;
					}
				});
			}
		},
		
		addButton: function(){
			var that = this;
			var button = $('<input>').attr('type','button').attr('class','button '+this.name+'_button').val(this.settings.text_button);
			this.container.after(button);
			
			$(button).unbind().click(function(){
				that.validateInput();
			});
		},
		
		validateInput: function(){
			var that = this;
			
			var input = $(this.textInput).val().replace(/^\s+/,'').replace(/\s+$/,'');
			var valid = true;
			
			if(input === ''){
				valid = false;
				that.errorSpan.hide().text(that.settings.error_empty_string).fadeIn(); 
			}
			else{
				//check array
				$.each(this.values, function(i, item){
					if(item.toLowerCase() == input.toLowerCase()){
						valid = false;
						that.errorSpan.hide().text(that.settings.error_already_in_list).fadeIn();
					}
				});
			}
			
			if(valid){
				//add to list
				this.values[this.values.length] = input;
				this.addTag(input);
				this.errorSpan.text('');
				this.textInput.val('');
				
			}
			
			if(this.settings.focus_after_submit){
				this.textInput.focus();
			}
		},
		
		
		addTag: function(tag){
			var that = this;
			var tagNode = $('<span>').attr('class','tag '+this.name+'_tag').text(tag);
			var hiddenNode = $('<input>').attr('type','hidden').attr('name',this.name+'[]').val(tag);
			
			var removeNode = $('<span>').attr('class', 'tag_remove').text(this.settings.close_tag_char).click(function(){
				$(tagNode).remove();
				$(hiddenNode).remove();
				that.updateValues(tag);
				that.errorSpan.text('');
				that.textInput.val('');
			});
			
			tagNode.append(removeNode);
			this.tagDiv.append(tagNode);
			//this.hiddenDiv.append(hiddenNode);
			
			var newVal = '';
			for(var i = 0; i < this.values.length; i++){
				if(i > 0){
					newVal += ','
				}
				newVal += this.values[i];
			}
			this.container.val(newVal);
			
		},
	
		updateValues: function(tag){
			
			var that = this;
			
			this.tempValues = [];
			$.each(this.values, function(i, item){
				if(item != tag){
					that.tempValues[that.tempValues.length] = item;
				};
			});
			
			this.values = this.tempValues;
			
			var newVal = '';
			for(var i = 0; i < this.values.length; i++){
				if(i > 0){
					newVal += ','
				}
				newVal += this.values[i];
			}
			this.container.val(newVal);
		}
		
	});
	
	
	//Default settings
	$.fn.jTag.defaults = {
		submit_on_enter: true,
		focus_after_submit: true,
		text_button: 'Toevoegen',
		close_tag_char: 'x',
		error_already_in_list: 'Deze tag bestaat al',
		error_empty_string: 'Er is niets ingevuld',
		values: []											//vooraf gekoppelde tags
	};

})(jQuery);