var AddonTags = function(config) {
	
	var c = {
		allUrl: DS+'addon_tags'+DS+'getAll',
		assignedUrl: DS+'addon_tags'+DS+'getAssigned',
		addNew: true,
		fieldset:{
			name: 'Tags',
			anchor: '90%'
		},
		list:{
			label: 'Assigned Tags',
			name: 'Assigned Tags'
		},
		combo:{
			label: 'Tags',
			emptyText: 'Select or add a new tag'
		},
		fields: ['id','name']
	};
	
	this.init = function(config) {
		
		var _this = this;
		
		if (!config) config={};
		for (var i in config) c[i] = config[i];
		
		this.tagRecord = Ext.data.Record.create(c.fields);
		
		this.list = new Ext.ux.Multiselect({
			legend: c.list.name,
			id: 'addonTagsCmp',
			store: Baf.Store({
				proxy: new Ext.data.HttpProxy({ url: c.assignedUrl }),
				reader: Baf.Reader({}, _this.tagRecord),
				baseParams: {site_id: c.site_id, item_type: c.item_type, item_id: c.item_id},
				autoLoad: true
			}),
			valueField: 'id',
			name: c.hiddenName,
			fieldLabel: c.list.label,
			displayField:  'name',
			forceSingleSelection:false,
			enableKeyEvents: true,
			width: 350,
			height: 150,
			allowBlank: true,
			tbar: new Ext.Toolbar({
				items:[{
		            text: 'Delete',
					iconCls: 'remove',
		            handler: function() {
		            	var selectionsArray = _this.list.view.getSelectedIndexes();
		            	var itemsArray = [];
						for (var i=selectionsArray.length-1; i>=0; i--) {
							itemsArray.push(_this.list.store.data.items[selectionsArray[i]]);
						}
						for (var i=0; i<itemsArray.length; i++){
							_this.list.store.remove(itemsArray[i]);
						}
			        }
		        }]
			}),
			insertItem: function(id,value) {
				var names = this.store.data.items.extract('data.name',true);
				if (!names.inArray(value)) {
					this.store.insert(0,new _this.tagRecord({
				    	id:id,
				    	name:value
				    }));
				}
			},
			listeners:{
				render:{
					fn: function() {
						var form = this.findParentByType('form');
						form.on('beforeaction',function(form,action) {
							if (action.type=='submit') {
								var arr = [];
								for (var i=0; i<this.store.data.items.length; i++) {
									arr.push(this.store.data.items[i].data.id);
								}
								this.hiddenField.dom.value = arr.join(',');
							}
						},this);
					}
				}
			}
		});
		
		this.combo = new Ext.form.ComboBox({
			store: Baf.Store({
				proxy: new Ext.data.HttpProxy({ url: c.allUrl }),
				reader: Baf.Reader({}, c.fields),
				baseParams: {site_id: c.site_id, exclude_item_type: c.item_type, exclude_item_id: c.item_id},
				autoLoad: true
			}),
			editable: true,
			fieldLabel: c.combo.label,
			typeAhead: false,
			displayField: c.fields[1],
			valueField: c.fields[0],
			triggerAction: 'all',
			emptyText: c.combo.emptyText,
			selectOnFocus:true,
			anchor: '90%',
			enableKeyEvents: true,
			allowBlank: true,
			mode: 'remote',
			forceSelection:false,
			minChars:2,
			listeners:{
				expand:{
					fn: function(combo) { combo.selectedIndex = -1; }
				},
				collapse:{
					fn: function(combo) { combo.selectedIndex = -1; }
				},
				beforeselect:{
					fn:function(combo, record, index) {
						_this.list.insertItem(record.data.id,record.data.name);
						return false;
					}
				},
				keydown:{
					fn:function(combo, e) {
						if (e.keyCode == e.ENTER && combo.selectedIndex==-1 && c.addNew) {
							e.stopEvent();
							var val = combo.getRawValue();
							if (val.length != 0){
								_this.list.insertItem(val,val);
							}
							return false;
						}
					}
				}
			}
		});
		
		this.fieldset = new Ext.form.FieldSet({
			title: c.fieldset.name,
			collapsible:true,
			autoHeight:true,
			anchor: c.fieldset.anchor,
			items:[
    			_this.combo, _this.list
    		]
		});
		
		return this.fieldset;
	};
	
	return this.init(config);
	
};