YUI.add('change-history', function(Y) {

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

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

	/*
	 * The attribute configuration for the ChangeHistory widget. Attributes can be
	 * defined with default values, get/set functions and validator functions
	 * as with any other class extending Base.
	 */
	ChangeHistory.ATTRS = {
		index: {
			value: 0
		}
	};

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

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

		initializer: function() {
			this._listNode = null;
			this._actions = [];
		},

		destructor : function() {
		},

		renderUI : function() {
			var content = this.get("contentBox");
			this._listNode = content.appendChild(Node.create(ChangeHistory.LIST_TEMPLATE));
		},

		bindUI : function() {
			Y.delegate("click", this._itemSelect, this._listNode, "li", this);
		},

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

		_renderActions : function() {
			var actions = this._actions;
			this._listNode.setContent("");
			for(var i=0; i < actions.length; i++) {
				this._listNode.append('<li>'
					+'<span class="i">'+i+'</span>'
					+this.formatAction(actions[i])
					+'</li>');
			}
		},
	
		formatAction : function(action) {
			var type = action.type;
				annotation = action.annotation;
			var label = annotation.tag ? '"'+annotation.tag.value+'"' : ""; 
			if(action.newvalue) {label += ' to "'+action.newvalue+'"'}
			if(action.startTime) {label += ' at time '+action.startTime}
			if(action.endTime) {label += ' - '+action.endTime}
			var html = '<span class="type">'+type+'</span>'
					 + '<span class="label"> '+label+'</span>';
			return html;
		},
		
		addActionHandler : function(e) {
			var action = e.details[0];
			this.addAction(action);
		},
		
		addAction : function(action) {
			var actions = this._actions,
				index = this.get("index"),
				nodes = this._listNode.all("li");
 			// First we remove the actions after the current index (the redos).
			if(index<actions.length) {
				Y.log("remove redos from "+index);
				this._actions = actions.slice(0, index);
				for (var i=index; i < actions.length; i++) {
					nodes.item(i).remove();
				}
			}
			// Know we add the new history item
			index++;
			this._actions.push(action);
			this.set("index", index);
			this._listNode.append('<li>'
					+'<span class="i">'+index+'</span>'
					+this.formatAction(action)
					+'</li>');
		},
		
		getActiveActions : function() {
			var actions = this._actions,
				index = this.get("index");

			var active	= [];
			for (var i=0; i < index; i++) {
				var action = actions[i];
				active[i] = {
					type:action.type,
					annotation:action.annotation
				};
				if(action.newvalue) { 
					active[i].newvalue = action.newvalue;
				}	
			}
			return active;
		},
		
		disableAll : function() {
			this.set("index", 0);
			this._actions = [];
			this._listNode.setContent("");
			/*
			this.set("index", 0);
			this._listNode.all("li").each(function(node, i) {
				node.addClass("disabled");
			});*/
		},
		
		_itemSelect : function(e) {
			var nodes = e.container.all("li");
				index = nodes.indexOf(e.currentTarget),
				actions = this._actions,
				undo = [];
			
			// We store the current index, so later we know 
			// which actions are undos and redos
			this.set("index", index);
			
			// The redo actions are indicated by CSS class "disabled"
			// and collected in the history array which is send in the
			// undo event.
			for (var i=index; i < nodes.size(); i++) {
				nodes.item(i).addClass("disabled");
				undo.push(actions[i]);
			};
			Y.log("undo "+undo);
			this.fire("undo", {history:undo});
		}
				
	});
	  
}, 'gallery-2010.03.02-18' ,{requires:['node','widget']});