Fx.MorphList = new Class({   
	
	Implements: [Events, Options],
	
	options: {/*             
		onClick: $empty,
		onMorph: $empty,*/
		bg: {'class': 'background', html: '<div class="inner"></div>', morph: {link: 'cancel'}},
		timelineId: 'timeline',
		timelineOffset: 9,
		timelineWidth: 900	
	},
	
	current: null,
	
	initialize: function(element, options){
		var self = this;
		this.setOptions(options);
		this.element = $(element);		
		this.items = this.element.getChildren().addEvents({
			click: function(ev){ self.onClick(ev, this); }
		});       
	
		this.timelineContainer = $(this.options.timelineId);
		this.timelineEffects = new Fx.Morph(this.timelineContainer, {duration: 500, onComplete:(this.markCurrent).bind(this)});

		this.setCurrent(this.element.getElement('.current'));
	},
	
	onClick: function(ev, item){
		this.setCurrent(item, true).fireEvent('click', [ev, item]);
	},
	
	markCurrent: function(){
		this.current.addClass('current');
	},
	
	setCurrent: function(el, effect){  
		if (this.current) {
			this.current.removeClass('current');			
		}
		if (el) {
			this.current = el;  
			//timeline
				var linkCoords = el.getCoordinates();

				var deltaX = linkCoords.left - this.timelineContainer.getLeft() + linkCoords.width / 2 + this.options.timelineOffset;
	
				(this.timelineEffects.start({'background-position':  - (this.options.timelineWidth - deltaX)}));
			//end timeline
			

		}			
		return this;
	}

});