YUI.add('annotation-form', function(Y) {

	var Lang = Y.Lang,
		Widget = Y.Widget,
		Node = Y.Node;

	var NS = Y.namespace('mazzle');	
	NS.AnnotationForm = AnnotationForm;
	
	/* AnnotationForm class constructor */
	function AnnotationForm(config) {
		AnnotationForm.superclass.constructor.apply(this, arguments);
	}

	/* 
	 * Required NAME static field, to identify the Widget class and 
	 * used as an event prefix, to generate class names etc. (set to the 
	 * class name in camel case). 
	 */
	AnnotationForm.NAME = "annotation-form";

	/*
	 * The attribute configuration for the AnnotationForm widget. Attributes can be
	 * defined with default values, get/set functions and validator functions
	 * as with any other class extending Base.
	 */
	AnnotationForm.ATTRS = {
		target: {
			value: null
		},
		fields: {
			value: {
				person:{label:"Person"},
				location:{label:"Location"},
				subject:{label:"Subject"}
			}
		},
		annotations: {
			value: {}
		}
	};

	/* AnnotationForm extends the base Widget class */
	Y.extend(AnnotationForm, Widget, {

		initializer: function() {
		},

		destructor : function() {
		},

		renderUI : function() {
			var fields = this.get("fields");
			
			for (var key in fields) {
				this._renderField(fields[key]);
			}
		},

		bindUI : function() {
			var fields = this.get("fields");
			this.after("annotationsChange", function(e) {this.syncUI()});
			for(var key in fields) {
				Y.delegate("click", this._itemDelete, fields[key].list, "li .delete", this, key);
			}
		},

		syncUI : function() {
			var fields = this.get("fields"),
				annotations = this.get("annotations");
			
			for (var key in fields) {
				if(key) {
					this._setAnnotation(fields[key], annotations[key]);
				}	
			}
		},
		
		_itemDelete : function(e, field) {
			var node = e.currentTarget,
				parent = node.get("parentNode");
			parent.remove();
			this.fire("delete", {source:field, value:parent.get("id")});
		},
		
		_renderField : function(field) {
			var content = this.get("contentBox"),
				label = field.label;
				
			var box = content.appendChild(Node.create('<div class="an-source"></div>'));
			box.appendChild('<div class="an-hd">'+label+'</div>');
			field.list = box.appendChild(Node.create('<ul class="an-list"></ul>'));
		},
	
		_setAnnotation : function(field, annotations) {
			var list = field.list;
			list.setContent("");
			if(annotations) {
				for (var i=0; i < annotations.length; i++) {
					list.appendChild(this.formatItem(annotations[i]));
				}
			}	
		},
		
		formatItem : function(item) {
			var value = item.value,
				label = item.label;
				
			var url = (value.substr(0,1)=='/') ? 'http://www.freebase.com'+value : value;	
			var html = "<li class='annotation' id='"+value+"'>";
			html += "<a target='info' href='"+url+"' class='name'>"+label+"</a>";
			html += "<a href='javascript:void(0)' class='delete'>[x]</a>"
			html += "</li>"
			return html;
		},
		
		addAnnotations: function(annotations) {
			var fields = this.get("fields");
			for (var i=0; i < annotations.length; i++) {
				var a = annotations[i],
					field = fields[a.source];
				field.list.appendChild(this.formatItem(a));
			}
		}
	})
	  
}, 'gallery-2010.03.02-18' ,{requires:['node','event','widget','io','json']});