YUI.add('tag-list', function(Y) {

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

	var NS = Y.namespace('mazzle');	
	NS.TagList = TagList;
	
	/* TagList class constructor */
	function TagList(config) {
		TagList.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). 
	 */
	TagList.NAME = "tag-list";

	/*
	 * The attribute configuration for the TagList widget. Attributes can be
	 * defined with default values, get/set functions and validator functions
	 * as with any other class extending Base.
	 */
	TagList.ATTRS = {
		tags: {
			value: []
		},
		active: {
			value: true
		},
		sizeAdjust: {
			value: false
		},
		maxFont: {
			value: 25
		},
		minFont : {
			value: 12
		}
	};

	/* Static constants used to define the markup templates used to create TagList DOM elements */
	TagList.LIST_CLASS = 'tag-list';
	TagList.LIST_TEMPLATE = '<ul class="'+TagList.LIST_CLASS+'"></ul>';

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

		initializer: function() {
		},

		destructor : function() {
		},

		renderUI : function() {
			var content = this.get("contentBox"),
				height = this.get("height");

			// tag list
			content.setStyle("position", "relative");
			if(this.get("topIndent")) {
				content.setStyle("top", height/2+"px");
			}
			this.listNode = content.appendChild(Node.create(TagList.LIST_TEMPLATE));
		},

		bindUI : function() {
			this.after("tagsChange", this.syncUI);
			Y.delegate("click", this._itemSelect, this.listNode, "li .label", this);
			Y.delegate("mouseover", this._itemHover, this.listNode, "li", this);
			Y.delegate("click", this._reconcileSelect, this.listNode, ".reconcile-item input", this);
		},

		syncUI : function() {
			this._renderItems();
		},

		_renderItems : function() {
			var tags = this.get("tags"),
				min = this._minEntries(tags),
				max = this._maxEntries(tags);
				
			this.listNode.setContent("");
			// format the items
			for(var i=0; i < tags.length; i++) {
				this.listNode.append('<li>'+this.formatItem(tags[i], min, max)+'</li>');	
			}
		},
		
		_minEntries : function(rs) {
			var min = 50;
			for (var i=0; i < rs.length; i++) {
				if(rs[i].annotations) {
					min = Math.min(rs[i].annotations.length, min);
				}	
			}
			return min;
		},
		_maxEntries : function(rs) {
			var max = 1;
			for (var i=0; i < rs.length; i++) {
				if(rs[i].annotations) {
					max = Math.max(rs[i].annotations.length, max);
				}	
			}
			return max;
		},
	
		formatItem : function(item, min, max) { 
			var tag = item.tag,
				label = tag.label ? tag.label : tag.value,
				count = item.annotations ? item.annotations.length : 1,
				maxF = this.get("maxFont"),
				minF = this.get("minFont"),
				d = (maxF-minF)/Math.max((max-min),1),
				size = this.get("sizeAdjust") ? ((d*count) + (minF-d)) : minF;

			var html = '<div class="label">'
			html += '<span style="font-size:'+size+'px">'+label+'</span>';
			html += '</div>';				
			if(item.uri) {
				html += '<a href="javascript:{}">'+html+'</a>';
			}
			html += '<div class="reconcile-list"></div>';
			return html
			
		},
		
		_itemSelect : function(e) {
			// item click
			var node = e.currentTarget.get("parentNode"),
				index = e.container.all("li").indexOf(node),
				item = this.get("tags")[index],
				arg = {li:node, index:index, tag:item};
				
			this.set("active", arg);
			Y.log('clicked tag '+item.tag.value+' at index '+index);	
			this._highlight(index);
			if(node.hasClass("reconciled")) {
				node.toggleClass("closed");
			}
	        this.fire("itemSelect", arg);
		},
		
		_itemHover : function(e) {
			var node = e.currentTarget,
				index = e.container.all("li").indexOf(node),
				item = this.get("tags")[index],
				arg = {li:node, index:index, tag:item};
	        this.fire("itemHover", arg);
		},
		
		_highlight : function(index) {
			var items = this.listNode.all("li");
			// removeFocus from other items
			items.removeClass('focus');
			// add focus class to current item
			items.item(index).addClass('focus');
		},
		
		setReconciled : function(reconciled, start, end) {
			var nodes = this.listNode.all("li"),
				tags = this.get("tags");
				
			for (var i=start; i < end; i++) {
				var node = nodes.item(i),
					tagValue = tags[i].tag.value,
					r = reconciled[tagValue];

				node.addClass("closed");
				if(r&&r.result.length>0) {
					node.addClass("reconciled");
					node.one('.reconcile-list')
					.setContent(this.formatReconciled(tagValue, r.result));
				} else {
					node.removeClass("reconciled");
					node.one('.reconcile-list').setContent('');
				}
			}
		},
		resetReconciled : function() {
			this.listNode.all("li")
			.removeClass("reconciled")
			.addClass("closed");
			
			this.listNode.all("li .label").removeClass("concept");
		},
		
		formatReconciled : function(tag, r) {
			var html = "";
			for (var i=0; i < r.length; i++) {		  			
				html += "<div class='reconcile-item'>"+this.formatReconcileItem(tag, r[i])+"</div>";
			}
			return html;
		},
		
		formatReconcileItem : function(tag, item) {
			var id = item.id,
				name = item.name,
				types = item.type||[];
				
			var html = "<input class='radio' type='radio' value='"+id+"' name='"+tag+"'>";
			html += "<a href='javascript:{}' class='name'>"+name+"</a>";
			html += "<div class='types'>";
			for (var i=0; i < types.length; i++) {
				html += "<span class='type'>"+types[i].name+"</span>";
				if(i<types.length-1) {
					html += ', ';
				}
			}
			html +=	"</div>";
			if(item.desc) { 
				html += "<div class='desc'>"+item.desc+"</div>";
			}
			return html;
		},
		
		_reconcileSelect : function(e) {
			var option = e.currentTarget,
				reconcileNode = option.get("parentNode"),
				optionIndex = reconcileNode.get("parentNode").all(".reconcile-item")
					.indexOf(reconcileNode),
				tagNode = reconcileNode.get("parentNode").get("parentNode"),
				uri = option.get("value"),
				label = reconcileNode.one(".name").getContent(),
				index = e.container.all("li").indexOf(tagNode),
				tag = this.get("tags")[index].tag.value;
				
			tagNode.one(".label").addClass("concept");
			tagNode.addClass('closed');
			this.fire("reconcileSelect", {index:optionIndex, tag:tag, uri:uri, label:label});
		}

	});
	  
}, 'gallery-2010.03.02-18' ,{requires:['node','event','widget']});