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

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

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

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

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

	/* TagPlayer extends the base Widget class */
	Y.extend(TagPlayer, 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(TagPlayer.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);
			this._scrollAnim = new Y.Anim({
			    node: this.get("boundingBox"),
			    duration: 1,
			    easing: Y.Easing.easeOut
			});
		},

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

		_renderItems : function() {
			var tags = this.get("tags"),
				timeIndex = {};
			
			this.listNode.setContent("");
			
			// format the items and store in the time index	
			for(var i=0; i < tags.length; i++) {
				this.listNode.append('<li>'+this.formatItem(tags[i])+'</li>');	
				var time = Math.round(tags[i].startTime/1000); //TBD make this hookable
				timeIndex[time] = i;
			}
			this._timeIndex = timeIndex;
		},
	
		formatItem : function(item) { 
			var tag = item.tag,
				label = tag.label ? tag.label : tag.value,
				score = item.score;

			html = '<div class="label">'+label+'</div>';				
			if(score) {
				html += '<div class="score">'+score+'</div>';
			} else {
				html += '<div class="score hidden"></div>';
			}			
			if(item.uri) {
				return '<a href="javascript:{}">'+html+'</a>';
			} else {
				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};
			
			if(!node.one('input')) {	
				Y.log('clicked tag '+item.tag.value+' at index '+index);	
				this._highlight(index);
	        	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);
		},
		
		focusTag : function(tag) {			
			this.focusIndex(this.tagIndex(tag));
		},
		
		focusNode : function(node) {
			var index = this.listNode.all("li").indexOf(node);
			this.focusIndex(index);
		},
		
		focusTime : function(time) {
			var timeIndex = this._timeIndex,
				index = timeIndex[time];

			if(index>=0) {
				Y.log('tagged '+this.get("tags")[index].tag);
				this.focusIndex(index);
			}
		},
		
		focusIndex : function(index) {
			if(this.get("active")) {
				this._scrollTo(index);
				this._highlight(index);
			}
		},
		
		scoreIndex : function(index, score, id, action) {
			var item = this.listNode.all("li").item(index),
				el;
			if(id) {
				this.scores[id] = item;
			}	
			if(type=='edit'&&score>0) {
				el = '.edit';
			} else if(type=='confirm') {
				el = '.confirm';
			}
			if(el) {
				item.addClass('scored '+action);
				item.one(el).addClass("hidden");
				if(score>0) {
					item.one('.score')
						.setContent(score)
						.removeClass("hidden");
				}
			}
		},
		
		tagIndex : function(tag) {
			var tags = this.get("tags");
			var i = 0;
			for (i; i < tags.length; i++) {
				if(tags[i].tag === tag) {
					return i;
				}
			}
		},
		
		_scrollTo : function(index) {
			var node = this.get("boundingBox"),
				items = this.listNode.all("li"),
				anim = this._scrollAnim,
				scrollTo = Math.abs(this.listNode.getY() - items.item(index).getY());
			
			Y.log('scroll from '+node.get('scrollTop')+' to '+scrollTo);
			anim.set('to', { scroll: [node.get('scrollTop'), scrollTo] });
        	anim.run();
		},
		
		_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');
		}

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